[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果

JinJin — Mon, 31 Mar 2014 22:26:36 +0800

1. 範例說明
2. 首頁範例製作步驟
2.1 HTML語法
2.2 CSS語法

1. 範例說明

http://mepopedia.com/~jinjin/web/hw04a/works.html

本範例延續上個範例http://mepopedia.com/forum/read.php?804,43670
繼續其他內頁的編輯
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
延續上個主題的內容

修改部分

1.最外層的ID改為wrapper-02
2.contents的部分

[hr]
HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果(2015/4/2)
https://youtu.be/z5Se-TOsN84

[hr]
4/1上課影片

前置作業---2A(從頭)
http://youtu.be/C4ygykRd45U

[hr]
前置作業---2C(延續以及從頭的做法)
http://youtu.be/FmcyhSYAo_Y

[hr]
HTML與CSS練習內頁實作篇資料整理以DIV製作表格效果
http://youtu.be/TPp7jR_NTx8

[hr]

2. 首頁範例製作步驟

可使用dreamweaver或線上語法撰寫網頁：http://codepen.io/pen 來製作

1. HTML語法

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>進階網頁設計課程</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body id="wrapper-02"> <div id="header"> <h1><a href="index.html">進階網頁設計課程</a></h1> <p class="copy">China University of Technology </p> <ul id="navi">  <li id="navi_01"><a href="index.html">首頁</a></li> <li id="navi_02"><a href="about.html">課程簡介</a></li> <li id="navi_03"><a href="profile.html">範例介紹</a></li> <li id="navi_04"><a href="works.html">作業分享</a></li> <li id="navi_05"><a href="link.html">外部連結</a></li>  </ul> </div>  <div id="contents"> <h2>範例介紹</h2> <div class="detail_box clearfix"> <p class="photo"> </p> <h3> <a href="http://mepopedia.com/forum/read.php?1650,41761" target="_blank">DIV與CSS複習--以色塊為主的基本單欄網頁版</a> </h3> <p class="text">利用Div標籤與CSS建立基本單欄網頁版型的例子，將單純色塊的網頁設計為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。利用色塊的配色，也可以輕鬆的設計具有質感的網頁，請大家發揮創意，但用單純的配色，完成一個具有不同DIV架構的網頁 </p> </div> <div class="detail_box clearfix"> <p class="photo"> </p> <h3> <a href="http://mepopedia.com/forum/read.php?1650,42884" target="_blank">網頁格線排版練習</a></h3> <p class="text"> 1.熟悉格線排版的目的與意義 <br> 2.了解網頁實際內容與細節 <br> 3.觀察優良網站的設計原則 <br> 4.增強網頁排版的能力與技巧 <br> </p> </div> <div class="detail_box clearfix"> <p class="photo"> </p> <h3> <a href="http://mepopedia.com/forum/read.php?804,43670" target="_blank">HTML與CSS練習--首頁實作篇</a> </h3> <p class="text"> 本範例將就一教學網站說明HTML與CSS之間的關係請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構自行製作一新的網站 </p> </div> </div>  <div id="footer">  <address>© 2014 China University of Technology. All rights reserved.</address> </div> </body> </html>
[hr]

2. CSS語法

CSS之邊框、邊距之屬性定義為：上右下左(順時針)
如padding: 5px 0 10px 15px;

CSS新增之語法

#wrapper-02 h2 { margin-bottom: 20px; padding: 15px 20px; color: #FFFFFF; font-size: 16px; font-weight: bold; line-height: 1em; background-color: #81786B; } .detail_box { clear:both; background-color:#F0F0F0; margin-bottom:20px; padding:20px; } .detail_box h3 { padding: 5px 0 10px 15px; background: url(images/icon_02.png) no-repeat; background-position: 0 10px; font-size: 14px; font-weight: bold; line-height: 1.6em; color: #8C7560; } .detail_box h3 a { color: #000000; } .detail_box h3 a:hover { color: #999999; } .detail_box .photo { float:right; padding:0 0 0 20px; } .detail_box .text { line-height:1.6em; }