網(wǎng)站設(shè)計(jì)靜態(tài)網(wǎng)頁(yè)

1、山 西 大 學(xué) 管 理 學(xué) 院實(shí)驗(yàn)報(bào)告姓 名學(xué) 號(hào)專(zhuān)業(yè)班級(jí)課程名稱(chēng)網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)實(shí)驗(yàn)室成 績(jī)指導(dǎo)教師實(shí)驗(yàn)項(xiàng)目名稱(chēng)網(wǎng)站開(kāi)發(fā)與建設(shè)的基礎(chǔ)Dreamweaver綜合性靜態(tài)頁(yè)面設(shè)計(jì)一、實(shí)驗(yàn)?zāi)康模?、按照書(shū)上43頁(yè)至47頁(yè)要求，制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，以熟悉Dreamweaver基本的操作命令。2、按照書(shū)上56頁(yè)至57頁(yè)要求，制作一個(gè)應(yīng)用超級(jí)鏈接的網(wǎng)頁(yè)，以熟悉超級(jí)鏈接設(shè)置的基本操作命令與操作方法。3、按照書(shū)上65頁(yè)至67頁(yè)要求，使用CSS樣式表為網(wǎng)頁(yè)添加效果，以進(jìn)一步熟悉面板組的使用。4、按照書(shū)上78頁(yè)至81頁(yè)要求，制作隱藏層特效，使用時(shí)間線(xiàn)創(chuàng)建動(dòng)態(tài)HTML動(dòng)畫(huà)。5、按照書(shū)上96頁(yè)至97頁(yè)要求，建立一個(gè)T型

2、框架，保存全部框架內(nèi)容，按提示輸入相應(yīng)的內(nèi)容，在其中的一個(gè)網(wǎng)頁(yè)文檔中插入表單，添加合適的表單對(duì)象。6、按照書(shū)上108頁(yè)至110頁(yè)要求，利用布局視圖和標(biāo)準(zhǔn)視圖制作滿(mǎn)意的模版。二、實(shí)驗(yàn)內(nèi)容：（一）制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)（二）制作一個(gè)應(yīng)用超級(jí)鏈接的網(wǎng)頁(yè)（三）使用CSS樣式表等技術(shù)為頁(yè)面添加效果（四）制作隱藏層特效與使用時(shí)間線(xiàn)創(chuàng)建動(dòng)態(tài)HTML動(dòng)畫(huà)。（五）建立框架網(wǎng)頁(yè)和具有表單的網(wǎng)頁(yè)（六）利用布局視圖和標(biāo)準(zhǔn)視圖制作滿(mǎn)意的模版三、實(shí)驗(yàn)步驟（要求有截圖）：（一）制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)（二）制作一個(gè)應(yīng)用超級(jí)鏈接的網(wǎng)頁(yè)（1）這是制作好的名人故居的網(wǎng)頁(yè)（已經(jīng)包含了設(shè)置好的三個(gè)名字的鏈接）例如宋慶齡的鏈接（2）這是制作好的

3、關(guān)于三所故居的相應(yīng)的文字介紹的網(wǎng)頁(yè)（3）設(shè)置圖片的鏈接，這次圖片的鏈接是對(duì)應(yīng)的360百科的URL地址，如下所示（4）對(duì)操作進(jìn)行保存，通過(guò)瀏覽器打開(kāi)，在相應(yīng)的網(wǎng)頁(yè)中點(diǎn)擊相應(yīng)的文字或者是圖片就可以連接到相關(guān)聯(lián)的網(wǎng)頁(yè)。（三）使用CSS樣式表等技術(shù)為頁(yè)面添加效果（1）創(chuàng)建好表格頁(yè)面(2)創(chuàng)建好三個(gè)相應(yīng)的鏈接的頁(yè)面（3）創(chuàng)建好相應(yīng)的文字鏈接（4）進(jìn)行CSS樣式的創(chuàng)建(5)對(duì)文字進(jìn)行CSS樣式的設(shè)置（四）制作隱藏層特效與使用時(shí)間線(xiàn)創(chuàng)建動(dòng)態(tài)HTML動(dòng)畫(huà)。 （1）制作隱顯層特效 （2）使用時(shí)間線(xiàn)創(chuàng)建動(dòng)態(tài)HTML動(dòng)畫(huà) 按照書(shū)中的要求一步一步進(jìn)行操作最終設(shè)置好的頁(yè)面如下（五）建立框架網(wǎng)頁(yè)和具有表單的網(wǎng)頁(yè)（1）在網(wǎng)

