《網(wǎng)頁設(shè)計與制作基礎(chǔ)》實驗指導(dǎo)書

試驗?zāi)康?/p>

試驗一 網(wǎng)頁的生疏1、把握利用Internet進(jìn)展信息巡游、搜尋，下載網(wǎng)頁、圖片、文字和文件；2HTML文檔并掃瞄。3HTML根本標(biāo)記的使用。試驗環(huán)境WindowsXP操作系統(tǒng)，內(nèi)部組成局域網(wǎng)，外連Internet互聯(lián)網(wǎng)。試驗重點(diǎn)及難點(diǎn)生疏HTML的構(gòu)造、語法。生疏HTML根本標(biāo)記的使用。試驗內(nèi)容1〔“://dabaoku/“://dabaoku等〕下載網(wǎng)頁制作時需要的小圖片、動畫及flash等網(wǎng)頁制作素材。2、收集你認(rèn)為比較好的網(wǎng)頁并從網(wǎng)頁主題、網(wǎng)頁內(nèi)容、構(gòu)造布局、顏色搭配等方面來分析網(wǎng)頁。3、通過掃瞄浪網(wǎng)站主頁分析其網(wǎng)頁根本元素，查看其源代碼，保藏到保藏夾中，將其設(shè)為主頁。4、制作一個簡潔的網(wǎng)頁sy1-1.htmHTML內(nèi)容為司空曙的《江村即事51的練習(xí)生疏HTML〔可參考其次章內(nèi)容〕試驗二 根本操作〔一〕試驗?zāi)康?、生疏Dreamweaver的工作環(huán)境并了解本地站點(diǎn)的建設(shè)和治理；23試驗環(huán)境WindowsXP操作系統(tǒng)，Dreamweaver軟件，內(nèi)部組成局域網(wǎng)，外連Internet互聯(lián)網(wǎng)。試驗重點(diǎn)及難點(diǎn)文字的插入及設(shè)置。圖像的插入及設(shè)置。各種超鏈接的創(chuàng)立。試驗內(nèi)容1、使用DreamweaverDreamweaver個文件和文件夾：圖片文件夾image；音樂文件夾soun〕等。2Dreamweaversy2-1.html的網(wǎng)頁文件，從供給的網(wǎng)頁原始素材中把相關(guān)文字復(fù)制到該網(wǎng)頁文件中，并進(jìn)展適當(dāng)?shù)奈淖衷O(shè)置，結(jié)果如以下圖所示。3Dreamweaver根本操作”中對網(wǎng)頁sy2-1.html按如下要求進(jìn)展編輯并另存為sy2-2.html，效果如下圖。標(biāo)題文字大小用<h1></h1>標(biāo)記；24像素，字體為幼圓，顏色為紅色；24像素，字體為隸書，顏色為藍(lán)色；在作者信息后加一條水平線，居中，水平線寬度為掃瞄器的30%，水平線的粗細(xì)為20個像素，顏色為棕色；4Dreamweaver根本操作”中對網(wǎng)頁sy2-2.html按如下要求進(jìn)展編輯并另存為sy2-3.html，效果如下圖。插入背景圖片：Welcome-Popup-Background.gif在古詩左下方插入作者的照片：司空曙.jpg5、在站點(diǎn)“Dreamweaver根本操作”中從供給的網(wǎng)頁原始素材中把相關(guān)文字復(fù)制到網(wǎng)頁文sy2-3.html中按要求進(jìn)展編輯并另存為sy2-4.html，效果如下圖。改“名目”下的列表符號類型為方框。以標(biāo)題為熱點(diǎn)創(chuàng)立空超鏈接以圖片為熱點(diǎn)創(chuàng)立空超鏈接以“大歷十才子”為熱點(diǎn)創(chuàng)立空超鏈接6Dreamweaversy3-1.html的網(wǎng)頁文件，以作試驗三制作留言簿備用。7、在站點(diǎn)“Dreamweaver根本操作”中對網(wǎng)頁 sy2-4.html按要求進(jìn)展編輯并另存為sy2-5.html，如以下圖所示。以標(biāo)題和圖片為熱點(diǎn)的超鏈接均指向“://baike.baidu/view/1121590.htm“://baike.baidu/view/1121590.ht〔路徑，在當(dāng)前窗口中翻開。為“名目”下的各條目創(chuàng)立書簽，書簽名為相應(yīng)條目的拼音首字母。在文檔最終增加一行“如有訴求，請留言或郵件聯(lián)系！感謝以“留言”為熱點(diǎn)創(chuàng)立指向sy3-1.html〔使用相對路徑，在窗口中翻開。以“郵件聯(lián)系”為熱點(diǎn)創(chuàng)立指向“mailto:ggyx@yahoo.cn“ggyx@yahoo.cn的超鏈接。試驗三 根本操作〔二〕試驗?zāi)康?2、嫻熟把握在網(wǎng)頁文件中表格的添加和設(shè)置。3、嫻熟把握在網(wǎng)頁文件中表單的添加和設(shè)置。試驗環(huán)境WindowsXP操作系統(tǒng)，Dreamweaver軟件，內(nèi)部組成局域網(wǎng)，外連Internet互聯(lián)網(wǎng)。試驗重點(diǎn)及難點(diǎn)多媒體對象的添加和設(shè)置。表單及表單對象的添加及設(shè)置。利用表格來歸整表單。試驗內(nèi)容1Dreamweaversy2-5.html.mp3，要求循環(huán)播放，結(jié)果另存為sy3-2.html。2Dreamweaversy3-3.html的網(wǎng)頁文件，在該網(wǎng)頁文件中建立一個如下圖的表格，并在表格下方添加文字“讓我們回到歡快的童年時間Flash3Dreamweaver根本操作”中的網(wǎng)頁文件sy3-1.html，制作一個留言簿表單，效果如以下圖所示。4Dreamweaversy3-4.html的網(wǎng)頁文件，在該網(wǎng)頁文件中用表格來布局sy3-1.html網(wǎng)頁文件中的留言簿，效果如以下圖所示。試驗?zāi)康?/p>

