網(wǎng)頁設(shè)計(jì)與制作 2014/12/4 2 主要內(nèi)容： 第 1章：網(wǎng)頁制作基礎(chǔ) 第 2章： Dreamweaver MX 2004 第 3章：插入網(wǎng)頁基本元素 第 4章：頁面設(shè)計(jì) 第 5章：高級(jí)網(wǎng)頁制作 2014/12/4 3 第 1章 網(wǎng)頁制作基礎(chǔ) Web和瀏覽器 Web Web的特點(diǎn)和結(jié)構(gòu) Web 最 大 的 特 點(diǎn) 是 使 用 了 超 文 本（ Hypertext） WWW采用 C/S（ 客戶機(jī) /服務(wù)器 ） 工作模式 在瀏覽器和服務(wù)器之間應(yīng)用 HTTP（ Hyper Text Transfer Protocol， 超文本傳輸協(xié)議 ）作為網(wǎng)絡(luò)應(yīng)用層通信協(xié)議 2014/12/4 4 URL Internet上所有的資源都有一個(gè)唯一的URL地址，一般將 URL地址稱為網(wǎng)址。 URL的完整格式如下： 協(xié)議 :/主機(jī)名（或 IP地址）：端口號(hào) /路徑名 /文件名 2014/12/4 5 【 例 】 幾個(gè) URL的例子 . （ 1） ，用http協(xié)議和缺省端口號(hào)（ 80）訪問微軟公司服務(wù)器 。這里沒有指定路徑和文件名，所以訪問的結(jié)果是把一個(gè)缺省主頁送給瀏覽器。 （ 2） /pub/ms-windows/winvn926.zip，用 FTP協(xié)議訪問北京大學(xué) FTP服務(wù)器上路徑名為 pub/ms-windows、文件名為 winvn926.zip的文件。 2014/12/4 6 （ 3） : 8001/uu-gna/index.html，從運(yùn)行在端口號(hào) 8001的服務(wù)器上訪問 index.html主頁。 （ 4)/Addressing/URL/5-BNF.html#httpaddress，訪問 服務(wù)器上 Addressing/URL目錄下的 5-BNF.html 網(wǎng)頁文件中錨點(diǎn)標(biāo)識(shí)為 httpaddress的地方。 2014/12/4 7 瀏覽器 概述 分類 Internet Explorer Netscape Navigator Mosaic等專業(yè)瀏覽器以及一些以上述瀏覽器為內(nèi)核的專用瀏覽器。 其中使用最廣泛的是 Microsoft出品的Internet Explorer 6.0（簡(jiǎn)稱 IE6）。 2014/12/4 8 IE6的界面 標(biāo)題欄 工具欄 菜單欄 地址欄 狀態(tài)欄 瀏覽窗口 2014/12/4 9 IE6.0的使用 瀏覽網(wǎng)頁 “停止”按鈕 前進(jìn)和后退 刷新頁面 改變文字大小 選擇編碼 全屏幕顯示 查看源文件 2014/12/4 10 打開多個(gè)窗口 用菜單欄上的“文件” “新建” “窗口”，會(huì)打開一個(gè)新的瀏覽器窗口。 一般情況下，打開四、五個(gè)窗口可以充分利用系統(tǒng)資源，而且通過調(diào)整窗口的大小和位置還可以同時(shí)瀏覽。 2014/12/4 11 主頁、臨時(shí)文件和歷史記錄 瀏覽器在打開時(shí)自動(dòng)調(diào)入的網(wǎng)頁稱為“主頁”，主頁可以通過“工具” “ Internet選項(xiàng)”打開Internet選項(xiàng)對(duì)話框，在“常規(guī)”選項(xiàng)卡的“主頁”欄設(shè)置 . 2014/12/4 12 收藏夾的使用 使用菜單“收藏” “添加到收藏夾”打開添加到收藏夾對(duì)話框。 2014/12/4 13 使用菜單“收藏” “整理收藏夾”打開收藏夾整理對(duì)話框，進(jìn)行收藏夾中網(wǎng)頁的移動(dòng)、刪除、改名及創(chuàng)建新文件夾等操作。 2014/12/4 14 關(guān)閉圖片顯示 在網(wǎng)絡(luò)速度較慢時(shí)，不觀看網(wǎng)頁中的圖片和其它多媒體內(nèi)容可以得到更快的下載速度。通過“工具” “ Internet選項(xiàng)”打開 Internet選項(xiàng)對(duì)話框，在“高級(jí)”選項(xiàng)卡中可以對(duì)瀏覽器的工作方式進(jìn)行設(shè)置 2014/12/4 15 關(guān)閉自動(dòng)完成功能 通過工具 Internet選項(xiàng)，打開 Internet選項(xiàng)對(duì)話框，在“內(nèi)容”選項(xiàng)卡的“個(gè)人信息”部分單擊“自動(dòng)完成”按鈕打開自動(dòng)完成設(shè)置對(duì)話框 。 2014/12/4 16 搜索引擎的使用 1、使用瀏覽器的“搜索”按鈕 2、使用專門的搜索引擎 (Google) (擺渡 ) (雅虎 ) (搜狐 ) 2014/12/4 17 認(rèn)識(shí)網(wǎng)站 1.門戶網(wǎng)站 2.個(gè)人網(wǎng)站 3.專業(yè)網(wǎng)站 4.職能網(wǎng)站 2014/12/4 18 1.門戶網(wǎng)站 這類網(wǎng)站是一種綜合性網(wǎng)站，涉及領(lǐng)域非常廣泛，包含文學(xué)、音樂、影視、體育、新聞和娛樂等方方面面的內(nèi)容，具有論壇、搜索和短信等功能?，F(xiàn)在國(guó)內(nèi)較著名的門戶網(wǎng)站有搜狐（ ）、網(wǎng)易（ ）等。 2014/12/4 19 2.個(gè)人網(wǎng)站 個(gè)人網(wǎng)站具有較強(qiáng)個(gè)性化，是以個(gè)人名義開發(fā)創(chuàng)建的網(wǎng)站，其內(nèi)容、樣式、風(fēng)格等都是非常有個(gè)性的。 2014/12/4 20 3.專業(yè)網(wǎng)站 這類網(wǎng)站具有很強(qiáng)的專業(yè)性，通常只涉及某一個(gè)領(lǐng)域，內(nèi)容專業(yè)。如榕樹下網(wǎng)站（ ）即是一個(gè)專業(yè)文學(xué)網(wǎng)站。 2014/12/4 21 4.職能網(wǎng)站 職能網(wǎng)站具有專門的功能，如政府職能網(wǎng)站等。目前逐漸興起的電子商務(wù)網(wǎng)站也屬于這類網(wǎng)站，較有名的電子商務(wù)網(wǎng)站有阿里巴巴（ ）、卓越網(wǎng)（ ）和當(dāng)當(dāng)網(wǎng)上書店（ ）等。 2014/12/4 22 認(rèn)識(shí)網(wǎng)頁 Flash動(dòng)畫 導(dǎo)航欄 GIF動(dòng)畫 文字 表單 圖片 超級(jí)鏈接 2014/12/4 23 網(wǎng)頁中的元素 1.文字 2.圖像 3.表單 4.Flash動(dòng)畫 5. 表格 6. 超級(jí)鏈接 7. 視頻、音頻 8. POP窗口 9. 標(biāo)題欄和狀態(tài)欄文字 2014/12/4 24 1.2 網(wǎng)頁制作的相關(guān)知識(shí) HTML語言概述 是一種超文本標(biāo)記語言，作為一種網(wǎng)頁編輯語言，易學(xué)易懂。 2014/12/4 25 1、 HTML網(wǎng)頁 HTML網(wǎng)頁通常是由三部分內(nèi)容組成的：版本信息、網(wǎng)頁標(biāo)題（ HEAD）和文檔主體（ BODY）。 下面就是網(wǎng)頁結(jié)構(gòu)的總體框架： 2014/12/4 26 （ 1）版本信息 版本信息位于 HTML網(wǎng)頁文件的第一行 （ 2） HTML文件標(biāo)記 大部分網(wǎng)頁文件都是以 標(biāo)記開始的，在文件的結(jié)尾處又以 結(jié)束 （ 3）頭部信息 HEAD標(biāo)記之間是 HTML文檔的頭部，用來標(biāo)明當(dāng)前文檔的有關(guān)信息 在 HEAD標(biāo)記之間，使用頻率最高的標(biāo)記就是TITLE，它用于定義顯示在瀏覽器標(biāo)題欄的文檔標(biāo)題。 2014/12/4 27 【 例 】 給網(wǎng)頁設(shè)置 “ 勵(lì)志學(xué)社 ” 的文檔標(biāo)題，可在頭部輸入以下代碼： 勵(lì)志學(xué)社 2014/12/4 28 （ 4）主體標(biāo)記 網(wǎng)頁的主體是 “ ”標(biāo)記對(duì)作用的范圍 標(biāo)記用于定義 HTML文檔主體的開始，它能夠設(shè)置網(wǎng)頁的背景圖像、背景顏色、鏈接顏色和網(wǎng)頁邊距等屬性，其基本用法如下所示： Bgcolor為背景顏色。關(guān)于顏色的值后面會(huì)詳細(xì)介紹。 Text為不包含超級(jí)鏈接的文字顏色。 Link為超級(jí)鏈接文字的顏色。 Alink為正被點(diǎn)擊的超級(jí)鏈接文字的顏色。 2014/12/4 29 Leftmargin、 Topmargin用于設(shè)置網(wǎng)頁的左邊距和上邊框，它們是以像素為單位 【 例 1】 將網(wǎng)頁的上邊距和左邊距分別設(shè)置為 40和 30個(gè)像素的寬度，使用黑色文本、白色背景，未訪問的鏈接源采用藍(lán)色，已訪問的鏈接源標(biāo)記為暗紅色。 Vlink為已經(jīng)點(diǎn)擊過的超級(jí)鏈接文字的顏色。 Background設(shè)置，如果設(shè)置了背景圖片，圖片會(huì)覆蓋已經(jīng)設(shè)置的顏色。 2014/12/4 30 2、 XML語言 XML（ eXtensible Markup Language）被稱作是下一代的網(wǎng)頁標(biāo)記語言，也是采用各種標(biāo)記來形成網(wǎng)頁的源代碼。 XML中包括可擴(kuò)展格式語言XSL(Extensible Style Language) 和可擴(kuò)展鏈接語言 XLL(Extensible Linking Language)。 2014/12/4 31 1.22 靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁 靜態(tài)網(wǎng)頁指基本上全部使用HTML語言制作的網(wǎng)頁，頁面的內(nèi)容是固定不變的。 動(dòng)態(tài)網(wǎng)頁（ DynamicHTML，DHTML）利用 JavaScript， CSS (層疊樣式表 ) 及其它類似的語言如VBScript等與 HTML進(jìn)行有機(jī)的結(jié)合來使靜態(tài)的 HTML網(wǎng)頁變成動(dòng)態(tài)。 2014/12/4 32 1.23 Web服務(wù)器端程序 專業(yè)的網(wǎng)站都是建立在使用數(shù)據(jù)庫的基礎(chǔ)上的，要將這些數(shù)據(jù)庫變成可以通過瀏覽器顯示和操作的 Web頁面，就需要編寫服務(wù)器端的程序。用戶向服務(wù)器傳送提交的表單（個(gè)人信息、選擇結(jié)果等）需要在服務(wù)器端進(jìn)行記錄、篩選等處理。大量的數(shù)據(jù)庫查詢、修改處理也需要服務(wù)器端程序的支持。 目前常用的服務(wù)器端編程技術(shù)主要有CGI、 ASP、 PHP、 JSP等，不同的技術(shù)需要不同的系統(tǒng)環(huán)境支持。 2014/12/4 33 1.3 網(wǎng)頁制作的基本方法 制作網(wǎng)頁的基本步驟 1、確定網(wǎng)頁的內(nèi)容 2、設(shè)計(jì)網(wǎng)頁的組織結(jié)構(gòu) 3、資料的收集與整理 4、選擇網(wǎng)頁的設(shè)計(jì)方法 常用的網(wǎng)頁制作工具有 Frontpage、Dreamweaver等。服務(wù)器端的 ASP程序可以使用Visual Interdev、 UltraDEV等編輯。 2014/12/4 34 開始網(wǎng)頁制作 構(gòu)建頁面框架 創(chuàng)建導(dǎo)航條 填充內(nèi)容 創(chuàng)建返回主頁連接 2014/12/4 35 網(wǎng)頁制作的原則 站點(diǎn)要有創(chuàng)意 整體規(guī)劃 動(dòng)畫不能過多 導(dǎo)航要明朗 制作通用網(wǎng)頁 主題鮮明 優(yōu)化圖象 定時(shí)更新 2014/12/4 36 制作網(wǎng)頁時(shí)要注意的問題 1、網(wǎng)頁的標(biāo)題要簡(jiǎn)潔，明確。 2、在文本中要使用水平線，以分割不同部分。 3、對(duì)重點(diǎn)段落要強(qiáng)調(diào)顯示。 4、網(wǎng)頁中插入的圖片要盡量的小。 5、圖形要附加文字說明，以便關(guān)閉圖像時(shí)查看。 6、網(wǎng)頁中引用的資料及商標(biāo)（或圖標(biāo)），不能侵犯版權(quán)。 2014/12/4 37 1.4 Macromedia Studio MX2004 Macromedia Studio MX2004是目前應(yīng)用最廣泛的網(wǎng)頁制作工具組件，使用方便、功能齊全，Dreamweaver、 Flash、 Fireworks被稱作 “ 網(wǎng)頁三劍客 ” 。 在 Dreamweaver 里用豐富的層疊樣式表制作耐看，專業(yè)的網(wǎng)站。 Macromedia Flash 工具可較快的制作 SWF 文件。 Fireworks通過自動(dòng)變形，用動(dòng)的效果，圖片編輯工具和拖拽工具能傳送較精彩的 Fireworks 圖片。 2014/12/4 38 思考題 1.1 什么是 WWW？什么是網(wǎng)頁？ 1.2 一個(gè)完整的 URL由哪幾部分組成？舉出幾個(gè) URL的例子。 1.3 如何設(shè)置 IE的主頁？如何用 IE收藏一個(gè)網(wǎng)頁？ 1.4 網(wǎng)頁中一般都使用了哪些技術(shù)？ 1.5 Macromedia Studio MX2004有哪幾部分組成？ 第 2章 Dreamweaver MX 2004 本章要點(diǎn) 初識(shí) Dreamweaver MX 2004 創(chuàng)建站點(diǎn) Dreamweaver MX 2004基本操作 啟動(dòng)與退出 Dreamweaver MX 2004 安裝好 Dreamweaver MX 2004后就可以使用它進(jìn)行網(wǎng)頁制作了。接下來就講解怎樣啟動(dòng)與退出 Dreamweaver MX 2004。 啟動(dòng) Dreamweaver MX 2004 啟動(dòng) Dreamweaver MX 2004可選擇 “ 開始 /所有程序 /Macromedia/Macromedia Dreamweaver MX 2004”命令。也可雙擊Dreamweaver MX 2004的桌面快捷方式。 啟動(dòng) Dreamweaver MX 啟動(dòng) Dreamweaver MX 2004 首次啟動(dòng) Dreamweaver MX 2004時(shí)，將彈出 “ 工作區(qū)設(shè)置 ” 對(duì)話框。在該對(duì)話框中可選擇工作區(qū)布局，對(duì)于初學(xué)者來說，基本上不會(huì)涉及代碼編寫，可選擇 單選按鈕。 啟動(dòng) Dreamweaver MX 2004 以上是首次啟動(dòng) Dreamweaver MX 2004所需進(jìn)行的操作，以后啟動(dòng)會(huì)直接進(jìn)入工作 界面。 退出 Dreamweaver MX 2004 在結(jié)束網(wǎng)頁編輯后若需退出Dreamweaver MX 2004，操作很簡(jiǎn)單，直接單擊操作窗口右上角的 按鈕或選擇 “ 文件 /退出 ” 命令即可。 Dreamweaver MX 2004的工作界面 啟動(dòng) Dreamweaver MX 2004后即可進(jìn)入其工作界面。 Dreamweaver MX