第四章 網(wǎng)站設(shè)計(jì)與評(píng)價(jià).ppt

1、第四章 網(wǎng)站設(shè)計(jì)與評(píng)價(jià),本章重點(diǎn)： 1、了解網(wǎng)站的基本結(jié)構(gòu)，了解靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁的工作原理及常用的網(wǎng)站建設(shè)技術(shù)。 2、能夠基本運(yùn)用FrontPage中的工具創(chuàng)建一個(gè)簡(jiǎn)單的網(wǎng)站。 3、了解網(wǎng)站是如何發(fā)布、管理、更新和維護(hù)。,基本概念,網(wǎng)站就是因特網(wǎng)上具有相似性質(zhì)、共同內(nèi)容的一組信息資源。 網(wǎng)頁（Page） 網(wǎng)頁是用HTML語言寫成的文件，它存放在某一臺(tái)計(jì)算機(jī)中，而這臺(tái)計(jì)算機(jī)必須是與因特網(wǎng)相連。 網(wǎng)頁文件最好以英文命名，并通常以“.htm”或者“.html”為擴(kuò)展名，以保證在瀏覽器中的正常解析。,第一節(jié) 了解與設(shè)計(jì)網(wǎng)站,構(gòu)成一個(gè)網(wǎng)站的基本元素是各種各樣的文件以及存放這些文件的文件夾。,網(wǎng)頁文件，

2、用來描述資結(jié)構(gòu)、位置，引導(dǎo)瀏覽者訪問該網(wǎng)站，通常以“.htm”或者“.html”為擴(kuò)展名。,網(wǎng)頁文件所連接到的圖像、音頻與視頻等資源文件,Web數(shù)據(jù)庫和程序文件,基本概念,主頁（Home Page） 主頁是通常用來表示訪問某個(gè)網(wǎng)站時(shí)出現(xiàn)的第一個(gè)頁面，用來對(duì)整個(gè)網(wǎng)站進(jìn)行概括性的介紹，描述其他各個(gè)頁面的內(nèi)容的。 主頁文件常以index或default命名，并通常用的擴(kuò)展名有.htm .html .jsp .asp等。 IE的主頁表示IE瀏覽器啟動(dòng)時(shí)，即訪問的網(wǎng)頁地址?？梢允且粋€(gè)網(wǎng)站的主頁，也可以是一個(gè)普通的網(wǎng)頁文件。,基本概念,網(wǎng)站的結(jié)構(gòu) 網(wǎng)站是由網(wǎng)頁組成的，網(wǎng)站是網(wǎng)頁的集合體，網(wǎng)頁是網(wǎng)站的元素。

3、 網(wǎng)站的結(jié)構(gòu)就是指某一網(wǎng)站的信息組合的基本框架，它顯示該網(wǎng)站中各個(gè)網(wǎng)頁之間的邏輯關(guān)系。 層次適當(dāng)：一般以3到4層為佳 拓展性廣：能夠容納信息的多變性和擴(kuò)展性,基本概念,網(wǎng)站的結(jié)構(gòu)主要有三種類型：,樹狀結(jié)構(gòu),線性結(jié)構(gòu),網(wǎng)狀結(jié)構(gòu),樹狀結(jié)構(gòu)：整個(gè)網(wǎng)站以主頁作為中心，向外分散出多個(gè)分支。 樹狀結(jié)構(gòu)是目前網(wǎng)站所采用的主要形式之一，它結(jié)構(gòu)清晰，訪問者可以根據(jù)路徑清楚的知道所在位置。但在建立枝干的層次時(shí)，最多不應(yīng)超過四個(gè)。,線性結(jié)構(gòu)：線狀結(jié)構(gòu)是網(wǎng)站最簡(jiǎn)單的結(jié)構(gòu)方式，網(wǎng)頁一層層鏈接起來，邏輯清晰。 單向線狀只提供往下一層網(wǎng)頁的鏈接； 雙向環(huán)狀除了像單向線狀那樣鏈接外，還可以倒著從網(wǎng)頁3回到網(wǎng)頁2，從網(wǎng)頁2回到

