動(dòng)畫(huà)制作第四章 網(wǎng)頁(yè)布局

動(dòng)畫(huà)制作第四章網(wǎng)頁(yè)布局認(rèn)識(shí)表格

對(duì)網(wǎng)頁(yè)整體布局通常是通過(guò)表格來(lái)完成的。行(Row)、列(Column)、邊框(Border)：構(gòu)成表格的最基本元素

行高：某一行高度，默認(rèn)沒(méi)定義列寬：某一列寬度

單元格填充：?jiǎn)卧裰袑?duì)象與邊框距離

單元格間距：?jiǎn)卧裰g間距邊框表格外標(biāo)題間距填充行標(biāo)題插入簡(jiǎn)單表格步驟：新建或打開(kāi)HTML文檔打開(kāi)插入表格對(duì)話框菜單法按鈕法設(shè)置表格參數(shù)行、列數(shù)表格寬度邊框粗細(xì)邊距、間距：內(nèi)容與邊框、單元格間的距離頁(yè)眉：表格的標(biāo)題行或列標(biāo)題：表格外的標(biāo)題對(duì)齊標(biāo)題摘要確定導(dǎo)入表格Dreamweaver可以將創(chuàng)建在另一個(gè)應(yīng)用程序（如寫(xiě)字板文件）中的數(shù)據(jù)導(dǎo)入到網(wǎng)頁(yè)中并設(shè)置為表格的格式，而且各數(shù)據(jù)之間不可以用制表符、逗號(hào)、冒號(hào)、分號(hào)或其它分隔符分隔開(kāi)來(lái)。表格屬性（美化表格）表格ID行、列、寬、高、對(duì)齊、邊框、背景顏色、背景圖像、邊框顏色、類填充：內(nèi)容與單元格邊界間的距離間距：?jiǎn)卧耖g的距離清除列寬和行高按鈕：清除多余空白像素和百分比轉(zhuǎn)換按鈕：表格寬、高單位設(shè)置表格選擇整個(gè)表格:在“標(biāo)簽選擇器”中選擇<Table>鼠標(biāo)指向任意邊框上時(shí)，單擊鼠標(biāo)“修改”/“表格”/“選擇表格”行和列將鼠標(biāo)移到一行的最左或一列的最上面，出現(xiàn)黑色箭頭時(shí)單擊在“標(biāo)簽選擇器”中選擇<tr>多行和多列單元格:將鼠標(biāo)移到一行的最左或一列的最上面，出現(xiàn)黑色箭頭時(shí)拖選用【Ctrl】鍵復(fù)選一個(gè)單元格:在“標(biāo)簽選擇器”中選擇<Td>多個(gè)單元格:對(duì)于連續(xù)的單元格可以拖選；不連續(xù)的單元格用【Ctrl】鍵復(fù)選合并和拆分單元格插入和刪除行或列行列單元格屬性1、行、列及單元格屬性水平、垂直、寬、高、背景、邊框不換行：?jiǎn)卧裰休斎霐?shù)據(jù)時(shí)不自動(dòng)換行標(biāo)題：將某一單元格設(shè)置為表頭合并單元格/拆分單元格說(shuō)明：設(shè)置單元格中元素在單元格中對(duì)齊方式使用“水平”、“垂直”屬性；

設(shè)置單元格同寬或高使用“寬”、“高”屬性。表格數(shù)據(jù)處理1、表格數(shù)據(jù)排序“命令”/“排序表格”,操作同word。2、表格數(shù)據(jù)的導(dǎo)入導(dǎo)出

(1)表格數(shù)據(jù)導(dǎo)入“文件”/“導(dǎo)入”命令可以將word、excel、記事本等表格文檔直接導(dǎo)入到網(wǎng)頁(yè)中。

