Quantcast
Channel: JinJin 的視覺設計專區 - 網頁設計與語法（HTML/CSS）
Viewing all articles
Browse latest Browse all 70
↧

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

November 3, 2012, 2:21 am
$
0
0
  1. 1. Adobe Dreamweaver CS5 & CS5.5使用手冊
  2. 2. 以視覺化方式建立 Spry 頁面
  3. 3. 使用選單列 Widget
  4. 3.1 關於選單列 Widget
  5. 3.2 插入和編輯選單列 Widget
  6. 3.3 自訂選單列 Widget
  7. 3.3.1 變更選單項目文字樣式
  8. 3.3.2 變更選單項目背景顏色
  9. 3.3.3 變更選單項目尺寸
  10. 3.3.4 定位子選單
  11. 4. 關於標籤面板 Widget
  12. 4.1 插入和編輯標籤面板 Widget
  13. 4.1.1 插入標籤面板 Widget
  14. 4.1.2 新增面板至標籤面板 Widget
  15. 4.1.3 從標籤面板 Widget 刪除面板
  16. 4.1.4 開啟面板以進行編輯
  17. 4.1.5 變更面板順序
  18. 4.1.6 設定預設開啟的面板
  19. 4.2 自訂標籤面板 Widget
  20. 4.2.1 設計標籤面板 Widget 文字
  21. 4.2.2 變更標籤面板 Widget 的背景顏色
  22. 4.2.3 限制標籤面板寬度
  23. 5. TAB實作步驟
  24. 5.1 插入標籤面板
  25. 5.2 修改標籤標題，屬性面板對照
  26. 5.3 重新設定標籤外觀的樣式 .TabbedPanelsTab
  27. 5.4 文字居中對齊的設定
  28. 5.5 設定滑鼠移過時的標籤樣式 TabbedPanelsTabHover
  29. 5.6 設定檢視中頁次的標籤樣式 .TabbedPanelsTabSelected
  30. 5.7 設定整個標籤面板的外觀樣式.TabbedPanels
  31. 5.8 設定標籤內容區的外觀樣式 .TabbedPanelsContentGroup
  32. 5.9 設定標籤內容區的樣式重覆右邊的藍線 .TabbedPanelsContent
  33. 6. 優良網站分析
  34. 7. 範例分析
  35. 7.1 範例網站：
  36. 7.2 網站名稱：J-period
  37. 7.3 設計風格：
  38. 7.4 色彩分析
  39. 7.5 版面分析
  40. 7.6 跨瀏覽器問題與分析
  41. 8. 雙欄網頁概述
  42. 9. 雙欄網頁，float：浮動屬性做法概述
  43. 9.1 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動
  44. 9.2 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
  45. 9.3 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
  46. 10. 本單元雙欄網頁範例，float：浮動屬性做法概述
  47. 11. 雙欄網頁，float：浮動屬性做法步驟
  48. 11.1 在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊
  49. 11.2 在CSS新增插入#content-L?以及#content-R (可手動加入，也可以Dreamweaver指令插入
  50. 11.3 新增ID CSS，命名為content-L
  51. 11.4 Float浮動設定Left，靠左對齊；寬度設為?180px
  52. 11.5 設定#content-L，Padding:6px
  53. 11.6 新增ID CSS，命名為content-R
  54. 11.7 Margin：間距，設定180px (#content-L的寬度)
  55. 11.8 #content-R?的字型設定
  56. 11.9 #content-R?背景設為白色
  57. 11.10 #content-R?，Padding內距?上右下設定為30px，使視覺效果更舒服
  58. 11.11 #content?設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)
  59. 11.12 於#content-L?插入影像
  60. 11.13 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字
  61. 11.14 選取，設成清單項目
  62. 11.15 Back回上行?Enter段落?成為清單li
  63. 11.16 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list
  64. 11.17 新增ID CSS命名為L-list
  65. 11.18 #L-list?的字型設定
  66. 11.19 將#L-list,清單樣式設為none(無樣式)
  67. 11.20 將#L-list,Margin、Padding 皆設為0，清除清單預設距離
  68. 11.21 雙欄式網頁及左側的L-list,清單樣式大致設定完成
  69. 12. 表格設定的步驟
  70. 12.1 於#content-R插入表格
  71. 12.2 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題
  72. 12.3 將資料分別整理至表格之中
  73. 12.4 將表格自行命名為monent-table
  74. 12.5 在程式碼欄，將所有表格標題，由<td></td>改為<th></th>
  75. 12.6 在table下 插入表格大標題<caption></caption>
  76. 12.7 新增.monent-table tr th 標題CSS樣式
  77. 12.8 設定表格標題字型、設定表格標題底色
  78. 12.9 新增.monent-table tr td 表格內文CSS樣式
  79. 12.10 .monent-table tr td 表格內文，Padding內距與邊框底線的設定
  80. 12.11 新增.monent-table caption 表格大標題CSS樣式
  81. 12.12 .monent-table tr td 表格內文，底色與邊框底線的設定
  82. 13. 錨點連結設定的步驟
  83. 13.1 在標題欄前，插入→命名錨點，並自行命名
  84. 13.2 於每個標題前，分別命名錨點
  85. 13.3 在header標題欄，插入→命名錨點，並自行命名為top
  86. 13.4 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01
  87. 13.5 分別設定完成
  88. 13.6 插入回前一動作#top 的連結│BACK│
  89. 13.7 │BACK│設置靠右對齊
  90. 14. 左側清單列按鈕設定的步驟
  91. 14.1 新增 #L-list li a 左側清單超連結CSS設定
  92. 14.2 設定#L-list li a ，字型及底部邊框的設定
  93. 14.3 設定#L-list li a ，的區塊為block
  94. 14.4 新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定
  95. 14.5 設定#L-list li a:hover ，字型、底色、底部邊框的設定
  96. 14.6 設定後，滑鼠移過的效果
  97. 14.7 設定#L-list li a:hover ，加入底圖的設定
  98. 14.8 設定#L-list li a:hover 高度
  99. 14.9 設定後，滑鼠移過的底圖效果
  100. 15. 表格的概述
  101. 16. 表格中的標記
  102. 17. 表格的邊框
  103. 17.1 設定儲存格的邊框
  104. 18. 一、透過CSS，以清單 ul 及 li 製作網頁導覽列
  105. 19. 二、以Dreamweaver搭配設計版面與程式碼的分割畫面的製作步驟
  106. 19.1 1.清單文字採用＜ul＞標籤定義清單的範圍，並使用＜li＞標籤定義個別項目
  107. 19.2 2.清單文字採用＜ul＞標籤定義清單的範圍，並使用＜li＞標籤定義個別項目
  108. 19.3 3.接著，加入連結的語法
  109. 19.4 4.接著設定導覽列的ID名稱為#button，直接設定於＜ul＞
  110. 20. 一、繞圖排文
  111. 20.1 1.在準備好的文字中插入圖片
  112. 20.2 2.新增類別CSS，命名為floatleft
  113. 20.3 3.Float浮動設定Left靠左對齊，Padding內距?上右下設定為20px
  114. 20.4 4.將圖片設定為靠左的浮動，選取類別中的floatleft
  115. 20.5 5.圖片靠左浮動，並與內文產生20px的內距，與文字產生一段舒服的距離
  116. 20.6 6.以類似的方法，設定置右圖片，新增類別CSS，命名為floatleft
  117. 20.7 7.Float浮動設定Right靠右對齊，Padding內距?上左下設定為20px
  118. 21. 二、推文按鈕的應用
  119. 21.1 1.插入準備好的臉書、噗浪及推特的按鈕圖片
  120. 21.2 2.替代文字中寫入：將本篇文章推薦到臉書
  121. 21.3 3.為圖像設定類別CSS命名為iconstyle
  122. 21.4 4.分享到臉書、噗浪及推特的JavaScript語法
  123. 21.5 5.點選按鈕，進入行為面板
  124. 21.6 6.點選→行為→呼叫JavaScript
  125. 21.7 7.分別複製語法後貼上
  126. 21.8 8.可以試試看成效囉，不過要上傳到網路後，才能真正分享喔!
  127. 22. 三、圖片的彈跳視窗設定
  128. 22.1 1.點選圖片，進入行為面板
  129. 22.2 2.點選→行為→開啟瀏覽器視窗，並設定，填入圖片的寬高
  130. 22.3 3.點擊圖片後的效果<
  131. 23. 「檔名」注意勿用大寫
  132. 24. 「路徑」勿以自己電腦的路徑為路徑
  133. 25. [知識補充] 許多常見HTML標籤有預設邊距（margin）
  134. 26. [實作經驗] 適當使用內距（padding）讓版面平衡
  135. 27. 1.改變底色的做法/文字居中排法
  136. 28. 2.改變文字顏色的做法
  137. 29. 三、範例語法
  138. 30. 1.範例圖片按鈕的語法如下
  139. 30.1 1.HTML語法：
  140. 30.2 2.CSS部分的語法如下：
  141. 31. 2.透過CSS，以清單 ul 及 li 製作網頁導覽列的語法如下
  142. 31.1 1.HTML語法：
  143. 31.2 2.CSS部分的語法如下：
  144. 32. 前言
  145. 33. HTML的最基本結構與練習
  146. 33.1 作業一的步驟與要求：
  147. 34. 一、Div標籤與CSS
  148. 35. 二、單欄版型的範例
  149. 36. 三、DIV架構與尺寸分析
  150. 37. 四、以單純的HTML與CSS架構的方法
  151. 37.1 [步驟1] 建立新的html檔，命名為 index.html 並加入下面內容：
  152. 37.2 [步驟2] 加入完整的HTML的架構語法則為
  153. 37.3 [步驟3] 加入文字之後的完整的HTML的架構語法
  154. 37.4 [步驟4] 為了設定尺寸，則需另開新的CSS檔案來設定
  155. 37.5 [步驟 5] 背景色background-color設定之後的語法：
  156. 37.6 [步驟 6] 最後加入文字font和內距padding設定之後的語法：
  157. 38. 影音教學
  158. 38.1 利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定
  159. 38.2 利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定
  160. 38.3 利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定
  161. 39. 一、Div標籤與CSS
  162. 40. 二、單欄版型的範例
  163. 41. 三、DIV架構與尺寸分析
  164. 42. 四、以單純的HTML與CSS架構的方法
利用Div標籤與CSS建立基本網頁版型，以全國比較文學會議網站為例

39. 一、Div標籤與CSS


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


40. 二、單欄版型的範例


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

第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/


41. 三、DIV架構與尺寸分析


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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-01.jpg

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

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


2.尺寸規劃設定

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

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

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

--------------------------------------------------------------------------------------------------------
以下我們將分為兩種方法來製作這個網頁：

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

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


42. 四、以單純的HTML與CSS架構的方法


以上的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的架構語法則為

<title>視傳一AB-學號-網頁版面基本架構</title> <link rel="stylesheet" href="style.css" media="screen"> <div id="wrapper"> <div id="header"></div> <div id="btn"></div> <div id="content"></div> <div id="footer"></div> </div>
[步驟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; /*居中對齊*/ }
===============================================================================================


五、以DREAMWEAVER排版的製作步驟：


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


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

1.首先在Dreamweaver做網站管理

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


2.在Dreamweaver中以DIV建構網頁基本架構的步驟

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

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

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

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

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

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


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

[步驟3] 建立第一個Div #wrapper

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


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

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

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

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

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

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

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

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

[步驟4] 建立第二個Div #header

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

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

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

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

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

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

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-08.jpg

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

[步驟5] 建立第三個Div #btn，以及其他Div的建立

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-10.jpg

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

接下來以相同的步驟，將Div區塊建立完成


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

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

3.尺寸規劃以及其他CSS設定

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

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

[步驟1] #wrapper的CSS設定

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-12.jpg

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-13.jpg

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-14.jpg

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-15.jpg

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-16.jpg

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-17.jpg

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-18.jpg

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

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

[步驟2] #header的CSS設定

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

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

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

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

打開images資料夾

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-20.jpg

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

選擇header.jpg圖檔，按確定

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-21.jpg

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

選擇不重複背景圖片

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-22.jpg

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-23.jpg

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-24.jpg

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

[步驟3] #content的CSS設定

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-25.jpg

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

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

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

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

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

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

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

[步驟4] #footer的CSS設定

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

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

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

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

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

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

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

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

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

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

[步驟5] #btn按鈕列的按鈕放置(滑鼠變換影像的做法)

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

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

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

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-32.jpg

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-33.jpg

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

[步驟6] 貼入文字內容

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-34.jpg

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-35.jpg

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

[步驟7] 以DIV設定大標題#title_bar

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

選取第一行標題字

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

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

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

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

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

進入style.css編輯

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#title_bar的效果

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

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

[步驟8] 以類別來設定的次標題

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-44.jpg

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-45.jpg

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-46.jpg

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-47.jpg

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-48.jpg

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

標題效果

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-49.jpg

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

[步驟9] 項目清單設定

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

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

http://i1136.photobucket.com/albums/n481/parkparkyang/div-d-50.jpg

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

項目清單效果

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

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

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

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

完成圖(含繞圖排文)：

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


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

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

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; }

