《Dreamweaver CC網(wǎng)頁設(shè)計與制作》課件 項目6-9  CSS 和 div 的應(yīng)用-網(wǎng)頁制作綜合實訓(xùn)_第1頁
《Dreamweaver CC網(wǎng)頁設(shè)計與制作》課件 項目6-9  CSS 和 div 的應(yīng)用-網(wǎng)頁制作綜合實訓(xùn)_第2頁
《Dreamweaver CC網(wǎng)頁設(shè)計與制作》課件 項目6-9  CSS 和 div 的應(yīng)用-網(wǎng)頁制作綜合實訓(xùn)_第3頁
《Dreamweaver CC網(wǎng)頁設(shè)計與制作》課件 項目6-9  CSS 和 div 的應(yīng)用-網(wǎng)頁制作綜合實訓(xùn)_第4頁
《Dreamweaver CC網(wǎng)頁設(shè)計與制作》課件 項目6-9  CSS 和 div 的應(yīng)用-網(wǎng)頁制作綜合實訓(xùn)_第5頁
已閱讀5頁，還剩185頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

項目六CSS和div的應(yīng)用11

美化婚慶策劃網(wǎng)頁頭部2美化婚慶策劃網(wǎng)頁其他欄目目錄CONTENTS23布局婚慶策劃網(wǎng)頁任務(wù)1

