電子商務(wù)網(wǎng)頁制作項目框架網(wǎng)頁與樣式表培訓(xùn)課件_第1頁
電子商務(wù)網(wǎng)頁制作項目框架網(wǎng)頁與樣式表培訓(xùn)課件_第2頁
電子商務(wù)網(wǎng)頁制作項目框架網(wǎng)頁與樣式表培訓(xùn)課件_第3頁
電子商務(wù)網(wǎng)頁制作項目框架網(wǎng)頁與樣式表培訓(xùn)課件_第4頁
電子商務(wù)網(wǎng)頁制作項目框架網(wǎng)頁與樣式表培訓(xùn)課件_第5頁
已閱讀5頁，還剩73頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

DW項目六電子商務(wù)網(wǎng)頁制作框架網(wǎng)頁與樣式表DW項目六電子商務(wù)框架網(wǎng)頁與樣式表1說出什么是框架；會建立框架與框架集，為各個框架填充內(nèi)容；會調(diào)整框架的外觀；

熟悉CSS樣式表的功能；能夠完成樣式表的創(chuàng)建和編輯；

會創(chuàng)建外部樣式表并應(yīng)用到頁面上。項目目標說出什么是框架；項目目標2框架網(wǎng)頁的含義框架是一種布局技術(shù)，它是將瀏覽器窗口劃分為若干個獨立的區(qū)域，每個區(qū)域中都有各自的內(nèi)容，這些區(qū)域稱為“框架”?？蚣鼙旧聿⒉话唧w的網(wǎng)頁元素，它只是存放文檔的容器，每個框架顯示不同的頁面，并且可以互不干擾地變化。這樣的一組框架就構(gòu)成了框架集。框架集本身不包含任何內(nèi)容，它只是一個HTML文件，告訴瀏覽器如何顯示一組框架?？蚣艹Ｓ糜谡军c導(dǎo)航系統(tǒng)，如網(wǎng)頁的導(dǎo)航按鈕、網(wǎng)頁LOGO和標題等，對于一個網(wǎng)站而言，其中的許多網(wǎng)頁一般都具有相同的導(dǎo)航、LOGO等部分，這時我們可以將這些相同的部分做成框架網(wǎng)頁，這樣就可以在每個頁面中重復(fù)使用，從而大大提高網(wǎng)頁制作的效率。在進行框架網(wǎng)頁設(shè)計時，應(yīng)先花一些時間進行版面的安排，分清各個框架頁面內(nèi)容的主次，把最重要的頁面放置在面積最大、位置最醒目的框架中?？蚣芫W(wǎng)頁的含義框架是一種布局技術(shù)，它是將瀏覽器窗口劃分為3創(chuàng)建框架和框架集在DreamweaverCS5中可以通過兩種方法插入框架集：1．通過“插入”欄，在現(xiàn)有網(wǎng)頁中直接插入框架。選擇“插入”工具欄的“布局”選項中的“框架”選項，可以隨意選擇自己需要的框架集類型。創(chuàng)建框架和框架集在DreamweaverCS5中可以通過兩4創(chuàng)建框架和框架集2．使用“新建文檔”對話框創(chuàng)建新的空框架集。使用“新建文檔”對話框創(chuàng)建新框架集的一般步驟如下：（1）打開“文件”菜單，選擇“新建”命令，將打開“新建文檔”對話框，在“示例中的頁”類別中選擇“框架頁”。創(chuàng)建框架和框架集2．使用“新建文檔”對話框創(chuàng)建新的空框架集。5創(chuàng)建框架和框架集（2）在“示例頁”列表中選擇框架集類型，可以在對話框右端看到該框架集的預(yù)覽效果和相關(guān)描述。（3）單擊“創(chuàng)建”按鈕，在文檔窗口可以看到新創(chuàng)建的框架集，同時DreamweaverCS5會打開一個“框架標簽輔助功能屬性”對話框。（4）為每個框架輸入恰當?shù)臉祟}名稱，然后點擊“確定”即可成功創(chuàng)建框架頁?？蚣艿臉祟}即框架的名稱，它用于識別不同的框架，在指定打開鏈接目標的目標框架或腳本在引用該框架時，框架名稱就派上用場了。一般情況下使用系統(tǒng)提供的默認值，如mainFrame，topFrame，leftFrame等，這些名稱都是約定俗成的。當然，你也可以使用自己定義的名稱。小貼士創(chuàng)建框架和框架集（2）在“示例頁”列表中選擇框架集類型，可以6選擇框架和框架集對框架和框架集進行操作，首先必須選中它。我們可以在文檔窗口中選擇框架或框架集，也可以通過“框架”面板進行選擇。1．在文檔窗口中選擇框架或框架集（1）選擇框架在“設(shè)計”視圖中，按住Alt鍵的同時單擊某個框架內(nèi)部，即可選中該框架，此時該框架的邊框被虛線環(huán)繞。（2）選擇框架集單擊框架集的某一內(nèi)部框架邊框即可選中該框架集，此時該框架集的所有邊框被虛線環(huán)繞。要執(zhí)行這一操作，框架邊框必須是可見的。如果看不到框架邊框，你可以通過打開“查看”菜單，選擇“可視化助理”子菜單中的“框架邊框”使框架邊框可見。小貼士選擇框架和框架集對框架和框架集進行操作，首先必須選中它。7選擇框架和框架集2．在“框架”面板中選擇框架或框架集在文檔窗口中選擇框架和框架集有時候不是很方便，DreamweaverCS3提供了“框架”面板，便于對框架和框架集進行選擇操作。打開“窗口”菜單，選擇“框架”命令，或按快捷鍵Shift+F2，可以打開“框架”面板。（1）選擇框架在“框架”面板中單擊框架即可選中該框架，此時在文檔窗口中該框架的邊框被虛線環(huán)繞，在“框架”面板中該框架周圍會顯示一個選擇輪廓。（2）選擇框架集在“框架”面板中單擊環(huán)繞框架集的邊框，即可選中該框架集，此時該框架集的所有邊框被虛線環(huán)繞，在“框架”面板中該框架集周圍會顯示一個選擇輪廓。選擇框架和框架集2．在“框架”面板中選擇框架或框架集（1）選8保存框架和框架集對于初學(xué)者來說，為了避免出現(xiàn)混亂，在創(chuàng)建完框架和框架集后，最好立刻保存框架和框架集。使用了框架的頁面包含若干個文件。用戶在保存網(wǎng)頁時不僅需要保存框架中的網(wǎng)頁，還要保存框架集文件。在具體操作中可以分別保存或者一次保存所有文件。1．分別保存將光標定位在要保存的框架中，打開“文件”菜單，選擇“保存框架”命令，將打開“另存為”對話框，輸入要保存的文件名，點擊“保存”即可。按此方法依次保存其它框架。在保存了所有的框架后，還需要保存框架集。在“框架”面板或文檔窗口中選中框架集，打開“文件”菜單，選擇“保存框架頁”命令，單擊“保存”按鈕，將保存該框架集。保存框架和框架集對于初學(xué)者來說，為了避免出現(xiàn)混亂，在創(chuàng)建9保存框架和框架集2．一次保存打開“文件”菜單，選擇“保存全部”命令，DreamweaverCS5將打開“另存為”對話框，依次提示要保存的內(nèi)容。首先要保存的是主框架集，在文檔窗口中會以斜線框包圍整個框架，并同時彈出“另存為”對話框。輸入要保存的框架集名，單擊“保存”后，將打開第二個“另存為”對話框，提示將要保存第一個框架文件，在文檔窗口中也會以斜線框包圍要保存的框架。輸入要保存的框架文件名稱，單擊“保存”后，將打開第三個“另存為”對話框，提示將要保存第二個框架文件。就這樣，依次保存所有的框架文件。保存框架和框架集2．一次保存輸入要保存的框架集名，單擊“10設(shè)置框架和框架集屬性1．設(shè)置框架的屬性設(shè)置框架屬性主要是通過設(shè)置框架的“屬性”面板中的相應(yīng)參數(shù)實現(xiàn)的，當選擇某個框架時，“屬性”面板中將顯示該框架的屬性?？蚣苊Q：決定用來作為超級鏈接目標和腳本引用的當前框架名稱。源文件：設(shè)置框架的源文檔。滾動：設(shè)置在沒有足夠空間顯示當前框架中的內(nèi)容時是否使用滾動條。不能調(diào)整大?。菏篂g覽者不能調(diào)整框架大小。邊框：控制當前框架的邊框是否顯示。邊框顏色：設(shè)置所有和當前框架相鄰的邊框顏色。邊界寬度：設(shè)置框架左右邊框和內(nèi)容之間的距離（單位為像素）。邊界高度：設(shè)置框架上下邊框和內(nèi)容之間的距離（單位為像素）。設(shè)置框架和框架集屬性1．設(shè)置框架的屬性框架名稱：決定用來作為11設(shè)置框架和框架集屬性2．設(shè)置框架集的屬性要設(shè)置框架集的屬性，可以選擇該框架集，在“屬性”面板里設(shè)置相應(yīng)的屬性。邊框：控制當前框架集內(nèi)框架的邊框。①選擇“是”可以顯示三維灰色的邊框；②選擇“否”可以顯示扁平灰色的邊框；③選擇“默認”可以由瀏覽器確定如何顯示邊框。邊框?qū)挾龋涸O(shè)置當前框架集中邊框的寬度。邊框顏色：設(shè)置當前框架集中所有邊框的顏色。值：指所選擇的行或列的大小。單位：指所選擇的行或列大小的單位。行列選定范圍：選取框架集的行或列。設(shè)置框架和框架集屬性2．設(shè)置框架集的屬性邊框：控制當前框架集12CSS樣式表CSS樣式表是網(wǎng)頁設(shè)計中非常重要的技術(shù)，運用CSS樣式表我們可以實現(xiàn)很多網(wǎng)頁的樣式和效果，還可以大大提高制作網(wǎng)頁的效率，同時運用CSS+DIV進行網(wǎng)頁布局則是更為高級和先進的網(wǎng)頁布局技術(shù)。CSS樣式表CSS樣式表是網(wǎng)頁設(shè)計中非常重要的技術(shù)，運用13什么是CSS樣式表CSS是層疊樣式表單（CascadingStyleSheets）的縮寫，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。因此它最基本的概念就是層疊。層疊的意思是指在同一個HTML文檔中可以有多種樣式表存在，不同層次樣式表根據(jù)其所在的位置擁有不同的優(yōu)先級。要理解“層疊”的概念，首先應(yīng)該了解一下CSS樣式表的三種定義和使用的優(yōu)先級。1．CSS樣式表的三種定義（1）外部樣式表：將一些樣式信息定義在一個單獨的外部文件中，其擴展名為.CSS。整個網(wǎng)站的所有文件都可以鏈接此文件，并使用其中定義的樣式。（2）內(nèi)嵌樣式表：內(nèi)嵌式樣式表只在當前網(wǎng)頁中起作用，位于<head>區(qū)，與網(wǎng)頁文件一起保存。只對當前網(wǎng)頁文件起作用。（3）內(nèi)聯(lián)樣式表：將樣式信息直接定義在網(wǎng)頁中特定的標記和元素上，只對該標記和元素起作用。什么是CSS樣式表CSS是層疊樣式表單（Cascadin14什么是CSS樣式表2．三種定義之間的關(guān)系這三種定義中內(nèi)聯(lián)樣式表最優(yōu)先，其次是內(nèi)嵌樣式表，最后是外部樣式表。它們之間是互相影響、互相繼承的關(guān)系。網(wǎng)頁元素最終顯示的樣式是優(yōu)先級最高的樣式定義，同時各元素會自動繼承上級父元素中定義的樣式。3．CSS樣式表的功能沒有使用CSS樣式表的網(wǎng)頁只能算是初級作品，CSS樣式表為網(wǎng)頁創(chuàng)新奠定了基石。CSS樣式表的功能如下：（1）對布局、字體、顏色、背景和其它圖文效果實現(xiàn)更加精確的控制。（2）只通過修改一個文件就可以改變多個網(wǎng)頁的外觀和格式。（3）在所有瀏覽器和平臺之間具備兼容性。不像其它的網(wǎng)絡(luò)技術(shù)，樣式表的代碼有很好的兼容性，也就是說，即使瀏覽者丟失了某個插件也不會發(fā)生中斷，使用老版本的瀏覽器時，代碼也不會出現(xiàn)雜亂無章的情況。（4）可以與腳本語言相結(jié)合，使網(wǎng)頁中的元素產(chǎn)生各種動態(tài)效果。（5）更少的編碼、更少的頁數(shù)和更快的下載速度。由于CSS樣式表能夠簡化網(wǎng)頁的格式代碼，所以能加快頁面下載的速度。什么是CSS樣式表2．三種定義之間的關(guān)系15CSS樣式表的創(chuàng)建1．新建CSS樣式表在DreamweaverCS3中，打開“格式”菜單，選擇“CSS樣式”子菜單中的“新建”命令，或者右鍵單擊窗口右側(cè)的“CSS”面板的空白處，在彈出的快捷菜單中選擇“新建”，可以打開“新建CSS規(guī)則”對話框。在該對話框中，可以設(shè)定CSS樣式表選擇器的類型、名稱和CSS樣式表定義的位置?！斑x擇器類型”用于確定CSS規(guī)則的選擇器類型；“選擇器名稱”文本框指定新建CSS樣式表的名稱；“規(guī)則定義”用于指定CSS樣式定義的位置，如選擇第一項“僅限該文檔”則新建內(nèi)部樣式表，選擇第二項“新建樣式表文件”將新建外部樣式表。CSS樣式表的創(chuàng)建1．新建CSS樣式表在該對話框中，可以16CSS樣式表的內(nèi)容在“新建CSS規(guī)則”對話框中作好選擇并填寫CSS名稱后，點擊“確定”，將會彈出“××的CSS規(guī)則定義”對話框（“××”即為新建CSS的名稱。在該對話框中我們可以看到左側(cè)的“分類”列表中有八大類別：類型、背景、區(qū)塊、方框、邊框、列表、定位、擴展，每個類別在右側(cè)都有相應(yīng)的參數(shù)設(shè)置。CSS樣式表的內(nèi)容在“新建CSS規(guī)則”對話框中作好選擇并17CSS樣式表的內(nèi)容在“新建CSS規(guī)則”對話框中作好選擇并填寫CSS名稱后，點擊“確定”，將會彈出“××的CSS規(guī)則定義”對話框（“××”即為新建CSS的名稱。在該對話框中我們可以看到左側(cè)的“分類”列表中有八大類別：類型、背景、區(qū)塊、方框、邊框、列表、定位、擴展，每個類別在右側(cè)都有相應(yīng)的參數(shù)設(shè)置。CSS樣式表的內(nèi)容在“新建CSS規(guī)則”對話框中作好選擇并18CSS樣式表的創(chuàng)建1．選擇“類型”類別，該類別中有如下參數(shù)可以定義：【Font-family】（字體），設(shè)定時，需考慮瀏覽器中有無該字體?！綟ont-size】（大?。?，注意度量單位?！綟ont-weight】（粗細），除了normal（正常）、bold（粗體）、bolder（特粗）、lighter（細體）外，還有9種以像素為度量為單位的設(shè)置方式。【Font-style】（樣式），也就是字體的樣式，包括“normal（正常）”、“italic（斜體）”和“oblique（偏斜體）”?！綥ine-height】（行高），就是行距。注意，行距只能以是字體大小值為【Font-variant】（變形），可以將正常文字一半尺寸后大寫顯示，但IE目前不支持這項屬性?！綯ext-transform】（大小寫），這項屬性能輕而易舉地控制字母大小寫，有capitalize（首字大寫）、uppercase（大寫）、lowercase（小寫）和none（無）4種?！綯ext-decoration】（修飾），用于控制鏈接文本的顯示形態(tài)，有underline（下劃線）、overline（無下劃線）、line-through（刪除線）、blink（閃爍）和none（無，使上述效果均不會發(fā)生）等5種修飾方式。CSS樣式表的創(chuàng)建1．選擇“類型”類別，該類別中有如下參數(shù)可19CSS樣式表的創(chuàng)建2．選擇“背景”類別，有如下參數(shù)可以定義：【Background-color】（背景顏色），設(shè)置背景顏色?！綛ackground-image】（背景圖像），設(shè)置網(wǎng)頁背景圖像?！綛ackground-repeat】（重復(fù)），控制背景圖像的平鋪方式，有no-repeat（不重復(fù)）、repeat（重復(fù)，沿水平、垂直方向平鋪）、repeat-X（橫向重復(fù)，圖像沿水平方向平鋪）和repeat-Y（縱向重復(fù)，沿圖像垂直方向平鋪）4種選擇?！綛ackground-attachment】（附加），用于控制背景圖像是否會隨頁面的滾動而一起滾動。有fixd（固定，文字滾動時，背景圖像保質(zhì)固定）和scroll（滾動，背景圖像隨文字內(nèi)容一起滾動）兩種選擇?！綛ackground-position】（水平位置/垂直位置），確定背景圖像的水平、垂直位置。CSS樣式表的創(chuàng)建2．選擇“背景”類別，有如下參數(shù)可以定義：20CSS樣式表的創(chuàng)建3．選擇“區(qū)塊”類別，有如下參數(shù)可以定義：【W(wǎng)ord-spacing】（單詞間距）：設(shè)置單詞的間距?！綥etter-spacing】（字母間距）：設(shè)置字母或字符的間距。增大間距設(shè)為正值，減小間距設(shè)為負值?！綱ertical-align】（垂直對齊方式）：指定對象的垂直對齊方式?！綯ext-align】（文本對齊）：設(shè)置對象文本的水平對齊方式?！綯ext-indent】（文本縮進）：指定第一行文本縮進的程度。【W(wǎng)hite-space】（空格）：確定如何處理元素中的空白?！綝isplay】（顯示）：指定是否顯示以及如何顯示元素。CSS樣式表的創(chuàng)建3．選擇“區(qū)塊”類別，有如下參數(shù)可以定義：21CSS樣式表的創(chuàng)建4．選擇“方框”類別，有如下參數(shù)可以定義：【W(wǎng)idth/Height】（寬和高）：設(shè)置元素的寬度和高度?！綟loat】（浮動）：設(shè)置其他元素（如文本、層、表格等）在哪個邊圍繞元素浮動?！綜lear】（清除）：清除不允許層的邊?！綪adding】（填充）：指定元素內(nèi)容與元素邊框之間的間距。選擇“全部相同”可設(shè)置相同，取消選擇“全部相同”可分別設(shè)置上、下、左、右各邊的填充間距?！綧argin】（邊界）：指定一個元素的邊框與另一個元素之間的間距。CSS樣式表的創(chuàng)建4．選擇“方框”類別，有如下參數(shù)可以定義：22CSS樣式表的創(chuàng)建5．選擇“邊框”類別，有如下參數(shù)可以定義：【Style】（樣式）：設(shè)置邊框的樣式外觀?！網(wǎng)idth】（寬度）：設(shè)置邊框的精細?！綜olor】（顏色）：設(shè)置邊框的顏色。CSS樣式表的創(chuàng)建5．選擇“邊框”類別，有如下參數(shù)可以定義：23CSS樣式表的編輯1．CSS樣式表代碼在前文的“CSS規(guī)則定義”對話框中設(shè)置的CSS樣式參數(shù)會被Dreamweaver以CSS代碼的形式記錄到HTML網(wǎng)頁或CSS文件中。例如，新建一個類樣式，名稱為“mystyle”，選擇“僅限該文檔”：CSS樣式表的編輯1．CSS樣式表代碼24CSS樣式表的編輯點擊“確定”后，在“CSS規(guī)則定義”對話框的“類型”類別中設(shè)置“Font-size”為12px，“Color”為#666，“Text-decoration”為“none”，點擊“確定”。切換到“代碼”視圖，在代碼頭部可以看到下圖所示的CSS代碼：實際上，網(wǎng)頁文件本質(zhì)上是由HTML代碼和其它各種代碼組成的文檔，在編輯器中的各種設(shè)置都會生成相應(yīng)的代碼。我們也可以直接在“代碼”視圖中輸入CSS代碼，和在對話框中設(shè)置的結(jié)果是一樣的。CSS樣式表的編輯點擊“確定”后，在“CSS規(guī)則定義”對25CSS樣式表的編輯DreamweaverCS5的代碼編輯功能很實用，在“代碼”視圖中編輯代碼時，經(jīng)常會有彈出菜單提示，我們可以利用這些彈出菜單快速地編輯CSS代碼。以前面的“mystyle”設(shè)置為例，在代碼中找到<style></style>標記對，在其中輸入“.style{”后就會彈出菜單，菜單中列出了所有可編輯的CSS代碼項，在菜單中選擇“font-size”后回車即可輸入這段代碼（輸入“f”可快速定位到以“f”開頭的項）：在實際工作中，如果對于代碼設(shè)置CSS樣式很熟練的話，對網(wǎng)頁設(shè)計會更加有利，效率也更高。當然，對代碼的掌握相對來說也較難一些，要對各種常用設(shè)置的代碼單詞比較熟悉才行。小貼士CSS樣式表的編輯DreamweaverCS5的代碼編26CSS樣式表的編輯2．修改CSS樣式表當某個樣式創(chuàng)建成功后，就可以在DreamweaverCS5窗口的“CSS樣式”面板中看到該樣式的名稱。要想修改已經(jīng)設(shè)置過的CSS樣式，可以直接雙擊要修改的樣式名稱，將打開“CSS規(guī)則定義”對話框，在里面可以對樣式屬性進行修改。當然，我們也可以在“代碼”視圖中找到要修改的樣式，直接在代碼里修改。CSS樣式表的編輯2．修改CSS樣式表要想修改已經(jīng)設(shè)置過27外部樣式表的應(yīng)用前面的CSS樣式表是定義在網(wǎng)頁內(nèi)部的，屬于內(nèi)部樣式表，它只對該網(wǎng)頁對作用。在制作網(wǎng)站時，經(jīng)常要使用外部樣式表，它可以應(yīng)用到所有關(guān)聯(lián)的網(wǎng)頁中。1．新建外部樣式表文件在前文的圖6-8“新建CSS規(guī)則”對話框中，在設(shè)置了“選擇器類型”和“選擇器名稱”后，如果在“規(guī)則定義”里選擇“新建樣式表文件”，點擊“確定”，可以打開“將樣式表文件另存為”對話框。選擇保存位置、輸入文件名后，將新建的CSS文件以單獨文檔的形式存儲在站點中，可以將后面要設(shè)置的各種CSS樣式都保存在該CSS文件內(nèi)。外部樣式表的應(yīng)用前面的CSS樣式表是定義在網(wǎng)頁內(nèi)部的，屬28外部樣式表的應(yīng)用2．鏈接外部CSS樣式表文件創(chuàng)建了外部CSS樣式表后，必須將網(wǎng)頁鏈接到樣式表文件，才能讓樣式表文件中的樣式設(shè)置應(yīng)用到網(wǎng)頁中。鏈接外部樣式表方法如下：（1）首先打開要鏈接外部樣式表的網(wǎng)頁文件。（2）打開“格式”菜單，選擇“CSS樣式”子菜單中的“附加樣式表”命令，將打開“鏈接外部樣式表”對話框在“文本/URL”中輸入要鏈接的外部樣式表文件的URL，或單擊“瀏覽”查找并指定外部樣式表文件；在“添加為”選項中選擇“鏈接”，如果要嵌套樣式表則要選擇“導(dǎo)入”。（3）點擊“確定”后，即可將外部樣式表鏈接到網(wǎng)頁中，從而使該外部樣式表中的樣式設(shè)置對當前網(wǎng)頁起作用。外部樣式表的應(yīng)用2．鏈接外部CSS樣式表文件在“文本/U29外部樣式表的應(yīng)用2．鏈接外部CSS樣式表文件創(chuàng)建了外部CSS樣式表后，必須將網(wǎng)頁鏈接到樣式表文件，才能讓樣式表文件中的樣式設(shè)置應(yīng)用到網(wǎng)頁中。鏈接外部樣式表方法如下：（1）首先打開要鏈接外部樣式表的網(wǎng)頁文件。（2）打開“格式”菜單，選擇“CSS樣式”子菜單中的“附加樣式表”命令，將打開“鏈接外部樣式表”對話框在“文本/URL”中輸入要鏈接的外部樣式表文件的URL，或單擊“瀏覽”查找并指定外部樣式表文件；在“添加為”選項中選擇“鏈接”，如果要嵌套樣式表則要選擇“導(dǎo)入”。（3）點擊“確定”后，即可將外部樣式表鏈接到網(wǎng)頁中，從而使該外部樣式表中的樣式設(shè)置對當前網(wǎng)頁起作用。外部樣式表的應(yīng)用2．鏈接外部CSS樣式表文件在“文本/U30項目總結(jié)本項目介紹了框架網(wǎng)頁與樣式表的知識。在同一個站點中有許多網(wǎng)頁具有相同的導(dǎo)航欄、標題欄等，如果在制作每個網(wǎng)頁時都要重復(fù)制作這些相同的內(nèi)容顯得效率較低，框架能夠很好的解決這個問題。