(2)表格數(shù)據(jù)導(dǎo)出“文件”/“導(dǎo)出”命令可以將網(wǎng)頁(yè)中的表格導(dǎo)出為DOC、XLS、TXT等文本文檔。注意：在導(dǎo)出時(shí)最好用doc、txt兩種格式，當(dāng)為.xls格式時(shí)字符有亂碼的現(xiàn)象，用記事本打開(kāi)就會(huì)正常。特殊表格制作1、細(xì)線表格表格邊框：0單元格間距：1背景色：黑色單元格背景色：白色2、缺少邊框表格表格邊框：1輸入代碼：frame=“參數(shù)”（參數(shù)值：above(上)、below(下)、vsides(左右)、hsides(上下)、lhs(左)、rhs(右)、void(沒(méi)有邊框))3、突起表格(立體表格)表格邊框：1背景色：#999999輸入代碼：bordercolorlight=“#000000”bordercolordark=“#ffffff”4、制作1px高度的分割線表格邊框：0單元格間距：0單元格填充：0單元格背景圖高度：1單元格背景顏色：#000000在代碼視圖下將單元格的“占位符”刪除嵌套表格（表格布局重點(diǎn)）嵌套表格即在一個(gè)單元格中插入一個(gè)表格方法:（嵌套表格的寬度受所在單元格的寬度限制）將光標(biāo)定位在某個(gè)單元格中插入表格用表格布局網(wǎng)頁(yè)瀏覽器在下載完一個(gè)完整的表格后才顯示表格中的所有內(nèi)容，因此應(yīng)盡可能用多個(gè)獨(dú)立的表格來(lái)布局頁(yè)面（水平方向上是一個(gè)，垂直方向上是多個(gè)）。作為外層的布局整個(gè)頁(yè)面的表格以像素為單位（720-778），而里面的表格以%為單位（95-100）。外層的布局表格若要設(shè)置對(duì)齊屬性，則都設(shè)置為統(tǒng)一的。

說(shuō)明：IE窗口內(nèi)能看到的第一屏部分為778px*435px。第二節(jié)AP元素和Spry的使用一、AP元素和Spry構(gòu)件二、創(chuàng)建和選擇AP元素三、AP元素的屬性四、Spry的使用AP元素和Spry構(gòu)件AP元素可以看作頁(yè)面內(nèi)容容器，在AP元素中可放置文本、圖像、對(duì)象插件等。特性：浮動(dòng)；重疊；顯示、隱藏。Spry構(gòu)件是網(wǎng)頁(yè)制作中一個(gè)特殊的腳本行為控件，添加該控件可以實(shí)現(xiàn)無(wú)需編寫(xiě)程序就能實(shí)現(xiàn)的功能，如導(dǎo)航菜單、可折疊欄目顯示和工具提示。創(chuàng)建和選擇AP元素1、創(chuàng)建AP元素插入AP元素：“插入”/“布局對(duì)象”/“AP

Div”繪制AP元素：“插入”/“布局對(duì)象”/“繪制AP

Di拖放AP元素：“插入”/“布局對(duì)象”/拖放“繪制AP

Div”2、嵌套AP元素嵌套AP元素是包含在其它AP元素中的AP元素AP元素的嵌套子AP元素可以超過(guò)父AP元素或完全在父AP元素之外父AP元素的某些屬性變化，則子AP元素也相應(yīng)變化注意：

在新建層之前，通過(guò)“首選參數(shù)”對(duì)話框中的“AP元素”選項(xiàng)來(lái)設(shè)置層的默認(rèn)屬性。注意：

子AP元素可浮動(dòng)于文本編輯窗口的任何位置，子AP元素的大小也可以大于父AP元素。建立方法：建立AP元素嵌套將光標(biāo)移到現(xiàn)有層中，執(zhí)行“插入”/

“APDiv”或拖入AP元素基本操作激活A(yù)P元素：在AP元素內(nèi)的任何地方單擊，只有AP元素被激活后才能在其中輸入文本或插入圖像等內(nèi)容。選擇AP元素：?jiǎn)螕鬉P元素標(biāo)記先激活A(yù)P元素，再單擊選擇柄單擊AP元素邊框【Ctrl】+【Shift】+單擊在AP元素面板中單擊AP元素名稱選中多個(gè)AP元素按住【Shift】鍵，在要選中的AP元素中單擊鼠標(biāo)；在AP元素管理器中單擊AP元素的名稱。調(diào)整AP元素大小/調(diào)整多個(gè)AP元素大小

（同圖像調(diào)整）對(duì)齊AP元素：選擇AP元素后，執(zhí)行“修改”菜單中的“對(duì)齊”命令移動(dòng)和刪除AP元素（同圖像和文件的移動(dòng)刪除操作）拖動(dòng)AP元素的邊框或手柄選中AP元素后，按箭頭鍵注意：

在文檔編輯區(qū)選擇一個(gè)層，按住【Ctrl】鍵的同時(shí)再按鍵盤(pán)上的方向鍵即可按一次1個(gè)像素步幅來(lái)調(diào)整層大小。

