網(wǎng)頁(yè)相關(guān)設(shè)計(jì)制作基礎(chǔ)

1、網(wǎng)頁(yè)相關(guān)設(shè)計(jì)制作基礎(chǔ)網(wǎng)頁(yè)設(shè)計(jì)與制作1圖形圖像處理2Office 辦公軟件3課程組成星期（第12周）一二三四五一二三四五日期（8月229月4日）222324252629303112上午1節(jié)（8:00-8:50）-上課上課上課上課上課上課上課2節(jié)（9:00-9:50）3節(jié)（10:10-11:00）上課上課上機(jī)上機(jī)上機(jī)上機(jī)上機(jī)4節(jié)（11:10-12:00）下午5節(jié)（14:00-14:50）上機(jī)上機(jī)上機(jī)上機(jī)6節(jié)（15:00-15:50）7節(jié)（16:10-17:00）8節(jié)（17:10-18:00）課程日歷網(wǎng)頁(yè)設(shè)計(jì)與制作圖形圖像處理Office辦公軟件網(wǎng)頁(yè)設(shè)計(jì)與制作吳 彬計(jì)算機(jī)實(shí)踐網(wǎng)頁(yè)設(shè)計(jì)與制作網(wǎng)頁(yè)設(shè)計(jì)制

2、作基礎(chǔ)網(wǎng)頁(yè)設(shè)計(jì)工具 Dreamweaver網(wǎng)頁(yè)動(dòng)畫(huà)制作工具 Flash一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)網(wǎng)頁(yè)：Web Page構(gòu)成網(wǎng)站的基本元素，是網(wǎng)站中的一“頁(yè)”，也就是在瀏覽器中看到的一幅畫(huà)面；網(wǎng)頁(yè)是什么？一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)每個(gè)網(wǎng)頁(yè)通常對(duì)應(yīng)著一個(gè)文件，文件名常以 htm 或 html 后綴結(jié)尾，俗稱(chēng) HTML文件。不同的文件名后綴，代表不同類(lèi)型的網(wǎng)頁(yè)，除 htm 或 html 后綴外，其它如：cgi、asp、jsp、php 等；網(wǎng)頁(yè)是什么？一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)構(gòu)成網(wǎng)頁(yè)的基本元素文字：承載信息和交流的工具圖片和動(dòng)畫(huà)：修飾網(wǎng)頁(yè)、提供信息聲音和視頻：多媒體信息超鏈接：實(shí)現(xiàn)網(wǎng)頁(yè)間快速跳轉(zhuǎn)表格：列表化數(shù)據(jù)、精確

3、定位網(wǎng)頁(yè)元素的位置表單：輸入數(shù)據(jù)，提交服務(wù)器處理導(dǎo)航欄：引導(dǎo)瀏覽者訪(fǎng)問(wèn)其它：ActiveX控件、Java小程序、滾動(dòng)字幕等互聯(lián)網(wǎng)一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)網(wǎng)頁(yè)工作原理輸入網(wǎng)址（URL）HTTP請(qǐng)求HTTP響應(yīng)客戶(hù)端服務(wù)器網(wǎng)頁(yè)文件網(wǎng)頁(yè)HTTP協(xié)議一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)網(wǎng)頁(yè)文件（HTML）存放在與互聯(lián)網(wǎng)相連的某臺(tái)計(jì)算機(jī)（服務(wù)器）中，經(jīng)由網(wǎng)址（URL）來(lái)識(shí)別與存取，當(dāng)用戶(hù)在瀏覽器中輸入網(wǎng)址后，瀏覽器通過(guò) HTTP 協(xié)議從服務(wù)器上獲取網(wǎng)頁(yè)文件，并經(jīng)過(guò)分析、解釋后顯示在計(jì)算機(jī)屏幕上。網(wǎng)頁(yè)工作原理一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)網(wǎng)頁(yè)關(guān)鍵性技術(shù)標(biāo)準(zhǔn)統(tǒng)一資源定位器（URL）超文本標(biāo)記語(yǔ)言（HTML）超文本傳送協(xié)議（HTTP）一、

4、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)統(tǒng)一資源定位器（URL）URL：Universal Resource Locator，用于完整地描述Internet上網(wǎng)頁(yè)及其它資源地址的一種標(biāo)識(shí)方法，俗稱(chēng)為“網(wǎng)址”。URL的基本結(jié)構(gòu)：通信協(xié)議:/域名或IP:端口號(hào)/路徑/文件名？查詢(xún)參數(shù)信息片段例： :/ abc /read.asp?id=999#top網(wǎng)頁(yè)關(guān)鍵性技術(shù)標(biāo)準(zhǔn)一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言（HTML）HTML：Hypertext Markup Language；HTML是一種規(guī)范，一種標(biāo)準(zhǔn)，它通過(guò)標(biāo)記符號(hào)標(biāo)記網(wǎng)頁(yè)中的各個(gè)部分（如：文字、圖片、視頻、動(dòng)畫(huà)等），并告訴瀏覽器如何顯示；之所以稱(chēng)為“超文本”，是因?yàn)槲?/p>

