網(wǎng)頁(yè)設(shè)計(jì)概述

網(wǎng)頁(yè)設(shè)計(jì)Name：劉佳Office：網(wǎng)絡(luò)教研室C4-308Email:956420190@Tel:2184431課程內(nèi)容及教材運(yùn)用AdobeDreamweaverCS5軟件，來(lái)介紹設(shè)計(jì)與制作靜態(tài)網(wǎng)站的方法和技巧，為后續(xù)課程《網(wǎng)絡(luò)編程》打好基礎(chǔ)。

基本要求：認(rèn)真聽(tīng)課、注意操作課上充分預(yù)習(xí)和復(fù)習(xí)、多練習(xí)課下請(qǐng)假制度、上機(jī)按學(xué)號(hào)入座紀(jì)律認(rèn)真按時(shí)獨(dú)立完成作業(yè)本課程的特點(diǎn)：應(yīng)用性、實(shí)踐性強(qiáng)。第1章網(wǎng)頁(yè)設(shè)計(jì)概述網(wǎng)頁(yè)基礎(chǔ)知識(shí)網(wǎng)頁(yè)構(gòu)成元素網(wǎng)站建設(shè)的流程HTML基礎(chǔ)DreamweaverCS5操作環(huán)境簡(jiǎn)介1.1網(wǎng)頁(yè)基礎(chǔ)知識(shí)在因特網(wǎng)上，根據(jù)一定規(guī)則，使用特定工具制作的用來(lái)展示特定內(nèi)容的相關(guān)文件稱(chēng)為網(wǎng)頁(yè)，這些網(wǎng)頁(yè)的集合就是一個(gè)網(wǎng)站。什么是網(wǎng)頁(yè)、網(wǎng)站、WWW？WWW：萬(wàn)維網(wǎng)，簡(jiǎn)稱(chēng)為Web，是Internet上最受歡迎、最為流行的信息檢索服務(wù)系統(tǒng)，信息資源以web頁(yè)的形式存儲(chǔ)在WWW服務(wù)器中，用戶(hù)通過(guò)WWW客戶(hù)端瀏覽器程序?yàn)g覽Web頁(yè)內(nèi)容。WWW服務(wù)的工作原理URL：應(yīng)用協(xié)議類(lèi)型://信息資源所在主機(jī)名（域名或IP地址）/路徑名/…/文件名WWW服務(wù)的主要特點(diǎn)WWW服務(wù)采用了客戶(hù)機(jī)/服務(wù)器模式；WWW服務(wù)的核心技術(shù)是：超文本標(biāo)記語(yǔ)言（HTML）：制作網(wǎng)頁(yè)的一種編程語(yǔ)言，HTML文檔擴(kuò)展名通常為.htm或.html。超文本傳輸協(xié)議（HTTP）：客戶(hù)端與WWW服務(wù)器之間相互通信的應(yīng)用層協(xié)議，保證正確傳輸超文本文檔。超鏈接（hyperlink）:實(shí)現(xiàn)了網(wǎng)頁(yè)之間的跳轉(zhuǎn)，www以超文本及超媒體方式組織網(wǎng)絡(luò)多媒體信息，用戶(hù)可以訪問(wèn)文本、語(yǔ)音、圖形和視頻等信息。1.2網(wǎng)頁(yè)構(gòu)成元素網(wǎng)頁(yè)是由哪些基本元素構(gòu)成的呢？圖像文本網(wǎng)頁(yè)視頻動(dòng)畫(huà)超鏈接音頻表格、表單、導(dǎo)航、條、懸停按鈕、Java特效、AxtiveX組件等

