Change History

[color=#663300]三、DIV架構與尺寸分析站排版IMG]

若轉換成第三十四屆全國比較文學會議網站的架構的對照即為

[ width: 900px; //寬度設定為900px
IMG]http://i1136.photobucket.com/alb width: 900px; //寬度設定為900px
; //網頁做外框的設定
}

#header30px
ight: 130px; //高度設定為130px
backgwidth: 900px; //寬度設定為900px
width: 900px; //寬度設定為900px
0px; //高度設定為 30px，此部分也可不用設定
}

#conten-height: 2em; //字體行間為兩個字距
}

#footer IV
font-size: 16px;
font-weight: bolder;
line-height: 3em;
color: #FFF;
bac四、基本版面和尺寸設定好之後

將現成圖片置入，可以dreamweaver插入圖片的方式置入

xt-align:center; //居中對齊
}


bod插入圖片與加入最後框的CSS語法：
y {
margin: 0px; //緊貼頂部(上下左右)，沒有空隙
}



4.置入圖片

基本版面和尺寸設定好之後，將現成圖片置入，可以dreamweaver插入圖片的方式置入
或者以CSS的語法直接填入，我們就完成了一個基本的頁面架構，接下來就可以做內容的文字編排了。


插入圖片、文字與設定最外框的CSS語法：


<br /> #wrapper {<br /> width: 900px; //寬度設定為900px<br /> mily: "微軟正黑體",Arial, Helvetica, sans-serif;<br /> color: #333;<br /> border: 6px solid #313000; //網頁做外框的設定<br /> }<br /> <br /> #header {<br /> height: 130px; //高度設定為130px<br /> width: 900px; //寬度設定為900px<br /> height: 30px; //高度設定為 30px<br /> background-image: url(images/34_01.jpg); //背景圖片設定<br /> background-repeat: no-repeat; //設定為背景不重複<br /> }<br /> <br /> #btn {<br /> height: 30px; //高度設定為 30px，此部分也可不用設定<br /> }<br /> <br /> #content {<br /> //可不用設定寬度<br /> padding: 30px; //文字與#content間的內距<br /> font-size: 14px; //字體大小<br /> line-height: 2em; //字體行間為兩個字距<br /> }<br /> <br /> #footer {<br /> height: 82px; //高度設定為 82px<br /> font-size: 12px;<br /> line-height: 1.5em;<br /> color: #FFF;<br /> background-image: url(images/34_08_08_08.jpg);<br /> background-repeat: no-repeat;<br /> }<br /> <br /> #titile_bar { //標題的DIV<br /> font-size: 16px;<br /> parkyang/div-layout-02.jpg[/IMG]<br /> <br /> <br /> <b>尺寸規劃設定</b><br /> <br /> 做設計任何網頁之前，在規畫好版面之後，就必須設定版面尺寸，以做為後續設計的依據。<br /> <br /> [IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-03.jpg[/IMG]<br /> <br /> 我們這次先準備好預做好的圖檔，下次上課則會正式的教大家如何自己製圖和 <br /> <br /> body {<br /> 切割成網頁可使用的圖片做法。<br /> <br /> <br /> <h2>[color=#663300]<b>四、 }<br />


4.置入圖片

基本版面和尺寸設定好之後，將現成圖片置入，可以dreamweaver插入圖片的方式置入
或者以CSS的語法直接填入，我們就完成了一個基本的頁面架構，接下來就可以做內容的文字編排了。


插入圖片、文字與設定最外框的CSS語法：


<br /> #wrapper {<br /> width: 900px; //寬度設定為900px<br /> margin: auto; //版面居中對齊<br /> border: 6px solid #313000; //最外框的設定：6px的深綠色實線<br /> }<br /> <br /> #header {<br /> width: 900px; //寬度設定為900px<br /> height: 130px; //高度設定為130px<br /> background-image: url(images/header.jpg); //插入背景圖片<br /> background-repeat: no-repeat; // 不重複<br /> }<br /> <br /> #btn {<br /> height: 30px; //高度設定為 30px，可不用設定<br /> }<br /> <br /> #content {<br /> width: 900px; //寬度設定為900px<br /> }<br /> <br /> #footer {<br /> width: 900px; //寬度設定為900px<br /> height: 82px; //高度設定為 82px<br /> background-image: url(images/footer.jpg); //插入背景圖片<br /> background-repeat: no-repeat; // 不重複<br /> }<br /> <br /> body {<br /> margin: 0px; //緊貼頂部，沒有空隙<br /> 以單純的HTML與CSS架構的方法</b>[/color]</h2><br /> 以上的DIV架構，直接以HTML的語法可寫成：<br /> <br /> 而html的寫法則為：<br /> <br /> 建立新的html檔，命名為：index.html<br /> <br /> <xmp><div id="wrapper"> <br /> <div id="top"></div><br /> <div id="btn"></div><br /> <div id="content"></div><br /> <div id="footer"></div><br /> </div>


1.以D4.置入圖片

基本版面和尺寸設定好之後，將現成圖片置入，可以dreamweaver插入圖片的方式置入
或者以CSS的語法直接填入，我們就完成了一個基本的頁面架構，接下來就可以做內容的文字編排了。
IV建構網頁基本架構

以下為最基本的網站排版架構

網頁若為指定寬度，只要設定在最外層即可。

基本的尺寸設定為：
136.photobucket.com/albums/n481/parkparkyang/div-layout-01.jpg[/IMG]

若轉換成第三十四屆全國比較文學會議網站的架構的對照即為

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-02.jpg[/IMG]


2.尺寸規劃設定

做設計任何網頁之前，在規畫好版面之後，就必須設定版面尺寸，以做為後續設計的依據。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-03.jpg[/IMG]

我們這次先準備好預做好的圖檔，下次則會正式的教大家如何自己製圖和切割成網置入圖片
頁可使用的圖片做法。

[color=#663300]四、以單純的HTML與CSS架構的方法[/color]

以上的DIV架構，直接以HTML的語法可寫成：

步驟如下：

建立新的html檔，命名為：index.html

<div id="wrapper"> <br /> <div id="top"></div><br /> <div id="btn"></div><br /> <div id="content"></div><br /> <div id="footer"></div><br /> </div>
--------------------------------------------------------------------------------------------------------
[color=#993300]以下我們將分為兩種方法來製作這個網頁：

第一種是以單純的HTML加CSS的方式撰寫
第二種則是以DREAMWEAVER來製作排版

大家可以比較並體會兩者製作的差異，未來兩者擇其一來製作即可。[/color]
--------------------------------------------------------------------------------------------------------

[color=#663300]四、以單純的HTML與CSS架構的方法[/color]

以上的DIV架構，直接以HTML的語法可寫成以下語法

步驟如下：

建立新的html檔，命名為：index.html

<div id="wrapper"> <br /> <div id="top"></div><br /> <div id="btn"></div><br /> <div id="content"></div><br /> <div id="footer"></div><br /> </div>

加入完整的HTML的架構語法則為

<br /> <html><br /> <head><br /> <title>視傳一A(B)-學號-網頁版面基本架構</title><br /> <title>視傳一AB-學號-網頁版面基本架構</title><br /> <link rel="stylesheet" href="style.css" media="screen" /><br /> </head><br /> <body><br /> <div id="wrapper"> <br /> <div id="top"></div><br /> <div id="header"></div><br /> <div id="btn"></div><br /> <div id="content"></div><br /> <div id="footer"></div><br /> </div>

加入完整的HTML的架構語法則為
ight: 130px; //高度設定為130px
}

#btn {
height: 30px; //高度設定為 30px，此部分也可不用設定
}

#content {
//可不用設定寬度
}