CSS設定的圖解：

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


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

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

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

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

==========================================
↧
Search
Viewing all articles
Browse latest Browse all 70

Trending Articles

《沈冰自述——我和周永康的故事》全本

February 8, 2015, 9:08 pm

Moog - Subsequent 25

January 16, 2020, 12:00 am

出售: 林憶蓮•回來愛的身邊 (東芝1A1頭版)

March 9, 2013, 11:02 am

筆記 - 使用 PowerShell 清除停用 AD 帳號與 OU

July 16, 2019, 11:03 pm

df-dferh-01 中国区 Android 安装 Google Play Store 后报错 的 解决办法

April 24, 2019, 6:56 am

「一棒接一棒、棒棒強棒」108學年度家長會長交接典禮

October 28, 2019, 8:49 pm

吸烟与MBTI类型判断捷径 (豆瓣 INFJ的奇幻之旅小组)

December 28, 2017, 6:55 pm

acermark龍璿國際 展出多款包裝設備

April 18, 2016, 6:02 am

枋寮北勢寮隆山宮 睽違12年再辦迎王祭典

October 15, 2018, 6:03 am

日本女优有村千佳COS集锦：狂三&黑白岩&亚丝娜&绫波丽

September 4, 2013, 2:57 am

有遇到过这个问题么。/jsb-videoplayer.js not found, possible missing file.

June 23, 2020, 2:17 am

MAS v2.8 magicgenius 汉化版 - 11.11更新

November 10, 2024, 5:46 pm

出售: Monster Cable Interlink Reference 2

May 23, 2018, 2:00 am

福建佛教人士望云和尚(林斌)的九仙禅寺被强行收走，望云妈妈被赶出寺庙

August 17, 2015, 1:12 am

R 语言中的OpenBLAS*和英特尔® 数学核心函数库的性能比较

December 21, 2016, 9:38 pm

[转载]煞貢、直星、人專吉日\金神七煞歌

March 3, 2016, 6:37 am

HAKERS哈克士戶外 12月8~14日廠拍

December 6, 2016, 3:52 am

OBS Studio 23.2.1 免安裝中文版 - 免費網路實況廣播軟體 實況主必備軟體 取代Fraps

June 16, 2019, 8:10 am

<請教>行駛中安卓機會重新開機

August 5, 2018, 7:25 am

Udp2raw-tunnel 及其一键安装脚本

October 23, 2017, 6:46 pm
Search