網(wǎng)頁制作講網(wǎng)頁設(shè)計(jì)高級(jí)技術(shù)_第1頁
網(wǎng)頁制作講網(wǎng)頁設(shè)計(jì)高級(jí)技術(shù)_第2頁
網(wǎng)頁制作講網(wǎng)頁設(shè)計(jì)高級(jí)技術(shù)_第3頁
網(wǎng)頁制作講網(wǎng)頁設(shè)計(jì)高級(jí)技術(shù)_第4頁
網(wǎng)頁制作講網(wǎng)頁設(shè)計(jì)高級(jí)技術(shù)_第5頁
已閱讀5頁，還剩48頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

2023/12/81本章知識(shí)點(diǎn)和技能點(diǎn)：CSS樣式、模板的創(chuàng)建與應(yīng)用站點(diǎn)管理，進(jìn)行檢查超級(jí)鏈接、清理無用文件等Dreamweaver、Fireworks、Flash三者的連用2023/12/8210.1CSS樣式表

CSS（CascadingStyleSheet）即層疊樣式表，是現(xiàn)在被廣泛使用的格式控制技術(shù)。層疊樣式表的功能非常強(qiáng)大，可以將其定義在HTML的TAG（標(biāo)簽）里，也可以存儲(chǔ)為一個(gè)獨(dú)立的.CSS文件做為鏈接文件。一個(gè)樣式表文件可以作用于多個(gè)頁面，甚至整個(gè)站點(diǎn)，因此具有很好的易用性和擴(kuò)展性，它可以精確地控制頁面中的每一個(gè)元素2023/12/83網(wǎng)頁編輯器內(nèi)設(shè)置的頁面和瀏覽器中顯示的頁面實(shí)際效果往往有所差異，即使同一頁面由于使用不同的瀏覽器或由于設(shè)置不同的分辨率，最終效果也都不同，這樣設(shè)計(jì)者就很難讓頁面按自己的意愿精確布局，即便是掌握HTML語言精髓的人也要通過多次地測(cè)試，才能駕馭好這些信息的排版。樣式表可以解決這樣的問題，使頁面完全按照制作者的設(shè)想顯示。我們可以通過它對(duì)網(wǎng)頁上元素進(jìn)行精確的定位，輕易地控制文字、圖片等各種對(duì)象。內(nèi)容結(jié)構(gòu)和格式控制相分離，使得網(wǎng)頁可以只由內(nèi)容構(gòu)成，而將所有網(wǎng)頁的格式控制指向某個(gè)CSS樣式表文件，其好處表現(xiàn)在以下兩個(gè)方面：2023/12/84簡化了網(wǎng)頁的格式代碼，外部的樣式表會(huì)被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數(shù)量（因?yàn)橹貜?fù)設(shè)置的格式只被保存一次）。只要修改保存網(wǎng)站格式的CSS樣式表就可以改變整個(gè)站點(diǎn)的風(fēng)格特色。在修改頁面數(shù)量龐大的站點(diǎn)時(shí)非常有用。使用樣式表可以靈活地控制頁面的布局和顯示。CSS樣式表的類型主要有：外部樣式：當(dāng)多個(gè)頁面文件具有相同的樣式時(shí)，可以將CSS樣式保存為獨(dú)立的文件，所有頁面文件可共享該樣式文件。嵌入式樣式：通過<STYLE>標(biāo)記符，可將樣式信息作為文檔的一部分用于HTML。內(nèi)聯(lián)式樣式：只包含在與它有關(guān)的標(biāo)記內(nèi)，對(duì)頁面上其他的標(biāo)記不起作用。2023/12/8510.1.1外部樣式表通過Dreamweaver的CSS樣式面板可以很方便地創(chuàng)建和編輯樣式表。1.創(chuàng)建外部樣式表這里我們以創(chuàng)建超級(jí)鏈接的樣式為例說明CSS樣式表的創(chuàng)建過程。超級(jí)鏈接的樣式定義超級(jí)鏈接的四種狀態(tài)，分別為：

a:link定義鏈接普通狀態(tài)的顯示樣式。

a:visited定義被訪問的鏈接的顯示樣式。

a:hover定義將鼠標(biāo)置于超級(jí)鏈接之上的顯示樣式。

