[講義03] 利用Div標籤與CSS建立基本單欄網頁版型

[講義03] 利用Div標籤與CSS建立基本單欄網頁版型 1. [color=#663300]一、Div標籤與CSS[/color]2. [color=#663300]二、單欄版型的範例[/color]3. [color=#663300]三、DIV架構與尺寸分析[/color]4. [color=#663300]四、以單純的HTML與CSS架構的方法[/color]5. 利用Div標籤與CSS建立基本單欄網頁版型5.0.1 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇-15.0.2 利用Div標籤與CSS建立基本網頁版型-2--CSS類別設定標題文繞圖5.0.3 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇--Photoshop切片[color=#999900]利用Div標籤與CSS建立基本網頁版型，以全國比較文學會議網站為例[/color] 1. [color=#663300]一、Div標籤與CSS[/color] 在早期瀏覽器以IE為主的網頁設計時代，大多以表格(TABLE)或頁框(FRAME)，來製作網頁主要的定位與架構，但是隨著上網習慣的改變，網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等，目前網頁設計的架構，多半以DIV搭配CSS為設計主流，以Div標籤來建立網頁區塊，區分各個主要頁面做為主要的排版架構，搭配CSS語法來美化網頁，以往的網頁美化設定大多直接寫在HTML網頁本身，現在則分開以HTML為架構設定，CSS為風格設定，一個建築網頁架構，一個塑造網頁美感。 2. [color=#663300]二、單欄版型的範例[/color] 進入Dreamweaver的例子，將以全國比較文學會議網站為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。這是一個很單純的單欄版型的網頁，因為內容單純，故以單欄來設計。 [color=#669900]第三十四屆全國比較文學會議網站 http://mepopedia.com/group/comparative/[/color] 3. [color=#663300]三、DIV架構與尺寸分析[/color] 1.以DIV建構網頁基本架構以下為最基本的網站排版架構 [IMG]http://mepopedia.com/~jinjin/web/img/3-1.jpg[/IMG] 若轉換成第三十四屆全國比較文學會議網站的架構的對照即為 [IMG]http://mepopedia.com/~jinjin/web/img/3-2.jpg[/IMG] 2.尺寸規劃設定做設計任何網頁之前，在規畫好版面之後，就必須設定版面尺寸，以做為後續設計的依據。 [IMG]http://mepopedia.com/~jinjin/web/img/3-3.jpg[/IMG] 我們這次先準備好預做好的圖檔，下次則會正式的教大家如何自己製圖和切割成網頁可使用的圖片做法。 -------------------------------------------------------------------------------------------------------- [color=#993300]以下我們將分為兩種方法來製作這個網頁：第一種是以單純的HTML加CSS的方式撰寫第二種則是以DREAMWEAVER來製作排版大家可以比較並體會兩者製作的差異，未來兩者擇其一來製作即可。[/color] -------------------------------------------------------------------------------------------------------- 4. [color=#663300]四、以單純的HTML與CSS架構的方法[/color] 以上的DIV架構，直接以HTML的語法可寫成以下語法步驟如下： [步驟1] 建立新的html檔，命名為 index.html 並加入下面內容： [步驟2] 加入完整的HTML的架構語法則為視傳一AB-學號-網頁版面基本架構 [步驟3] 為了設定尺寸，則需另開新的CSS檔案來設定命名為 style.css 單欄網頁若為指定寬度，只要設定在最外層的 DIV (#wrapper)即可。基本的尺寸設定為： #wrapper { width: 900px; /*寬度設定為900px*/ margin: auto; /*版面居中對齊*/ } #header { height: 130px; /*高度設定為130px，因有有設背景圖片，所以要設高度*/ } #btn { height: 30px; /*高度設定為 30px，此部分因為裡面的圖片自己會有高度，所以高度也不一定要設定*/ } #content { /* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper)，所以可不用設定寬度*/ } #footer { } [步驟 4] 置入圖片之後的語法：基本版面和尺寸設定好之後，可以將現成圖片置入，以CSS的語法直接填入，我們就完成了一個基本的頁面設定，接下來就可以做內容的文字編排了。插入圖片、文字與設定最外框的CSS語法： body { margin: 0px; /*緊貼頂部(上下左右)，沒有空隙*/ } #wrapper { width: 900px; /*寬度設定為900px*/ margin: auto; /*版面居中對齊*/ font-family: "微軟正黑體",Arial, Helvetica, sans-serif; color: #333; border: 6px solid #313000; /*網頁做外框的設定*/ } #header { height: 130px; /*高度設定*/ background-image: url(images/header.jpg); /*背景圖片設定*/ background-repeat: no-repeat; /*設定為背景不重複*/ } #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/bottom.jpg); background-repeat: no-repeat; text-align:center; /*居中對齊*/ } [hr] 補充下載參考檔案文字檔： http://mepopedia.com/~cg104-1a/hw03/hw03-ex/hw03.txt 練習圖檔：http://mepopedia.com/~cg104-1a/hw03/hw03-ex/back.psd [hr] =============================================================================================== [color=#993300][size=x-large]五、以DREAMWEAVER排版的製作步驟：[/size][/color] [color=#0033FF]本講義說明將全國比較文學會議網站稍做修改成為以下網址 http://mepopedia.com/~jinjin/web/hw03/[/color] 同樣的網頁架構，以DREAMWEAVER製作的步驟如下： [color=#CC3300][size=x-large]1.首先在Dreamweaver做網站管理[/size][/color] 請大家下載附加檔案的圖檔來練習，將資料夾命名為→hw03-學號網站管理方法詳見講義 [color=#CC3300][size=x-large]2.在Dreamweaver中以DIV建構網頁基本架構的步驟[/size][/color] [size=x-large][步驟1] 請開新的html檔，命名為：index.html[/size] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [size=x-large][步驟2] 由dreamweaver插入Div標籤(新增CSS規則)的方式填入[/size] [IMG]http://mepopedia.com/~jinjin/web/img/3-4.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [IMG]http://mepopedia.com/~jinjin/web/img/3-5.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [size=x-large][步驟3] 建立第一個Div #wrapper[/size] 另存樣式表檔，命名為style，樣式表檔即為 .css 出現CSS規則定義視窗，暫時先按[color=#CC0066]確定[/color]離開，等DIV新增完成，再統一設定回到插入Div標籤視窗，按確定後建立#wrapper [IMG]http://mepopedia.com/~jinjin/web/img/3-6.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [IMG]http://mepopedia.com/~jinjin/web/img/3-7.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [IMG]http://mepopedia.com/~jinjin/web/img/3-8.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [IMG]http://mepopedia.com/~jinjin/web/img/3-9.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [size=x-large][步驟4] 建立第二個Div #header[/size] [IMG]http://mepopedia.com/~jinjin/web/img/3-10.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [IMG]http://mepopedia.com/~jinjin/web/img/3-11.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [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/web/img/3-14.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [size=x-large][步驟5] 建立第三個Div #btn，以及其他Div的建立[/size] [IMG]http://mepopedia.com/~jinjin/web/img/3-15.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [IMG]http://mepopedia.com/~jinjin/web/img/3-16.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [color=#CC0066]接下來以相同的步驟，將Div區塊建立完成[/color] [IMG]http://mepopedia.com/~jinjin/web/img/3-17.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [size=x-large][color=#CC3300]3.尺寸規劃以及其他CSS設定[/color][/size] 基本版面和尺寸設定好之後，將現成圖片、文字置入，做文字、版面等CSS設定，設定完成後，我們就完成了一個基本的頁面架構。 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [size=x-large][步驟1] #wrapper的CSS設定[/size] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 點擊#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] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 接著點選左側的方框選單，設定寬度為900px，Margin的部分，將全部一樣勾選，設定為auto，則會將網頁做居中設定 [IMG]http://mepopedia.com/~jinjin/web/img/3-21.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 接著點選左側的邊框(border)選單，設定最外圍的粗邊框，邊框有不同種類的設定，可依設計風格選擇 [IMG]http://mepopedia.com/~jinjin/web/img/3-22.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 將上右下左都設定同樣粗細顏色的實線線段，設定完後按確定看設定的效果 [IMG]http://mepopedia.com/~jinjin/web/img/3-23.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 接著出現邊框的效果，及字體的改變，但整體還不夠明顯 [IMG]http://mepopedia.com/~jinjin/web/img/3-24.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [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] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 選擇header.jpg圖檔，按確定 [IMG]http://mepopedia.com/~jinjin/web/img/3-27.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 選擇不重複背景圖片 [IMG]http://mepopedia.com/~jinjin/web/img/3-28.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 接著點選左側的方框選單，設定高度為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] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [size=x-large][步驟3] #content的CSS設定[/size] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 點擊#content進入編輯CSS，首先設定字型，設定字體大小、行高、顏色 [IMG]http://mepopedia.com/~jinjin/web/img/3-31.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 接著點選左側的方框選單，內距padding的部分，將全部一樣勾選，設定為30px，也就是文字內容距離區塊邊緣，會有30px的距離按確定看設定效果 [IMG]http://mepopedia.com/~jinjin/web/img/3-32.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 觀看#content文字及編排設定的改變使用分割，觀看左側style.css的設定狀況 [IMG]http://mepopedia.com/~jinjin/web/img/3-33.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [size=x-large][步驟4] #footer的CSS設定[/size] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 點擊#footer進入編輯CSS，首先設定字型，設定字體大小、行高、顏色 [IMG]http://mepopedia.com/~jinjin/web/img/3-34.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 背景圖片的設定與#header相同 [IMG]http://mepopedia.com/~jinjin/web/img/3-35.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 接著點選左側的方框選單，內距padding的部分，將全部一樣勾選，設定為20px，也就是文字內容距離區塊邊緣，會有20px的距離按確定看設定效果 [IMG]http://mepopedia.com/~jinjin/web/img/3-36.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [size=x-large][步驟5] #btn按鈕列的按鈕放置(滑鼠變換影像的做法)[/size] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1.觀看#footer文字及編排設定的改變 2.使用分割，觀看左側style.css的設定狀況 3.將上方多餘的文字刪除 4.在#btn處，選取文字，按下左方插入→滑鼠變換影像 [IMG]http://mepopedia.com/~jinjin/web/img/3-37.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1.滑鼠變換影像的設定 2.事先準備好一組兩個圖檔，做為變換使用 3.填入替代文字的話，若圖片無法顯示時可出現的文字 4.前往的url，若還沒有開新的html檔，可稍後再設定連結 [IMG]http://mepopedia.com/~jinjin/web/img/3-39.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 以相同的做法，重複五次，將五組按鈕(共十張圖片)插入 [IMG]http://mepopedia.com/~jinjin/web/img/3-40.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [size=x-large][步驟6] 貼入文字內容[/size] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1.打開hw03.txt 2.在#conten及#footer貼上適當文字 3.也可自行貼上適當文字 [IMG]http://mepopedia.com/~jinjin/web/img/3-41.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [IMG]http://mepopedia.com/~jinjin/web/img/3-42.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [size=x-large][步驟7] 以DIV設定大標題#title_bar[/size] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 選取第一行標題字 [IMG]http://mepopedia.com/~jinjin/web/img/3-43.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1.插入Div標籤 2.選擇"圍繞著選取範圍" 3.在id上打上title_bar 4.新增CSS規則 [IMG]http://mepopedia.com/~jinjin/web/img/3-44.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 進入style.css編輯 [IMG]http://mepopedia.com/~jinjin/web/img/3-45.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 首先設定字型，設定字體大小、行高、粗體、顏色 [IMG]http://mepopedia.com/~jinjin/web/img/3-46.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 背景圖片的設定與#header及#footerr相同 [IMG]http://mepopedia.com/~jinjin/web/img/3-47.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1.點選左側的區塊選單 2.設定 text-align:center ，設定文字居中 3.設定完畢，按確定 [IMG]http://mepopedia.com/~jinjin/web/img/3-48.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 回到#title_bar，設定完畢，按確定看效果 [IMG]http://mepopedia.com/~jinjin/web/img/3-49.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- #title_bar的效果 [IMG]http://mepopedia.com/~jinjin/web/img/3-50.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [size=x-large][步驟8] 以類別來設定的次標題[/size] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1.先新增CSS樣式，選擇類別，取名為title-2 2.命名不可與標籤相同，只能以半形的英文、數字、中線、底線命名 [IMG]http://mepopedia.com/~jinjin/web/img/3-51.jpg[/IMG] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 首先設定字型，設定字體大小、行高、粗體、顏色 [IMG]http://mepopedia.com/~jinjin/web/img/3-52.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] ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 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] img{ 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*/ } #title_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://mepopedia.com/~jinjin/web/img/3-60.jpg[/IMG] ========================================== [color=#CC3300]兩種不同的方式，你覺得哪一種比較簡單(單純) 你下次會選擇哪一種來製作呢？[/color] ========================================== [hr] 5. 利用Div標籤與CSS建立基本單欄網頁版型 1. 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇-1 http://youtu.be/UWwMy23q43w [hr] 2. 利用Div標籤與CSS建立基本網頁版型-2--CSS類別設定標題文繞圖 http://youtu.be/JQZJ0M0Lcvc [hr] 3. 利用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/ ========================================== http://mepopedia.com/forum/read.php?804,16271,16271#msg-16271 Sun, 26 Jul 2026 19:14:37 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?804,16271,86581#msg-86581 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,86581#msg-86581 蘇雁祺網頁設計與語法（HTML/CSS） Mon, 27 Nov 2017 14:27:49 +0800 http://mepopedia.com/forum/read.php?804,16271,86580#msg-86580 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,86580#msg-86580 (2) 風格設定:簡約時尚
　(3) 有無遇到的問題 :無
　(4) 製作感想 :不像前面的作業很多只要複製語法貼上就好那麼簡單
　(5) 製作作業的時間:兩個小時]]> 蘇雁祺網頁設計與語法（HTML/CSS） Mon, 27 Nov 2017 14:21:35 +0800 http://mepopedia.com/forum/read.php?804,16271,83224#msg-83224 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,83224#msg-83224
　(2) 風格設定:時尚潮流