1.2網(wǎng)頁(yè)構(gòu)成元素文本：是網(wǎng)頁(yè)的信息主體，能準(zhǔn)確的表達(dá)信息的內(nèi)容和含義。占用的空間小，傳輸速率高。圖像：占用的空間大，傳輸速率慢。如果使用恰當(dāng)比文字更具有說(shuō)服力，使網(wǎng)頁(yè)更生動(dòng)，更具表現(xiàn)力和吸引力。網(wǎng)頁(yè)中常用的圖象文件格式有：GIF、JPEG、PNG等。動(dòng)畫(huà)：占用的空間比圖像還大，但是“動(dòng)”比“靜”更具生命力，更能打動(dòng)人心。一般網(wǎng)站廣告都以動(dòng)畫(huà)形式顯示。超鏈接：是網(wǎng)頁(yè)的靈魂，是網(wǎng)絡(luò)超文本體系結(jié)構(gòu)的經(jīng)絡(luò)。在網(wǎng)站內(nèi)網(wǎng)頁(yè)之間的跳轉(zhuǎn)或網(wǎng)站之間的跳轉(zhuǎn)等都是靠超鏈接實(shí)現(xiàn)的。音頻：音頻是多媒體網(wǎng)頁(yè)重要組成部分。網(wǎng)頁(yè)中常用的聲音文件格式有：MIDI、WAV、MP3等，可使用音頻文件作為網(wǎng)頁(yè)的背景音樂(lè)，但會(huì)影響網(wǎng)頁(yè)的下載速度。視頻：在網(wǎng)頁(yè)中用作視頻交流或直播，使網(wǎng)頁(yè)變得生動(dòng)、真實(shí)。常用的視頻文件格式有：RealPlayer、MPEG、AVI等。1.2網(wǎng)頁(yè)構(gòu)成元素表格：用來(lái)控制網(wǎng)頁(yè)信息的布局方式。可以使用表格來(lái)精確控制各種網(wǎng)頁(yè)元素在網(wǎng)頁(yè)中的顯示位置。表單：可以實(shí)現(xiàn)瀏覽者與站點(diǎn)之間的交互。網(wǎng)頁(yè)中的表單通常用來(lái)接收用戶(hù)在客戶(hù)端的輸入，然后將這些信息發(fā)送到服務(wù)器端。表單有不同功能的表單域組成。導(dǎo)航條：是一組超鏈接，用于在站點(diǎn)的首頁(yè)及其他重要網(wǎng)頁(yè)中進(jìn)行跳轉(zhuǎn)。一般情況下，導(dǎo)航條應(yīng)放在網(wǎng)頁(yè)的醒目位置。其他特殊元素：如懸停按鈕、Java特效、AxtiveX組件等，可增強(qiáng)網(wǎng)頁(yè)功能，使網(wǎng)頁(yè)更有趣。1.2網(wǎng)頁(yè)構(gòu)成元素網(wǎng)站(WebSite)建設(shè)是個(gè)系統(tǒng)工程，其基本工作流程可分為5個(gè)階段：1.3網(wǎng)站建設(shè)的流程網(wǎng)站策劃網(wǎng)頁(yè)制作網(wǎng)站測(cè)試與發(fā)布網(wǎng)站宣傳與維護(hù)

（1）（2）（3）（4）（5）網(wǎng)頁(yè)設(shè)計(jì)

網(wǎng)站策劃是在制作網(wǎng)站前對(duì)網(wǎng)站進(jìn)行周密的計(jì)劃，明確制作網(wǎng)站的目的以及怎么做。其工作主要包括：1.3.1網(wǎng)站策劃①確定網(wǎng)站的主題：網(wǎng)站的題材，即做一個(gè)什么類(lèi)型的網(wǎng)站？②確定網(wǎng)站的用戶(hù)群：以人為本1.3.1網(wǎng)站策劃③確定網(wǎng)站的配色方案：根據(jù)網(wǎng)站的整體風(fēng)格來(lái)選定網(wǎng)站的配色。紅色：往往與吉祥、好運(yùn)、喜慶相聯(lián)系，自然就成為節(jié)日、慶?；顒?dòng)的常用色