a:active定義超級(jí)鏈接即將點(diǎn)擊時(shí)的顯示樣式。默認(rèn)的超級(jí)鏈接有下劃線，此處我們將去掉下劃線，并重新定義超級(jí)鏈接四個(gè)狀態(tài)的樣式，具體操作過程如下：2023/12/86步驟1：打開xiangce.htm，單擊左側(cè)框架區(qū)域，執(zhí)行【窗口】→【CSS樣式】命令打開left.htm文件的樣式面板，如圖所示。2023/12/87步驟2：單擊樣式面板底部的新增樣式按鈕，彈出“新建CSS樣式”對(duì)話框，設(shè)置“選擇器類型”為高級(jí)，在“選擇器”的下拉列表中選擇“a:link”，“定義在”設(shè)置為“新建樣式表文件”，“新建CSS樣式”對(duì)話框的設(shè)置如圖所示。然后單擊【確定】按鈕。2023/12/88步驟3：進(jìn)入如圖所示的“保存樣式表文件為”對(duì)話框，選擇路徑、命名為mystyle，然后單擊【保存】按鈕。2023/12/89步驟4：進(jìn)入“CSS樣式定義”對(duì)話框。該對(duì)話框左側(cè)共有8類選項(xiàng)，選擇其中一類，右側(cè)會(huì)出現(xiàn)相應(yīng)的選項(xiàng)，在此定義樣式的具體格式。此處不希望鏈接對(duì)象出現(xiàn)下劃線，可將“修飾”設(shè)置為“無”，其他設(shè)置如圖所示。單擊【確定】按鈕完成a:link狀態(tài)的樣式定義。2023/12/810步驟5：定義鏈接a:visited狀態(tài)的樣式。單擊樣式面板底部的編輯樣式按鈕，彈出如圖1所示的“編輯樣式表”對(duì)話框。在“編輯樣式表”對(duì)話框中單擊【新建】按鈕也可進(jìn)入“新建CSS樣式”對(duì)話框，設(shè)置“選擇器類型”為高級(jí)，“選擇器”設(shè)置為“a:visited”，“定義在”選擇為第3步中創(chuàng)建的外部樣式文件mystyle.css，單擊【確定】按鈕進(jìn)入“CSS樣式定義”對(duì)話框，進(jìn)行如圖2所示的設(shè)置。單擊【確定】按鈕完成a:visited狀態(tài)的樣式定義。2023/12/811步驟6：按照上述步驟分別設(shè)置a:hover狀態(tài)和a:active狀態(tài)的樣式定義。字體、大小、修飾效果都不變，只改變字體的顏色，a:hover狀態(tài)字體顏色為#FF33CC，a:active狀態(tài)字體顏色為#000000。設(shè)置超級(jí)鏈接樣式后的CSS面板如圖所示。2023/12/812步驟7：保存后預(yù)覽效果，超級(jí)鏈接將無下劃線，如圖所示。2023/12/8132.應(yīng)用外部樣式表我們以在quwen.htm文檔中引用已經(jīng)編輯好的mystyle.css樣式文件為例進(jìn)行介紹，具體操作過程如下：步驟1：打開quwen.htm，選擇【窗口】→【CSS樣式】命令打開樣式面板。步驟2：單擊樣式面板底部的附加樣式表按鈕，或在樣式面板中右擊從彈出的菜單中選擇“附加樣式表”，都可打開如圖所示的對(duì)話框，通過【瀏覽】按鈕選擇樣式表文件，然后單擊【確定】按鈕即可。2023/12/814注意：<import>導(dǎo)入外部樣式表與<link>鏈接外部樣式表的不同在于：無論該網(wǎng)頁是否應(yīng)用了CSS樣式表，其都將讀取樣式表；鏈接樣式表則在該網(wǎng)頁應(yīng)用CSS樣式表時(shí)才去讀樣式表。import導(dǎo)入的樣式表優(yōu)先級(jí)較高，當(dāng)在文檔標(biāo)記內(nèi)部定義的樣式與導(dǎo)入的樣式發(fā)生沖突，則內(nèi)部定義的樣式將不起作用。鏈接外部樣式表文件使用以下的語句：2023/12/815<head>

<linkhref="../CSS/mystyle.css"rel="stylesheet"type="text/css">

</head>