美化婚慶策劃網(wǎng)頁頭部31.?了解CSS的概念、功能、優(yōu)勢和語法格式。2.?了解選擇器的定義、類型和語法格式。3.?了解盒子模型及盒子的有關(guān)屬性。4.?能創(chuàng)建并引用CSS樣式表，使用CSS類選擇器、標(biāo)簽選擇器、ID選擇器、復(fù)合選擇器美化網(wǎng)頁元素，編輯CSS樣式代碼。4本任務(wù)是網(wǎng)頁頭部的美化實例（見下圖）。通過本任務(wù)的學(xué)習(xí)，可以掌握利用“CSS設(shè)計器”面板、“屬性”面板、代碼視圖來新建、編輯、引用CSS樣式來美化網(wǎng)頁頭部元素的過程和方法，熟悉“CSS規(guī)則定義”對話框和網(wǎng)頁配色技巧。5婚慶策劃網(wǎng)頁頭部效果一、樣式表概述1.?樣式表的定義CSS是cascading?style?sheets的縮寫，一般翻譯為層疊樣式表，簡稱樣式表，是W3C組織制定的網(wǎng)頁樣式設(shè)計標(biāo)準(zhǔn)，可方便地用于網(wǎng)頁外觀的控制。CSS3發(fā)布于2008年，是CSS的一個重要版本，其后續(xù)版本CSS4并沒有作為一個完整的標(biāo)準(zhǔn)發(fā)布，而是引入新的模塊和特性。使用CSS3不僅可以設(shè)計炫酷美觀的網(wǎng)頁，還能在一定程度上提高網(wǎng)頁性能。62.?樣式表文件樣式表文件就是人們常說的CSS文件，其擴(kuò)展名為.css，是用于存儲網(wǎng)頁元素格式設(shè)置的文本文件，CSS的格式設(shè)置由選擇器和屬性設(shè)置項構(gòu)成。73.?在網(wǎng)頁中引用CSS樣式表的幾種方式（1）內(nèi)部樣式表內(nèi)部樣式表是將CSS樣式代碼集中寫在HTML文檔的頭部標(biāo)簽<head>和</head>之間，并用<style>標(biāo)簽定義，其基本語法格式如下。8（2）行內(nèi)樣式表行內(nèi)樣式表也稱為內(nèi)聯(lián)樣式表，是將CSS樣式表放置在HTML文件主體中，通過標(biāo)簽的style屬性來設(shè)置元素的樣式，其基本語法格式如下。9（3）鏈接樣式表鏈接樣式表是將所有的樣式放在HTML文件外部的一個或多個以.css為擴(kuò)展名的外部樣式表文件中，通過<link/>標(biāo)簽將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下。10（4）導(dǎo)入樣式表通過在HTML頭部文檔<style></style>標(biāo)簽內(nèi)的開頭處使用@import語句，即可導(dǎo)入外部樣式表文件。其基本語法格式如下。11二、選擇器1.?選擇器的定義選擇器（select）也稱選擇符，它是CSS樣式表的構(gòu)成成分之一，用于指明樣式對哪些網(wǎng)頁元素生效。2.?CSS選擇器的命名規(guī)則存放CSS樣式表文件的目錄一般命名為style或css。CSS樣式表文件一般命名為style.css或css.css。12所有CSS選擇器必須由英文字母、數(shù)字或下劃線組成，必須以字母開頭，不能為純數(shù)字。設(shè)計者要用有意義的單詞或單詞組合來命名選擇器，做到“見其名知其意”。具體可以參考下表中的選擇器命名。13選擇器命名參考3.?選擇器的分類CSS選擇器可分為5類：簡單選擇器、組合器選擇器、偽類選擇器、偽元素選擇器、屬性選擇器。（1）簡單選擇器簡單選擇器可分為標(biāo)簽選擇器、類選擇器、id選擇器和通配符選擇器。1）標(biāo)簽選擇器。標(biāo)簽選擇器是指用HTML標(biāo)簽名作為選擇器，根據(jù)標(biāo)簽名來選擇HTML元素，為頁面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式。其基本語法格式如下。142）類選擇器。類選擇器用來選擇有特定class屬性的HTML元素。選擇器使用“.”（英文標(biāo)點）進(jìn)行標(biāo)識，后面緊跟類名，其基本語法格式如下。3）id選擇器。id選擇器使用HTML元素的id屬性來選擇特定元素。元素的id在頁面中是唯一的，因此，id選擇器用于選擇一個唯一的元素。id選擇器使用“#”進(jìn)行標(biāo)識，后面緊跟id名，其基本語法格式如下。154）通配符選擇器。通配符選擇器（*）也稱全局選擇器，其作用是選擇頁面上的所有HTML元素均使用同一種樣式，它是作用范圍最廣的選擇器，其基本語法格式如下。16（2）組合器選擇器組合器選擇器由兩個或多個基礎(chǔ)選擇器通過不同的方式組合而成，可以更準(zhǔn)確、更精細(xì)地選擇目標(biāo)元素。CSS3中包含了后代選擇器（以空格分隔）、子元素選擇器、相鄰兄弟選擇器、普通兄弟選擇器、并集選擇器等組合方式。這里介紹經(jīng)常用到的后代選擇器和并集選擇器。171）后代選擇器。后代選擇器又稱為包含選擇器，其作用是選擇某元素的子孫后代。其基本語法格式如下。2）并集選擇器。并集選擇器用逗號分隔多個選擇器，它可以把選擇器不同但樣式相同的CSS語法塊進(jìn)行合并，簡化代碼。18三、CSS樣式表的創(chuàng)建和修改方法在Dreamweaver?CC中，可以用兩種方式創(chuàng)建樣式表，一是在代碼視圖中直接輸入需要的樣式代碼創(chuàng)建；二是在“CSS設(shè)計器”面板的圖文界面中創(chuàng)建。（1）直接編寫代碼創(chuàng)建CSS樣式在代碼視圖中直接編寫CSS樣式代碼，或者在獨立的.css文件中編寫CSS樣式代碼。19（2）使用“CSS設(shè)計器”面板創(chuàng)建CSS樣式使用“CSS設(shè)計器”面板創(chuàng)建CSS樣式的步驟如下。1）單擊“窗口”→“CSS設(shè)計器”命令，顯示“CSS設(shè)計器”面板。在“CSS設(shè)計器”面板中可以新建樣式表，查看、創(chuàng)建、編輯和刪除CSS樣式，并且可以將外部樣式表附加到當(dāng)前文檔；使用“CSS設(shè)計器”面板還可以在“全部”和“當(dāng)前”模式下修改CSS屬性。2）在“CSS設(shè)計器”面板中單擊“源”選項區(qū)中的“+”按鈕，可選擇網(wǎng)頁是使用外部CSS樣式還是使用內(nèi)部CSS樣式。單擊“選擇器”選項區(qū)中的“+”按鈕，可以添加選擇器（新建CSS樣式）。202.?在“屬性”面板中應(yīng)用和修改CSS樣式（1）對元素應(yīng)用樣式選中要應(yīng)用CSS樣式的元素，在其“屬性”面板中選擇要應(yīng)用的CSS樣式。21（2）修改元素的樣式在“屬性”面板（CSS）中可以看到當(dāng)前頁面應(yīng)用的樣式、“目標(biāo)規(guī)則”按鈕以及“編輯規(guī)則”按鈕。選擇要修改的樣式，單擊“屬性”面板（CSS）上的“編輯規(guī)則”按鈕可打開“CSS規(guī)則定義”對話框，在該對話框中可方便地編輯樣式?！皩傩浴泵姘澹–SS）如圖所示。22“屬性”面板（CSS）上的“編輯規(guī)則”按鈕3.?樣式表的查看方法（1）打開樣式表文件“style.css”，可查看樣式表的形式、構(gòu)成、語法格式以及樣式表中定義的樣式語法格式和注釋信息，如圖所示。（2）單擊“窗口”→“設(shè)計器”命令，顯示“CSS設(shè)計器”面板，查看“CSS設(shè)計器”面板的構(gòu)成，如圖所示。23樣式表文件“style.css”的內(nèi)容及“CSS設(shè)計器”面板的構(gòu)成四、使用“CSS規(guī)則定義”對話框設(shè)置“字體”屬性在DreamweaverCC中，可以利用“CSS規(guī)則定義”對話框方便地編輯CSS樣式。在“CSS規(guī)則定義”對話框的“分類”中選擇“類型”，可設(shè)置“字體”屬性，如圖所示。2425使用“CSS規(guī)則定義”對話框設(shè)置“字體”屬性“CSS規(guī)則定義”對話框中的“字體”屬性及其說明見下表。26“字體”屬性及其說明五、使用“CSS規(guī)則定義”對話框設(shè)置“背景”屬性在“CSS規(guī)則定義”對話框的“分類”中選擇“背景”，可設(shè)置“背景”屬性，如圖所示。27使用“CSS規(guī)則定義”對話框設(shè)置“背景”屬性“CSS規(guī)則定義”對話框中的“背景”屬性及其說明見下表。28“背景”屬性及其說明六、使用“CSS規(guī)則定義”對話框設(shè)置“方框”屬性在“CSS規(guī)則定義”對話框的“分類”中選擇“方框”，可設(shè)置“方框”屬性，如圖所示。29使用“CSS規(guī)則定義”對話框設(shè)置“方框”屬性“CSS規(guī)則定義”對話框中的“方框”屬性及其說明見下表。30“方框”屬性及其說明七、盒子模型概述CSS的盒子模型把存放網(wǎng)頁元素的容器看作是一個盒子，用來封裝HTML元素，它包括外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、內(nèi)容（content），如圖所示。31盒子模型原理圖盒子的屬性及說明見下表。32盒子的屬性及說明任務(wù)2美化婚慶策劃網(wǎng)頁其他欄目331.了解盒子模型、浮動的含義及應(yīng)用。2.了解偽類選擇器的含義、分類及應(yīng)用。3.能編輯CSS樣式代碼。4.能創(chuàng)建并使用偽類選擇器、復(fù)合選擇器美化網(wǎng)頁元素。5.能美化婚慶策劃網(wǎng)的導(dǎo)航欄、內(nèi)容區(qū)、友情鏈接區(qū)和版權(quán)信息區(qū)。34本任務(wù)是美化婚慶策劃網(wǎng)頁其他欄目的實例，效果如圖所示。通過本任務(wù)的學(xué)習(xí)，可以掌握利用“CSS設(shè)計器”面板、“屬性”面板和代碼視圖來新建、編輯、引用偽類選擇器以及復(fù)合選擇器美化婚慶策劃網(wǎng)頁的方法。35

婚慶策劃網(wǎng)頁其他欄目最終效果一、偽類選擇器偽類選擇器主要應(yīng)用在<a>標(biāo)簽上，給超鏈接的不同狀態(tài)添加不同的樣式，能使網(wǎng)頁元素呈現(xiàn)特殊動態(tài)效果，見下表。36

