實戰(zhàn)Dreamweaver CC 網頁制作教程 第4版 課件 第10-12章 常見動態(tài)特效的制作、站點的發(fā)布與維護、綜合站點制作_第1頁
實戰(zhàn)Dreamweaver CC 網頁制作教程 第4版 課件 第10-12章 常見動態(tài)特效的制作、站點的發(fā)布與維護、綜合站點制作_第2頁
實戰(zhàn)Dreamweaver CC 網頁制作教程 第4版 課件 第10-12章 常見動態(tài)特效的制作、站點的發(fā)布與維護、綜合站點制作_第3頁
實戰(zhàn)Dreamweaver CC 網頁制作教程 第4版 課件 第10-12章 常見動態(tài)特效的制作、站點的發(fā)布與維護、綜合站點制作_第4頁
實戰(zhàn)Dreamweaver CC 網頁制作教程 第4版 課件 第10-12章 常見動態(tài)特效的制作、站點的發(fā)布與維護、綜合站點制作_第5頁
已閱讀5頁，還剩149頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

學習目標

能夠在標題欄設置動態(tài)效果能夠在狀態(tài)欄設置動態(tài)效果能夠制作出“添加到收藏夾”的功能能夠在網頁中顯示獲取的系統(tǒng)時間和日期10.1.1案例制作：為網頁“詩詞新苑”制作動態(tài)效果最終效果如圖所示。10.1.1案例制作：為網頁“詩詞新苑”制作動態(tài)效果1）定義站點。新建文件夾“ShiciXinyuan”，將素材中所有的文件和文件夾拷貝到“ShiciXinyuan”文件夾。在DreamweaverCC2015中新建站點，站點名稱為“詩詞新苑”，站點文件夾定義為文件夾“ShiciXinyuan”。2）設置添加到收藏夾。假如本網站的網址為http://www.SCXY.com，打開index.html文件，選擇文本“添加收藏”，切換到代碼視圖，將“添加收藏”前后輸入如下代碼。<ahref="javascript:window.external.AddFavorite('http://www.SCXY.com','詩詞新苑')">加入收藏</a>3）切換到設計視圖，“添加收藏”如圖所所示，“添加收藏”是一個超鏈接，可以使用偽錨記CSS規(guī)則美化。10.1.1案例制作：為網頁“詩詞新苑”制作動態(tài)效果4）創(chuàng)建偽錨記CSS規(guī)則①添加a:link選擇器。在“屬性”窗格中將“Font-size”設置為“13px”；“Color”設置為“#FFFFFF”；“Text-decoration”設置為“none”。③添加a:visited選擇器。在“屬性”窗格中將“Font-size”設置為“13px”；“Color”設置為“#FFFFFF”；“Text-decoration”設置為“none”。④添加a:hover選擇器。在“屬性”窗格中將“Font-size”設置為“13px”；“Color”設置為“#F8FF00”；“Text-decoration”設置為“none”。⑤添加a:active選擇器。在“屬性”窗格中將“Font-size”設置為“13px”；“Color”設置為“#F8FF00”；“Text-decoration”設置為“underline”。“添加收藏”如圖所示。10.1.1案例制作：為網頁“詩詞新苑”制作動態(tài)效果5）保存，預覽，點擊“添加收藏”，會打開“添加收藏”對話框，點擊“確定”按鈕，可以將本網站添加到收藏夾。10.1.1案例制作：為網頁“詩詞新苑”制作動態(tài)效果6）設置標題欄動態(tài)效果。切換到代碼視圖，將光標定位在<head></head>標簽之間，輸入如下代碼：<scriptlanguage="javascript">a="::::::::詩詞新苑歡迎您!::::::::"

functiontitle(){a=a+a.substring(0,1)a=a.substring(1,a.length)document.title=asetTimeout("title()",500)}title()</script>10.1.1案例制作：為網頁“詩詞新苑”制作動態(tài)效果7）設置背景音樂。將光標定位在<head></head>標簽之間，輸入如下代碼：<bgsoundloop="-1"src="other/bgmusic.mp3"/>8）預覽，觀察效果，同時，可以聽到背景音樂的聲音。到此本實例制作完畢。

1.什么是腳本腳本語言是一種在互聯網上廣為傳播、使用的特效程序語言，是一種不需要編譯的語言。網頁中常用的有JavaScript和VBScript兩種。JavaScript自身具有高效代碼和開放性，基于客戶端瀏覽器，具有簡單性、動態(tài)性、跨平臺性、節(jié)省CGI的交互時間等特點，得到了廣泛應用。

2.Script腳本的插入與應用在<head>與</head>之間插入JavaScript腳本，JavaScript腳本要放在<scriptlanguage="jscript"></script>標簽中間。例如案例制作中設置動態(tài)狀態(tài)欄和背景音樂的腳本代碼的插入。10.1.2新知解析

3.常見的Script腳本腳本特效（１）添加到收藏夾代碼如下。

<a

href="javascript:window.external.addfavorite('','天鵝大觀')"class="STYLE1">添加到收藏夾</a>該代碼是將網址為“”、網頁的標題為“天鵝大觀”的網站的首頁添加到收藏夾中。其中，STYLE1是網頁中創(chuàng)建的樣式。只要替換網址和標題名稱即可。（2）標題欄與狀態(tài)欄走馬燈效果將光標定位在<head></head>標簽之間，輸入代碼即可。標題欄走馬燈效果的代碼如下：

<SCRIPTlanguage=JavaScript>

a="::::::::歡迎來到天鵝大觀網站!::::::::"

//為變量a賦值.。

functionbb()//定義函數bb（）

{

a=a+a.substring(0,1)

//將變量a與從變量a中取出的字符串相連，并賦給變量a，

//其中，a.substring(0,1)表示從變量a中取字符串，從第0個

//字符開始取1個字符。

a=a.substring(1,a.length)//從字符串變量a中取字符串，從第1開始取，共取a.length個，

//其中，a.length表示字符變量a的長度。

document.title=a//將變量a賦給標題欄變量。

setTimeout("bb()",500)

//每隔500毫秒刷新一次函數bb()。

}

bb()//調用函數bb()。

</script>（4）獲取顯示當前系統(tǒng)時間和日期為了方便用戶查看當前日期與時間，在狀態(tài)欄顯示當前日期與時間，可以在網頁中<head></head>標簽內輸入如下代碼。

<SCRIPTlanguage=JavaScript>

<!--

functionshijian()//定義shijian()函數

