《網(wǎng)站設(shè)計(jì)原理與方法》公選課課件

1、網(wǎng)站設(shè)計(jì)原理與方法網(wǎng)站設(shè)計(jì)原理與方法10-11學(xué)年第一學(xué)期公選課學(xué)時(shí)：32（理論6實(shí)驗(yàn)26）主講：王紅藝郵箱：課程目的課程目的o 加深對(duì)計(jì)算機(jī)網(wǎng)絡(luò)網(wǎng)絡(luò)基本原理，特別是對(duì)WWW服務(wù)、B/S模式的理解o 提高動(dòng)手能力，學(xué)會(huì)n 網(wǎng)頁(yè)制作n 圖片、動(dòng)畫制作n 簡(jiǎn)單的WEB數(shù)據(jù)庫(kù)編程n 網(wǎng)站配置與發(fā)布o(jì) 激發(fā)對(duì)網(wǎng)絡(luò)的興趣，提高使用和利用水平講課提綱一、萬(wàn)維網(wǎng)（WWW）原理二、超文本標(biāo)記語(yǔ)言 HTML三、網(wǎng)頁(yè)制作四、圖形編輯與動(dòng)畫制作五、網(wǎng)站設(shè)計(jì)與發(fā)布六、大作業(yè)要求附1：數(shù)據(jù)庫(kù)操作的核心技術(shù)一、萬(wàn)維網(wǎng) WWWo 計(jì)算機(jī)網(wǎng)絡(luò)、Internet與WWW的概念n 計(jì)算機(jī)網(wǎng)絡(luò)n Internetn WWWn 計(jì)算

2、機(jī)網(wǎng)絡(luò)與Internet的概念區(qū)別n Internet與WWW的概念區(qū)別o 協(xié)議的概念o 網(wǎng)站基本概念n 網(wǎng)頁(yè)、網(wǎng)站、首頁(yè)、默認(rèn)頁(yè)、主頁(yè)n 抬頭、版權(quán)、Logo、導(dǎo)航欄一、萬(wàn)維網(wǎng) WWWo 三個(gè)問(wèn)題：o 1、如何標(biāo)志所有網(wǎng)頁(yè)（文檔）？o 2、什么傳輸協(xié)議？o 3、網(wǎng)頁(yè)標(biāo)準(zhǔn)問(wèn)題1、如何標(biāo)志所有文檔？oURL（Uniform Resource Locator）n 格式： 訪問(wèn)方式:/主機(jī):端口/路徑n 常見的URL：o 網(wǎng)頁(yè)，http:/o 網(wǎng)頁(yè)，0:80/news/default.aspo FTP，ftp:/upload:o 發(fā)送電子郵件，mailto:o 本地

3、文件，file:/D:/Downloads/rfc.raro 遠(yuǎn)程登錄，telnet:/3:1102、什么傳輸協(xié)議？o 8.5.3 HTTP（HyperText Transfer P.）IISIEDNS服務(wù)器的IP是？999/default.shtm9/homepage2006/images/cctvlogo_778.gif組織網(wǎng)頁(yè)：組織網(wǎng)頁(yè)：HTML文件文件+圖片文件圖片文件+Flash文件文件其它圖片和Flash等HTML源代碼中需要播放的

4、文件9返回返回3、網(wǎng)頁(yè)標(biāo)準(zhǔn)問(wèn)題o 超文本標(biāo)記語(yǔ)言 HTML(HyperText Markup Language)n 超文本標(biāo)記語(yǔ)言 HTML 中的 Markup 的意思就是“設(shè)置標(biāo)記”。n HTML 定義了許多用于排版的命令（標(biāo)簽）。n HTML 把各種標(biāo)簽嵌入到萬(wàn)維網(wǎng)的頁(yè)面中。這樣就構(gòu)成了所謂的 HTML 文檔。HTML 文檔是一種可以用任何文本編輯器創(chuàng)建的 ASCII 碼文件。二、超文本標(biāo)記語(yǔ)言 HTML (HyperText Markup Language)1. HTML 概述o 超文本標(biāo)記語(yǔ)言 HTML 中的 Markup 的意思就是“設(shè)置標(biāo)記”。o HTML

