《《網(wǎng)頁設計與制作實例教程》第7章(趙青松)ppt課件(全).ppt》由會員分享，可在線閱讀，更多相關《《網(wǎng)頁設計與制作實例教程》第7章(趙青松)ppt課件(全).ppt（23頁珍藏版）》請在匯文網(wǎng)上搜索。

1、清華大學出版社 網(wǎng)頁設計與制作實例教程第7章高等學校計算機應用規(guī)劃教材 2022/9/14主編 方其桂內(nèi)容提要第7章 規(guī)劃布局網(wǎng)頁網(wǎng)網(wǎng)頁頁設設計計主主要要體體現(xiàn)現(xiàn)在在配配色色、字字體體以以及及布布局局排排版版方方面面，這這三三個個方方面面能能夠夠很很好好地地結結合合就就能能制制作作出出很很漂漂亮亮的的網(wǎng)網(wǎng)站站。因因此此，在在進進行行網(wǎng)網(wǎng)頁頁設設計計時時，需需要要對對網(wǎng)網(wǎng)頁頁的的版版面面布布局局進進行行整整體體的規(guī)劃。的規(guī)劃。在在布布局局過過程程中中，為為確確保保網(wǎng)網(wǎng)頁頁美美觀觀大大方方，一一般般要要遵遵循循：正正常常平平衡衡、異異常常平平衡衡、對對比比、凝凝視視、空空白白和和盡盡量量用用圖圖片

2、片解解說說等等原原則則。比比如如，網(wǎng)網(wǎng)頁頁的的白白色色背背景景太太虛虛，則則可可以以加加些些色色塊塊；版版面面零零散散，可可以以用用線線條條和和符符號號串串聯(lián)聯(lián)；左左面面文文字字過過多多，右右面面則則可可以以插插一一些些圖圖片片保保持持平平衡衡；表表格格過過于于規(guī)規(guī)矩矩，可可以以改改用用導導角，增強視覺效果。角，增強視覺效果。本本章章通通過過多多個個實實例例，從從使使用用表表格格、層層、框框架架和和CSS布布局網(wǎng)頁幾個方面，介紹規(guī)劃網(wǎng)頁布局。局網(wǎng)頁幾個方面，介紹規(guī)劃網(wǎng)頁布局。教學目錄使用表格布局使用表格布局使用層布局使用層布局使用框架布局使用框架布局010203第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局

3、網(wǎng)頁04使用使用CSS布局布局7.1 使用表格布局 教學內(nèi)容7.1.1 7.1.1 輸入文字內(nèi)容輸入文字內(nèi)容 第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁 在Dreamweaver網(wǎng)頁文檔中，可以通過“插入”“表格”命令，插入需要的二維表格，輸入數(shù)據(jù)，以便查詢和瀏覽。實例1 七年級部分學生基本信息表 新建一個HTML文檔，在頁面中插入一個5行4列的簡單表格，輸入七年級部分學生基本信息表，效果如圖所示。7.1 使用表格布局 教學內(nèi)容7.1.2 7.1.2 設置表格屬性設置表格屬性第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁 在頁面中插入表格后，可以在“屬性”面板中對表格進行相關的設置，其中有些屬性是與“表格”對

4、話框中的屬性一樣的，此外，可以設置表格的“背景顏色”、“邊框顏色”和“對齊方式”等屬性。實例2 七年級部分學生基本信息表 設置上一節(jié)中“七年級部分學生基本信息表”表格和單元格屬性，表格填充為5像素，居中對齊，間距為0，表格ID為“stu”，單元格文字水平居中對齊，效果如圖所示。7.1 使用表格布局 教學內(nèi)容7.1.3 7.1.3 認識表格標簽認識表格標簽第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁 了解實現(xiàn)表格的HTML代碼，可以對表格進行細微的調(diào)整，以達到最佳的效果。在DreamWeaver中，可以通過標簽和代碼實現(xiàn)表格。實例3 七年級部分學生基本信息表代碼 將“七年級部分學生基本信息表”表格切換到