藍(lán)色：給人冷靜、沉思、智慧、和征服自然的力量，在商業(yè)設(shè)計(jì)中，強(qiáng)調(diào)科技、效率的商品或企業(yè)形象，大多選用藍(lán)色作為標(biāo)準(zhǔn)色。

1.3.1網(wǎng)站策劃④收集網(wǎng)站的素材和內(nèi)容廣泛收集、盡量全面，內(nèi)容相關(guān)個(gè)人網(wǎng)站：個(gè)人資料、個(gè)人照片、個(gè)人作品和興趣愛(ài)好等1.3.1網(wǎng)站策劃⑤確定網(wǎng)站欄目及網(wǎng)站目錄結(jié)構(gòu)欄目劃分要服從并體現(xiàn)網(wǎng)站主題：將準(zhǔn)備好的“原材料”按一定方法分類(lèi)，為其設(shè)立專(zhuān)門(mén)的欄目。規(guī)劃網(wǎng)站欄目的過(guò)程實(shí)際上就是網(wǎng)站內(nèi)容細(xì)化的過(guò)程，一個(gè)網(wǎng)站欄目有可能就是一個(gè)專(zhuān)欄網(wǎng)頁(yè)。不要將所有文件都存放在根目錄下，按欄目?jī)?nèi)容建立子目錄。每個(gè)目錄下都建立獨(dú)立的Images目錄：通常一個(gè)站點(diǎn)根目錄下都默認(rèn)有一個(gè)Images目錄，用來(lái)存放站點(diǎn)中用到的圖片。設(shè)計(jì)時(shí)應(yīng)為每個(gè)主欄目建立一個(gè)獨(dú)立的Images目錄，以方便管理。文件的命名要合理：由于受Web服務(wù)器識(shí)別限制，目錄文件在命名時(shí)要使用簡(jiǎn)短文件名，以英文形式為主，一律以小寫(xiě)形式處理。1.3.1網(wǎng)站策劃⑥確定網(wǎng)頁(yè)的版式設(shè)計(jì)與布局網(wǎng)頁(yè)首頁(yè)和其他頁(yè)面的結(jié)構(gòu)形式。為了達(dá)到統(tǒng)一、漂亮的視覺(jué)效果，網(wǎng)站中的所有頁(yè)面都是圍繞首頁(yè)布局進(jìn)行設(shè)計(jì)的。

網(wǎng)頁(yè)設(shè)計(jì)是實(shí)際設(shè)計(jì)網(wǎng)站的工作，包括如下幾個(gè)步驟：1.3.2網(wǎng)頁(yè)設(shè)計(jì)按照創(chuàng)意和設(shè)想繪制出網(wǎng)站首頁(yè)與子頁(yè)的草圖，也可以加入一些設(shè)計(jì)的風(fēng)格。框架和大體風(fēng)格確定后，繼續(xù)在圖紙上標(biāo)明欄目、內(nèi)容和網(wǎng)站上的一些顏色符號(hào)等，以避免遺漏規(guī)劃的內(nèi)容，并進(jìn)一步確定網(wǎng)站風(fēng)格。①手繪草圖

網(wǎng)頁(yè)設(shè)計(jì)是實(shí)際設(shè)計(jì)網(wǎng)站的工作，包括如下幾個(gè)步驟：1.3.2網(wǎng)頁(yè)設(shè)計(jì)將網(wǎng)站風(fēng)格、創(chuàng)意設(shè)計(jì)和網(wǎng)站內(nèi)容整合在一起的過(guò)程，就是根據(jù)草圖在圖像處理軟件Photoshop或Fireworks中進(jìn)行圖像編輯處理

②設(shè)計(jì)效果圖：