5、定義了許多用于排版的命令（標(biāo)簽）。o HTML 把各種標(biāo)簽嵌入到萬(wàn)維網(wǎng)的頁(yè)面中。這樣就構(gòu)成了所謂的 HTML 文檔。HTML 文檔是一種可以用任何文本編輯器創(chuàng)建的 ASCII 碼文件。 2. HTML 文檔 o 僅當(dāng) HTML 文檔是以.html 或 .htm 為后綴時(shí)，瀏覽器才對(duì)此 文檔的各種標(biāo)簽進(jìn)行解釋。o 如 HTML 文檔改換以 .txt 為其后綴，則 HTML 解釋程序就不對(duì)標(biāo)簽進(jìn)行解釋，而瀏覽器只能看見原來(lái)的文本文件。o 當(dāng)瀏覽器從服務(wù)器讀取 HTML 文檔后，就按照 HTML 文檔中的各種標(biāo)簽，根據(jù)瀏覽器所使用的顯示器的尺寸和分辨率大小，重新進(jìn)行排版并恢復(fù)出所讀取的頁(yè)面。HTML

6、 的格式與標(biāo)簽 o 元素(element)是 HTML 文檔結(jié)構(gòu)的基本組成部分。一個(gè) HTML 文檔本身就是一個(gè)元素。每個(gè) HTML 文檔由兩個(gè)主要元素組成：首部(head)和主體(body) 。o 首部包含文檔的標(biāo)題(title)，以及系統(tǒng)用來(lái)標(biāo)識(shí)文檔的一些其他信息。標(biāo)題相當(dāng)于文件名。o 文檔的主體是 HTML 文檔的最主要的部分。o 主體部分往往又由若干個(gè)更小的元素組成，如段落(paragraph)、表格(table)、和列表(list)等。 HTML 的標(biāo)簽 o HTML用一對(duì)標(biāo)簽（即一個(gè)開始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽）或幾對(duì)標(biāo)簽來(lái)標(biāo)識(shí)一個(gè)元素。o 開始標(biāo)簽由一個(gè)小于字符“”組成。o 結(jié)束標(biāo)簽和

7、開始標(biāo)簽的區(qū)別只是在小于字符的后面要加上一個(gè)斜杠字符“/”。o 雖然標(biāo)簽名并不區(qū)分大寫和小寫。o 有一些標(biāo)簽可以將結(jié)束標(biāo)簽省略。 HTML 文檔中標(biāo)簽的用法 一個(gè) HTML 的例子 HTML 很容易掌握 這是第一個(gè)段落。雖然很 短，但它仍是一個(gè)段落。 這是第二個(gè)段落。HTML 文檔開始HTML 文檔中標(biāo)簽的用法 一個(gè) HTML 的例子 HTML 很容易掌握 這是第一個(gè)段落。雖然很 短，但它仍是一個(gè)段落。 這是第二個(gè)段落。首部開始HTML 文檔中標(biāo)簽的用法 一個(gè) HTML 的例子 HTML 很容易掌握 這是第一個(gè)段落。雖然很 短，但它仍是一個(gè)段落。 這是第二個(gè)段落。標(biāo)題HTML 文檔中標(biāo)簽的用法