4、頁(yè)中設(shè)置框架，類(lèi)型為上方及左側(cè)嵌套，在三個(gè)不同的部分中填入內(nèi)容（2）之后制作好三個(gè)景點(diǎn)文字要鏈接到的網(wǎng)頁(yè)（3）制作一個(gè)新的網(wǎng)頁(yè)，使用表單控件對(duì)各個(gè)網(wǎng)頁(yè)進(jìn)行保存。（六）利用布局視圖和標(biāo)準(zhǔn)視圖制作滿(mǎn)意的模版(1)制作好模板頁(yè)，還對(duì)“基本信息”和“學(xué)員介紹”設(shè)置了超鏈接（2）新建一個(gè)站點(diǎn)并且將模板保存在站點(diǎn)中 （3）套用該模板創(chuàng)建網(wǎng)頁(yè)，并在可編輯區(qū)域中輸入文字四、實(shí)驗(yàn)結(jié)果（要求有截圖）：（一）制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè) 最后通過(guò)瀏覽器中打開(kāi)，顯示制作好的網(wǎng)頁(yè)，上邊這個(gè)圖是鼠標(biāo)經(jīng)過(guò)圖像的原始圖像的截圖。 這張圖是鼠標(biāo)經(jīng)過(guò)后變換后的圖像的截圖。（二）制作一個(gè)應(yīng)用超級(jí)鏈接的網(wǎng)頁(yè) 上圖是制作好的帶有超鏈接的網(wǎng)頁(yè)上邊

5、三個(gè)圖是點(diǎn)擊三個(gè)名字之后出現(xiàn)的網(wǎng)頁(yè)上邊三個(gè)圖是點(diǎn)擊圖片后連接到的網(wǎng)頁(yè)（三）使用CSS樣式表等技術(shù)為頁(yè)面添加效果1、通過(guò)瀏覽器打開(kāi)制作好的“著名展館”的網(wǎng)頁(yè)2、點(diǎn)擊相應(yīng)的文字鏈接，鏈接到相應(yīng)的網(wǎng)頁(yè)（四）制作隱藏層特效與使用時(shí)間線(xiàn)創(chuàng)建動(dòng)態(tài)HTML動(dòng)畫(huà)。（1）制作顯隱層特效 （2）使用時(shí)間線(xiàn)創(chuàng)建動(dòng)態(tài)HTML動(dòng)畫(huà) 一系列操作結(jié)束后，通過(guò)瀏覽器打開(kāi)，顯示了動(dòng)態(tài)動(dòng)畫(huà)（五）建立框架網(wǎng)頁(yè)和具有表單的網(wǎng)頁(yè)瀏覽器中打開(kāi)，顯示如下：五、實(shí)驗(yàn)分析：（一）制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)在這次實(shí)驗(yàn)中，制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，是按照書(shū)上的步驟一步一步進(jìn)行操作的，（1）新建一個(gè)文件夾，之后輸入標(biāo)題“北京風(fēng)光”，之后再文檔窗口中插入提前下載好

6、的香山公園的圖片并按照要求進(jìn)行相關(guān)的參數(shù)設(shè)置并且調(diào)整為左對(duì)齊，之后粘貼復(fù)制好的文字。（2）再重復(fù)第一步的步驟再添加小西湖自然風(fēng)景區(qū)的圖片和文字。（3）在插入鼠標(biāo)經(jīng)過(guò)圖像時(shí)，首先選中要變換的圖像，之后選擇原始圖像和要變換的圖像，之后再進(jìn)行調(diào)整，然后經(jīng)過(guò)瀏覽器打開(kāi)顯示的結(jié)果如上。注意：再最后的插入鼠標(biāo)經(jīng)過(guò)圖像時(shí)，在對(duì)話(huà)框中設(shè)置完成后，插入的圖片大，而且變成兩張圖片，刪掉其中一張圖片，打開(kāi)，如果格式顯示異常時(shí)再通過(guò)調(diào)整相應(yīng)的問(wèn)題直到網(wǎng)頁(yè)顯示符合自己的要求。（二）制作一個(gè)應(yīng)用超級(jí)鏈接的網(wǎng)頁(yè)在這次實(shí)驗(yàn)中，要制作超鏈接的網(wǎng)頁(yè)，同樣是根據(jù)書(shū)上的步驟進(jìn)行操作的（1）在上一個(gè)實(shí)驗(yàn)的基礎(chǔ)上，分別制作好了名人故居的