試驗四 CSS樣式表1CSS的根本學(xué)問；2CSS樣式”面板；3試驗環(huán)境WindowsXP操作系統(tǒng)，Dreamweaver軟件，內(nèi)部組成局域網(wǎng)，外連Internet互聯(lián)網(wǎng)。試驗重點(diǎn)及難點(diǎn)選擇器的使用。利用樣式表對頁面進(jìn)展美化。樣式應(yīng)用的優(yōu)先級試驗內(nèi)容1、CSS.html和淡然.html。將網(wǎng)頁文件淡然.html另存為sy4_1.html，將網(wǎng)頁文件人生最美是淡然.html另sy4_2.html。2、對網(wǎng)頁文件sy4_1.html的標(biāo)題“淡然”做如下設(shè)置：字體為“華文行楷50像素，顏色為#666666，并對該標(biāo)題承受Glow濾鏡進(jìn)展特效處理：光暈顏色為藍(lán)色，方向45度。3、在網(wǎng)頁文件sy4_1.html.zit_GB23124顏色設(shè)置為#666699，粗體。將該樣式應(yīng)用于sy4_1.html中表格上方的正文內(nèi)容〔不包括表格本身。4、在網(wǎng)頁文件sy4_1.html.b：字體為“隸書24為#993366，粗體，背景顏色為#CCCCCC，表格的上邊框是顏色為#003399的雙線，表格的下邊框是顏色為#669999的實線，表格的左邊框是顏色為#FF6666的虛線，表格的右邊框是顏色為#9999998像素。將該樣式應(yīng)用于sy4_1.html中的表格局部。5sy4_1.html中更改超鏈接的樣式，其中a:link定義為：字體：幼圓，顏色：#66999，修飾：無〔無下劃線；a:visite#66003，修飾：無；a:hover：字體：幼圓，顏色：#FF0000，修飾：下劃線；a:active：字體：華文魏，樣式：傾斜，顏色：#0000CC，修飾：刪除線。6、建立外部樣式表wenzi.cs_GB23118粗體。將該樣式應(yīng)用于sy4_1.html中表格下方的正文內(nèi)容〔不包括表格本身。7、在網(wǎng)頁文件sy4_1.html中為“淡然的釋義”局部加上方塊列表符號，并給這局部內(nèi)容設(shè)置為字體顏色為#993333，背景顏色為#999999。8、使用內(nèi)嵌樣式使得其次段文字“淡然，常用義為淡泊……失意坦然個字符。9、將外部樣式表wenzi.css應(yīng)用于網(wǎng)頁文件sy4_2.html然”做如下設(shè)置：字體為“華文行楷50#CC336Shadow濾鏡進(jìn)展特效處理：光暈顏色為藍(lán)色，方向為45度。試驗五 網(wǎng)頁布局〔一〕試驗?zāi)康?2試驗環(huán)境WindowsXP操作系統(tǒng)，Dreamweaver軟件，內(nèi)部組成局域網(wǎng)，外連Internet互聯(lián)網(wǎng)。試驗重點(diǎn)及難點(diǎn)利用布局表格來規(guī)劃網(wǎng)頁的設(shè)計。利用框架來來設(shè)計網(wǎng)頁。利用表格、框架這兩種布局工具來共同布局網(wǎng)頁。試驗內(nèi)容1、建立一個名為“布局表格與框架”的本地站點(diǎn)并在該站點(diǎn)中建一個名為sy5-1.html的網(wǎng)頁文件，利用布局表格來布局表單。效果如下圖。2sy5-2.html來和表格配搭使用來布局網(wǎng)頁。效果如下圖。3、利用框架集和框架來規(guī)劃在本地站點(diǎn)“布局表格與框架”建立的首頁文件index.html，為名目內(nèi)容“主講課程sy5-2.html、sy5-1.html,此外為名目內(nèi)容“和我聯(lián)系”建立電子郵件鏈接。試驗六 網(wǎng)頁布局〔二〕試驗?zāi)康?CSS的頁面分割技術(shù)、盒子模式和定位技術(shù)；2〔APDiv〕的根本操作并能利用層來定位頁面元素；3試驗環(huán)境WindowsXP操作系統(tǒng)，Dreamweaver軟件，內(nèi)部組成局域網(wǎng)，外連Internet互聯(lián)網(wǎng)。試驗重點(diǎn)及難點(diǎn)CSS盒模式和定位技術(shù)敏捷利用層來實現(xiàn)網(wǎng)頁元素的準(zhǔn)確定位。利用模板生成多個風(fēng)格全都的網(wǎng)頁。試驗內(nèi)容1、在本地站點(diǎn)“基于CSS的網(wǎng)頁布局設(shè)計”中創(chuàng)立文件夾sy6sy6文件夾下創(chuàng)立兩個文件：my.htmlzzy.html。并將給定的多媒體文件放入相應(yīng)的文件夾中。2CSS布局學(xué)問和APDiv〔層〕的學(xué)問，利用Dreamweavermy.html進(jìn)展設(shè)計編輯，效果如以下圖所示。3、zzy.htm4、.htmmy.dwsy6文件夾下。5、依據(jù)模板文件“my.dw”創(chuàng)立網(wǎng)頁文檔“yhy.htmbssz.htm”和“l(fā)y.htm點(diǎn)的網(wǎng)頁文件my.html中的名目內(nèi)容“拙政園zzy.htmyhy.htmbssz.htm”和“l(fā)y.htm試驗?zāi)康?/p>

