項目5制作框架網頁由淺入深簡章易懂貼近實際WANGYEZHIZUOXIANGMUSHIXUNJIAOCHENG《網頁制作項目實訓教程》重慶大學出版社CONTENTS任務1利用框架制作成語故事集首頁任務1利用框架制作成語故事集首頁本任務可以分解為1個活動：利用框架制作成語故事集頁面。活動1利用框架制作成語故事集首頁1-1運用素材網頁“Y5-01A.html”、“Y5-01B.html”、“Y5-01C.html”、“Y5-01D.html”、“Y5-01E.html”、“Y5-01F.html”、“Y5-01G.html”制作一個關于成語故事的框架網頁，要求網頁有標題，故事的題目以導航的形式表現，最終效果如下圖所示。活動要求活動1利用框架制作成語故事集首頁1-11、框架網頁的創建依次單擊“插入”->“HTML”->“框架”菜單命令，在展開的下級菜單中可以根據需要選取合適的框架集，如下圖所示，這樣相應的框架網頁就創建完成了。知識窗活動1利用框架制作成語故事集首頁1-12、框架網頁的保存每個框架包含一個文件，因此一個框架集會包含多個文件，在保存網頁時，要將整個網頁文檔都保存下來，下面我們以“上方及左側嵌套”框架為例介紹框架網頁的保存方法。（1）選擇“文件”->“保存全部”命令，整個框架邊框會出現一個陰影框，同時會彈出“另存為”對話框，我們將其命名為“index.html”，表示整個框架集的名稱。（2）單擊“保存”按鈕，彈出第二個“另存為”對話框，右邊框架內側出現陰影，命名為“main.htlm”，表示右邊框架即主框架的文件名。（3）單擊“保存”按鈕，依次彈出第3個和第4個“另存為”對話框，分別命名為“left.html”和“top.html”，表示左邊框架和上方框架的文件名。如下圖所示。活動1利用框架制作成語故事集首頁1-13、框架網頁的鏈接要在題目框架中使用鏈接打開正文框架中的文檔，必須設置鏈接目標，在“屬性”面板中的“鏈接”下拉列表中選擇鏈接文檔應在其中顯示的框架或窗口，如下圖所示。_blank：打開一個新窗口顯示目標網頁。_parent：目標網頁的內容在父框架窗口中顯示。_self：目標網頁的內容在當前所在框架窗口中顯示。_top：目標網頁的內容在最頂層框架窗口中顯示。mainFrame、leftFrame、topFrame：目標網頁的內容在新建的框架中顯示。活動1利用框架制作成語故事集首頁1-1詳細操作步驟請參閱教材。活動實施本活動主要介紹了框架網頁的制作，操作相對簡單。這里要特別注意的是，保存文件時產生的文件數量總是比設計的框架數量多1個，這個多出的文件可以稱之為“首頁”文件，即瀏覽框架類網頁時打開的文件。此外保存時建議對各框架文件進行標識性命名，如左框架文件可以命名為“left.html”，右框架文件可以命名為“right.html”，這樣可以避免在編輯時產生混淆，提高工作效率。活動評價感謝您的觀看由淺入深簡章易懂貼近實際WANGYEZHIZUOXIANGMUSHIXUNJIAOCHENG《網頁制作項目實訓教程》重慶大學出版社項目6使用CSS美化網頁效果由淺入深簡章易懂貼近實際WANGYEZHIZUOXIANGMUSHIXUNJIAOCHENG《網頁制作項目實訓教程》重慶大學出版社CONTENTS任務1初識CSS

任務2使用CSS美化文本與圖像任務3使用CSS布局網頁任務4使用CSS設置背景任務1初識CSS本任務可以分解為2個活動：使用行內樣式美化網頁；使用內嵌樣式表美化網頁。活動1使用行內樣式美化網頁1-1對網頁文件“task6-1.html”的主標題進行CSS樣式的設置及應用，文件另存為task6-1-1.html，效果如下圖所示。活動要求活動1使用行內樣式美化網頁1-11、CSS的設置啟動DreamweaverCS6，按【Shift+F11】組合鍵或【窗口】菜單的【CSS樣式】可打“CSS樣式”面板設置CSS樣式表，如下圖所示。知識窗活動1使用行內樣式美化網頁1-12、CSS的分類CSS層疊樣式表按可以分為三種：內聯樣式表（行內樣式表）、嵌入樣式表和外部樣式表。內聯式樣式表：是在現有HTML元素的基礎上，用style屬性把特殊的樣式直接加入到那些控制信息的標記中。嵌入式樣式表：通常包含在HTML，文檔的頭部，即head元素中，并且有一個專門的元素style來標記這種樣式表。外部式樣式表：是指將樣式表作為一個獨立的文件保存在計算機上，這個文件以“.css”作為文件的擴展名。樣式在樣式表文件中定義和在嵌入式樣式表中的定義是一樣的，只是不再需要style元素。

