Change History

為一架構非常單純且基本的網站，因為當作第一個完整網站的練習


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

填入以上語法，或由dreamweaver插入Div標籤(新增命名為 style.css，並記得至

基本的尺寸設定為：
CSS規則)的方式填入

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

[IMG]http width: 900px; //寬度設定為900px
height: 130px; //高度設定為130px
s/n481/parkp width: 900px; //寬度設定為900px
arkyang/d-div-02.jpg[/IMG]



三、在規畫好版面之後，必須設定版面尺寸，以做為後續設計的依 width: 900px; //寬度設定為900px
檔，下次上課則會正式的 width: 900px; //寬度設定為900px
height: 82px; //高度設定為 82px
}

body {
margin: 0px; //緊貼頂部(上下左右)，沒有空隙
}



四、基本版面和尺寸設定好之後

將現成圖片置入，可以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 /> width: 900px; //寬度設定為900px<br /> height: 30px; //高度設定為 30px<br /> }<br /> <br /> #content {<br /> width: 900px; //寬度設定為900px<br /> }<br /> <br /> #footer {<br /> width: 900px; //寬度設定為900px<br /> 教大家如何自己製圖和切割成網頁可使用的圖片做法<br /> <br /> <br /> 為了設定尺寸，則需另開新的CSS檔案來設定<br /> <br /> <b>網頁若有指定寬度，只要設定在最外層的的DIV即可<br /> 內容的高度通常可不用設定，視內容而定</b><br /> <br /> 命名為 style.css，並記得至<br /> <br /> 基本的尺寸設定為：<br /> 本網頁的寬度設定為900px<br /> <br /> <xmp><br /> #wrapper {<br /> width: 900px; //寬度設定為900px<br /> margin: auto; //版面居中對齊<br /> }<br /> <br /> #header {<br /> height: 130px; //高度設定為130px；寬度900px會自動依上層wrapper的寬度，故可不用另外設定<br /> }<br /> <br /> #btn {<br /> height: 30px; //高度設定為 3並回文附上網址</b><br /> <br /> <br /> <br /> ===========================================<br /> <br /> 若經發現作業為直接複製同學檔案以零分計0px；寬度900px會自動依上層wrapper的寬度，故可不用另外設定<br /> }<br /> <br /> #content {<br /> <br /> }<br /> <br /> #footer {<br /> height: 82px; //高度設定為 82px<br /> }<br /> <br /> body {<br /> margin: 0px; //緊貼頂部(上下左右)，沒有空隙<br /> }<br />


四、基本版面===========================================

若經發現作業為直接複製同學檔案以零分計和尺寸設定好之後

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

或者以CSS的語法直接填入，我們就完成了一個基本的頁面架構，接下來就可以做內容的文字編排了。


插入圖片與加入最後框的CSS語法：


<br /> #wrapper {<br /> width: 900px; //寬度設定為900px<br /> margin: auto; //版面居中對齊<br /> border: 6px solid #313000; //最外框的設定：6px的深綠色實線<br /> }<br /> <br /> #header {<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 /> padding: 30px; //文字與content之間的距離<br /> font-size: 14px; //字體大小14px<br /> font-size: 14px; //字體大小14px<br /> line-height: 2em; //行間為兩個字高<br /> }<br /> <br /> #footer {<br /> height: 82px; //高度設定為 82px<br /> background-image: url(images/footer.jpg); //插入背景圖片<br /> background-repeat: no-repeat; // 不重複<br /> }<br /> <br /> body {<br /> margin: 0px; //緊貼頂部，沒有空隙<br /> }<br />


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

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

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


每個同學記得在title的部分打上"視傳一B-學號-網頁版面基本架構"

並在content自行打上px的數值，打入不同的文字自行隨意設定

請每位同學完成本單元─網頁版面基本架構後，上傳至FTP

並回覆本篇文章

1.作業網址

2.有無遇到的問題，製作作業的時間




===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================
本週補充講義：
[color=#330066]1.網站設計解析
2.實做第一個網頁
3.利用 CSS 與 Div 標籤建立網頁版型[/color]

[color=#006600]以上PDF講義請至學生系統下載
http://192.192.78.86/student_portal/[/color]
=========================================== line-height: 2em; //行間為兩個字高
}

#footer {
height: 82px; //高度設定為 82px
background-image: url(images/footer.jpg); //插入背景圖片
background-repeat: no-repeat; // 不重複
}

body {
margin: 0px; //緊貼頂部，沒有空隙
}



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

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

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


每個同學記得在title的部分打上"視傳一B-學號-網頁版面基本架構"

並在content自行打上px的數值，打入不同的文字自行隨意設定