試驗七 行為和時間軸12試驗環(huán)境WindowsXP操作系統(tǒng)，Dreamweaver軟件，內(nèi)部組成局域網(wǎng)，外連Internet互聯(lián)網(wǎng)。試驗重點(diǎn)及難點(diǎn)利用行為實現(xiàn)網(wǎng)頁的交互效果。利用時間軸實現(xiàn)網(wǎng)頁的動態(tài)效果。試驗內(nèi)容1.html；圖片文件夾image，里面有假設(shè)干圖片文件。2、index.htm當(dāng)單擊文字“行為”時，效果如以下圖所示：當(dāng)單擊文字“時間軸”時，效果如以下圖所示：3、在站點(diǎn)“行為和時間軸”中建一個網(wǎng)頁“交換圖像.htm.jp”時，會自動變?yōu)椤肮?jp.jp4、當(dāng)單擊網(wǎng)頁“交換圖像.htm則建議書。5、在站點(diǎn)“行為和時間軸”中建一個網(wǎng)頁“彈出信息.htm6、當(dāng)鼠標(biāo)指針移向網(wǎng)頁“彈出信息.html”中的生日蛋糕圖片時，在狀態(tài)欄顯示“您許愿了7、在站點(diǎn)“行為和時間軸”中建一個網(wǎng)頁“直線運(yùn)動.htm一只蝴蝶就從頁面左上角按直線飛到右下角。8、在站點(diǎn)“行為和時間軸”中建一個網(wǎng)頁“曲線運(yùn)動.htm一只蝴蝶就從頁面左上角按曲線飛到右上角，期間進(jìn)展了俯沖和仰沖的動作。9、在站點(diǎn)“行為和時間軸”中建一個網(wǎng)頁“簡單運(yùn)動.htm一條魚兒在藍(lán)色的海洋里歡快地游來游去。效果如以下圖所示。10、 把站點(diǎn)“行為和時間軸”的網(wǎng)頁index.htm設(shè)為主頁并在其中設(shè)置相應(yīng)的超鏈接，如以下圖所示。試驗?zāi)康?/p>