　(3) 有無遇到的問題 :無

　(4) 製作感想 :做出來滿有成就感的

　(5) 製作作業的時間:3小時]]> 1045445075 網頁設計與語法（HTML/CSS） Wed, 14 Dec 2016 11:23:45 +0800 http://mepopedia.com/forum/read.php?804,16271,83081#msg-83081 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,83081#msg-83081
　(2) 風格設定:渡邊直美雖然是胖胖女孩，淡粉紅色的甜美風格我覺得最適合他了~

　(3) 有無遇到的問題 :有遇到問題，做DIV標籤時一直失敗，覺得很難

　(4) 製作感想 :比之前的難，但完成很開心

　(5) 製作作業的時間:平均很多天，每次做一、兩個小時]]> 1045445144 網頁設計與語法（HTML/CSS） Mon, 28 Nov 2016 07:52:09 +0800 http://mepopedia.com/forum/read.php?804,16271,83075#msg-83075 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,83075#msg-83075 loveelise1021 網頁設計與語法（HTML/CSS） Sat, 26 Nov 2016 00:12:30 +0800 http://mepopedia.com/forum/read.php?804,16271,83008#msg-83008 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,83008#msg-83008 (2) 風格設定:以藍色來呈現皮克斯ㄉ風風格

　(3) 有無遇到的問題 :每一不都有問題，只能說老師的講義太強大ㄌ