請每位同學完成本單元─網頁版面基本架構後，上傳至FTP

並回覆本篇文章

1.作業網址

2.有無遇到的問題，製作作業的時間



�回覆，否則為遲交



3.images圖檔資料夾

存放在 < hw02-學號 > 的資夾內[/color] [color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]

tle的部分打上"自訂的主題"[/co=====================
本週補充講義：
[color=#330066]1.網站設計解析
2.實做第一個網頁
3.利用 CSS 與 Div 標籤建立網頁版型[/color]

[color=#006600]以上PDF講義請至學生系統下載
http://192.192.78.86/student_portal/[/color]
===========================================lor]
4.在#wrapper寬度上打上 px的數值

5.#content內，自行4.請務必在下次上課前回覆，否則為遲交



===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================
本週補充講義：
[color=#330066]1.網站設計解析
2.實做第一個網頁
3.利用 CSS 與 Div 標籤建立網頁版型[/color]

[color=#006600]以上PDF講義請至學生系統下載
http://192.192.78.86/student_portal/[/color]
=========================================== (3)請至少找一個單欄的網頁，貼上網址，越多越好

4.請務必在下次上課前回覆，否則為遲交



===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================
本週補充講義：
[color=#330066]1.網站設計解析
2.實做第一個網頁
3.利用 CSS 與 Div 標籤建立網頁版型[/color]

[color=#006600]以上PDF講義請至學生系統下載
http://192.192.78.86/student_portal/[/color]
===========================================打入不同的內容文字，自行隨意設定

6以本單元的架構下，文字、圖片及設定，可依講義或自行發揮

7.請每位同學完成本單元─網頁版面基本架構後，上傳至FTP


��碼」的優缺點。
　(3) 利用圖片設計輔以CSS色彩搭配，營造網頁整體風格[/color]

[color=#663300]二、繳交作業方式[/color]

1.製作完成後，檔案命名方式：

[color=#669900]第三個作業FTP上的資料夾為：hw03 (2).有無遇到的問題，製作感想，製作作業的時間

(3)請至少找一個單欄的網頁，貼上網址，越多越好，也可以找雙欄或三欄的網頁做為對照

4.請務必在下次上課前回覆，否則為遲交



===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================
本週補充講義：
�同學請將自己的資料夾命名為：hw03-學號
這個作業的網址則為:http://mepopedia.com/~web100b/hw03/hw03-100xxxxxxx

資料夾內含：
1.首頁命名為index.html
2.一個命名為styl===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================
本週補充講義：
[color=#330066]1.網站設計解析
2.實做第一個網頁
3.利用 CSS 與 Div 標籤建立網頁版型[/color]

[color=#006600]以上PDF講義請至學生系統下載
http://192.192.78.86/student_portal/[/color]
===========================================e.css的css樣式檔
3.images圖檔資料夾

存放在 < hw03-學號 > 的資夾內[/color]


2.上傳至FTP

3.回覆本篇文章

(1).作業網址

(2).有無遇到的問題

(3)製作感想

(4)製作作業的時間



4.請務必在下次上課前回覆，否則為遲交
2. 上傳至FTP
�整體風格（加分）[/color]

[color=#663300]二、繳交作業方式　(2) 風格設定（包括圖片設計與色彩設定部份）
[/color]

1.製作完成後，檔案命名方式：

[color=#669900]第三個作業FTP上的資料夾為：hw03

每位同學請將自己的資料夾命名為：hw03-學號
這個作業的網址則為:http://mepopedia.com/~web100b/hw03/hw03-100xxxxxxx

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾

存放在 < hw03-學號 > 的資夾內[/color]


2. 上傳至FTP

3.回覆本篇文章

　(1) 作業網址

　(2) 風格設定（色彩設定部份）（加分）

　(3) 有無遇到的問題

　(4) 製作感想

　(5) 製作作業的時間

4.請務必在下次上課前回覆，否則為遲交



[color=#CC3300]範例參考網站：[/color]
http://mepopedia.com/~web100a/hw03/hw03/

===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================
本週補充講義：
[color=#330066]1.網站設計解析
2.實做第一個網頁
3.利用 CSS 與 Div 標籤建立網頁版型[/color]

[color=#006600]以上PDF講義請至學生系統下載
http://192.192.78.86/student_portal/[/color]
===========================================http://mepopedia.com/~jinjin/web/hw03/

===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================
本週補充講義：
[color=#330066]1.網站設計解析
2.實做第一個網頁
3.利用 CSS 與 Div 標籤建立網頁版型[/color]

[color=#006600]以上PDF講義請至學生系統下載
http://192.192.78.86/student_portal/[/color]
===========================================