4、網(wǎng)頁1。 無論是單向線狀還是雙向環(huán)狀都不能在網(wǎng)頁之間自由跳躍鏈接。,網(wǎng)狀結(jié)構(gòu)：在網(wǎng)絡(luò)結(jié)構(gòu)中有一個(gè)主頁，所有的網(wǎng)頁都可以和主頁進(jìn)行鏈接，同時(shí)，各個(gè)網(wǎng)頁之間也隨意鏈接。網(wǎng)頁之間沒有明顯的結(jié)構(gòu)，像一張網(wǎng)一樣，可相互鏈接，隨意跳轉(zhuǎn)。 如果網(wǎng)頁信息內(nèi)容不能科學(xué)分類，訪問者容易在網(wǎng)頁跳轉(zhuǎn)過程中迷失方向，很難快速找到所需要的信息。,網(wǎng)頁制作工具,第一類是源代碼型編輯工具 代表產(chǎn)品有HotDog、HomeSite、EditPlus等。 第二類是“所見即所得”編輯工具 代表產(chǎn)品有FrontPage、Dreamweaver等。,網(wǎng)頁制作工具,網(wǎng)頁制作工具,HTML文檔本身是文本格式的文件，可由任何一種文本編輯軟件

5、如寫字板、記事本和Word等進(jìn)行編輯，保存后，把文件擴(kuò)展名改為.htm或.html，就可用瀏覽器瀏覽到相應(yīng)的網(wǎng)頁。 HTML語言就是通過一系列特定的標(biāo)簽（Tag），來標(biāo)識(shí)出相應(yīng)的意義和作用，再通過瀏覽器把這些標(biāo)簽所代表的意義表示出來。,確定網(wǎng)點(diǎn)主題 設(shè)計(jì)網(wǎng)站風(fēng)格（標(biāo)志，主色調(diào)，文字效果，版面布局） 規(guī)劃網(wǎng)站結(jié)構(gòu) 了解網(wǎng)站運(yùn)行環(huán)境 選擇網(wǎng)站開發(fā)工具 分配網(wǎng)站開發(fā)任務(wù),第二節(jié) 網(wǎng)站建設(shè),一、建立站點(diǎn),建立自己的主題網(wǎng)站，首先需要?jiǎng)?chuàng)建一個(gè)Web站點(diǎn)，用于保存和調(diào)試創(chuàng)建的網(wǎng)頁。 新建的網(wǎng)站首先要保存在本地硬盤上，待整個(gè)網(wǎng)站建好之后再發(fā)布。 方法：執(zhí)行“文件”“新建”“站點(diǎn)”，打開“新建站點(diǎn)對(duì)話框”,注

6、意：不需要去D盤建立“080701”文件夾。,1、表格、框架布局網(wǎng)頁,表格在網(wǎng)頁中的作用 有條理地組織數(shù)據(jù) 控制網(wǎng)頁布局 插入表格以及表格基本操作 “表格-插入” 可以用表格工具欄手動(dòng)繪制表格。 表格、單元格的屬性設(shè)置 給表格、單元格添加顏色 使用嵌套表格等,所謂框架是將一個(gè)瀏覽器的窗口分割成兩個(gè)或兩個(gè)以上的窗格，每個(gè)顯示區(qū)域叫做一個(gè)框架。 每個(gè)框架可以顯示一個(gè)獨(dú)立的網(wǎng)頁， 一般情況下，可以用框架來保持網(wǎng)頁中固定的幾個(gè)部分，如網(wǎng)頁大標(biāo)題、鏈接按鈕等，剩下的框架用來展現(xiàn)所選擇的網(wǎng)頁內(nèi)容。 框架網(wǎng)頁的創(chuàng)建與其基本操作 “文件-新建-框架網(wǎng)頁”,2、添加網(wǎng)頁元素編輯文字,1.菜單欄：“格式”“字體”

7、，打開字體對(duì)話框，如右圖。 2.選中需要編輯的文字，右擊，選擇“字體”菜單命令，打開字體對(duì)話框，如右圖。 3.“格式”工具欄,3、添加網(wǎng)頁元素插入圖片,在網(wǎng)頁中最常用的是GIF和JPG格式的圖片，因?yàn)檫@兩種圖片的文件比較小，有利于提高網(wǎng)頁的瀏覽速度。（“插入”-“圖片”-“來自文件”）,插入其他格式的圖片后，在進(jìn)行頁面存儲(chǔ)時(shí)，系統(tǒng)會(huì)自動(dòng)將圖片格式轉(zhuǎn)換成GIF或JPF格式。,注意“圖片”工具條的使用,4、添加網(wǎng)頁元素插入動(dòng)畫（GIF格式）,提示：在“普通”模式中插入動(dòng)畫之后，默認(rèn)只顯示動(dòng)畫的第一幀圖像，是靜止的，進(jìn)入“預(yù)覽”模式后，就可以看見其動(dòng)態(tài)效果了。 “插入”-“圖片”-“來自文件”,5、

