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

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

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

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

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

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

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

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

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

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