CSS樣式表是一種非常有用的技術(shù)，它可以很好的設(shè)置網(wǎng)頁元素的各種樣式，將樣式表與網(wǎng)頁相關(guān)聯(lián)，關(guān)聯(lián)的網(wǎng)頁將自動套用樣式表中的格式，使所有網(wǎng)頁中都可以應(yīng)用相同的樣式，可以保證站點風格的統(tǒng)一，還能提高網(wǎng)頁制作的效率。項目總結(jié)本項目介紹了框架網(wǎng)頁與樣式表的知識。在同一個站點31推薦資源腳本之家之“CSS教程”：/books/list241_1.htmlE書吧之“CSS教程”下載：/sort/216_2.htm推薦資源腳本之家之“CSS教程”：32謝謝觀賞！謝謝觀賞！33本PPT為可編輯版本，您看到以下內(nèi)容請刪除后使用，謝謝您的理解本PPT為可編輯版本，您看到以下內(nèi)容請刪除后使用，謝謝您的理34【解析】【解答】（1）氯化鈉是由鈉離子和氯離子構(gòu)成的；金剛石是由碳原子構(gòu)成的；干冰是由二氧化碳分子構(gòu)成的；（2）質(zhì)子數(shù)為11的是鈉元素，鈉元素原子的最外層電子數(shù)1，在化學(xué)反應(yīng)中容易失去一個電子形成陽離子；（3）化學(xué)變化是生成新分子的變化，其實質(zhì)是分子分解成原子，原子重新組合形成新的分子，故該反應(yīng)中沒有變的是碳原子和氧原子。

