網(wǎng)站設(shè)計(jì)與開發(fā)技術(shù)教程 第3章 靜態(tài)頁(yè)面制作

《網(wǎng)站設(shè)計(jì)與開發(fā)技術(shù)教程 第3章 靜態(tài)頁(yè)面制作》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、一、網(wǎng)頁(yè)布局----表格二、超鏈接三、添加文本四、插入圖像五、用框架布局頁(yè)面靜態(tài)頁(yè)面設(shè)計(jì)一、網(wǎng)頁(yè)布局1、布局的實(shí)質(zhì)布局:就是在頁(yè)面上劃分出不同的區(qū)域，按照設(shè)計(jì)的原則和方法，把不同的內(nèi)容放置到不同的位置上，并通過(guò)色彩調(diào)和出不同的網(wǎng)站基調(diào)，使網(wǎng)頁(yè)內(nèi)容形成一個(gè)有機(jī)的整體，充分表達(dá)網(wǎng)站主題的過(guò)程。布局的方法:表格、層、框架利用表格布局：在插入面板中選擇“常用”標(biāo)簽，點(diǎn)擊按鈕，彈出“插入表格”對(duì)話框，設(shè)置相應(yīng)的參數(shù)來(lái)插入表格。也可以通過(guò)選擇“【插入】→【表格】”菜單命令打開“插入表格”對(duì)話框?！安迦氡砀瘛睂?duì)話框行數(shù)：新插入的表格的行數(shù)，可以更改數(shù)值來(lái)確定行數(shù)。列數(shù)：新插入的表格的

2、列數(shù)，可以更改數(shù)值來(lái)確定列數(shù)，行、列數(shù)控制表格劃分的區(qū)域個(gè)數(shù)（行×列）。表格寬度：表格的寬度可以選擇是占頁(yè)面寬度的百分比（單位為百分比）或者固定尺寸（單位為像素）。邊框粗細(xì)：表格的邊界寬度，單位為像素，表格的屬性設(shè)置中將詳細(xì)講解邊框、填充值和間距值的區(qū)別。單元格邊距：?jiǎn)卧襁吙蚝蛦卧駜?nèi)容的間隔距離。單元格間距：?jiǎn)卧窈蛦卧裰g的間隔距離。頁(yè)眉：把表格的第一行或第一列作為標(biāo)題行或標(biāo)題列。作為標(biāo)題行或標(biāo)題列的行或列的內(nèi)容將以粗體的形式顯示。標(biāo)題：提供一個(gè)顯示在表格外的表格標(biāo)題。對(duì)齊標(biāo)題：指定表格標(biāo)題相對(duì)于表格的顯示位置。摘要：給出表格的說(shuō)明。該文本不會(huì)顯示在用戶的瀏覽器

3、中。1.表格的屬性設(shè)置（1）“表格Id”是表格的ID，有時(shí)動(dòng)態(tài)更改表格屬性時(shí)要用到它。（2）“行”和“列”是表格中行和列的數(shù)目。（3）“寬”和“高”是表格的寬度和高度，以像素為單位或者是按占瀏覽器窗口寬度的百分比計(jì)算的。（4）“填充”是單元格內(nèi)容和單元格邊界之間的像素?cái)?shù)。（5）“間距”是相鄰的單元格之間的像素?cái)?shù)。（6）“對(duì)齊”指表格相對(duì)于同一段落中其他元素（如文本或圖像）的顯示位置。居左、居中還是居右。（7）“邊框”指表格邊框的寬度（以像素為單位）（8）“清除列寬”按鈕和“清除行高”按鈕是清除表格中所有顯示指定的行高和列寬值。（9）“將表格寬度轉(zhuǎn)換成像素”和“將表格高度