　(4) 製作感想 :老師的講義萬歲

　(5) 製作作業的時間 :三天三夜]]> H224488882 網頁設計與語法（HTML/CSS） Wed, 23 Nov 2016 11:48:24 +0800 http://mepopedia.com/forum/read.php?804,16271,82994#msg-82994 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,82994#msg-82994
　(3) 有無遇到的問題 :每一不都有問題，只能說老師的講義太強大ㄌ

　(4) 製作感想 :老師的講義萬歲

　(5) 製作作業的時間 :三天三夜]]> H224488882 網頁設計與語法（HTML/CSS） Wed, 23 Nov 2016 01:30:07 +0800 http://mepopedia.com/forum/read.php?804,16271,82014#msg-82014 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,82014#msg-82014
　(2) 風格設定:鮮豔繽紛

　(3) 有無遇到的問題 :無

　(4) 製作感想 :網頁好難做 :(

　(5) 製作作業的時間:3小時]]> 小花蛀牙網頁設計與語法（HTML/CSS） Thu, 16 Jun 2016 11:35:30 +0800 http://mepopedia.com/forum/read.php?804,16271,81166#msg-81166 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,81166#msg-81166 1045440025 網頁設計與語法（HTML/CSS） Wed, 27 Apr 2016 23:59:27 +0800 http://mepopedia.com/forum/read.php?804,16271,78584#msg-78584 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,78584#msg-78584
　(2) 風格設定:簡單風格

