模塊一網(wǎng)頁設(shè)計基礎(chǔ)

本章要點本章導讀學習任務(wù)上機實訓模塊一網(wǎng)頁設(shè)計基礎(chǔ)本章要點1.1網(wǎng)頁基礎(chǔ)知識

1．Internet概述

2．WWW服務(wù)3．Web站點和網(wǎng)頁

4．HTTP和URL1.2網(wǎng)站配色方案

1．色彩的基礎(chǔ)知識

2．色彩的搭配原則

3．網(wǎng)站常見的配色方案1.3網(wǎng)站設(shè)計常用軟件1．網(wǎng)站設(shè)計開發(fā)軟件2．網(wǎng)頁美化工具1.4HTML文檔入門1．HTML語言概述2．HTML文檔基本結(jié)構(gòu)

3．HTML文檔常用標記1.5JavaScript腳本

1.

常量

2．變量

3．表達式和運算符

4．基本程序語句

5．函數(shù)

本章主要介紹了網(wǎng)頁制作涉及的基礎(chǔ)知識，主要有Internet的基本概念、WWW服務(wù)的工作原理、網(wǎng)頁與網(wǎng)站、HTML與URL、網(wǎng)站配色基本知識、常用網(wǎng)站開發(fā)工具、HTML文檔的基本結(jié)構(gòu)與常見的HTML標記以及JavaScript腳本基本知識。

本章導讀1、了解網(wǎng)頁基礎(chǔ)知識；2、了解網(wǎng)頁配色方案；3、了解網(wǎng)站設(shè)計常用軟件；4、掌握HTML基本知識，學會使用HTML源代碼制作簡單網(wǎng)頁的方法；5、了解JavaScript腳本的作用及基本語法規(guī)則。學習任務(wù)1．Internet概述Internet，中文名稱為“因特網(wǎng)”或“國際互聯(lián)網(wǎng)”，是利用通信線路和通信設(shè)備將世界各地的計算機網(wǎng)絡(luò)、主機和個人計算機互相連接起來，在網(wǎng)絡(luò)協(xié)議控制下所構(gòu)成的全球互聯(lián)網(wǎng)系統(tǒng)，如圖所示。1.1網(wǎng)頁基礎(chǔ)知識Internet提供的服務(wù)主要包括萬維網(wǎng)（WWW）、電子郵件（E-Mail）、文件傳輸（FTP）、遠程登錄（Telnet）等。

從每天的新聞報告、天氣資訊，到在線音樂、網(wǎng)絡(luò)視頻、QQ、微博、微信，機票預訂、旅館安排、網(wǎng)上購物、證券交易等活動，網(wǎng)絡(luò)已經(jīng)滲透到我們生活的各個角落。

2．WWW服務(wù)WWW是WorldWideWeb的縮寫，也稱為“萬維網(wǎng)”。WWW是一種基于HTTP的交互式多媒體信息檢索工具。

WWW服務(wù)采用客戶機/服務(wù)器工作模式，由WWW瀏覽器、Web服務(wù)器和WWW協(xié)議組成。用戶通過客戶端的瀏覽器，向Web服務(wù)器發(fā)出URL請求，Web服務(wù)器接收并處理用戶請求后，將網(wǎng)頁返回給客戶端，瀏覽器接收到網(wǎng)頁后對其進行解釋，最終呈現(xiàn)給用戶，如圖所示。1.1網(wǎng)頁基礎(chǔ)知識WWW瀏覽器是專門來定位和訪問Web信息的應(yīng)用程序。常用的瀏覽器軟件包括Microsoft公司的InternetExplorer和Netscape公司的Navigator。3．Web站點和網(wǎng)頁

Web站點，又稱為網(wǎng)站，是指在因特網(wǎng)上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合，其運作原理如圖所示。1.1網(wǎng)頁基礎(chǔ)知識

3．Web站點和網(wǎng)頁

1.1網(wǎng)頁基礎(chǔ)知識

網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，一般又稱作HTML文檔，是一種可以在互聯(lián)網(wǎng)上傳輸，能被瀏覽器識別和翻譯成頁面并顯示出來的文件。

網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁，以htm或html為擴展名的文件，為靜態(tài)網(wǎng)頁。根據(jù)采用服務(wù)器技術(shù)的不同，網(wǎng)頁擴展名又有ASP、PHP、JSP等，這些網(wǎng)頁稱為動態(tài)網(wǎng)頁。

當用戶在瀏覽器的地址欄中輸入網(wǎng)站的URL后見到的第一個網(wǎng)頁稱為網(wǎng)站的主頁。

