網(wǎng)頁(yè)設(shè)計(jì)
情境一 Internet 基礎(chǔ)與應(yīng)用任務(wù)一 Internet 概述一、Internet 概念I(lǐng)nternet 是一個(gè)全球性的計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò),它是將不同地區(qū)且規(guī)模大小不一的網(wǎng)絡(luò)互相連接而成。Intern
情境一 Internet 基礎(chǔ)與應(yīng)用
任務(wù)一 Internet 概述
一、Internet 概念
Internet 是一個(gè)全球性的計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò),它是將不同地區(qū)且規(guī)模大小不一的網(wǎng)絡(luò)互相連接而成。
Internet 的功能
● 信息的獲取與發(fā)布
● 電子郵件(E-mail )
● 網(wǎng)上交際
● 電子商務(wù)
● 網(wǎng)絡(luò)電話
● 網(wǎng)上事務(wù)處理
● Internet 的其它應(yīng)用
二、WWW 概念
WWW(World Wide Web)譯為萬(wàn)維網(wǎng),簡(jiǎn)稱Web ,平??陬^都讀3W ,是Internet 上最重要的資源。它是由Internet 上的信息服務(wù)器連成的網(wǎng)絡(luò),是目前Internet 上發(fā)展最快和應(yīng)用最廣泛的服務(wù)。
1. 超文本傳輸協(xié)議(HTTP )
HTTP(超文本傳輸協(xié)議) 是用于將超文本從WWW 服務(wù)器傳輸?shù)奖镜貫g覽器的傳送協(xié)議。 通信協(xié)議是構(gòu)成計(jì)算機(jī)網(wǎng)絡(luò)的基本要素之一。通信協(xié)議是網(wǎng)絡(luò)上各個(gè)PC 機(jī)之間溝通的“語(yǔ)言”,有了協(xié)議之后,網(wǎng)絡(luò)上的計(jì)算機(jī)才有可能互聯(lián)。
2. 統(tǒng)一資源定位器(URL )
Web 中用URL(統(tǒng)一資源定位器) 作為標(biāo)識(shí)文檔及其他資源的全球地址。URL 好比門牌號(hào)碼,它可以幫助用戶在Internet 定位所需要的資料。
URL 的一般形式為:
應(yīng)用協(xié)議類型://被訪問(wèn)的服務(wù)器的域名或IP 地址/路徑名/…/文件名
冒號(hào)左邊是說(shuō)明URL 的訪問(wèn)方式。如:
ftp :文件傳輸協(xié)議
1
,三、TCP/IP概念
TCP/IP(傳輸控制協(xié)議/互聯(lián)網(wǎng)絡(luò)協(xié)議)是一種網(wǎng)絡(luò)通信協(xié)議,它規(guī)范了網(wǎng)絡(luò)上的所有通信設(shè)備,尤其是一個(gè)主機(jī)與另一個(gè)主機(jī)之間的數(shù)據(jù)往來(lái)格式以及傳送方式。TCP/IP是Internet 的基礎(chǔ)協(xié)議,是由底層的IP 協(xié)議和TCP 協(xié)議組成的,也是一種電腦數(shù)據(jù)打包和尋址的標(biāo)準(zhǔn)方法。在數(shù)據(jù)傳送中,可以形象地理解為有兩個(gè)信封,TCP 和IP 就像是信封,要傳遞的信息被劃分成若干段,每一段塞入一個(gè)TCP 信封,并在該信封面上記錄有分段號(hào)的信息,再將TCP 信封塞入IP 大信封,發(fā)送上網(wǎng)。在接收端,一個(gè)TCP 軟件包收集信封,抽出數(shù)據(jù),按發(fā)送前的順序還原,并加以檢驗(yàn),若發(fā)現(xiàn)錯(cuò)誤,TCP 將會(huì)要求重發(fā)。
四、IP 地址概念
在TCP/IP網(wǎng)絡(luò)中,每個(gè)主機(jī)都有唯一的地址,它是通過(guò)IP 協(xié)議來(lái)實(shí)現(xiàn)的。IP 協(xié)議要求在每次與TCP/IP網(wǎng)絡(luò)建立連接時(shí),每臺(tái)主機(jī)都必須為這個(gè)連接分配一個(gè)唯一的32位地址,因?yàn)樵谶@個(gè)32位IP 地址中,不但可以用來(lái)識(shí)別某一臺(tái)主機(jī),而且還隱含著網(wǎng)際間的路徑信息。IP 地址一般以4個(gè)字節(jié)表示,每個(gè)字節(jié)又用十進(jìn)制表示,范圍是0~255,每個(gè)數(shù)字之間用點(diǎn)隔開(kāi),如192.168.101.5。
IP 地址的結(jié)構(gòu):