5、“代碼”或“拆分”視圖，則呈現(xiàn)表格的代碼，其中標簽有、和等，效果如圖所示。7.1 使用表格布局 教學內(nèi)容7.1.3 7.1.3 認識表格標簽認識表格標簽第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁7.1 使用表格布局 教學內(nèi)容7.1.4 7.1.4 用表格布局網(wǎng)頁用表格布局網(wǎng)頁 第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁 表格是最常用的網(wǎng)頁布局實現(xiàn)方式。在表格中，可以很容易地對表格的行和列進行調(diào)整，能夠精確地定位網(wǎng)頁中的元素，從而方便地實現(xiàn)網(wǎng)頁布局。實例4 方舟中學信息技術網(wǎng)絡課堂 如下圖所示是“方舟中學信息技術網(wǎng)絡課堂”的首頁，通過表格將整個網(wǎng)頁進行了功能區(qū)的劃分，使網(wǎng)頁中的各個元素更加整齊、美觀。7.1

6、 使用表格布局 教學內(nèi)容7.1.5 7.1.5 表格模式表格模式 第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁 在DreamWeaver中，表格模式有“標準模式”和“擴展表格模式”兩種。標準模式是添加具體網(wǎng)頁內(nèi)容和顯示的模式，如上節(jié)就是在標準模式下完成用表格布局網(wǎng)頁的；擴展表格模式不像瀏覽器那樣顯示表格，但便于在表格內(nèi)部和表格周圍選擇。實例5 新書推薦 在新書推薦網(wǎng)頁文檔中，利用擴展表格模式，將新書推薦表格列寬調(diào)整到合適的大小，效果如圖所示。7.2 使用層布局 教學內(nèi)容7.2.1 7.2.1 制作層制作層 第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁 層（也稱AP元素）是一種分配有絕對位置的HTML網(wǎng)頁元素。

7、其中可以包含文本、圖像、表單和表格等，也可以包含其他層。利用“層”不僅可以在網(wǎng)頁上自由地進行布局和設計，而且可以任意地調(diào)整層的大小、背景和疊放順序等。實例6 制作和疊放層 在網(wǎng)頁文檔中制作4個層，分別插入4張圖像，并通過移動層將它們疊放起來，效果如圖所示。7.2 使用層布局 教學內(nèi)容7.2.2 7.2.2 嵌套層嵌套層 第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁 一個層里可以包含另一個層，就是嵌套層，通常也稱嵌入層為子層。一個嵌入層會繼承其父層的可見性，并且能隨父層的移動而移動。一般地，利用移動的辦法來判斷幾個層之間的嵌套關系。實例7 展示新書 在網(wǎng)頁文檔中，利用嵌套層的方法展示新書，效果如圖所示。

8、7.2 使用層布局教學內(nèi)容7.2.3 7.2.3 認識層認識層HTMLHTML代碼代碼第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁 了解層的HTML代碼，可以對層進行細微的調(diào)整和控制，以達到最佳的效果。在DreamWeaver中，可以通過標簽和代碼實現(xiàn)層、設置層。實例8 方舟中學網(wǎng)址（)二維碼 將方舟中學網(wǎng)址二維碼圖插入到層中，切換到“拆分”視圖，則呈現(xiàn)層的代碼，其中標簽有、和屬性代碼，效果如圖所示。7.2 使用層布局教學內(nèi)容7.2.4 7.2.4 定位網(wǎng)頁元素定位網(wǎng)頁元素 第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁 AP元素是一個十分靈活的網(wǎng)頁元素，利用它進行網(wǎng)頁布局，操作十分方便，而且功能比較強大，能精

9、確地定位頁面元素。實例9 網(wǎng)上購車平臺 本例是用AP元素定位網(wǎng)頁元素，布局網(wǎng)頁“網(wǎng)上購車平臺”，布局輪廓效果如圖7-55所示。7.2 使用層布局教學內(nèi)容7.2.5 7.2.5 表格與層轉換表格與層轉換 第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁 在網(wǎng)頁設計時，根據(jù)實際需要，可先用層設計頁面，再將層轉換成表格；或先用表格設計頁面，再將表格轉成層。實例10 網(wǎng)上購車平臺轉為表格布局 將上節(jié)中用層布局的網(wǎng)頁網(wǎng)上購車平臺轉換為表格布局的網(wǎng)頁，轉換前后代碼效果如圖所示。7.3 使用框架布局教學內(nèi)容7.3.1 7.3.1 創(chuàng)建框架和框架集創(chuàng)建框架和框架集 第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁 要制作框架網(wǎng)頁，就