主頁是網(wǎng)站中所有網(wǎng)頁的索引頁，通過單擊主頁上的超鏈接可以打開其他的網(wǎng)頁。4．HTTP和URLHTTP：超文本傳輸協(xié)議，是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議，它允許將HTML文檔從Web服務(wù)器傳送到WWW瀏覽器。Internet中的Web服務(wù)器數(shù)量眾多，且每臺服務(wù)器都包含有多個網(wǎng)頁，用戶要想在眾多的網(wǎng)頁中指明要獲得的網(wǎng)頁，就必須借助于統(tǒng)一資源定位符（URL,UniformResourceLocators）進行資源定位。URL由三個部分組成：協(xié)議、主機名、路徑及文件名。例如：某網(wǎng)頁的URL為：/news/wj1.html其中http:是采用的協(xié)議，是主機名，news指網(wǎng)頁的路徑（存儲網(wǎng)頁的文件夾），wj1.html是要訪問的網(wǎng)頁文件名。用戶只要在瀏覽器的地址欄中輸入要瀏覽網(wǎng)頁的URL，便可以瀏覽到該網(wǎng)頁。1.1網(wǎng)頁基礎(chǔ)知識1．色彩的基礎(chǔ)知識色彩是網(wǎng)站中最主要的組成部分，網(wǎng)站頁面的色彩處理得好，可以錦上添花，達到事半功倍的效果。色彩一般分為無彩色和有彩色兩大類。無彩色是指黑、灰、白等不帶顏色的色彩，有彩色是指紅、黃、藍等帶有顏色的色彩。

