《網(wǎng)頁設(shè)計與制作教程HTML+CSS+Bootstrap》課件 附件二 創(chuàng)建網(wǎng)站全瀚通信（前導(dǎo)）

附件二創(chuàng)建網(wǎng)站《全瀚通信》（前導(dǎo)）

項目簡介本項目以全瀚通信網(wǎng)站為例，設(shè)計制作一個企業(yè)網(wǎng)站。

本章節(jié)對應(yīng)的工作崗位是網(wǎng)頁美工，我們以“全瀚通信”企業(yè)網(wǎng)站為例，示范如何設(shè)計制作網(wǎng)頁美工圖，以及如何進(jìn)行網(wǎng)頁切片。工作完成后，將結(jié)果完美的交付給前端設(shè)計師。

項目目標(biāo)1．熟練使用Photoshop設(shè)計網(wǎng)頁美工圖；

2．能根據(jù)設(shè)計需求進(jìn)行頁面布局、色彩搭配；

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

4．切片時綜合考慮網(wǎng)頁布局的需要，并遵守切片的規(guī)范。

工作任務(wù)本項目具體工作任務(wù)為：

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

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

任務(wù)一繪制美工圖

任務(wù)目標(biāo)在PhotoshopCC2015中繪制網(wǎng)站首頁美工圖，并舉一反三，自行研究繪制網(wǎng)站二級頁面美工圖。

知識準(zhǔn)備一美工圖設(shè)計前期準(zhǔn)備

前期準(zhǔn)備一理解客戶需求

前期準(zhǔn)備二繪制網(wǎng)頁草圖

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

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

任務(wù)實施——具體參見教材

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

任務(wù)目標(biāo)

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

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

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