網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 第 8章 頁面布局設(shè)計(jì) 第 1頁 本章概述 本章的學(xué)習(xí)目標(biāo) 主要內(nèi)容 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 本章概述 規(guī)劃網(wǎng)頁布局，表格是常用的工具之一，表格在網(wǎng)頁中不僅可以排列數(shù)據(jù)，還可以對(duì)頁面中的圖像、文本、動(dòng)畫等元素進(jìn)行準(zhǔn)確的定位，使頁面顯得整齊有序、便于訪問者瀏覽?？蚣芤渤Ｓ脕韺?duì)網(wǎng)頁進(jìn)行布局。 實(shí)現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離。本章主要介紹表格和框架在頁面布局中的應(yīng)用，利用 第 2頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 本章的學(xué)習(xí)目標(biāo) 掌握使用表格規(guī)劃網(wǎng)頁布局 了解框架設(shè)置網(wǎng)頁布局 掌握利用 了解模板與庫的應(yīng)用 第 3頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 主要內(nèi)容 格網(wǎng)頁布局 架網(wǎng)頁布局 板與庫 章小結(jié) 第 4頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 表格網(wǎng)頁布局 網(wǎng)頁向?yàn)g覽者提供的信息是多樣化的，如文字、圖像、 何使這些網(wǎng)頁元素在網(wǎng)頁中的合理位置上顯示出來，使網(wǎng)頁變得有條理和美觀，是設(shè)計(jì)人員在著手設(shè)計(jì)網(wǎng)頁之前必須考慮的事情。表格的作用就在于幫助設(shè)計(jì)者高效、準(zhǔn)確地定位各種網(wǎng)頁數(shù)據(jù)，直觀、鮮明地表達(dá)設(shè)計(jì)者的思想。使用表格布局網(wǎng)頁，在不同平臺(tái)和不同分辨率的瀏覽器中都能保持原有的布局。 第 5頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 創(chuàng)建表格 創(chuàng)建表格 在菜單欄中，選擇 “插入” |“表格”菜單項(xiàng)，彈出 “表格”對(duì)話框。 編輯表格 創(chuàng)建表格后，如果不能滿足要求，這時(shí)就需再對(duì)表格進(jìn)行一些操作，如單元格的合并及拆分、行或列的刪除等，設(shè)置單元格和表格屬性等，并且可以導(dǎo)入和導(dǎo)出表格。 表格的選取是編輯表格的前提，要在表格中進(jìn)行任何操作都離不開選取表格。 第 6頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 創(chuàng)建表格 例 8在文檔中創(chuàng)建表格，并設(shè)置單元格格式。 第 7頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 用表格規(guī)劃網(wǎng)頁布局 表格的 “布局模式”中規(guī)劃網(wǎng)頁布局就是最常用、最實(shí)用的方式之一。 例 8利用表格規(guī)劃網(wǎng)頁布局。 第 8頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 表格 + 表格 + 符合 構(gòu)與表現(xiàn)分開，做到“表現(xiàn)和結(jié)構(gòu)相分離”。 第 9頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 表格 + 這里定義了 4個(gè) 們分別用來控制表格的樣式和 3個(gè)單元格的樣式。 下面詳細(xì)介紹這個(gè)網(wǎng)頁布局實(shí)例的制作方法。 創(chuàng)建 創(chuàng)建網(wǎng)頁文檔 第 10頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 主要內(nèi)容 格網(wǎng)頁布局 架網(wǎng)頁布局 板與庫 章小結(jié) 第 11頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 框架網(wǎng)頁布局 框架是一項(xiàng)比較特殊的布局工具，使用其可以將瀏覽器窗口劃分為多個(gè)獨(dú)立的區(qū)域，每個(gè)區(qū)域顯示不同的 用于固定網(wǎng)頁中的某些部分。例如，頁面底部的面板區(qū)域中的信息通常是固定的，就可以使用框架進(jìn)行布局。 第 12頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 框架和框架集的概念 在網(wǎng)頁中，一個(gè)網(wǎng)頁可以包含多個(gè)頁面，此時(shí)需要用到框架。 框架是獨(dú)立的 架集是由多個(gè)框架組合而成的，一個(gè)框架網(wǎng)頁中包含多個(gè)框架的布局、鏈接和屬性信息。用框架構(gòu)成的網(wǎng)頁，實(shí)際包含各個(gè)框架中的網(wǎng)頁及一個(gè)框架集表格。 框架除了用于頁面布局，還可用于制作目錄。包含框架的網(wǎng)頁稱為框架集?？蚣芗x了各個(gè)框架的結(jié)構(gòu)、數(shù)量、大小和目標(biāo)等屬性。 第 13頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 設(shè)計(jì)框架頁面 創(chuàng)建框架和框架集 編輯框架 創(chuàng)建好框架后，可以修改框架，主要包括選擇框架、設(shè)置框架屬性?？蚣懿⒉皇窃谒袨g覽器中都可以顯示的，這時(shí)就需要在標(biāo)簽中輸入提示信息。 第 14頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 設(shè)計(jì)框架頁面 例 8利用框架規(guī)劃網(wǎng)頁布局。 第 15頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 主要內(nèi)容 格網(wǎng)頁布局 架網(wǎng)頁布局 板與庫 章小結(jié) 第 16頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 第 17頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 基于 網(wǎng)站標(biāo)準(zhǔn)，一般指網(wǎng)站建設(shè)采用基于 際上， 是一系列標(biāo)準(zhǔn)的集合。 第 18頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 擴(kuò)展超文本標(biāo)識(shí)語言）是目前推薦使用的網(wǎng)頁標(biāo)記語言，看起來與 象 ，語法上更加嚴(yán)格。本質(zhì)上說， 合了部分 目前國(guó)際上在網(wǎng)站設(shè)計(jì)中推崇的 通常所說的 第 19頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 選擇合適的 要建立符合標(biāo)準(zhǔn)的網(wǎng)頁，必須聲明 頭文件 基于 需要進(jìn)行研究些其他的設(shè)置，所有的這些設(shè)置都在頭文件中或者頭文件之前。 代碼規(guī)范 也是 第 20頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 網(wǎng)頁中的表格或者其他區(qū)塊都具備內(nèi)容（ 填充（ 邊框（ 邊界（ 基本屬性，一個(gè) 利用 的是基于 的可擴(kuò)展性和靈活性將適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求。 第 21頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 下面利用 第 22頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 主要內(nèi)容 格網(wǎng)頁布局 架網(wǎng)頁布局 板與庫 章小結(jié) 第 23頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 模板與庫 模板與庫概念 模板的創(chuàng)建與管理 模板的應(yīng)用 庫的操作 第 24頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 模板與庫概念 模板 模板是一種具有固定格式的 件擴(kuò)展名為 戶可按自己的要求創(chuàng)建有格式的模板文檔，這樣可以在運(yùn)用模板時(shí)自動(dòng)生成具有相同風(fēng)格的頁面。 庫 庫是一種特殊的 包含可放置到網(wǎng)頁中的一組資源或資源副本。在多數(shù)網(wǎng)站中都會(huì)有這樣的情況，在站點(diǎn)中的每個(gè)頁面上都會(huì)有或多或少的內(nèi)容是被重復(fù)使用的，如版權(quán)信息、公司地址、標(biāo)題和頁面頁腳等。能夠重復(fù)地被使用或者需要經(jīng)常更新的頁面元素被稱為庫項(xiàng)目。 第 25頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 模板的創(chuàng)建與管理 模板的制作與普通網(wǎng)頁的制作相同，是用來制作網(wǎng)頁的公共部分。將已有文檔轉(zhuǎn)換為模板，然后根據(jù)需要進(jìn)行修改，或直接創(chuàng)建空白模板，在其中輸入需要顯示的文檔內(nèi)容。 創(chuàng)建模板 直接創(chuàng)建模板 將已有文檔轉(zhuǎn)換為模板 模板的編輯 模板的編輯主要包括創(chuàng)建可編輯區(qū)域、取消可編輯區(qū)域的標(biāo)記和更改可編輯區(qū)域的名稱等操作。 第 26頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 模板的創(chuàng)建與管理 例 8在 管理模板 對(duì)模板的管理主要包括重命名、刪除、修改等操作。 第 27頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 模板的應(yīng)用 前面已經(jīng) 介紹 模板的創(chuàng)建和編輯，下面來 介紹 如何將創(chuàng)建好的模板應(yīng)用到頁面中。 用模板創(chuàng)建新文檔 將模板應(yīng)用于現(xiàn)有文檔 從模板創(chuàng)建新文檔 第 28頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 模板的應(yīng)用 例 8在 第 29頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 庫的操作 新建庫項(xiàng)目 用戶既可以新建一個(gè)空白庫項(xiàng)目，也可以從頁面中基于選定內(nèi)容創(chuàng)建庫項(xiàng)目。 應(yīng)用庫項(xiàng)目 庫項(xiàng)目是可以在多個(gè)頁面中重復(fù)使用的頁面元素。當(dāng)用戶在頁面中插入庫項(xiàng)目時(shí)，實(shí)際內(nèi)容將隨該庫項(xiàng)目的引用一起插入到文檔中。 修改庫項(xiàng)目 庫項(xiàng)目創(chuàng)建后，根據(jù)需要適時(shí)地修改其內(nèi)容是不可避免的。 第 30頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 庫的操作 更新文檔 庫項(xiàng)目被修改且保存后，引用該庫項(xiàng)目的網(wǎng)頁會(huì)進(jìn)行自動(dòng)更新。 分離庫項(xiàng)目 一旦在網(wǎng)頁文檔中應(yīng)用了庫項(xiàng)目，如果希望其成為網(wǎng)頁文檔的一部分，這就需要將庫項(xiàng)目從源文件中分離出來。 刪除庫項(xiàng)目 第 31頁 網(wǎng)頁設(shè)計(jì)