在DreamweaverCS6中，內聯樣式表（行內樣式表）可以直接通過屬性面板的CSS樣式屬性中的“目標規則”->“新內聯樣式”進行創建，如圖A所示。內嵌樣式表和外部樣式表一般都通過點擊“CSS樣式”面板的新建按鈕來創建，如圖所示。A

B

活動1使用行內樣式美化網頁1-1詳細操作步驟請參閱教材。活動實施使用行內樣式美化網頁是HTML應用CSS的第一種方法。使用HTML屬性style，將屬性和值放在style屬性中即可，適用于樣式沒有可復用性的場合。在實驗操作中注意與直接設置HTML元素屬性的效果對比學習。活動評價活動2使用內嵌樣式表美化網頁1-2對網頁文件“task6-1-1.html”進行CSS樣式的設置及應用，文件另存為task6-1-2.html，效果如下圖所示。活動要求活動2使用內嵌樣式表美化網頁1-21、CSS規則類型類（可應用于任何HTML元素）：CSS類選擇器名稱以英文句點（.）開頭。如圖A所示。ID（僅應用于一個HTML元素）：ID選擇器又可以稱為標識選擇器，它的名字以英文井號（#）開頭，這種選擇器樣式一般在頁面中只用在一個元素上。標簽（重新定義HTML元素）：“標簽（重新定義HTML元素）”，可以實現用CSS重新定義HTML標簽的外觀的功能。復合內容（基于選擇的內容）：例如，針對<h1>標簽、<h2>標簽、<h3>標簽同時進行了CSS規則定義，如圖B所示。復合內容“選擇器名稱”下拉列表框中包含4個有關超級鏈接的選擇器名稱，利用它們可以對超級鏈接的外觀進行重新定義。a:link超級鏈接的正常狀態；a:visited訪問過的超級鏈接狀態；a:hover鼠標指針指向超級鏈接的狀態；a:active選中超級鏈接狀態。知識窗A

B

