資源描述：
《網(wǎng)頁草圖設(shè)計實例》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、網(wǎng)頁草圖設(shè)計實例繪制草圖是為了能夠得到整體的頁面結(jié)構(gòu)，制作者通過網(wǎng)頁草圖與客戶進(jìn)行溝通，從而確定網(wǎng)站外觀、功能和一些特效，知道客戶這樣能減滿意為止，這樣能減少麻煩。同時如果在設(shè)計頁面階段還沒有完全確定整個網(wǎng)站的功能，那么在以后的開發(fā)過程中會浪費很長時間去修改，并且從頁面設(shè)計到網(wǎng)頁制作這個過程是不可逆的過程。同時草圖文件還可以作為Dreamweaver中的跟蹤圖像，使用軟件設(shè)計草圖，效果如圖所示。制作網(wǎng)站首頁草圖的具體操作步驟。（1）執(zhí)行“文件”
2、“新建”命令，新建文檔。（圖像大?。?60×900像素）（2）打開“sky.jpg”、“建筑.jpg”文件。（3）工具箱中選擇“移動工
3、具”，將“sky.jpg”文件拖到新建“網(wǎng)頁草圖”文件上，圖層重命名為“天空”。將“建筑.jpg”文件拖到新建“網(wǎng)頁草圖”文件上，圖層重命名為“建筑”。（4）當(dāng)前層為“建筑”圖層，按【Ctrl+T】組合鍵調(diào)整圖像大小，按【Enter】確定。（5）為“建筑”圖層添加圖層蒙版。（6）工具箱中設(shè)置“前景色/背景色”為默認(rèn)的“黑色/白色”（#000000/#ffffff）。工具箱中選擇“漸變工具”，選擇“前景色到背景色的漸變”，在“建筑”圖層蒙版上從左到右拖動鼠標(biāo)填充。（7）工具箱中選擇“畫筆工具”，前景色黑色#000000，畫筆直徑70px，硬度0%，在“建筑”圖層蒙板上涂抹對圖像遮
4、罩，效果如圖所示。（8）打開“人物.gif”文檔，執(zhí)行“圖像”
5、“模式”
6、“RGB顏色”命令，將圖像轉(zhuǎn)換成RGB顏色模式。（9）工具箱中選擇“移動工具”，把“人物.gif”圖像拖動到“網(wǎng)頁草圖”文件上，該圖層重命名為“人物”。（10）打開images文件夾中的“l(fā)ogo.gif”文件。執(zhí)行“圖像”
7、“模式”
8、“RGB顏色”命令。（11）工具箱中選擇“移動工具”，把“l(fā)ogo.gif”圖像拖動復(fù)制到“網(wǎng)頁草圖”文件上，該圖層重命名為“Logo”。（12）工具箱中選擇“文字工具”，輸入文字，效果如圖所示。（13）圖層面板上，新建“組1”，重命名為“top”，并將除背景層以外的圖層拖
9、動到“top”組中，如圖所示。（14）圖層面板上，新建“組1”，重命名為“導(dǎo)航欄”。在“導(dǎo)航欄”組中新建“圖層1”重命名為“導(dǎo)航欄背景”，工具箱中選擇“矩形選框工具”，在“導(dǎo)航欄背景”圖層上創(chuàng)建矩形選區(qū)。（15）前景色設(shè)置為#f45209，按【Alt+Del】組合鍵填充前景色。按【Ctrl+D】組合鍵取消選區(qū)。（16）設(shè)置前景色為白色#ffffff，工具箱中選擇“文字工具”，輸入文字，效果如圖所示?！?/p>
10、”與文字之間有一個空格。17）圖層面板上，新建“組1”，重命名為“主體”，新建“圖層1”重命名為“主體右”，執(zhí)行“視圖”
11、“標(biāo)尺”命令，顯示出標(biāo)尺線，并拖出標(biāo)尺輔助線。工具箱中選
12、擇“矩形選框工具”，選項卡欄設(shè)置如圖所示。在“主體右”圖層上單擊創(chuàng)建矩形選區(qū)與標(biāo)尺重合。（18）設(shè)置前景色為#4bb2f5，按【Alt+Del】組合鍵填充前景色，按【Ctrl+D】組合鍵取消選區(qū)，效果如圖所示。（19）工具箱中選擇“矩形選框工具”。選項卡欄設(shè)置如圖所示。在“主體右”圖層上單擊創(chuàng)建矩形選區(qū)，如圖所示。（20）執(zhí)行“編輯”
13、“描邊”命令，單擊【確定】按鈕。效果如圖所示。（21）圖層面板上，新建兩個圖層，分別重命名為“主體右中”、“主體右下”，同理繪制其它兩個主體部分，文字的背景選區(qū)的大小為200px×27px，描邊選區(qū)的大小分別為200px×157px、200px×
14、194px，效果如圖所示。（22）工具箱中選擇“文字工具”，輸入文字。（23）圖層面板上，新建兩個圖層，分別重命名為“主體左上”、“主體左下”。繪制左側(cè)兩個主體部分，文字的背景選區(qū)的大200px×27px，描邊的選區(qū)的大小分別為200px×251px，200px×190px，效果如圖所示。（24）打開“l(fā)anmu.gif”、“xian3.gif”文件。執(zhí)行“圖像”
15、“模式”
16、“RGB模式”命令。（25）圖層面板上，新建“組1”，重命名為“主體中”。工具箱中選擇“移動工具”，將“l(fā)anmu.gif”文件拖動到“網(wǎng)頁草圖”文件中，圖層重命名為“欄目”。將“xian3.gif”文件拖
17、動到“網(wǎng)頁草圖”文件中，圖層重命名為“線3”?！熬€3”和“欄目”圖層都位于“主體中”組中。（26）按【Ctrl+T】組合鍵，豎直方向上調(diào)整“線3”的大小，按【Enter】確定。（27）工具箱中選擇“移動工具”，按【Alt】鍵拖動鼠標(biāo)復(fù)制“線3”圖像，并移動到“欄目”圖像右邊，如圖所示。（28）工具箱中選擇“移動工具”，按【Alt】鍵拖動鼠標(biāo)復(fù)制“線3”圖像。執(zhí)行“編輯”
18、“變換”
19、“旋轉(zhuǎn)90度（順時針）”命令，并移動圖像到合適位置，按【Ctrl+T】組合鍵。水平方向上調(diào)整該圖像，按【Ente