偽類選擇器及其說明二、“CSS規(guī)則定義”對話框中的長度單位在DreamweaverCC中，可以利用“CSS規(guī)則定義”對話框方便地編輯CSS樣式。在定義CSS規(guī)則時，經(jīng)常用到長度單位，主要用于寬度、高度、字號、行高、邊距、邊框等屬性設(shè)置，長度單位包括絕對類型和相對類型兩種。常用的長度單位及說明見下表。3738常用的長度單位及說明三、“CSS規(guī)則定義”對話框中的顏色表示方法在定義CSS規(guī)則時，顏色的表示方法主要有以下幾種。1.用#RRGGBB形式的十六進(jìn)制值表示。2.直接用顏色名稱表示。3.使用rgb()函數(shù)指定紅、綠、藍(lán)三色的值表示，每個值為0～255。4.使用rgba()函數(shù)指定紅、綠、藍(lán)三色的值和alpha通道，每個紅、綠、藍(lán)三色的值為0～255；alpha通道用于指定透明度，值范圍為0（完全透明）到1（完全不透明）。39常用顏色的指定名稱及代碼對照見下表。40常用顏色的指定名稱及代碼對照四、使用“CSS規(guī)則定義”對話框設(shè)置區(qū)塊的屬性在“CSS規(guī)則定義”對話框的“分類”中選擇“區(qū)塊”，可設(shè)置“區(qū)塊”屬性，如圖所示。41“CSS規(guī)則定義”對話框中的“區(qū)塊”屬性“區(qū)塊”的屬性及說明見下表。42“區(qū)塊”的屬性及說明五、使用“CSS規(guī)則定義”對話框設(shè)置方框的“Clear”和“Float”屬性在“CSS規(guī)則定義”對話框的“分類”中選擇“方框”，可設(shè)置方框的屬性，如圖所示。43“CSS規(guī)則定義”對話框中的“方框”屬性方框的“Clear”和“Float”屬性及說明見下表。44

方框的“Clear”和“Float”屬性及說明六、使用“CSS規(guī)則定義”對話框設(shè)置邊框的屬性在“CSS規(guī)則定義”對話框的“分類”中選擇“邊框”，可設(shè)置“邊框”屬性，如圖所示。45“CSS規(guī)則定義”對話框中的“邊框”屬性“邊框”屬性及其說明見下表。46“邊框”屬性及其說明七、使用“CSS規(guī)則定義”對話框設(shè)置“列表”的屬性在“CSS規(guī)則定義”對話框的“分類”中選擇“列表”，可設(shè)置“列表”的屬性，如圖所示。47“CSS規(guī)則定義”對話框中的“列表”屬性“列表”屬性及其說明見下表。48“列表”屬性及其說明任務(wù)3

布局婚慶策劃網(wǎng)頁491.了解盒子模型的原理和用法。2.了解網(wǎng)頁浮動布局的原理和常用布局方法。3.了解重構(gòu)網(wǎng)頁常用的HTML元素。4.了解float和clear屬性的用法。5.能插入div、段落等塊元素，引用CSS樣式控制其大小、位置和顯示方式。50本任務(wù)是一個用div、段落等塊元素布局婚慶策劃網(wǎng)頁的實例，效果如圖所示。通過本任務(wù)的學(xué)習(xí)，可以掌握利用“插入”面板、設(shè)計視圖、代碼視圖來插入div、段落等塊元素，引用CSS來布局網(wǎng)頁的過程和方法，熟悉網(wǎng)頁布局和配色技巧。51

婚慶策劃網(wǎng)頁布局效果一、盒子模型實際尺寸的計算方式CSS把存放網(wǎng)頁元素的容器看作是一個盒子，每個盒子都由元素的內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成，如圖所示。52

盒子模型示意圖盒子實際尺寸的計算方式見下表。53盒子實際尺寸的計算方式border為盒子的邊框，它具有border-style（邊框樣式）、border-width（邊框?qū)挾龋┖蚥order-color（邊框顏色）屬性。1.?border-style（邊框樣式）border-style屬性用于設(shè)置邊框的樣式，其屬性、取值及說明見下表。54border-style的屬性、取值及說明2.?border-width（邊框?qū)挾龋゜order-width屬性用于設(shè)置邊框的寬度，單位為像素（px），其常用屬性及說明見下表。55border-width的常用屬性及說明3.?border-color（邊框顏色）border-color屬性用于設(shè)置邊框的顏色，其常用屬性及說明見下表。56border-color的常用屬性及說明二、塊元素、行內(nèi)元素、行內(nèi)塊元素與div1.?塊元素塊元素是指屬性display為block的元素，通常使用塊元素搭建布局。2.?行內(nèi)元素行內(nèi)元素也稱內(nèi)聯(lián)元素，是指其屬性display為inline的元素，行內(nèi)元素可以和相鄰的行內(nèi)元素共占一行，使寬和高的屬性值不生效，完全靠內(nèi)容撐開寬和高。通常使用行內(nèi)元素來進(jìn)行文字、小圖標(biāo)的搭建。573.?行內(nèi)塊元素行內(nèi)塊元素結(jié)合了行內(nèi)元素和塊元素，不僅使寬和高的屬性值生效，還可以使多個元素在一行內(nèi)顯示。4.?divdiv是英文division的縮寫，<div>標(biāo)記就是一個塊容器標(biāo)記，<div>與</div>之間相當(dāng)于一個容器，它可以將網(wǎng)頁文檔分割為獨立的、不同的部分，以容納段落、標(biāo)題、圖像、列表等各種網(wǎng)頁元素，通過與id、class等屬性配合，實現(xiàn)網(wǎng)頁的規(guī)劃和布局。大多數(shù)HTML標(biāo)記都可以嵌套在<div>標(biāo)記中，<div>中還可以嵌套多層<div>。58三、CSS的布局屬性和定位屬性1.?布局屬性（1）控制浮動的屬性控制浮動的屬性包括float、clear屬性，其屬性的取值及說明見下表。59控制浮動的屬性的取值及說明（2）控制溢出（overflow）的屬性控制溢出（overflow）的屬性用于設(shè)置元素的內(nèi)容超過其指定高度及寬度時，元素內(nèi)容溢出盒子時的顯示方式。overflow屬性的取值及說明見下表。60overflow屬性的取值及說明（3）控制顯示（display）的屬性控制顯示（display）的屬性用于設(shè)置元素的顯示方式，display屬性的取值及說明見下表。61display屬性的取值及說明元素可見性的屬性visibility用于設(shè)置一個元素是否顯示。visibility屬性的取值及說明見下表。62visibility屬性的取值及說明2.?定位屬性（1）定位位置屬性定位位置屬性top、right、bottom、left用于定位元素的位置，其屬性的取值及說明見下表。63