#footer {
height: 82px; //高度設定為 82px
}




置入圖片之後的語法：

基本版面和尺寸設定好之後，可以將現成圖片置入，以CSS的語法直接填入，我們就完成了一個基本的頁面設定，接下來就可以做內容的文字編排了。


插入圖片、文字與設定最外框的CSS語法：


<br /> #wrapper {<br /> width: 900px; //寬度設定為900px<br /> margin: auto; //版面居中對齊<br /> font-family: "微軟正黑體",Arial, Helvetica, sans-serif;<br /> color: #333;<br /> border: 6px solid #313000; //網頁做外框的設定<br /> }<br /> <br /> #header {<br /> height: 130px; //高度設定為130px<br /> background-image: url(images/34_01.jpg); //背景圖片設定<br /> background-repeat: no-repeat; //設定為背景不重複<br /> }<br /> <br /> #btn {<br /> height: 30px; //高度設定為 30px，此部分也可不用設定<br /> }<br /> <br /> #content {<br /> //可不用設定寬度<br /> padding: 30px; //文字與#content間的內距<br /> font-size: 14px; //字體大小<br /> line-height: 2em; //字體行間為兩個字距<br /> }<br /> <br /> #footer {<br /> height: 82px; //高度設定為 82px<br /> font-size: 12px;<br /> line-height: 1.5em;<br /> color: #FFF;<br /> background-image: url(images/34_08_08_08.jpg);<br /> background-repeat: no-repeat;<br /> }<br /> <br /> #titile_bar { //標題的DIV<br /> font-size: 16px;<br /> /*寬度設定為900px*/<br /> margin: auto; /*版面居中對齊*/<br /> �的html檔，命名為#header {<br /> height: 130px; /*高度設定為130px*/<br /> }<br /> <br /> #btn {<br /> height: 30px; /*高度設定為 30px，此部分也可不用設定*/<br /> }<br /> <br /> #conte// {<br /> <br /> /*可不用設定寬度*/<br /> }<br /> <br /> #footer {<br /> // height: 82px<br /> ; /*高度設定為 82px*/<br /> }<br /> <br />


置入圖片之後的語法：

基本版面和尺寸設定好之後，可以將現成圖片置入，以CSS的語法直接填入，我們就完成了一個基本的頁面設定，接下來就可以做內容的文字編排了。


插入圖片、文字與設定最外框的CSS語法：


<br /> index.html 並加入下面內容：<br /> <br /> <xmp><div id="wrapper"> <br /> <div id="header"></div><br /> <div id="btn"></div><br /> <div id="content"></div><br /> <div id="footer"></div><br /> </div>

[步驟2] 加入完整的HTML的架構語法則為

<!DOCTYPE html><br /> <html><br /> <head><br /> <title>視傳一AB-學號-網頁版面基本架構</title><br /> <link rel="stylesheet" href="style.css" media="screen" /><br /> </head><br /> <body><br /> <div id="wrapper"> <br /> <div id="header"></div><br /> <div id="btn"></div><br /> <div id="content"></div><br /> <div id="footer"></div><br /> </div><br /> </body><br /> </html><br />

[步驟3] 為了設定尺寸，則需另開新的CSS檔案來設定

命名為 style.css

單欄網頁若為指定寬度，只要設定在最外層的 DIV (#wrapper)即可。

基本的尺寸設定為：

#wrapper {<br /> width: 900px; /*寬度設定為900px*/<br /> margin: auto; /*版面居中對齊*/<br /> }<br /> <br /> #header {<br /> height: 130px; /*高度設定為130px*/<br /> }<br /> <br /> #btn {<br /> height: 30px; /*高度設定為 30px，此部分因為裡面的圖片自己會有高度，所以高度也不一定要設定*/<br /> }<br /> <br /> #content {<br /> /* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper)，所以可不用設定寬度*/<br /> }<br /> <br /> #footer {<br /> height: 82px; /*高度設定為 82px*/<br /> height: 130px; /*高度設定為130px，因有有設背景圖片，所以要設高度*/<br /> }<br /> <br /> #btn {<br /> height: 30px; /*高度設定為 30px，此部分因為裡面的圖片自己會有高度，所以高度也不一定要設定*/<br /> }<br /> <br /> #content {<br /> /* <br /> body {<br /> margin: 0px; /*緊貼頂部(上下左右)，沒有空隙*/<br /> }<br />



[color=#993300]五、以DREAMWEAVER排版的製作步驟：[/color]

同樣的網頁架構，以DREAMWEAVER製作的步驟如下：

1.首先在Dreamweaver做網站管理

請大家下載附加檔案的圖檔來練習，將資料夾命名為→hw02-學號
網站管理方法詳見講義


2.以DIV建構網頁基本架構

請開新的html檔，命名為：index.html
�己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper)，所以可不用設定寬度*/
}

#footer {

}


[步驟 4] 置入圖片之後的語法：

基本版面和尺寸設定好之後，可以將現成圖片置入，以CSS的語法直接填入，我們就完成了一個基本的頁面設定，接下來就可以做內容的文字編排了。


插入圖片、文字與設定最外框的CSS語法：


body {<br /> margin: 0px; /*緊貼頂部(上下左右)，沒有空隙*/<br /> }<br /> <br /> #wrapper {<br /> width: 900px; /*寬度設定為900px*/<br /> margin: auto; /*版面居中對齊*/<br /> font-family: "微軟正黑體",Arial, Helvetica, sans-serif;<br /> color: #333;<br /> border: 6px solid #313000; /*網頁做外框的設定*/<br /> }<br /> <br /> #header {<br /> height: 130px; /*高度設定*/<br /> background-image: url(images/header.jpg); /*背景圖片設定*/<br /> background-repeat: no-repeat; /*設定為背景不 height: 82px; /*高度設定為 82px*/<br /> font-size: 12px;<br /> line-height: 1.5em;<br /> color: #FFF;<br /> background-image: url(images/footer.jpg); /*背景圖片設定*/<br /> background-repeat: no-repeat; /*設定為背景不重複*/<br /> padding-left: 20px;<br /> }<br /> <br /> #titile_bar { /*標題的DIV*/<br /> font-size: 16px;<br /> font-weight: bolder;<br /> line-height: 3em;<br /> color: #FFF;<br /> background-image: url(images/34_08_08.jpg);<br /> background-repeat: no-repeat;<br /> text-align:center; /*居中對齊*/<br /> }<br />

[步驟5] 下堂課待續...