（1）色彩的三要素：色相：指色彩的相貌，是色彩最顯著的特征。明度：指色彩本身的明暗深淺程度，簡單來說就是指色彩的程度。純度：指色彩本身的鮮艷程序，又稱為色彩的飽和度。1.2網(wǎng)站配色方案（2）色彩的感覺紅色：是最引人注目的色彩，具有強烈的感染力，象征熱情、喜慶、幸福。在色彩配合中常起著主色和重要的調(diào)和對比作用，是使用得最多的色。綠色：是植物是色彩，象征著平靜、健康、健全、和諧和安全。藍色：使人聯(lián)想到天空、海洋，給人以爽朗、清涼的感覺，象征著平靜、穩(wěn)定性、和諧、統(tǒng)一、信任。黃色：給人明朗愉快的感覺，象征著光明、希望、高貴、愉快。橙色：介于紅色與黃色之間，可以營造一種溫馨的氛圍，象征著溫馨、時尚、輕快。紫色：是一種優(yōu)雅、高貴、充滿靈性并能激發(fā)創(chuàng)造力的顏色，象征著優(yōu)雅、高貴、神秘、憂郁。白色：給人以干凈整潔的感覺，象征著純潔、天真、干凈、輕松、神圣。黑色：是一種比較經(jīng)典的色彩，象征著嚴肅、神秘、威嚴、深沉、壓抑。灰色：是一種可以襯托任何色彩的顏色，象征溫和、謙讓、平凡、考究。1.2網(wǎng)站配色方案2．色彩的搭配原則（1）網(wǎng)頁色彩搭配時，要善用單色、對比色、鄰近色和同類色。（2）網(wǎng)頁要用與眾不同的色彩，不同類型的網(wǎng)站配以不同的色彩，從而表達不同的情感訴求。（3）色彩要和網(wǎng)站的內(nèi)容、文化氛圍相符合，以便更好的突出網(wǎng)站的特色。（4）網(wǎng)頁配色時，盡量把顏色控制在三種之內(nèi)，以免使頁面產(chǎn)生“亂”的效果1.2網(wǎng)站配色方案3．網(wǎng)站常見的配色方案（1）兒童類網(wǎng)站：常運用幸福感強烈、充滿溫情、智慧和希望的黃色；干凈、清澈的藍色；渲染朝氣、健康、自然的綠色；營造溫馨氛圍，活潑、朝氣的橙色。（2）教育類網(wǎng)站：常運用平靜、清澈的藍色；充滿希望的綠色；營造活潑、朝氣的橙色。（3）企業(yè)類網(wǎng)站：常運用沉穩(wěn)、冷靜、嚴謹、成熟的冷色調(diào)藍色，給人一種穩(wěn)定感，使訪問者容易建立對網(wǎng)站的信任。（4）購物類網(wǎng)站：常運用紅色、黃色、橙色等暖色調(diào)渲染氛圍，讓瀏覽者在購物的同時感覺到輕松和愉快。（5）旅游休閑類網(wǎng)站：常運用代表大自然、健康和希望的綠色，代表天空、海洋，干凈清澈的藍色。1.2網(wǎng)站配色方案1．網(wǎng)站設(shè)計開發(fā)軟件（1）文本編輯器（2）Frontpage（3）Dreamweaver1.3網(wǎng)站設(shè)計常用軟件2．網(wǎng)頁美化工具（1）Photoshop（2）Fireworks（3）Flash1．HTML語言概述HTML（HypertextMarkedLanguage，超文本標記語言）是用于創(chuàng)建Web文檔的一種標記語言。2．HTML文檔基本結(jié)構(gòu)一個HTML文檔是由一系列的網(wǎng)頁元素和標記組成的，HTML用標記來規(guī)定元素的屬性和它在文件中的位置。HTML文檔的結(jié)構(gòu)包括頭部分和主體部分兩大部分,具體結(jié)構(gòu)如圖所示。1.4HTML文檔入門1.4HTML文檔入門2．HTML文檔基本結(jié)構(gòu)（1）HTML文檔包括3個主要標記，文檔標記、頭部標記和主體標記。（2）標記不區(qū)分大小寫。（3）所有的標記都要用尖括號<>括起來。<html>標記用于HTML文檔的最前面，用來標識HTML文檔的開始，</html>放在HTML文檔的最后面，用來標識HTML文檔的結(jié)束，這兩個標記必須成對使用。在<head>……</head>內(nèi)，稱為文件頭部，可以包含<title></title>、<script></script>等標記，這部分信息不會在瀏覽器的窗口中顯示出來。在<body>……</body>內(nèi)，稱為正文主體，可包含<p></p>、<img>、<br>、<a></a>等標記，其內(nèi)容將在瀏覽器窗口中顯示出來。1.4HTML文檔入門3．HTML文檔常用標記（1）標題標記格式：<title>網(wǎng)頁的標題</title>說明：該標記在<head></head>標記中，所包含的文字將出現(xiàn)在瀏覽器的標題欄上。當用戶將此頁面添加到收藏夾時，也會默認以該標題為名稱收藏。（2）主體標記格式：<bodybgcolor="頁面背景顏色"background="背景圖像"text="文本顏色">主體內(nèi)容</body>說明：包括所有主體內(nèi)容，可以設(shè)置頁面的背景顏色、背景圖像、文字顏色等屬性。背景顏色和文本顏色可以使用顏色名（如藍色：blue）或顏色代碼值（如藍色：#0000FF）來表示。1.4HTML文檔入門（3）文字標記格式：<fontsize="文字大小"face="字體"color="文本顏色">文本內(nèi)容</font>說明：<font>標記用于設(shè)置網(wǎng)頁中文字的字號、字體、顏色等屬性。設(shè)置字號時，<fontsize=1>（最?。?、<fontsize=7>（最大）、<fontsize=+1>（比預設(shè)字大一級）、<fontsize=-1>（比預設(shè)字小一級）。（4）段落標記格式：<palign="對齊方式">段落文本</p>說明：由<p>標記所標識的文字代表同一個段落的文字。其中align屬性有l(wèi)eft、center和right三個參數(shù)，分別代表左對齊、居中對齊和右對齊。（5）換行標記格式：<br>說明：<br>是個單標記，HTML文件中任何位置只要使用了<br>標記，當文件顯示在瀏覽器中時，該位置之后的文字將顯示于下一行。（6）水平線標記格式：<hralign="對齊方式"color="顏色"width="寬度"size="高度"noshade>說明：在網(wǎng)頁中插入一條水平分隔線，將不同的內(nèi)容信息分開，使文字看起來清晰、明確。noshade用于設(shè)置水平為實心線（默認為陰影線）。1.4HTML文檔入門（7）圖像標記格式：<imgsrc="圖像地址"align="對齊方式"width="寬度"height="高度"alt="替換文字"boder="邊框?qū)挾?>說明：圖像地址可以是本地計算機上的文件，也可以是一個URL地址，但圖像必須是GIF、JPG/JPEG或PNG格式的，其他格式的圖像不能被插入到網(wǎng)頁中。

Alt參數(shù)用于設(shè)置圖像的說明信息，當瀏覽器不能顯示圖像時，則用該參數(shù)指定的文本替換特定的圖片。若圖片正常顯示，則當鼠標指該圖片時也會顯示該文字。1.4HTML文檔入門（7）圖像標記格式：<imgsrc="圖像地址"align="對齊方式"width="寬度"height="高度"alt="替換文字"boder="邊框?qū)挾?>說明：圖像地址可以是本地計算機上的文件，也可以是一個URL地址，但圖像必須是GIF、JPG/JPEG或PNG格式的，其他格式的圖像不能被插入到網(wǎng)頁中。