定位位置屬性的取值及說明（2）定位方式（position）屬性定位方式（position）屬性用于設(shè)置元素的定位類型，其屬性的取值及說明見下表。64position屬性的取值及說明65position屬性的取值及說明（3）層疊順序（z-index）屬性層疊順序（z-index）屬性用于設(shè)置對象的層疊順序（哪個元素應(yīng)該放在前面或后面），其屬性的取值及說明見下表。66z-index屬性的取值及說明項目七模板、庫和浮動框架的應(yīng)用671用模板和庫創(chuàng)建秋季五金商品交易會網(wǎng)頁2制作“觀眾中心”欄目框架網(wǎng)頁目錄CONTENTS68任務(wù)1用模板和庫創(chuàng)建秋季五金商品交易會網(wǎng)頁691.了解模板和庫的概念、形式、作用及應(yīng)用。2.能將現(xiàn)有的網(wǎng)頁另存為模板。3.能用模板和庫快速創(chuàng)建網(wǎng)頁。4.能編輯模板，定義和修改可編輯區(qū)域與可選區(qū)域，管理模板和庫。70本任務(wù)是模板和庫的應(yīng)用實例（下見圖）。通過本任務(wù)的學(xué)習(xí)，可以掌握創(chuàng)建模板和庫、用模板和庫快速創(chuàng)建與更新網(wǎng)頁的過程及方法，熟悉用“資源”面板管理模板和庫項目的技巧。7172用模板和庫制作的網(wǎng)頁效果一、模板1.?模板的有關(guān)概念模板是一種擴(kuò)展名為.dwt的特殊類型的文件，類似于Word文檔的模板文件。模板用于制作同一個網(wǎng)站的各張網(wǎng)頁中“相同的”部分、設(shè)計“固定的”頁面布局?；谀０鍎?chuàng)建的文檔會繼承模板的頁面布局和“相同的”部分，并與模板保持鏈接關(guān)系，修改模板后，所有基于該模板創(chuàng)建的文檔都可以自動更新。73模板中的區(qū)域可分為兩部分，一部分區(qū)域?qū)?yīng)基于模板創(chuàng)建的文檔中不能編輯的部分，稱為“不可編輯區(qū)域”；另一部分區(qū)域?qū)?yīng)基于模板創(chuàng)建的文檔中可以編輯的部分，稱為“可編輯區(qū)域”。742.?模板的創(chuàng)建模板的創(chuàng)建方法有以下兩種。一種是新建空白模板，然后像制作普通網(wǎng)頁一樣插入內(nèi)容；另一種是將已經(jīng)制作好的普通網(wǎng)頁文件轉(zhuǎn)換為模板。（1）新建空白模板1）啟動Dreamweaver?CC，單擊“文件”→“新建”命令，打開“新建文檔”對話框，在左側(cè)的列表中選擇“新建文檔”，在“文檔類型”列表中選擇“HITML模板”，在“布局”列表中選擇“無”，如圖所示。7576“新建文檔”對話框2）單擊“創(chuàng)建”按鈕，創(chuàng)建一個模板，并進(jìn)入編輯狀態(tài)，如圖所示。3）單擊“文件”→“保存”命令，會彈出提示對話框，在該提示對話框中勾選“不再警告我”復(fù)選框，然后單擊“確定”按鈕，如圖所示。77新建的模板及代碼

提示對話框4）彈出“另存模板”對話框，在“站點”下拉列表中選擇模板保存的站點（本項目站點為“moban”），在“另存為”文本框中輸入模板的名稱“t1”，然后單擊“保存”按鈕保存模板，如圖所示。78“另存模板”對話框

5）打開“文件”面板，可以看到其中多了一個名為“Templates”的文件夾，展開該文件夾，可以看到新建的模板“t1.dwt”，如圖所示。6）繼續(xù)像普通網(wǎng)頁一樣，輸入模板內(nèi)容后保存即可。79“文件”面板上的模板（2）將已經(jīng)制作好的普通網(wǎng)頁轉(zhuǎn)換為模板1）打開一個已經(jīng)制作好的HTML文檔，單擊“文件”→“另存為模板”命令，打開“另存模板”對話框。2）在“另存模板”對話框的“另存為”文本框中輸入模板名稱“t2”，并單擊“保存”按鈕，如圖所示。80“另存模板”對話框3）彈出提示對話框，詢問是否更新鏈接，一般情況下單擊“是”按鈕，如圖所示，這樣就將當(dāng)前打開的已制作好的HTML文檔另存為模板“t2”。81“更新鏈接”對話框2.?模板的編輯（1）設(shè)置可編輯區(qū)域1）單擊“文件”→“打開”命令，在“打開”對話框中選擇要修改的模板文件如“t2.dwt”，單擊“打開”按鈕。2）在打開的模板“t2.dwt”中將插入點移動到需創(chuàng)建為可編輯區(qū)域的位置，或選擇要設(shè)置為可編輯區(qū)域的對象，如圖所示。82選擇要設(shè)置為可編輯區(qū)域的對象3）單擊“插入”→“模板”→“可編輯區(qū)域”命令，打開“新建可編輯區(qū)域”對話框，在“名稱”文本框中輸入可編輯區(qū)域的名稱，如圖所示。83“新建可編輯區(qū)域”對話框4）單擊“確定”按鈕，完成可編輯區(qū)域的創(chuàng)建，如圖所示。5）按組合快捷鍵Ctrl+S保存模板。84

新建的可編輯區(qū)域及代碼（2）刪除可編輯區(qū)域如果要將模板中標(biāo)記的可編輯區(qū)域變更為不可編輯區(qū)域，可在打開的模板中選中該可編輯區(qū)域，單擊“工具”→“模板”→“刪除模板標(biāo)記”命令即可。853.?模板的應(yīng)用（1）在“新建文檔”對話框中選擇模板創(chuàng)建網(wǎng)頁1）按組合快捷鍵Ctrl+N打開“新建文檔”對話框。2）在對話框左側(cè)的列表中選擇“網(wǎng)站模板”，在“站點”列表中選擇模板所在的站點moban，在“站點‘moban’的模板”列表中選要使用的模板“t2”，單擊“創(chuàng)建”按鈕，如圖所示。8687“新建文檔”對話框中選擇模板3）在代碼視圖中選中“可編輯區(qū)域”中“交通指南”的樣式引用代碼（class=?"wy_now02"），剪切并粘貼到“展館分布”的代碼中，實現(xiàn)“展館分布”網(wǎng)頁導(dǎo)航內(nèi)容的樣式引用效果，按組合快捷鍵Ctrl+S將文檔保存到站點根文件夾下，并命名為“gzzx_zgfb.html”，如圖所示。88

修改可編輯區(qū)域中“交通指南”的樣式引用代碼（2）在“資源”面板上選擇模板創(chuàng)建網(wǎng)頁1）選擇“窗口”→“資源”命令，打開“資源”面板。2）單擊面板左側(cè)的“模板”按鈕，其右側(cè)將顯示該站點中包含的所有模板。選擇所需的模板，如圖所示。89

