《網(wǎng)頁(yè)設(shè)計(jì)與制作》第五章 綜合實(shí)例：結(jié)合之前的實(shí)例練習(xí)進(jìn)行網(wǎng)站的綜合制作

網(wǎng)頁(yè)設(shè)計(jì)與制作/第一章/網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)知識(shí)目錄/第二章/Photoshop基礎(chǔ)教程/第三章/FlashCS6基礎(chǔ)教程/第四章/Dreamweaver基礎(chǔ)教程/第五章/綜合實(shí)例：結(jié)合之前的實(shí)例練習(xí)進(jìn)行網(wǎng)站的綜合制作第五章綜合實(shí)例：結(jié)合之前的實(shí)例練習(xí)進(jìn)行網(wǎng)站的綜合制作一、確定設(shè)計(jì)原稿的切片尺寸（1）在PS軟件中打開(kāi)配套素材中的設(shè)計(jì)原稿“主頁(yè)切片”。（2）在菜單欄中打開(kāi)【圖像】中的【圖像大小】選項(xiàng)（見(jiàn)圖5-1）。（3）確認(rèn)圖像【寬度】和【高度】的值，單位為【像素】（見(jiàn)圖5-2）。（4）打開(kāi)配套素材中的“images”文件夾。（5）把鼠標(biāo)放置在圖像上，或者單擊相應(yīng)圖像，可在Windows窗口左下方得到其具體尺寸（見(jiàn)圖5-3）。二、建立站點(diǎn)，輸入工程文件，新建頁(yè)面（1）打開(kāi)Dreamweaver軟件，在初始界面中單擊創(chuàng)建Dreamweaver站點(diǎn)（見(jiàn)圖5-4）。（2）設(shè)定站點(diǎn)名稱、地址（見(jiàn)圖5-5）。單擊瀏覽文件夾，在彈出的窗口中單擊已經(jīng)新建好的工程文件夾“no.1”，并在右下角依次單擊按鈕【打開(kāi)】、【選擇】、【保存】。（3）在【文件】面板中，右鍵單擊左下角的站點(diǎn)index，執(zhí)行【新建文件】命令（見(jiàn)圖5-6）。三、建立網(wǎng)站框架1．生成背景圖像（1）在【文件】面板中，雙擊打開(kāi)untitled.Html文件。（2）單擊【屬性】界面下方的【頁(yè)面屬性】（見(jiàn)圖5-7）。（3）在展開(kāi)的【頁(yè)面屬性】界面進(jìn)行設(shè)置，在【分類】中選擇【外觀（HTML）】，然后單擊【瀏覽】，選擇images文件夾中相應(yīng)的背景圖像（見(jiàn)圖5-8）。3．用表格搭建框架（1）在創(chuàng)建好的Div層中添加表格（見(jiàn)圖5-12）。（2）創(chuàng)建表格（見(jiàn)圖5-13）根據(jù)切片的框架創(chuàng)建相應(yīng)行數(shù)的單列表格。（3）修正表格屬性（見(jiàn)圖5-14）。（4）設(shè)置單元格屬性。選擇相應(yīng)單元格，在屬性欄中輸入【高】為80，第一行單元格高度設(shè)置為“切片1”的相應(yīng)高度“80”（見(jiàn)圖5-15）。第二行單元格設(shè)置為相應(yīng)高度“332”，第三行單元格為相應(yīng)高度“53”，第四行單元格為相應(yīng)高度“125”，第五行單元格為相應(yīng)高度“137”。（5）完成表格橫向框架的制作（見(jiàn)圖5-16）。（6）設(shè)置表格的縱向框架。選擇第三行單元格，在【屬性】面板中單擊左下角的【拆分單元格為行或列】（見(jiàn)圖5-17），選擇拆分列，【列數(shù)】為7（見(jiàn)圖5-18）。四、圖像設(shè)置1．添加圖像（1）選擇表格中第三行的第一列。（2）展開(kāi)本地文件中的“images”文件夾（見(jiàn)圖5-19），左鍵單擊相應(yīng)的切片，并按住鼠標(biāo)左鍵將其拖動(dòng)到【設(shè)計(jì)】界面相應(yīng)的單元格當(dāng)中（見(jiàn)圖5-20）。2．添加熱點(diǎn)和鼠標(biāo)經(jīng)過(guò)圖像（1）添加熱點(diǎn)時(shí)，首先選擇需要添加的圖片，在【屬性】面板左下角選擇【矩形熱點(diǎn)工具】（見(jiàn)圖5-21），再在相應(yīng)圖像上單擊左鍵拖動(dòng)鼠標(biāo)，繪制出需要添加熱點(diǎn)的范圍。（2）添加鼠標(biāo)經(jīng)過(guò)圖像時(shí)首先選擇需要添加鼠標(biāo)經(jīng)過(guò)圖像的單元格，然后執(zhí)行【插入】→【圖像對(duì)象】→【鼠標(biāo)經(jīng)過(guò)圖像】（見(jiàn)圖5-22），在【原始圖像】中單擊【瀏覽】，添加配套素材“主頁(yè)切片_04.gif”；在【鼠標(biāo)經(jīng)過(guò)圖像】中單擊【瀏覽】，添加配套素材“主頁(yè)切片_04-2.gif”；單擊【確定】生成鼠標(biāo)經(jīng)過(guò)圖像效果（見(jiàn)圖5-23）。五、導(dǎo)航與鏈接1．添加導(dǎo)航及文字（1）添加導(dǎo)航表格。選擇第四行單元格，添加相應(yīng)的導(dǎo)航表格（見(jiàn)圖5-24），在下方的【屬性】面板設(shè)置【水平】為【居中對(duì)齊】（見(jiàn)圖5-25），同時(shí)選中導(dǎo)航表格中的所有單元格，設(shè)置單元格的【水平】屬性為【居中對(duì)齊】（見(jiàn)圖5-26）。（2）添加文本表格。選擇第五行單元格，添加相應(yīng)的文本表格（見(jiàn)圖5-27），在下方的【屬性】面板中設(shè)置【水平】為【居中對(duì)齊】（見(jiàn)圖5-28）。（3）使用Div添加獨(dú)立屬性的導(dǎo)航表格。單擊【繪制APDiv】（見(jiàn)圖5-29），在相應(yīng)位置繪制Div層（見(jiàn)圖5-30），添加相應(yīng)屬性的表格（見(jiàn)圖5-31），然后輸入導(dǎo)航文本（見(jiàn)圖5-32）。以相同方法完成其他獨(dú)立屬性的導(dǎo)航（見(jiàn)圖5-33）。2．添加“鏈接”（1）選擇相應(yīng)的導(dǎo)航文本

