1、模塊1 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)實(shí)訓(xùn)1 體驗(yàn)HTML文檔1.1 網(wǎng)頁(yè)基礎(chǔ)知識(shí)1.2 網(wǎng)站配色方案1.3 網(wǎng)站設(shè)計(jì)常用軟件1.4 HTML文檔入門(mén)思考與實(shí)訓(xùn)1實(shí)訓(xùn)1 體驗(yàn)HTML文檔myweb1.html的程序代碼： 滾動(dòng)的字幕大家好！這是我用記事本編寫(xiě)的第一個(gè)網(wǎng)頁(yè)。 實(shí)訓(xùn)1 體驗(yàn)HTML文檔實(shí)訓(xùn)1 體驗(yàn)HTML文檔myweb2.html代碼實(shí)訓(xùn)1 體驗(yàn)HTML文檔myweb3.html程序代碼 我的地盤(pán) 一聽(tīng)音樂(lè) 與我聯(lián)系 用戶(hù)登錄用戶(hù)姓名 登錄密碼 實(shí)訓(xùn)1 體驗(yàn)HTML文檔myweb3.html瀏覽效果1.1 網(wǎng)頁(yè)基礎(chǔ)知識(shí) 1Internet概述1.1 網(wǎng)頁(yè)基礎(chǔ)知識(shí) 2WWW服務(wù)1.1 網(wǎng)頁(yè)基礎(chǔ)知識(shí) 3

2、Web站點(diǎn)和網(wǎng)頁(yè)1.1 網(wǎng)頁(yè)基礎(chǔ)知識(shí) 4HTTP和URL HTTP：超文本傳輸協(xié)議，是因特網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議，它允許將HTML文檔從Web服務(wù)器傳送到WWW瀏覽器。 URL：Internet中的Web服務(wù)器數(shù)量眾多，且每臺(tái)服務(wù)器都包含有多個(gè)網(wǎng)頁(yè)，用戶(hù)要想在眾多的網(wǎng)頁(yè)中指明要獲得的網(wǎng)頁(yè)，就必須借助于URL進(jìn)行資源定位。URL由三個(gè)部分組成：協(xié)議、主機(jī)名、路徑及文件名。例如：某網(wǎng)頁(yè)的URL為http:/ /wj1.html，其中http:是采用的協(xié)議，是主機(jī)名，news指網(wǎng)頁(yè)的路徑（存儲(chǔ)網(wǎng)頁(yè)的文件夾），wj1.html是要訪問(wèn)的網(wǎng)頁(yè)文件名。用戶(hù)只要在瀏覽器的地址欄中輸入要瀏覽網(wǎng)頁(yè)的UR

3、L，便可以瀏覽到該網(wǎng)頁(yè)。1.2 網(wǎng)站配色方案 色彩是人的視覺(jué)最敏感的東西。 網(wǎng)站主頁(yè)的色彩處理得好，可以錦上添花，達(dá)到事半功倍的效果。 色彩總的應(yīng)用原則是“總體協(xié)調(diào)，局部對(duì)比”，也就是說(shuō)主頁(yè)的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對(duì)比。 在色彩的運(yùn)用上，可以根據(jù)主頁(yè)內(nèi)容的需要，分別采用不同的主色調(diào)。1.2 網(wǎng)站配色方案 1色彩的搭配原則u （1）色彩的鮮明性u(píng) 如果一個(gè)網(wǎng)站的色彩鮮明，很容易引人注意，會(huì)給瀏覽者耳目一新的感覺(jué)。u （2）色彩的獨(dú)特性u(píng) 網(wǎng)頁(yè)的用色必須要有自己獨(dú)特的風(fēng)格，這樣才能給瀏覽者留下深刻的印象。u （3）色彩的藝術(shù)性u(píng) 網(wǎng)站設(shè)計(jì)是一種藝術(shù)活