網(wǎng)頁(yè)制作是實(shí)際的網(wǎng)站構(gòu)建過(guò)程，是將設(shè)計(jì)的結(jié)果呈現(xiàn)給用戶(hù)。選擇一個(gè)網(wǎng)頁(yè)編輯軟件如Dreamweaver或FrontPage等，制作前面規(guī)劃的網(wǎng)頁(yè)內(nèi)容。如果需要，用PhotoShop、Flash、Fireworks等圖形軟件設(shè)計(jì)網(wǎng)頁(yè)的背景、標(biāo)題和動(dòng)畫(huà)等。1.3.3網(wǎng)頁(yè)制作1.3.4網(wǎng)站測(cè)試與發(fā)布網(wǎng)站測(cè)試：主要檢測(cè)各個(gè)網(wǎng)頁(yè)及組件能否正確運(yùn)行。如網(wǎng)頁(yè)的整體效果是否和你的想法一致，計(jì)數(shù)器能否正確顯示，廣告橫幅、滾動(dòng)字幕、動(dòng)態(tài)按鈕等是否符合要求，超鏈接是否鏈接正確等。網(wǎng)站發(fā)布：將自己的網(wǎng)站上傳到指定的主機(jī)服務(wù)器上。申請(qǐng)網(wǎng)頁(yè)空間：在提供網(wǎng)頁(yè)服務(wù)的ISP服務(wù)商處（如網(wǎng)易）申請(qǐng)網(wǎng)頁(yè)空間。上傳網(wǎng)頁(yè)：將網(wǎng)站上傳到Internet。登錄訪問(wèn)：登錄到相應(yīng)的站點(diǎn)即可訪問(wèn)。1.3.5網(wǎng)站宣傳與維護(hù)網(wǎng)站宣傳：采取注冊(cè)搜索引擎、交換鏈接、發(fā)送郵件等方式進(jìn)行網(wǎng)站宣傳推廣工作，以吸引更多的瀏覽者。網(wǎng)站維護(hù)：建立網(wǎng)站后必須負(fù)起維護(hù)與更新的責(zé)任，每天有新的內(nèi)容才能留住訪客的心。1.3網(wǎng)站建設(shè)的流程網(wǎng)站策劃網(wǎng)頁(yè)制作網(wǎng)站測(cè)試與發(fā)布網(wǎng)站宣傳與維護(hù)

（1）（2）（3）（4）（5）網(wǎng)頁(yè)設(shè)計(jì)第（1）步和第（2）步是整個(gè)建站過(guò)程的關(guān)鍵，在這兩步上多下功夫，多動(dòng)腦子，會(huì)達(dá)到事半功倍的效果。HTML語(yǔ)言是Web開(kāi)發(fā)的基礎(chǔ)，任何一個(gè)Web頁(yè)面都離不開(kāi)HTML。像Dreamweaver、Frontpage等網(wǎng)頁(yè)編輯工具具有所見(jiàn)即所得的功能，方便了用戶(hù)的開(kāi)發(fā)，但是作為Web程序的開(kāi)發(fā)人員，必須看懂HTML代碼，否則很難進(jìn)行下一步的編程（如ASP等）。1.4HTML基礎(chǔ)

HTML代碼結(jié)構(gòu)HTML文檔創(chuàng)建瀏覽所設(shè)計(jì)的網(wǎng)頁(yè)1.4.1HTML代碼結(jié)構(gòu)HTML標(biāo)記由一個(gè)開(kāi)始標(biāo)簽和一個(gè)封閉標(biāo)簽組成。標(biāo)簽封閉在小于尖括號(hào)（<）和大于尖括號(hào)（>）內(nèi)。通過(guò)重復(fù)輸入原始標(biāo)簽并在開(kāi)始尖括號(hào)后面輸入一個(gè)斜杠（/）來(lái)創(chuàng)建封閉標(biāo)簽。<HTML>

<HEAD><TITLE>標(biāo)題部分</TITLE></HEAD>

<BODY><P>你好,這是正文部分!</P>

</BODY></HTML><HTML>和</HTML>是HTML文件開(kāi)頭和結(jié)尾的標(biāo)記符<HEAD>和</HEAD>是標(biāo)題部分標(biāo)記符<BODY></BODY>是正文部分標(biāo)記符