　(3) 有無遇到的問題 :有遇到問題

　(4) 製作感想 :花時間就會做好

　(5) 製作作業的時間:1天]]> 小吉網頁設計與語法（HTML/CSS） Thu, 26 Nov 2015 11:57:48 +0800 http://mepopedia.com/forum/read.php?804,16271,78345#msg-78345 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,78345#msg-78345 主題:嚕嚕米
問題 :不是很懂
感想 : 製作作業的時間 :5-6小時]]> lily850204 網頁設計與語法（HTML/CSS） Tue, 17 Nov 2015 02:41:26 +0800 http://mepopedia.com/forum/read.php?804,16271,78344#msg-78344 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,78344#msg-78344 風格設定:籃球為主
主題:麥可喬丹
問題 :很多
感想 :很難,有些還不會
製作作業的時間 :5小時]]> 1035445142 網頁設計與語法（HTML/CSS） Tue, 17 Nov 2015 02:38:30 +0800 http://mepopedia.com/forum/read.php?804,16271,78135#msg-78135 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,78135#msg-78135 風格設定:用白灰營造現代感,清新簡潔
主題:動畫,家庭教師
問題 :很多
感想 :很難,但成功後很有成功感
製作作業的時間 :4小時]]> 1045245001 網頁設計與語法（HTML/CSS） Wed, 04 Nov 2015 17:44:18 +0800 http://mepopedia.com/forum/read.php?804,16271,66380#msg-66380 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,66380#msg-66380
影片不知道為什麼出不來
一開始著手還滿難的存檔圖會亂跑東西會跳掉
後來另存新黨開始就有FU了
1025445027]]> 欻Hu 網頁設計與語法（HTML/CSS） Thu, 20 Nov 2014 13:45:02 +0800 http://mepopedia.com/forum/read.php?804,16271,65874#msg-65874 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,65874#msg-65874
　(2) 風格設定:採用老師的範本練習