5、本中包含了被稱(chēng)為 “超級(jí)鏈接”的熱點(diǎn) ，通過(guò)點(diǎn)擊超鏈接可使瀏覽器方便地獲取新的網(wǎng)頁(yè)。這也是HTML獲得廣泛應(yīng)用的最重要的原因之一。 網(wǎng)頁(yè)關(guān)鍵性技術(shù)標(biāo)準(zhǔn)一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本傳送協(xié)議（HTTP）HTTP：Hypertext Transfer Protocol是客戶(hù)端與服務(wù)器端之間進(jìn)行請(qǐng)求和應(yīng)答的一種標(biāo)準(zhǔn)，它采用請(qǐng)求/響應(yīng)模型；客戶(hù)端向服務(wù)器發(fā)送一個(gè)請(qǐng)求，稱(chēng)之為消息，消息的內(nèi)容包括請(qǐng)求的方法、URL、協(xié)議版本等。服務(wù)器根據(jù)請(qǐng)求作出響應(yīng)，響應(yīng)的內(nèi)容包括協(xié)議版本、成功或錯(cuò)誤代碼、服務(wù)器信息、實(shí)體信息等。 網(wǎng)頁(yè)關(guān)鍵性技術(shù)標(biāo)準(zhǔn)一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本傳送協(xié)議（HTTP）GET :/download.