4、動(dòng)，因此必須遵循藝術(shù)規(guī)律。按照內(nèi)容決定形式的原則，在考慮網(wǎng)站本身特點(diǎn)的同時(shí)，大膽進(jìn)行藝術(shù)創(chuàng)新，設(shè)計(jì)出既符合網(wǎng)站要求，又具有一定藝術(shù)特色的網(wǎng)站。u （4）色彩搭配的合理性u(píng) 色彩要根據(jù)主題來(lái)確定，不同的主題選用不同的色彩。例如，用藍(lán)色體現(xiàn)科技型網(wǎng)站的專(zhuān)業(yè)，用粉紅色體現(xiàn)女性的柔情等。1.2 網(wǎng)站配色方案 2色彩搭配方案 色環(huán)實(shí)質(zhì)上就是在彩色光譜中所見(jiàn)的長(zhǎng)條形的色彩序列，只是將首尾連接在一起，使紅色連接到另一端的紫色。一個(gè)色環(huán)通常包括12種明顯不同的顏色。 （1）單色方案 單色方案指在網(wǎng)站設(shè)計(jì)中始終使用一種基本顏色。為避免單調(diào)，可以通過(guò)調(diào)整這種基本顏色的灰度和亮度來(lái)得到更多的顏色，由于整個(gè)顏色方案中

5、事實(shí)上只有一種基色，因此這種方案稱(chēng)為單色方案。1.2 網(wǎng)站配色方案 （2）相似色配色方案 相似色配色方案指在色彩圓環(huán)上選擇彼此相鄰的幾種顏色構(gòu)成的配色方案。例如橙色、橙紅色，以及橙黃色就可以組成一個(gè)相似色方案。由于相似色方案中包含了多種基色，如果再加上亮度和飽和度的變化，可以構(gòu)成的顏色就非常多。1.2 網(wǎng)站配色方案 （3）互補(bǔ)色配色方案 互補(bǔ)色配色方案指在色彩圓環(huán)上沿直徑選擇相對(duì)應(yīng)的兩種顏色構(gòu)成配色方案。1.2 網(wǎng)站配色方案 （4）三色配色方案 三色配色方案指在色彩圓環(huán)中選擇一個(gè)等邊三角形三個(gè)頂點(diǎn)上的顏色構(gòu)成的配色方案。三色方案中使用了三種彼此之間差別明顯，對(duì)比強(qiáng)烈的顏色，因此頁(yè)面顯得相當(dāng)不穩(wěn)

6、定，給人帶來(lái)另類(lèi)的感覺(jué)，給予瀏覽者某種緊張感。禪意花園網(wǎng)站：禪意花園網(wǎng)站：http:/ 網(wǎng)站設(shè)計(jì)常用軟件 1網(wǎng)站設(shè)計(jì)開(kāi)發(fā)軟件u （1）文本編輯器u 制作網(wǎng)頁(yè)通常使用HTML語(yǔ)言，HTML文檔可以使用多種文本編輯器進(jìn)行編輯，如記事本、Word寫(xiě)字板、UltraEdit等。u （2）FrontPageu FrontPage是微軟公司出品的一款網(wǎng)頁(yè)制作入門(mén)級(jí)軟件。FrontPage使用方便簡(jiǎn)單，會(huì)用Word就能做網(wǎng)頁(yè)，所見(jiàn)即所得是其特點(diǎn)。u （3）Dreamweaveru Dreamweaver是由Adobe公司推出一款優(yōu)秀的網(wǎng)站開(kāi)發(fā)工具，是網(wǎng)頁(yè)設(shè)計(jì)師在選擇開(kāi)發(fā)工具時(shí)一個(gè)不錯(cuò)的選擇，能更有效地設(shè)計(jì)、

7、開(kāi)發(fā)和維護(hù)基于網(wǎng)站標(biāo)準(zhǔn)化的網(wǎng)站。1.3 網(wǎng)站設(shè)計(jì)常用軟件 2網(wǎng)頁(yè)美化工具軟件u （1）Photoshopu Photoshop是由Adobe公司開(kāi)發(fā)的一種的圖形圖像軟件，是目前最好的平面設(shè)計(jì)軟件之一。其功能完善、性能穩(wěn)定、使用方便，是美化網(wǎng)頁(yè)的常用工具。u （2）Fireworksu Fireworks是一款專(zhuān)為網(wǎng)絡(luò)圖形設(shè)計(jì)的圖形編輯軟件，它大大簡(jiǎn)化了網(wǎng)絡(luò)圖形設(shè)計(jì)的工作難度，無(wú)論是專(zhuān)業(yè)設(shè)計(jì)家還是業(yè)余愛(ài)好者，使用Fireworks都不僅可以輕松地制作出十分動(dòng)感的GIF動(dòng)畫(huà)，還可以輕易地完成大圖切割、動(dòng)態(tài)按鈕、動(dòng)態(tài)翻轉(zhuǎn)圖等。u （3）Flashu Flash是專(zhuān)業(yè)的矢量圖形編輯和動(dòng)畫(huà)創(chuàng)作軟件，是一

