本節(jié)繼續(xù)使用表格來(lái)設(shè)計(jì)完整頁(yè)面,整個(gè)頁(yè)面在網(wǎng)站建設(shè)時(shí)通過(guò)多層嵌套表格設(shè)計(jì)3行3列的頁(yè)面布局樣式。
【操作步驟】
第1步,在設(shè)計(jì)頁(yè)面之前,使用Photoshop制作并處理網(wǎng)頁(yè)中使用的圖像,然后建立一個(gè)images文件夾,將這些圖像文件都放在該文件夾中,以備引用。整個(gè)首頁(yè)的布局思路在制作之前應(yīng)先在草稿紙上勾畫一下,然后用Photoshop制作一個(gè)模板。
第2步,根據(jù)需要再用切片工具切割圖像。
第3步,啟動(dòng)Dreamweaver,新建文檔,保存為index.html。在主窗口中選擇【修改】|【頁(yè)面屬性】命令,打開【頁(yè)面屬性】對(duì)話框,在該對(duì)話框中單擊左側(cè)【分類】列表中的【標(biāo)題/編碼】選項(xiàng),在【標(biāo)題】文本框中輸入網(wǎng)頁(yè)的標(biāo)題“個(gè)人主頁(yè)-桃花源”。當(dāng)用戶在瀏覽器中打開此網(wǎng)頁(yè)時(shí),網(wǎng)頁(yè)標(biāo)題會(huì)出現(xiàn)在瀏覽器的標(biāo)題欄中。
第4步,單擊【分類】列表中的【外觀(CSS)】選項(xiàng),在右側(cè)的【背景圖像】文本框中輸入網(wǎng)頁(yè)背景圖像的完整名稱。本例中,已將背景圖像復(fù)制到站點(diǎn)中的images文件夾中,因此輸入文件的相對(duì)路徑即可,單擊【瀏覽】按鈕可以在打開的對(duì)話框中快速找到背景圖像。
第5步,在【重復(fù)】下拉菜單中選擇repeat-x,即定義橫向重復(fù),因?yàn)楸卷?yè)背景圖像為漸變色圖像,只能在橫向上重復(fù)。
第6步,為使網(wǎng)頁(yè)在瀏覽器中不留空白邊距,可以在下面4個(gè)邊距文本框中輸入“0”,設(shè)置網(wǎng)頁(yè)與瀏覽器之間沒(méi)有邊距。
提示:在網(wǎng)頁(yè)設(shè)計(jì)時(shí),如果使用的圖像文件不在站點(diǎn)中,可以單擊文本框右邊的【瀏覽】按鈕,在打開的對(duì)話框中查找圖像。單擊【確定】按鈕后,系統(tǒng)會(huì)彈出提示對(duì)話框詢問(wèn)是否把該圖像保存到站點(diǎn)內(nèi),并打開【復(fù)制文件為】對(duì)話框讓用戶保存該圖像到站點(diǎn)內(nèi)。
第7步,單擊【分類】列表中的【鏈接】選項(xiàng),在右側(cè)的文本框中設(shè)置鏈接文本在不同狀態(tài)下的樣式。
本例中,為了使鏈接文本和網(wǎng)頁(yè)整體顏色協(xié)調(diào)一致,設(shè)置【鏈接顏色】(正常狀態(tài)下)為#663300,【交換圖像鏈接】(鼠標(biāo)指針經(jīng)過(guò)鏈接時(shí))為#857940,【已訪問(wèn)鏈接】(單擊后的文本鏈接)為#663300,和正常狀態(tài)顏色一致。
第8步,在【下劃線樣式】下拉列表框中選擇“交換圖像時(shí)隱藏圖像”選項(xiàng),即當(dāng)鼠標(biāo)指針經(jīng)過(guò)鏈接時(shí)不再顯示系統(tǒng)默認(rèn)的顯示下劃線效果。
第9步,使用表格布局頁(yè)面。上下共插入兩個(gè)并列的表格,然后在第2個(gè)表格中嵌入多個(gè)不同層級(jí)的表格。
提示:插入的表格要隱藏邊框,設(shè)置單元格邊距和單元格間距為0,避免這些屬性對(duì)頁(yè)面的影響。關(guān)于表格的行數(shù)、列數(shù)可以根據(jù)需要自由設(shè)置,表格的長(zhǎng)度一般設(shè)置原則為:最外圍表格建議指定固定數(shù)值,單位為像素;嵌套表格可以設(shè)置為百分比,一般情況下為100%。表格之間可以嵌套,嵌套表格的目的是為了更詳細(xì)地布局網(wǎng)頁(yè),但建議不要嵌套太深,一般不要超過(guò)5層,最好保持在3層內(nèi)。此時(shí)可以放大視圖,以方便觀察。
第10步,在表格中插入圖像。在插入前,先在表格的單元格中單擊,選擇【插入】|【圖像】|【圖像】命令,打開【選擇圖像源文件】對(duì)話框。在該對(duì)話框的文件列表中選擇要插入的圖像文件。單擊【確定】按鈕,選定的圖像即被插入到單元格中。
第11步,在表格中插入背景圖像。網(wǎng)頁(yè)可以設(shè)置背景圖像,表格、單元格、行都可以設(shè)置背景圖像。背景圖像在插入表格之后會(huì)根據(jù)表格大小進(jìn)行重復(fù)顯示。當(dāng)表格比圖像小時(shí),則顯示局部圖像;當(dāng)表格比圖像大時(shí),則重復(fù)顯示圖像;如果希望正好顯示背景圖像,可以設(shè)置單元格大小和圖像大小一致。
第12步,在網(wǎng)頁(yè)中輸入和設(shè)置文本。將插入點(diǎn)定位到需要插入文本的位置,然后輸入文本即可。
在設(shè)計(jì)網(wǎng)頁(yè)時(shí)要設(shè)置文本屬性,首先要選定文本。在【屬性】面板中設(shè)置:文本的顏色為深色,字體大小為12像素。在該頁(yè)面中運(yùn)用了樣式maincontent,使用樣式的好處就是能夠快速便捷地控制頁(yè)面元素的屬性,例如,定義一個(gè)樣式maincontent,代碼如下:
..maincontent {
font-size: 12px;
color: #663300;
line-height: 20px;
font-family: arial, helvetica, sans-serif;
text-decoration: none}
上面代碼就表示定義元素的字體大小為12像素,顏色為#663300,行高為20px,字體為arial、helvetica、sans-serif中的一種,不定義文本修飾。定義完畢樣式,就可以把這些樣式應(yīng)用到網(wǎng)頁(yè)中任何選中的文本。
第13步,設(shè)置超鏈接文本。選定要作為超鏈接載體的文本,在【屬性】面板中【鏈接】文本框中直接輸入目標(biāo)網(wǎng)頁(yè)文件的絕對(duì)URL,如files/documnets.html。
第14步,完成頁(yè)面設(shè)計(jì)操作,按Ctrl+S快捷鍵保存文檔,然后按F12鍵在瀏覽器中預(yù)覽。
當(dāng)前文章標(biāo)題:設(shè)計(jì)個(gè)人小站
當(dāng)前URL:http://m.iy5y368.cn/news/wzzz/3121.html