6、microtool.de:80/somedata.exeHost: download.microtool.deAccept:*/*Pragma: no-cacheCache-Control: no-cacheReferer: :/download.microtool.de/User-Agent:Mozilla/4.04en(Win95;I;Nav)Range:bytes=554554-典型的請(qǐng)求消息 網(wǎng)頁(yè)關(guān)鍵性技術(shù)標(biāo)準(zhǔn)請(qǐng)求的資源地址服務(wù)器域名瀏覽器版本信息一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本傳送協(xié)議（HTTP）HTTP/1.0 200 OK Date:Mon,31Dec200104:25:57GMT S

7、erver:Apache/1.3.14(Unix) Content-type:text/html Last-modified:Tue,17Apr200106:46:28GMT Etag:a030f020ac7c01:1e9f Content-length:39725426 Content-range:bytes 554554-40279979/40279980典型的響應(yīng)消息網(wǎng)頁(yè)關(guān)鍵性技術(shù)標(biāo)準(zhǔn)協(xié)議及狀態(tài)代碼服務(wù)器信息數(shù)據(jù)總長(zhǎng)度（字節(jié)數(shù)）靜態(tài)網(wǎng)頁(yè)是實(shí)實(shí)在在保存在服務(wù)器上的文件，每個(gè)網(wǎng)頁(yè)都對(duì)應(yīng)著一個(gè)獨(dú)立的文件，都由一個(gè)固定的網(wǎng)址（URL）進(jìn)行訪(fǎng)問(wèn)；動(dòng)態(tài)網(wǎng)頁(yè)實(shí)際上是能在服務(wù)器上運(yùn)行的程序，用戶(hù)每次看到

8、的網(wǎng)頁(yè)并不對(duì)應(yīng)服務(wù)器上存放的某個(gè)文件。動(dòng)態(tài)網(wǎng)頁(yè)會(huì)根據(jù)用戶(hù)每次請(qǐng)求提交的參數(shù)，相應(yīng)地生成靜態(tài)網(wǎng)頁(yè)；一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)靜態(tài)網(wǎng)頁(yè) vs 動(dòng)態(tài)網(wǎng)頁(yè)編號(hào)1的文章文章2文章1一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)靜態(tài)網(wǎng)頁(yè) vs 動(dòng)態(tài)網(wǎng)頁(yè)文章2文章3文章1靜態(tài)網(wǎng)站服務(wù)器我要看文章1我要看文章2編號(hào)作者內(nèi)容1xxxxxx2xxxxxx數(shù)據(jù)庫(kù)動(dòng)態(tài)網(wǎng)站服務(wù)器讀文章看編號(hào)1的文章編號(hào)1的文章表（Table）一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)網(wǎng)站：Website，眾多網(wǎng)頁(yè)的集合提供某種網(wǎng)絡(luò)服務(wù)（如：資訊、搜索、BBS等）網(wǎng) 站網(wǎng)站?a.htmb.htmc.htme.htmd.htm.一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)域名（網(wǎng)址）網(wǎng)絡(luò)接入環(huán)境服務(wù)器硬件平臺(tái)網(wǎng)站服

9、務(wù)器操作系統(tǒng)信息發(fā)布服務(wù)（IIS、Apache）網(wǎng)頁(yè)（按照一定規(guī)則組合在一起，具有某種邏輯結(jié)構(gòu)的集合）一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)目標(biāo)規(guī)劃系統(tǒng)分析網(wǎng)站設(shè)計(jì)網(wǎng)站實(shí)現(xiàn)網(wǎng)站發(fā)布網(wǎng)站調(diào)試維護(hù)與管理建設(shè)網(wǎng)站的一般流程網(wǎng)站生命周期一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML由萬(wàn)維網(wǎng)聯(lián)盟（W3C）制定發(fā)布，最新版本4.01HTML文件：用 HTML 語(yǔ)言編寫(xiě)的代碼文件，純文本文件，后綴名：htm 或 html （1）表達(dá)信息的文字（2）稱(chēng)為“標(biāo)記”的特殊字符一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML這是一行有下劃線(xiàn)的文字讀入HTML文檔瀏覽器解釋顯示HTML標(biāo)記本身（ ）不顯示在瀏覽器中一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記

10、語(yǔ)言HTML 我的第一個(gè)網(wǎng)頁(yè) 這是我的第一個(gè)網(wǎng)頁(yè)！ 創(chuàng)建簡(jiǎn)單的HTML文件打開(kāi)記事本，輸入右側(cè)的代碼，保存時(shí)輸入含后綴 htm 的完整的文件名，如 hello.htm，保存退出；在“我的電腦”中找到 hello.htm 并雙擊。 一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML 我的第一個(gè)網(wǎng)頁(yè) 這是我的第一個(gè)網(wǎng)頁(yè)！ 文檔標(biāo)記文檔頭文檔標(biāo)題文檔主體基本文檔結(jié)構(gòu)一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML1. 標(biāo)記HTML文檔由標(biāo)記和被標(biāo)記的內(nèi)容組成，標(biāo)記用于定義信息的類(lèi)型，也稱(chēng)作標(biāo)簽（Tag），格式為： 被標(biāo)記的內(nèi)容 例如： 我的第一個(gè)網(wǎng)頁(yè) 語(yǔ)法規(guī)則一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML雙標(biāo)記：成對(duì)

11、出現(xiàn)的，例如： 我的第一個(gè)網(wǎng)頁(yè) 頭標(biāo)記尾標(biāo)記單標(biāo)記：只有頭標(biāo)記的標(biāo)記，例如：，表示換行。1. 標(biāo)記兩種結(jié)構(gòu)的標(biāo)記語(yǔ)法規(guī)則一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML1. 標(biāo)記HTML是一種嵌套語(yǔ)言，一個(gè)標(biāo)記的外面可以再嵌套另外一個(gè)標(biāo)記。例如： 我的第一個(gè)網(wǎng)頁(yè)語(yǔ)法規(guī)則一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML2. 屬性標(biāo)記規(guī)定了信息是什么，但怎樣控制這些信息的顯示，就需要使用屬性。格式為：align屬性的值為left，表示文字靠左對(duì)齊。例如： 歡迎！語(yǔ)法規(guī)則被標(biāo)記的內(nèi)容一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML2. 屬性一個(gè)標(biāo)記可以有多個(gè)屬性，無(wú)先后順序。例如：語(yǔ)法規(guī)則含義：粗細(xì)為3個(gè)像素，寬度為

12、200像素，左對(duì)齊顯示的水平線(xiàn)。一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記1. 文檔頭標(biāo)記 .HTML文檔頭描述網(wǎng)頁(yè)的基本信息，主要被瀏覽器所用，不會(huì)顯示在網(wǎng)頁(yè)里。另外，搜索引擎會(huì)查找網(wǎng)頁(yè)中的文檔頭信息，提取文檔標(biāo)題等作為關(guān)鍵詞進(jìn)行收錄。嵌套在里常見(jiàn)的標(biāo)記有：、一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記1. 文檔頭標(biāo)記 . ：文檔標(biāo)題，顯示在瀏覽器標(biāo)題欄中 ：鏈接資源文件，如樣式表 ：定義CSS樣式 ：網(wǎng)頁(yè)元數(shù)據(jù)，如：編碼字符集一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記2. 文檔主體標(biāo)記 .文檔主體中包含了所有要在瀏覽器中顯示的文字、表格、圖片等內(nèi)容元素，網(wǎng)

13、頁(yè)中大部分標(biāo)記都嵌套在.內(nèi)。標(biāo)記的屬性可對(duì)網(wǎng)頁(yè)的整體顯示效果進(jìn)行控制。一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記2. 文檔主體標(biāo)記 .bgcolor：網(wǎng)頁(yè)背景色background：網(wǎng)頁(yè)背景圖片text：文字顏色link：超級(jí)鏈接的顏色alink：當(dāng)鏈接被點(diǎn)中時(shí)文字顏色vlink：訪(fǎng)問(wèn)過(guò)的鏈接的文字顏色leftmargin：網(wǎng)頁(yè)的左邊距，單位：像素topmargin：網(wǎng)頁(yè)上邊距，單位：像素屬性一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記3. 字體標(biāo)記 .用于設(shè)定文字的大小，顏色和字體格式。face：字體格式，如：宋體，黑體color：文字顏色，如：red，#FF0000s

14、ize：文字大小，17號(hào)屬性例：紅色黑體5號(hào)字一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記3. 字體標(biāo)記 .在HTML里，顏色有兩種表示方式：用顏色名稱(chēng)表示，比如 blue 表示藍(lán)色，有16種可以表示顏色的名稱(chēng) (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow) 。用 6 位 16 進(jìn)制的數(shù)值表示 ，從左至右每?jī)晌灰来未砑t、綠、藍(lán)三原色值，顏色值范圍：#000000 #FFFFFF例如：#FF0000 表示紅色 r

15、ed一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記4. 標(biāo)題文字標(biāo)記（n=1、2、36）用于將文字設(shè)置為標(biāo)題格式。標(biāo)題共分六級(jí)，n值越大級(jí)別越小,顯示的字號(hào)也就越小。例： 1 這是第1級(jí)標(biāo)題 1.1 這是第2級(jí)標(biāo)題 1.1.1 這是第3級(jí)標(biāo)題 一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記4. 標(biāo)題文字標(biāo)記（n=1、2、36）例： 居中大標(biāo)題屬性align：left，左對(duì)齊，默認(rèn)值center，居中right，右對(duì)齊一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記5. 段落標(biāo)記 .用于將頁(yè)面內(nèi)容劃分為一個(gè)一個(gè)的段落，段落間自動(dòng)產(chǎn)生一個(gè)空行。屬性align：left，左對(duì)齊

16、，默認(rèn)值center，居中right，右對(duì)齊一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記5. 段落標(biāo)記 .一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記6. 換行標(biāo)記 （單標(biāo)記）用于在一個(gè)段落中進(jìn)行換行，行與行之間沒(méi)有空行。 這是第一段，第一行 這是第一段，第二行 這是第一段，第三行一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記7. 錨點(diǎn)標(biāo)記 .href：需要跳轉(zhuǎn)過(guò)去的新地址target：新地址要在哪個(gè)窗口打開(kāi)title：鼠標(biāo)停留時(shí)顯示的注釋屬性用途一：設(shè)置超級(jí)鏈接一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記7. 錨點(diǎn)標(biāo)記 .北京理工大學(xué)校園招聘首頁(yè)在新窗口

17、中打開(kāi)鼠標(biāo)停留時(shí)顯示該信息絕對(duì)路徑相對(duì)路徑一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記7. 錨點(diǎn)標(biāo)記 .要點(diǎn)：用 name 屬性定義錨點(diǎn)名稱(chēng)。在創(chuàng)建超鏈接時(shí)使用“#錨點(diǎn)名稱(chēng)”作為鏈接地址。用途二：設(shè)置命名錨點(diǎn)返回頂部一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記8. 圖片標(biāo)記 src：圖片文件的路徑alt：替代的文字說(shuō)明width：圖片寬度，單位：像素height：圖片的高度，單位：像素border：邊框粗細(xì)，單位：像素hspace：水平方向上的空白，單位：像素vspace：垂直方向上的空白，單位：像素align：設(shè)置圖片的垂直、水平對(duì)齊方式屬性一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記

18、語(yǔ)言HTML幾個(gè)重要標(biāo)記8. 圖片標(biāo)記 例2：用圖片做超鏈接 例1：在網(wǎng)頁(yè)中插入一張圖片 一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記9. 表格標(biāo)記 .單元格行列表頭一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記9. 表格標(biāo)記 . 創(chuàng)建表格畫(huà)出一行畫(huà)出一列標(biāo)記內(nèi)通常嵌套有、 標(biāo)記。單元格里要顯示的內(nèi)容一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記9. 表格標(biāo)記 . 第1行第1列 第1行第2列 第2行第1列 第2行第2列 一、網(wǎng)頁(yè)設(shè)計(jì)制作基礎(chǔ)超文本標(biāo)記語(yǔ)言HTML幾個(gè)重要標(biāo)記9. 表格標(biāo)記 .屬性width=n|x%height=n|x%border=ncellspacing=n