8、種交互式動(dòng)畫(huà)設(shè)計(jì)工具，用它可以將音樂(lè)、聲效、動(dòng)畫(huà)，以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁(yè)動(dòng)態(tài)效果。1.4 HTML文檔入門(mén) 1HTML語(yǔ)言概述 HTML（Hypertext Marked Language，超文本標(biāo)記語(yǔ)言）是用于創(chuàng)建Web文檔的一種標(biāo)記語(yǔ)言。在IE瀏覽器中任意打開(kāi)一個(gè)網(wǎng)頁(yè)，選擇“查看源文件”命令，系統(tǒng)會(huì)啟動(dòng)記事本程序，打開(kāi)該網(wǎng)頁(yè)的源程序代碼。1.4 HTML文檔入門(mén) 2HTML文檔基本結(jié)構(gòu) 一個(gè)HTML文檔是由一系列的元素和標(biāo)記組成的，HTML用標(biāo)記來(lái)規(guī)定元素的屬性和它在文件中的位置。1.4 HTML文檔入門(mén) 3HTML文檔常用標(biāo)記u （1）標(biāo)題標(biāo)記u 格式：網(wǎng)頁(yè)的

9、標(biāo)題u 說(shuō)明：該標(biāo)記在標(biāo)記中，所包含的文字將出現(xiàn)在瀏覽器的標(biāo)題欄上。當(dāng)用戶(hù)將此頁(yè)面添加到收藏夾時(shí)，也會(huì)默認(rèn)以該標(biāo)題為名稱(chēng)。u （2）主體標(biāo)記u 格式：u u 主體內(nèi)容u u 說(shuō)明：包括所有主體內(nèi)容，可以設(shè)置頁(yè)面的背景顏色、背景圖像、文字顏色等屬性。背景顏色和文本顏色可以使用顏色名（如藍(lán)色：blue）或顏色代碼值（如藍(lán)色：#0000FF）來(lái)表示。u 例如：將圖像tx.jpg設(shè)置為網(wǎng)頁(yè)背景圖像，網(wǎng)頁(yè)文字顏色為藍(lán)色。u u 主體內(nèi)容u 1.4 HTML文檔入門(mén) 3HTML文檔常用標(biāo)記u （3）文字標(biāo)記u 格式：u 文本內(nèi)容u 說(shuō)明：標(biāo)記用于設(shè)置網(wǎng)頁(yè)中文字的字號(hào)、字體、顏色等屬性。設(shè)置字號(hào)時(shí)，（最小）

10、、（最大）、（比預(yù)設(shè)字大一級(jí)）、（比預(yù)設(shè)字小一級(jí)）。u 例如：將文本“最新通知”設(shè)置為楷體_GB2312，大小為4。u 最新通知u （4）段落標(biāo)記u 格式：u 段落文本u 說(shuō)明：由標(biāo)記所標(biāo)識(shí)的文字代表同一個(gè)段落的文字。其中align屬性有l(wèi)eft、center和right三個(gè)參數(shù)，這三個(gè)設(shè)置分別代表左對(duì)齊、居中對(duì)齊和右對(duì)齊。u 例如：將標(biāo)題“會(huì)議通知”居中顯示。u 會(huì)議通知1.4 HTML文檔入門(mén) 3HTML文檔常用標(biāo)記u （5）換行標(biāo)記u 格式：u u 說(shuō)明：是個(gè)單標(biāo)記，HTML文件中任何位置只要使用了標(biāo)記，當(dāng)文件顯示在瀏覽器中時(shí)，該位置之后的文字將顯示于下一行。u （6）水平線標(biāo)記u 格式

11、：u u 說(shuō)明：在網(wǎng)頁(yè)中插入一條水平分隔線，將不同的內(nèi)容信息分開(kāi)，使文字看起來(lái)清晰、明確。noshade用于設(shè)置水平為實(shí)心線（默認(rèn)情況下為陰影線）。u 例如：插入一條寬度800像素的紅色水平線，并居中顯示。u 1.4 HTML文檔入門(mén) 3HTML文檔常用標(biāo)記u （7）圖像標(biāo)記u 格式：u u 說(shuō)明：在頁(yè)面中插入一幅圖像，圖像地址可以在本地計(jì)算機(jī)，也可以是一個(gè)URL地址，但圖像必須是GIF、JPG/JPEG或PNG格式的，其他格式的圖像不能被插入到網(wǎng)頁(yè)中。Alt參數(shù)用于設(shè)置圖像的說(shuō)明信息，當(dāng)瀏覽器不能顯示圖像時(shí)，則用該參數(shù)指定的文本替換特定的圖片。若圖片正常顯示，則當(dāng)鼠標(biāo)指向該圖片時(shí)也會(huì)顯示該文