導(dǎo)入外部樣式表文件使用以下的語句：

<head>

<styletype="text/css">

<!--

@importurl("../CSS/mystyle.css");

-->

</style>

</head>2023/12/81610.1.2嵌入式樣式1.創(chuàng)建嵌入式樣式這里我們以在新建yangshi.htm文檔中創(chuàng)建test嵌入式樣式為例進(jìn)行介紹，具體的操作過程如下：步驟1：新建yangshi.htm，執(zhí)行【窗口】→【CSS樣式】命令打開樣式面板。步驟2：單擊樣式面板底部的新增樣式按鈕，彈出“新建CSS樣式”對(duì)話框，設(shè)置“選擇器類型”為“類”，“名稱”為“.test”，“定義在”設(shè)置為“僅對(duì)該文檔”，然后單擊【確定】按鈕。步驟3：進(jìn)入“.testCSS樣式定義”對(duì)話框，分別進(jìn)行“類型”和“背景”選項(xiàng)的設(shè)置。然后單擊【確定】按鈕完成test內(nèi)部樣式義。

2023/12/817步驟4：切換到“代碼”視圖下，查看嵌入式樣式的語句，在<head>…<head>中包含如下語句：

<head>

<styletype="text/css">

<!--

.test{

font-family:"隸書";

font-size:18px;

color:#66CC33;

text-decoration:blink;

background-color:#FFCCFF;

}

-->

</style>

</head>2023/12/8182.應(yīng)用嵌入式樣式步驟1：打開yangshi.htm，輸入文字“動(dòng)物的天堂、動(dòng)物的世界！”，如圖（a）所示，選中文字。步驟2：在其屬性面板的“樣式”選項(xiàng)中選擇創(chuàng)建的test樣式，即可應(yīng)用樣式，如圖（b）所示。2023/12/819注意：應(yīng)用嵌入式樣式時(shí)的語句為：

<spanclass="test">動(dòng)物的天堂、動(dòng)物的世界！</span>2023/12/82010.1.3內(nèi)聯(lián)式樣式我們以在yangshi.htm文檔中創(chuàng)建段落標(biāo)記<p>的內(nèi)聯(lián)式樣式為例進(jìn)行介紹，具體的操作過程如下：步驟1：打開yangshi.htm，在文檔窗口中輸入“歡迎來到動(dòng)物天堂之門！”，并將其選中。步驟2：單擊文檔工具欄中的顯示代碼視圖按鈕，切換到代碼視圖下。在選中的文本處輸入以下代碼:

<pstyle="color:#FF0000;font-size:24px;font-family:"隸書"">歡迎來到動(dòng)物天堂之門！</p>步驟3：單擊文檔工具欄中的設(shè)計(jì)視圖按鈕，查看樣式效果，如圖所示。2023/12/82110.2模板Dreamweaver提供了模板功能，可以一次更新多個(gè)頁面。修改模板后，所有基于該模板創(chuàng)建的文檔會(huì)立即更新。創(chuàng)建模板時(shí)，必須指定可編輯區(qū)。

2023/12/82210.2.1創(chuàng)建模板既可以從新建的文檔中創(chuàng)建模板，也可以將現(xiàn)有的文檔保存為模板。下面我們以將首頁保存為模板為例進(jìn)行介紹，具體操作過程如下：步驟1：打開index.htm。步驟2：定義可編輯區(qū)域。將光標(biāo)置于需要添加可編輯區(qū)域的地方，單擊【插入】→【模板對(duì)象】→【可編輯區(qū)域】命令，或單擊“常用”插入欄中的插入可編輯區(qū)按鈕，彈出如圖所示的“新建可編輯區(qū)”對(duì)話框，在名稱文本框中輸入可編輯區(qū)域的名稱edit1，然后單擊【確定】按鈕，這樣就新建了一個(gè)名為edit1的可編輯區(qū)。同樣再建立其他幾個(gè)可編輯區(qū)，創(chuàng)建可編輯區(qū)的結(jié)果如圖所示。2023/12/8232023/12/824步驟3：選擇【文件】→【另存為模板】命令，彈出如圖所示的對(duì)話框。2023/12/825在“站點(diǎn)”選項(xiàng)的下拉列表框中列出了已定義的站點(diǎn)，選擇需要的站點(diǎn)后，在“現(xiàn)存在的模板”列表框中會(huì)顯示出該站點(diǎn)中已定義的模板，由于我們還沒有定義任何模板，所以此時(shí)顯示沒有模板?！傲泶鏋椤蔽谋究蛑惺切陆０宓拿Q，默認(rèn)值是當(dāng)前頁面的文件名。設(shè)置好名稱后單擊【保存】按鈕，就可保存模板。系統(tǒng)會(huì)自動(dòng)創(chuàng)建一個(gè)“Templates”文件夾，并將模板文件保存到這里，模板文件的擴(kuò)展名為.dwt。2023/12/82610.2.2應(yīng)用模板我們將利用index.dwt模板創(chuàng)建一個(gè)有關(guān)動(dòng)物知識(shí)的頁面，具體操作過程如下：步驟1：從模板新建文件。