8、 一個(gè) HTML 的例子 HTML 很容易掌握 這是第一個(gè)段落。雖然很 短，但它仍是一個(gè)段落。 這是第二個(gè)段落。首部結(jié)束HTML 文檔中標(biāo)簽的用法 一個(gè) HTML 的例子 HTML 很容易掌握 這是第一個(gè)段落。雖然很 短，但它仍是一個(gè)段落。 這是第二個(gè)段落。主體開始HTML 文檔中標(biāo)簽的用法 一個(gè) HTML 的例子 HTML 很容易掌握 這是第一個(gè)段落。雖然很 短，但它仍是一個(gè)段落。 這是第二個(gè)段落。1 級(jí)標(biāo)題 一個(gè) HTML 的例子 HTML 很容易掌握 這是第一個(gè)段落。雖然很 短，但它仍是一個(gè)段落。 這是第二個(gè)段落。HTML 文檔中標(biāo)簽的用法 第一個(gè)段落 一個(gè) HTML 的例子 HTML

9、很容易掌握 這是第一個(gè)段落。雖然很 短，但它仍是一個(gè)段落。 這是第二個(gè)段落。HTML 文檔中標(biāo)簽的用法 第二個(gè)段落HTML 文檔中標(biāo)簽的用法 一個(gè) HTML 的例子 HTML 很容易掌握 這是第一個(gè)段落。雖然很 短，但它仍是一個(gè)段落。 這是第二個(gè)段落。主體結(jié)束HTML 文檔中標(biāo)簽的用法 一個(gè) HTML 的例子 HTML 很容易掌握 這是第一個(gè)段落。雖然很 短，但它仍是一個(gè)段落。 這是第二個(gè)段落。HTML 文檔結(jié)束插入圖像 結(jié)束標(biāo)簽開始標(biāo)簽插入圖像插入的圖像文件名是 portrait.gif高度是 100 像素寬度是 65 像素萬(wàn)維網(wǎng)頁(yè)面中的超鏈接1. 鏈接到其他網(wǎng)點(diǎn)上的頁(yè)面o 定義一個(gè)超鏈的標(biāo)

10、簽是。字符A表示錨(Anchor)。o 在HTML文檔中定義一個(gè)超鏈的語(yǔ)法是： X 超鏈的起點(diǎn)這個(gè)地方填寫超鏈終點(diǎn)的 URL鏈接舉例清華大學(xué)超鏈的起點(diǎn)是某個(gè)文檔中的這四個(gè)字超鏈的終點(diǎn)是清華大學(xué)的主頁(yè)2. 鏈接到一個(gè)本地文件o 遠(yuǎn)程鏈接：超鏈的終點(diǎn)是其他網(wǎng)點(diǎn)上的頁(yè)面。o 本地鏈接：超鏈指向本計(jì)算機(jī)中的某個(gè)文件。本地鏈接本地鏈接可進(jìn)行許多的簡(jiǎn)化：o 協(xié)議(http:/)被省略表明與當(dāng)前頁(yè)面的協(xié)議相同。o 主機(jī)域名被省略表明是當(dāng)前的主機(jī)域名。o 目錄路徑被省略表明是當(dāng)前目錄（對(duì)于遠(yuǎn)程鏈接，表明是主機(jī)的默認(rèn)根目錄）。o 文件名被省略表明是當(dāng)前文件（對(duì)于遠(yuǎn)程鏈接，表明是對(duì)方服務(wù)器上默認(rèn)的文件名，通常是一

11、個(gè)名為 index.html 的文件）。相對(duì)路徑與絕對(duì)路徑o .o .o /default.htm 網(wǎng)站首頁(yè)欄目2欄目2-1欄目3-1123號(hào)文件歌曲1下載/menu3/file/file123.htm 網(wǎng)站首頁(yè)欄目2欄目2-1欄目3-1123號(hào)文件歌曲1下載/menu2/2-1.htm 網(wǎng)站首頁(yè)欄目2欄目2-1欄目3-1123號(hào)文件歌曲1下載相對(duì)路徑名與絕對(duì)路徑名o 使用簡(jiǎn)化的 URL，在 HREF= 的后面使用的是相對(duì)路徑名。o 使用完整的 URL 則是使用絕對(duì)路徑名。o 使用相對(duì)路徑名的好處n 絕不是為了少鍵入一些字符n 而是便于目錄的變更。 abc 本文件鏈接（頁(yè)內(nèi)錨）舉例X abc文