4、轉(zhuǎn)換成像素”按鈕是將表格中列的寬度或高度設(shè)置為以像素為單位的當(dāng)前數(shù)值。（10）“將表格寬度轉(zhuǎn)換成百分比”和“將表格高度轉(zhuǎn)換成百分比”按鈕是將表格中列的寬度或高度設(shè)置為按占文檔窗口寬度百分比表示的當(dāng)前寬度。（11）“背景顏色”指定表格的背景顏色。（12）“邊框顏色”指定表格的邊框顏色。（13）“背景圖像”指定表格的背景圖像。選中一個(gè)單元格選中一行選中一列選中不相鄰的單元格(Ctrl)插入刪除行和列（鼠標(biāo)右鍵?“表格”選項(xiàng)）2．單元格的操作3.單元格屬性（1）“合并單元格”按鈕可將所選的多個(gè)連續(xù)單元格、行或列合并為一個(gè)單元格。（2）“拆分單元格”按鈕可將一個(gè)單元格分成兩個(gè)或

5、是更多的單元格。單擊該按鈕，會(huì)打開“拆分單元格”對(duì)話框，如圖所示。在該對(duì)話框中可以選擇將選中的單元格拆分成“行”或“列”（3）“水平”文本框：設(shè)置單元格內(nèi)對(duì)象的水平對(duì)齊方式。（4）“垂直”文本框：設(shè)置單元格內(nèi)對(duì)象的垂直對(duì)齊方式。（5）“寬”和“高”文本框：設(shè)置單元格的寬度和高度，可以用像素或百分比來(lái)表示。（6）“不換行”復(fù)選框：設(shè)置單元格文本是否換行。如果選擇該復(fù)選框，則當(dāng)輸入的數(shù)據(jù)超出單元格寬度時(shí)，單元格會(huì)自動(dòng)調(diào)整寬度來(lái)容納數(shù)據(jù)。（7）“標(biāo)題”復(fù)選框：如果選擇該復(fù)選框，可以將所選單元格的格式設(shè)置為表格標(biāo)題單元格。默認(rèn)情況下，表格標(biāo)題單元格的內(nèi)容為粗體并且居中對(duì)齊。（8

6、）“背景”文本框：設(shè)置單元格的背景圖像。（9）“背景顏色”文本框：設(shè)置單元格的背景顏色。（10）“邊框”文本框：設(shè)置單元格邊框的顏色。例：網(wǎng)頁(yè)模板的設(shè)計(jì)使用模板提高網(wǎng)頁(yè)制作效率模板是網(wǎng)頁(yè)編輯軟件生成具有相似結(jié)構(gòu)和外觀的一種網(wǎng)頁(yè)制作功能。如果希望站點(diǎn)中的網(wǎng)頁(yè)享有某種特性，例如，相同的布局結(jié)構(gòu)，相似的導(dǎo)航欄等內(nèi)容，模板是是非常有用的。模板是由兩類區(qū)域組成的：鎖定區(qū)域和可編輯區(qū)域。當(dāng)某個(gè)文檔從某些模板中創(chuàng)建時(shí)，可編輯區(qū)域則成為唯一可以被改變的地方。1．直接新建模板在Dreamweaver中可以直接創(chuàng)建模板文件，具體步驟如下：（1）選擇“文件”｜“新建”命令，打開“新建文檔”的

7、對(duì)話框，在對(duì)話框的“常規(guī)”選項(xiàng)卡中選擇“類別”中的“模板頁(yè)”中的“HTML模板”選項(xiàng)2．從現(xiàn)有頁(yè)面生成模板對(duì)于已經(jīng)設(shè)計(jì)好的網(wǎng)頁(yè)文檔，如果覺(jué)得有必要作為模板文檔，則將其另存為模板即可，具體操作如下：（1）打開要另存為模板的文檔網(wǎng)頁(yè)，選擇“文件”｜“另存為模板”命令，（2）打開“另存為模板”對(duì)話框，在對(duì)話框中，在“站點(diǎn)”下列列表中選擇相應(yīng)的站點(diǎn)，在“另存為”文本框中輸入模板的名稱，單擊“保存”按鈕，即可將文件保存為模板。1.執(zhí)行“插入>表格”命令，彈出“表格”對(duì)話框，設(shè)置行數(shù)為“7”，列數(shù)為“7”，表格寬度設(shè)置為“930”像素，高設(shè)置為“13