附件二創建網站《全瀚通信》（前導）

項目簡介本項目以全瀚通信網站為例，設計制作一個企業網站。

本章節對應的工作崗位是網頁美工，我們以“全瀚通信”企業網站為例，示范如何設計制作網頁美工圖，以及如何進行網頁切片。工作完成后，將結果完美的交付給前端設計師。

項目目標1．熟練使用Photoshop設計網頁美工圖；

2．能根據設計需求進行頁面布局、色彩搭配；

3．掌握“生成圖像資源”切片工具的使用；

4．切片時綜合考慮網頁布局的需要，并遵守切片的規范。

工作任務本項目具體工作任務為：

(1)設計制作兩張網站美工圖：首頁和二級頁面，規劃網站的欄目和功能；

(2)對美工圖進行切片生成圖片素材，為進一步在Dreamweaver中進行頁面布局做好準備；

任務一繪制美工圖

任務目標在PhotoshopCC2015中繪制網站首頁美工圖，并舉一反三，自行研究繪制網站二級頁面美工圖。

知識準備一美工圖設計前期準備

前期準備一理解客戶需求

前期準備二繪制網頁草圖

前期準備三準備圖片素材創建方法一，選擇圖層——右鍵——創建剪貼蒙版（Ctrl+Alt+G）；釋放方法：點擊圖層——右鍵——釋放剪貼蒙版（Ctrl+Alt+G）。創建方法二，選擇上面的剪貼圖層，按住Alt鍵，將鼠標放在兩個圖層之間，鼠標會變成帶有一個箭頭，點擊，創建完成；釋放方法：按住Alt鍵，將鼠標放在兩個圖層之間點擊即可。知識準備二剪貼蒙板

知識準備三FontAwesome圖標字體的使用1.下載字體。FontAwesome中文網地址：2.在fonts文件夾中找到FontAwesome.otf文件，雙擊安裝字體3.重啟Photoshop，確保字體被載入4.打開圖標庫：/faicons/，找到想要的圖標，將其復制下來5.回到Photoshop,使用字體工具將復制的內容粘貼到畫布上，將字體改為剛剛安裝的FontAwesome字體。步驟一新建畫布及保存PSD文件步驟二確定版面框架步驟三網頁頭部的制作步驟四網頁橫幅制作步驟五主體部分制作步驟六網頁底部制作

任務實施——具體參見教材

任務二網頁切片網頁美工圖繪制完畢，接下來的工作是由前端工程師將美工圖布局成為網頁。而“網頁切片”則是從PSD到HTML的關鍵性的一步。在Photoshop中進行網頁切片，也是網頁美工的必備技能。本次任務研究網頁切片的技巧及規范，在PhotoshopCC2015中對首頁美工圖進行切片，并舉一反三，自行研究二級頁面美工圖的切片方法。

任務目標

知識準備一網頁切片簡介網頁切片的作用：(1)提高網頁加載速度，節約系統資源；(2)更好的對頁面元素進行定位；(3)有效地減少頁面文件的大小

知識準備二切片工具——生成圖像資源(1)勾選工具欄中的“自動選擇圖層”，方便圖層的選擇；(2)在“文件”>“生成”菜單下勾選“圖像資源”，使之可用；(3)把圖層名稱或者圖層組名稱加上格式后綴，如.jpg、.png，這時候，圖層或者組就作為一個切片自動導出；(4)默認導出的位置位于PSD文件的同一存儲位置，在”-assets“的文件夾下。

知識準備三切片規范頁頭：header標志：logo導航：nav橫幅：banner頁面主體：main側欄：sidebar欄目：column內容：content/container搜索：search頁腳：footer版權：copyright友情鏈接：friendlink背景：background/bg子導航：subnav菜單：menu新聞：news下載：download服務：service熱點：hot登錄：login子菜單：submenu滾動：scroll/slide標簽頁：tab文章列表：list注冊：regsiter提示信息：msg小技巧：tips加入：joinus欄目標題：title指南：guild合作伙伴：partner狀態：status投票：vote1.在Photoshop中打開“全瀚通信_首頁.psd”文件；2.勾選工具欄中的“自動選擇圖層”，勾選菜單“文件”>“生成”>“圖像資源”；3.觀察美工圖，識別哪些屬于布局需要的圖片，哪些屬于內容需要的圖片。布局圖片用于在DIV+CSS寬度高度及位置屬性設置時有所參考，而內容需要的圖片則真正的用于網頁中；4.根據我們的美