在“資源”面板上選擇模板3）用鼠標(biāo)右鍵單擊所選擇的模板，在彈出的快捷菜單中選擇“從模板新建”命令，如圖所示。4）參照“新建文檔”對話框中選擇模板創(chuàng)建網(wǎng)頁的相關(guān)步驟編輯可編輯區(qū)域中的內(nèi)容，再保存文檔，完成網(wǎng)頁的創(chuàng)建。90選擇模板創(chuàng)建網(wǎng)頁4.?模板的管理模板的管理主要包括打開并編輯模板、更新模板、刪除模板和重命名模板等。（1）打開并編輯模板1）在“資源”面板中單擊面板左側(cè)的“模板”按鈕，“資源”面板會列出站點可用的所有模板并顯示當(dāng)前選定模板的預(yù)覽。912）執(zhí)行下列操作之一，可打開模板。①在模板上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中單擊“編輯”命令。②雙擊要編輯的模板打開模板。③選擇要編輯的模板，然后單擊“資源”面板底部的“編輯”按鈕。3）修改模板的內(nèi)容之后保存模板。92（2）更新模板在修改完模板并保存時，Dreamweaver?CC會彈出“更新模板文件”對話框，如圖所示，單擊“更新”按鈕可更新基于該模板創(chuàng)建的所有網(wǎng)頁；單擊“不更新”按鈕，則只保存模板而不更新基于該模板創(chuàng)建的網(wǎng)頁。93“更新模板文件”對話框（3）刪除模板在“資源”面板中選中不再需要的模板后按Delete鍵，會彈出如圖所示的提示框。如果確認(rèn)刪除模板，單擊“是”按鈕；如果不想刪除模板，單擊“否”按鈕。94“更新模板文件”對話框（4）重命名模板1）在“資源”面板上單擊模板的名稱以選擇模板。2）再次單擊模板的名稱，以使模板的名稱可選，然后輸入一個新名稱，按Enter鍵使更改生效。3）彈出如圖所示“更新模板文件”對話框，如果想更新站點中所有基于此模板的文檔，單擊“更新”按鈕；如果不想更新基于此模板的任何文檔，單擊“不更新”按鈕。95“更新模板文件”對話框二、庫項目1.?庫和庫項目的有關(guān)概念庫是一種特殊的Dreamweaver文件，其中包含可放置到網(wǎng)頁中的一組單個資源或資源副本。庫中的這些資源稱為庫項目，它是Dreamweaver?CC中自定義的網(wǎng)頁元素。每當(dāng)編輯某個庫項目時，可自動更新所有使用該項目的頁面。可在庫中存儲的庫項目包括文本、圖像、表格、聲音、表單、導(dǎo)航條等網(wǎng)頁元素。每當(dāng)需要某個庫項目時可直接從庫中調(diào)用。每當(dāng)編輯某個庫項目時，可以自動更新所有使用該庫項目的頁面。962.?庫項目的創(chuàng)建（1）在Dreamweaver?CC中打開網(wǎng)頁文件，單擊“窗口”→“資源”命令，打開“資源”面板。單擊左側(cè)導(dǎo)航欄中的“庫”按鈕，右側(cè)的面板顯示為“庫”面板，面板的上方為當(dāng)前庫項目的縮略圖，下方為庫項目的名稱。若當(dāng)前沒有庫項目，則均為空白，如圖所示。97“庫”面板（2）選中網(wǎng)頁中要創(chuàng)建為庫項目的網(wǎng)頁元素如網(wǎng)頁頭部，單擊“庫”面板下方的“+”按鈕，在打開的提示對話框中單擊“確定”按鈕，如圖所示。98創(chuàng)建庫項目（3）可看到“資源”面板生成的庫項目名稱顯示泛白效果（可編輯），用戶輸入所需的庫項目名稱，并按Enter鍵，這時會彈出“更新文件”對話框，根據(jù)情況選擇即可，如圖所示?？砂l(fā)現(xiàn)當(dāng)前站點中多了存放庫項目的文件夾“Library”，“資源”面板上多了庫項目“top”。99新創(chuàng)建的庫項目和“更新文件”對話框3.?庫項目的編輯在“庫”面板中要編輯的庫項目名上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“編輯”命令，可打開庫項目并在文檔窗口中修改。修改庫項目后進(jìn)行保存操作，會彈出“更新庫項目”對話框，單擊“更新”按鈕可以更新站點中使用了該庫項目的網(wǎng)頁。100任務(wù)2制作“觀眾中心”欄目框架網(wǎng)頁1011.?了解網(wǎng)頁中浮動框架的形式、作用和應(yīng)用。2.?能根據(jù)需要創(chuàng)建和保存浮動框架，創(chuàng)建浮動框架超鏈接。3.?能初步掌握浮動框架標(biāo)簽及屬性代碼的編輯方法。102本任務(wù)是一個浮動框架應(yīng)用實例（見下圖