{

today=newDate();//創(chuàng)建當前日期對象today

varweek_day;//定義星期幾的變量

vardate;

//定義日期變量

if(today.getDay()==0)//判斷獲取星期的值，如果為0，則為week_day賦值“星期日”。

week_day="星期日"

if(today.getDay()==1)//如果為1，則為week_day賦值“星期一”。

week_day="星期一"

if(today.getDay()==2)//如果為2，則為week_day賦值“星期二”。

week_day="星期二"

if(today.getDay()==3)//如果為3，則為week_day賦值“星期三”。

week_day="星期三"

if(today.getDay()==4)//如果為4，則為week_day賦值“星期四”。

week_day="星期四"

if(today.getDay()==5)//如果為5，則為week_day賦值“星期五”。

week_day="星期五"if(today.getDay()==6)//如果為6，則為week_day賦值“星期六”。

week_day="星期六"

date=(today.getYear())+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日";//getYear()獲取年份，getMonth()獲取月份，getDate()獲取日期

h=today.getHours()//getHours()獲取時；m=today.getMinutes()//getMinutes()獲取分；s=today.getSeconds()//getSeconds()獲取秒； if(h<=9)//如果時小于9，則小時前補0；h="0"+hif(m<=9)//如果分小于9，則分前補0；

m="0"+m

if(s<=9)//如果秒小于9，則秒前補0；

s="0"+s

time=h+":"+m+":"+s

//將變量h（時）的值、變量m（分）的值、s變量（秒）的值賦

//給變量time；

window.status="當前時間："+date+week_day+""+time

//輸出日期與時間；

setTimeout("shijian()",1000)

}

shijian()//調用shijian()函數；

//-->

</SCRIPT>如果要在網頁中顯示時間可以將window.status="當前時間："+date+week_day+""+time和setTimeout("shijian()",1000)這兩行代碼換為document.write("<spanclass='style1'>"+"當前時間"+date+week_day+""+time+"</span>")，在相應的位置輸入上述代碼即可。其中style1為網頁中創(chuàng)建的樣式。10.1.3實戰(zhàn)演練：為“玫瑰文化”網頁添加動態(tài)效果最終效果如圖所示。10.1.3實戰(zhàn)演練：為“玫瑰文化”網頁添加動態(tài)效果1）定義站點。新建文件夾“MeiGui”，將素材中所有的文件和文件夾拷貝到“MeiGui”文件夾。在DreamweaverCC2015中新建站點，站點名稱為“玫瑰文化”，站點文件夾定義為文件夾“MeiGui”。2）設置標題欄動態(tài)效果。將光標定位在<head></head>標簽之間，輸入如下代碼，保存，預覽。10.1.3實戰(zhàn)演練：為“玫瑰文化”網頁添加動態(tài)效果<scriptlanguage="jscript">a="::::::::歡迎來到玫瑰文化網站首頁!::::::::"

functionbb(){a=a+a.substring(0,1)a=a.substring(1,a.length)document.title=asetTimeout("bb()",500)}bb()</script>10.1.3實戰(zhàn)演練：為“玫瑰文化”網頁添加動態(tài)效果3）設置狀態(tài)欄動態(tài)時間效果。將光標定位在<head></head>標簽之間，輸入代碼。保存，預覽。4）設置背景音樂。將光標定位在<head></head>標簽之間，輸入以下代碼，保存，預覽。<bgsoundloop="-1"src="others/bgsound.mp3"/>5）預覽效果，到此本實例制作完畢。學習目標能夠使用文件面板管理站點能夠進行文件的上傳與下載11.1站點的管理11.2站點測試11.3文件的上傳與下載本章內容11.1站點的管理在定義站點時，站點設置對象包括站點、服務器、版本控制和高級設置。1.定義本地站點。單擊菜單命令“站點”→“新建站點”，在打開的站點設置對象對話框中有4個選項，在“站點”選項下，可以設置本地站點的名稱和指定站點文件夾，如圖所示。11.1.1定義站點11.1站點的管理2.設置遠程服務器當本地站點制作完成、并進行測試成功后，就需要將站點上傳到互聯網上的遠程站點上。在上傳前，需要對遠程站點進行相應的設置。這就需要在站點設置對象對話框中選擇“服務器”選項。可以單擊菜單命令“站點”→“管理站點”，在打開的“管理站點”對話框中選擇要編輯的站點“極地動物”，單擊編輯當前選定的站點按鈕。11.1.1定義站點11.1站點的管理2.設置遠程服務器在接下來打開的站點設置對象對話框中選擇第2個選項“服務器”，單擊頁面左下角的加號按鈕，添加新服務器。11.1.1定義站點11.1站點的管理2.設置遠程服務器對服務器的設置有“基本”和“高級”兩個部分?！盎尽痹O置主要是對服務器的名稱、連接方法等進行設置。一般地，服務器默認的連接方法為FTP連接。其他的連接方法還有SFTP、本地/網絡、WebDAV和RDS，如圖所示。如果需要進一步設置，可以展開“更多選項”欄進行設置。在此選擇FTP，服務器名稱可以任意選取，在FTP地址欄中輸入申請空間的IP地址或域名，再輸入申請的用戶名和密碼，單擊“測試”按鈕，測試連接是否成功。若連接成功，則出現“Dreamweaver已成功連接到您的Web服務器”的對話框，單擊“確認”按鈕即可完成設置。11.1.1定義站點11.1站點的管理2.設置遠程服務器

11.1.1定義站點11.1站點的管理2.設置遠程服務器“高級”設置是對遠程服務器和測試服務器的服務器模型進行設置，如圖所示。如果您在小組環(huán)境中工作（或獨自工作但使用幾臺不同的計算機），則選擇“啟用文件取出功能”，并設置取出名稱和電子郵件地址。如果希望對網站禁用文件存回和取出，請取消選擇此選項。11.1.1定義站點11.1站點的管理3.版本控制設置第3個選項為“版本控制”，用戶可以設置使用Subversion（SVN）獲取和存回文件。Subversion是一種版本控制系統(tǒng)，它使用戶能夠協作編輯和管理遠程Web服務器上的文件。Dreamweaver不是一個完整的Subversion（SVN）客戶端，但卻可使用戶獲取文件的最新版本、更改和提交文件。11.1.1定義站點11.1站點的管理4.高級設置前面講解的站點設置是站點的基本設置，主要是針對初學者快速建立站點。高級設置可以對初步設置的站點進行進一步的細化設置。這個選項包含“本地信息”、“遮蓋”、“設計備注”、“文件視圖列”、“Contribute”、“模板”“jQuery”、“Web字體”、“EdgeAnimate資源”的設置。“本地信息”選項如圖所示。其余的幾個選項可根據用戶的需要進行設置選定。11.1.1定義站點11.1站點的管理4.高級設置

