清華網(wǎng)頁制作1

1、網(wǎng)頁制作計(jì)算機(jī)文化基礎(chǔ)課程電子講稿2008年10月 HTML四次大課內(nèi)容安排如何利用HTML編寫網(wǎng)頁建立網(wǎng)站與網(wǎng)頁的概念使用FrontPage快速制作網(wǎng)站使用Dreamweaver潤色網(wǎng)站網(wǎng)頁特效的應(yīng)用Javascript2本次大課的內(nèi)容提要網(wǎng)頁與網(wǎng)站網(wǎng)頁和網(wǎng)站制作的基本步驟網(wǎng)站創(chuàng)建的基本方法認(rèn)識HTML語言使用FrontPage創(chuàng)建網(wǎng)站網(wǎng)頁編輯參考資料3第三次作業(yè)補(bǔ)充內(nèi)容選題（沒有嚴(yán)格限制）要提交網(wǎng)頁制作報(bào)告（必須）提倡以團(tuán)隊(duì)形式完成該作業(yè)，團(tuán)隊(duì)規(guī)模不超過4人所有的文件（網(wǎng)頁文件、素材文件、網(wǎng)頁制作報(bào)告）要求用WinRAR打包壓縮成一個.rar或.zip文件，名字由網(wǎng)站名稱和隊(duì)員學(xué)號構(gòu)成，采

2、用FTP方式提交（星際_049901_049999_043662.rar）每位同學(xué)須通過提交作業(yè)提交團(tuán)隊(duì)制作報(bào)告，以便查閱成績4網(wǎng)頁與主頁網(wǎng)頁 ( Web Page )主頁 ( Home Page )瀏覽器與Web服務(wù)器之間是以頁為單位來傳送信息。頁的大小=顯示器屏幕大?。L動條）固定頁與顯示器分辨率相關(guān)（1024*768）5網(wǎng)頁與網(wǎng)站網(wǎng)頁通常成組出現(xiàn)，并且這組網(wǎng)頁之間通過超鏈接相互組織成為反映某個主題的網(wǎng)站。提高下載速度超文本地址引用方便Web頁沒有固定的長度6網(wǎng)頁的制作工具可利用任何一種文字處理軟件編輯Web文檔（推薦：記事本）Web文檔以純文本格式存放，取名為*.html或*.htm。

3、其中插入的HTML語言只有用瀏覽器才能被解釋翻譯，最終在瀏覽器窗口中呈現(xiàn)為圖文并茂的網(wǎng)頁。NOTEPAD7超文本標(biāo)記語言HTML HyperText Markup Language 歡迎光臨無名的主頁歡迎光臨無名的主頁樣 例標(biāo)記需要放在中標(biāo)記中有很多是成對出現(xiàn)，一頭一尾（結(jié)束標(biāo)記前要加“/”）所有標(biāo)記中的字母不區(qū)分大小寫通常以“.html”或“htm”為文件后綴標(biāo)記的書寫格式如下： 文件內(nèi)容HTML特點(diǎn)8直接使用HTML編寫網(wǎng)頁簡單的HTML例子歡迎光臨無名的主頁這就是我我常去的網(wǎng)站， Yahoo! 9HTML在瀏覽器中被解釋簡單的HTML例子歡迎光臨無名的主頁這就是我我常去的網(wǎng)站， Yaho

4、o! 一個HTML文件總是由文件頭（HEAD）和文件體（BODY）兩部分組成。標(biāo)記和用來說明本文件是一個HTML文件。10“所見即所得”的網(wǎng)頁編輯工具FrontPage易學(xué)易用，適合于網(wǎng)頁設(shè)計(jì)的初學(xué)者；Dreamweaver強(qiáng)調(diào)的是更強(qiáng)大的網(wǎng)頁控制、設(shè)計(jì)能力及創(chuàng)意的完全發(fā)揮，適合專業(yè)的制作人員使用。11“所見即所得”的網(wǎng)頁編輯普通：“頁面視圖”，所見即所得的編輯環(huán)境；HTML: “源代碼視圖”，直接通過修改HTML標(biāo)記命令編輯網(wǎng)頁；預(yù)覽：“打印預(yù)覽視圖”，查看IE瀏覽器窗口中顯示的效果。12FrontPage的網(wǎng)站管理功能FrontPage2000屬于Office2000家族的成員, 易于上手