試驗八 綜合試驗把握本地站點(diǎn)的創(chuàng)立和治理以及生疏網(wǎng)頁文件的根本操作；擅長運(yùn)用各種網(wǎng)頁布局設(shè)計方法；生疏在網(wǎng)頁中根本的網(wǎng)頁元素〔如文字、圖片、超鏈接、多媒體元素、表格和表單等〕的插入和相關(guān)的設(shè)置；利用模板生成多個風(fēng)格全都的網(wǎng)頁；通過行為實現(xiàn)網(wǎng)頁的交互效果。試驗環(huán)境WindowsXPDreamweaver試驗內(nèi)容設(shè)計一個小型的校園跳蚤市場的網(wǎng)站〔教材第9章。附錄1 HTML標(biāo)記的使用試驗?zāi)康?、把握HTML文檔的構(gòu)造及其制作標(biāo)準(zhǔn)。2/不換行標(biāo)記，標(biāo)題標(biāo)記，分節(jié)標(biāo)記，水平線標(biāo)記，文本居中標(biāo)記等；345、把握超鏈接的使用，包括錨點(diǎn)標(biāo)記、頁面跳轉(zhuǎn)鏈接、書簽超鏈接、下載文件鏈接以及電子郵件鏈接等；67、把握音頻和視頻標(biāo)記，包括鏈接音頻或視頻文件、設(shè)置網(wǎng)頁背景音樂標(biāo)記，內(nèi)嵌音頻或視頻播放插件等；8910、生疏表單標(biāo)記并把握利用這些標(biāo)記來創(chuàng)立表單以及其中的各種表單域。試驗環(huán)境WindowsXP操作系統(tǒng)，內(nèi)部組成局域網(wǎng)，外連Internet互聯(lián)網(wǎng)。試驗重點(diǎn)及難點(diǎn)嫻熟把握各種常用標(biāo)記并利用其來實現(xiàn)網(wǎng)頁的排版。不規(guī)章表格的創(chuàng)立。使用表格來布局表單。試驗內(nèi)容1sy2。本次試驗中全部網(wǎng)頁文件均放在名目sy2下；圖片、音頻文件分別放在sy2media子名目的imagesmusic子名目下。2sy2-1.html，實現(xiàn)如下頁面：3sy2-1.html按要求進(jìn)展編輯并另存為sy2-2.html，效果如以下圖所示。標(biāo)題文字大小用<h1></h1>