11.1.1定義站點11.1站點的管理單擊菜單命令“站點”→“管理站點”，打開“管理站點”對話框，如圖所示，可以對站點進行新建、編輯、復制、刪除、導入、導出等操作。11.1.2管理站點11.1站點的管理1.“文件”面板單擊菜單命令“窗口”→“文件”，可以打開“文件”面板。當在DreamweaverCC中定義好一個站點后，“文件”面板中便列出了所定義的站點中包含的所有內容。11.1.3利用“文件”面板管理文件11.1站點的管理2.“文件”面板實現的功能（1）打開文件。在“文件”面板中雙擊文件圖標，或右鍵單擊該文件，在彈出菜單中選擇“打開”命令。（2）新建文件或文件夾。在“文件”面板中右鍵單擊空白處或單擊面板右上角的按鈕，在彈出菜單中選擇“新建文件”或“新建文件夾”命令。同樣，按照此操作方法，可以完成對站點文件的復制、刪除、重命名等操作。（3）切換站點。當定義了多個站點后，當要選擇某個站點為當前站點時，可單擊“文件”面板第2行左側站點選擇列表進行選擇。11.1.3利用“文件”面板管理文件11.1站點的管理2.“文件”面板實現的功能（4）刷新站點文件列表。在“文件”面板中單擊刷新按鈕，對站點列表進行刷新。本操作是為了刷新遠程目錄列表，以達到和遠程目錄同步的目的。（5）檢查單個/多個網頁文件的鏈接或整個站點的鏈接。在“文件”面板“本地視圖”下，選取需要檢查鏈接的文件，單擊右鍵，在彈出的快捷菜單中選擇“檢查鏈接”→“選擇文件/文件夾”，進行檢測，結果會顯示在“結果”窗口中，如圖所示。11.1.3利用“文件”面板管理文件11.1站點的管理2.“文件”面板實現的功能在“文件”面板中選擇站點，單擊右鍵，在彈出的快捷菜單中選擇“檢查鏈接”→“整個本地站點”命令，則對整個站點進行鏈接檢測。在“鏈接檢查器”面板中，從“顯示”的下拉菜單中選擇“外部鏈接”或“孤立的文件”，如圖所示。若要保存檢查的報告，請單擊“鏈接檢查器”面板中的“保存報告”按鈕。11.1.3利用“文件”面板管理文件11.1站點的管理2.“文件”面板實現的功能（6）上傳和下載站點文件。DreamweaverCC中內置了FTP功能，可以直接將本地站點內的文件傳輸到遠程服務器上（即上傳），或從服務器上獲取文件（即下載）。在“文件”面板中的站點下拉列表中選擇需要上傳的站點，單擊連接到遠程服務器按鈕，建立與遠程服務器的連接，然后選中要上傳的文件，單擊上傳按鈕，當出現提示上傳任何從屬文件時單擊“確定”按鈕，即可上傳文件。下載文件和上傳文件步驟相似，但需要注意的是，在使用文件的上傳和下載功能之前，必須先定義遠程服務器。11.1.3利用“文件”面板管理文件11.2站點測試當一個站點制作完成后，在上傳之前，需要對站點進行檢測，以便發(fā)現錯誤并進行修改。Dreamweaver能夠自動檢測網站內部的網頁文件，并生成關于文件信息、HTML代碼信息的報告。打開站點中的任意一個頁面，單擊菜單命令“站點”→“報告”，彈出報告對話框，在“報告在”下拉列表中選擇“整個當前本地站點”，在“選擇報告”的“HTML報告”項下勾選各復選框，單擊“運行”按鈕，如圖所示。

Dreamweaver會對整個檢點進行檢查，檢查完畢自動打開“站點報告”面板，顯示檢查結果11.2.1創(chuàng)建站點報告11.2站點測試

