實驗四網(wǎng)頁制作及發(fā)布

1、實驗四 網(wǎng)頁制作及發(fā)布實驗?zāi)康模簩W(xué)習(xí)并掌握簡單的網(wǎng)頁制作方法。實驗環(huán)境：Windows XP SP2Dreamweaver 8 中文版實驗步驟：1) 下載Dreamweaver 8 綠色版并解壓到本地文件夾。下載地址：先雙擊注冊軟件信息，然后雙擊進入Dreamweaver 8程序界面。2) 文件-> 新建打開如下對話框：選擇類別中的基本頁，基本頁中的HTML，單擊創(chuàng)建。選擇下圖中“設(shè)計”對網(wǎng)頁進行編寫。標(biāo)題：修改為網(wǎng)頁名稱。3) 在網(wǎng)頁中添加文字：在文檔中輸入文字，全選后通過下方屬性修改字體的大小顏色對齊等屬性，或者全選要修改的字體后單擊右鍵進行修改。4) 添加超鏈接：(名詞解釋：超鏈接

2、是一種對象，它以特殊編碼的文本或圖形的形式來實現(xiàn)鏈接，如果單擊該鏈接，則相當(dāng)于指示瀏覽器移至同一網(wǎng)頁內(nèi)的某個位置，或打開一個新的網(wǎng)頁，或打開某一個新的WWW網(wǎng)站中的網(wǎng)頁。)全選該文字后單擊右鍵選擇創(chuàng)建鏈接，或者選擇右下角鏈接欄。單擊中按鍵會出現(xiàn)如下對話框：鏈接文件：在查找范圍中選擇本地硬盤中的文件后，單擊確定。鏈接URL：在下面URL文本欄中輸出地址，并單擊確定即可。5) 添加圖像：選擇 插入->圖像選擇指定圖片，或者將網(wǎng)絡(luò)圖片的URL地址添加到URL框中，單擊確定。選中圖片后在下方屬性中修改：寬、高用于修改圖片大小、源文件修改圖片來源、鏈接用于添加圖片的超鏈接、垂直和水平邊距用于修改圖

3、片距離網(wǎng)頁最上和最左的距離、對齊和邊框用于修改圖片對齊屬性和邊框大小。6) 頁面屬性修改：在網(wǎng)頁空白處單擊右鍵選擇頁面屬性。外觀：Ø 頁面字體：定義頁面中的默認文本字體。Ø 大?。憾x頁面中默認的字體大小。Ø 文本顏色：定義頁面中默認的文本的顏色。Ø 背景顏色：定義頁面背景色。Ø 背景圖像：可以輸入用作HTML文檔背景圖像的路徑和文件名稱。單擊后面的瀏覽按鈕，可以從磁盤上選擇圖像文件。Ø 左、右、頂部、底部邊界：設(shè)置頁面元素同頁面邊界的間距。鏈接選項是一些與頁面的鏈接效果相關(guān)的設(shè)置：Ø 鏈接字體：定義頁面超鏈接文本在默認狀態(tài)

4、下的字體。Ø 大小：定義超鏈接文本的字體大小。Ø 鏈接顏色：定義超鏈接文本默認狀態(tài)下的字體顏色。Ø 翻轉(zhuǎn)鏈接：定義鼠標(biāo)放在鏈接上時，鏈接所顯示的顏色。Ø 訪問過的鏈接：定義訪問過的鏈接的顏色。Ø 活動鏈接：定義活動鏈接的顏色。Ø 下劃線樣式:定義鏈接下劃線的樣式。7) 插入對象：Ø 特殊字符：插入->HTML->特殊字符。Ø 日期：插入->日期。Ø 水平線：插入->HTML->水平線。(用于分開文字與圖片使界面更加美觀)Ø 表格：插入->表格。簡單用法如下：&

5、#216; 背景音樂：插入->媒體->插件 在彈出對話框中選擇音源并確定。Ø 插入FLASH動畫：插入->媒體->FLASH視頻。8) 行為：在右邊欄中找到“行為”的選項框。選擇指定圖片后單擊添加行為。Ø 交換圖片：在設(shè)定原始檔中添加指定的圖片目錄。（選中圖片與指定圖片交換）Ø 彈出信息：在消息框中添加文字。（單擊彈出消息對話框，顯示指定文字）Ø 打開瀏覽器窗口。Ø 播放聲音。（播放指定聲音片段）Ø 轉(zhuǎn)到URL。設(shè)置好對應(yīng)的行為后，在瀏覽網(wǎng)頁中單擊該圖片或文字指定事件發(fā)生。9) 框架與層：框架是網(wǎng)頁制作中常用的

6、設(shè)計方式之一?？蚣芸梢詫⒁粋€瀏覽器窗口劃分為多個區(qū)域，每個區(qū)域都可以顯示不同的HTML文檔。每個框架區(qū)域也都可以用單獨的滾動條，在瀏覽一個框架時并不影響另一個框架的顯示內(nèi)容。插入->HTML->框架 根據(jù)名稱選擇插入框架的位置。查看->可視化助理->框架邊框 頁面四周將顯示出框架的邊框線。修改->框架頁 或 用鼠標(biāo)拖動文檔窗口四周顯示的框架邊框。支持動態(tài)HTML是Dreamweaver 8最突出的特點，即可以通過層實現(xiàn)文檔內(nèi)容在網(wǎng)頁中的精確定位。層在網(wǎng)頁中的位置可以任意放置，用戶可以將圖像、文字等元素放到層中，這樣就可以達到網(wǎng)頁元素的精確定位。插入->布局對

7、象->層，層屬性的修改基本類似于圖片。10) 預(yù)覽并保存。文件->另存為：保存網(wǎng)頁至指定目錄。文件->在瀏覽器中預(yù)覽->IExplore 7.0：預(yù)覽網(wǎng)頁于瀏覽器。11) 在個人主頁上發(fā)表：Ø 在個人的FTP上建立Public_html文件夾。Ø 將制作好的的網(wǎng)頁更名為index.html并上傳至Public_html文件夾下。Ø 將網(wǎng)頁用到的所有素材圖片包括文件一起放到Public_html文件夾中。(注：制作時應(yīng)將素材放置于index.html同目錄)Ø 在瀏覽器中輸入實驗內(nèi)容：制作簡單的個人主頁，其中應(yīng)該包括主頁的名稱、文字、圖片、一些超鏈接，最好再添加一些音樂背景及其它效果使得其更加美觀。實驗提交：本實驗完成后，請將主頁地址發(fā)送到lding。本實驗的截止日期為2008.5.29。注1：上述實驗僅提供了基本的網(wǎng)頁制作方法，如果有同學(xué)希望使用更高級一些的方法，請在實驗時向助教提出，助教將逐一進行解答。注2：對實驗三的