先按IP 地址中的網(wǎng)絡(luò)標(biāo)示號(hào)找到相應(yīng)的網(wǎng)絡(luò),再在這個(gè)網(wǎng)絡(luò)上利用主機(jī)ID 找到相應(yīng)的主機(jī)。
五、域名系統(tǒng)
IP 地址是以數(shù)字來(lái)代表的主機(jī)地址,比較難記,為了使用和記憶方便,也為了便于網(wǎng)絡(luò)地址的分層管理和分配,Internet 采用了域名管理系統(tǒng),結(jié)構(gòu)為:
主機(jī)名. 機(jī)構(gòu)名. 網(wǎng)絡(luò)名. 最高層域名
IP 地址和域名的關(guān)系就像每個(gè)人的身份證號(hào)和自己的名字,是一一對(duì)應(yīng)的,當(dāng)輸入一個(gè)域名地址時(shí),域名服務(wù)器(DNS )就會(huì)搜索其對(duì)應(yīng)的IP 地址,然后訪問(wèn)到該地址所表示的站點(diǎn)。
任務(wù)二 網(wǎng)上自我保護(hù)常識(shí)
一、使用密碼時(shí)
1. 盡量避免使用有意義的英文單詞、姓名縮寫以及生日、電話號(hào)碼等容易泄露的字符作為密碼,最好采用字符與數(shù)字混合的密碼。
2
,2. 在不同的場(chǎng)合使用不同的密碼。
3. 不要貪圖方便在撥號(hào)連接時(shí)選擇“保存”密碼。
4. 定期地修改自己的上網(wǎng)密碼,至少一個(gè)月更改一次。
二、使用電子郵件時(shí)
應(yīng)申請(qǐng)多個(gè)免費(fèi)郵箱,對(duì)于不同的用途,分門別類地使用不同的郵箱。
三、下載時(shí)
1. 不下載來(lái)路不明的軟件及程序。
2. 不要打開(kāi)來(lái)歷不明的電子郵件及其附件,以免遭病毒郵件的侵害。
四、安裝防火墻
如有條件,應(yīng)安裝防火墻以抵御黑客的襲擊。
情境二 網(wǎng)頁(yè)設(shè)計(jì)與制作概述
任務(wù)一 網(wǎng)頁(yè)設(shè)計(jì)與制作初識(shí)
3
,一、網(wǎng)站的組成元素
整體CIS :網(wǎng)站以何種統(tǒng)一規(guī)范的視覺(jué)形象展現(xiàn)給用戶。
文件系統(tǒng)
導(dǎo)航系統(tǒng):便于用戶瀏覽網(wǎng)站信息、獲取網(wǎng)站服務(wù),并且在瀏覽過(guò)程中不至于迷失,
在發(fā)現(xiàn)問(wèn)題時(shí)可以及時(shí)找到在線幫助的所有形式。
技術(shù)模型:網(wǎng)站在開(kāi)發(fā)過(guò)程中實(shí)施的技術(shù)組合方案。如網(wǎng)站的界面設(shè)計(jì)工具一般采用
Dreamweaver 、FrontPage 或Golive 結(jié)合Flash 、PhotoshopIllustrator或
Fireworks 等。
服務(wù)及體貼模型
項(xiàng)目化管理機(jī)制
網(wǎng)站的技術(shù)規(guī)范及其相關(guān)文案
二、網(wǎng)站與網(wǎng)頁(yè)的關(guān)系
多個(gè)網(wǎng)頁(yè)組合在一起便形成了一個(gè)網(wǎng)站。簡(jiǎn)單地說(shuō),多個(gè)網(wǎng)頁(yè)通過(guò)超鏈接構(gòu)成了整個(gè)網(wǎng)站。
三、基于Web 的客戶端與服務(wù)器端
基于Web 的客戶端是指用戶或?yàn)g覽器端,即網(wǎng)站所在的Web 服務(wù)器反饋給用戶的網(wǎng)頁(yè)信息。
基于Web 的服務(wù)器端是指網(wǎng)站文件所存放的Web 服務(wù)器。
四、基于Web 的人機(jī)交互
基于Web 的人機(jī)交互是指客戶端的用戶與Web 服務(wù)器端的應(yīng)用程序之間的人機(jī)對(duì)話,即當(dāng)用戶向Web 服務(wù)器端的應(yīng)用程序發(fā)出HTTP 請(qǐng)求時(shí),Web 服務(wù)器端的應(yīng)用程序?qū)τ脩舻恼?qǐng)求產(chǎn)生響應(yīng)并反饋給用戶相應(yīng)的結(jié)果頁(yè)面。