故答案為：氯化鈉；失去；D。

【分析】物質(zhì)有微粒構(gòu)成，構(gòu)成物質(zhì)的微粒有原子、分子、離子是那種，金屬、稀有氣體由原子構(gòu)成；常見氣體由分子構(gòu)成；堿和鹽由離子構(gòu)成。在化學(xué)變化中，原子種類、質(zhì)量、數(shù)目保持不變。26.用微粒的觀點解釋下列現(xiàn)象：

（1）今年我國要求“公共場所全面禁煙”．非吸煙者往往因別人吸煙而造成被動吸煙。

（2）夏天鋼軌間的縫隙變小。

【答案】（1）分子是在不斷的運動的.

（2）夏天溫度高，鐵原子間的間隔變小.【考點】物質(zhì)的微粒性

【解析】【解答】（1）吸煙生成煙霧，煙霧分子因為運動，擴散到空氣中，使非吸煙者被動吸入煙霧分子，造成被動吸煙；

（2）鋼軌由鐵原子構(gòu)成.每兩根鋼軌間都有一定的間隙，夏天由于氣溫高，使得鋼軌中鐵原子的間隔變大，表現(xiàn)為鋼軌的體積膨脹，則鋼軌間的間隙變小.

故答案為：（1）分子是在不斷運動的；（2）夏天高溫，鐵原子間的間隔變小.