活動2使用內嵌樣式表美化網頁1-22、CSS樣式的應用套用樣式表的方法主要有三種：（1）在“屬性”面板中選擇應用特定的樣式打開“屬性”面板，在“類”下拉列表框中列出了已經定義的一些類規則。在ID下拉列表框中列出了已經定義的一些ID規則，如下圖所示。（2）利用“標簽選擇器”選擇樣式首先需要在“標簽選擇器”上選定一個標簽，如下圖所示，在<p>標簽上右擊，在彈出的快捷菜單中選擇“設置類”->“mycss1”命令，則可以快速把已經定義的mycss1樣式指定給<p>標簽。活動2使用內嵌樣式表美化網頁1-2（3）使用快捷菜單可以從快捷菜單中直接給對象指定一個樣式。首先選中對象，右擊，在快捷菜單中指定樣式，如下圖所示。活動2使用內嵌樣式表美化網頁1-2詳細操作步驟請參閱教材。活動實施使用內嵌樣式表美化網頁是作為一個獨立區域內嵌在網頁里，必須寫在head標簽里面。寫在HTML頁面內部，存放于head標記當中，樣式寫在style標記內。注意：style標記不要寫在title標記上方。活動評價任務2使用CSS美化文本與圖像本任務可以分解為2個活動：認識文本相關CSS屬性和使用CSS樣式設置網頁背景。活動1認識文本相關CSS屬性2-1對網頁文件“task6-2.html”的文本進行CSS樣式的設置及應用，文件另存為task6-2-1.html，效果如下圖所示。活動要求活動1認識文本相關CSS屬性2-11、CSS規則定義中的屬性概述知識窗活動1認識文本相關CSS屬性2-12、CSS規則定義中與文本相關屬性詳解（1）類型：類型選項主要是對文字的字體大小、顏色、效果等基本樣式進行設置。可只對要改變的屬性進行設置，不改變的屬性就使之為空。這些屬性包括：Font-family（字體）、Font-size（字體大小）、Font-style（字體樣式）、Line-height（行高）、Text-decoration（修飾）、Font-weight（字體粗細）、Font-variant（變體）、Text-transform（大小寫）、Color（顏色）。如下圖所示。活動1認識文本相關CSS屬性2-1（2）區塊：區塊選項是設置對象文本文字間距、對齊方式、上標、下標、排列方式、首行縮進等。屬性包括：Word-spacing（單詞間距）、Letter-spacing（字母間距）、Vertical-align（垂直對齊）、Text-align（文本對齊）、Text-indent（文字縮進）、White-space（空格）、Display（顯示）。如下圖所示。活動1認識文本相關CSS屬性2-1詳細操作步驟請參閱教材。活動實施與文本相關CSS屬性比較多，需要通過不同的活動實踐加強對各屬性應用的理解。同時要善于結合CSS其他的分類屬性設置來美化網頁。活動評價活動2使用CSS樣式設置網頁背景2-2打開“task6-2-1.html”文件，使用CSS樣式設置網頁文檔的背景圖像，效果如下圖所示。活動要求活動2使用CSS樣式設置網頁背景2-2CSS規則定義中與背景相關屬性詳解：背景：背景選項主要是對元素背景進行設置，包括背景顏色、背景圖像、背景圖像控制。一般是對BODY（頁面）、TABLE（表格）、DIV（區域）的設置。背景屬性包括：Background-color（背景顏色）、Background-image（背景圖像）、Background-repeat（重復）、Background-attachment（附件）、Background-position（水本位置）、Background-position（垂直位置）。如下圖所示。知識窗活動2使用CSS樣式設置網頁背景2-2詳細操作步驟請參閱教材。活動實施與背景相關CSS屬性不多，但有些屬性不太好理解，比如Background-repeat（重復）；Background-attachment（附件）；Background-position（水本位置）；Background-position（垂直位置）。需要通過大量的實踐操作來理解相關的參數設置及應用效果。活動評價任務3使用CSS布局網頁本任務可以分解為2個活動：使用Div+CSS布局網頁；使用Div+CSS制作圖片展示頁。活動1使用Div+CSS布局網頁3-1使用Div+CSS完成微信首頁的布局與制作，如下圖所示，完成后以“task6-3-1.html”為文件名保存到“task6-3”文件夾。活動要求活動1使用Div+CSS布局網頁3-11、盒子模型（BoxModel）盒子模型，又叫盒模型，英文即boxmodel。無論是div、span、還是a都是盒子。但是，圖片、表單元素一律看作是文本，它們并不是盒子，比如說，一張圖片里并不能放東西，它自己就是自己的內容。2、盒子模型的屬性一個盒子中主要的屬性就5個：width、height、padding、border、margin。其示意圖如下圖所示。width和height：內容的寬度、高度（不是盒子的寬度、高度）padding：內邊距border：邊框margin：外邊距知識窗活動1使用Div+CSS布局網頁3-13、盒子模型的平面結構圖如圖A所示，三維立體結構圖如圖B所示。A

B

活動1使用Div+CSS布局網頁3-14、外邊距（margin）用于控制元素與元素之間的距離，可設置盒子模型上、右、下、左4個方向的外邊距值，如下表所示：也可以同時設置4個方向的外邊距，如下表所示：活動1使用Div+CSS布局網頁3-15、內邊距（padding）用于控制內容與邊框之間的距離，可設置盒子模型上、右、下、左4個方向的內邊距值，設置方式與margin屬性相同。活動1使用Div+CSS布局網頁3-1詳細操作步驟請參閱教材。活動實施盒模型是Div+CSS網頁布局中一個比較重要的概念，也是一個難點，通過本次活動，掌握盒模型的概念，并能實際運用到網頁制作當中，能靈活運用盒模型相關知識對網頁進行布局操作。活動評價活動2使用Div+CSS制作圖片展示頁3-2使用Div+CSS完成圖片展示頁的制作，如下圖所示，完成后以“task6-3-2.html”為文件名保存到“task6-3”文件夾。活動要求活動2使用Div+CSS制作圖片展示頁3-21、標準文檔流標準文檔流指的是元素排版布局過程中，元素會默認自動從左往右，從上往下的流式排列方式。并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。標準文檔流分兩類：塊級元素（blocklevel）：以一個塊的形式表現出來，并且跟同級的兄弟塊依次豎直排列，左右撐滿，占有獨立空間，如div標簽就是一個通用的塊級元素。行內元素（inline）：各個元素之間橫向排列，到最右端自動折行，標簽本身不占有獨立的區域，僅僅在其他元素的基礎上指定了一定的范圍，如span標簽就是一個通用的行內元素。塊級元素與行內元素的演示效果如下圖所示。知識窗活動2使用Div+CSS制作圖片展示頁3-22、display屬性用于指定HTML標簽的顯示方式，常用的屬性值有3個，如下表所示：3、float屬性用于定義元素的浮動方向，其屬性值有3個，如下表所示：活動2使用Div+CSS制作圖片展示頁3-24、clear屬性用于規定元素的哪一側不允許其他浮動元素，常用于清除浮動帶來的影響和擴展盒子高度，其屬性值有4個，如下表所示：5、overflow屬性用于處理盒子中的內容溢出，overflow需要必須配合width屬性使用，其屬性值有4個，如下表所示：活動2使用Div+CSS制作圖片展示頁3-2詳細操作步驟請參閱教材。活動實施通過本次活動，掌握使用Div+CSS對網頁內容進行布局與美化操作，進一步理解盒模型的概念及應用，在活動中，通過具體案例——圖片展示區的制作，能更好地理解與掌握Div+CSS布局與美化網頁思想。活動評價任務4使用CSS設置背景本任務可以分解為2個活動：認識背景相關CSS屬性；制作淘寶登錄頁面。活動1認識背景相關CSS屬性4-1結合背景相關CSS樣式，完成“支付寶-我的應用”的制作，如下圖所示，完成后以“task6-4-1.html”為文件名保存到“task6-4”文件夾。活動要求活動1認識背景相關CSS屬性4-11、CSS背景CSS背景屬性用于定義HTML元素的背景，如下圖所示，可在DreamweaverCS6的“CSS規則定義”對話框的“背景”選項卡中進行CSS背景設置。CSS背景包含以下幾個常用屬性：

