靜態(tài)效果網(wǎng)頁設(shè)計

第3章靜態(tài)效果網(wǎng)頁設(shè)計本章學(xué)習(xí)目標(biāo)理解使用網(wǎng)頁設(shè)計的基本方法；掌握使用框架設(shè)計網(wǎng)頁；理解并掌握使用CSS設(shè)計網(wǎng)頁；理解網(wǎng)頁文本和段落的設(shè)計；熟悉并掌握網(wǎng)頁中鏈接和導(dǎo)航的應(yīng)用;熟悉網(wǎng)頁中表單的應(yīng)用。使用HTML設(shè)計網(wǎng)頁HTML即超文本標(biāo)記語言，它只是一種描述文件結(jié)構(gòu)的標(biāo)記語言，是目前網(wǎng)頁制作的主要語言之一，彳旦木是一種程序設(shè)H語言。DreamweaverCS5中可以直接制作出標(biāo)準(zhǔn)的網(wǎng)頁,在一些較復(fù)雜的網(wǎng)員利用HTML可以使得網(wǎng)友制作效率更高，特別是對了一些網(wǎng)貝制作專業(yè)人員而言。HTML由各種標(biāo)簽組成，如標(biāo)識網(wǎng)頁中各種不同的對象如文本、圖片等等，標(biāo)簽還可以是用來修飾和限定其他標(biāo)簽的,即所謂的標(biāo)簽的嵌套。不同的標(biāo)簽包含不可的屬性,屬性是從某個角度來修飾標(biāo)簽的，如font標(biāo)簽中的size屬性是用來修飾font標(biāo)簽所在范圍內(nèi)文字大小的。關(guān)于如何具體如何使用HTML設(shè)計網(wǎng)頁我們已經(jīng)在第1章中進(jìn)行了詳細(xì)的介紹?！跏褂帽砀耧@示表格式的數(shù)據(jù)衣格穿倒姓名話文數(shù)學(xué)英話理科綜合總分物理化學(xué)生物曹源二］90?0 "60808075455劉備857560807575450孫策808060808070450露葛亮9085607080極N65弧底85906070707035周瑜808060807070440司馬懿8,80508D 7580阿圖3.12最終效果圖使用表格設(shè)計網(wǎng)頁□使用表格布局網(wǎng)頁內(nèi)容圖322最終效果圖使用框架設(shè)計網(wǎng)頁**><i*qi0?**><i*qi0??, 、 IMjr?1￡ “ 八圖3.30武校官方網(wǎng)站首頁3.4圖3.30武校官方網(wǎng)站首頁3.4使用模板和庫設(shè)計網(wǎng)頁□創(chuàng)建模板□應(yīng)用模板創(chuàng)建網(wǎng)頁CU33IHI，工。1MX二：?CU33IHI，工。1MX二：?%:?■::;:?叱，：“A'asJ:，B■“K-鼠歌畏宏S-再▲夕■夕???????夕9??55:7N????■T1，Spry融朱SpryCZLW（filSpry尹IFSpry融朱SpryCZLW（filSpry尹IF在）Spry承復(fù)女康城Spry旅證文市注（￡〕Spry蹌證5：本區(qū)收區(qū)）Spry勝在要選框?SpryMt送醫(yī)用6JSpryIfciiESrWSpryJiiH昭認(rèn)切SpryK證單比按FfllflSpry疾華欄電>Spry疝項卡式面懼電）Spry折交式,'A>Spry可所交面蛟G）Spry工旦提示3.35Spryfli；^1^13.36CSS樣式;面不反3.6使用CSS設(shè)計網(wǎng)頁□css就是層益樣式表，它的目的主要是將網(wǎng)頁內(nèi)容與這些內(nèi)容外在的表現(xiàn)形式分離開，從而可以更方便地改變網(wǎng)頁的外觀，并且這些css可以多次使用，通過修改CSS就可以使得那些應(yīng)用了該CSS設(shè)計出的網(wǎng)頁外在形式。上介尋尋烹孽沆面領(lǐng)領(lǐng)風(fēng)沿守院尻任任士史園藝學(xué)?!!歷沆歷較<上介尋尋烹孽沆面領(lǐng)領(lǐng)風(fēng)沿守院尻任任士史園藝學(xué)?!!歷沆歷較VSTfLE|FYLEtypzte，t/3）8:1、心TKICr-DECORATIOa：noneA:viri-t-d[rEn-?ECOJU7I?:ncm?JAih^rICOLOKi2*f00ffTEXT-PEO*ATIOXtiwdovBnc：</5TTl.E>圖3.37CSS3弋碼塊圖3.38應(yīng)用CSS后3.7在網(wǎng)頁中使用鏈接與導(dǎo)航貞作為?個文件肯定是存布某個服務(wù)器的某個存儲介質(zhì)中,口絕對路徑與相對路徑貞作為?個文件肯定是存布某個服務(wù)器的某個存儲介質(zhì)中,為此它有個路徑。對「同,個網(wǎng)頁，從不同的角度來看路徑是不?樣的Q這個角度包括從網(wǎng)氏所在介質(zhì)上來看和從該網(wǎng)頁Internet瀏覽者來。前者所看到的路僑稱為相對就件，后者稱為絕對路徑。除此之外還舉個例子說明，行兩個文件pagel.html、page2.html假女n兩名分別存儲在網(wǎng)站根口錄（假如為D:\）下的窗el文件火和file2文作莢申，2要從pagel.html鏈掾到page2.html則在在pagel.html中要用到page2.html的相疝路彳仝為a../nle2/page2.htmlMo顯果從Internet瀏覽占的角度來看，page2.html的絕對路竹為Fjttp:〃川尼巴?hqohao.co中/fi仃平木地路傳如page2.htmD:\file2\page2.htmL除此之外還37在網(wǎng)頁中使用鏈學(xué)與導(dǎo)航□創(chuàng)建鏈接創(chuàng)建普通鏈接的方法創(chuàng)建電子郵件鏈接方法創(chuàng)建腳本鏈接方法創(chuàng)建命名錨記鏈接自動更新鏈接3.7在網(wǎng)頁中使用鏈接與導(dǎo)航□使用跳轉(zhuǎn)菜單在DreamweaverCS5中，可以使用跳轉(zhuǎn)菜單實現(xiàn)大跨度的鏈接，既可以鏈接到本站點內(nèi)的網(wǎng)頁，也可以鏈接到其他站點上的文件，還可以鏈接到可在瀏覽器中打開的任何類型的文件。3.7在網(wǎng)頁中使用鏈接與導(dǎo)航□使用導(dǎo)航條為了使得網(wǎng)站條理性更強，網(wǎng)站都是分模塊的，比如政府部門門戶網(wǎng)站的首頁上有多個欄目，單擊某個欄目就進(jìn)入相應(yīng)網(wǎng)站模塊，由此可以快速在網(wǎng)站內(nèi)切換。那么多個欄目就是導(dǎo)航條，每個欄目就是一個導(dǎo)航元素，它們通常是由很協(xié)調(diào)的圖像組成的。導(dǎo)航條中的圖像有4種狀態(tài)：鼠標(biāo)未經(jīng)過圖像、鼠標(biāo)經(jīng)過時圖像、鼠標(biāo)按下時圖像、鼠標(biāo)按下后再次經(jīng)過時圖像。3.8在網(wǎng)頁中使用表單口常用表單對象介紹□表單應(yīng)用綜合案例□表單應(yīng)用綜合案例?*-1 ?nm. 6?，ab*tc?而。"入unr.?f ■tinmm.?■刁,?6??XW伍”.??/yrin.*■,? *XTt-F?????1 1 ?n3i,1->:?mi1j，Wlt?t.><?m3.68考試報名表最終效果圖Wlt?t.><?m3.68考試報名表最終效果圖'X…EN 'x……?1?*mw?ae”(?m>.1.Aft'f「0??f'X.-?,?io*im.nf?本章小結(jié)本章主要介名召了加M可使川DreamweaverCS5來設(shè)計靜態(tài)網(wǎng)貞，并通過實例演示了DreamweaverCS5中表格的操作以及使用表格來設(shè)計網(wǎng)頁、使用框剪設(shè)計網(wǎng)頁、使用模板和庫設(shè)計網(wǎng)頁、使用Spry框架設(shè)計網(wǎng)頁以及使用CSS來設(shè)計網(wǎng)頁，通過諸如上述設(shè)計方法能提高設(shè)計速度還能實現(xiàn)維護(hù)網(wǎng)頁的速度。最后還介紹了超鏈接和導(dǎo)航欄并通過實例演示了如何在網(wǎng)頁中應(yīng)用超鏈接，介紹了表單的作用并且通過實例演示了表單在網(wǎng)頁中的應(yīng)用。思考與練習(xí)□選擇題(1)定義文本的字體、顏色以及大小，可以實用哪種HTML標(biāo)簽oA.vfont＞標(biāo)簽B.vb＞標(biāo)簽C.vhead＞標(biāo)簽D.標(biāo)簽(2)DreamweaverCS5的表格對話框中可設(shè)置表格的哪些屬性。A.行數(shù)和列數(shù)B.背景顏色C.背景圖像 D.對齊方式(3)典型的框架集網(wǎng)頁，可能不包含以卜哪種標(biāo)簽°A.vf「ameset＞標(biāo)繪集標(biāo)簽 B.vframe＞框架標(biāo)簽C.＜noframes＞無才叵架標(biāo)簽 D.vif「ame＞嵌入樞架標(biāo)箱(4)卜.面哪個網(wǎng)頁標(biāo)簽是依廣塊狀標(biāo)簽oA.span標(biāo)簽B.img標(biāo)簽C.button標(biāo)簽D.p標(biāo)簽(5)增加網(wǎng)頁標(biāo)簽的哪種盒模型屈件不會改變