<html>和</html>標(biāo)記該文檔為Web文檔，Web文檔的所有內(nèi)容都位于這兩個(gè)標(biāo)記之間。

<head>和</head>中包含一些與Web有關(guān)的特定信息，如網(wǎng)頁(yè)的標(biāo)題、樣式定義（如CSS）及腳本等。常用的有標(biāo)題標(biāo)記符<title>和</title>(定義網(wǎng)頁(yè)的標(biāo)題)。

<body>和</body>指定HTML文件的主體，文字、圖形、圖像、鏈接、動(dòng)畫(huà)、色彩和音效等元素都位于該標(biāo)記符內(nèi)。以上標(biāo)記符都必須成對(duì)出現(xiàn)。幾點(diǎn)說(shuō)明：1.4.2HTML文檔創(chuàng)建直接在文字編輯軟件中編寫(xiě)html代碼，如記事本、寫(xiě)字版、Word等，存為純文檔格式，擴(kuò)展名為*.htm或*.html。利用網(wǎng)頁(yè)制作工具如Dreamweaver或FrontPage等的所見(jiàn)即所得功能制作好網(wǎng)頁(yè)，其html代碼自動(dòng)生成。這種方法對(duì)用戶(hù)來(lái)講較簡(jiǎn)單。還可以再對(duì)html代碼進(jìn)行修改，比較常用。1.4.3瀏覽所設(shè)計(jì)的網(wǎng)頁(yè)雙擊HTML文檔圖標(biāo)在瀏覽器中打開(kāi)網(wǎng)頁(yè)文件如要修改網(wǎng)頁(yè)的程序，單擊瀏覽器窗口中“查看”“源文件”命令，調(diào)出記事本，修改完程序后保存，并在瀏覽器中刷新該網(wǎng)頁(yè)內(nèi)容。1.4.4編寫(xiě)自己的HTML代碼<html><body>Welcometomyfirstwebpage</body></html>（1）啟動(dòng)“記事本”（2）在空白文檔窗口輸入以下代碼：（3）把文件保存到桌面，并把它命名為firstpage.html（4）啟動(dòng)IE瀏覽器，選擇“文件”＞“打開(kāi)”，導(dǎo)航到桌面并選擇firstpage.html，然后單擊“確定”/“打開(kāi)”按鈕。了解HMTL語(yǔ)法（5）切換回文本編輯器，或在瀏覽器中選擇“查看”＞“源文件”（6）在文本“Welcometomyfirstpage”后插入光標(biāo)，按下Enter鍵插入一個(gè)段落回車(chē)符。（7）輸入“Makingwebpagesisfun”，然后按下空格鍵5次，插入5個(gè)空格。最后，在同一行上輸入“andeasy！”。（8）保存文件（9）切換到瀏覽器，刷新窗口，加載更新過(guò)的頁(yè)面。插入HTML語(yǔ)法（10）切換回文本編輯器，為文本添加加粗標(biāo)簽，如下：<p>Makingwebpagesisfunandeasy!</P>（11）利用非間斷空格替換文本中的5個(gè)空格，如下：<p>Makingwebpagesisfun     andeasy!</P>（12）保存文件，切換到瀏覽器，刷新窗口，加載更新過(guò)的頁(yè)面。利用HTML格式化文本（13）切換回文本編輯器，為文本添加加粗標(biāo)簽，如下：<h1>Welcometomyfirstwebpage</h1>（14）保存文件，切換到瀏覽器，刷新窗口，加載更新過(guò)的頁(yè)面。應(yīng)用內(nèi)聯(lián)格式化上述使用的所有標(biāo)簽都是作為段落或獨(dú)立的元素工作的，稱(chēng)為塊元素。HTML還提供了對(duì)包含在另一個(gè)標(biāo)簽內(nèi)的內(nèi)容（或內(nèi)聯(lián)）應(yīng)用格式化和結(jié)構(gòu)的能力。（15）切換回文本編輯器，為文本添加加粗標(biāo)簽，如下：<p>Makingwebpag