在Dreamweaver中，執(zhí)行【文件】→【新建】命令打開新建對(duì)話框，選擇“模板”選項(xiàng)卡，如圖所示。左側(cè)是站點(diǎn)列表，中間列出所選站點(diǎn)的模板文件，右側(cè)為選中模板的預(yù)覽效果。選中所需的模板后，單擊【創(chuàng)建】按鈕即可新建一個(gè)基于該模板的文檔。在新建文檔的右上角顯示模板的名稱。THANKYOUSUCCESS2023/12/827可編輯2023/12/8282023/12/829步驟2：編輯新建的文件。除了可編輯區(qū)域，其他區(qū)域都是不可編輯的。在可編輯區(qū)域編輯文檔，編輯后的文檔如圖所示，然后保存文檔zhishi.htm即可。2023/12/83010.2.3更新模板完成模板后還可以對(duì)其進(jìn)行修改，例如增加、刪除可編輯區(qū)，以及頁面布局的修改等。修改完后選擇【文件】→【保存】命令,這時(shí)彈出如圖所示的對(duì)話框，詢問是否更新站點(diǎn)中所有應(yīng)用該模板的頁面。2023/12/831單擊【更新】按鈕進(jìn)入如圖所示的“更新頁面”對(duì)話框。2023/12/832也可以利用資源面板來創(chuàng)建、編輯或更新模板。執(zhí)行【窗口】→【資源】命令，打開資源面板，在左側(cè)列表中單擊按鈕，然后在面板的菜單選項(xiàng)中選擇相應(yīng)的操作，即可進(jìn)行模板的創(chuàng)建、編輯和更新等，如圖所示。2023/12/83310.3站點(diǎn)管理站點(diǎn)管理的主要內(nèi)容包括：站點(diǎn)內(nèi)文件及文件夾的管理網(wǎng)頁鏈接的管理文件的上傳和下載等?？梢岳谜军c(diǎn)窗口進(jìn)行網(wǎng)站的管理。2023/12/83410.3.1站點(diǎn)地圖1.查看站點(diǎn)地圖所謂的站點(diǎn)地圖，是指由系統(tǒng)自動(dòng)按網(wǎng)頁之間的鏈接關(guān)系生成的一個(gè)示意圖，從而使整個(gè)網(wǎng)站的組織一目了然。要查看站點(diǎn)地圖，可在站點(diǎn)窗口中執(zhí)行【查看】→【站點(diǎn)地圖】命令，或單擊工具欄中的站點(diǎn)地圖按鈕?！皠?dòng)物天堂”網(wǎng)站的站點(diǎn)地圖如圖所示，站點(diǎn)地圖顯示在站點(diǎn)窗口的左側(cè)，頁面左側(cè)有符號(hào)的，說明該頁面中還有鏈接頁面，單擊可以展開這些鏈接。2023/12/835圖示的站點(diǎn)地圖是以頁面文件名顯示的。通過執(zhí)行【查看】→【顯示頁面標(biāo)題】命令，站點(diǎn)地圖可以按頁面標(biāo)題顯示。2023/12/8362.修改站點(diǎn)的布局執(zhí)行【查看】→【布局】命令，在彈出的對(duì)話框中可以設(shè)置站點(diǎn)地圖的布局，如圖所示。此處將列數(shù)設(shè)置為4，結(jié)果如上圖所示。2023/12/83710.3.2文件及文件夾的整理在站點(diǎn)窗口中可以方便地進(jìn)行新建、刪除、修改和更新網(wǎng)頁鏈接，以及檢查整個(gè)站點(diǎn)中的鏈接等操作。下面介紹檢查整個(gè)站點(diǎn)范圍內(nèi)的鏈接，然后刪除無用文件（指沒有鏈接的文件）。步驟1：在“動(dòng)物天堂”網(wǎng)站的站點(diǎn)窗口中，執(zhí)行【站點(diǎn)】→【檢查站點(diǎn)范圍的鏈接】命令，打開結(jié)果面板中的“鏈接檢查器”選項(xiàng)，如圖所示。此處可以檢查斷掉的鏈接、外部鏈接以及沒有鏈接的文件。步驟2：在“顯示”下拉列表中選擇“孤立文件”選項(xiàng)，按住Shift鍵選擇文件框中的所有文件，然后按Delete鍵刪除無用的文件。