10、要建立框架集，框架集是組織頁面內(nèi)容的常見方法，通過框架集可以將內(nèi)容組織到相互獨立的HTML頁面內(nèi)。實例11 簡單的框架頁面在網(wǎng)頁文檔中，插入簡單的框架頁面，如圖7-60所示的是左右兩個窗口的框架頁面。7.3 使用框架布局教學內(nèi)容7.3.2 7.3.2 保存框架集和框架保存框架集和框架 第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁 框架集文件和與其相關的框架文件必須先保存，然后才能在瀏覽器中預覽該頁面。剛創(chuàng)建的框架網(wǎng)頁文檔，每個新框架文檔都被預定義一個文件名，如UntitleFrameset-1.html代表框架集文件，Untitled-1.html代表主框架文件，UntitledFrame-1.htm

11、l、UntitledFrame-2.html等代表其他框架文件。實例12 保存簡單的框架頁面在網(wǎng)頁文檔中，保存新建的框架集和框架，打開保存位置的文件夾后，顯示的框架集和框架的文件名如圖所示。7.3 使用框架布局教學內(nèi)容7.3.3 7.3.3 設置框架和框架集屬性設置框架和框架集屬性 第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁 框架和框架集是一些獨立的HTML文檔，可以通過設置某些框架或框架集的屬性來對框架或框架集進行修改。實例13 設置框架和框架集屬性 在網(wǎng)頁文檔中，對新建的框架集和框架的邊框和滾動設置后，顯示效果如圖所示。7.3 使用框架布局教學內(nèi)容7.3.4 7.3.4 用框架布局頁面用框架布局

12、頁面 第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁 利用框架可以更加靈活地設計網(wǎng)頁布局。在一般情況下，可用框架來保持網(wǎng)頁中固定的幾個部分，比如網(wǎng)頁大標題、導航欄等，剩下的框架用來展現(xiàn)所選的網(wǎng)頁內(nèi)容。實例14 新書介紹 本實例是在新建的嵌套框架中，在各個框架中分別插入新書圖片和文字介紹，效果如圖所示。7.3 使用框架布局教學內(nèi)容7.3.5 7.3.5 控制帶有鏈接的框架內(nèi)容控制帶有鏈接的框架內(nèi)容第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁 在一個框架中使用鏈接，可以打開另一個框架中的文檔，為此必須設置鏈接對象。此外，在鏈接目標列表中選擇打開鏈接文檔內(nèi)容的框架或窗口。實例15 帶有鏈接的新書介紹本實例是設置了控制

13、鏈接的新書介紹，其中每本書圖都設置了超鏈接，鏈接到對應的新書介紹文字網(wǎng)頁文件，效果如圖所示。7.4 使用CSS布局教學內(nèi)容7.4.1 7.4.1 表格表格CSSCSS布局布局第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁 表格+CSS布局可以使設計的網(wǎng)頁結構更加合理，更便于維護和更改網(wǎng)頁的樣式，從本質上講，這種布局網(wǎng)頁的方式，是從傳統(tǒng)的網(wǎng)頁設計技術到符合Web2.0和Web3.0標準的網(wǎng)頁設計技術的過渡。實例16 通知公告如圖所示，這是在網(wǎng)站首頁布局中經(jīng)常會看到的局部布局的效果，位置一般在網(wǎng)頁的右側，或者放置在左側。7.4 使用CSS布局教學內(nèi)容7.4.2 DIV7.4.2 DIVCSSCSS布局布局第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁 利用DIV+CSS布局網(wǎng)頁是一種盒子模式的開發(fā)技術，通過由CSS定義的大小不一的盒子和盒子嵌套來編排網(wǎng)頁。這種方式排版網(wǎng)頁的代碼簡潔，更新方便，能兼容更多的瀏覽器，越來越受到網(wǎng)頁開發(fā)者的歡迎。實例17 DIV+CSS布局首頁 如圖所示，這是用DIV+CSS布局的網(wǎng)站首頁半成品。包括頁頭、主體和頁尾三大部分。7.4 使用CSS布局教學內(nèi)容第第7章章 規(guī)劃布局網(wǎng)頁規(guī)劃布局網(wǎng)頁清華大學出版社 網(wǎng)頁設計與制作實例教程高等學校計算機應用規(guī)劃教材 聯(lián)系信箱：謝謝使用！