背景顏色（background-color）：用于設置網頁元素的背景顏色。背景圖像（background-image）：用于設置網頁元素的背景圖像。背景重復（background-repeat）：用于控制圖像平鋪的方式和方向。背景定位（background-position）：用于控制圖像在背景中的位置。知識窗活動1認識背景相關CSS屬性4-12、背景重復（background-repeat）用于控制圖像平鋪的方式和方向，屬性值有4個，如下表所示：活動1認識背景相關CSS屬性4-1詳細操作步驟請參閱教材。活動實施在使用Div+CSS美化網頁時，背景也是一個比較常用的美化網頁的CSS樣式，通過本次活動，掌握背景CSS樣式的應用，包含背景圖片、背景顏色、背景圖片位置及是否重復等CSS樣式的使用。活動評價活動2制作淘寶登錄頁面4-2結合背景相關CSS樣式，完成淘寶登錄頁面制作，如下圖所示，完成后以“task6-4-2.html”為文件名保存到“task6-4”文件夾。活動要求活動2制作淘寶登錄頁面4-21、背景（background）如果需要同時設置多個背景屬性，可以使用background簡寫背景樣式，如下圖所示。知識窗活動2制作淘寶登錄頁面4-2詳細操作步驟請參閱教材。活動實施通過本次活動，結合實際案例——淘寶登錄頁的制作，進一步鞏固背景CSS樣式的應用，能靈活運行所學知識完成相應效果的制作。活動評價感謝您的觀看由淺入深簡章易懂貼近實際WANGYEZHIZUOXIANGMUSHIXUNJIAOCHENG《網頁制作項目實訓教程》重慶大學出版社項目7使用Div+CSS制作網頁由淺入深簡章易懂貼近實際WANGYEZHIZUOXIANGMUSHIXUNJIAOCHENG《網頁制作項目實訓教程》重慶大學出版社CONTENTS任務1制作頁頭導航區任務2制作新聞列表區任務3制作產品展示區任務1制作頁頭導航區本任務可以分解為2個活動：使用Div+CSS對網頁進行布局；制作導航欄。活動1使用Div+CSS對網頁進行布局1-1根據所提供的網站首頁效果圖，使用Div+CSS完成頁面的布局操作，完成后以“index.html”為文件名保存到“task7”文件夾，完成布局的頁面效果示意圖如下圖所示。活動要求活動1使用Div+CSS對網頁進行布局1-1詳細操作步驟請參閱教材。活動實施通過本次活動，靈活運用Div+CSS對網頁進行布局操作，并復習鞏固盒模型的相關概念及CSS樣式的應用。活動評價活動2制作導航欄1-2如下圖所示，打開活動1中完成的“index.html”文件，完成導航欄及頁頭部分的制作，完成后以原文件名保存。活動要求活動2制作導航欄1-2詳細操作步驟請參閱教材。活動實施通過本次活動，掌握使用Div+CSS網頁制作思想完成導航欄的制作，重點掌握如何使用CSS樣式將導航欄美化成效果圖所示的效果。