4
,任務(wù)二 網(wǎng)站開(kāi)發(fā)的技術(shù)層面及工具
網(wǎng)站開(kāi)發(fā)的技術(shù)層面是指網(wǎng)站開(kāi)發(fā)過(guò)程中的開(kāi)發(fā)模塊。
網(wǎng)站的整體CIS 設(shè)計(jì)、


內(nèi)容 網(wǎng)站主要頁(yè)面的版式設(shè)計(jì)
網(wǎng)頁(yè)中的文字、圖像與多媒體等對(duì)象的設(shè)計(jì)
:Photoshop 、Illustrator 、
工具 Golive 和LiveMotion
Adobe Studio:Dreamveaver、Flash 、Fireworks 和FreeHand 。
服務(wù)器端數(shù)據(jù)庫(kù)開(kāi)發(fā)
網(wǎng)站的測(cè)試:
網(wǎng)站的發(fā)布、維護(hù)與更新
任務(wù)三 網(wǎng)站的分類與精品網(wǎng)站賞析
網(wǎng)站分類一般的原則是網(wǎng)站的相對(duì)規(guī)模與主體功能。
綜合門戶類網(wǎng)站:在某個(gè)特定的行政區(qū)域內(nèi)具有絕對(duì)的規(guī)模優(yōu)勢(shì),同時(shí)具有相對(duì)穩(wěn)定和龐大
5
,的服務(wù)受眾群。如新浪網(wǎng)等。
垂直門戶類網(wǎng)站:在某個(gè)行業(yè)中具有絕對(duì)的規(guī)模優(yōu)勢(shì),同時(shí)其主體業(yè)務(wù)在本行業(yè)中處于絕對(duì)
的領(lǐng)先地位,或者在某個(gè)特定的技術(shù)領(lǐng)域具有絕對(duì)的技術(shù)權(quán)威,并同時(shí)具
有相對(duì)較大的規(guī)模。專業(yè)程度必須很高,或者說(shuō)網(wǎng)站的服務(wù)內(nèi)容相對(duì)比較
單一。如當(dāng)當(dāng)網(wǎng)上書店。
藝術(shù)類網(wǎng)站:網(wǎng)站提供的內(nèi)容藝術(shù)氛圍比較濃,同時(shí)網(wǎng)站的主體受眾群一般均具有一定的藝
術(shù)素養(yǎng)。如中國(guó)藝術(shù)家協(xié)會(huì)網(wǎng)站。
個(gè)人網(wǎng)站:一些具有某項(xiàng)特長(zhǎng)或?yàn)榱顺浞终宫F(xiàn)自我的人群自主開(kāi)發(fā)的網(wǎng)站,個(gè)性十分鮮明。
情境三 Dreamweaver CS 3
任務(wù)一 Dreamweaver CS 3初識(shí)
一、運(yùn)行Dreamweaver CS 3
開(kāi)始—程序—Adobe Dreamweaver CS 3
二、熟悉Dreamweaver CS 3工作區(qū)
任務(wù)二Dreamweaver CS 3基本操作
一、創(chuàng)建本地站點(diǎn)
本地站點(diǎn)是網(wǎng)站所有文件在本地計(jì)算機(jī)上的存放位置。
文件面板—管理站點(diǎn)—新建—站點(diǎn)
二、站點(diǎn)的導(dǎo)入、導(dǎo)出
站點(diǎn)—管理站點(diǎn)導(dǎo)入
導(dǎo)出
三、創(chuàng)建網(wǎng)頁(yè)
站點(diǎn)管理窗口—右擊要?jiǎng)?chuàng)建網(wǎng)頁(yè)的文件夾—新建文檔
6
,四、設(shè)置頁(yè)面屬性
修改—頁(yè)面屬性
五、創(chuàng)建超級(jí)鏈接
1、 文件鏈接:;鏈接到其他文檔或文件。窗口—屬性—鏈接
2、 錨記鏈接:跳轉(zhuǎn)至統(tǒng)一文件或不同文件內(nèi)的特定位置。
單擊創(chuàng)建位置—插入面板—常用—命名錨記—選擇創(chuàng)建錨記的文本或
圖像—屬性面板—鏈接
3、 E-Mail 鏈接:新建一個(gè)已填好收件人E-Mail 地址的空白電子郵件。
插入面板—常用—電子郵件鏈接
4、 空鏈接:未指派的鏈接,用于向頁(yè)面上的對(duì)象或文本附加行為。
選擇要鏈接的對(duì)象—屬性面板—鏈接中輸入#
任務(wù)三 文本的輸入與編輯
一、 輸入文本
1、 直接輸入文本
2、 選擇性粘貼
二、使用CSS 樣式格式化文本
CSS 是一組格式設(shè)置規(guī)則,通過(guò)使用CSS 樣式設(shè)置頁(yè)面的格式,可將頁(yè)面的內(nèi)容與表示形式分離開(kāi)。頁(yè)面內(nèi)容存放在HTML 文件中,而CSS 規(guī)則存放在外部樣式表中。
1、 創(chuàng)建CSS 樣式
選擇文本—CSS 屬性面板中右擊—新建
2、 設(shè)置CSS 屬性
雙擊CSS 樣式
3、 應(yīng)用CSS 樣式
選擇文本范圍—CSS 樣式面板中右擊CSS 樣式—套用
附加樣式表
任務(wù)四 圖像的插入與編輯
一、 插入圖像
“插入”面板“常用”—“圖像”按鈕—圖像
7
,二、設(shè)置圖像屬性
使用“屬性”面板
三、編輯圖像
使用“屬性”面板
1、優(yōu)化圖像
2、裁剪圖像
3、重新取樣
4、調(diào)整圖像的亮度和對(duì)比度
5、銳化圖像
四、創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖像
“插入”面板“常用”—“圖像”按鈕—鼠標(biāo)經(jīng)過(guò)圖像
任務(wù)五 表格的制作與使用
一、制作表格
1、插入表格
“插入”面板“常用”—“表格”按鈕
2、編輯表格
1、)選擇表格
單擊表格邊框線
2、)調(diào)整表格大小 “屬性”面板 鼠標(biāo)拖動(dòng)
3、)添加行或列
定位—修改—表格—插入行
插入列
4、)刪除行或列
刪除行
刪除列
選擇行或列—Delete
5、)拆分單元格
8
,定位—修改—表格—拆分單元格 “屬性”面板—拆分單元格
6、)合并單元格
選擇單元格—修改—表格—合并單元格
7、)剪切或復(fù)制單元格
剪切
拷貝
8、)粘貼單元格
選定單元格—編輯—粘貼
9、)刪除單元格內(nèi)容
選定單元格—編輯—清除
3、 設(shè)置表格屬性
使用“屬性”面板
二、用表格布局頁(yè)面
1、熟練使用表格嵌套和單元格的拆分與合并
2、表格邊框必須設(shè)置為0。
任務(wù)六 AP Div元素的使用
AP 元素,即絕對(duì)定位元素,是分配有絕對(duì)位置的任何HTML 頁(yè)面元素。
一、AP Div元素的創(chuàng)建和使用
1、插入AP Div元素
插入面板—布局—繪制AP Div元素
2、插入嵌套AP Div元素
1、)繪制嵌套AP Div元素
編輯—首選參數(shù)—AP 元素—選中嵌套復(fù)選框
2、)嵌套現(xiàn)有AP Div元素
窗口—AP 元素—Ctrl 鼠標(biāo)拖動(dòng)
3、設(shè)置AP Div元素屬性
9
,屬性面板
二、AP Div元素的基本操作
1、選擇AP Div元素 鼠標(biāo)單擊

AP

元素面板
2、更改AP Div元素的堆疊順序
屬性面板
AP 元素面板
3、顯示和隱藏AP Div元素
屬性面板
AP 元素面板
4、 調(diào)整AP Div元素的大小
鼠標(biāo)拖動(dòng)
屬性面板
5、 移動(dòng)AP Div元素
鼠標(biāo)拖動(dòng)
鍵盤光標(biāo)鍵
三、AP Div元素與表格的相互轉(zhuǎn)換
將AP Div轉(zhuǎn)換為表格
將表格轉(zhuǎn)換為AP Div
任務(wù)7 網(wǎng)頁(yè)布局
框架:框架不是文件,只是存放文件的容器,是將一個(gè)瀏覽器窗口劃分為多個(gè)區(qū)域,每個(gè)區(qū)
域都可以顯示不同的HTML 文件,它們的操作是獨(dú)立的。
框架集:框架的集合,是HTML 文件,定義一組框架的布局和屬性。
10