在文檔編輯區(qū)選擇一個(gè)層，按【Shift+Ctrl】鍵的同時(shí)再按鍵盤(pán)上的方向鍵即可按一次10個(gè)像素步幅來(lái)調(diào)整層大小。注意：

選擇“修改”/“排列順序”/“設(shè)成寬度相同”或“設(shè)成高度相同”菜單命令。首先選擇的層將自動(dòng)調(diào)整為最后一個(gè)選擇的層相同的寬度或高度。AP元素屬性面板(設(shè)置單個(gè)和多個(gè)AP元素屬性)AP元素編號(hào)：標(biāo)識(shí)AP元素，只能用英文字母，不要用特殊字符左、上：子AP元素相對(duì)于父AP元素左上角位置，單位為像素寬、高：Z軸：AP元素深度，設(shè)置AP元素重疊次序可見(jiàn)性Default：一般與inherit相同，默認(rèn)為繼承父級(jí)元素的可見(jiàn)性Inherit：繼承父AP元素可見(jiàn)性Visible：顯示AP元素及其中內(nèi)容Hidden：隱藏AP元素及其中內(nèi)容溢出Visible：增加AP元素的大小，以顯示全部?jī)?nèi)容Hidden：超過(guò)AP元素大小的內(nèi)容被裁減，不出現(xiàn)滾動(dòng)條Scroll：無(wú)條件加滾動(dòng)條，（設(shè)計(jì)界面看不到，瀏覽器可看到）Auto：自動(dòng)加滾動(dòng)條，（設(shè)計(jì)界面看不到，瀏覽器可看到）剪輯：定義AP元素可見(jiàn)性AP元素面板顯示AP元素面板：【F2】鍵改變AP元素名稱：雙擊創(chuàng)建嵌套AP元素：選擇要作為子AP元素的AP元素，按住【Ctrl】鍵，將之拖到要作為父AP元素的AP元素頂上。修改AP元素的可見(jiàn)性：在可見(jiàn)性處單擊，進(jìn)行切換修改AP元素的深度：雙擊AP元素后面的數(shù)字在輸入框中輸入新值上下拖動(dòng)AP元素AP元素面板圖

AP元素可見(jiàn)性

AP元素名稱AP元素深度AP元素與表格轉(zhuǎn)換AP元素轉(zhuǎn)換為表格“修改”/“轉(zhuǎn)換”/“APdiv到表格”在對(duì)話框中進(jìn)行設(shè)置(最精確、最小、使用透明GIFs、置于頁(yè)面中央等)注意：重疊AP元素不能轉(zhuǎn)換。表格轉(zhuǎn)換為AP元素執(zhí)行“修改”/”轉(zhuǎn)換”/”表格到APdiv”在對(duì)話框設(shè)置AP元素布局頁(yè)面注意：防止AP元素重疊：選擇“AP元素”面板上“防止重疊”選項(xiàng)選擇“修改”/“排列”/“防止AP元素重疊”第三節(jié)框架一、創(chuàng)建框架

1、創(chuàng)建框架

2、創(chuàng)建嵌套框架二、選擇框架集與框架三、設(shè)置框架屬性

1、框架集屬性