5、:FrontPage“所見即所得”的網(wǎng)頁編輯環(huán)境可進(jìn)行與文件和文件夾有關(guān)的操作，如新建、復(fù)制、刪除、重命名等。 可從網(wǎng)站的總文件數(shù)目、超鏈接數(shù)、慢速網(wǎng)頁、斷開的超鏈接等不同的角度了解網(wǎng)站的情況。記錄站點(diǎn)的結(jié)構(gòu)，即站點(diǎn)內(nèi)各網(wǎng)頁的層次結(jié)構(gòu)圖。可以任意網(wǎng)頁為參考點(diǎn)，形象地指示出通過超鏈接相聯(lián)的其他網(wǎng)頁為各個成員分配任務(wù)，協(xié)調(diào)成員之間的工作等任務(wù)。13 網(wǎng)站制作步驟選擇主題規(guī)劃網(wǎng)頁（結(jié)構(gòu)與鏈接關(guān)系）組織素材選擇視覺外觀設(shè)計(jì)有效的頁面布局制作具體網(wǎng)頁發(fā)布網(wǎng)站信息14 網(wǎng)站基本結(jié)構(gòu)網(wǎng)站是由網(wǎng)頁組成的，網(wǎng)頁之間是由超鏈接來連接的，其鏈接方式三種：線性網(wǎng)站、樹狀網(wǎng)站、非線性網(wǎng)站線性網(wǎng)站：一頁連接一頁樹狀網(wǎng)站：

6、分層排列非線性網(wǎng)站：上述兩種網(wǎng)站的結(jié)合15最簡單的方法：直接在網(wǎng)頁視圖中制作每一個網(wǎng)頁文件最常用的方法：本地機(jī)中的某個文件夾指定為FrontPage站點(diǎn)，利用Frontpage管理這些網(wǎng)頁最好的方法：使用真實(shí)的站點(diǎn)服務(wù)器網(wǎng)站創(chuàng)建的基本方法16 網(wǎng)站創(chuàng)建步驟舉例（1）選擇要用來創(chuàng)建新站點(diǎn)的模板或向?qū)?，指定新站點(diǎn)的位置和名稱，單擊“確定”按鈕。D:OpenLab17網(wǎng)站創(chuàng)建步驟舉例（2）切換到“導(dǎo)航”視圖創(chuàng)建的站點(diǎn)結(jié)構(gòu) 18 網(wǎng)站創(chuàng)建步驟舉例（3）修改前修改后主頁切換到“文件夾”視圖修改網(wǎng)頁文件名19網(wǎng)站創(chuàng)建步驟舉例（4）切換到“網(wǎng)頁”視圖雙擊某個網(wǎng)頁文件名進(jìn)入具體網(wǎng)頁的編輯20 基本網(wǎng)頁編輯在 FrontPage 中，可以像使用word的方式來設(shè)置文本格式。通過插入菜單可以插入四種類型的特殊元素：換行符、水平線、符號和注釋。設(shè)置文本格式 插入特殊網(wǎng)頁元素項(xiàng)目符號和編號是組織數(shù)據(jù)的工具，它可以使數(shù)據(jù)層次分明、重點(diǎn)突出。使用項(xiàng)目符號和編號用瀏覽器預(yù)覽網(wǎng)頁使用背景色和背景音樂21 圖形的插入HTML并不能包含圖像，它只是包含圖像文件的名稱和相應(yīng)的格式代碼。 圖形的插入 直接拖拽來改變圖片的大小 使用圖片屬性對話框來設(shè)置 圖片的替代文字、圖片邊框 使用圖片工具欄編輯圖片22網(wǎng)站保存補(bǔ)充說明放置文件柜23再次打開網(wǎng)站補(bǔ)充說明進(jìn)入文件柜下載文件到本地機(jī)D 盤24參考資料參