7、網(wǎng)頁(yè)，制作好宋慶齡，齊白石，老舍故居的文字介紹的網(wǎng)頁(yè)， （2）之后填寫(xiě)鏈接，首先設(shè)置文字的鏈接，選中文字之后，在鏈接的文件夾中選擇制作好的文字網(wǎng)頁(yè)，接著設(shè)置圖片的鏈接，這里我選擇了360百科相應(yīng)的介紹作為連接對(duì)象，復(fù)制粘貼好網(wǎng)址之后進(jìn)行保存 （3）最后在通過(guò)瀏覽器打開(kāi)，得到實(shí)驗(yàn)結(jié)果中的截圖。 注意：在這個(gè)實(shí)驗(yàn)中是以上一個(gè)實(shí)驗(yàn)的基本操作為基礎(chǔ)的，主要的步驟是鏈接，共介紹三種鏈接方式，在文件夾中選擇目標(biāo)文件和通過(guò)錨點(diǎn)以及在目標(biāo)中選擇_blank。（三）使用CSS樣式表等技術(shù)為頁(yè)面添加效果在這次實(shí)驗(yàn)中，是在之前建立網(wǎng)頁(yè)的基礎(chǔ)上，插入表格，在表格中輸入文字或插入圖片。（1）制作好含表格的網(wǎng)頁(yè)，在表格中

8、填入相應(yīng)的內(nèi)容，（2）在制作好的網(wǎng)頁(yè)一中，按照需要制作好相應(yīng)的三個(gè)鏈接網(wǎng)頁(yè)。 （3）在創(chuàng)建CSS樣式中，軟件版本不同，步驟也不盡相同，原理相同，按照要求創(chuàng)建好三種CSS樣式，之后對(duì)選中的文字選擇相應(yīng)樣式。注意：在CSS樣式創(chuàng)建中，了解到不同的選擇代表著不同的意義，hover表示鼠標(biāo)放置時(shí)超級(jí)鏈接，active表示當(dāng)前正在訪問(wèn)（鼠標(biāo)剛剛點(diǎn)擊訪問(wèn)）超級(jí)鏈接。（四）制作隱藏層特效與使用時(shí)間線(xiàn)創(chuàng)建動(dòng)態(tài)HTML動(dòng)畫(huà)。注意：（1）在制作隱藏層特效時(shí)，主要注意onmouseout顯示，onmouseover隱藏，這兩對(duì)相對(duì)應(yīng)。利用層能夠?qū)W(wǎng)頁(yè)元素定位。（2）在制作動(dòng)畫(huà)時(shí)，在時(shí)間軸中可以對(duì)路線(xiàn)進(jìn)行設(shè)置。（3）

9、層與行為配合使用可以方便的制作出具有動(dòng)畫(huà)效果的網(wǎng)頁(yè)。（五）建立框架網(wǎng)頁(yè)和具有表單的網(wǎng)頁(yè) （1）在建立框架網(wǎng)頁(yè)時(shí)，在這次實(shí)驗(yàn)中，框架類(lèi)型是上方及左側(cè)嵌套，將整個(gè)網(wǎng)頁(yè)劃分成三個(gè)部分，在進(jìn)行保存時(shí)選擇保存全部，形成4個(gè)html文件，第一個(gè)是整個(gè)的網(wǎng)頁(yè)命名為frames,之后按照位置進(jìn)行命名，依次命名為right,left,top。在各個(gè)部分中輸入相應(yīng)的內(nèi)容。 （2）在制作表單時(shí)，首先插入一個(gè)表單區(qū)域，在這個(gè)區(qū)域中進(jìn)行輸入，之后按照要求輸入相應(yīng)的內(nèi)容，包括單選按鈕，多選框，單行多行文本段，最后添加提交和重置按鈕。 注意：在設(shè)置鏈接時(shí)，選好要鏈接到的文件之后，在目標(biāo)屬性中選擇mainframe,就會(huì)在右側(cè)框架中及主框架中顯示鏈接到的內(nèi)容。 （六）利用布局視圖和標(biāo)準(zhǔn)視圖制作滿(mǎn)意的模版注意：（1）在制作模板時(shí)要注意到