• <th id="d3k9k"></th>
      1. <em id="d3k9k"></em><dd id="d3k9k"><track id="d3k9k"></track></dd>

        案例實戰:應用表格

        • 2019-10-22 16:26:39
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.shabnamafrand.com

        表格素有網頁設計“靈魂”之稱,當然在標準設計過程中,很多效果可以直接使用CSS快速實現,但即便如此,其作用不可小視。下面結合實例介紹如何巧妙運用表格、單元格屬性在網頁設計中富有創意的網頁布局效果。

        制作圓角表格

        圓角表格在網頁布局中使用頻率最高。由于表格沒有提供直接設置圓角的屬性,制作圓角表格需要間接方法來完成,實現圓角表格的方法有很多種,如圖像法、像素法、編程法,其中圖像法使用范圍最廣。用圖像制作圓角表格的步驟如下。

        【操作步驟】

        第1步,使用Photoshop設計左右對稱的圓角圖標,設計寬度為8像素,高度為60像素,使用紅色(#DA2129)進行填充,如圖6.27所示。

        第2步,啟動Dreamweaver,新建文檔,保存為index.html。在頁面中插入一個表格,主要設置:1行3列,大小為800×60像素,居中顯示。

        提示:使用表格進行網頁布局時,一般要設置【表格】對話框中的【邊框粗細】文本框、【單元格邊距】文本框和【單元格間距】文本框都為0。也可以在插入表格之后,在【屬性】面板中設置【填充】、【間距】和【邊框】文本框為0。

        第3步,在表格兩端的單元格中分別插入圓角圖標,并設置單元格寬度和圖標寬度相同。在制作圓角圖標時應先設置好圖像大小和表格尺寸的配套。

        第4步,設置中間單元格的背景顏色為深紅色,使其與和圓角圖標顏色保持一致。

        第5步,在中間單元格內插入一個3行3列的表格。用該表格來布局標題欄,第1列用來控制標題與左側距離,中間列用來繪制白色豎線,第3列分別用來輸入標題和導航欄目。

        第6步,以同樣的方式在下面再插入一個表格,背景顏色設置為淺灰色,然后輸入深灰色的導航文本。

        巧做表格細線制作網頁線條方法多樣,簡單總結如下。   

        ?使用圖像法:用Photoshop制作直線,然后插入網頁。   

        ?在Dreamweaver中選擇【插入】|【水平線】命令插入,即使用<hr>標簽繪制水平直線。   

        ?用CSS定義元素邊框來制作直線,例如,div{border:solid 1px #FF0000;}代碼可以繪制紅色1像素寬的實線。   

        ?通過設置表格邊框。上述方法各有利弊,可根據個人需要進行選擇。在CSS之前,用表格制作細線比較常用。下面介紹一種獨特方法,通過設置單元格背景色來顯示直線,這種方法方便簡單,又具有非常大的靈活性和實用性。

        【操作步驟】

        第1步,打開6.4.1節操作網頁文檔in-dex.html。在標題欄下面插入一個1行3列的表格,寬800像素,居中顯示,實現網頁主體的布局,即一欄三列的設計格局。

        第2步,設置第1個單元格寬度為180像素,在該單元格中插入一個14行1列的表格,寬度為94%,居中顯示。

        1. 制作豎線

        第1步,在第一個單元格中插入一個1行3列的表格,寬為100%,高為20像素。設置插入表格的第1個單元格寬為5像素。

        第2步,由于Dreamweaver在網站建設插入表格時自動在每個單元格中嵌入一個空格符號&nbsp;,用來撐大單元格,當插入元素時,空格消失。所以在沒有輸入任何元素時,單元格最小寬度為10像素,最小高度為13像素。

        第3步,當要設置單元格高或寬為最小值時,就應該把這些空格符號&nbsp;清除掉,方法是把光標置于該單元格內或選中該單元格,再切換到【代碼】視圖,把<td width="5">&nbsp;</td>代碼中的&nbsp;刪除即可。

        第4步,刪除空格符號&nbsp;之后,設置的小單元格效果就可以立即顯示出來。然后設置第2個單元格寬度為1像素,背景顏色為淺灰色#DDDDDD,同樣也需要把代碼中的空格符號&nbsp;刪除。這樣就可以制作一個短豎線效果。

        第5步,通過設置第1個單元格的寬度來調整豎線的橫向位置;通過設置表格的高度來調整豎線的長短;通過設置該單元格的寬度來調整豎線的寬度;通過設置該單元格的背景顏色來設置豎線的顏色。

        2. 制作橫線

        第1步,橫線的制作方法要簡單點。選中第2行的單元格。然后在【屬性】面板中設置單元格高度為2像素,背景顏色為淺灰色#CCCCCC。

        第2步,切換到【代碼】視圖,刪除單元格中的空格符號&nbsp;。

        第3步,以同樣的方式制作豎線和橫線,注意灰度和寬度的變化。

        第4步,在這些直線單元格中輸入導航文本和圖像。


        當前文章標題:案例實戰:應用表格

        當前URL:http://www.shabnamafrand.com/news/wzzz/3114.html

        上一篇:設置表格屬性

        下一篇:藝術化處理圖像

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
      2. <th id="d3k9k"></th>
          1. <em id="d3k9k"></em><dd id="d3k9k"><track id="d3k9k"></track></dd>

            国产一区二区精品人妖系列,国产成人无码AV麻豆,国产真人一级a爱做片高潮,免费A黄片视屏