在DreamweaverCC中可以清理一些不必要的HTML語句，也可以清理由Word生成的HTML文件。1.清理不必要的HTML語句單擊菜單命令“命令”→“清理HTML命令”，在彈出的對話框中進行設置，單擊“確定”按鈕，會彈出顯示清理結果的對話框。11.2.2清理文檔11.2站點測試（2）清理由Word生成的HTML文件單擊菜單命令“命令”→“清理Word生成的HTML”，在彈出的對話框的“基本”選項卡和“詳細”選項卡中進行設置。11.2.2清理文檔11.2站點測試在“文件”面板中選擇站點，單擊右鍵，在彈出的快捷菜單中選擇“檢查鏈接”→“選擇文件/文件夾”或“整個本地站點”命令，則對整個站點進行鏈接檢測。在“鏈接檢查器”面板中，從“顯示”的下拉菜單中選擇檢查的類型，檢查結果會顯示在“鏈接檢查器”面板中。11.2.3檢查網頁鏈接11.3文件的上傳與下載網站空間是指遠程服務器中的用于存放網頁的硬盤空間。本案例將在“浦東信息港”網站上申請免費網站空間。1）在瀏覽器地址欄中輸入網址“/”，進入網站“浦東信息港”主頁。11.3.1案例制作：申請空間11.3文件的上傳與下載2）在網站的左上角的用戶登錄板塊單擊“注冊”按鈕進行會員注冊。注冊成功后，會返回FTP密碼。接著以注冊的信息進行登錄。11.3.1案例制作：申請空間11.3文件的上傳與下載3）單擊菜單“免費空間”，在頁面中選擇“海外免費免備案產品（200M）”產品，單擊“立即開通”。11.3.1案例制作：申請空間11.3文件的上傳與下載4）在出現的虛擬主機申請單中輸入綁定域名、FTP密碼，勾選“我已閱讀并接受虛擬主機租用協議”，單擊“確認申請”按鈕。11.3.1案例制作：申請空間11.3文件的上傳與下載5）接下來彈出一個提示窗口，提示進入審核流程。當審核成功后，網站會給注冊的郵箱發(fā)送一個業(yè)務開通通知。11.3.1案例制作：申請空間11.3文件的上傳與下載6）輸入網址“/”，進入“浦東信息港”主頁，以注冊的會員名登錄，進入管理首頁-業(yè)務管理-免費空間-控制面板-輸入驗證碼-確認登錄-進入控制面板產品管理頁面，單擊“FTP信息”按鈕查看信息。11.3.1案例制作：申請空間11.3文件的上傳與下載1.網站空間的獲取獲取網站空間的方法一般有以下幾種。（1）申請免費主頁空間現在國內提供免費主頁空間的網站越來越少，容量卻有限。（2）付費空間付費空間有以下幾種形式：。1）主機托管2）主機租用3）虛擬主機11.3.2新知解析11.3文件的上傳與下載2.域名申請域名是一種Internet用于解決地址對應問題的一種方法。域名的形式是以若干英文字母和數字組成，由“.”分隔成幾個部分。目前國內域名注冊統(tǒng)一由中國互聯網絡信息中心（CNNIC）進行管理，具體注冊工作通過CNNIC論證授權的各代理商執(zhí)行。要申請一個與自己網站相符的域名，需向域名代理機構提出申請。一些提供免費主頁空間的網站，在你申請免費網頁空間時會免費提供一個域名。11.3.2新知解析11.3文件的上傳與下載3.上傳/下載文件一般可以利用提供免費空間的站點的“網站空間管理”面板來完成，也可以利用Dreamweaver提供的上傳/下載功能來完成。11.3.2新知解析11.3文件的上傳與下載（1）遠程站點的設置在DreamweaverCC中，單擊菜單命令“站點”→“管理站點”，在彈出的對話框中選擇要上傳的站點“極地動物”,單擊編輯當前選定的站點按鈕，進入站點設置對象對話框，單擊“服務器”選項，在左下部單擊添加新服務器按鈕進行相應的設置。11.3.3實戰(zhàn)演練：上傳下載網站11.3文件的上傳與下載（1）單擊“測試”按鈕，若測試成功的話，出現如圖11-25所示的對話框，單擊“確定”按鈕。接著單擊“保存”按鈕就完成了遠程服務器的設定，可以進行網頁上傳了。11.3.3實戰(zhàn)演練：上傳下載網站11.3文件的上傳與下載（2）網頁上傳回到“文件”面板，單擊“展開以顯示本地和遠端站點”按鈕展開“文件”面板，單擊遠程連接圖標就開始自動連接遠程主機。如果連接成功，“文件”面板將在左邊欄目中列出遠程站點的所有文件和文件夾，如圖所示。11.3.3實戰(zhàn)演練：上傳下載網站11.3文件的上傳與下載（2）在“文件”面板中選擇要上傳的文件，單擊按鈕，文件即可上傳，上傳的過程中會出現進度提示，如圖所示。11.3.3實戰(zhàn)演練：上傳下載網站11.3文件的上傳與下載（2）當所有內容都放到遠程空間后，左側的遠程服務器端顯示站點內容。所有的內容放在wwwroot根目錄下。11.3.3實戰(zhàn)演練：上傳下載網站11.3文件的上傳與下載（3）服務器端查看站點效果在瀏覽器地址欄中輸入“82/wwwroot/”，按回車鍵，頁面如圖所示。雙擊文件“index.html”，瀏覽者就能通過瀏覽器觀看遠程服務器端的網站效果了。（4）在文件面板上單擊下載按鈕，遠程站點的文件即可下載到本地站點。還可以選中站點，單擊按鈕與遠程服務器進行同步。11.3.3實戰(zhàn)演練：上傳下載網站學習目標了解如何規(guī)劃網站、組織素材及制作網站的流程掌握網站布局的方法和實用技巧掌握如何在網頁中添加動態(tài)特效代碼12.1案例制作：網站“蝴蝶谷”12.2案例制作：網站“葆偉汽車”本章內容12.1案例制作：網站“蝴蝶谷”最終效果如圖所示。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”最終效果如圖所示。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（1）準備素材當我們制作一個主題網站時，第1步是收集相關的圖片與文字，同時還要對網站的制作形式和色彩進行構思，根據需求確定網站的布局模式、色調和組成版塊，重點是對首頁進行規(guī)劃。網頁的布局結構可以借鑒一些比較優(yōu)秀的網站。第2步就是合成素材。一般我們收集的素材往往滿足不了我們的需求，尤其要制作有藝術感的網站。這時就需要借助圖形圖像處理軟件Photoshop進行素材的合成和色調處理，并保存為jpg或gif格式文件。還需借助動畫制作軟件Flash制作一些小的動畫，并生成“.swf”格式文件。無論是合成圖像還是Flash動畫，它們的制作尺寸都是根據網頁的布局尺寸確定的。在本網站中，需要應用Photoshop合成頭部的背景圖片、導航菜單圖片、兩個欄目的背景圖片、歡迎介紹圖片及各欄目頭圖片。用Flash制作網頁頭部動畫和蝴蝶宣傳動畫。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（2）規(guī)劃站點新建文件夾hudie,在文件夾中新建image、file、other三個子文件夾。image文件夾將放置所有圖片素材，站點中除主頁以外的所有網頁文件將放置在file文件夾中，其他所有的素材將放置在other文件夾中。將站點中的圖片素材拷貝到image文件夾中，將Flash素材拷貝到other文件夾中。（3）定義站點啟動DreamweaverCC，單擊菜單命令“站點”→“新建站點”，通過“站點設置對象”對話框定義站點名稱為“hudie”，將文件夾hudie定義為存放當前站點的文件夾。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（4）制作網頁頁眉部分1）新建網頁，在站點的根目錄下保存為index.html，將網頁的標題改為“蝴蝶谷”。單擊屬性面板上的“頁面設置”按鈕，在“外觀（CSS）”選項下設頁面字體大小為12，“上邊距”為0。在“鏈接（CSS）”選項下設“鏈接顏色”和“已訪問鏈接”的顏色為#666666，“變換圖像鏈接”顏色為#4ec100，“活動鏈接”顏色設為紅色，單擊“確定”按鈕。這樣對頁面文字大小、超鏈接文字的大小及鏈接顯示狀態(tài)進行了設置。2）單擊菜單命令“插入”→“表格”新建表格，在彈出的對話框中設定表格為3行1列，寬770像素，其余參數為0，單擊“確定”按鈕。選中表格，在屬性面板中設定表格的“Align”為居中對齊，這樣表格將在頁面中居中對齊。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（4）制作網頁頁眉部分3)光標移到第1行的單元格里，在文檔窗口右側的“CSS設計器”面板單擊“源”窗格右側的按鈕，在彈出的菜單中選擇“在頁面中定義”，在“源”窗格中生成<style>標簽，表示創(chuàng)建源成功。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（4）制作網頁頁眉部分3)選中在“源”窗格中創(chuàng)建的<style>標簽，在“選擇器”窗格的右側單擊按鈕，設置新的選擇器名稱為“.bj1”。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（4）制作網頁頁眉部分5）在CSS屬性面板中設“目標規(guī)則”為“.bj1”，單擊“編輯規(guī)則”按鈕，打開“.bj1的CSS規(guī)則定義”對話框，在彈出的對話框中選擇左側的“背景”選項，設背景圖像Background-image為image/tou.jpg，如圖所示，單擊“確定”按鈕。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（4）制作網頁頁眉部分5）設單元格“寬”為770，“高”為140。屬性面板和表格如圖所示。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（4）制作網頁頁眉部分6)光標在第1行單元格中。單擊菜單命令“插入”→“媒體”→“FlashSWF”，打開“選擇文件”對話框，找到image/mu.swf，單擊“確定”按鈕，于是在單元格中插入Flash的SWF文件。選中SWF文件，在屬性面板中單擊Wmode的下拉列表選擇“透明”，屬性面板如圖所示。按F12預覽Flash背景是否透明。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（4）制作網頁頁眉部分7）光標移到第2行單元格中，插入圖像文件image/caidan.jpg。選中圖像，在屬性面板上選擇矩形熱點工具，分別在菜單圖像上繪制矩形熱點區(qū)域，如圖所示。系統(tǒng)自動為熱區(qū)建立空鏈接。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（4）制作網頁頁眉部分8）光標移到第3行單元格中，在CSS屬性面板中，設單元格寬度為770，高度為20、背景顏色為#4ec100。在CSS屬性面板中單擊拆分單元格按鈕，將單元格拆分為2列。光標移到左側單元格中，輸入文字“當前位置：首頁”，在右側單元格輸入文字“歡迎瀏覽本網站?。?！”。鼠標拖動2列單元格之間的邊框向左移動，使得右側單元格大一些。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（4）制作網頁頁眉部分9）選中右側文字，切換到代碼視圖，找到反白顯示的文字，添加跑馬燈效果代碼，當鼠標移到滾動的文字上時文字停下不動，鼠標離開文字后文字繼續(xù)滾動。修改后的代碼為“<marqueeonmousemove=“this.stop()”onmouseout=“this.start()”>歡迎光臨本網站?。?！</marquee>”。按F12在瀏覽器中觀察文字滾動效果。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（4）制作網頁頁眉部分10）此時會發(fā)現滾動文字所在的綠色背景單元格與上一行菜單之間閃了一條縫隙，沒有完全連接在一起。這是由于瀏覽器兼容性問題造成的。切換到代碼視圖，將光標移到第一行，將代碼<!doctypehtml>改為<!doctypehtmlpublic>，如圖所示。再按F12在瀏覽器中觀察效果，會發(fā)現閃縫沒有了。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（4）制作網頁頁眉部分11）在CSS選擇器中選中“源”窗格中的<style>標簽，在“選擇器”窗格的右側單擊按鈕，設置新的選擇器名稱為“.t1”。選中左側單元格中的文字，在CSS屬性面板中的“目標規(guī)則”下拉列表中選擇“.t1”，單擊“編輯規(guī)則”按鈕，在彈出的“.t1的CSS規(guī)則定義”對話框中，在“類型”選項下設字體顏色Color為白色。此時左側單元格文字顏色變?yōu)榘咨?2.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（4）制作網頁頁眉部分11）選中右側單元格中的文字，在CSS屬性面板中的“目標規(guī)則”下拉列表中選擇“.t1”，則右側單元格文字顏色變?yōu)榘咨?。按F12觀察效果。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（5）制作正文部分1）鼠標單擊表格右側外部的空白區(qū)域，將光標移到表格的右側，單擊菜單命令“插入”→“表格”，新建一個新的2行2列表格，設表格寬為770，其他為0。在屬性面板中設表格的“Align”為居中對齊。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（5）制作正文部分2）框選所有單元格，在屬性面板中設單元格的“垂直”對齊方式為“頂端”。3）將光標移到第1行左側單元格中，在CSS選擇器中選中“源”窗格中的<style>標簽，在“選擇器”窗格的右側單擊按鈕，設置新的選擇器名稱為“.b1”。在CSS屬性面板中的“目標規(guī)則”下拉列表中選擇“.b1”，單擊“編輯規(guī)則”按鈕，在彈出的“.b1的CSS規(guī)則定義”對話框中，在“背景”選項下設背景圖像Background-image為“image/left.jpg”，背景重復Background-repeat選擇“No-repeat”。在“方框”選項下設寬Width為460，高Height為170，單擊“確定”按鈕。于是左側單元格應用了CSS樣式“.b1”。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（5）制作正文部分4）將光標移到第2行左側單元格中，在CSS選擇器中選中“源”窗格中的<style>標簽，在“選擇器”窗格的右側單擊按鈕，設置新的選擇器名稱為“.b2”。在CSS屬性面板中的“目標規(guī)則”下拉列表中選擇“.b2”，單擊“編輯規(guī)則”按鈕，在彈出的“.b2的CSS規(guī)則定義”對話框中，在“背景”選項下設背景圖像為““image/right.jpg””，背景重復Background-repeat選擇“No-repeat”。在“方框”選項下設寬Width為460，高Height為170，單擊“確定”按鈕。于是左側單元格應用了CSS樣式“.b2”。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（5）制作正文部分4）12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（5）制作正文部分5）光標移到第1行左側單元格內，插入一個5行7列、寬為100%、其他為0的嵌套表格。選中所有單元格，設“水平”和“垂直”對齊方式為“居中”。在第2行的第2、4、6單元格中分別插入如圖所示的圖像。光標分別移到插入圖像的單元格中，在屬性面板中設單元格的“寬”為27%，“高”為95。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（5）制作正文部分6）在第3、4行的對應單元格中輸入如圖12-18所示的文字。在CSS選擇器中選中“源”窗格中的<style>標簽，在“選擇器”窗格的右側單擊按鈕，設置新的選擇器名稱為“.t2”。選中一個單元格中輸入的文字，在CSS屬性面板中的“目標規(guī)則”下拉列表中選擇“.t2”，單擊“編輯規(guī)則”按鈕，在彈出的“.t2的CSS規(guī)則定義”對話框中，在“類型”選項下設字號Font-size為12、字體顏色Color為#666666，單擊“確定”按鈕。則文字變?yōu)榛疑?。再分別選中其他單元格中的文字，在CSS屬性面板中的“目標規(guī)則”下拉列表中選擇“.t2”。框選文字單元格，在屬性面板中設單元格的“高”為18。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（5）制作正文部分6）在第3、4行的對應單元格中輸入如圖所示的文字。在CSS選擇器中選中“源”窗格中的<style>標簽，在“選擇器”窗格的右側單擊按鈕，設置新的選擇器名稱為“.t2”。選中一個單元格中輸入的文字，在CSS屬性面板中的“目標規(guī)則”下拉列表中選擇“.t2”，單擊“編輯規(guī)則”按鈕，在彈出的“.t2的CSS規(guī)則定義”對話框中，在“類型”選項下設字號Font-size為12、字體顏色Color為#666666，單擊“確定”按鈕。則文字變?yōu)榛疑Ｔ俜謩e選中其他單元格中的文字，在CSS屬性面板中的“目標規(guī)則”下拉列表中選擇“.t2”?？蜻x文字單元格，在屬性面板中設單元格的“高”為18。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（5）制作正文部分6）12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（5）制作正文部分7）在第5行中合并第6、7個單元格，并輸入文字“更多>>”。選中文字，在CSS屬性面板中的“目標規(guī)則”下拉列表中選擇“.t2”，設單元格“水平”為“右對齊”，“垂直”為“底部”。其效果如圖所示。若左側的背景圖片的欄目名稱被覆蓋遮擋的話，可以向右拖動第1個單元右側的邊線，使得欄目名稱不被遮擋。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（5）制作正文部分8）光標移到第2行左側單元格內，插入6行7列、寬為100%的嵌套表格。按照圖所示布局進行單元格合并，并拖動單元格邊框改變單元格的寬度。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（5）制作正文部分9）在相應的單元格中插入圖片和文字，文字前面的黑點，是通過“插入”→“HTML”→“特殊字符”→“其他字符”→找到黑點符號來實現的。分別選中文字應用“.t2”樣式。最后1行的單元格設“垂直”對齊方式為“右對齊”。設每行單元格高度為18。根據布局美觀要求，可適當調整各單元格的寬度。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（5）制作正文部分10）將光標移到大表格第1行右側的單元格中，設單元格的“水平”和“垂直”的對齊方式為“居中”。插入圖像image/YOUTU1.jpg。11）將光標移到大表格第2行右側的單元格中，設單元格的“垂直”的對齊方式為“頂端”。插入一個7行3列、寬為100%的嵌套表格。分別在其中輸入如圖12-22所示的文字。設每行單元格的“高”為20。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（5）制作正文部分12）在CSS選擇器中選中“源”窗格中的<style>標簽，在“選擇器”窗格的右側單擊按鈕，設置新的選擇器名稱為“.t3”。選中第1行的英文，在CSS屬性面板中的“目標規(guī)則”下拉列表中選擇“.t3”，單擊“編輯規(guī)則”按鈕，在彈出的“.t3的CSS規(guī)則定義”對話框中，在“類型”選項下設字號Font-size為14、字體顏色Color為#c00，單擊“確定”按鈕。選中其他的文字，應用CSS樣式“.t2”。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（6）版權區(qū)域制作1）鼠標單擊表格右側外部的空白區(qū)域，將光標移到表格的右側，插入一個新的3行1列表格，設表格寬為770，其他為0。在屬性面板中設表格的“Align”為居中對齊。2）光標移到第1行單元格中，在CSS屬性面板中，設“寬”為770，“高”為20、背景顏色為#4ec100。輸入文字“ILOVEBUTTERFLY”，選中文字，在屬性面板中的“目標規(guī)則”中應用“.t1”樣式，文字顏色為白色。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（6）版權區(qū)域制作2）光標移到第2行單元格中，插入水平線，選中水平線，在屬性面板中設高度為2，切換到代碼視圖，找到反白顯示的水平線代碼，修改代碼為“<hrsize="2"color="#A2C012"/>”，則水平線改為淺綠色。3）在第3行單元格中輸入版權文字，并設置電子郵件鏈接和更新日期，在屬性面板中設單元格的“水平”對齊方式為“居中對齊”。選中文字，應用“.t2”樣式。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（7）網站子頁的制作1）將網頁index.html另存為gushi.html,保存到file文件夾下。將網頁正文部分左、右兩側的嵌套表格和圖像刪除掉。分別選中左側的上下兩個單元格，在屬性面板的“目標規(guī)則”中選擇“刪除類”，去掉單元格背景。選中正文部分的表格，在屬性面板中修改為1行2列。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（7）網站子頁的制作2）光標移到正文部分表格的左側單元格內，在屬性面板中設單元格的“寬”為205、背景顏色為#eeeeee、“垂直”對齊方式為“頂部”。3）插入一個8行3列、寬為100%、其他為0的嵌套表格。將第1行的3個單元格進行合并，插入圖像image/futou.jpg。光標移到第3行第2個單元格中，設單元格的“水平”和“垂直”對齊方式為“居中”。插入Flash文件other/fumu.swf。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（7）網站子頁的制作3）光標移到第5行的中間單元格中，輸入文字“內容提要：”，并應用“.t2”樣式。光標移到第6行的中間單元格中，單擊菜單命令“插入”→“HTML”→“特殊字符”→“其他字符”→單擊黑點符號，再輸入文字“我的蝴蝶說”。選中文字。應用樣式“.t2”。選中小黑點，在屬性面板的“目標規(guī)則”中應用t3樣式。拖動單元格的邊線調整單元格的高度，其布局效果如圖所示。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（7）網站子頁的制作3）將光標移到右側的單元格中，設單元格的“垂直”對齊方式為“頂端”。插入一個5行3列、寬為100%、其他為0的嵌套表格，在第2行第2個單元格中插入圖像image/gushi.jpg。將光標移到第4行第2個單元格中，設單元格的“水平”對齊方式為“居中對齊”，“垂直”對齊方式為“頂端”。插入一個1行1列、寬為80%的嵌套表格，在其中輸入文字。選中第1行文字，在CSS屬性面板的“目標規(guī)則”中應用“.t3”樣式。其他文字應用“.t2”樣式。其布局效果如圖所示。12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（7）網站子頁的制作3）12.1案例制作：網站“蝴蝶谷”12.1案例制作：網站“蝴蝶谷”（7）網站子頁的制作4）將頭部區(qū)域文字“當前位置：首頁”修改為“當前位置：蝴蝶故事”。5）在網頁index.html中，選中導航部分的“蝴蝶故事”熱點區(qū)域，在屬性面板的“鏈接”文本框中輸入file/gushi.html。在網頁gushi.html中，選中導航部分的“首頁”熱點區(qū)域，在屬性面板的“鏈接”文本框中輸入../index.html。則建立了網頁間的鏈接。12.1案例制作：網站“蝴蝶谷”12.2案例制作：網站“葆偉汽車”最終效果如圖所示12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（1）規(guī)劃站點新建文件夾“BaoweiQiche”，將素材文件夾“BaoweiQiche”中的“images”和“others”文件夾拷貝到“BaoweiQiche”文件夾中。（2）定義站點在DreamweaverCC2015中，單擊菜單“站點”→“新建站點”命令，通過“站點設置對象”對話框定義站點，站點名稱為“葆偉汽車”，本地站點文件夾設置為“BaoweiQiche”文件夾。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（3）制作Banner部分1）新建網頁“index.html”，保存到站點文件夾下，打開網頁“index.html”，將網頁的標題改為“葆偉汽車首頁”，切換到代碼視圖，將第一行代碼<!doctypehtml>改為<!doctypehtmlpublic>。2）打開“CSS設計器”面板，在“源”窗格中創(chuàng)建新的CSS文件，文件名為“cssfile.css”，將文件保存“others”文件夾，并以“鏈接”附加。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（3）制作Banner部分3）創(chuàng)建一個*標簽選擇器規(guī)則。在“選擇器”窗格中添加選擇器“*”，并選中，將“屬性”窗格切換到布局屬性，設置“margin”的值為0px，“padding”的值為0px，如圖所示。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（3）制作Banner部分3）將“屬性”窗格切換到布局屬性，設置“margin”的值為0px，“padding”的值為0px，如圖所示。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（3）制作Banner部分4）將“屬性”窗格切換到邊框屬性，設置“border”的值為0px。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（3）制作Banner部分5）打開“插入”面板，插入Div，在“插入”項中選擇“在插入點”，在ID中輸入“Box”，如圖所示。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（3）制作Banner部分6）點擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對話框，“選擇器類型”選擇“ID”，“選擇器名稱”設置為“#Box”，“規(guī)則定義”選擇“cssfile.css”。7）點擊“確定”按鈕，打開“#Box的CSS規(guī)則定義”對話框。在“分類”中選擇“方框”項，設置“Width”為1004px，設置“Height”為615px，取消“Margin”中的“全部相同”的對勾，設置“Top”為0、“Right”為auto，“Bottom”為0，“Left”為auto，如圖所示。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（3）制作Banner部分7）12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（3）制作Banner部分8）點擊“確定”按鈕，返回“插入Div”對話框，再次點擊“確定”按鈕，在頁面中插入ID為“Box”的Div，且Div居中顯示。9）將Div中默認的文字刪除，插入Div標簽，設置如圖所示，在“插入”項中選擇“在標簽開始之后”、“<divid=’Box’>”，在ID中輸入“Top”。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（3）制作Banner部分10）為ID為“Top”的Div創(chuàng)建ID選擇器規(guī)則，在“方框”中設置“Width”為1004px、“Height”為106px，在“背景”中設置“Background-image”為“Top_bg.jpg”，ID為“Top”的Div在網頁中的效果如圖所示。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（3）制作Banner部分11）將默認的文字刪除，插入Div標簽，設置如圖所示，在“插入”項中選擇“在標簽開始之后”、“<divid=’Top’>”，在ID中輸入“Flash”。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（3）制作Banner部分12）為ID為“Flash”的Div創(chuàng)建ID選擇器規(guī)則，在“方框”中設置“Width”為270px、“Height”為106px，“Float”為left。13）將默認的文字刪除，將光標定位在ID為“Flash”的Div中，插入FlashSWF文件“xing.swf”，選中FlashSWF文件，將“寬”和“高”都設置為106px，“Wmode”設置為“透明”，保存，預覽，FlashSWF文件在瀏覽器中效果如圖所示。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（3）制作Banner部分14）插入Div標簽，設置如圖所示，在“插入”項中選擇“在標簽后”、“<divid=’Flash’>”，在ID中輸入“Contact-Nav”。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（3）制作Banner部分15）為ID為“Contact-Nav”的Div創(chuàng)建ID選擇器規(guī)則，在“方框”中設置“Width”為734px、“Height”為106px，“Float”為left。16）將默認的文字刪除，插入Div標簽，設置如圖所示，在“插入”項中選擇“在標簽開始之后”、“<divid=’Contact-Nav’>”，在ID中輸入“Contact-us”。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（3）制作Banner部分17）為ID為“Contact-us”的Div創(chuàng)建ID選擇器規(guī)則，并在“方框”中設置“Width”為633px、“Height”為26px，取消“Padding”中的“全部相同”的對勾，設置“Top”為40px，取消“Margin”中的“全部相同”的對勾，設置“Right”為101px。18）在“類型”中設置“Font-family”為“微軟雅黑”、“Font-size”為9px、“Font-weight”為“bold”、“Color”為“#838282”。在“分類”中選擇“區(qū)塊”項，設置“Text-align”為“right”。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（3）制作Banner部分19）將默認的文字刪除，輸入文字“HOME

