資源描述：
《網(wǎng)頁制作與網(wǎng)站設(shè)計教程.ppt》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、第四周網(wǎng)頁制作與網(wǎng)站設(shè)計教程淮安信息職業(yè)技術(shù)學(xué)院計算機科學(xué)與工程系網(wǎng)頁制作與網(wǎng)站設(shè)計課程組制第八章網(wǎng)站建設(shè)實例淮安信息職業(yè)技術(shù)學(xué)院網(wǎng)站建設(shè)實例——網(wǎng)頁制作與網(wǎng)站設(shè)計課程講義第八章網(wǎng)站建設(shè)實例本章要點網(wǎng)頁設(shè)計的流程事業(yè)單位網(wǎng)站的設(shè)計思路Photoshop路徑的描邊技巧Dreamweaver滿屏網(wǎng)頁制作的技巧淮安信息職業(yè)技術(shù)學(xué)院網(wǎng)站建設(shè)實例---項目背景第八章網(wǎng)站建設(shè)實例淮安信息職業(yè)技術(shù)學(xué)院是經(jīng)江蘇省人民政府批準、教育部備案的一所全日制?？茖哟蔚钠胀ǜ叩葘W(xué)校。網(wǎng)頁界面要簡潔、大氣能反映學(xué)院的性質(zhì)。中國電信淮安分公司
2、10000號服務(wù)網(wǎng)站---參考淮安信息職業(yè)技術(shù)學(xué)院網(wǎng)站建設(shè)實例---效果圖的制作第八章網(wǎng)站建設(shè)實例1.打開Photoshop軟件，新建文件命名為“淮安信息職業(yè)技術(shù)學(xué)院”，寬為770像素，高為430像素。2.使用矩形選區(qū)工具選區(qū)矩形選區(qū)，設(shè)置前景色為藍色（RGB值為0859AD）在圖像中畫一個矩形，然后用“油漆桶工具”將其填充（快捷鍵〈Ctrl+Delete〉）,如圖所示?；窗残畔⒙殬I(yè)技術(shù)學(xué)院網(wǎng)站建設(shè)實例---效果圖的制作第八章網(wǎng)站建設(shè)實例3.打開素材文件夾，找到“實驗樓”圖片，用橢圓工具將主樓選中如圖8-27所
3、示：用多邊形工具減去局部可得如圖所示圖形?；窗残畔⒙殬I(yè)技術(shù)學(xué)院網(wǎng)站建設(shè)實例---效果圖的制作第八章網(wǎng)站建設(shè)實例4.將所選擇的樓主體復(fù)制并粘貼到新圖中，然后執(zhí)行“編輯”→“自由編輯”命令，調(diào)整圖像的大小（注意要保持圖像的等比例變化）效果如圖所示?；窗残畔⒙殬I(yè)技術(shù)學(xué)院網(wǎng)站建設(shè)實例---效果圖的制作第八章網(wǎng)站建設(shè)實例5.在圖層面板中點擊按鈕，執(zhí)行“投影”命令，如圖所示的界面，設(shè)置投影選項，可得效果如圖所示?；窗残畔⒙殬I(yè)技術(shù)學(xué)院網(wǎng)站建設(shè)實例---效果圖的制作第八章網(wǎng)站建設(shè)實例6.在工具箱中選中“橢圓工具”，在屬性選項中
4、選中繪制橢圓型路徑按鈕，在圖像中繪制橢圓路徑，執(zhí)行“編輯”→“自由編輯”命令，對其進行大小調(diào)整與旋轉(zhuǎn)轉(zhuǎn)換，同理繪制第二個橢圓，如圖。淮安信息職業(yè)技術(shù)學(xué)院網(wǎng)站建設(shè)實例---效果圖的制作第八章網(wǎng)站建設(shè)實例7.建一個圖層，設(shè)置前景色為淺藍色，回到路徑面板選擇路徑后點擊描邊按鈕，即可得到如圖8-33所示的效果，為了使橢圓和樓主體形成立體效果，用橡皮工具擦除部分圖像，最終效果如圖?；窗残畔⒙殬I(yè)技術(shù)學(xué)院網(wǎng)站建設(shè)實例---效果圖的制作第八章網(wǎng)站建設(shè)實例8.新建圖層，使用“橢圓選框工具”在圖層中畫一個適中的小圓圈，前景色設(shè)置為
5、藍色（RGB值為0859AD）然后用漸變工具填充這個小圓，然后復(fù)制該圖層（快捷鍵為〈Ctrl+J〉），復(fù)制同樣的小圓圖層4次，再將這幾層相鏈接起來，使用“移動工具”，對這幾層進行排列，使其和諧排列在橢圓線上，最終可以等到如圖所示?；窗残畔⒙殬I(yè)技術(shù)學(xué)院網(wǎng)站建設(shè)實例---效果圖的制作第八章網(wǎng)站建設(shè)實例9.選中小球所在的圖層，在圖層面板中點擊按鈕，執(zhí)行“投影”命令，對以小球圖層增加投影效果，參數(shù)如左圖所示，最終效果如右圖?；窗残畔⒙殬I(yè)技術(shù)學(xué)院網(wǎng)站建設(shè)實例---效果圖的制作第八章網(wǎng)站建設(shè)實例10.打開素材文件夾中的院標
6、文件“院標.psd”，將院標拖到效果圖中，放到適當?shù)奈恢?，調(diào)整大小，效果如圖所示?；窗残畔⒙殬I(yè)技術(shù)學(xué)院網(wǎng)站建設(shè)實例---效果圖的制作第八章網(wǎng)站建設(shè)實例11.打開素材文件夾中的院名文件“院名.psd”，將院名標拖到效果圖中，放到適當?shù)奈恢?，然后設(shè)置圖層的混合模式為“點光”模式，效果如圖所示。淮安信息職業(yè)技術(shù)學(xué)院網(wǎng)站建設(shè)實例---效果圖的制作第八章網(wǎng)站建設(shè)實例12.在院名下面寫上“HuaianCollegeofInformationTechnology”的文字,為了加強院名與英文名稱的區(qū)別，新建一個圖層，在新圖層上
7、用單橫線選取工具選取一條單橫線，并用淺藍色填充，然后將該圖層點擊【添加矢量蒙版】按鈕，在蒙板圖層上用漸變工具進行填充，多次調(diào)整后最終得到效果如圖所示?；窗残畔⒙殬I(yè)技術(shù)學(xué)院網(wǎng)站建設(shè)實例---效果圖的制作第八章網(wǎng)站建設(shè)實例13.用文字工具在左起第一個小球下寫入“新區(qū)建設(shè)”，并調(diào)整這幾個字的大小與字體，最后再給這幾個字增加投影效果同理將“招生就業(yè)”，“圖書館”，“教務(wù)頻道”，“人才招聘”等都寫入，也運用同樣的效果，如圖所示?；窗残畔⒙殬I(yè)技術(shù)學(xué)院網(wǎng)站建設(shè)實例---效果圖的制作第八章網(wǎng)站建設(shè)實例14.用文字工具寫入“學(xué)院
8、概括”，“系部概況”，“公共服務(wù)”，“啟迪網(wǎng)站”，設(shè)置為白色，效果如圖所示?；窗残畔⒙殬I(yè)技術(shù)學(xué)院網(wǎng)站建設(shè)實例---效果圖的制作第八章網(wǎng)站建設(shè)實例15.用矩形工具繪制一個大矩形，填充為藍色，再在其中減去一個小矩形，減去右上的一小部分，就可得到一個新聞框圖，對該框圖層增加陰影效果，如圖所示?；窗残畔⒙殬I(yè)技術(shù)學(xué)院網(wǎng)站建設(shè)實例---效果圖的制作第八章網(wǎng)站建設(shè)實例16.增加一些輔助性的的圖標，添