【分析】微粒觀點的主要內(nèi)容：物質(zhì)是由分子（或原子構(gòu)成），分子間有間隔，分子處于永停息的運動狀態(tài)中.（1）煙霧分子屬氣體分子，在空氣中擴散較快，使非吸煙者被動吸煙；

（2）鐵原子間有一定的間隔，溫度升高，則鐵原子間間隔變大，反之則變小，夏天高溫狀態(tài)下，鐵原子間間隔變大，使得鋼軌體積膨脹，則鋼軌間的縫隙變小.【解析】【解答】（1）氯化鈉是由鈉離子和氯離子構(gòu)成的；金剛石35【考點】物質(zhì)的微粒性

【解析】【解答】（1）鐵屬于金屬單質(zhì)，是由鐵原子直接構(gòu)成；氯化鈉是由鈉離子和氯離子構(gòu)成的；二氧化碳是由二氧化碳分子構(gòu)成的．（2）①當質(zhì)子數(shù)=核外電子數(shù)，為原子，a=2+8=10，該粒子是原子．原子序數(shù)=質(zhì)子數(shù)=10．②當a=8時，質(zhì)子數(shù)=8，核外電子數(shù)=10，質(zhì)子數(shù)＜核外電子數(shù)，為陰離子。

故答案為：原子；離子；分子；10；10；陰離子。

【分析】物質(zhì)有微粒構(gòu)成，構(gòu)成物質(zhì)的微粒有原子、分子、離子是那種，金屬、稀有氣體由原子構(gòu)成；常見氣體由分子構(gòu)成；堿和鹽由離子構(gòu)成。當核電荷數(shù)等于核外電子數(shù)，表示原子，小于時表示陰離子，大于時表示陽離子。25.初中化學(xué)學(xué)習(xí)中，我們初步認識了物質(zhì)的微觀結(jié)構(gòu)。（3）升高溫度分子運動速度就加快，只要能說明溫度高了運動速度快了的例子都可以，例如陽光下或者溫度高衣服干得快，溫度高水蒸發(fā)的快，糖在熱水里比在冷水里溶解的快等；

（4）由于注射器裝入的藥品少，現(xiàn)象明顯，又是封閉狀態(tài)，所以可以控制體積節(jié)省藥品、可以減少氣體揮發(fā)造成的污染等．

故答案為：（1）固體；

（2）分子的質(zhì)量大小或者相對分子質(zhì)量大?。ê侠砑唇o分）；

（3）陽光下或者溫度高衣服干得快，溫度高水蒸發(fā)的快，糖在熱水里比在冷水里溶解的快等；

（4）可以控制體積節(jié)省藥品、可以減少氣體揮發(fā)造成的污染等

【分析】（1）根據(jù)實驗現(xiàn)象判斷氯化銨的狀態(tài)；（2）根據(jù)它們的相對分子質(zhì)量的區(qū)別考慮；（3）根據(jù)溫度與運動速度的關(guān)系考慮；（4）根據(jù)注射器的特點考慮．【考點】物質(zhì)的微粒性36【解析】【解答】A、向一定質(zhì)量的鹽酸和氯化鈣的混合溶液中逐滴加入碳酸鈉溶液至過量的過程中，生成氯化鈉的質(zhì)量不斷增大，當碳酸鈉與鹽酸和氯化鈣完全反應(yīng)時，氯化鈉的質(zhì)量不再增大，A符合題意；

B、向稀硫酸中加水，溶液的pH逐漸增大至接近于7，B不符合題意；

C、向一定質(zhì)量的稀硫酸中逐滴加入氫氧化鋇溶液至過量的過程中，氫氧化鋇不斷和硫酸反應(yīng)生成硫酸鋇沉淀和水，溶質(zhì)的質(zhì)量減小，質(zhì)量分數(shù)也減小，當氫氧化鋇和稀硫酸完全反應(yīng)時，繼續(xù)滴加氫氧化鋇溶液時，質(zhì)量分數(shù)應(yīng)該由小變大，C不符合題意；

D、加熱高錳酸鉀時，當溫度達到一定程度時，高錳酸鉀開始分解生成錳酸鉀、二氧化錳和氧氣，隨著反應(yīng)的進行，剩余固體的質(zhì)量不斷減少，當高錳酸鉀完全反應(yīng)時，剩余固體的質(zhì)量不再變化，D符合題意?！窘馕觥俊窘獯稹緼、可燃物的在著火點是一定的，不會降低，故說法錯誤，可選；

B、爆炸是物質(zhì)在有限的空間內(nèi)，發(fā)生急劇燃燒，短時間內(nèi)聚集大量的熱，使周圍的氣體的體積膨脹造成的．可見爆炸需要氧氣的參與，可使燃燒處于暫時缺氧狀態(tài)，達到滅火的目的．故說法正確，不可選；【解析】【解答】燃燒需要同時滿足三個條件：一是要有可燃物，二是可燃物要與氧氣接觸，三是溫度要達到可燃物的著火點；以上三個條件都能滿足時，可燃物才能發(fā)生燃燒。滅火的原理就是破壞燃燒的條件。根據(jù)描述，自動滅火陶瓷磚會噴出氦氣和二氧化碳，故滅火的原理是隔絕氧氣?！窘馕觥俊窘獯稹緼、向一定質(zhì)量的鹽酸和氯化鈣的混合溶液中逐滴37【解析】【解答】解：A、從題目中表格知，H2體積分數(shù)為10%﹣﹣70%的H2和空氣混合氣體，點燃時會發(fā)生爆炸，故A正確；

B、收集的H2能安靜燃燒，說明H2的純度大于等于80%，故B項錯誤；

C、用向下排空氣法收集H2

，保持試管倒置移近火焰，如果沒有聽到任何聲音，表示收集的H2純度大于等于80%，故C項錯誤；