8、添加網(wǎng)頁元素插入動(dòng)畫（Flash）,“插入”“高級(jí)”“插件”，打開“插件屬性”對(duì)話框。 通過“數(shù)據(jù)源”中的“瀏覽”找到所用的Flash動(dòng)畫文件,6、添加網(wǎng)頁元素插入視頻,“插入”“圖片”“視頻”，打開“視頻”對(duì)話框。,右擊視頻，選擇“圖片屬性”命令，并切換到“視頻”選項(xiàng)卡，可以對(duì)視頻做進(jìn)一步的設(shè)置。,支持的視頻格式： .avi .asf .ram .ra,7、添加網(wǎng)頁元素插入背景音樂,方法：在網(wǎng)頁的空白處右擊，選擇“網(wǎng)頁屬性”“常規(guī)”選項(xiàng)卡 “背景音樂。,8、建立超鏈接,超鏈接源 文本、圖片（整張圖片、圖片熱點(diǎn)） 超鏈接目標(biāo) 網(wǎng)站內(nèi)部超鏈接 網(wǎng)頁文件 圖片、音頻、視頻等多媒體文件 一些壓縮文件

9、 網(wǎng)站外部超鏈接 URL（統(tǒng)一資源定位器）超鏈接 E-mail地址超鏈接（單擊該連接向?qū)Ψ桨l(fā)送電子郵件，不需要輸入對(duì)方的E-mail地址） ,設(shè)置文本超鏈接的方法,1、選定要加入超鏈接的文本 2、按下工具欄上的“超鏈接”按鈕 或者選擇“插入”菜單下“超鏈接” 再或者右擊所選文本， 選擇“超鏈接”，打開“創(chuàng)建超鏈接”對(duì)話框。 3、選擇或輸入超鏈接目標(biāo),超鏈接目標(biāo)地址,設(shè)置整張圖片超鏈接的方法,1、選定要加入超鏈接的圖片 2、按下工具欄上的“超鏈接”按鈕 或者選擇“插入”菜單下“超鏈接” 再或者右擊所選圖片 3、選擇或輸入超鏈接目標(biāo),超鏈接的顏色,在網(wǎng)頁中有三種不同狀態(tài)的超鏈接（顏色不同）： 未訪

10、問過的超鏈接 正在訪問的超鏈接 已經(jīng)訪問過的超鏈接 設(shè)置方法： 在“網(wǎng)頁屬性”的“背景”選項(xiàng)卡中進(jìn)行設(shè)置。,9、保存及預(yù)覽網(wǎng)頁文件,保存文件時(shí)，文件以英文命名。（Windows網(wǎng)絡(luò)操作系統(tǒng)對(duì)英文大小寫不敏感。） 保存主頁時(shí)，通常以“Index.html”命名。 在保存文件過程中，將網(wǎng)頁所使用到的圖片文件，存于“images”文件夾中。 文件保存后，單擊網(wǎng)頁編輯窗口下方的“預(yù)覽”標(biāo)簽，觀察效果。,1、網(wǎng)頁中的內(nèi)容的檢查： 拼寫錯(cuò)誤、內(nèi)容與欄目的一致性等 2、網(wǎng)站中頁面鏈接狀態(tài)檢查： 要保證每一個(gè)網(wǎng)頁有入口，有出口 （可結(jié)合“報(bào)表與超鏈接”視圖檢查） 3、網(wǎng)站中所用到的多媒體元素檢查： 格式恰當(dāng)、

11、大小合適 4、外觀測(cè)試 版面布局、文字效果、動(dòng)態(tài)效果等 要在不同的瀏覽器中進(jìn)行測(cè)試,第三節(jié) 網(wǎng)站的發(fā)布、管理與評(píng)價(jià),網(wǎng)站的發(fā)布,1、局域網(wǎng)內(nèi)本機(jī)發(fā)布 （11）利用IIS（因特網(wǎng)信息服務(wù)器）在局域網(wǎng)內(nèi)可實(shí)現(xiàn)網(wǎng)站的發(fā)布。 發(fā)布為默認(rèn)WEB站點(diǎn)，在本機(jī)可通過 http:/localhost或 訪問。 其他用戶通過IP地址直接訪問網(wǎng)站。,確定IP地址及端口號(hào) （一般采用如圖設(shè)置）,確定網(wǎng)站所在的文件夾位置 （一般采用英文命名）,確定網(wǎng)站主頁文件名，并將其升到頂端,1、局域網(wǎng)內(nèi)本機(jī)發(fā)布 （12）利用IIS的虛擬目錄在局域網(wǎng)內(nèi)可實(shí)現(xiàn)一個(gè)IP地址發(fā)布多個(gè)網(wǎng)站。 用戶通過“IP地址/（虛擬目錄）別名”訪問網(wǎng)站。,網(wǎng)站的發(fā)布,2、在因特網(wǎng)上發(fā)布 使用因特網(wǎng)上的WEB服務(wù)器，選擇合適的網(wǎng)站空間