）。通過本任務(wù)的學(xué)習(xí)，可以掌握利用“插入”面板、“屬性”面板、代碼視圖創(chuàng)建浮動框架并設(shè)置同時顯示多個網(wǎng)頁的方法和技巧，熟悉框架網(wǎng)頁布局技術(shù)。103104單擊鏈接“交通指南”效果單擊鏈接“展館分布”效果一、框架和框架集的概念框架是一種獨特的網(wǎng)頁布局技術(shù)，它能把瀏覽器窗口分割成多個相互獨立的區(qū)域，每個區(qū)域即為一個框架，并且各個框架可分別加載和展示不同的HTML文檔。而框架集本質(zhì)上是一個網(wǎng)頁文件，其主要職責(zé)是記錄網(wǎng)頁內(nèi)各個框架的詳細(xì)信息，涵蓋框架的布局架構(gòu)、在頁面中的具體位置以及尺寸大小等關(guān)鍵要素。105二、框架網(wǎng)頁的構(gòu)成與分類利用框架進(jìn)行布局設(shè)計的網(wǎng)頁被稱作框架網(wǎng)頁，它主要由框架（frame）和框架集（frameset）兩個核心部分共同組成。在過往的網(wǎng)頁設(shè)計中，BBS論壇頁面、網(wǎng)站的后臺管理頁面等常采用框架技術(shù)來構(gòu)建布局?？蚣懿季志哂幸欢ǖ膬?yōu)勢，例如其結(jié)構(gòu)清晰明了，便于網(wǎng)站管理者進(jìn)行內(nèi)容的組織與管理，在更新部分框架內(nèi)容時相對便捷，同時一些通用的框架布局還可在不同頁面中重復(fù)使用。然而，框架也存在明顯的缺點，需要同時加載多個框架的內(nèi)容，會導(dǎo)致頁面整體加載速度減慢。在維護(hù)方面，由于框架之間的關(guān)聯(lián)性，一旦出現(xiàn)問題，維護(hù)的難度較大。對于訪問者而言，難以直接將框架中顯示的單個網(wǎng)頁進(jìn)行收藏。106三、浮動框架（iframe）的特點與應(yīng)用在當(dāng)前的網(wǎng)頁設(shè)計中，浮動框架（iframe）是較為常用的一種技術(shù)。浮動框架也被稱為內(nèi)聯(lián)框架，它與普通框架有所不同。普通框架必須依托于框架集存在，并且其在頁面中的顯示位置相對固定。而浮動框架則無須框架集的支持，它不僅具備普通框架的基本功能，如在一個頁面中展示不同的文檔內(nèi)容，而且具有更高的靈活性。它可以在網(wǎng)頁內(nèi)的任意位置自由、獨立地嵌入，當(dāng)用戶點擊超鏈接后，能夠?qū)㈡溄禹撁娴膬?nèi)容直接顯示在當(dāng)前頁面的某個浮動框架內(nèi)，而無須重新打開瀏覽器窗口，從而有效地實現(xiàn)了在當(dāng)前網(wǎng)頁文檔中嵌入另一個網(wǎng)頁文檔的功能，在現(xiàn)代網(wǎng)頁布局中發(fā)揮著獨特且重要的作用。1071.浮動框架的形式打開應(yīng)用了浮動框架的網(wǎng)頁文件“gzzx.html”，單擊觀眾中心欄目導(dǎo)航菜單中的“交通指南”，預(yù)覽網(wǎng)頁，如圖所示。108單擊鏈接“交通指南”效果單擊觀眾中心欄目導(dǎo)航菜單中的“展館分布”，如圖所示。對比上圖和右圖所示效果，可以發(fā)現(xiàn)單擊觀眾中心欄目導(dǎo)航菜單中的各個欄目時，網(wǎng)頁窗口未切換，只是導(dǎo)航菜單對應(yīng)的網(wǎng)頁內(nèi)容依次出現(xiàn)在觀眾中心欄目導(dǎo)航菜單右側(cè)的區(qū)域中，這個區(qū)域就是浮動框架窗口。浮動框架的標(biāo)簽格式為：<iframesrc="URL"width="x"height="x"scrolling=""frameborder="x"name="main"></iframe>。109單擊鏈接“展館分布”效果2.

浮動框架標(biāo)簽的屬性浮動框架標(biāo)簽的常用屬性及說明見下表。110浮動框架標(biāo)簽的常用屬性及說明3.創(chuàng)建浮動框架的步驟（1）新建或打開一個HTML文檔，移動光標(biāo)至浮動框架出現(xiàn)的位置。（2）單擊“插入”→“HTML”→“IFRAME”命令，在光標(biāo)所在位置插入“<iframe>?</iframe>”標(biāo)簽。（3）在代碼視圖中修改“<iframe>”的屬性。（4）修改超鏈接及其“target”屬性。（5）保存并預(yù)覽效果。111項目八行為、Tab面板和CSS3動畫的應(yīng)用1121

制作網(wǎng)頁行為特效2制作滾動字幕和Tab面板目錄CONTENTS1133制作CSS3動畫任務(wù)1制作網(wǎng)頁行為特效1141.?了解行為、事件和動作的有關(guān)概念。2.?能用“行為”面板添加和編輯行為。3.?能用行為實現(xiàn)網(wǎng)頁動態(tài)效果。115本任務(wù)是一個動態(tài)網(wǎng)頁效果的制作實例（見下圖）。通過本任務(wù)的學(xué)習(xí)，可以掌握利用“行為”面板、“屬性”面板、代碼視圖添加行為并設(shè)置其屬性來制作網(wǎng)頁動態(tài)效果的過程、方法和技巧。116117“圖片放大”動態(tài)效果

“檢查表單”動態(tài)效果一、行為概述1.?行為的定義行為是Dreamweaver?CC預(yù)置的JavaScript程序庫。通過對網(wǎng)頁元素添加行為，可以在網(wǎng)頁中自動生成JavaScript代碼，方便地制作出打開瀏覽器窗口、播放聲音、縮放圖像、交換圖像等動態(tài)效果和簡單的交互功能，使制作的網(wǎng)頁更加生動精彩。1182.?與行為有關(guān)的概念（1）對象對象是產(chǎn)生行為的主體，大部分網(wǎng)頁元素都可以成為對象。（2）事件事件是觸發(fā)動態(tài)效果的條件，常用事件及其說明見下表。119常用事件及其說明120常用事件及其說明121常用事件及其說明（3）動作動作是一段預(yù)先編寫好的、能夠?qū)崿F(xiàn)某種動態(tài)效果的JavaScript代碼，是對事件的響應(yīng)。這些代碼在特定事件被激發(fā)時執(zhí)行，產(chǎn)生相應(yīng)的動態(tài)效果，常用動作及其作用見下表。122常用動作及其作用二、行為的應(yīng)用和管理使用“行為”面板可以方便地為網(wǎng)頁對象指定動作和事件，管理和應(yīng)用行為。1.?顯示“行為”面板（1）單擊“窗口”→“行為”命令，可打開“行為”面板，如圖所示。（2）按組合快捷鍵Shift+F，也可打開“行為”面板。123“行為”面板

2.?添加行為（1）新建或打開要添加行為的網(wǎng)頁文檔，單擊該文檔底部標(biāo)簽選擇器中的<body>標(biāo)簽，選擇需添加行為的對象如整個網(wǎng)頁，如圖所示。124在標(biāo)簽選擇器中選擇<body>標(biāo)簽（2）在“行為”面板上單擊“+”按鈕，在彈出的下拉菜單中選擇需要添加的動作，如“彈出信息”，如圖所示。（3）在打開的“彈出信息”對話框中輸入消息“歡迎光臨sweet?food！”，并單擊“確定”按鈕，如圖所示。125

添加動作“彈出信息”“彈出信息”對話框（4）在“行為”面板中單擊已添加動作左側(cè)的事件列表框，選擇所需的事件“onLoad”，如圖所示。（5）保存并預(yù)覽網(wǎng)頁，即可看到設(shè)置的彈出信息，如圖所示。126設(shè)置所需的事件“onLoad”網(wǎng)頁加載時的“彈出信息”動態(tài)效果3.?修改行為（1）選擇要修改的行為所屬的對象，如“交換圖像”，在“行為”面板的行為列表框中即可看到要修改的行為，如圖所示。127選擇行為所屬的圖像對象（2）雙擊要修改行為的動作的名稱“交換圖像”，在打開的對話框中重新選擇要交換的圖像，然后單擊“確定”按鈕，如圖所示。128