D、氫氣和空氣的混合氣體點燃不一定發(fā)生爆炸，只有在爆炸極限范圍內(nèi)才會發(fā)生爆炸，故D項錯誤．

故選A．

【分析】可燃物質(zhì)（可燃氣體、蒸氣和粉塵）與空氣（或氧氣）在一定的濃度范圍內(nèi)均勻混合，遇著火源可能會發(fā)生爆炸，這個濃度范圍稱為爆炸極限．可燃性混合物能夠發(fā)生爆炸的最低濃度和最高濃度，分別稱為爆炸下限和爆炸上限，在低于爆炸下限時不爆炸也不著火，在高于爆炸上限同樣不燃不爆．因此可燃性氣體在點燃前需要先檢驗氣體的純度，以防發(fā)生爆炸．【解析】【解答】A、通過實驗可以知道燒杯中的白磷沒有燃燒，說明燒杯中的白磷雖然溫度達到著火點，但沒有與氧氣接觸，所以不能燃燒，從而可以判斷燒杯中的熱水不僅僅是只起到加熱的作用，故A說法正確；

B、銅片上白磷燃燒是溫度達到了著火點且與氧氣接觸，滿足燃燒的條件，故B說法正確；

C、銅片上的紅磷沒有燃燒是溫度過低沒有達到其著火點，沒有滿足燃燒的條件，故C說法正確；

D、燒杯中的白磷通入空氣（氧氣）就會燃燒，出現(xiàn)“水火相容”的奇觀，故D說法錯誤．

故選D．【解析】【解答】解：A、從題目中表格知，H2體積分數(shù)為10%3824.能源、環(huán)境、安全已成為人們?nèi)找骊P(guān)注的問題．

（1）三大化石燃料包括煤、________、天然氣等；它們都是________（填“可再生”或“不可再生”）能源．

（2）控制反應(yīng)的條件可使燃料充分燃燒．燃煤發(fā)電時，將煤塊粉碎成煤粉的目的是________（3）天然氣主要成分為甲烷，寫出甲烷充分燃燒的化學(xué)方程式________下列有關(guān)天然氣（或甲烷）的說法正確的是________（填字母）．

A．沼氣中的主要成分是甲烷

B．甲烷氣體不會產(chǎn)生溫室效應(yīng)

C．用天然氣代替煤作燃料，有利于減少酸雨形成YouandyourfriendsareleavingaconcertonaFridaynight.Whenyougetoutside,yourearsareringing.Youhavetoshouttobeheard.36Sonoharmdone…right?Notquite.Temporarybuzzingmaybeeasytoignore,butrepeatedexposuretoloudnoisewilleventuallycauseserious---andirreversible(無法治愈的)---hearingloss.AnewstudyconductedbyresearchersatBrighamandWomen’sHospitalinBostonshowsthatoneinfivepeoplebetweentheagesof12and19areexperiencingslighthearingloss,andonein20havemildhearingloss.37Butthegoodnewsisthatthereplentyofwaysyoucanprotectyourearsfromfurtherdamage—andstilllistentothemusicyoulove:

Askaround.Putyourearbudsinoryourheadphoneson,andthenaskafriendnexttoyouwhetherornotheorshecanhearwhatyou’relisteningto.38Turnitdown.

Buynoise-cancelingheadphones.Apairofearbudsorheadphonesthatfitscomfortablywilllimitoutsidenoisesothatyoucanhearyourmusicbetteratlowervolumes.24.能源、環(huán)境、安全已成為人們?nèi)找骊P(guān)注的問題．39DW項目六電子商務(wù)網(wǎng)頁制作框架網(wǎng)頁與樣式表DW項目六電子商務(wù)框架網(wǎng)頁與樣式表40說出什么是框架；會建立框架與框架集，為各個框架填充內(nèi)容；會調(diào)整框架的外觀；

熟悉CSS樣式表的功能；能夠完成樣式表的創(chuàng)建和編輯；