Alt參數(shù)用于設(shè)置圖像的說明信息，當瀏覽器不能顯示圖像時，則用該參數(shù)指定的文本替換特定的圖片。若圖片正常顯示，則當鼠標指該圖片時也會顯示該文字。1.4HTML文檔入門（8）超鏈接標記格式：<ahref="目標文件的URL"target="打開窗口的方式">文本或圖像</a>說明：為標記中的文本或圖像添加超鏈接目標，瀏覽網(wǎng)頁時單擊可打開指定的目標文件。target用于指定打開目標窗口的方式，默認情況是在當前窗口中打開，如果要在新窗口中打開目標窗口，則可將target的屬性值設(shè)為"_blank"。根據(jù)鏈接目標的不同，可將超鏈接分為以下幾項：①內(nèi)部鏈接，鏈接到本地計算機上的文件，例如：<ahref="1.html">單擊查看1.html文件內(nèi)容</a>②外部鏈接，鏈接到本地站點以外其他任何一個站點上的文件，例如：<ahref="">單擊打開新浪網(wǎng)</a>③E-mail鏈接，鏈接到一個電子郵件地址，單擊將啟動默認E-mail程序發(fā)送信件，例如：<ahref="mailto:liming@163.com">請給我發(fā)信</a>④錨記鏈接，在某個Web頁面中創(chuàng)建一個被稱為“錨點”的標記，讓頁面上的另外一個位置引用，相當于在某個文件中重要之處做上書簽，需要該部分時直接查找書簽就能找到此部分。1.4HTML文檔入門（9）表格標記表格標記由表格標記、行標記和單元格標記3部分組成。①表格標記<tablebgcolor="背景顏色"background="背景圖像"width="寬度"height="高度"align="對齊方式"border="邊框?qū)挾?cellpadding="單元格邊距"cellspacing="單元格間距">……</table>②行標記<trbgcolor="背景顏色"height="高度"align="對齊方式">……</tr>③單元格標記<tdrowspan="跨越行數(shù)"colspan="跨越列數(shù)"bgcolor="背景顏色"background="背景圖像"width="寬度"height="高度"align="對齊方式">……</td>說明：單元格邊距是指單元格內(nèi)容與單元邊框之間的像素數(shù)，單元格間距是指相鄰單元格之間的距離。1.4HTML文檔入門（10）表單標記格式：<formname="表單名稱"method="提交方式"action="文件">說明：action="文件"是指這個表單提交后，將傳送給哪個文件處理；method="提交方式"是指將表單信息提交服務(wù)器的方式，一般包括POST和GET兩種。①文本域單行文本域：<inputname="文本域名稱"type="text"value="初始值">密碼文本域：<inputname="文本域名稱"type="password"value="初始值">多行文本域：<textareaname="文本框名稱"cols="文本框?qū)挾?rows="行數(shù)"></textarea>②選擇域單選按鈕：<inputname="選擇域名稱"type="radio">復選框：<inputname="選擇域名稱"type="checkbox">1.4HTML文檔入門③菜單域下拉菜單：<selectname="菜單名稱">

<option>菜單中的第1個值

<option>菜單中的第2個值

……

</select>滾動菜單：<selectname="菜單名稱"size="顯示選擇項的個數(shù)">

<option>菜單中的第1個值

<option>菜單中的第2個值

……

</select>④按鈕域提交按鈕：所輸入的內(nèi)容提交給相關(guān)程序，讓服務(wù)器對其進行處理：<inputtype="submit"name="按鈕域名稱"value="提交">重置按鈕：把剛輸入的內(nèi)容清除，重新輸入：<inputtype="reset"name="按鈕域名稱"value="重置">（11）滾動標記格式：<marqueebehavior="方式"direction="方向"scrollamount="速度">滾動的方方文本</marquee>1.5JavaScript腳本JavaScript是一種基于對象和事件驅(qū)動并具有安全性能的腳本語言。使用它的目的是與HTML語言一起實現(xiàn)在一個Web頁面中與Web客戶交互作用。1.常量在JavaScript中，常量有以下6種基本類型（1）整型常量：可以使用十六進制、八進制和十進制表示。（2）實型常量：由整數(shù)部分加小數(shù)部分表示，如12.12、125.369等。（3）布爾值：布爾常量只有兩種狀態(tài)：true和false。（4）字符型常量：使用單引號或雙引號括起來的一個或幾個字符。（5）空值：JavaScript中有一個空值null，表示什么也沒有。（6）特殊字符：JavaScript有以反斜杠（\）開頭的不可顯示的特殊字符。2．變量變量中存取數(shù)據(jù)、提供存放信息的容器。包括整數(shù)數(shù)量、字符型變量、布爾型變量和實數(shù)數(shù)量。1.5JavaScript腳本3．表達式和運算符（1）算術(shù)運算符通過算術(shù)運算符可以進行加、減、乘、除和其他數(shù)學運算。算術(shù)運算符描述+加-減*乘/除%取模++遞加1--遞減11.5JavaScript腳本（2）邏輯運算符邏輯運算符比較兩個布爾值（真或假），然后返回一個布爾值。邏輯運算符描述&&邏輯與。在形式A&&B中，只有當A和B都成立時，整個表達式的值為true||邏輯或。在形式A||B中，只要A和B有一個成立時，整個表達式的值就為true!邏輯