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

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

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

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

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

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

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

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

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

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

②設(shè)計效果圖：

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

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

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

<HEAD><TITLE>標題部分</TITLE></HEAD>

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

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

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

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

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