<output id="jbxdv"></output>

      1. 設計個人小站

        • 2019-11-05 15:06:43
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        本節繼續使用表格來設計完整頁面,整個頁面在網站建設時通過多層嵌套表格設計3行3列的頁面布局樣式。

        【操作步驟】

        第1步,在設計頁面之前,使用Photoshop制作并處理網頁中使用的圖像,然后建立一個images文件夾,將這些圖像文件都放在該文件夾中,以備引用。整個首頁的布局思路在制作之前應先在草稿紙上勾畫一下,然后用Photoshop制作一個模板。

        第2步,根據需要再用切片工具切割圖像。

        第3步,啟動Dreamweaver,新建文檔,保存為index.html。在主窗口中選擇【修改】|【頁面屬性】命令,打開【頁面屬性】對話框,在該對話框中單擊左側【分類】列表中的【標題/編碼】選項,在【標題】文本框中輸入網頁的標題“個人主頁-桃花源”。當用戶在瀏覽器中打開此網頁時,網頁標題會出現在瀏覽器的標題欄中。

        第4步,單擊【分類】列表中的【外觀(CSS)】選項,在右側的【背景圖像】文本框中輸入網頁背景圖像的完整名稱。本例中,已將背景圖像復制到站點中的images文件夾中,因此輸入文件的相對路徑即可,單擊【瀏覽】按鈕可以在打開的對話框中快速找到背景圖像。

        第5步,在【重復】下拉菜單中選擇repeat-x,即定義橫向重復,因為本頁背景圖像為漸變色圖像,只能在橫向上重復。

        第6步,為使網頁在瀏覽器中不留空白邊距,可以在下面4個邊距文本框中輸入“0”,設置網頁與瀏覽器之間沒有邊距。

        提示:在網頁設計時,如果使用的圖像文件不在站點中,可以單擊文本框右邊的【瀏覽】按鈕,在打開的對話框中查找圖像。單擊【確定】按鈕后,系統會彈出提示對話框詢問是否把該圖像保存到站點內,并打開【復制文件為】對話框讓用戶保存該圖像到站點內。

        第7步,單擊【分類】列表中的【鏈接】選項,在右側的文本框中設置鏈接文本在不同狀態下的樣式。

        本例中,為了使鏈接文本和網頁整體顏色協調一致,設置【鏈接顏色】(正常狀態下)為#663300,【交換圖像鏈接】(鼠標指針經過鏈接時)為#857940,【已訪問鏈接】(單擊后的文本鏈接)為#663300,和正常狀態顏色一致。

        第8步,在【下劃線樣式】下拉列表框中選擇“交換圖像時隱藏圖像”選項,即當鼠標指針經過鏈接時不再顯示系統默認的顯示下劃線效果。

        第9步,使用表格布局頁面。上下共插入兩個并列的表格,然后在第2個表格中嵌入多個不同層級的表格。

        提示:插入的表格要隱藏邊框,設置單元格邊距和單元格間距為0,避免這些屬性對頁面的影響。關于表格的行數、列數可以根據需要自由設置,表格的長度一般設置原則為:最外圍表格建議指定固定數值,單位為像素;嵌套表格可以設置為百分比,一般情況下為100%。表格之間可以嵌套,嵌套表格的目的是為了更詳細地布局網頁,但建議不要嵌套太深,一般不要超過5層,最好保持在3層內。此時可以放大視圖,以方便觀察。

        第10步,在表格中插入圖像。在插入前,先在表格的單元格中單擊,選擇【插入】|【圖像】|【圖像】命令,打開【選擇圖像源文件】對話框。在該對話框的文件列表中選擇要插入的圖像文件。單擊【確定】按鈕,選定的圖像即被插入到單元格中。

        第11步,在表格中插入背景圖像。網頁可以設置背景圖像,表格、單元格、行都可以設置背景圖像。背景圖像在插入表格之后會根據表格大小進行重復顯示。當表格比圖像小時,則顯示局部圖像;當表格比圖像大時,則重復顯示圖像;如果希望正好顯示背景圖像,可以設置單元格大小和圖像大小一致。

        第12步,在網頁中輸入和設置文本。將插入點定位到需要插入文本的位置,然后輸入文本即可。

        設計網頁時要設置文本屬性,首先要選定文本。在【屬性】面板中設置:文本的顏色為深色,字體大小為12像素。在該頁面中運用了樣式maincontent,使用樣式的好處就是能夠快速便捷地控制頁面元素的屬性,例如,定義一個樣式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中的一種,不定義文本修飾。定義完畢樣式,就可以把這些樣式應用到網頁中任何選中的文本。

        第13步,設置超鏈接文本。選定要作為超鏈接載體的文本,在【屬性】面板中【鏈接】文本框中直接輸入目標網頁文件的絕對URL,如files/documnets.html。

        第14步,完成頁面設計操作,按Ctrl+S快捷鍵保存文檔,然后按F12鍵在瀏覽器中預覽。


        當前文章標題:設計個人小站

        當前URL:http://www.freenetsites.com/news/wzzz/3121.html

        上一篇:如何在網頁設計中設計音樂首頁

        下一篇:在網頁設計中制作跳轉菜單

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>