12、件 F本文件鏈接的 HTML 語(yǔ)句格式： X 本文件鏈接在此處定義命名錨起點(diǎn)終點(diǎn)命名錨的定義語(yǔ)句：命名錨的名字命名錨的終點(diǎn)在字符 abc 的前面 遠(yuǎn)程鏈接舉例遠(yuǎn)程鏈接： 清華大學(xué) 清華大學(xué)清華大學(xué)主頁(yè)文件 F遠(yuǎn)程鏈接因特網(wǎng)起點(diǎn)終點(diǎn)三、可視化網(wǎng)頁(yè)設(shè)計(jì) o 工具n Macromedia Dreamweaver MX 2004n Microsoft Frontpage 2003n 記事本/Editplus1、 Dreamweaver MX 2004簡(jiǎn)介o 設(shè)計(jì)者視圖o 界面介紹o 快捷鍵n Ctrl-Zn Ctrl-Yn Ctrl-Sn Ctrl-F：查找、替換n F8：站點(diǎn)文件o 菜單n 屬性面板

13、關(guān)閉后如何打開？2、站點(diǎn)操作o 建立站點(diǎn)n 為什么要建立站點(diǎn)？o 管理方便，打開方便o 更新鏈接n Dreamweaver中的站點(diǎn)就是發(fā)布的站點(diǎn)嗎？o 不是，這里僅僅是設(shè)計(jì)時(shí)的站點(diǎn)n 實(shí)驗(yàn)室的計(jì)算機(jī)重新啟動(dòng)后會(huì)自動(dòng)恢復(fù)o 實(shí)驗(yàn)中每次都要重建o 文件建立在Student盤3、網(wǎng)頁(yè)制作o 表格嵌套o(hù) 導(dǎo)航條、當(dāng)前位置n 在每個(gè)網(wǎng)頁(yè)中的位置都要一致o 樣式表n 重復(fù)勞動(dòng)強(qiáng)度大：定義每個(gè)對(duì)象的屬性o一個(gè)網(wǎng)頁(yè)定義一個(gè)樣式表o多個(gè)網(wǎng)頁(yè)共用一個(gè)樣式表文件n 新建樣式表文件n 拿來(lái)主義色彩的RGB表示o 文字o 三原色 R G Bn 每個(gè)原色色彩取值從0255（即0 x00-0 xFF）o 整體的色彩空間n

14、000000到FFFFFF共有2828 28 224個(gè)取值o 圖中共有幾種顏色？下列值代表何種顏色？n #00FF00#FFFF00n #FFFFFF#000000n #C0C0C0 #666666超鏈接的四個(gè)狀態(tài)oA:link Color: #CC00CC; Text-Decoration: noneoA:hover Color: #666666; Text-Decoration: underlineoA:active Color: #FF0000; Text-Decoration: noneoA:visited Color: #CC00CC; Text-Decoration: noneo

15、如何實(shí)現(xiàn)“看不出哪些鏈接被點(diǎn)擊過(guò)”？n訪問(wèn)過(guò)的顏色未訪問(wèn)過(guò)的顏色o 實(shí)現(xiàn)方法：nIE設(shè)置（只能改一臺(tái)機(jī)器的默認(rèn)樣式）n樣式表3、網(wǎng)頁(yè)制作o 服務(wù)器端包含n n 包含文件o 文件擴(kuò)展名：.shtm 或.aspn 被包含文件.htmo 只有到之間的內(nèi)容n 如果含有及其閉合標(biāo)記，被包含之后的結(jié)果網(wǎng)頁(yè)中就會(huì)有雙份，將出錯(cuò)！n 必須發(fā)布出來(lái)才能顯示o 即必須以http:/的方式訪問(wèn)o 具體見“五、網(wǎng)站設(shè)計(jì)與發(fā)布”4、常見問(wèn)題o 常見操作問(wèn)題：n 光標(biāo)選中元素后，才能設(shè)置該元素的屬性n Table中TR和TD如何選中？o 狀態(tài)欄：標(biāo)簽檢查器四、圖形編輯與動(dòng)畫制作 o 圖形文件格式n BMP 位圖o 色彩空