[color=#993300]五、以DREAMWEAVER排版的製作步驟：[/color]

同樣的網頁架構，以DREAMWEAVER製作的步驟如下：

1.首先在Dreamweaver做網站管理

請大家下載附加檔案的圖檔來練習，將資料夾命名為→hw02-學號
網站管理方法詳見講義


2.以DIV建構網頁基本架構

請開新的html檔，命名為：index.html

填入以上語法，或由dreamweaver插入Div標籤(新增CSS規則)的方式填入

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/d-div-01.jpg[/IMG]

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/d-div-02.jpg[/IMG]


3.尺寸規劃設定
置入圖片

基本版面和尺寸設定好之後，將現成圖片置入，可以dreamweaver插入圖片的方式置入
或者以CSS的語法直接填入，我們就完成了一個基本的頁面架構，接下來就可以做內容的文字編排了。

==========================================

[color=#CC3300]兩種不同的方式，你覺得哪一種比較簡單(單純)
你下次會選擇哪一種來製作呢？[/color]

==========================================

延伸學習：可參考這裡的視訊教學，會有更多收穫!
http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/

==========================================

待續...[color=#993300][size=x-large]五、以DREAMWEAVER排版的製作步驟：[/size][/color]

同樣的網頁架構，以DREAMWEAVER製作的步驟如下：

[color=#CC3300][size=large]1.首先在Dreamweaver做網站管理[/size][/color]

請大家下載附加檔案的圖檔來練習，將資料夾命名為→hw03-學號
網站管理方法詳見講義


[color=#CC3300][size=large]2.在Dreamweaver中以DIV建構網頁基本架構的步驟[/size][/color]

[步驟1] 請開新的html檔，命名為：index.html

[步驟2] 由dreamweaver插入Div標籤(新增CSS規則)的方式填入

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/d-div-01.jpg[/IMG]

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/d-div-02.jpg[/IMG]


[步驟3] 另存樣式表檔，命名為style，樣式表檔即為 .css
出現CSS規則定義視窗，暫時先按[color=#CC0066]確定[/color]離開，等DIV新增完成，再統一設定
回到插入Div標籤視窗，按確定後建立#wrapper

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-dreamweaver-01.jpg[/IMG]

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-01.jpg[/IMG]

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-02.jpg[/IMG]


[步驟4]



3.尺寸規劃設定
置入圖片

基本版面和尺寸設定好之後，將現成圖片置入，可以dreamweaver插入圖片的方式置入
或者以CSS的語法直接填入，我們就完成了一個基本的頁面架構，接下來就可以做內容的文字編排了。

==========================================

[color=#CC3300]兩種不同的方式，你覺得哪一種比較簡單(單純)
你下次會選擇哪一種來製作呢？[/color]

==========================================

延伸學習：可參考這裡的視訊教學，會有更多收穫!
http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/

==========================================

待續...重複*/
}

#btn {
height: 30px; /*高度設定為 30px，此部分也可不用設定*/
}

#content {
/*可不用設定寬度*/
padding: 30px; /*文字與#content間的內距*/
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #FFF;
background-image: url(images/footer.jpg); /*背景圖片設定*/
background-repeat: no-repeat; /*設定為背景不重複*/
padding: 20px;
}

#titile_bar { /*標題的DIV*/
font-size: 16px;
font-weight: bolder;
line-height: 3em;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
text-align:center; /*居中對齊*/
}
[步驟5] 下堂課待續...


[color=#993300][size=x-large]五、以DREAMWEAVER排版的製作步驟：[/size][/color]

同樣的網頁架構，以DREAMWEAVER製作的步驟如下：

[color=#CC3300][size=large]1.首先在Dreamweaver做網站管理[/size][/color]

請大家下載附加檔案的圖檔來練習，將資料夾命名為→hw03-學號
網站管理方法詳見講義


[color=#CC3300][size=large]2.在Dreamweaver中以DIV建構網頁基本架構的步驟[/size][/color]

[步驟1] 請開新的html檔，命名為：index.html

[步驟2] 由dreamweaver插入Div標籤(新增CSS規則)的方式填入

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/d-div-01.jpg[/IMG]

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/d-div-02.jpg[/IMG]


[步驟3] 另存樣式表檔，命名為style，樣式表檔即為 .css
出現CSS規則定義視窗，暫時先按[color=#CC0066]確定[/color]離開，等DIV新增完成，再統一設定
回到插入Div標籤視窗，按確定後建立#wrapper

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-dreamweaver-01.jpg[/IMG]

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-01.jpg[/IMG]

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-02.jpg[/IMG]


[步驟4]



3.尺寸規劃設定
置入圖片

基本版面和尺寸設定好之後，將現成圖片置入，可以dreamweaver插入圖片的方式置入
或者以CSS的語法直接填入，我們就完成了一個基本的頁面架構，接下來就可以做內容的文字編排了。

�驟：[/size][/color]

同樣的網頁架構，以DREAMWEAVER製作的步驟如下：

[color=#CC3300][size=large]1.首先在Dreamweaver做網站管理[/size][/color]

請大家下載附加檔案的圖檔來練習，將資料夾命名為→hw03-學號
網站管理方法詳見講義


[color=#CC3300][size=large]2.在Dreamweaver中以DIV建構網頁基本架構的步驟[/size][/color]

[步驟1] 請開新的html檔，命名為：index.html

[步驟2] 由dreamweaver插入Div標籤(新增CSS規則)的方式填入

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/d-div-01.jpg[/IMG]

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/d-div-02.jpg[/IMG]


[步驟3] 另存樣式表檔，命名為style，樣式表檔即為 .css
出現CSS規則定義視窗，暫時先按[color=#CC0066]確定[/color]離開，等DIV新增完成，再統一設定
回到插入Div標籤視窗，按確定後建立#wrapper

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-dreamweaver-01.jpg[/IMG]

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-01.jpg[/IMG]

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-02.jpg[/IMG]


[步驟4]



3.尺寸規劃設定
置入圖片

基本版面和尺寸設定好之後，將現成圖片置入，可以dreamweaver插入圖片的方式置入
或者以CSS的語法直接填入，我們就完成了一個基本的頁面架構，接下來就可以做內容的文字編排了。


最後完成的style.css的設定參考：

<br /> body {<br /> margin: 0px;<br /> }<br /> <br /> #wrapper {<br /> font-family: "微軟正黑體", Arial;<br /> margin: auto;<br /> width: 900px;<br /> border: 6px solid #030;<br /> }<br /> <br /> #header {<br /> background-image: url(images/header.jpg);<br /> background-repeat: no-repeat;<br /> height: 130px;<br /> }<br /> <br /> #titile_bar {<br /> font-size: 16px;<br /> line-height: 3em;<br /> color: #FFF;<br /> background-image: url(images/bottom.jpg);<br /> background-repeat: no-repeat;<br /> text-align: center;<br /> }<br /> <br /> <br /> #btn {<br /> }<br /> <br /> #content {<br /> font-size: 14px;<br /> line-height: 2em;<br /> color: #333;<br /> padding: 30px;<br /> }<br /> <br /> #footer {<br /> font-size: 12px;<br /> line-height: 1.5em;<br /> color: #FFF;<br /> background-image: url(images/footer.jpg);<br /> padding: 20px;<br /> }<br /> <br /> .title-2 {<br /> font-size: 16px;<br /> font-weight: bolder;<br /> color: #737232;<br /> padding-left: 5px;<br /> border-bottom-width: 1px;<br /> border-left-width: 1em;<br /> border-bottom-style: dotted;<br /> border-left-style: solid;<br /> border-bottom-color: #86863C;<br /> border-left-color: #86863C;<br /> }<br /> <br /> .clearboth {<br /> clear: both;<br /> }<br /> <br /> .floatleft {<br /> float: left;<br /> padding-right: 20px;<br /> padding-bottom: 20px;<br /> }<br />
==========================================

[color=#CC3300]兩種不同的方式，你覺得哪一種比較簡單(單純)
你下次會選擇哪一種來製作呢？[/color]

==========================================

延伸學習：可參考這裡的視訊教學，會有更多收穫!
http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/

==========================================

待續... margin: 0px;
}

#wrapper {
font-family: "微軟正黑體", Arial;
margin: auto;
width: 900px;
border: 6px solid #030;
}

#header {
background-image: url(images/header.jpg);
background-repeat: no-repeat;
height: 130px;
}


#btn {
}

#content {
font-size: 14px;
line-height: 2em;
color: #333;
padding: 30px;
}

#titile_bar {
font-size: 16px;
line-height: 3em;
color: #FFF;
background-image: url(images/bottom.jpg);
background-repeat: no-repeat;
text-align: center;
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #FFF;
background-image: url(images/footer.jpg);
padding: 20px;
}

.title-2 {
font-size: 16px;
font-weight: bolder;
color: #737232;
padding-left: 5px;
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: #86863C;
border-left-style: solid;
border-left-width: 1em;
border-left-color: #86863C;
}

.clearboth {
clear: both;
}

.floatleft {
float: left;
padding-right: 20px;
padding-bottom: 20px;
}

==========================================

[color=#CC3300]兩種不同的方式，你覺得哪一種比較簡單(單純)
你下次會選擇哪一種來製作呢？[/color]

==========================================

延伸學習：可參考這裡的視訊教學，會有更多收穫!
http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/

==========================================

待續...[color=#CC0066]最後完成的style.css的設定參考：[/color]

<br /> body {<br /> margin: 0px;<br /> }<br /> <br /> #wrapper {<br /> font-family: "微軟正黑體", Arial;<br /> margin: auto;<br /> width: 900px;<br /> border: 6px solid #030;<br /> }<br /> <br /> #header {<br /> background-image: url(images/header.jpg);<br /> background-repeat: no-repeat;<br /> height: 130px;<br /> }<br /> <br /> <br /> #btn {<br /> }<br /> <br /> #content {<br /> font-size: 14px;<br /> line-height: 2em;<br /> color: #333;<br /> padding: 30px;<br /> }<br /> <br /> #titile_bar {<br /> font-size: 16px;<br /> line-height: 3em;<br /> color: #FFF;<br /> background-image: url(images/bottom.jpg);<br /> background-repeat: no-repeat;<br /> text-align: center;<br /> }<br /> <br /> #footer {<br /> font-size: 12px;<br /> line-height: 1.5em;<br /> color: #FFF;<br /> background-image: url(images/footer.jpg);<br /> padding: 20px;<br /> }<br /> <br /> .title-2 {<br /> font-size: 16px;<br /> font-weight: bolder;<br /> color: #737232;<br /> padding-left: 5px;<br /> border-bottom-style: dotted;<br /> border-bottom-width: 1px;<br /> border-bottom-color: #86863C;<br /> border-left-style: solid;<br /> border-left-width: 1em;<br /> border-left-color: #86863C;<br /> }<br /> <br /> .floatleft {<br /> float: left;<br /> padding-right: 20px;<br /> padding-bottom: 20px;<br /> }<br /> <br /> .clearboth {<br /> clear: both;<br /> }<br /> <br /> <br />
==========================================

[color=#CC3300]兩種不同的方式，你覺得哪一種比較簡單(單純)
你下次會選擇哪一種來製作呢？[/color]

==========================================

延伸學習：可參考這裡的視訊教學，會有更多收穫!
http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/

==========================================

待續...完成圖

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/webok.jpg[/IMG]


[color=#CC0066]最後完成的style.css的設定參考：[/color]

<br /> body {<br /> margin: 0px;<br /> }<br /> <br /> #wrapper {<br /> font-family: "微軟正黑體", Arial;<br /> margin: auto; /*網頁居中設定*/<br /> width: 900px;<br /> border: 6px solid #030; /*網頁外框設定*/<br /> }<br /> <br /> #header {<br /> background-image: url(images/header.jpg);<br /> background-repeat: no-repeat;<br /> height: 130px;<br /> }<br /> <br /> <br /> #btn {<br /> }<br /> <br /> #content {<br /> font-size: 14px;<br /> line-height: 2em;<br /> color: #333;<br /> padding: 30px; /*內文的內距上下左右皆為30px*/<br /> }<br /> <br /> #titile_bar {<br /> font-size: 16px;<br /> line-height: 3em; /*行高為3字高*/<br /> color: #FFF;<br /> background-image: url(images/bottom.jpg);<br /> background-repeat: no-repeat;<br /> text-align: center; /*居中對齊*/<br /> }<br /> <br /> #footer {<br /> font-size: 12px;<br /> line-height: 1.5em;<br /> color: #FFF;<br /> background-image: url(images/footer.jpg);<br /> padding: 20px;<br /> }<br /> <br /> .title-2 {<br /> font-size: 16px;<br /> font-weight: bolder;<br /> color: #737232;<br /> padding-left: 5px;<br /> border-bottom-style: dotted;<br /> border-bottom-width: 1px;<br /> border-bottom-color: #86863C;<br /> border-left-style: solid;<br /> border-left-width: 1em;<br /> border-left-color: #86863C;<br /> }<br /> <br /> .floatleft {<br /> /*將圖片設定靠左浮動，形成繞圖排文*/<br /> float: left; <br /> padding-right: 20px;<br /> padding-bottom: 20px;<br /> }<br /> <br /> .clearboth {<br /> /*清除浮動設定，取消靠左浮動*/<br /> clear: both;<br /> ��第一個Div #wrapper</b> <br /> <br /> 另存樣式表檔，命名為style，樣式表檔即為 .css<br /> 出現CSS規則定義視窗，暫時先按[color=#CC0066]確定[/color]離開，等DIV新增完成，再統一設定<br /> 回到插入Div標籤視窗，按確定後建立#wrapper<br /> <br /> <br /> [IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-dreamweaver-01.jpg[/IMG]<br /> <br /> [IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-01.jpg[/IMG]<br /> <br /> [IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-02.jpg[/IMG]<br /> ======================================================================<br /> <br /> <br /> <b>[col<br /> <b>[步驟4] 建立第二個Div #header</b><br /> reamweaver做網站管理[/size][/size][/color]</b><br /> <br /> 請大家下載附加檔案的圖檔來練習，將資料夾命名為→hw03-學號<br /> 網站管理方<br /> <br /> <br /> <b>3.尺寸規劃設定</b><br /> <b>置入圖片</b><br /> <br /> 基本版面和尺寸設定好之後，將現成圖片置入，可以dreamweaver插入圖片的方式置入<br /> 或者以CSS的語法直接填入，我們就完成了一個基本的頁面架構，接下來就可以做內容的文字編排了。<br /> <br /> <br /> <b>完成圖</b><br /> <br /> [IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/webok.jpg[/IMG]<br /> <br /> <br /> <b>[color=#CC0066]最後完成的style.css的設定參考：[/color]</b><br /> <br /> <xmp><br /> body {<br /> margin: 0px;<br /> }<br /> <br /> #wrapper {<br /> font-family: "微軟正黑體", Arial;<br /> margin: auto; /*網頁居中設定*/<br /> width: 900px;<br /> border: 6px solid #030; /*網頁外框設定*/<br /> }<br /> <br /> #header {<br /> background-image: url(images/header.jpg);<br /> background-repeat: no-repeat;<br /> height: 130px;<br /> }<br /> <br /> <br /> #btn {<br /> }<br /> <br /> #content {<br /> font-size: 14px;<br /> line-height: 2em;<br /> color: #333;<br /> padding: 30px; /*內文的內距上下左右皆為30px*/<br /> }<br /> <br /> #titile_bar {<br /> font-size: 16px;<br /> line-height: 3em; /*行高為3字高*/<br /> color: #FFF;<br /> background-image: url(images/bottom.jpg);<br /> background-repeat: no-repeat;<br /> text-align: center; /*居中對齊*/<br /> }<br /> <br /> #footer {<br /> font-size: 12px;<br /> line-height: 1.5em;<br /> color: #FFF;<br /> background-image: url(images/footer.jpg);<br /> padding: 20px;<br /> }<br /> <br /> .title-2 {<br /> font-size: 16px;<br /> font-weight: bolder;<br /> color: #737232;<br /> padding-left: 5px;<br /> border-bottom-style: dotted;<br /> border-bottom-width: 1px;<br /> border-bottom-color: #86863C;<br /> border-left-style: solid;<br /> border-left-width: 1em;<br /> border-left-color: #86863C;<br /> }<br /> <br /> .floatleft {<br /> /*將圖片設定靠左浮動，形成繞圖排文*/<br /> float: left; <br /> padding-right: 20px;<br /> padding-bottom: 20px;<br /> }<br /> <br /> .clearboth {<br /> /*清除浮動設定，取消靠左浮動*/<br /> clear: both;<br /> }<br /> <br /> <br />


CSS設定的圖解：

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/webok-1.jpg[/IMG]


==========================================

[color=#CC3300]兩種不同的方式，你覺得哪一種比較簡單(單純)
你下次會選擇哪一種來製作呢？[/color]

==========================================

延伸學習：可參考這裡的視訊教學，會有更多收穫!
�詳見講義


[color=#CC3300][size=large][size=x-la�為：index.html[/size]

----------------------------------------------------------------------------------------------------e]

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/d-div-01.jpg[/IMG]

-------------------------cket.com/albums/n481/parkparkya[步驟5] 建立第三個Div #btn

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-09.jpg[/IMG]


3.尺寸規劃設定
置入圖片

基本版面和尺寸設定好之後，將現成圖片置入，可以dreamweaver插入圖片的方式置入
或者以CSS的語法直接填入，我們就完成了一個基本的頁面架構，接下來就可以做內容的文字編排了。


完成圖

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/webok.jpg[/IMG]


[color=#CC0066]最後完成的style.css的設定參考：[/color]

<br /> body {<br /> margin: 0px;<br /> }<br /> <br /> #wrapper {<br /> font-family: "微軟正黑體", Arial;<br /> margin: auto; /*網頁居中設定*/<br /> width: 900px;<br /> border: 6px solid #030; /*網頁外框設定*/<br /> }<br /> <br /> #header {<br /> background-image: url(images/header.jpg);<br /> background-repeat: no-repeat;<br /> height: 130px;<br /> }<br /> <br /> <br /> #btn {<br /> }<br /> <br /> #content {<br /> font-size: 14px;<br /> line-height: 2em;<br /> color: #333;<br /> padding: 30px; /*內文的內距上下左右皆為30px*/<br /> }<br /> <br /> #titile_bar {<br /> font-size: 16px;<br /> line-height: 3em; /*行高為3字高*/<br /> color: #FFF;<br /> background-image: url(images/bottom.jpg);<br /> background-repeat: no-repeat;<br /> text-align: center; /*居中對齊*/<br /> }<br /> <br /> #footer {<br /> font-size: 12px;<br /> line-height: 1.5em;<br /> color: #FFF;<br /> background-image: url(images/footer.jpg);<br /> padding: 20px;<br /> }<br /> <br /> .title-2 {<br /> font-size: 16px;<br /> font-weight: bolder;<br /> color: #737232;<br /> padding-left: 5px;<br /> border-bottom-style: dotted;<br /> border-bottom-width: 1px;<br /> border-bottom-color: #86863C;<br /> border-left-style: solid;<br /> border-left-width: 1em;<br /> border-left-color: #86863C;<br /> }<br /> <br /> .floatleft {<br /> /*將圖片設定靠左浮動，形成繞圖排文*/<br /> float: left; <br /> padding-right: 20px;<br /> padding-bottom: 20px;<br /> }<br /> <br /> .clearboth {<br /> /*清除浮動設定，取消靠左浮動*/<br /> clear: both;<br /> }<br /> <br /> <br />


CSS設定的圖解：

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/webok-1.jpg[/IMG]


==========================================

[color=#CC3300]兩種不同的方式，你覺得哪一種比較簡單(單純)
你下次會選擇哪一種來製作呢？[/color]

==========================================

延伸學習：可參考這裡的視訊教學，會有更多收穫!
http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/
[/size]

另存樣式表檔，命名為style，樣式表檔即為 .css
出現CSS規則定義視窗，暫時先按[col1136.photobucket.com/albums/n481/parkparkyang/div-dreamweaver-01.jpg[/IMG]

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-11.jpg[/IMG]

e]1.首先在Dreamweaver做網��大家下載附加檔案的圖檔來練習，將資料夾命名為→hw03-學號
網站管理方法詳見講義


[color=#CC3300][size=x-large]2.在Dreamweaver中以DIV建構網頁基本架構的步驟[/size][/color]

[size=x-large][步驟1] 請開新的html檔，命名為：index.html[/size]

---------------------------------------------------------------------------
--------

[size=x-large][步驟3] 建立第一個Div #wrapper[/size]

另存樣式表檔，命名為style，樣式表檔即為 .css
��時先按[color=#CC0066]確定[/color]離開，等DIV新增完成，再統一設定
回到插入Div標籤視窗，按確定後建立#wrapper


[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-dreamweaver-01.jpg[/IMG]

----------------------------------------------------------------------------------------------------------------------------------------------

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-01.jpg[/IMG]

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-02.jpg[/IMG]

----------------------------------------------------------------------------------------------------------------------------------------------

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-03.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

---[size=x-large][步驟4] 建立第二個Div #header[/size]

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-04.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[IMG]http://i1136.photobucket.co-05.jpg[/IMG]

-----------------------------------cket.com/albums/n481/parkparkyang/div-d-06.jpg[/IMG]

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[IMG]http://i1136.photobucke--------------------------------------------------------------------------------------------

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-------------------------------------------------------------------------------------

[size=x-large][步驟5] 建立第三個Div #btn，以及其他Div的建立[/size]

[IMG]http://i1136.photobucke��圖
-------------------------------------------------------------------------------------------------------------

[size=x-large][步驟2] 由dre接著點選左側的方框選單，內距padding的部分，將全部一樣勾選，設定為30px，也就是文字內容距離區塊邊緣，會有30px的距離
按確定看設定效果

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-26.jpg[/IMG]
IMG]

------------------------------------------------------------------------------------------------------------------------------[IMG]http://i1136.photobucket.com/albums/n481/parkpark觀看#content文字及編排設定的改變
使用分割，觀看左側style.css的設定狀況

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-27.jpg[/IMG]
，命名為style，樣式表檔即為 .css
出現CSS規則定義視窗，暫時先按[color=#CC0066]確定[/color]離開，等DIV新增完成，再統一設定
回到插入Div標籤視窗，按確定後建立#wrapper


[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-dreamweaver-01.jpg[/IMG]
----------------------------------------------------------------------------------------------------------------------------------------------------------------

[IMG]http://mepopedia.com/i1136.photobucketeb/imalbums/n481/parkparkyang/div-d-01---------------------------------------------------4] #footer的CSS設定-------------------------------------------------------------------------------------------------

[IMG]http://mep[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-02.jp點擊#footer進入編輯CSS，首先設定字型，設定字體大小、行高、顏色

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-28.jpg[/IMG]
------------------------------------------------------------------------------

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-03.jpg[/IMG]

-背景圖片的設定與#header相同

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-29.jpg[/IMG]

[size=x-large][步驟4] 建立第全部一樣勾選，設定為20px，也就是文字內容距離區塊邊緣，會有20px的距離
按確定看設定效果

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-30.jpg[/IMG]

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-05.jpg[/IMG]

----------------[size=x-large][步驟5] #btn按鈕列的按鈕放置(滑鼠變換影像的做法)[/size]
-----------

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-06.jpg[/IMG]

----------------------------------------1.觀看#footer文字及編排設定的改變
2.使用分割，觀看左側style.css的設定狀況
3.將上方多餘的文字刪除
4.在#btn處，選取文字，按下左方插入→滑鼠變換影像

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-31.jpg[/IMG]
-----

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-07.jpg[/IMG]

--------------------------------------------------------------------1.滑鼠變換影像的設定
2.事先準備好一組兩個圖檔，做為變換使用
3.填入替代文字的話，若圖片無法顯示時可出現的文字
4.前往的url，若還沒有開新的html檔，可稍後再設定連結

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-32.jpg[/IMG]
----------------------------------------------------------------------------------------------------------------------------以相同的做法，重複五次，將五組按鈕(共十張圖片)插入

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-33.jpg[/IMG]
hotobucket.com/albums/n481/parkparkyang/div-d-09--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[IMG]http://mepopedia.com/~jinjin/web/img/3-11.j[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-11---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[IMG]http://mepopedia.com/~jinjin/web/img/3-12.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[IMG]http://mepopedia.com/~jinjin/web/img/3-13.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[IMG]http://mepopedia.com/~jinjin/w[size=x-large][步驟7] 設定大標題#title_bar[/size]
//i1136.photobucket.com/albums/n481/parkparkyang/div-d-12.jpg[/IMG]

---------------------------------------------------------------------選取第一行標題字

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-36.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1.插入Div標籤
2.選擇"圍繞著選取範圍"
3.在id上打上title_bar
4.新增CSS規則

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-37.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

進入style.css編輯

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-38.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

首先設定字型，設定字體大小、行高、粗體、顏色

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-39.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

背景圖片的設定與#header及#footerr相同

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-40.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1.點選左側的區塊選單
2.設定 text-align:center ，設定文字居中
3.設定完畢，按確定

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-41.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

回到#title_bar，設定完畢，按確定看效果

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-42.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

#title_bar的效果

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-43.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

------------
-------

[size=x-large][步驟5] 建立第三[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-13.jpg[/IMG]
個Div #btn，以及其他Div的建立[/size]

[IMG]http://mepopedia.com/~jinjin/web/img/3-15.jpg[/IMG]

---------------------------------------------------------------------------------------------------------------------------et.com/albums/n481/parkparkyang/div-d-17.jpg[/IMG]

-：
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-18.jpg------------------------------------------------------------------------------------------------------

點擊#wrapper進入編輯CSS，首先設定字型，編輯字體清單

[IMG]http://mepopedia.com/~jinjin/web/img/3-18.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

將右側選取的自體移到左邊，選好後按確定，則整理成自己想要的字體清單

[IMG]http://mepopedia.com/~jinjin/web/img/3-19.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

再度進入自行設定，下拉選擇剛剛設定的字體清單項目

[IMG]http://mepopedia.com/~jinjin/web/img/3-20.jpg[/IMG]

-------------------------------------------------------------------------------------------------------[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-19.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
�設定為auto，則會將網頁做居中設定

[IMG]http://mepopedia.com/~jinjin/web/img/3-21.jpg[/I[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-20.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------

接著點選左側的邊框(border)選單，設定最外圍的粗邊框，邊框有不同種類的設定，可依設計風格選擇

[IMG]http://mepopedia[IMG]http://i1136.photobucket~jinjalbums/n481/parkparkyang/div-d-21/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

將上右下左都設定同樣粗細顏色的實[IMG]http://i1136.photobucket線段，設定完後albums/n481/parkparkyang/div-d-22�效果

[IMG]http://mepopedia.com/~jinjin/web/img/3-23.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

接著出現邊框的效果，及字體的改變，但整體還不夠明顯

[IMG]http://mepopedia.com/~jinjin/web/img/[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-23.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-24--------------------------

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[size=x-large][步驟2] #header的CSS設定[/size]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

點擊#headerer進入編輯CSS，首先設定背景圖片，按瀏覽選擇背景圖片

[IMG]http://mepopedia.com/~jinjin/web/img/3-25.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

打開images資料夾

[IMG]http://mepopedia.com/~jinjin/web/img/3-26.jpg[/IMG]
------------------------------------------------------------------------[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-25.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
in/web/img/3-27.jpg[/IMG]

------------------------------------------------------------------[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-26.jpg[/IMG]
-----------------------------------------------------------------------------------------------------------

選擇不重複背景圖片

[IMG]http://mepopedia.com/~jinjin/web/img/3-28.jpg[/IMG]

-----------------------------------------------------------------------------------------------------[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-27.jpg[/------------------------------------------------------------------------

接著點選左側的方框選單，設定高度為130px，因為#header沒有文字內容，但以背景圖為主，需要設定高度才能呈現完整內容
按確定看設定效果

[IMG]http://mepopedia.com/~jinjin/web/img/3-29.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

呈現#header的背景圖片
使用分割，觀看左側style.css的設定狀況

[IMG]http://mepopedia.com/~jinjin/web/img/3-30.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-28.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
rge][步驟3] #content的C[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-29.jpg[/IMG]

-------------------------------------------------------------------------------------------------------------------------------------------------------------

點擊#content進入編輯CSS，首先設定字型，設定字體大小、行高、顏色

[IMG]http://mepopedia.com/~jinjin/web/img/3-31.jpg[/IMG]

-------------------[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-30.jpg[/IMG]
----------------------------------------------------------------------------------------------------------------------------------------------------------

接著點選左側的方框選單，內距padding的部分，將全部一樣勾選，設定為30px，
也就是文字內容距離區塊邊緣，會有30px的距離
按確定看設定效果

[IMG]http://mepopedia.com/~jinjin/web/img/3-32.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

觀看#content文字及編排設定的改變
使用分割，觀看左側style.css的設定狀況

[IMG]http://mepopedia.com/~jin
待續...--------------------------------------------------------------------------------------------------------

本講義先解說到此，詳細的貼圖、繞圖排文等製作步驟，留在下個單元講解

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

完成圖(含繞圖排文)：

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/webok.jpg[/IMG]


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[color=#CC0066]最後完成的style.css的設定參考：[/color]

<br /> body {<br /> margin: 0px;<br /> }<br /> <br /> #wrapper {<br /> font-family: "微軟正黑體", Arial;<br /> margin: auto; /*網頁居中設定*/<br /> width: 900px;<br /> border: 6px solid #030; /*網頁外框設定*/<br /> }<br /> <br /> #header {<br /> background-image: url(images/header.jpg);<br /> background-repeat: no-repeat;<br /> height: 130px;<br /> }<br /> <br /> <br /> #btn {<br /> }<br /> <br /> #content {<br /> font-size: 14px;<br /> line-height: 2em;<br /> color: #333;<br /> padding: 30px; /*內文的內距上下左右皆為30px*/<br /> }<br /> <br /> #titile_bar {<br /> font-size: 16px;<br /> line-height: 3em; /*行高為3字高*/<br /> color: #FFF;<br /> background-image: url(images/bottom.jpg);<br /> background-repeat: no-repeat;<br /> text-align: center; /*居中對齊*/<br /> }<br /> <br /> #footer {<br /> font-size: 12px;<br /> line-height: 1.5em;<br /> color: #FFF;<br /> background-image: url(images/footer.jpg);<br /> padding: 20px;<br /> }<br /> <br /> .title-2 {<br /> font-size: 16px;<br /> font-weight: bolder;<br /> color: #737232;<br /> --------------------------------------------------------------------------------------------------------------------------------------------------------------------<br /> <br /> <b>[size=x-large][步驟6] 貼入文字內容[/size]</b><br /> <br /> [IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-39---------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br /> <br /> 1.打開hw03.txt<br /> 2.在#conten及#footer貼上適當文字<br /> 3.也可[IMG]http://i1136.photobucket.自行貼上albums/n481/parkparkyang/div-d-40ttp://mepopedia.com/~jinjin/web/img/3-41.jpg[/IMG]<br /> <br /> -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br /> <br /> [IMG]http://mepopedia.com/~jinjin/web/img/3-42.jpg[/IMG]<br /> <br /> -------------------------------------------------------------------------[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-41.jpg[/----------------------------------------------------------------------------------------------------<br /> ----------------------------------------------------------------------------------------------------------[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-42-------------------------------------------------<br /> <br /> <b>[size=x-large][步驟7] 以DIV設定大標題#title_bar[/size]</b><br /> <br /> ------------------------------------------------------------------------------------------------[IMG]h------i1136.photobucket-----albums/n481/parkparkyang/div-d-43-------------------------------------<br /> <br /> 選取第一行標題字<br /> <br /> [IMG]http://mepopedia.com/~jinjin/web/img/3-43.jpg[/IMG]<br /> <br /> -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br /> <br /> 1.插入Div標籤<br /> 2.選擇"圍繞著選取範圍"<br /> 3.在id上打上title_bar<br /> 4.新增CSS規則<br /> <br /> [IMG]http://mepopedia.com/~jinjin/web/img/3-44.jpg[/IMG]<br /> <br /> -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br /> <br /> 進入style.css編輯<br /> <br /> [IMG]http://mepopedia.com/~jinjin/web/img/3-45.jpg[/IMG]<br /> <br /> -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br /> <br /> [IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-44.jpg[/IMG]<br /> <br /> -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br /> G]<br /> <br /> -----------------------------------------------------------------[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-45----------------------------------------------------------------------------------------------------------<br /> <br /> 背景圖片的設定與#header及#footerr相同<br /> <br /> [IMG]http://mepopedia.com/~jinjin/web/img/3-47.jpg[/IMG]<br /> <br /> ----------------------------------------------------------------------------------------------[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-46.jpg[/IMG]<br /> -------------------------------------------------------------------------------<br /> <br /> 1.點選左側的區塊選單<br /> 2.設定 text-align:center ，設定文字居中<br /> 3.設定完畢，按確定<br /> <br /> [IMG]http://mepopedia.com/~jinjin/web/img/3-48.jpg[/IMG]<br /> <br /> --------------------------------------------------------------------------------------------------------------[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-47.jpg[/IMG]<br /> <br /> -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br /> mg/3-49.jpg[/IMG]<br /> <br /> -------------------------------------------[IMG]http://i1136.photobucket.com/albums/n481/parkparbody {<br /> margin: 0px;<br /> }<br /> <br /> #wrapper {<br /> font-family: "微軟正黑體", Arial;<br /> margin: auto; /*網頁居中設定*/<br /> width: 900px;<br /> border: 6px solid #030; /*網頁外框設定*/<br /> }<br /> <br /> #header {<br /> background-image: url(images/header.jpg);<br /> background-repeat: no-repeat;<br /> height: 130px;<br /> }<br /> <br /> <br /> #btn {<br /> }<br /> <br /> #content {<br /> font-size: 14px;<br /> line-height: 2em;<br /> color: #333;<br /> padding: 30px; /*內文的內距上下左右皆為30px*/<br /> }<br /> <br /> #titile_bar {<br /> font-size: 16px;<br /> line-height: 3em; /*行高為3字高*/<br /> color: #FFF;<br /> background-image: url(images/bottom.jpg);<br /> background-repeat: no-repeat;<br /> text-align: center; /*居中對齊*/<br /> }<br /> <br /> #footer {<br /> font-size: 12px;<br /> line-height: 1.5em;<br /> color: #FFF;<br /> background-image: url(images/footer.jpg);<br /> padding: 20px;<br /> }<br /> <br /> .title-2 {<br /> font-size: 16px;<br /> font-weight: bolder;<br /> color: #737232;<br /> padding-left: 5px;<br /> border-bottom-style: dotted;<br /> border-bottom-width: 1px;<br /> border-bottom-color: #86863C;<br /> border-left-style: solid;<br /> border-left-width: 1em;<br /> border-left-color: #86863C;<br /> }<br /> <br /> .floatleft {<br /> /*將圖片設定靠左浮動，形成繞圖排文*/<br /> float: left; <br /> padding-right: 20px;<br /> padding-bottom: 20px;<br /> }<br /> <br /> .clearboth {<br /> /*清除浮動設定，取消靠左浮動*/<br /> clear: both;<br /> }<br /> <br /> <br />


CSS設定的圖解：

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/webok-1.jpg[/IMG]


==========================================

[color=#CC3300]兩種不同的方式，你覺得哪一種比較簡單(單純)
你下次會選擇哪一種來製作呢？[/color]

==========================================

延伸學習：可參考這裡的視訊教學，會有更多收穫!
http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/

====================================================================================

[color=#CC3300]兩種不同的方式，你覺得哪一種比較簡單(單純)
你下次會選擇哪一種來製作呢？[/color]

==========================================

[hr]

<<上課影音>>利用Div標籤與CSS建立基本單欄網頁版型

利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇-1
http://youtu.be/UWwMy23q43w



[hr]
利用Div標籤與CSS建立基本網頁版型-2--CSS類別設定 標題 文繞圖
http://youtu.be/JQZJ0M0Lcvc



[hr]
利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇--Photoshop切片
http://youtu.be/A-WfUQc8L9o



[hr]


==========================================

延伸學習：可參考這裡的視訊教學，會有更多收穫!
http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/

==========================================

利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇-1

http://youtu.be/UWwMy23q43w



[hr]

利用Div標籤與CSS建立基本網頁版型-2--CSS類別設定 標題 文繞圖

http://youtu.be/JQZJ0M0Lcvc



[hr]

利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇--Photoshop切片

http://youtu.be/A-WfUQc8L9o



[hr]


==========================================

延伸學習：可參考這裡的視訊教學，會有更多收穫!
http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/

==========================================kyang/
border:0px;
}

body {
margin: 0px;
}

#wrapper {
font-family: "微軟正黑體", Arial;
margin: auto; /*網頁居中設定*/
width: 900px;
border: 6px solid #030; /*網頁外框設定*/
}

#header {
background-image: url(images/header.jpg);
background-repeat: no-repeat;
height: 130px;
}


#btn {
}

#content {
font-size: 14px;
line-height: 2em;
color: #333;
padding: 30px; /*內文的內距上下左右皆為30px*/
}

#titile_bar {
font-size: 16px;
line-height: 3em; /*行高為3字高*/
color: #FFF;
background-image: url(images/bottom.jpg);
background-repeat: no-repeat;
text-align: center; /*居中對齊*/
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #FFF;
background-image: url(images/footer.jpg);
padding: 20px;
}

.title-2 {
font-size: 16px;
font-weight: bolder;
color: #737232;
padding-left: 5px;
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: #86863C;
border-left-style: solid;
border-left-width: 1em;
border-left-color: #86863C;
}

.floatleft {
/*將圖片設定靠左浮動，形成繞圖排文*/
float: left;
padding-right: 20px;
padding-bottom: 20px;
}

.clearboth {
/*清除浮動設定，取消靠左浮動*/
clear: both;
}

a {

}

a:hover {

}




CSS設定的圖解：

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/webok-1.jpg[/IMG]

==========================================

[color=#CC3300]兩種不同的方式，你覺得哪一種比較簡單(單純)
你下次會選擇哪一種來製作呢？[/color]

==========================================

[hr]

<<上課影音>>利用Div標籤與CSS建立基本單欄網頁版型

利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇-1

http://youtu.be/UWwMy23q43w



[hr]

利用Div標籤與CSS建立基本網頁版型-2--CSS類別設定 標題 文繞圖

http://youtu.be/JQZJ0M0Lcvc



[hr]

利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇--Photoshop切片

http://youtu.be/A-WfUQc8L9o



[hr]


==========================================

延伸學習：可參考這裡的視訊教學，會有更多收穫!
http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/

==========================================div-d-48--------------------------------------------------------------------------------------------------------------------------

#title_bar的效果

[IMG]http://mepopedia.com/~jinjin/web/img/3-50.jpg[/IMG]

----------------------------------[IMG]htt----i1136.photobucket-----albums/n481/parkparkyang/div-d-49-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[size=x-large][步驟8] 以類別來設定的次標題[/size]

-----------------------#titile_bar {
font-size: 16px;
line-height: 3em; /*行高為3字高*/
color: #FFF;
background-image: url(images/bottom.jpg);
background-repeat: no-repeat;
text-align: center; /*居中對齊*/
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #FFF;
background-image: url(images/footer.jpg);
padding: 20px;
}

.title-2 {
font-size: 16px;
font-weight: bolder;
color: #737232;
padding-left: 5px;
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: #86863C;
border-left-style: solid;
border-left-width: 1em;
border-left-color: #86863C;
}

.floatleft {
/*將圖片設定靠左浮動，形成繞圖排文*/
float: left;
padding-right: 20px;
padding-bottom: 20px;
}

.clearboth {
/*清除浮動設定，取消靠左浮動*/
clear: both;
}

a {

}

a:hover {

}




CSS設定的圖解：

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/webok-1.jpg[/IMG]

==========================================

[color=#CC3300]兩種不同的方式，你覺得哪一種比較簡單(單純)
你下次會選擇哪一種來製作呢？[/color]

==========================================

[hr]

<<上課影音>>利用Div標籤與CSS建立基本單欄網頁版型

利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇-1

http://youtu.be/UWwMy23q43w



[hr]

利用Div標籤與CSS建立基本網頁版型-2--CSS類別設定 標題 文繞圖

http://youtu.be/JQZJ0M0Lcvc



[hr]

利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇--Photoshop切片

http://youtu.be/A-WfUQc8L9o



[hr]


==========================================

延伸學習：可參考這裡的視訊教學，會有更多收穫!
http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/

==========================================------------------------------------------------------------------------------------------------------------------------------------------------------

1.先新增CSS樣式，選擇類別，取名為title-2
2.命名不可與標籤相同，只能以半形的英文、數字、中線、底線命名

[IMG]http://mepopedia.com/~jinjin/web/img/3-51.jpg[/IMG]

--------------------------------------------------------------[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-50-------------------------------------------------------------------------------------------------------

首先設定字型，設定字體大小、行高、粗體、顏色

[IMG]http://mepopedia.com/~jinjin/web/img/3-52.jpg[/IMG]

--------[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-51.jpg[/IMG]

------------------------------------------------------------------------------------------------------------------------

1.點選左側的邊框(border)選單
2.底部設定1px墨綠色的點線
3.左側設定1em(字高)的墨綠色實線

[IMG]http://mepopedia.com/~jinjin/web/img/3-53.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1.接著點選左側的方框選單
2.左側內距padding-left:5px，預留左側墨綠實線色塊的距離
3..title-2設定完成，按確定

[IMG]http://mepopedia.com/~jinjin/web/img/3-54.jpg[/IMG]

---------------------------------------------------------------------------------[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/webok.jpg[/IMG]
--------------------------------------------------------------------------------------------

1.滑鼠放置在標題前面
2.在類別選項下拉，選取title-2

[IMG]http://mepopedia.com/~jinjin/web/img/3-55.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

標題效果

[IMG]http://mepopedia.com/~jinjin/web/img/3-56.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[size=x-large][步驟9] 項目清單設定[/size]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1.將文字選取
2.按下項目清單

[IMG]http://mepopedia.com/~jinjin/web/img/3-57.jpg[/IMG]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

項目清單效果

[IMG]http://mepopedia.com/~jinjin/web/img/3-58.jpg[/IMG]
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

本講義先解說到此，詳細的貼圖、繞圖排文等製作步驟，留在下個單元講解

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

完成圖(含繞圖排文)：


[IMG]http://mepopedia.com/~jinjin/web/img/3-59.jpg[/IMG]


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[color=#CC0066]最後完成的style.css的設定參考：[/color]

<br /> <br /> img{<br /> border:0px;<br /> }<br /> <br /> body {<br /> margin: [IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/webok-1.jpg[/IMG]<br /> <br /> ==========================================<br /> <br /> <b>[color=#CC3300]兩種不同的方式，你覺得哪一種比較簡單(單純)<br /> 你下次會選擇哪一種來製作呢？[/color]</b><br /> <br /> }<br /> <br /> #wrapper {<br /> font-family: "微軟正黑體", Arial;<br /> margin: auto; /*網頁居中設定*/<br /> width: 900px;<br /> border: 6px solid #030; /*網頁外框設定*/<br /> }<br /> <br /> #header {<br /> background-image: url(images/header.jpg);<br /> background-repeat: no-repeat;<br /> height: 130px;<br /> }<br /> <br /> <br /> #btn {<br /> }<br /> <br /> #content {<br /> font-size: 14px;<br /> line-height: 2em;<br /> color: #333;<br /> padding: 30px; /*內文的內距上下左右皆為30px*/<br /> }<br /> <br /> #title_bar {<br /> font-size: 16px;<br /> line-height: 3em; /*行高為3字高*/<br /> color: #FFF;<br /> background-image: url(images/bottom.jpg);<br /> background-repeat: no-repeat;<br /> text-align: center; /*居中對齊*/<br /> }<br /> <br /> #footer {<br /> font-size: 12px;<br /> line-height: 1.5em;<br /> color: #FFF;<br /> background-image: url(images/footer.jpg);<br /> padding: 20px;<br /> }<br /> <br /> .title-2 {<br /> font-size: 16px;<br /> font-weight: bolder;<br /> color: #737232;<br /> padding-left: 5px;<br /> border-bottom-style: dotted;<br /> border-bottom-width: 1px;<br /> border-bottom-color: #86863C;<br /> border-left-style: solid;<br /> border-left-width: 1em;<br /> border-left-color: #86863C;<br /> }<br /> <br /> .floatleft {<br /> /*將圖片設定靠左浮動，形成繞圖排文*/<br /> float: left; <br /> padding-right: 20px;<br /> padding-bottom: 20px;<br /> }<br /> <br /> .clearboth {<br /> /*清除浮動設定，取消靠左浮動*/<br /> clear: both;<br /> }<br /> <br /> a {<br /> <br /> }<br /> <br /> a:hover {<br /> <br /> }<br /> <br />


CSS設定的圖解：

[IMG]http://mepopedia.com/~jinjin/web/img/3-60.jpg[/IMG]

==========================================

[color=#CC3300]兩種不同的方式，你覺得哪一種比較簡單(單純)
你下次會選擇哪一種來製作呢？[/color]

==========================================

[hr]

<<上課影音>>利用Div標籤與CSS建立基本單欄網頁版型

利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇-1

http://youtu.be/UWwMy23q43w



[hr]

利用Div標籤與CSS建立基本網頁版型-2--CSS類別設定 標題 文繞圖

http://youtu.be/JQZJ0M0Lcvc



[hr]

利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇--Photoshop切片

http://youtu.be/A-WfUQc8L9o



[hr]


==========================================

延伸學習：可參考這裡的視訊教學，會有更多收穫!
http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/

==========================================