2023/12/8382023/12/83910.4綜合技術(shù)應(yīng)用

經(jīng)過前面的章節(jié)學(xué)習(xí)，我們已經(jīng)掌握了Macromedia公司推出網(wǎng)頁三劍客的基本使用方法。他們各有側(cè)重，只有以Dreamweaver為核心綜合運(yùn)用Fireworks及Flash，才能充分發(fā)揮出Macromedia網(wǎng)頁三劍客的功能。2023/12/84010.4.1Dreamweaver與Fireworks的綜合應(yīng)用可以在Dreamweaver中直接啟動(dòng)Fireworks并使用Fireworks的工具對(duì)圖片進(jìn)行深層次的修改，返回到Dreamweaver中時(shí)，頁面中的圖形會(huì)自動(dòng)更新。以修改index.htm文件中的Logo圖標(biāo)為例進(jìn)行介紹，操作過程如下：步驟1：在Dreamweaver打開index.htm文件，選中Logo圖標(biāo)后，單擊其屬性面板中的按鈕步驟2：系統(tǒng)自動(dòng)啟動(dòng)Fireworks，彈出如圖所示的對(duì)話框，單擊【使用此文件】按鈕后，打開logo.gif文件，如圖所示。2023/12/841(a)修改前(b)修改后2023/12/842步驟3：在Fireworks中編輯好logo.gif，如圖（b）所示，然后單擊【完成】按鈕即可返回Dreamweaver中，同時(shí)更新Logo圖標(biāo),如圖所示。2023/12/84310.4.2Dreamweaver與Flash的的綜合應(yīng)用眾所周知，在當(dāng)今網(wǎng)頁制作上Flash動(dòng)畫的廣泛使得網(wǎng)頁變得更加生動(dòng)活潑，從而給瀏覽者以賞心悅目的感覺。與其它傳統(tǒng)的動(dòng)畫制作軟件相比，F(xiàn)lash除具有矢量圖的基本特征外，還更好地融合了音、視頻等多媒體技術(shù)及交互功能，而且由于它本身是由Macromedia公司所開發(fā)，因此它能更好地與Dreamweaver相兼容，現(xiàn)在已經(jīng)受到了專業(yè)人士及網(wǎng)頁制作發(fā)燒友的普遍青睞。以修改index.htm文件中的Banner動(dòng)畫為例進(jìn)行介紹，操作過程如下：

2023/12/844步驟1：在Dreamweaver打開index.htm文件，選中Banner動(dòng)畫后，單擊其屬性面板中的按鈕。步驟2：系統(tǒng)自動(dòng)啟動(dòng)Flash，彈出如圖所示的對(duì)話框，選擇Flash動(dòng)畫的原始文件banner.fla，單擊【打開】按鈕后，打開banner.fla文件，如圖所示。2023/12/8452023/12/8462023/12/847步驟3：在Flash中編輯好banner.fla，如圖所示，然后單擊【完成】按鈕即可返回Dreamweaver中，同時(shí)更新Banner圖標(biāo)。在瀏覽器中預(yù)覽，效果如圖所示。2023/12/8482023/12/849步驟4：將Flash文件的白色背景改為透明的。選中Flash動(dòng)畫，切換到代碼視圖下，Banner動(dòng)畫的源代碼如下：

<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0

溫馨提示

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

評(píng)論

0/150

提交評(píng)論