|

CONTACT

|

MAILTOUS”，“HOME”文字部分在網頁中的效果如圖所示。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（4）制作導航部分1）插入一個Div，設置如圖12-41所示，在“插入”項中選擇“在標簽后”、“<divid=’Contact-us’>”，在“ID”中輸入“Nav”。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（4）制作導航部分2）為ID為“Nav”的Div創(chuàng)建ID選擇器規(guī)則，在“方框”中設置“Width”為633px、“Height”為40px，取消“Margin”中的“全部相同”的對勾，設置“Right”為101px。3）在“類型”中設置“Font-family”為“宋體”、“Font-size”為13px、“Color”為“#DDDDDD”。4）在“分類”中選擇“區(qū)塊”項，設置“Text-align”為“right”。在“分類”中選擇“背景”項，設置“Background-color”為“#000000”。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（4）制作導航部分5）將默認的文字刪除，輸入文字素材中的對應導航文字，為每條“|”左右各插入1個全角空格，為每個導航項設置空超鏈接，設置空鏈接后的導航部分在網頁中的效果如圖所示。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（4）制作導航部分6）在“選擇器”窗格中添加偽錨記選擇器“a.nav:link”，在“屬性”窗格中，設置“font-family”為宋體、“font-size”為13px、“color”為#CCCCCC、“l(fā)ine-height”為40px、“font-weight”為“bold”、“text-decoration”為“none”。7）在“選擇器”窗格中添加偽錨記選擇器“a.nav:visited”，在“屬性”窗格中，設置“font-family”為宋體、“font-size”為13px、“color”為#CCCCCC、“l(fā)ine-height”為40px、“font-weight”為“bold”、“text-decoration”為“none”。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（4）制作導航部分8）在“選擇器”窗格中添加偽錨記選擇器“a.nav:hover”，在“屬性”窗格中，設置“font-family”為宋體、“font-size”為13px、“color”為#FF0004、“l(fā)ine-height”為40px、“font-weight”為“bold”、“text-decoration”為“none”。9）在“選擇器”窗格中添加偽錨記選擇器“a.nav:active”，在“屬性”窗格中，設置“font-family”為宋體、“font-size”為13px、“color”為#FF0004、“l(fā)ine-height”為40px、“font-weight”為“bold”、“text-decoration”為“underline”。導航部分在網頁中的效果如圖所示。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（5）制作“優(yōu)惠大贈送”部分1）插入一個Div，設置如圖所示，在“插入”項中選擇“在標簽后”、“<divid=’Top’>”，在“ID”中輸入“Main”。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（5）制作“優(yōu)惠大贈送”部分2）為ID為“Main”的Div創(chuàng)建ID選擇器規(guī)則，在“方框”中設置“Width”為1004px、“Height”為365px。在“背景”中設置“Background-image”為“Main_bg.jpg”。ID為“Main”的Div在網頁中的效果如圖所示。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（5）制作“優(yōu)惠大贈送”部分3）刪除默認的文字，插入一個Div，設置如圖所示，在“插入”項中選擇“在標簽開始之后”、“<divid=’Main’”>，在“ID”中輸入“Main-left”。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（5）制作“優(yōu)惠大贈送”部分4）為ID為“#Main-left”的Div創(chuàng)建ID選擇器規(guī)則，在“方框”中設置“Width”為456px、“Height”為365px、“Float”為left。取消“Padding”中的“全部相同”的對勾，設置“Left”為46px。ID為“Main-left”的Div在網頁中的效果如圖所示。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（5）制作“優(yōu)惠大贈送”部分5）刪除默認的文字，插入一個Div，設置如圖12-48所示，在“插入”項中選擇“在標簽開始之后”、“<divid=’Main-left’”>，在“ID”中輸入“Title”。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（5）制作“優(yōu)惠大贈送”部分6）為ID為“Title”的Div創(chuàng)建ID選擇器規(guī)則，并在“方框”中設置“Width”為441px、“Height”為26px。7）取消“Padding”中的“全部相同”的對勾，設置“Left”為15px。取消“Margin”中的“全部相同”的對勾，設置“Top”為74px。8）在“背景”中設置“Background-image”為“bg.gif”、“Background-repeat”為“no-repeat”，ID為“Title”的Div在網頁中的效果如圖所示。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（5）制作“優(yōu)惠大贈送”部分9）刪除ID為“Title”的Div中默認的文字，輸入文字“優(yōu)惠大贈送Pimentarygift”，在“贈送”文字的后面插入兩個全角空格。10）在“選擇器”窗格中添加類選擇器“.Title-write”，并選中，將“屬性”窗格切換到文本屬性，設置“font-family”為Arial、“font-size”為15px、“color”為#EEEEEE、“l(fā)ine-height”為26px、“font-weight”為“bold”。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（5）制作“優(yōu)惠大贈送”部分11）在“選擇器”窗格中添加類選擇器“.Title-red”，并選中，將“屬性”窗格切換到文本屬性，設置“font-family”為微軟雅黑、“font-size”為15px、“color”為#D81316、“l(fā)ine-height”為26px、“font-weight”為“bold”。12）文本“優(yōu)惠大贈送Pimentarygift”在網頁中的效果如圖所示。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（5）制作“優(yōu)惠大贈送”部分13）插入一個Div，設置如圖所示，在“插入”項中選擇“在標簽后”、“<divid=’Title’>”，在“ID”中輸入“Content”。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（5）制作“優(yōu)惠大贈送”部分14）為ID為“Content”的Div創(chuàng)建ID選擇器規(guī)則，在“方框”中設置“Width”為426px、“Height”為175px，取消“Padding”中的“全部相同”的對勾，設置“Top”為15px、“Right”為15px、“Bottom”為0px、“Left”為15px。15）在“類型”中設置“Font-family”為“宋體”、“Font-size”為13px、“Line-height”為26px、“Font-weight”為“bold”、“Color”為“#EEEEEE”。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（5）制作“優(yōu)惠大贈送”部分16）將默認的文本刪除，輸入文字素材中相應的文字，并在“凡時”和“現場”文字前分別輸入兩個全角空格，“優(yōu)惠大贈送”部分在網頁中的效果如圖所示。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（6）制作用戶登錄部分1）插入一個Div，設置如圖所示，在“插入”項中選擇“在標簽后”、“<divid=’Content’>”，在“ID”中輸入“Login”。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（6）制作用戶登錄部分2）為ID為“Login”的Div創(chuàng)建ID選擇器規(guī)則，在“方框”中設置“Width”為100%、“Height”為27px，取消“Margin”中的“全部相同”的對勾，設置“Top”為20px。3）在“類型”中設置“Font-family”為“宋體”、“Font-size”為13px、“Font-weight”為“bold”、“Color”為“#DDDDDD”。4）將ID為“Login”的Div中默認的文本刪除，在其中插入表單域，在再表單域中插入一個文本框和一個密碼框，將文本框的文字改為“用戶名：”，將密碼框的文字改為“密碼：”，選中文本框，在“屬性”面板中將“size”設置為15，同樣設置密碼框。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（6）制作用戶登錄部分5）將光標定位在密碼框后面，插入提交按鈕和重置按鈕。保存，預覽，用戶登錄部分在網頁中的效果如圖所示。此時，按鈕因前面設置的“*”選擇器規(guī)則，去掉了邊界等，并非我們希望的，可以進行美化。12.2案例制作：網站“葆偉汽車”12.2案例制作：網站“葆偉汽車”（6）制作用戶登錄部分6）在“選擇器”窗格中添加類選擇器“.button”，并選中，將“屬性”窗格切換到布局屬性，設置“padding”的上填充為1px、右填充為6px、下填充為1px、左填充為6px，如圖所示。12.

溫馨提示

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

評論

0/150

提交評論