如何用Photoshop制作網頁模板簡單網頁模板下載 _經驗分享

如何建立一個網頁模板一個企業想要建設網站，那么網頁模板是必須要設計的，網頁模板用于創建一個頁面，只此一次，保持外觀的任何未來的網頁均勻，用很少的努力。使用模板，輕松創建網站的設計，因為任何問題制定了事前，你可以簡單地復制文件，需要多次。考慮到一些必備物品，你創造了堅實的建筑塊，并把所有的部件需要創建一個成功的模板。第2步設計了導航欄，以容納您的文檔的鏈接。在圖形應用程序，您可以構建功能，如煙花，或使用自動工具欄生成器（請參閱參考資料）。將這個文件保存在同一文件夾為您的模板，以便它可以很容易地添加到頁面中。第3步創建或找到一個級聯樣式表（CSS）模板風格的布局。整體外觀的CSS格式的內容，如字體樣式和背景顏色，并保持頁面的代碼的光，所以它不會有很長的加載時間發布時。使用HTML文本編輯器，如BBEdit中，開發自己的樣式規則或在網絡上得到一個現成的模板。命名和“CSS”擴展名保存文件，并將其放置在您的模板將是相同的目錄中。第4步生成或準備必要為您的網頁的任何圖像，如徽標或圖標。圖形程序，如煙花，配備了易于使用的接口，以幫助你創造的原始藝術。一定要放置在適當的位置以便于訪問的文件（S）。第5步啟動你的HTML文本編輯器，并為你的網頁模板創建一個新的文件。第6步請參閱您的草圖，在最合適的地方建立自己的模板，然后輸入先前構建的組件。第7步你的CSS文件鏈接到您的網頁文件。第8步將文件命名為“模板”或類似的東西，將它保存。現在，您可以在需要的時候復制。
如何制作網頁模板首先你要明白網頁制作的流程：
1、網頁設計師（主要是用PS）先將網頁設計出來。
2、進行網頁制作，就是切片，div+css布局，將圖片變成網頁。
3、后臺制作。可以自己開發，也可以套用cms，如dedecms，phpcms 。等
4、具體步驟就是這樣。詳細的牽扯到一些技術，就是html，div+css,js，（jquery,js框架）。
后臺目前流行PHP語言。這些都是基礎
5、需要學習的有，html，div+css， js （jquery）， php等。
教程網站，百度“W3C”，即可
如果你只是制作模板，那么就學習html，div+css， js （jquery）即可
簡單網頁制作一、FrontPage 2003簡介
FrontPage 2003是由Microsoft公司推出的Office 2003組件之一。FrontPage 2003的啟動與退出、文件的打開與保存與Office系列中其他軟件相同。FrontPage 2003啟動后，主窗口如圖6-61所示，菜單部分外貌與Office中的其他軟件相似。
與以往的版本相比，FrontPage 2003有以下幾個新功能：
（1）自定義瀏覽器分辨率預覽檢查；
（2）描摹圖像；
（3）層功能；
（4）插入交互式按鈕；
（5）行為的應用；
（6）使用網頁重定向；
圖6-61 FrontPage 2003啟動界面
圖6-62“新建”任務窗格
（7）檢查網頁錯誤；
（8）優化HTML代碼；
（9）規劃頁面布局。
二、制作簡單網頁
我們在前面已經學會了用Word進行排版，其實你已經會制作一個簡單網頁了，只需將原來排好的Word文檔，另存時選擇保存類型為“Web頁（*.htm；*.html）”就可保存為一個網頁文件。
下面我們用FrontPage 2003制作一個簡單網頁。步驟如下：
1.啟動FrontPage 2003
選擇“開始”/“所有程序”/“Microsoft Office”/“FrontPage 2003”命令，打開如圖6-61所示的界面。
圖6-63 新的空白的網頁
圖6-64“網頁模板”對話框
2.建立新網頁
選擇“文件”/“新建…”菜單命令，打開“新建”任務窗格，如圖6-62所示。單擊“空白網頁”，也可以通過工具欄上的“新建”按鈕建立一個新的空白的網頁。如圖6-63所示。
如果要根據 Microsoft FrontPage 的模板創建網頁，單擊“其他網頁模板”，打開如圖6-64所示的“網頁模板”對話框，再單擊所需模板類型的選項卡，然后單擊某個模板。
3.輸入如下內容
圖6-65
4.編輯操作
網頁中的文本編輯操作與Word的編輯操作類似。
本例中，將“我的第一個網頁”應用“標題一”樣式，并設為隸書，水平居中；將“你好！歡迎光臨”應用“標題二”樣式，將其余內容應用“普通”樣式，并將行距設為“1.5倍行距”，設置完成后效果如圖6-65所示。
5.保存網頁文件
選擇“文件”/“保存”命令，彈出“另存為”對話框，指定保存位置和文件名，然后單擊“保存”按鈕即可完成操作。
三、制作多媒體個人主頁
我們以制作一個簡易的個人網站為例，進一步學習使用FrontPage 2003 。
1.規劃
網站規劃包括規劃網站的風格、網站的結構和網站的配色等，是對網站的整體定位。本例設置了6個欄目，包括首頁、自薦信、個人簡歷、榮譽證書、才藝展示、聯系方式，鏈接的文件名分別為index.htm、zijian.htm、jianli.htm、zhengshu.htm、zhanshi.htm、lianxi.htm 。當然也可以結合自己情況進行修改。頁面布局如圖6-66所示。
2.建立網站
在FrontPage 2003中，所謂網站，就是一些網頁和程序的集合，各個網頁之間通過超鏈接聯系在一起，所有的網頁和文件保存在一個文件夾中，通過網站把這些文件和網頁統一起來。本地網站是指本地硬盤上用來存放整個網站的所有文檔的文件夾。遠程網站是指網絡服務器上的網站，供用戶瀏覽。
建立一個新網站，事實上就是建立一個單獨的文件夾，然后在這個文件夾中建立各個網頁文件，并且把它們鏈接在一起。
網頁制作可以在新建網站中完成，也可以像前面那樣單獨新建一個網頁。建議用新建網站的方法來制作網頁。
下面我們首先創建新的FrontPage網站：
（1）在“文件”菜單上，單擊“新建”，出現如圖 6-66 所示的“新建”任務窗格。
圖6-66
（2）在“新建”任務窗格中，單擊“由一個網頁組成的網站” 。
（3）在“網站模板”對話框中，在“常規”選項卡下，單擊需要的網站模板，本例選擇“只有一個網頁的網站”，并在指定新網的位置欄中，鍵入或選擇新網的路徑及名稱，這里我們將默認的mysite改為myhome，如圖6-67所示，然后單擊“確定”按鈕，出現創建新網站對話框，完成站點創建，完成后如圖6-68所示。左邊一列是文件夾列表，可以通過右鍵快捷菜單新建文件夾，對文件或文件夾進行復制、刪除、重命名等操作。
圖6-67“網站模板”對話框
圖6-68
3.準備素材
將本例所需的圖片動畫素材復制到網站內的images文件夾下。
4.制作主頁頁眉
在“網頁”視圖中的文檔窗口底部，單擊“設計”
。
在文件夾列表中雙擊index.htm，打開該網頁并進入編輯狀態，開始首頁制作。
（1）設置網頁大小在“視圖”菜單上，指向“網頁大小”，單擊
設置網頁大小。
（2）設置網頁背景在“網頁”視圖中的文檔窗口底部，單擊“設計”
，右擊網頁編輯區，在彈出菜單中單擊“網頁屬性”項，彈出“網頁屬性”對話框，在標題框內輸入“歡迎訪問小慧的個人電子簡歷”；單擊“格式”選中格式選項卡，選中背景欄下的“背景圖片”，并單擊“瀏覽”按鈕選擇背景圖片。如圖6-69所示。單擊“確定”按鈕完成網頁背景設置。也可在“格式”菜單上單擊“背景”來設置。
（3）插入一個一行兩列的表格方法與在Word中插入表格相同。
在顯示設計視圖模式下，通過常用工具欄的“插入表格”按鈕，或在“插入”菜單上，指向“插入”，在級聯菜單中單擊“表格”；右擊插入的表格，在彈出菜單中單擊“表格屬性”，并將單元格襯距、單元格間距和粗細欄均設為0，如圖6-70所示，單擊“確定”按鈕。
圖6-69 網頁屬性
圖6-70 表格屬性
（4）在第一個單元格內插入圖片將插入點放在第一個單元格，在“插入”菜單上，指向“圖片”，再單擊“來自文件” 。找到要添加的文件（網站下images文件夾下的logo.gif），如圖6-71所示，然后單擊“插入” 。
更簡單的方法是從文件夾列表拖動圖片文件到編輯區指定的位置即可。
（5）在第二個單元格內插入Flash動畫單擊第二個單元格，在“插入”菜單上，指向“圖片”，再單擊“Flash影片” 。彈出與圖6-71相似的“選擇文件”對話框，找到要添加的文件（網站下images文件夾下的banner_007.swf），然后單擊“插入” 。
（6）在第一個表格下插入一個1行1列的表格同樣將單元格襯距、單元格間距和粗細欄均設為0，設置好背景顏色，本例是選的其他顏色，如圖6-72所示，在“值”文本框中輸入Hex={C1，E8，C9} 。
（7）制作滾動字幕在第二個表格的單元格內單擊，在“插入”菜單上，單擊“Web組件”，彈出插入Web組件對話框，默認選中的是字幕，因此單擊“完成”按鈕，彈出字幕屬性對話框，在“文本”框內輸入：衷心感謝您垂閱我的簡歷，單擊“確定”按鈕。如圖6-73所示。
圖6-71 插入圖片對話框
【如何用Photoshop制作網頁模板簡單網頁模板下載】圖6-72“其他顏色”對話框
5.制作正文和頁腳
（1）在第二個表格下插入一個1行2列的表格，同樣將單元格襯距、單元格間距設為0，但粗細設為1，暗邊框設為白色，亮邊框則設為其他顏色，在如圖6-72所示的“值”文本框中輸入Hex={99，CC，FF} 。
（2）設置單元格背色。右擊此表格的第一個單元格，在彈出菜單中單擊“單元格屬性”，彈出如圖6-74所示的對話框，背景設為其他顏色，在如圖6-72所示的“值”文本框中輸入Hex={F1，F5，FC} 。同樣方法將第二個單元格設為白色。
圖6-73 字幕屬性對話框
圖6-74 單元格屬性
（3）調整單元格寬度，使之與第一個表格相同。
（4）在第一個單元格內插入一個8行1列的表格，并將單元格襯距、單元格間距和粗細欄均設為0 。在單元格屬性中將單元格對齊屬性設為水平居中，垂直居中，行高調整為40 。
在剛插入的表格第二行內插入圖片homepage.gif，并在其后輸入“首頁”；在第三行內插入圖片sub_dot.gif，并在其后輸入“自薦信”，后面四行插入的圖片均為sub_dot.gif，輸入的文字依次為“個人簡歷”、“榮譽證書”、“才藝展示”、“聯系方式” 。
（5）在表格三的第二個單元格內插入一個3行3列的表格，并將單元格襯距、單元格間距和粗細欄均設為0 。將中間一列調寬一些。
在該表格第一行第二列中輸入“自薦信”，在第二行第二列輸入自薦信的內容。設為1.5倍行距。
（6）在表格三后面插入一個2行1列的表格，并將單元格襯距、單元格間距和粗細欄均設為0；并且第一個單元格背景色設為與表格二背景色相同，在第二個單元格內輸入“聯系電話：023-683568XX E-mail：xiaohui＠163.com”并設為居中。
6.鏈接網站文件
選中要建立超鏈接的文字或圖像，單擊常用工具欄中的“插入超鏈接”按鈕或在“插入”菜單上單擊“超鏈接”，或者是右擊選中區域并單擊“超鏈接”，均可打開“插入超鏈接”對話框。如圖6-75所示。
圖6-75“插入超鏈接”對話框
（1）選中“首頁”，單擊常用工具欄中的
按鈕，在打開的如圖6-75所示的“插入超鏈接”對話框中，在“地址”框內輸入index.htm，并單擊“確定”按鈕。
（2）用同樣的方法將“自薦信”鏈接到zijian.htm、“個人簡歷”鏈接到jianli.htm、“榮譽證書”鏈接到zhengshu.htm、“才藝展示”鏈接到zhanshi.htm、“聯系方式”鏈接到lianxi.htm 。
7.保存文件，按F12鍵預覽網頁
四、制作本網站內其他頁面
首先在文件夾列表中將 index.htm 復制 5個，分別重命名為 zijian.htm、jianli.htm、zhengshu.htm、zhanshi.htm、lianxi.htm 。只需將每個文件中自薦信部分修改為相應內容即可，頁眉、超鏈接欄和頁腳均不變。
五、網站發布
當我們完成上述內容后，需將制作的網頁發布到Internet上的Web服務器中，才能供網上的訪問者瀏覽。首先要到Internet服務提供商（ISP）那里申請購買存放網頁的空間和域名，以前有很多網站（如網易等）都提供免費的個人主頁存放空間，現在相對較少了，中國學生網仍在提供50M免費空間服務，大家可到http://web.6to23.com/去申請一個免費空間。
發布網站可以使用專門的FTP工具。但為了給用戶提供方便，FrontPage 2003內置了網頁發布功能，利用它，只需進行簡單的設置，就可以輕松地完成網站發布任務。FrontPage 2003中的遠程網站視圖可以幫助我們將整個網站或單獨的文件和文件夾發布到任何位置：擴展的 Web 服務器、支持文件傳輸協議（FTP）或基于 Web 的分布式創作和版本控制（WebDAV）的Web服務器或文件系統中的某個位置。
下面我們利用FrontPage 2003及文件傳輸協議（FTP）發布網站，步驟如下：
1.打開FrontPage網站
在“文件”菜單中單擊“打開網站”或單擊工具欄上的“打開”按鈕邊上的下拉標志，從下拉菜單中選“打開網站”，在彈出的“打開網站”對話框中找到需要打開的網站并單擊“打開”按鈕。
2.轉至“遠程網站”視圖
若要轉至該視圖，請單擊“網站”選項卡，然后單擊窗口底部的“遠程網站”按鈕。或在“視圖”菜單上，單擊“遠程網站” 。如圖6-76所示。
3.設置“遠程網站屬性”
在文檔窗口頂部，單擊“遠程網站屬性” 。在彈出的對話框中，在“遠程網站”選項卡上，在“遠程 Web服務器類型”下，單擊“FTP” 。在“遠程網站位置”框中，鍵入自己所選定的遠程網站的地址及 FTP 協議（本例中輸入“ftp://125.91.6.75”），如圖6-77所示。單擊“確定”按鈕，在打開的“要求提供用戶名和密碼”對話框中輸入ISP提供的用戶名和密碼，單擊“確定”按鈕。如圖6-78所示。
圖6-76
圖6-77
4.發布網站
通過單擊窗口右下角的“發布網站”按鈕即可發布所有文件。也可發布單個文件，在本地網站選擇一個文件，然后單擊“本地到遠程”按鈕
。如圖6-79所示。
圖6-78
圖6-79
如何用Photoshop制作網頁模板網頁中的元素有很多，像Banner條、文本框、文字、版權、Logo、廣告等。盡量把這些相對獨立的元素放在不同的圖層中，這樣方便以后的再編輯。不過圖層一多，就顯得很凌亂，可建立多個圖層組來進行管理。單擊圖層面板右上角的小三角按鈕，從彈出菜單中選擇“新建組”，在隨后出現的對話框中為新建組取一個名稱(如：“網頁頂部”)，確定即可。這時圖層面板中多出一個文件夾圖標，即圖層組。把相關聯的圖層都拖放到同一組中，比如網頁頂部的所有元素，標題、菜單、Logo等都放到“網頁頂部”組中(見圖1) 。同樣方法可以建立多個組，在組的下面還可以建立子組。點擊圖層組前面的小三角，就可以像文件夾一樣展開或折疊它，這樣圖層面板就顯示干凈利落得多，要修改某個元素也能很容易找到。對同一組中的所以圖層可以方便地進行統一操作，如整體復制、刪除、隱藏、合并等。小提示：

如何用Photoshop制作網頁模板 簡單網頁模板下載

如何用Photoshop制作網頁模板簡單網頁模板下載