會創(chuàng)建外部樣式表并應(yīng)用到頁面上。項目目標說出什么是框架；項目目標41框架網(wǎng)頁的含義框架是一種布局技術(shù)，它是將瀏覽器窗口劃分為若干個獨立的區(qū)域，每個區(qū)域中都有各自的內(nèi)容，這些區(qū)域稱為“框架”?？蚣鼙旧聿⒉话唧w的網(wǎng)頁元素，它只是存放文檔的容器，每個框架顯示不同的頁面，并且可以互不干擾地變化。這樣的一組框架就構(gòu)成了框架集?？蚣芗旧聿话魏蝺?nèi)容，它只是一個HTML文件，告訴瀏覽器如何顯示一組框架?？蚣艹Ｓ糜谡军c導(dǎo)航系統(tǒng)，如網(wǎng)頁的導(dǎo)航按鈕、網(wǎng)頁LOGO和標題等，對于一個網(wǎng)站而言，其中的許多網(wǎng)頁一般都具有相同的導(dǎo)航、LOGO等部分，這時我們可以將這些相同的部分做成框架網(wǎng)頁，這樣就可以在每個頁面中重復(fù)使用，從而大大提高網(wǎng)頁制作的效率。在進行框架網(wǎng)頁設(shè)計時，應(yīng)先花一些時間進行版面的安排，分清各個框架頁面內(nèi)容的主次，把最重要的頁面放置在面積最大、位置最醒目的框架中?？蚣芫W(wǎng)頁的含義框架是一種布局技術(shù)，它是將瀏覽器窗口劃分為42創(chuàng)建框架和框架集在DreamweaverCS5中可以通過兩種方法插入框架集：1．通過“插入”欄，在現(xiàn)有網(wǎng)頁中直接插入框架。選擇“插入”工具欄的“布局”選項中的“框架”選項，可以隨意選擇自己需要的框架集類型。創(chuàng)建框架和框架集在DreamweaverCS5中可以通過兩43創(chuàng)建框架和框架集2．使用“新建文檔”對話框創(chuàng)建新的空框架集。使用“新建文檔”對話框創(chuàng)建新框架集的一般步驟如下：（1）打開“文件”菜單，選擇“新建”命令，將打開“新建文檔”對話框，在“示例中的頁”類別中選擇“框架頁”。創(chuàng)建框架和框架集2．使用“新建文檔”對話框創(chuàng)建新的空框架集。44創(chuàng)建框架和框架集（2）在“示例頁”列表中選擇框架集類型，可以在對話框右端看到該框架集的預(yù)覽效果和相關(guān)描述。（3）單擊“創(chuàng)建”按鈕，在文檔窗口可以看到新創(chuàng)建的框架集，同時DreamweaverCS5會打開一個“框架標簽輔助功能屬性”對話框。（4）為每個框架輸入恰當?shù)臉祟}名稱，然后點擊“確定”即可成功創(chuàng)建框架頁?？蚣艿臉祟}即框架的名稱，它用于識別不同的框架，在指定打開鏈接目標的目標框架或腳本在引用該框架時，框架名稱就派上用場了。一般情況下使用系統(tǒng)提供的默認值，如mainFrame，topFrame，leftFrame等，這些名稱都是約定俗成的。當然，你也可以使用自己定義的名稱。小貼士創(chuàng)建框架和框架集（2）在“示例頁”列表中選擇框架集類型，可以45選擇框架和框架集對框架和框架集進行操作，首先必須選中它。我們可以在文檔窗口中選擇框架或框架集，也可以通過“框架”面板進行選擇。1．在文檔窗口中選擇框架或框架集（1）選擇框架在“設(shè)計”視圖中，按住Alt鍵的同時單擊某個框架內(nèi)部，即可選中該框架，此時該框架的邊框被虛線環(huán)繞。（2）選擇框架集單擊框架集的某一內(nèi)部框架邊框即可選中該框架集，此時該框架集的所有邊框被虛線環(huán)繞。要執(zhí)行這一操作，框架邊框必須是可見的。如果看不到框架邊框，你可以通過打開“查看”菜單，選擇“可視化助理”子菜單中的“框架邊框”使框架邊框可見。小貼士選擇框架和框架集對框架和框架集進行操作，首先必須選中它。46選擇框架和框架集2．在“框架”面板中選擇框架或框架集在文檔窗口中選擇框架和框架集有時候不是很方便，DreamweaverCS3提供了“框架”面板，便于對框架和框架集進行選擇操作。打開“窗口”菜單，選擇“框架”命令，或按快捷鍵Shift+F2，可以打開“框架”面板。（1）選擇框架在“框架”面板中單擊框架即可選中該框架，此時在文檔窗口中該框架的邊框被虛線環(huán)繞，在“框架”面板中該框架周圍會顯示一個選擇輪廓。（2）選擇框架集在“框架”面板中單擊環(huán)繞框架集的邊框，即可選中該框架集，此時該框架集的所有邊框被虛線環(huán)繞，在“框架”面板中該框架集周圍會顯示一個選擇輪廓。選擇框架和框架集2．在“框架”面板中選擇框架或框架集（1）選47保存框架和框架集對于初學(xué)者來說，為了避免出現(xiàn)混亂，在創(chuàng)建完框架和框架集后，最好立刻保存框架和框架集。使用了框架的頁面包含若干個文件。用戶在保存網(wǎng)頁時不僅需要保存框架中的網(wǎng)頁，還要保存框架集文件。在具體操作中可以分別保存或者一次保存所有文件。1．分別保存將光標定位在要保存的框架中，打開“文件”菜單，選擇“保存框架”命令，將打開“另存為”對話框，輸入要保存的文件名，點擊“保存”即可。按此方法依次保存其它框架。在保存了所有的框架后，還需要保存框架集。在“框架”面板或文檔窗口中選中框架集，打開“文件”菜單，選擇“保存框架頁”命令，單擊“保存”按鈕，將保存該框架集。保存框架和框架集對于初學(xué)者來說，為了避免出現(xiàn)混亂，在創(chuàng)建48保存框架和框架集2．一次保存打開“文件”菜單，選擇“保存全部”命令，DreamweaverCS5將打開“另存為”對話框，依次提示要保存的內(nèi)容。首先要保存的是主框架集，在文檔窗口中會以斜線框包圍整個框架，并同時彈出“另存為”對話框。輸入要保存的框架集名，單擊“保存”后，將打開第二個“另存為”對話框，提示將要保存第一個框架文件，在文檔窗口中也會以斜線框包圍要保存的框架。輸入要保存的框架文件名稱，單擊“保存”后，將打開第三個“另存為”對話框，提示將要保存第二個框架文件。就這樣，依次保存所有的框架文件。保存框架和框架集2．一次保存輸入要保存的框架集名，單擊“49設(shè)置框架和框架集屬性1．設(shè)置框架的屬性設(shè)置框架屬性主要是通過設(shè)置框架的“屬性”面板中的相應(yīng)參數(shù)實現(xiàn)的，當選擇某個框架時，“屬性”面板中將顯示該框架的屬性?？蚣苊Q：決定用來作為超級鏈接目標和腳本引用的當前框架名稱。源文件：設(shè)置框架的源文檔。滾動：設(shè)置在沒有足夠空間顯示當前框架中的內(nèi)容時是否使用滾動條。不能調(diào)整大?。菏篂g覽者不能調(diào)整框架大小。邊框：控制當前框架的邊框是否顯示。邊框顏色：設(shè)置所有和當前框架相鄰的邊框顏色。邊界寬度：設(shè)置框架左右邊框和內(nèi)容之間的距離（單位為像素）。邊界高度：設(shè)置框架上下邊框和內(nèi)容之間的距離（單位為像素）。設(shè)置框架和框架集屬性1．設(shè)置框架的屬性框架名稱：決定用來作為50設(shè)置框架和框架集屬性2．設(shè)置框架集的屬性要設(shè)置框架集的屬性，可以選擇該框架集，在“屬性”面板里設(shè)置相應(yīng)的屬性。邊框：控制當前框架集內(nèi)框架的邊框。①選擇“是”可以顯示三維灰色的邊框；②選擇“否”可以顯示扁平灰色的邊框；③選擇“默認”可以由瀏覽器確定如何顯示邊框。邊框?qū)挾龋涸O(shè)置當前框架集中邊框的寬度。邊框顏色：設(shè)置當前框架集中所有邊框的顏色。值：指所選擇的行或列的大小。單位：指所選擇的行或列大小的單位。行列選定范圍：選取框架集的行或列。設(shè)置框架和框架集屬性2．設(shè)置框架集的屬性邊框：控制當前框架集51CSS樣式表CSS樣式表是網(wǎng)頁設(shè)計中非常重要的技術(shù)，運用CSS樣式表我們可以實現(xiàn)很多網(wǎng)頁的樣式和效果，還可以大大提高制作網(wǎng)頁的效率，同時運用CSS+DIV進行網(wǎng)頁布局則是更為高級和先進的網(wǎng)頁布局技術(shù)。CSS樣式表CSS樣式表是網(wǎng)頁設(shè)計中非常重要的技術(shù)，運用52什么是CSS樣式表CSS是層疊樣式表單（CascadingStyleSheets）的縮寫，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。因此它最基本的概念就是層疊。層疊的意思是指在同一個HTML文檔中可以有多種樣式表存在，不同層次樣式表根據(jù)其所在的位置擁有不同的優(yōu)先級。要理解“層疊”的概念，首先應(yīng)該了解一下CSS樣式表的三種定義和使用的優(yōu)先級。1．CSS樣式表的三種定義（1）外部樣式表：將一些樣式信息定義在一個單獨的外部文件中，其擴展名為.CSS。整個網(wǎng)站的所有文件都可以鏈接此文件，并使用其中定義的樣式。（2）內(nèi)嵌樣式表：內(nèi)嵌式樣式表只在當前網(wǎng)頁中起作用，位于<head>區(qū)，與網(wǎng)頁文件一起保存。只對當前網(wǎng)頁文件起作用。（3）內(nèi)聯(lián)樣式表：將樣式信息直接定義在網(wǎng)頁中特定的標記和元素上，只對該標記和元素起作用。什么是CSS樣式表CSS是層疊樣式表單（Cascadin53什么是CSS樣式表2．三種定義之間的關(guān)系這三種定義中內(nèi)聯(lián)樣式表最優(yōu)先，其次是內(nèi)嵌樣式表，最后是外部樣式表。它們之間是互相影響、互相繼承的關(guān)系。網(wǎng)頁元素最終顯示的樣式是優(yōu)先級最高的樣式定義，同時各元素會自動繼承上級父元素中定義的樣式。3．CSS樣式表的功能沒有使用CSS樣式表的網(wǎng)頁只能算是初級作品，CSS樣式表為網(wǎng)頁創(chuàng)新奠定了基石。CSS樣式表的功能如下：（1）對布局、字體、顏色、背景和其它圖文效果實現(xiàn)更加精確的控制。（2）只通過修改一個文件就可以改變多個網(wǎng)頁的外觀和格式。（3）在所有瀏覽器和平臺之間具備兼容性。不像其它的網(wǎng)絡(luò)技術(shù)，樣式表的代碼有很好的兼容性，也就是說，即使瀏覽者丟失了某個插件也不會發(fā)生中斷，使用老版本的瀏覽器時，代碼也不會出現(xiàn)雜亂無章的情況。（4）可以與腳本語言相結(jié)合，使網(wǎng)頁中的元素產(chǎn)生各種動態(tài)效果。（5）更少的編碼、更少的頁數(shù)和更快的下載速度。由于CSS樣式表能夠簡化網(wǎng)頁的格式代碼，所以能加快頁面下載的速度。什么是CSS樣式表2．三種定義之間的關(guān)系54CSS樣式表的創(chuàng)建1．新建CSS樣式表在DreamweaverCS3中，打開“格式”菜單，選擇“CSS樣式”子菜單中的“新建”命令，或者右鍵單擊窗口右側(cè)的“CSS”面板的空白處，在彈出的快捷菜單中選擇“新建”，可以打開“新建CSS規(guī)則”對話框。在該對話框中，可以設(shè)定CSS樣式表選擇器的類型、名稱和CSS樣式表定義的位置?！斑x擇器類型”用于確定CSS規(guī)則的選擇器類型；“選擇器名稱”文本框指定新建CSS樣式表的名稱；“規(guī)則定義”用于指定CSS樣式定義的位置，如選擇第一項“僅限該文檔”則新建內(nèi)部樣式表，選擇第二項“新建樣式表文件”將新建外部樣式表。CSS樣式表的創(chuàng)建1．新建CSS樣式表在該對話框中，可以55CSS樣式表的內(nèi)容在“新建CSS規(guī)則”對話框中作好選擇并填寫CSS名稱后，點擊“確定”，將會彈出“××的CSS規(guī)則定義”對話框（“××”即為新建CSS的名稱。在該對話框中我們可以看到左側(cè)的“分類”列表中有八大類別：類型、背景、區(qū)塊、方框、邊框、列表、定位、擴展，每個類別在右側(cè)都有相應(yīng)的參數(shù)設(shè)置。CSS樣式表的內(nèi)容在“新建CSS規(guī)則”對話框中作好選擇并56CSS樣式表的內(nèi)容在“新建CSS規(guī)則”對話框中作好選擇并填寫CSS名稱后，點擊“確定”，將會彈出“××的CSS規(guī)則定義”對話框（“××”即為新建CSS的名稱。在該對話框中我們可以看到左側(cè)的“分類”列表中有八大類別：類型、背景、區(qū)塊、方框、邊框、列表、定位、擴展，每個類別在右側(cè)都有相應(yīng)的參數(shù)設(shè)置。CSS樣式表的內(nèi)容在“新建CSS規(guī)則”對話框中作好選擇并57CSS樣式表的創(chuàng)建1．選擇“類型”類別，該類別中有如下參數(shù)可以定義：【Font-family】（字體），設(shè)定時，需考慮瀏覽器中有無該字體?！綟ont-size】（大?。⒁舛攘繂挝??！綟ont-weight】（粗細），除了normal（正常）、bold（粗體）、bolder（特粗）、lighter（細體）外，還有9種以像素為度量為單位的設(shè)置方式?！綟ont-style】（樣式），也就是字體的樣式，包括“normal（正常）”、“italic（斜體）”和“oblique（偏斜體）”。【Line-height】（行高），就是行距。注意，行距只能以是字體大小值為【Font-variant】（變形），可以將正常文字一半尺寸后大寫顯示，但IE目前不支持這項屬性?！綯ext-transform】（大小寫），這項屬性能輕而易舉地控制字母大小寫，有capitalize（首字大寫）、uppercase（大寫）、lowercase（小寫）和none（無）4種?！綯ext-decoration】（修飾），用于控制鏈接文本的顯示形態(tài)，有underline（下劃線）、overline（無下劃線）、line-through（刪除線）、blink（閃爍）和none（無，使上述效果均不會發(fā)生）等5種修飾方式。CSS樣式表的創(chuàng)建1．選擇“類型”類別，該類別中有如下參數(shù)可58CSS樣式表的創(chuàng)建2．選擇“背景”類別，有如下參數(shù)可以定義：【Background-color】（背景顏色），設(shè)置背景顏色?！綛ackground-image】（背景圖像），設(shè)置網(wǎng)頁背景圖像?！綛ackground-repeat】（重復(fù)），控制背景圖像的平鋪方式，有no-repeat（不重復(fù)）、repeat（重復(fù)，沿水平、垂直方向平鋪）、repeat-X（橫向重復(fù)，圖像沿水平方向平鋪）和repeat-Y（縱向重復(fù)，沿圖像垂直方向平鋪）4種選擇?！綛ackground-attachment】（附加），用于控制背景圖像是否會隨頁面的滾動而一起滾動。有fixd（固定，文字滾動時，背景圖像保質(zhì)固定）和scroll（滾動，背景圖像隨文字內(nèi)容一起滾動）兩種選擇?！綛ackground-position】（水平位置/垂直位置），確定背景圖像的水平、垂直位置。CSS樣式表的創(chuàng)建2．選擇“背景”類別，有如下參數(shù)可以定義：59CSS樣式表的創(chuàng)建3．選擇“區(qū)塊”類別，有如下參數(shù)可以定義：【W(wǎng)ord-spacing】（單詞間距）：設(shè)置單詞的間距?！綥etter-spacing】（字母間距）：設(shè)置字母或字符的間距。增大間距設(shè)為正值，減小間距設(shè)為負值?！綱ertical-align】（垂直對齊方式）：指定對象的垂直對齊方式?！綯ext-align】（文本對齊）：設(shè)置對象文本的水平對齊方式?！綯ext-indent】（文本縮進）：指定第一行文本縮進的程度?！網(wǎng)hite-space】（空格）：確定如何處理元素中的空白?！綝isplay】（顯示）：指定是否顯示以及如何顯示元素。CSS樣式表的創(chuàng)建3．選擇“區(qū)塊”類別，有如下參數(shù)可以定義：60CSS樣式表的創(chuàng)建4．選擇“方框”類別，有如下參數(shù)可以定義：【W(wǎng)idth/Height】（寬和高）：設(shè)置元素的寬度和高度?！綟loat】（浮動）：設(shè)置其他元素（如文本、層、表格等）在哪個邊圍繞元素浮動?！綜lear】（清除）：清除不允許層的邊?！綪adding】（填充）：指定元素內(nèi)容與元素邊框之間的間距。選擇“全部相同”可設(shè)置相同，取消選擇“全部相同”可分別設(shè)置上、下、左、右各邊的填充間距?！綧argin】（邊界）：指定一個元素的邊框與另一個元素之間的間距。CSS樣式表的創(chuàng)建4．選擇“方框”類別，有如下參數(shù)可以定義：61CSS樣式表的創(chuàng)建5．選擇“邊框”類別，有如下參數(shù)可以定義：【Style】（樣式）：設(shè)置邊框的樣式外觀?！網(wǎng)idth】（寬度）：設(shè)置邊框的精細?！綜olor】（顏色）：設(shè)置邊框的顏色。CSS樣式表的創(chuàng)建5．選擇“邊框”類別，有如下參數(shù)可以定義：62CSS樣式表的編輯1．CSS樣式表代碼在前文的“CSS規(guī)則定義”對話框中設(shè)置的CSS樣式參數(shù)會被Dreamweaver以CSS代碼的形式記錄到HTML網(wǎng)頁或CSS文件中。例如，新建一個類樣式，名稱為“mystyle”，選擇“僅限該文檔”：CSS樣式表的編輯1．CSS樣式表代碼63CSS樣式表的編輯點擊“確定”后，在“CSS規(guī)則定義”對話框的“類型”類別中設(shè)置“Font-size”為12px，“Color”為#666，“Text-decoration”為“none”，點擊“確定”。切換到“代碼”視圖，在代碼頭部可以看到下圖所示的CSS代碼：實際上，網(wǎng)頁文件本質(zhì)上是由HTML代碼和其它各種代碼組成的文檔，在編輯器中的各種設(shè)置都會生成相應(yīng)的代碼。我們也可以直接在“代碼”視圖中輸入CSS代碼，和在對話框中設(shè)置的結(jié)果是一樣的。CSS樣式表的編輯點擊“確定”后，在“CSS規(guī)則定義”對64CSS樣式表的編輯DreamweaverCS5的代碼編輯功能很實用，在“代碼”視圖中編輯代碼時，經(jīng)常會有彈出菜單提示，我們可以利用這些彈出菜單快速地編輯CSS代碼。以前面的“mystyle”設(shè)置為例，在代碼中找到<style></style>標記對，在其中輸入“.style{”后就會彈出菜單，菜單中列出了所有可編輯的CSS代碼項，在菜單中選擇“font-size”后回車即可輸入這段代碼（輸入“f”可快速定位到以“f”開頭的項）：在實際工作中，如果對于代碼設(shè)置CSS樣式很熟練的話，對網(wǎng)頁設(shè)計會更加有利，效率也更高。當然，對代碼的掌握相對來說也較難一些，要對各種常用設(shè)置的代碼單詞比較熟悉才行。小貼士CSS樣式表的編輯DreamweaverCS5的代碼編65CSS樣式表的編輯2．修改CSS樣式表當某個樣式創(chuàng)建成功后，就可以在DreamweaverCS5窗口的“CSS樣式”面板中看到該樣式的名稱。要想修改已經(jīng)設(shè)置過的CSS樣式，可以直接雙擊要修改的樣式名稱，將打開“CSS規(guī)則定義”對話框，在里面可以對樣式屬性進行修改。當然，我們也可以在“代碼”視圖中找到要修改的樣式，直接在代碼里修改。CSS樣式表的編輯2．修改CSS樣式表要想修改已經(jīng)設(shè)置過66外部樣式表的應(yīng)用前面的CSS樣式表是定義在網(wǎng)頁內(nèi)部的，屬于內(nèi)部樣式表，它只對該網(wǎng)頁對作用。在制作網(wǎng)站時，經(jīng)常要使用外部樣式表，它可以應(yīng)用到所有關(guān)聯(lián)的網(wǎng)頁中。1．新建外部樣式表文件在前文的圖6-8“新建CSS規(guī)則”對話框中，在設(shè)置了“選擇器類型”和“選擇器名稱”后，如果在“規(guī)則定義”里選擇“新建樣式表文件”，點擊“確定”，可以打開“將樣式表文件另存為”對話框。選擇保存位置、輸入文件名后，將新建的CSS文件以單獨文檔的形式存儲在站點中，可以將后面要設(shè)置的各種CSS樣式都保存在該CSS文件內(nèi)。外部樣式表的應(yīng)用前面的CSS樣式表是定義在網(wǎng)頁內(nèi)部的，屬67外部樣式表的應(yīng)用2．鏈接外部CSS樣式表文件創(chuàng)建了外部CSS樣式表后，必須將網(wǎng)頁鏈接到樣式表文件，才能讓樣式表文件中的樣式設(shè)置應(yīng)用到網(wǎng)頁中。鏈接外部樣式表方法如下：（1）首先打開要鏈接外部樣式表的網(wǎng)頁文件。（2）打開“格式”菜單，選擇“CSS樣式”子菜單中的“附加樣式表”命令，將打開“鏈接外部樣式表”對話框在“文本/URL”中輸入要鏈接的外部樣式表文件的URL，或單擊“瀏覽”查找并指定外部樣式表文件；在“添加為”選項中選擇“鏈接”，如果要嵌套樣式表則要選擇“導(dǎo)入”。（3）點擊“確定”后，即可將外部樣式表鏈接到網(wǎng)頁中，從而使該外部樣式表中的樣式設(shè)置對當前網(wǎng)頁起作用。外部樣式表的應(yīng)用2．鏈接外部CSS樣式表文件在“文本/U68外部樣式表的應(yīng)用2．鏈接外部CSS樣式表文件創(chuàng)建了外部CSS樣式表后，必須將網(wǎng)頁鏈接到樣式表文件，才能讓樣式表文件中的樣式設(shè)置應(yīng)用到網(wǎng)頁中。鏈接外部樣式表方法如下：（1）首先打開要鏈接外部樣式表的網(wǎng)頁文件。（2）打開“格式”菜單，選擇“CSS樣式”子菜單中的“附加樣式表”命令，將打開“鏈接外部樣式表”對話框在“文本/URL”中輸入要鏈接的外部樣式表文件的URL，或單擊“瀏覽”查找并指定外部樣式表文件；在“添加為”選項中選擇“鏈接”，如果要嵌套樣式表則要選擇“導(dǎo)入”。（3）點擊“確定”后，即可將外部樣式表鏈接到網(wǎng)頁中，從而使該外部樣式表中的樣式設(shè)置對當前網(wǎng)頁起作用。外部樣式表的應(yīng)用2．鏈接外部CSS樣式表文件在“文本/U69項目總結(jié)本項目介紹了框架網(wǎng)頁與樣式表的知識。在同一個站點中有許多網(wǎng)頁具有相同的導(dǎo)航欄、標題欄等，如果在制作每個網(wǎng)頁時都要重復(fù)制作這些相同的內(nèi)容顯得效率較低，框架能夠很好的解決這個問題。

