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

1、網(wǎng)頁相關(guān)設(shè)計制作基礎(chǔ)網(wǎng)頁設(shè)計與制作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)頁設(shè)計與制作圖形圖像處理Office辦公軟件網(wǎng)頁設(shè)計與制作吳 彬計算機(jī)實踐網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計制

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

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

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

5、本中包含了被稱為 “超級鏈接”的熱點(diǎn) ，通過點(diǎn)擊超鏈接可使瀏覽器方便地獲取新的網(wǎng)頁。這也是HTML獲得廣泛應(yīng)用的最重要的原因之一。 網(wǎng)頁關(guān)鍵性技術(shù)標(biāo)準(zhǔn)一、網(wǎng)頁設(shè)計制作基礎(chǔ)超文本傳送協(xié)議（HTTP）HTTP：Hypertext Transfer Protocol是客戶端與服務(wù)器端之間進(jìn)行請求和應(yīng)答的一種標(biāo)準(zhǔn)，它采用請求/響應(yīng)模型；客戶端向服務(wù)器發(fā)送一個請求，稱之為消息，消息的內(nèi)容包括請求的方法、URL、協(xié)議版本等。服務(wù)器根據(jù)請求作出響應(yīng)，響應(yīng)的內(nèi)容包括協(xié)議版本、成功或錯誤代碼、服務(wù)器信息、實體信息等。 網(wǎng)頁關(guān)鍵性技術(shù)標(biāo)準(zhǔn)一、網(wǎng)頁設(shè)計制作基礎(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-典型的請求消息 網(wǎng)頁關(guān)鍵性技術(shù)標(biāo)準(zhǔn)請求的資源地址服務(wù)器域名瀏覽器版本信息一、網(wǎng)頁設(shè)計制作基礎(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)頁關(guān)鍵性技術(shù)標(biāo)準(zhǔn)協(xié)議及狀態(tài)代碼服務(wù)器信息數(shù)據(jù)總長度（字節(jié)數(shù)）靜態(tài)網(wǎng)頁是實實在在保存在服務(wù)器上的文件，每個網(wǎng)頁都對應(yīng)著一個獨(dú)立的文件，都由一個固定的網(wǎng)址（URL）進(jìn)行訪問；動態(tài)網(wǎng)頁實際上是能在服務(wù)器上運(yùn)行的程序，用戶每次看到

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

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

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

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

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

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

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

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

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

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

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