自然與生活科技

css01-單欄(參考網站教學範例)-粗略規劃

: 3-2.jpg (144.74 KiB) 已瀏覽 1601 次

: 3-3.jpg (42.61 KiB) 已瀏覽 1601 次

步驟一、--->Div標籤加在 http://172.20.2.3/~phpbb/LEARN/CSS/001-index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>視傳一AB-學號-網頁版面基本架構</title>
  <link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="wrapper"> 
  <div id="header"></div>
  <div id="btn"></div>
  <div id="content"></div>
  <div id="footer"></div>
</div>
</body>
</html>

步驟二、http://172.20.2.3/~phpbb/LEARN/CSS/002-index.html

代碼: 選擇全部


<!DOCTYPE html>
<html>
<head>
  <title>學號-以色塊建構的網頁單欄排版</title>
  <link rel="stylesheet" href="style.css" media="screen" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="wrapper"> 
  <div id="header">

  <h1>利用Div標籤與CSS建立基本單欄網頁版型</h1>
  單純色塊的講解

  </div>
  
  <div id="content"> 

    利用Div標籤與CSS建立基本網頁版型，以全國比較文學會議
    <h3>一、Div標籤與CSS</h3>
    在早期瀏覽器以IE為主的網頁設計時代，大多以表格(TABLE)或頁框(FRAME)，來製作網頁主要的定位與架構，但是隨著上網習慣的改變，網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等，目前網頁設計的架構，多半以DIV搭配CSS為設計主流，以Div標籤來建立網頁區塊，區分各個主要頁面做為主要的排版架構，搭配CSS語法來美化網頁，以往的網頁美化設定大多直接寫在HTML網頁本身，現在則分開以HTML為架構設定，CSS為美化設定，一個建築網頁架構，一個美化網頁。
    <h3>二、單欄版型的範例</h3>
    第一個進入Dreamweaver的例子，將以全國比較文學會議網站為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。
    這是一個很單純的單欄版型的網頁，因為內容單純，故以單欄來設計。
    <h3>三、DIV架構與尺寸分析</h3>
    第一個進入Dreamweaver的例子，將以全國比較文學會議網站為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。
    這是一個很單純的單欄版型的網頁，因為內容單純，故以單欄來設計。

  </div>
  
  <div id="footer">

  │中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416  │ 03-6991111 │<br>
  │地址：新竹校區：303-01 新竹縣湖口鄉中山路三段530號  │台鐵北湖車站步行三分鐘到校 <br>
  │最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by 

  </div>
  
</div>
</body>
</html>

步驟三-導入style.css http://172.20.2.3/~phpbb/LEARN/CSS/003-index.html

代碼: 選擇全部

#wrapper {
        width: 900px;   /*寬度設定為900px*/
        margin: auto;   /*版面居中對齊*/
        }

#header {
        height: 150px; /*高度設定為150px*/
        }

#content {
        /* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper)，所以可不用設定寬度*/
        }

#footer {
        /*可不用設定寬度和高度，由文字來決定*/
         }

步驟四-加入背景色background-color設定http://172.20.2.3/~phpbb/LEARN/CSS/004-index.html

代碼: 選擇全部

body {
        margin: 0px;   /*緊貼頂部(上下左右)，沒有空隙*/
        background-color:#212663; /*背景色設定*/
        }

#wrapper {
        width: 900px;   /*寬度設定為900px*/
        margin: auto;   /*版面居中對齊*/
        }

#header{
        background-color:#069;
        height: 150px; /*高度設定*/
        }

#content {
        /*可不用設定寬度和高度，由文字來決定*/
        background-color:#D7E1FF;  /*背景色設定*/
        }

#footer {
        /*可不用設定寬度和高度，由文字來決定*/
        background-color:#069;     
        }

步驟五-加入文字font和內距padding設定

步驟五-加入文字font和內距padding設定http://172.20.2.3/~phpbb/LEARN/CSS/005-index.html

代碼: 選擇全部

body {
        margin: 0px;   /*緊貼頂部(上下左右)，沒有空隙*/
        background-color:#212663; /*背景色設定*/
        }

#wrapper {
        width: 900px;   /*寬度設定為900px*/
        margin: auto;   /*版面居中對齊*/
        font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
        color: #C6C6C6;  /*文字顏色設定*/
        border: 6px solid #003; /*網頁做外框的設定*/
        }

#header{
            background-color:#069;
            height: 110px; /*高度設定，設定之高度加上下內距padding等時實際高度，110px+20px+20px=150px*/
            padding:20px;  /*內距設定*/
        }

#content {
        /*可不用設定寬度和高度，由文字來決定高度*/
        background-color:#D7E1FF;  /*背景色設定*/
        font-size: 14px; /*字體大小*/
        line-height: 2em;   /*字體行間為兩個字距*/
        color:#666; /*文字顏色設定*/
        padding: 30px; /*文字與#content間的內距*/
        }

#footer {
        /*可不用設定寬度和高度，由文字來決定高度*/
        background-color:#069;     
        font-size: 12px; /*文字尺寸設定*/
        line-height: 1.5em; /*文字行高設定為1.5字高*/
        color: #FFF; /*文字顏色設定*/
        padding: 20px; /*內距設定*/
       }

h1{
      font-size:30px;
      color:#FFF;
    }

h3{
      font-size:18px;
      color:#5B63C4;
  }