2、框架屬性四、保存框架框架框架是將一個(gè)頁(yè)面劃分成不同的文檔區(qū)，每個(gè)文檔區(qū)顯示獨(dú)立的內(nèi)容，其效果是在瀏覽網(wǎng)頁(yè)時(shí),網(wǎng)頁(yè)中一部分區(qū)域（如公司Logo、導(dǎo)航條）內(nèi)容不改變，而其他區(qū)域內(nèi)容在不斷發(fā)生改變?？蚣芗荋TML文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、大小、位置以及在框架中初始顯示頁(yè)面的地址?？蚣芗募旧聿话跒g覽器中顯示的網(wǎng)頁(yè)內(nèi)容（對(duì)不能顯示框架的瀏覽器進(jìn)行的處理除外，即<noframes>部分），框架集文件只是向覽器提供應(yīng)如何顯示一組框架以及在這些框架中應(yīng)顯示哪些網(wǎng)頁(yè)的有關(guān)信息。框架構(gòu)成框架的組成：框架集、框架框架集：實(shí)際上也是一個(gè)HTML網(wǎng)頁(yè)?？蚣芗斜４骊P(guān)于頁(yè)面中的框架數(shù)、框架尺寸、位置及每個(gè)框架中作為內(nèi)容載入的所有文件名的信息,以及頁(yè)面上框架如何顯示信息，其頁(yè)面不在瀏覽器中顯示每個(gè)框架都包含對(duì)應(yīng)一個(gè)獨(dú)立的HTML文件框架頁(yè)由一個(gè)框架集和若干個(gè)框架組成。每一個(gè)框架對(duì)應(yīng)一個(gè)獨(dú)立html文件，由框架集來(lái)定義多個(gè)框架顯示問(wèn)題。創(chuàng)建框架、嵌套框架集創(chuàng)建框架執(zhí)行“插入”/“HTML”/“框架”命令單擊“框架按鈕”框架的分隔：拖曳框架邊框刪除框架：（將刪除框架邊框拖到父框架邊框或拖離頁(yè)面）創(chuàng)建嵌套框架集（創(chuàng)建預(yù)定義框架集）選擇框架在其中創(chuàng)建框架在Dreamweaver中預(yù)定義了一些框架集樣式，需要使用時(shí)直接插入即可。選擇框架集與框架框架面板:“窗口”菜單中的“框架”命令選擇框架集：在設(shè)計(jì)窗口中，單擊框架邊線可以選擇相應(yīng)的框架集。在框架面板中，單擊比較粗的邊框線可以選擇相應(yīng)的框架集。選擇框架：在面板單擊框架區(qū)框架屬性1、框架集屬性邊框、邊框?qū)挾取⑦吙蝾伾?、行列選定范圍、值、單位2、框架屬性框架名稱源文件：框架所指向的文件名滾動(dòng)：是否加滾動(dòng)條自動(dòng)：文檔內(nèi)容超出框架時(shí)，顯示滾動(dòng)條是：無(wú)論內(nèi)容多少，都顯示滾動(dòng)條否：不顯示滾動(dòng)條默認(rèn)：自動(dòng)不能調(diào)整大?。涸跒g覽時(shí)不能拖動(dòng)框架邊界邊界寬度、高度：內(nèi)容與框架邊界間距離框架鏈接

在使用框架技術(shù)文檔中鏈接與一般文檔中鏈接不同，增加了與框架有關(guān)鏈接目標(biāo)，可以在一個(gè)框架內(nèi)使用鏈接改變另一個(gè)框架內(nèi)容。保存框架框架集（保存框架頁(yè)）作為一個(gè)HTML文件用來(lái)組織框架，每一個(gè)框架也作為一個(gè)HTML文件保存內(nèi)容框架保存（保存框架）：框架集文檔框架文檔1框架文檔2框架文檔3在保存框架時(shí)，不要選擇框架，將光標(biāo)定位于框架中即可。保存框架與框架集之后才能在瀏覽器中瀏覽用框架布局的網(wǎng)頁(yè)。每個(gè)框架包含一個(gè)網(wǎng)頁(yè)，一個(gè)框架集則包含多個(gè)網(wǎng)頁(yè)，在保存時(shí)應(yīng)保存所有的框架與框架集。Iframe–浮動(dòng)框架

Iframe（浮動(dòng)框架）：使用它可以在指定位置以指定大小顯示其他網(wǎng)頁(yè)文檔的內(nèi)容。模板一、創(chuàng)建和編輯模板二、應(yīng)用模板與更新站點(diǎn)模板概念模板:模板是用來(lái)產(chǎn)生帶有固定特征和共同格式的文檔基礎(chǔ),是用戶進(jìn)行批量設(shè)計(jì)網(wǎng)頁(yè)文檔的框架.網(wǎng)頁(yè)常用的固定組成部分logo：即網(wǎng)站的徽標(biāo)，這是一個(gè)網(wǎng)站的標(biāo)志，在每個(gè)頁(yè)面最頂部的左上角，標(biāo)準(zhǔn)大小為88px×31px；banner：即頁(yè)面上的廣告條，可放在頁(yè)面的任意位置NavBar：即頁(yè)面上的導(dǎo)航條，一般放在頁(yè)面的頂部和底部copyright：即頁(yè)面上的版權(quán)信息，一般在頁(yè)面的最底部創(chuàng)建模板打開(kāi)“資源面板”：“窗口”/“資源”顯示模板窗口：?jiǎn)螕簟百Y源面板”左側(cè)的模板按鈕單擊