　(3) 有無遇到的問題 :很多問題，邊做邊看講義，尋求是有協助

　(4) 製作感想 :覺得超難一堆設定搞不好

　(5) 製作作業的時間 :4個半小時左右

視傳二a1025445175 張怡萱

**上次交過作業了忘記回復文章><]]> 1025445175 網頁設計與語法（HTML/CSS） Sun, 16 Nov 2014 15:10:19 +0800 http://mepopedia.com/forum/read.php?804,16271,65812#msg-65812 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,65812#msg-65812 做好久但是很有成就感!

1025445156 蔡佳芬]]> fanny40721 網頁設計與語法（HTML/CSS） Sat, 15 Nov 2014 22:21:58 +0800 http://mepopedia.com/forum/read.php?804,16271,64986#msg-64986 Re: 網頁圖檔RGB與CMYK的問題 http://mepopedia.com/forum/read.php?804,16271,64986#msg-64986
　(2) 風格設定:採用老師的範本練習再添加流行電影

　(3) 有無遇到的問題 :很多問題，邊做邊看講義，尋求是有協助

　(4) 製作感想 :有點難

　(5) 製作作業的時間 :2個半小時左右

視傳二a1025445214 蘇子玲]]> Grape 網頁設計與語法（HTML/CSS） Wed, 12 Nov 2014 02:56:56 +0800 http://mepopedia.com/forum/read.php?804,16271,26509#msg-26509 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,26509#msg-26509
老師的講義幫我許多
謝謝]]> 1015445208 網頁設計與語法（HTML/CSS） Sat, 03 Nov 2012 17:21:50 +0800 http://mepopedia.com/forum/read.php?804,16271,26503#msg-26503 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,26503#msg-26503 不知為何~~回應太多次就不能回應嗎~我不能回應期中報告，所以叫交到這裡]]> 1015445246 網頁設計與語法（HTML/CSS） Sat, 03 Nov 2012 11:09:21 +0800 http://mepopedia.com/forum/read.php?804,16271,16501#msg-16501 Re: 網頁圖檔RGB與CMYK的問題 http://mepopedia.com/forum/read.php?804,16271,16501#msg-16501
因為CMYK在網頁顯示上會有很多變數，有時會正常顯現，但大多時後會不正常