重新選擇要交換的圖像4.?刪除行為選擇要刪除行為所附加的對象，如標(biāo)簽<body>，在“行為”面板的行為列表框中可看到要刪除的行為如“彈出信息”，選中該行為，然后單擊“行為”面板上方的“刪除事件”按鈕，或直接按Delete鍵即可刪除，如圖所示。129刪除行為任務(wù)2制作滾動字幕和Tab面板1301.?掌握<marquee>標(biāo)簽的格式和屬性代碼的編輯方法。2.?掌握jQuery?UI?Tab面板的插入方法和樣式代碼的編輯方法。3.?能用<marquee>標(biāo)簽制作滾動字幕或滾動圖片。4.?能用jQuery?UI?Tab制作Tab面板。131本任務(wù)是一個滾動字幕和Tab面板的應(yīng)用實例（見下圖）。通過本任務(wù)的學(xué)習(xí)，可以掌握利用“插入”面板、“屬性”面板、代碼視圖來制作滾動字幕和Tab面板的過程及方法，了解滾動字幕和Tab面板的工作原理，為學(xué)習(xí)動態(tài)網(wǎng)頁的制作打好基礎(chǔ)。132133滾動字幕效果（圖片向左滾動）Tab面板效果一、滾動字幕1.?滾動字幕的定義滾動字幕是指在網(wǎng)頁中上下滾動或左右滾動的字幕，可以是文字，也可以是圖片，滾動字幕效果可以用<marquee>標(biāo)簽實現(xiàn)。2.?<marquee>標(biāo)簽的格式1343.?<marquee>標(biāo)簽的屬性<marquee>標(biāo)簽的常用屬性、取值及說明見下表。135<marquee>標(biāo)簽的常用屬性、取值及說明136<marquee>標(biāo)簽的常用屬性、取值及說明4.?滾動字幕的制作步驟（1）在設(shè)計視圖中插入滾動的字幕內(nèi)容，如文本、圖片。（2）在代碼視圖中插入<marquee>標(biāo)簽，并設(shè)置屬性參數(shù)。137二、Tab面板1.?Tab面板的作用Tab面板用于內(nèi)容分類，以節(jié)省屏幕空間，通過單擊每個Tab的標(biāo)題來訪問該Tab面板的內(nèi)容。2.?Tab面板的分類根據(jù)Tab面板在網(wǎng)頁界面中所處的位置不同，可以把Tab面板分為頂部欄Tab面板、側(cè)邊欄Tab面板和底部欄Tab面板。3.?Tab面板的狀態(tài)Tab面板有選中和非選中兩種狀態(tài)，為了凸顯Tab面板的選中狀態(tài)，可以通過改變顏色、放大字號、添加線條、增加背景色等來實現(xiàn)。1384.?插入jQuery?UI?Tab面板的步驟（1）新建或打開要插入jQuery?UI?Tab面板的網(wǎng)頁文件。（2）把光標(biāo)置于頁面要插入jQuery?UI?Tab面板的位置，然后選擇“插入”面板中的“jQuery?UI”下的“Tabs”按鈕，在頁面當(dāng)前位置插入一個Tab面板，如圖所示。139插入jQueryUITab面板任務(wù)3

制作CSS3動畫1401.?了解通過CSS3的轉(zhuǎn)換屬性、過渡屬性和動畫屬性生成CSS3動畫的原理和方法。2.?能制作變形動畫和旋轉(zhuǎn)動畫效果。3.?能制作輪播圖動畫效果。141本任務(wù)是一個CSS3動畫的制作實例（見下圖）。通過本任務(wù)的學(xué)習(xí)，可以掌握利用CSS3的轉(zhuǎn)換屬性、過渡屬性和動畫屬性來制作變形動畫、旋轉(zhuǎn)動畫、輪播圖的過程及方法。142143變形動畫效果a）變形前?b）變形后旋轉(zhuǎn)動畫效果a）旋轉(zhuǎn)前?b）旋轉(zhuǎn)后144輪播圖效果一、CSS3的過渡屬性利用CSS3的過渡屬性，可以為網(wǎng)頁元素從一種樣式轉(zhuǎn)變?yōu)榱硪环N樣式時添加顏色和形狀的變換等效果。145CSS3的過渡屬性見下表。146CSS3的過渡屬性147CSS3的過渡屬性二、CSS3的轉(zhuǎn)換屬性在CSS3中，通過轉(zhuǎn)換屬性可以對元素進(jìn)行移動、縮放、轉(zhuǎn)動、拉長或拉伸等變形效果。CSS3的2D變形屬性見下表。148SS3的2D變形屬性三、CSS3的動畫屬性1.?定義關(guān)鍵幀（1）格式應(yīng)用舉例（2）作用上面的代碼定義了三個關(guān)鍵幀，每幀中設(shè)置left和top屬性，改變left和top的值可產(chǎn)生動畫效果。1492.?設(shè)置動畫屬性CSS3的動畫屬性見下表。150CSS3的動畫屬性151CSS3的動畫屬性項目九網(wǎng)頁制作綜合實訓(xùn)1521

網(wǎng)站策劃和首頁制作2網(wǎng)站測試、發(fā)布、維護(hù)和推廣目錄CONTENTS153任務(wù)1

網(wǎng)站策劃和首頁制作1541.?了解網(wǎng)站開發(fā)流程和規(guī)范。2.?能合理規(guī)劃和設(shè)計網(wǎng)站的風(fēng)格、欄目結(jié)構(gòu)、目錄結(jié)構(gòu)及鏈接結(jié)構(gòu)。3.?能依據(jù)網(wǎng)站首頁效果圖設(shè)計首頁的結(jié)構(gòu)布局。4.?能依據(jù)網(wǎng)站首頁效果圖設(shè)計、制作并美化首頁。155本任務(wù)是一個旅游網(wǎng)網(wǎng)站策劃和首頁制作實例（見右圖）。通過本任務(wù)的學(xué)習(xí)，可以掌握綜合利用Dreamweaver?CC、HTML和CSS3制作并美化網(wǎng)站首頁的過程及方法，熟悉網(wǎng)站的開發(fā)流程。156首頁效果一、網(wǎng)站的開發(fā)過程每個網(wǎng)站的主題、內(nèi)容、規(guī)模、功能等雖然各有不同，但其基本開發(fā)流程大致都分為三個階段，即前期、中期、后期，如圖所示。157網(wǎng)站的開發(fā)過程二、網(wǎng)站開發(fā)的基本命名規(guī)范網(wǎng)站中所有文件、文件夾、CSS類的命名應(yīng)規(guī)范，盡量做到字母數(shù)量少，能見名知意，容易理解。文件夾的常用名稱見下表。158文件夾的常用名稱CSS樣式表文件的常用文件名見下表。159CSS樣式表文件的常用文件名CSS樣式的類和ID標(biāo)識的常用名稱見下表。160CSS樣式的類和ID標(biāo)識的常用名稱161CSS樣式的類和ID標(biāo)識的常用名稱網(wǎng)頁圖片的常用名稱見下表。162網(wǎng)頁圖片的常用名稱三、網(wǎng)頁版面與廣告的基本尺寸規(guī)范1.?網(wǎng)頁版面的基本尺寸規(guī)范（1）網(wǎng)頁的寬度制作網(wǎng)頁時，如果按照分辨率1?024像素

