DW基本操作與CSS應(yīng)用

《DW基本操作與CSS應(yīng)用》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、第4章網(wǎng)頁基本操作與CSS應(yīng)用4.1網(wǎng)頁的基本操作4.2CSS的應(yīng)用技能目標(biāo)技能目標(biāo)掌握在網(wǎng)頁中輸入文本、插入圖片的方法了解超級(jí)鏈接的類型，為文本或圖片創(chuàng)建超級(jí)鏈接掌握CSS樣式在網(wǎng)頁制作中的應(yīng)用4.1網(wǎng)頁基本操作一個(gè)網(wǎng)站的主要任務(wù)是為人們提供信息，而信息需要借助文字、圖片、聲音等媒體傳播。如何將這些信息添加到網(wǎng)頁中，如何通過超級(jí)鏈接實(shí)現(xiàn)頁面的跳轉(zhuǎn)，是一個(gè)網(wǎng)頁設(shè)計(jì)者首先要掌握的基本操作內(nèi)容。案例4-1網(wǎng)頁基本操作練習(xí)創(chuàng)建網(wǎng)頁，練習(xí)網(wǎng)頁的基本操作?！景咐治觥渴紫冉⒁粋€(gè)站點(diǎn)，然后制作三個(gè)頁面，分別插入常用的網(wǎng)頁信息元素，再對(duì)部分文字和圖

2、片建立超級(jí)鏈接。4.1網(wǎng)頁基本操作案例4-1網(wǎng)頁基本操作練習(xí)【操作步驟】（演示操作）1．建立站點(diǎn)2．新建頁面，輸入文本，設(shè)置文本格式3．插入圖像，設(shè)置圖像屬性4．建立超級(jí)鏈接課堂小練習(xí)：建立一個(gè)名為“我的一家”的站點(diǎn)，制作三到四個(gè)頁面，并創(chuàng)建頁面之間的超級(jí)鏈接。4.1網(wǎng)頁基本操作4.2CSS應(yīng)用層疊樣式表CSS（CascadingStylesheets，層疊樣式表）是一系列格式設(shè)置規(guī)則，允許用戶在HTML文檔中加入樣式（如背景、文字字體、顏色等），控制Web頁面內(nèi)容的外觀。使用CSS設(shè)置頁面格式時(shí)，內(nèi)容與表現(xiàn)形式是相互分開的。頁面內(nèi)容(

3、HTML代碼)位于自身的HTML文件中，而定義代碼表現(xiàn)形式的CSS規(guī)則位于另一個(gè)文件(外部樣式表)或HTML文檔的另一部分中。使用CSS可以非常靈活并更好地控制頁面的外觀，從精確的布局定位到特定的字體和樣式等。4.2CSS應(yīng)用CSS把網(wǎng)頁上的內(nèi)容結(jié)構(gòu)和格式控制相分離，使得網(wǎng)頁可以光由內(nèi)容構(gòu)成，而將所有網(wǎng)頁的格式控制指向某個(gè)CSS樣式表文件。這樣一來一方面簡化了網(wǎng)頁的格式代碼，外部的樣式表還會(huì)被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數(shù)量（因?yàn)橹貜?fù)設(shè)置的格式將被只保存一次）；另一方面可以通過CSS樣式表文件統(tǒng)一整個(gè)

4、站點(diǎn)的風(fēng)格特色，而且當(dāng)你面要對(duì)有數(shù)百個(gè)網(wǎng)頁的站點(diǎn)進(jìn)行修改的時(shí)候，避免了一個(gè)一個(gè)網(wǎng)頁的修改，大大減少了重復(fù)勞動(dòng)的工作量！案例4-2使用CSS統(tǒng)一“上古世界七大奇跡”系列網(wǎng)頁4.2CSS應(yīng)用利用創(chuàng)建的CSS樣式表統(tǒng)一“上古世界七大奇跡”系列網(wǎng)頁的風(fēng)格，如圖所示。案例4-2使用CSS統(tǒng)一“上古世界七大奇跡”系列網(wǎng)頁【案例分析】觀察素材庫中該系列的8個(gè)頁面，它們的結(jié)構(gòu)布局一致，但是標(biāo)題和正文的字體、大小、顏色以及超鏈接的樣式還不太令人滿意，需要利用CSS樣式表進(jìn)行修改并統(tǒng)一風(fēng)格。4.2CSS應(yīng)用案例4-2使用CSS統(tǒng)一“上古世界七大奇跡”系列網(wǎng)

5、頁【操作步驟】（1）創(chuàng)建文件夾，將相關(guān)素材拷至文件夾內(nèi)，并在其下創(chuàng)建子文件夾“CSS”用來存放創(chuàng)建的CSS樣式表。（2）新建CSS規(guī)則，分別利用“選擇器類型”選項(xiàng)列表中的“類”、“標(biāo)簽”、“高級(jí)”屬性對(duì)網(wǎng)頁中的標(biāo)題、文字、超鏈接的樣式進(jìn)行修改。（3）對(duì)所有的網(wǎng)頁應(yīng)用該CSS。（4）對(duì)超級(jí)鏈接的屬性進(jìn)行修改，觀察應(yīng)用了CSS的所有的網(wǎng)頁的變化，體會(huì)CSS的作用。（演示操作）4.2CSS應(yīng)用案例4-2使用CSS統(tǒng)一“上古世界七大奇跡”系列網(wǎng)頁4.2CSS應(yīng)用案例小結(jié)：網(wǎng)頁制作初學(xué)者經(jīng)常會(huì)遇到一些棘手的情況：精心設(shè)計(jì)好的頁面在不同的瀏覽器中打

6、開，編排好的頁面文字、超鏈接等已經(jīng)不是原先預(yù)想的情況；隨著時(shí)間的推移，要對(duì)網(wǎng)站原有的幾百個(gè)網(wǎng)頁統(tǒng)一更改背景顏色或是標(biāo)題的樣式。如果能熟練的地掌握CSS的使用方法，那么這些問題將迎刃而解。要想使自己的網(wǎng)站更加美觀、制作效率更高，還要對(duì)創(chuàng)建、應(yīng)用CSS多加練習(xí)。課堂小練習(xí)：建立一個(gè)名為“最新電影推薦”的站點(diǎn)，制作五到六個(gè)頁面，并創(chuàng)建CSS統(tǒng)一它們的風(fēng)格。實(shí)訓(xùn)第4章DW基本操作與CSS應(yīng)用圍繞某個(gè)主題構(gòu)思一系列網(wǎng)頁，應(yīng)用基本操作為其添加文字、圖片、超鏈接等，然后分別通過三種CSS的應(yīng)用方式設(shè)計(jì)合理設(shè)計(jì)網(wǎng)站的風(fēng)格。實(shí)訓(xùn)目的1．學(xué)會(huì)網(wǎng)頁的基本操作

7、2．掌握CSS的創(chuàng)建、應(yīng)用和編輯等方法實(shí)訓(xùn)內(nèi)容與步驟確定網(wǎng)站內(nèi)容。網(wǎng)站頁面設(shè)計(jì)使用外部文件方式，利用創(chuàng)建好的CSS文件統(tǒng)一網(wǎng)站所有頁面風(fēng)格使用內(nèi)部文檔頭方式和直接插入式對(duì)個(gè)別頁面需要特殊設(shè)定樣式的地方進(jìn)行局部修改修改創(chuàng)建好的CSS樣式文件，觀察所有應(yīng)用該CSS樣式文件的頁面是否隨之改變