；其中，文本為無(wú)屬性的原始文本，選擇時(shí)只能單選相應(yīng)文本，不可多選多個(gè)文本。（2）給所有導(dǎo)航文本添加“鏈接”（見(jiàn)圖5-34）。選中單個(gè)導(dǎo)航文本，在【屬性】面板中的【<>HTML】狀態(tài)下給【鏈接（L）】添加“#”。重復(fù)以上操作，給所有導(dǎo)航文本添加上“鏈接”。六、添加與編輯CSS（1）添加CSS規(guī)則。選擇相應(yīng)鏈接

，在【屬性】面板設(shè)置【大小】數(shù)值（見(jiàn)圖5-35），在默認(rèn)彈出的【新建CSS規(guī)則】窗口中，設(shè)置【選擇器名稱】為“#apDiv4a”，單擊【確定】按鈕（見(jiàn)圖5-36）。（2）編輯CSS樣式。在右上方找到【CSS樣式】面板，選擇【全部】選項(xiàng)，然后雙擊【#apDiv4a】（見(jiàn)圖5-37）,展開(kāi)【#apDiv4a的CSS規(guī)則定義】窗口，在【分類】中選擇【類型】,在【font-size】中輸入尺寸，在【Color】中單擊左鍵選擇需要的顏色，單擊【確定】按鈕（見(jiàn)圖5-38）。完成該Div層中所有CSS樣式的準(zhǔn)確效果如圖5-39所示。（3）使用相同方法完成CSS樣式相同的導(dǎo)航（見(jiàn)圖5-40）。（4）使用相同方式，輸入不同參數(shù)，完成CSS樣式不同的導(dǎo)航（見(jiàn)圖5-41）。（5）使用相同方式修正【選擇器名稱】，生成不同復(fù)合內(nèi)容的CSS樣式。修改【選擇器名稱】（見(jiàn)圖5-42），輸入【CSS規(guī)則定義】參數(shù)（見(jiàn)圖5-43），最終效果如圖5-44所示。（6）在特例導(dǎo)航的CSS樣式中添加新“規(guī)則”。選擇相應(yīng)導(dǎo)航，生成CSS樣式（見(jiàn)圖5-45），在右上方單擊左鍵選擇相應(yīng)的【CSS樣式】面板，展開(kāi)屬性部分，單擊【添加屬性】按鈕（見(jiàn)圖5-46），修改【line-height】（行間距）數(shù)值為12，單位為px（見(jiàn)圖5-47）。局部調(diào)整Div的坐標(biāo)，得到最終效果（見(jiàn)圖5-48）。七、設(shè)置頁(yè)面屬性（1）展開(kāi)【頁(yè)面屬性】窗口。左鍵單擊底板空白處，在【屬性】面板中左鍵單擊【頁(yè)面屬性】按鈕（見(jiàn)圖5-49）。（2）鏈接屬性的修改（見(jiàn)圖5-50）。在【分類】中選擇【鏈接（XSS）】，單擊【下劃線樣式】，選擇【始終無(wú)下劃線】選項(xiàng)，單擊【確定】按鈕。頁(yè)面當(dāng)中的所有鏈接下劃線取消（見(jiàn)圖5-51）。八、導(dǎo)入Flash（1）在插入欄中，單擊【常用】中的【媒體】按鈕，選擇配套素材中的“Ban