×768像素的規(guī)格來設(shè)計網(wǎng)頁，頁面寬度一般不超過一屏，網(wǎng)頁的寬度通常設(shè)置為1?000像素左右。如果網(wǎng)頁左、右設(shè)置邊距，則網(wǎng)頁的寬度為（1?000像素-左邊距-

右邊距）。163（2）網(wǎng)頁的長度從理論上來講，網(wǎng)頁的長度可以是無限長的，但一般不宜超過三屏，太長的話也不方便瀏覽者查找自己想要的內(nèi)容。（3）網(wǎng)頁的文件大小一般地，網(wǎng)站的首頁大小不宜超過30?KB，網(wǎng)站的二級頁面的文件不宜超過45?KB。1642.?網(wǎng)頁廣告的基本尺寸規(guī)范一般來說，網(wǎng)頁廣告都有一定的規(guī)格要求，網(wǎng)頁廣告的基本尺寸規(guī)范見下表。165網(wǎng)頁廣告的基本尺寸規(guī)范四、需求分析與規(guī)劃1.?需求分析和網(wǎng)站主題本項目制作的網(wǎng)站是一個與旅游有關(guān)的網(wǎng)站，主要目的是展示九州本地特色。該類網(wǎng)站的用戶群廣泛，面向全部互聯(lián)網(wǎng)用戶。從網(wǎng)站內(nèi)容來說，作為旅游網(wǎng)，用戶從其首頁上最想知道的信息是當(dāng)?shù)靥鞖狻⑼扑]路線、景點介紹、酒店介紹、當(dāng)?shù)孛朗辰榻B等。1662.?網(wǎng)站風(fēng)格網(wǎng)站介紹的是一個水清、沙白、天藍(lán)的旅游勝地，所以網(wǎng)站選擇了藍(lán)色作為主色調(diào)，該色調(diào)也與網(wǎng)站的logo相協(xié)調(diào)；橘色為輔助色，讓頁面顯得有層次、不呆板；推薦景點用圖片列表的方式顯示；旅游資訊用新聞列表的方式顯示，整體設(shè)計效果圖如圖所示。167首頁效果3.?首頁布局九州旅游網(wǎng)首頁結(jié)構(gòu)略顯復(fù)雜，為綜合布局方法，以浮動布局為主，如圖所示。168“九州旅游網(wǎng)”首頁結(jié)構(gòu)任務(wù)2網(wǎng)站測試、發(fā)布、維護(hù)和推廣1691.?了解網(wǎng)站發(fā)布的有關(guān)概念和域名的申請流程及方法。2.?掌握網(wǎng)站測試、發(fā)布、維護(hù)、推廣的流程和方法。3.?能測試、發(fā)布、維護(hù)和推廣網(wǎng)站。170本任務(wù)是一個站點測試、發(fā)布、維護(hù)和推廣的實例（見下圖）。通過本任務(wù)的學(xué)習(xí)，可以掌握站點管理、發(fā)布和鏈接的檢查及對網(wǎng)頁進(jìn)行兼容性測試的過程和方法，熟悉域名的注冊、虛擬機(jī)的申請以及站點的維護(hù)和推廣技巧。171用Google?Chrome瀏覽器預(yù)覽網(wǎng)頁172網(wǎng)站中文件的鏈接檢查效果

遠(yuǎn)程服務(wù)器一、站點的測試1.?瀏覽器兼容性測試目前主流的瀏覽器有Google、Firefox、Microsoft?Edge等，這些瀏覽器對HTML和CSS等的支持情況是不同的，因此，站點應(yīng)針對主流的瀏覽器進(jìn)行兼容性測試。1732.?超鏈接完好性測試用戶最不愿意訪問經(jīng)常出現(xiàn)“找不到網(wǎng)頁”的問題網(wǎng)站，作為網(wǎng)站開發(fā)及維護(hù)人員，必須學(xué)會檢測站點中超鏈接的有效性。3.?平臺兼容性測試應(yīng)在不同操作系統(tǒng)上使用不同的分辨率對網(wǎng)站進(jìn)行兼容性測試，觀察網(wǎng)站中的文字、圖片、動畫、表單或者視頻等網(wǎng)頁元素是否能正常顯示，網(wǎng)頁欄目板塊是否有錯位現(xiàn)象。174二、網(wǎng)站發(fā)布的有關(guān)概念1.?InternetInternet全稱Internetwork，中文名為因特網(wǎng)。它集現(xiàn)代計算機(jī)技術(shù)與通信技術(shù)之大成，基于TCP/IP協(xié)議，把全球不同國家、地區(qū)、部門以及不同類型的計算機(jī)，還有國家骨干網(wǎng)、廣域網(wǎng)、局域網(wǎng)，借助網(wǎng)絡(luò)互聯(lián)設(shè)備相互連接，形成了全球最大的開放式計算機(jī)網(wǎng)絡(luò)。1752.?IP地址和域名IP地址（internet?protocol?address）由一組數(shù)字和小圓點組合而成，用于在網(wǎng)絡(luò)中標(biāo)識計算機(jī)的位置，每臺主機(jī)在因特網(wǎng)上都有唯一的地址。其由4個小于256的數(shù)字構(gòu)成，數(shù)字間用點隔開。在瀏覽器地址欄輸入網(wǎng)站所在服務(wù)器的IP地址，就能訪問該網(wǎng)站。3.?Web服務(wù)器Web服務(wù)器，也叫WWW（world?wide?web）

服務(wù)器，是在Internet上擁有獨立IP地址的計算機(jī)，主要功能是依據(jù)Web瀏覽器的請求，向Internet上的客戶機(jī)提供WWW、e-mail和FTP等服務(wù)。1764.?虛擬主機(jī)虛擬主機(jī)（virtual?host）又稱虛擬空間，它具有獨立的域名和IP地址，可用于存放網(wǎng)站資源，并具備完整的Internet服務(wù)器功能。5.?域名解析和域名綁定域名

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論