如以下圖為例

同一張圖存成CMYK，在Google Chrome和FireFox上會產生色彩偏差，IE則完全無法顯示

http://i1136.photobucket.com/albums/n481/parkparkyang/cover-6-2.jpg

存成RGB則在網頁顯示一切正常

http://i1136.photobucket.com/albums/n481/parkparkyang/cover-6-3.jpg]]> JinJin 網頁設計與語法（HTML/CSS） Wed, 12 Oct 2011 00:27:51 +0800 http://mepopedia.com/forum/read.php?804,16271,16499#msg-16499 Re: [講義] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,16499#msg-16499 骸蒼Aoi 網頁設計與語法（HTML/CSS） Wed, 12 Oct 2011 00:00:09 +0800 http://mepopedia.com/forum/read.php?804,16271,16349#msg-16349 Re: [講義] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,16349#msg-16349
講義寫得很棒哦！希望同學能學習得很好。這麼專業又詳細的網頁設計議義真的很需要呢！]]> HP 網頁設計與語法（HTML/CSS） Wed, 05 Oct 2011 21:15:30 +0800 http://mepopedia.com/forum/read.php?804,16271,16271#msg-16271 [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,16271#msg-16271

1. [color=#663300]一、Div標籤與CSS[/color]
2. [color=#663300]二、單欄版型的範例[/color]
3. [color=#663300]三、DIV架構與尺寸分析[/color]
4. [color=#663300]四、以單純的HTML與CSS架構的方法[/color]
5. <<上課影音>>利用Div標籤與CSS建立基本單欄網頁版型
5.0.1 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇-1
5.0.2 利用Div標籤與CSS建立基本網頁版型-2--CSS類別設定標題文繞圖
5.0.3 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇--Photoshop切片

[color=#999900]利用Div標籤與CSS建立基本網頁版型，以全國比較文學會議網站為例[/color]

1. [color=#663300]一、Div標籤與CSS[/color]

在早期瀏覽器以IE為主的網頁設計時代，大多以表格(TABLE)或頁框(FRAME)，來製作網頁主要的定位與架構，但是隨著上網習慣的改變，網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等，目前網頁設計的架構，多半以DIV搭配CSS為設計主流，以Div標籤來建立網頁區塊，區分各個主要頁面做為主要的排版架構，搭配CSS語法來美化網頁，以往的網頁美化設定大多直接寫在HTML網頁本身，現在則分開以HTML為架構設定，CSS為風格設定，一個建築網頁架構，一個塑造網頁美感。

2. [color=#663300]二、單欄版型的範例[/color]

進入Dreamweaver的例子，將以全國比較文學會議網站為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁，因為內容單純，故以單欄來設計。

[color=#669900]第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/[/color]

3. [color=#663300]三、DIV架構與尺寸分析[/color]

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

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

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

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

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

2.尺寸規劃設定

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

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

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

--------------------------------------------------------------------------------------------------------
[color=#993300]以下我們將分為兩種方法來製作這個網頁：

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

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

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

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

步驟如下：

[步驟1] 建立新的html檔，命名為 index.html 並加入下面內容：

<div id="wrapper"> <div id="header"></div> <div id="btn"></div> <div id="content"></div> <div id="footer"></div> </div>
[步驟2] 加入完整的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>
[步驟3] 為了設定尺寸，則需另開新的CSS檔案來設定

命名為 style.css

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

基本的尺寸設定為：

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

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

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

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

body { margin: 0px; /*緊貼頂部(上下左右)，沒有空隙*/ } #wrapper { width: 900px; /*寬度設定為900px*/ margin: auto; /*版面居中對齊*/ font-family: "微軟正黑體",Arial, Helvetica, sans-serif; color: #333; border: 6px solid #313000; /*網頁做外框的設定*/ } #header { height: 130px; /*高度設定*/ background-image: url(images/header.jpg); /*背景圖片設定*/ background-repeat: no-repeat; /*設定為背景不重複*/ } #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/bottom.jpg); background-repeat: no-repeat; text-align:center; /*居中對齊*/ }

[hr]
補充下載參考檔案
文字檔： http://mepopedia.com/~cg104-1a/hw03/hw03-ex/hw03.txt
練習圖檔：http://mepopedia.com/~cg104-1a/hw03/hw03-ex/back.psd

[hr]

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

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

[color=#0033FF]本講義說明將全國比較文學會議網站稍做修改成為以下網址
http://mepopedia.com/~jinjin/web/hw03/[/color]

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

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

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

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

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

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

[size=x-large][步驟2] 由dreamweaver插入Div標籤(新增CSS規則)的方式填入[/size]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[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/web/img/3-14.jpg[/IMG]

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

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

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

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

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

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

[color=#CC0066]接下來以相同的步驟，將Div區塊建立完成[/color]

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

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

[size=x-large][color=#CC3300]3.尺寸規劃以及其他CSS設定[/color][/size]

基本版面和尺寸設定好之後，將現成圖片、文字置入，做文字、版面等CSS設定，設定完成後，我們就完成了一個基本的頁面架構。

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

[size=x-large][步驟1] #wrapper的CSS設定[/size]

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

點擊#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]

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

接著點選左側的方框選單，設定寬度為900px，Margin的部分，將全部一樣勾選，設定為auto，則會將網頁做居中設定

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

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

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

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

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

將上右下左都設定同樣粗細顏色的實線線段，設定完後按確定看設定的效果

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

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

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

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

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

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

[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]
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

選擇header.jpg圖檔，按確定

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

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

選擇不重複背景圖片

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

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

接著點選左側的方框選單，設定高度為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]

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

[size=x-large][步驟3] #content的CSS設定[/size]

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

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

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

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

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

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

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

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

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

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

[size=x-large][步驟4] #footer的CSS設定[/size]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以相同的做法，重複五次，將五組按鈕(共十張圖片)插入

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

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

[size=x-large][步驟6] 貼入文字內容[/size]

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

1.打開hw03.txt
2.在#conten及#footer貼上適當文字
3.也可自行貼上適當文字

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

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

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

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

[size=x-large][步驟7] 以DIV設定大標題#title_bar[/size]

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

選取第一行標題字

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

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

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

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

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

進入style.css編輯

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#title_bar的效果

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

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

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

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

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

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

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

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

[IMG]http://mepopedia.com/~jinjin/web/img/3-52.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]

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

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]

img{ 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*/ } #title_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://mepopedia.com/~jinjin/web/img/3-60.jpg[/IMG]

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

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

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

[hr]

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

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

http://youtu.be/UWwMy23q43w

[hr]

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

http://youtu.be/JQZJ0M0Lcvc

[hr]

3. 利用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/

==========================================]]> JinJin 網頁設計與語法（HTML/CSS） Tue, 04 Oct 2011 14:21:05 +0800