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

      1. 網頁設計中的設計圖文混排

        • 2019-09-29 15:03:29
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        本實例進一步鞏固網頁設計中圖文混排方法的使用,并把該方法運用到實際的網站制作中。示例介紹中國的傳統節日為題材,利用圖文混排的方法,實現頁面的圖文效果。

        【操作步驟】

        第1步,啟動Dreamweaver,新建文檔,保存為index.html。

        第2步,構建網頁的整體結構。第一個<p>標簽的內容是網頁的首段,在首段中用<span>標簽設置了首字下沉效果。然后是各個分標題,每個分標題都由兩個<p>標簽、一個<img>標簽組成,分別是分標題中的標題、圖片和段落內容。具體代碼如下:

        <body>

        <p><span  class="first">中</span>國的傳統節日形式多樣,內容豐富,是我們中華民族悠久的歷史文化的一個組成部分?!?lt;/p>

        <p class="title1">春節</p><img src="images/chunjie.jpg" class="pic1">

        <p  class="content">春節是我國一個古老的節日,也是全年最重要的一個節日,如何慶賀這個節日,在千百年的歷史發展中,形成了一些較為固定的風俗習慣,有許多還相傳至今?!?lt;/p>

        <p class="title2">清明節</p><img src="images/qingming.jpg" class="pic2"><p class="content">清明是我國的二十四節氣之一。由于二十四節氣比較客觀地反映了一年四季氣溫、降雨、物候等方面的變化,所以古代勞動人民用它安排農事活動?!痘茨献?天文訓》云:“春分后十五日,斗指乙,則清明風至?!?nbsp; ……</p><p class="title1">中秋節</p><img src="images/zhongqiu.jpg" class="pic1">

        <p class="content">每年農歷八月十五日,是傳統的中秋佳節。這時是一年秋季的中期,所以被稱為中秋?!?/p>

        </p>

        </body>

        第3步,規劃整個頁面的基本顯示屬性:為網頁選擇一個合適的背景顏色,設置<p>標簽的字體大小,也就是所有段落的字體大小,并設置首字下沉效果。

        <style type="text/css">body { background-color: #d8c7b4; /*頁面背景色*/ }p { 

        font-size: 12px; /*段落文字大小*/ }span.first { /*首字放大*/    

        font-size: 60px;    

        font-family: 黑體;    

        float: left;

        font-weight: bold;    

        color: #59340a; /*首字顏色*/}</style>

        第4步,考慮到網站建設時整體的圖文排版,采用一左一右的形式,所以圖文混排的CSS分為左右兩段,分別定義為img.pic1和img.pic2,不同的是一個在左邊一個在右邊。

        img.pic1 {    float: left;                  /*左側圖片混排*/    

        margin-right: 10px;           /*圖片右端與文字的距離*/    

        margin-bottom: 5px;           /*圖片底端與文字的距離*/}img.pic2 {    

        float: right;                 /*右側圖片文字的距離*/    margin-bottom: 5px;

        }

        第5步,設置正文的文字,文字本身不需要做太多調整,但是每一個段落的標題同樣是分為左右兩側的,要根據圖片的位置做出變化。所以小標題也和圖片一樣進行左右兩個CSS設置,分別為ti-tle1和title2。

        .title1 {/*左側標題*/    

        text-decoration: underline;  /*下劃線*/    

        font-size: 18px;    

        font-weight: bold;           /*粗體*/    

        text-align: left;            /*左對齊*/

        color: #59340a;              /*標題顏色*/}

        .title2 {/*右側標題*/    

        text-decoration: underline;    

        font-size: 18px;    

        font-weight: bold;    

        text-align: right;    

        color: #59340a;}p.content {/*正文內容*/    

        line-height: 1.2em;         /*正文行間距*/}

        從代碼中可以看出,兩段標題的代碼不同就在于文字的對齊方式,當圖片應用img.pic1而位于左側時,標題則使用title1,也相應地在左側。當圖片應用img.pic2而位于右側時,標題則使用title2,也相應地在右側。p.content設置了段落正文的樣式。

        本例主要是通過圖文混排的技巧,使文字和圖片一左一右應用兩種不同的對齊方式,采用兩組不同的CSS類樣式標記,合理地將圖片和文字融為一體。

        當前文章標題:網頁設計中的設計圖文混排

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

        上一篇:設置文字環繞

        下一篇:網頁設計中的圖片布局

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