16、間、分辨率n JPG 壓縮格式n GIFo 多幀動(dòng)畫、透明、256色n PSo 源文件的概念n PNGo 矢量圖的概念四、圖形編輯與動(dòng)畫制作 o Flash動(dòng)畫文件n矢量動(dòng)畫的概念nflanswfo 編輯制作工具nAdobe PhotoshopnMacromedia FireworksnMacromedia Flasho 編輯制作示例n去除背景、添加文字、添加效果、導(dǎo)出n補(bǔ)間動(dòng)畫、元件、引導(dǎo)線、導(dǎo)出五、網(wǎng)站設(shè)計(jì)與發(fā)布o(jì)原理（Browser/Server模式）nHTTP負(fù)責(zé)請(qǐng)求、回應(yīng)和網(wǎng)頁(yè)的傳輸n服務(wù)器的任務(wù)o1、等待服務(wù)o3、接收請(qǐng)求o4、解釋ASP，將執(zhí)行后得到的HTML結(jié)果嵌入HTMLo5

17、、回應(yīng)n瀏覽器的任務(wù)o2、發(fā)送請(qǐng)求（地址欄或點(diǎn)擊超鏈接等）o6、接收文檔o7、分析文檔，做進(jìn)一步請(qǐng)求o8、解釋HTML，將網(wǎng)頁(yè)展現(xiàn)在IE的主體部分o9、執(zhí)行Javascript五、網(wǎng)站設(shè)計(jì)與發(fā)布o(jì) 操作系統(tǒng)的選擇n Windows Server 2003o 同時(shí)連接限制o 多站點(diǎn)o CPU、內(nèi)存優(yōu)化服務(wù)而不是應(yīng)用程序n 實(shí)驗(yàn)中用Windows XP代替o WEB服務(wù)器軟件的選擇n Internet Information Server（Internet信息服務(wù)）六、大作業(yè)要求o選題n題目自選，可合作完成一個(gè)大的網(wǎng)站o檢查形式nIIS發(fā)布，異地檢查o評(píng)分標(biāo)準(zhǔn)n每人不少于10個(gè)頁(yè)面，含首頁(yè)、框架或

18、SSI、CSS、Javascript、表單（ASP）、自制圖形、自制動(dòng)畫n主題明確、風(fēng)格統(tǒng)一、鏈接正確、文件名規(guī)范n整潔美觀、布局合理、界面友好、導(dǎo)航清晰、logo和版權(quán)統(tǒng)一o上交要求n作品應(yīng)小于5M，盡量控制在2M以內(nèi)，壓縮成一個(gè)文件o文件名： 專業(yè)班級(jí)_學(xué)號(hào)_姓名.raro 如： 材成061_06102060104_陳松.rar）大作業(yè)題目大作業(yè)題目o 設(shè)計(jì)、制作、發(fā)布網(wǎng)站。o 鼓勵(lì)團(tuán)隊(duì)開發(fā)，1-2人一組。o 題目自定：n 專業(yè)性強(qiáng)的門戶網(wǎng)站n 科技科普、宣傳介紹、歷史地理、科技軍事、文學(xué)藝術(shù)娛樂(lè)n 網(wǎng)頁(yè)制作的心得、技巧、教程考查內(nèi)容范圍考查內(nèi)容范圍o 網(wǎng)頁(yè)傳輸原理n 域名解析、域名的申請(qǐng)和設(shè)置指向IPn HTTP請(qǐng)求與答復(fù)o