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