12、字。u 例如：插入images文件夾中的圖像tx.jpg，寬度和高度均為300像素，鼠標(biāo)指向圖像或圖像不能正常瀏覽時(shí)提示“風(fēng)景圖片”。u 1.4 HTML文檔入門(mén) 3HTML文檔常用標(biāo)記u （8）超鏈接標(biāo)記u 格式：u 文本或圖像u 說(shuō)明：為標(biāo)記中的文本或圖像添加超鏈接目標(biāo)，瀏覽網(wǎng)頁(yè)時(shí)單擊可打開(kāi)指定的目標(biāo)文件。target用于指定打開(kāi)目標(biāo)窗口的方式，默認(rèn)情況是在當(dāng)前窗口中打開(kāi)，如果要在新窗口中打開(kāi)目標(biāo)窗口，則可將target的屬性值設(shè)為_(kāi)blank。u 根據(jù)鏈接目標(biāo)的不同，可將超鏈接分為以下幾項(xiàng)：u 內(nèi)部鏈接。鏈接到本地計(jì)算機(jī)上的文件，例如：u 單擊查看1.html文件內(nèi)容u 外部鏈接。鏈接到

13、本地站點(diǎn)以外其他任何一個(gè)站點(diǎn)上的文件，例如：u 單擊打開(kāi)新浪網(wǎng)u E-mail鏈接。鏈接到一個(gè)電子郵件地址，單擊將啟動(dòng)默認(rèn)E-mail程序發(fā)送信件，例如：u 請(qǐng)給我發(fā)信u 錨記鏈接。在某個(gè)Web頁(yè)面中創(chuàng)建一個(gè)被稱(chēng)為“錨點(diǎn)”的標(biāo)記，讓頁(yè)面上的另外一個(gè)位置引用，相當(dāng)于在某個(gè)文件中重要之處做上書(shū)簽，需要該部分時(shí)直接查找書(shū)簽就能找到此部分。1.4 HTML文檔入門(mén) 3HTML文檔常用標(biāo)記u （9）表格標(biāo)記u 表格標(biāo)記由表格標(biāo)記、行標(biāo)記和單元格標(biāo)記3部分組成。u 表格標(biāo)記u u 行標(biāo)記 u u 單元格標(biāo)記 u u 說(shuō)明：?jiǎn)卧襁吘嘀竼卧駜?nèi)容與單元邊框之間的像素?cái)?shù)，單元格間距指相鄰單元格之間的距離。1.

14、4 HTML文檔入門(mén) 3HTML文檔常用標(biāo)記u （10）表單標(biāo)記u 格式：u u 說(shuō)明：表單標(biāo)記與動(dòng)態(tài)網(wǎng)站制作是分不開(kāi)的，form標(biāo)記中，action=文件指這個(gè)表單提交后，將傳送給哪個(gè)文件處理；method=提交方式指將表單信息提交服務(wù)器的方式，一般包括POST（以文件形式不限制長(zhǎng)度提交）和GET（附加在URL地址后限制長(zhǎng)度提交）兩種。u 使用標(biāo)記定義表單后，就要通過(guò)具體的表單對(duì)象添加信息，常見(jiàn)的表單對(duì)象有以下幾種。u 文本域 u 單行文本域，用戶(hù)輸入的信息原樣顯示。u 密碼文本域：用戶(hù)輸入的信息以“”形式顯示。u 多行文本域：輸入信息可以是多行，一般用于簡(jiǎn)介、留言等選項(xiàng)。u 單選按鈕：只允許選取一項(xiàng)，一般用于性別等選項(xiàng)。u 復(fù)選框：可以多項(xiàng)選取，一般用于愛(ài)好、特長(zhǎng)等選項(xiàng)。u 菜單域u 可提供讓瀏覽者在給出的菜單中作一個(gè)選擇，如選擇籍貫、類(lèi)別、日期、學(xué)歷等。u 下拉菜單： 滾動(dòng)菜單：u 按鈕域u 提交按鈕： 重置按鈕