CSS樣式表是一種非常有用的技術(shù)，它可以很好的設(shè)置網(wǎng)頁元素的各種樣式，將樣式表與網(wǎng)頁相關(guān)聯(lián)，關(guān)聯(lián)的網(wǎng)頁將自動套用樣式表中的格式，使所有網(wǎng)頁中都可以應(yīng)用相同的樣式，可以保證站點風格的統(tǒng)一，還能提高網(wǎng)頁制作的效率。項目總結(jié)本項目介紹了框架網(wǎng)頁與樣式表的知識。在同一個站點70推薦資源腳本之家之“CSS教程”：/books/list241_1.htmlE書吧之“CSS教程”下載：/sort/216_2.htm推薦資源腳本之家之“CSS教程”：71謝謝觀賞！謝謝觀賞！72本PPT為可編輯版本，您看到以下內(nèi)容請刪除后使用，謝謝您的理解本PPT為可編輯版本，您看到以下內(nèi)容請刪除后使用，謝謝您的理73【解析】【解答】（1）氯化鈉是由鈉離子和氯離子構(gòu)成的；金剛石是由碳原子構(gòu)成的；干冰是由二氧化碳分子構(gòu)成的；（2）質(zhì)子數(shù)為11的是鈉元素，鈉元素原子的最外層電子數(shù)1，在化學(xué)反應(yīng)中容易失去一個電子形成陽離子；（3）化學(xué)變化是生成新分子的變化，其實質(zhì)是分子分解成原子，原子重新組合形成新的分子，故該反應(yīng)中沒有變的是碳原子和氧原子。

故答案為：氯化鈉；失去；D。

【分析】物質(zhì)有微粒構(gòu)成，構(gòu)成物質(zhì)的微粒有原子、分子、離子是那種，金屬、稀有氣體由原子構(gòu)成；常見氣體由分子構(gòu)成；堿和鹽由離子構(gòu)成。在化學(xué)變化中，原子種類、質(zhì)量、數(shù)目保持不變。26.用微粒的觀點解釋下列現(xiàn)象：

（1）今年我國要求“公共場所全面禁煙”．非吸煙者往往因別人吸煙而造成被動吸煙。

（2）夏天鋼軌間的縫隙變小。

【答案】（1）分子是在不斷的運動的.

（2）夏天溫度高，鐵原子間的間隔變小.【考點】物質(zhì)的微粒性

【解析】【解答】（1）吸煙生成煙霧，煙霧分子因為運動，擴散到空氣中，使非吸煙者被動吸入煙霧分子，造成被動吸煙；

（2）鋼軌由鐵原子構(gòu)成.每兩根鋼軌間都有一定的間隙，夏天由于氣溫高，使得鋼軌中鐵原子的間隔變大，表現(xiàn)為鋼軌的體積膨脹，則鋼軌間的間隙變小.

故答案為：（1）分子是在不斷運動的；（2）夏天高溫，鐵原子間的間隔變小.

【分析】微粒觀點的主要內(nèi)容：物質(zhì)是由分子（或原子構(gòu)成），分子間有間隔，分子處于永停息的運動狀態(tài)中.（1）煙霧分子屬氣體分子，在空氣中擴散較快，使非吸煙者被動吸煙；

（2）鐵原子間有一定的間隔，溫度升高，則鐵原子間間隔變大，反之則變小，夏天高溫狀態(tài)下，鐵原子間間隔變大，使得鋼軌體積膨脹，則鋼軌間的縫隙變小.【解析】【解答】（1）氯化鈉是由鈉離子和氯離子構(gòu)成的；金剛石74【考點】物質(zhì)的微粒性

【解析】【解答】（1）鐵屬于金屬單質(zhì)，是由鐵原子直接構(gòu)成；氯化鈉是由鈉離子和氯離子構(gòu)成的；二氧化碳是由二氧化碳分子構(gòu)成的．（2）①當質(zhì)子數(shù)=核外電子數(shù)，為原子，a=2+8=10，該粒子是原子．原子序數(shù)=質(zhì)子數(shù)=10．②當a=8時，質(zhì)子數(shù)=8，核外電子數(shù)=10，質(zhì)子數(shù)＜核外電子數(shù)，為陰離子。

故答案為：原子；離子；分子；10；10；陰離子。

【分析】物質(zhì)有微粒構(gòu)成，構(gòu)成物質(zhì)的微粒有原子、分子、離子是那種，金屬、稀有氣體由原子構(gòu)成；常見氣體由分子構(gòu)成；堿和鹽由離子構(gòu)成。當核電荷數(shù)等于核外電子數(shù)，表示原子，小于時表示陰離子，大于時表示陽離子。25.初中化學(xué)學(xué)習(xí)中，我們初步認識了物質(zhì)的微觀結(jié)構(gòu)。（3）升高溫度分子運動速度就加快，只要能說明溫度高了運動速度快了的例子都可以，例如陽光下或者溫度高衣服干得快，溫度高水蒸發(fā)的快，糖在熱水里比在冷水里溶解的快等；

（4）由于注射器裝入的藥品少，現(xiàn)象明顯，又是封閉狀態(tài)，所以可以控制體積節(jié)省藥品、可以減少氣體揮發(fā)造成的污染等．

故答案為：（1）固體；

（2）分子的質(zhì)量大小或者相對分子質(zhì)量大?。ê侠砑唇o分）；

（3）陽光下或者溫度高衣服干得快，溫度高水蒸發(fā)的快，糖在熱水里比在冷水里溶解的快等；

（4）可以控制體積節(jié)省藥品、可以減少氣體揮發(fā)造成的污染等

【分析】（1）根據(jù)實驗現(xiàn)象判斷氯化銨的狀態(tài)；（2）根據(jù)它們的相對分子質(zhì)量的區(qū)別考慮；（3）根據(jù)溫度與運動速度的關(guān)系考慮；（4）根據(jù)注射器的特點考慮．【考點】物質(zhì)的微粒性75【解析】【解答】A、向一定質(zhì)量的鹽酸和氯化鈣的混合溶液中逐滴加入碳酸

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論