Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Change History

Message: [講義] HTML與CSS練習--首頁實作篇

討論區清單 文章列表
Changed By: JinJin
Change Date: March 26, 2015 02:58PM

[講義] HTML與CSS練習--首頁實作篇
<h2>範例說明</h2>
http://mepopedia.com/~web102-c/hw03/hw03/

本範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站

可參考http://www.css3maker.com/
適當加入CSS3效果

[hr]
<<20150326上課影音>>

<b>[HTML與CSS練習]-- 首頁實作篇</b>


https://youtu.be/MSgUbEA1xYY

<iframe width="853" height="480" src="https://www.youtube.com/embed/MSgUbEA1xYY?rel=0" frameborder="0" allowfullscreen></if[hr]

<h3>3/25上課影音</h4>
https://youtu.be/MSgUbEA1xYY

<iframe width="853" height="480" src="https://www.youtube.com/embed/MSgUbEA1xYY?rel=0" frameborder="0" allowfullscreen></iframe>
fullscreen></iframe>
上課影音</h4>
http://youtu.be/A8ES02LkPuA

<iframe width="853" height="480" src="//www.youtube.com/embed/A8ES02LkPuA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟1</b>
http://youtu.be/w6Xx2tXBSNw

<iframe width="853" height="480" src="//www.youtube.com/embed/w6Xx2tXBSNw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟2 body背景圖片設定</b>
http://youtu.be/BiPm7V8Pd5M

<iframe width="853" height="480" src="//www.youtube.com/embed/BiPm7V8Pd5M?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟3 CSS修改設定</b>
http://youtu.be/m7uZAHwLX1g

<iframe width="853" height="480" src="//www.youtube.com/embed/m7uZAHwLX1g?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h2>首頁範例製作步驟</h2>
可使用dreamweaver或線上語法撰寫網頁：http://codepen.io/pen 來製作

<h3>HTML語法</h3>
<xmp>
<!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">
<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">
<div id="main" class="clearfix">
<p class="photo"><img src="images/main.jpg" width="300" height="200" alt="首頁主視覺照片" /></p>
<h2>HTML5與CSS3</h2>
<p class="text">HTML5/CSS3在2009年開始引發討論，並且在2010年開始至今年產出了非常多極具實用性的文獻及週邊應用。除了新標籤的使用方式外，最令人關心的應該還是老舊瀏覽器的支援度問題。</p>
</div>

<div class="data_box">
<h3>課程公告</h3>
<dl>
<dt>2014年2月18日</dt>
<dd>第一週，課程介紹與基礎網頁複習。</dd>
<dt>2014年3月4日</dt>
<dd>網頁架構製作網頁設計的美學原則。</dd>
<dt>2014年3月11日</dt>
<dd>優秀網站蒐集與分析/CSS3語法實作與綜合練習。</dd>
<dt>2014年3月25日</dt>
<dd>jQuery Mobile：專業的使用者介面。</dd>
<dt>2014年4月22日</dt>
<dd><a href="link.html">外部連結</a>業師協同教學--HTML5 CSS3。</dd>
<dt>2014年5月23日</dt>
<dd>業師協同教學--互動式網頁實務技術。</dd>
</dl>
</div>

<ul id="pickup" class="clearfix">
<li class="first">
<h3><a href="about.html">課程簡介</a></h3>
<p class="text">講述本門課的注意事項<br />
及終極目的</p>

<li>
<h3><a href="profile.html">範例簡介</a></h3>
<p class="text">將進階網頁設計<br />
的講義整理於此。</p>
</li>

<li class="first">
<h3><a href="works.html">作業分享</a></h3>
<p class="text">將同學們的做份<br />
分享於此。</p>
</li>

<li>
<h3><a href="link.html">外部連結</a></h3>
<p class="text">網頁設計相關教學網站、<br />
與優良範例連結。</p>
</li>

</ul>
</div>

<div id="footer">
<!-- 版權聲明 -->
<address>&copy; 2014 China University of Technology. All rights reserved.</address>
</div>
</body>
</html></xmp>

[hr]
<h3>CSS語法</h3>
請見 http://mepopedia.com/~jinjin/web/hw04a/hw03-css.txt

[hr]
<h2>Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)</h2>
http://mepopedia.com/forum/read.php?844,17480

[hr]

<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl></xmp>

<dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl>
Changed By: JinJin
Change Date: March 26, 2015 02:57PM

[講義] HTML與CSS練習--首頁實作篇
<h2>範例說明</h2>
http://mepopedia.com/~web102-c/hw03/hw03/

本範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站

可參考http://www.css3maker.com/
適當加入CSS3效果

[hr]
<<0326上課影音>>
<<20150326上課影音>>

<b>[HTML與CSS練習]-- 首頁實作篇</b>


https://youtu.be/MSgUbEA1xYY

<iframe width="853" height="480" src="https://www.youtube.com/embed/MSgUbEA1xYY?rel=0" frameborder="0" allowfullscreen></if[hr]

<h3>3/25上課影音</h4>
https://youtu.be/MSgUbEA1xYY

<iframe width="853" height="480" src="https://www.youtube.com/embed/MSgUbEA1xYY?rel=0" frameborder="0" allowfullscreen></iframe>
上課影音</h4>
http://youtu.be/A8ES02LkPuA

<iframe width="853" height="480" src="//www.youtube.com/embed/A8ES02LkPuA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟1</b>
http://youtu.be/w6Xx2tXBSNw

<iframe width="853" height="480" src="//www.youtube.com/embed/w6Xx2tXBSNw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟2 body背景圖片設定</b>
http://youtu.be/BiPm7V8Pd5M

<iframe width="853" height="480" src="//www.youtube.com/embed/BiPm7V8Pd5M?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟3 CSS修改設定</b>
http://youtu.be/m7uZAHwLX1g

<iframe width="853" height="480" src="//www.youtube.com/embed/m7uZAHwLX1g?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h2>首頁範例製作步驟</h2>
可使用dreamweaver或線上語法撰寫網頁：http://codepen.io/pen 來製作

<h3>HTML語法</h3>
<xmp>
<!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">
<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">
<div id="main" class="clearfix">
<p class="photo"><img src="images/main.jpg" width="300" height="200" alt="首頁主視覺照片" /></p>
<h2>HTML5與CSS3</h2>
<p class="text">HTML5/CSS3在2009年開始引發討論，並且在2010年開始至今年產出了非常多極具實用性的文獻及週邊應用。除了新標籤的使用方式外，最令人關心的應該還是老舊瀏覽器的支援度問題。</p>
</div>

<div class="data_box">
<h3>課程公告</h3>
<dl>
<dt>2014年2月18日</dt>
<dd>第一週，課程介紹與基礎網頁複習。</dd>
<dt>2014年3月4日</dt>
<dd>網頁架構製作網頁設計的美學原則。</dd>
<dt>2014年3月11日</dt>
<dd>優秀網站蒐集與分析/CSS3語法實作與綜合練習。</dd>
<dt>2014年3月25日</dt>
<dd>jQuery Mobile：專業的使用者介面。</dd>
<dt>2014年4月22日</dt>
<dd><a href="link.html">外部連結</a>業師協同教學--HTML5 CSS3。</dd>
<dt>2014年5月23日</dt>
<dd>業師協同教學--互動式網頁實務技術。</dd>
</dl>
</div>

<ul id="pickup" class="clearfix">
<li class="first">
<h3><a href="about.html">課程簡介</a></h3>
<p class="text">講述本門課的注意事項<br />
及終極目的</p>

<li>
<h3><a href="profile.html">範例簡介</a></h3>
<p class="text">將進階網頁設計<br />
的講義整理於此。</p>
</li>

<li class="first">
<h3><a href="works.html">作業分享</a></h3>
<p class="text">將同學們的做份<br />
分享於此。</p>
</li>

<li>
<h3><a href="link.html">外部連結</a></h3>
<p class="text">網頁設計相關教學網站、<br />
與優良範例連結。</p>
</li>

</ul>
</div>

<div id="footer">
<!-- 版權聲明 -->
<address>&copy; 2014 China University of Technology. All rights reserved.</address>
</div>
</body>
</html></xmp>

[hr]
<h3>CSS語法</h3>
請見 http://mepopedia.com/~jinjin/web/hw04a/hw03-css.txt

[hr]
<h2>Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)</h2>
http://mepopedia.com/forum/read.php?844,17480

[hr]

<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl></xmp>

<dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl>
Changed By: JinJin
Change Date: March 26, 2015 02:56PM

[講義] HTML與CSS練習--首頁實作篇
<h2>範例說明</h2>
http://mepopedia.com/~web102-c/hw03/hw03/

本範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站

可參考http://www.css3maker.com/
適當加入CSS3效果

[hr]
<<0326上課影音>>
<[HTML與CSS練習]-- 首頁實作篇
<20150326上課影音>>

<b>[HTML與CSS練習]-- 首頁實作篇</b>


https://youtu.be/MSgUbEA1xYY

<iframe width="853" height="480" src="https://www.youtube.com/embed/MSgUbEA1xYY?rel=0" frameborder="0" allowfullscreen></if[hr]

<h3>3/25上課影音</h4>
https://youtu.be/MSgUbEA1xYY

<iframe width="853" height="480" src="https://www.youtube.com/embed/MSgUbEA1xYY?rel=0" frameborder="0" allowfullscreen></iframe>
上課影音</h4>
http://youtu.be/A8ES02LkPuA

<iframe width="853" height="480" src="//www.youtube.com/embed/A8ES02LkPuA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟1</b>
http://youtu.be/w6Xx2tXBSNw

<iframe width="853" height="480" src="//www.youtube.com/embed/w6Xx2tXBSNw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟2 body背景圖片設定</b>
http://youtu.be/BiPm7V8Pd5M

<iframe width="853" height="480" src="//www.youtube.com/embed/BiPm7V8Pd5M?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟3 CSS修改設定</b>
http://youtu.be/m7uZAHwLX1g

<iframe width="853" height="480" src="//www.youtube.com/embed/m7uZAHwLX1g?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h2>首頁範例製作步驟</h2>
可使用dreamweaver或線上語法撰寫網頁：http://codepen.io/pen 來製作

<h3>HTML語法</h3>
<xmp>
<!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">
<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">
<div id="main" class="clearfix">
<p class="photo"><img src="images/main.jpg" width="300" height="200" alt="首頁主視覺照片" /></p>
<h2>HTML5與CSS3</h2>
<p class="text">HTML5/CSS3在2009年開始引發討論，並且在2010年開始至今年產出了非常多極具實用性的文獻及週邊應用。除了新標籤的使用方式外，最令人關心的應該還是老舊瀏覽器的支援度問題。</p>
</div>

<div class="data_box">
<h3>課程公告</h3>
<dl>
<dt>2014年2月18日</dt>
<dd>第一週，課程介紹與基礎網頁複習。</dd>
<dt>2014年3月4日</dt>
<dd>網頁架構製作網頁設計的美學原則。</dd>
<dt>2014年3月11日</dt>
<dd>優秀網站蒐集與分析/CSS3語法實作與綜合練習。</dd>
<dt>2014年3月25日</dt>
<dd>jQuery Mobile：專業的使用者介面。</dd>
<dt>2014年4月22日</dt>
<dd><a href="link.html">外部連結</a>業師協同教學--HTML5 CSS3。</dd>
<dt>2014年5月23日</dt>
<dd>業師協同教學--互動式網頁實務技術。</dd>
</dl>
</div>

<ul id="pickup" class="clearfix">
<li class="first">
<h3><a href="about.html">課程簡介</a></h3>
<p class="text">講述本門課的注意事項<br />
及終極目的</p>

<li>
<h3><a href="profile.html">範例簡介</a></h3>
<p class="text">將進階網頁設計<br />
的講義整理於此。</p>
</li>

<li class="first">
<h3><a href="works.html">作業分享</a></h3>
<p class="text">將同學們的做份<br />
分享於此。</p>
</li>

<li>
<h3><a href="link.html">外部連結</a></h3>
<p class="text">網頁設計相關教學網站、<br />
與優良範例連結。</p>
</li>

</ul>
</div>

<div id="footer">
<!-- 版權聲明 -->
<address>&copy; 2014 China University of Technology. All rights reserved.</address>
</div>
</body>
</html></xmp>

[hr]
<h3>CSS語法</h3>
請見 http://mepopedia.com/~jinjin/web/hw04a/hw03-css.txt

[hr]
<h2>Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)</h2>
http://mepopedia.com/forum/read.php?844,17480

[hr]

<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl></xmp>

<dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl>
Changed By: JinJin
Change Date: March 26, 2015 02:56PM

[講義] HTML與CSS練習--首頁實作篇
Changed By: JinJin
Change Date: March 26, 2015 09:14AM

[講義] HTML與CSS練習--首頁實作篇
Changed By: JinJin
Change Date: March 18, 2015 10:53AM

[講義] HTML與CSS練習--首頁實作篇
Changed By: JinJin
Change Date: March 31, 2014 10:37PM

[講義] HTML與CSS練習--首頁實作篇
Changed By: JinJin
Change Date: March 31, 2014 10:36PM

[講義] HTML與CSS練習--首頁實作篇
Changed By: JinJin
Change Date: March 28, 2014 01:59PM

[講義] HTML與CSS練習--首頁實作篇
Changed By: JinJin
Change Date: March 28, 2014 01:59PM

[講義] HTML與CSS練習--首頁實作篇
<h2>範例說明</h2>
http://mepopedia.com/~web102-c/hw03/hw03/

本範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站

http://youtu.be/A8ES02LkPuA

<iframe width="853" height="480" src="//www.youtube.com/embed/A8ES02LkPuA?rel=0" frameborder="0" allowfullscreen></iframe>
com/embed/w6Xx2tXBSNw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
HTML與CSS練習 首頁實作篇 步驟2 body背景圖片設定
http://youtu.be/BiPm7V8Pd5M

<iframe width="853" height="480" src="//www.youtube.com/embed/BiPm7V8Pd5M?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
HTML與CSS練習 首頁實作篇 步驟3 CSS修改設定
http://youtu.be/m7uZAHwLX1g

<iframe width="853" height="480" src="//www.youtube.com/embed/m7uZAHwLX1g?rel=0" frameborder="0" allowfullscreen></iframe>
="480" src="hCSS修改設定
ttps://www.youtube.com/embed/MSgUbEA1xYY?rel=0" frameborder="0" allowfullscreen></iframe>
上課影音</h4>
http://youtu.be/A8ES02LkPuA

<iframe width="853" height="480" src="//www.youtube.com/embed/A8ES02LkPuA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟1</b>
http://youtu.be/w6Xx2tXBSNw

<iframe width="853" height="480" src="//www.youtube.com/embed/w6Xx2tXBSNw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟2 body背景圖片設定</b>
http://youtu.be/BiPm7V8Pd5M

<iframe width="853" height="480" src="//www.youtube.com/embed/BiPm7V8Pd5M?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟3 CSS修改設定</b>
http://youtu.be/m7uZAHwLX1g

<iframe width="853" height="480" src="//www.youtube.com/embed/m7uZAHwLX1g?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h2>首頁範例製作步驟</h2>
可使用dreamweaver或線上語法撰寫網頁：http://codepen.io/pen 來製作

<h3>HTML語法</h3>
<xmp>
<!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">
<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">
<div id="main" class="clearfix">
<p class="photo"><img src="images/main.jpg" width="300" height="200" alt="首頁主視覺照片" /></p>
<h2>HTML5與CSS3</h2>
<p class="text">HTML5/CSS3在2009年開始引發討論，並且在2010年開始至今年產出了非常多極具實用性的文獻及週邊應用。除了新標籤的使用方式外，最令人關心的應該還是老舊瀏覽器的支援度問題。</p>
</div>

<div class="data_box">
<h3>課程公告</h3>
<dl>
<dt>2014年2月18日</dt>
<dd>第一週，課程介紹與基礎網頁複習。</dd>
<dt>2014年3月4日</dt>
<dd>網頁架構製作網頁設計的美學原則。</dd>
<dt>2014年3月11日</dt>
<dd>優秀網站蒐集與分析/CSS3語法實作與綜合練習。</dd>
<dt>2014年3月25日</dt>
<dd>jQuery Mobile：專業的使用者介面。</dd>
<dt>2014年4月22日</dt>
<dd><a href="link.html">外部連結</a>業師協同教學--HTML5 CSS3。</dd>
<dt>2014年5月23日</dt>
<dd>業師協同教學--互動式網頁實務技術。</dd>
</dl>
</div>

<ul id="pickup" class="clearfix">
<li class="first">
<h3><a href="about.html">課程簡介</a></h3>
<p class="text">講述本門課的注意事項<br />
及終極目的</p>

<li>
<h3><a href="profile.html">範例簡介</a></h3>
<p class="text">將進階網頁設計<br />
的講義整理於此。</p>
請見 http://mepopedia.com/~web102-c/hw03/hw03/hw03-css.txt

[hr]
<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
om/~jinjin/hw04a/hw03-css.txt

[hr]
<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
<h3><a href="w<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
>
<p class="text">將同學們的做份<br />
分享於此。</p>
</li>

<li>
<h3><a href="link.html">外部連結</a></h3>
<p class="text">網頁設計相關教學網站、<br />
與優良範例連結。</p>
</li>

</ul>
</div>

<div id="footer">
<!-- 版權聲明 -->
<address>&copy; 2014 China University of Technology. All rights reserved.</address>
</div>
</body>
</html></xmp>

[hr]
<h3>CSS語法</h3>
請見 http://mepopedia.com/~jinjin/web/hw04a/hw03-css.txt

[hr]
<h2>Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)</h2>
http://mepopedia.com/forum/read.php?844,17480

[hr]

<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl></xmp>

<dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl>
Changed By: JinJin
Change Date: March 24, 2014 11:02PM

[講義] HTML與CSS練習--首頁實作篇
<h2>範例說明</h2>
http://mepopedia.com/~web102-c/hw03/hw03/

本範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站

http://youtu.be/A8ES02LkPuA

e>
rame width="853" height="480" src="//www.youtube.com/embed/A8ES02LkPuA?rel=0" frameborder="0" allowfullscreen></iframe>
="480" src="hCSS修改設定
ttps://www.youtube.com/embed/MSgUbEA1xYY?rel=0" frameborder="0" allowfullscreen></iframe>
上課影音</h4>
http://youtu.be/A8ES02LkPuA

<iframe width="853" height="480" src="//www.youtube.com/embed/A8ES02LkPuA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟1</b>
http://youtu.be/w6Xx2tXBSNw

<iframe width="853" height="480" src="//www.youtube.com/embed/w6Xx2tXBSNw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟2 body背景圖片設定</b>
http://youtu.be/BiPm7V8Pd5M

<iframe width="853" height="480" src="//www.youtube.com/embed/BiPm7V8Pd5M?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟3 CSS修改設定</b>
http://youtu.be/m7uZAHwLX1g

<iframe width="853" height="480" src="//www.youtube.com/embed/m7uZAHwLX1g?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h2>首頁範例製作步驟</h2>
可使用dreamweaver或線上語法撰寫網頁：http://codepen.io/pen 來製作

<h3>HTML語法</h3>
<xmp>
<!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">
<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">
<div id="main" class="clearfix">
<p class="photo"><img src="images/main.jpg" width="300" height="200" alt="首頁主視覺照片" /></p>
<h2>HTML5與CSS3</h2>
<p class="text">HTML5/CSS3在2009年開始引發討論，並且在2010年開始至今年產出了非常多極具實用性的文獻及週邊應用。除了新標籤的使用方式外，最令人關心的應該還是老舊瀏覽器的支援度問題。</p>
</div>

<div class="data_box">
<h3>課程公告</h3>
<dl>
<dt>2014年2月18日</dt>
<dd>第一週，課程介紹與基礎網頁複習。</dd>
<dt>2014年3月4日</dt>
<dd>網頁架構製作網頁設計的美學原則。</dd>
<dt>2014年3月11日</dt>
<dd>優秀網站蒐集與分析/CSS3語法實作與綜合練習。</dd>
<dt>2014年3月25日</dt>
<dd>jQuery Mobile：專業的使用者介面。</dd>
<dt>2014年4月22日</dt>
<dd><a href="link.html">外部連結</a>業師協同教學--HTML5 CSS3。</dd>
<dt>2014年5月23日</dt>
<dd>業師協同教學--互動式網頁實務技術。</dd>
</dl>
</div>

<ul id="pickup" class="clearfix">
<li class="first">
<h3><a href="about.html">課程簡介</a></h3>
<p class="text">講述本門課的注意事項<br />
及終極目的</p>

<li>
<h3><a href="profile.html">範例簡介</a></h3>
<p class="text">將進階網頁設計<br />
的講義整理於此。</p>
請見 http://mepopedia.com/~web102-c/hw03/hw03/hw03-css.txt

[hr]
<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
om/~jinjin/hw04a/hw03-css.txt

[hr]
<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
<h3><a href="w<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
>
<p class="text">將同學們的做份<br />
分享於此。</p>
</li>

<li>
<h3><a href="link.html">外部連結</a></h3>
<p class="text">網頁設計相關教學網站、<br />
與優良範例連結。</p>
</li>

</ul>
</div>

<div id="footer">
<!-- 版權聲明 -->
<address>&copy; 2014 China University of Technology. All rights reserved.</address>
</div>
</body>
</html></xmp>

[hr]
<h3>CSS語法</h3>
請見 http://mepopedia.com/~jinjin/web/hw04a/hw03-css.txt

[hr]
<h2>Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)</h2>
http://mepopedia.com/forum/read.php?844,17480

[hr]

<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl></xmp>

<dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl>
Changed By: JinJin
Change Date: March 24, 2014 11:01PM

[講義] HTML與CSS練習--首頁實作篇
<h2>範例說明</h2>
http://mepopedia.com/~web102-c/hw03/hw03/

本範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站
<h2>範例說明</h2>
http://mepopedia.com/~web102-c/hw03/hw03/

本範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站

http://youtu.be/A8ES02LkPuA

rame width="853" height="480" src="//www.youtube.com/embed/A8ES02LkPuA?rel=0" frameborder="0" allowfullscreen></iframe>
="480" src="hCSS修改設定
ttps://www.youtube.com/embed/MSgUbEA1xYY?rel=0" frameborder="0" allowfullscreen></iframe>
上課影音</h4>
http://youtu.be/A8ES02LkPuA

<iframe width="853" height="480" src="//www.youtube.com/embed/A8ES02LkPuA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟1</b>
http://youtu.be/w6Xx2tXBSNw

<iframe width="853" height="480" src="//www.youtube.com/embed/w6Xx2tXBSNw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟2 body背景圖片設定</b>
http://youtu.be/BiPm7V8Pd5M

<iframe width="853" height="480" src="//www.youtube.com/embed/BiPm7V8Pd5M?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟3 CSS修改設定</b>
http://youtu.be/m7uZAHwLX1g

<iframe width="853" height="480" src="//www.youtube.com/embed/m7uZAHwLX1g?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h2>首頁範例製作步驟</h2>
可使用dreamweaver或線上語法撰寫網頁：http://codepen.io/pen 來製作

<h3>HTML語法</h3>
<xmp>
<!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">
<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">
<div id="main" class="clearfix">
<p class="photo"><img src="images/main.jpg" width="300" height="200" alt="首頁主視覺照片" /></p>
<h2>HTML5與CSS3</h2>
<p class="text">HTML5/CSS3在2009年開始引發討論，並且在2010年開始至今年產出了非常多極具實用性的文獻及週邊應用。除了新標籤的使用方式外，最令人關心的應該還是老舊瀏覽器的支援度問題。</p>
</div>

<div class="data_box">
<h3>課程公告</h3>
<dl>
<dt>2014年2月18日</dt>
<dd>第一週，課程介紹與基礎網頁複習。</dd>
<dt>2014年3月4日</dt>
<dd>網頁架構製作網頁設計的美學原則。</dd>
<dt>2014年3月11日</dt>
<dd>優秀網站蒐集與分析/CSS3語法實作與綜合練習。</dd>
<dt>2014年3月25日</dt>
<dd>jQuery Mobile：專業的使用者介面。</dd>
<dt>2014年4月22日</dt>
<dd><a href="link.html">外部連結</a>業師協同教學--HTML5 CSS3。</dd>
<dt>2014年5月23日</dt>
<dd>業師協同教學--互動式網頁實務技術。</dd>
</dl>
</div>

<ul id="pickup" class="clearfix">
<li class="first">
<h3><a href="about.html">課程簡介</a></h3>
<p class="text">講述本門課的注意事項<br />
及終極目的</p>

<li>
<h3><a href="profile.html">範例簡介</a></h3>
<p class="text">將進階網頁設計<br />
的講義整理於此。</p>
請見 http://mepopedia.com/~web102-c/hw03/hw03/hw03-css.txt

[hr]
<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>

[hr]

<h2></h2><li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
om/~jinjin/hw04a/hw03-css.txt

[hr]
<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
<h3><a href="w<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
>
<p class="text">將同學們的做份<br />
分享於此。</p>
</li>

<li>
<h3><a href="link.html">外部連結</a></h3>
<p class="text">網頁設計相關教學網站、<br />
與優良範例連結。</p>
</li>

</ul>
</div>

<div id="footer">
<!-- 版權聲明 -->
<address>&copy; 2014 China University of Technology. All rights reserved.</address>
</div>
</body>
</html></xmp>

[hr]
<h3>CSS語法</h3>
請見 http://mepopedia.com/~jinjin/web/hw04a/hw03-css.txt

[hr]
<h2>Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)</h2>
http://mepopedia.com/forum/read.php?844,17480

[hr]

<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl></xmp>

<dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl>
Changed By: JinJin
Change Date: March 24, 2014 10:36PM

[講義] HTML與CSS練習--首頁實作篇
<h2>範例說明</h2>
http://mepopedia.com/~web102-c/hw03/hw03/

本範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站
<h2>範例說明</h2>
http://mepopedia.com/~web102-c/hw03/hw03/

本範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站

http://youtu.be/A8ES02LkPuA

rame width="853" height="480" src="//www.youtube.com/embed/A8ES02LkPuA?rel=0" frameborder="0" allowfullscreen></iframe>
="480" src="hCSS修改設定
ttps://www.youtube.com/embed/MSgUbEA1xYY?rel=0" frameborder="0" allowfullscreen></iframe>
上課影音</h4>
http://youtu.be/A8ES02LkPuA

<iframe width="853" height="480" src="//www.youtube.com/embed/A8ES02LkPuA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟1</b>
http://youtu.be/w6Xx2tXBSNw

<iframe width="853" height="480" src="//www.youtube.com/embed/w6Xx2tXBSNw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟2 body背景圖片設定</b>
http://youtu.be/BiPm7V8Pd5M

<iframe width="853" height="480" src="//www.youtube.com/embed/BiPm7V8Pd5M?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟3 CSS修改設定</b>
http://youtu.be/m7uZAHwLX1g

<iframe width="853" height="480" src="//www.youtube.com/embed/m7uZAHwLX1g?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h2>首頁範例製作步驟</h2>
可使用dreamweaver或線上語法撰寫網頁：http://codepen.io/pen 來製作

<h3>HTML語法</h3>
<xmp>
<!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">
<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">
<div id="main" class="clearfix">
<p class="photo"><img src="images/main.jpg" width="300" height="200" alt="首頁主視覺照片" /></p>
<h2>HTML5與CSS3</h2>
<p class="text">HTML5/CSS3在2009年開始引發討論，並且在2010年開始至今年產出了非常多極具實用性的文獻及週邊應用。除了新標籤的使用方式外，最令人關心的應該還是老舊瀏覽器的支援度問題。</p>
</div>

<div class="data_box">
<h3>課程公告</h3>
<dl>
<dt>2014年2月18日</dt>
<dd>第一週，課程介紹與基礎網頁複習。</dd>
<dt>2014年3月4日</dt>
<dd>網頁架構製作網頁設計的美學原則。</dd>
<dt>2014年3月11日</dt>
<dd>優秀網站蒐集與分析/CSS3語法實作與綜合練習。</dd>
<dt>2014年3月25日</dt>
<dd>jQuery Mobile：專業的使用者介面。</dd>
<dt>2014年4月22日</dt>
<dd><a href="link.html">外部連結</a>業師協同教學--HTML5 CSS3。</dd>
<dt>2014年5月23日</dt>
<dd>業師協同教學--互動式網頁實務技術。</dd>
</dl>
</div>

<ul id="pickup" class="clearfix">
<li class="first">
<h3><a href="about.html">課程簡介</a></h3>
<p class="text">講述本門課的注意事項<br />
及終極目的</p>

<li>
<h3><a href="profile.html">範例簡介</a></h3>
<p class="text">將進階網頁設計<br />
的講義整理於此。</p>
請見 http://mepopedia.com/~web102-c/hw03/hw03/hw03-css.txt

[hr]
<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>

[hr]

<h2></h2>
[hr]

<h2></h2><li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
om/~jinjin/hw04a/hw03-css.txt

[hr]
<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
<h3><a href="w<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
>
<p class="text">將同學們的做份<br />
分享於此。</p>
</li>

<li>
<h3><a href="link.html">外部連結</a></h3>
<p class="text">網頁設計相關教學網站、<br />
與優良範例連結。</p>
</li>

</ul>
</div>

<div id="footer">
<!-- 版權聲明 -->
<address>&copy; 2014 China University of Technology. All rights reserved.</address>
</div>
</body>
</html></xmp>

[hr]
<h3>CSS語法</h3>
請見 http://mepopedia.com/~jinjin/web/hw04a/hw03-css.txt

[hr]
<h2>Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)</h2>
http://mepopedia.com/forum/read.php?844,17480

[hr]

<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl></xmp>

<dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl>
Changed By: JinJin
Change Date: March 24, 2014 07:14PM

[講義] HTML與CSS練習--首頁實作篇
<h2>範例說明</h2>
http://mepopedia.com/~web102-c/hw03/hw03/

本範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站
<h2>範例說明</h2>
http://mepopedia.com/~web102-c/hw03/hw03/

本範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站
<h2>範例說明</h2>
http://mepopedia.com/~web102-c/hw03/hw03/

本範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站

http://youtu.be/A8ES02LkPuA

rame width="853" height="480" src="//www.youtube.com/embed/A8ES02LkPuA?rel=0" frameborder="0" allowfullscreen></iframe>
="480" src="hCSS修改設定
ttps://www.youtube.com/embed/MSgUbEA1xYY?rel=0" frameborder="0" allowfullscreen></iframe>
上課影音</h4>
http://youtu.be/A8ES02LkPuA

<iframe width="853" height="480" src="//www.youtube.com/embed/A8ES02LkPuA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟1</b>
http://youtu.be/w6Xx2tXBSNw

<iframe width="853" height="480" src="//www.youtube.com/embed/w6Xx2tXBSNw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟2 body背景圖片設定</b>
http://youtu.be/BiPm7V8Pd5M

<iframe width="853" height="480" src="//www.youtube.com/embed/BiPm7V8Pd5M?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟3 CSS修改設定</b>
http://youtu.be/m7uZAHwLX1g

<iframe width="853" height="480" src="//www.youtube.com/embed/m7uZAHwLX1g?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h2>首頁範例製作步驟</h2>
可使用dreamweaver或線上語法撰寫網頁：http://codepen.io/pen 來製作

<h3>HTML語法</h3>
<xmp>
<!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">
<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">
<div id="main" class="clearfix">
<p class="photo"><img src="images/main.jpg" width="300" height="200" alt="首頁主視覺照片" /></p>
<h2>HTML5與CSS3</h2>
<p class="text">HTML5/CSS3在2009年開始引發討論，並且在2010年開始至今年產出了非常多極具實用性的文獻及週邊應用。除了新標籤的使用方式外，最令人關心的應該還是老舊瀏覽器的支援度問題。</p>
</div>

<div class="data_box">
<h3>課程公告</h3>
<dl>
<dt>2014年2月18日</dt>
<dd>第一週，課程介紹與基礎網頁複習。</dd>
<dt>2014年3月4日</dt>
<dd>網頁架構製作網頁設計的美學原則。</dd>
<dt>2014年3月11日</dt>
<dd>優秀網站蒐集與分析/CSS3語法實作與綜合練習。</dd>
<dt>2014年3月25日</dt>
<dd>jQuery Mobile：專業的使用者介面。</dd>
<dt>2014年4月22日</dt>
<dd><a href="link.html">外部連結</a>業師協同教學--HTML5 CSS3。</dd>
<dt>2014年5月23日</dt>
<dd>業師協同教學--互動式網頁實務技術。</dd>
</dl>
</div>

<ul id="pickup" class="clearfix">
<li class="first">
<h3><a href="about.html">課程簡介</a></h3>
<p class="text">講述本門課的注意事項<br />
及終極目的</p>

<li>
<h3><a href="profile.html">範例簡介</a></h3>
<p class="text">將進階網頁設計<br />
的講義整理於此。</p>
請見 http://mepopedia.com/~web102-c/hw03/hw03/hw03-css.txt

[hr]
<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>J
[hr]

<h2></h2>AVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>

[hr]

<h2></h2>
[hr]

<h2></h2><li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
om/~jinjin/hw04a/hw03-css.txt

[hr]
<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
<h3><a href="w<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
>
<p class="text">將同學們的做份<br />
分享於此。</p>
</li>

<li>
<h3><a href="link.html">外部連結</a></h3>
<p class="text">網頁設計相關教學網站、<br />
與優良範例連結。</p>
</li>

</ul>
</div>

<div id="footer">
<!-- 版權聲明 -->
<address>&copy; 2014 China University of Technology. All rights reserved.</address>
</div>
</body>
</html></xmp>

[hr]
<h3>CSS語法</h3>
請見 http://mepopedia.com/~jinjin/web/hw04a/hw03-css.txt

[hr]
<h2>Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)</h2>
http://mepopedia.com/forum/read.php?844,17480

[hr]

<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl></xmp>

<dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl>
Changed By: JinJin
Change Date: March 24, 2014 07:13PM

[講義] HTML與CSS練習--首頁實作篇
<h2>範例說明</h2>
http://mepopedia.com/~web102-c/hw03/hw03/

本範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站
er="0" allowfullscreen></iframe>
pedia.com/~web102-c/hw03/hw03/

本範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站
<h2>範例說明</h2>
http://mepopedia.com/~web102-c/hw03/hw03/

本範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站

http://youtu.be/A8ES02LkPuA

rame width="853" height="480" src="//www.youtube.com/embed/A8ES02LkPuA?rel=0" frameborder="0" allowfullscreen></iframe>
="480" src="hCSS修改設定
ttps://www.youtube.com/embed/MSgUbEA1xYY?rel=0" frameborder="0" allowfullscreen></iframe>
上課影音</h4>
http://youtu.be/A8ES02LkPuA

<iframe width="853" height="480" src="//www.youtube.com/embed/A8ES02LkPuA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟1</b>
http://youtu.be/w6Xx2tXBSNw

<iframe width="853" height="480" src="//www.youtube.com/embed/w6Xx2tXBSNw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟2 body背景圖片設定</b>
http://youtu.be/BiPm7V8Pd5M

<iframe width="853" height="480" src="//www.youtube.com/embed/BiPm7V8Pd5M?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>HTML與CSS練習 首頁實作篇 步驟3 CSS修改設定</b>
http://youtu.be/m7uZAHwLX1g

<iframe width="853" height="480" src="//www.youtube.com/embed/m7uZAHwLX1g?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h2>首頁範例製作步驟</h2>
可使用dreamweaver或線上語法撰寫網頁：http://codepen.io/pen 來製作

<h3>HTML語法</h3>
<xmp>
<!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">
<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">
<div id="main" class="clearfix">
<p class="photo"><img src="images/main.jpg" width="300" height="200" alt="首頁主視覺照片" /></p>
<h2>HTML5與CSS3</h2>
<p class="text">HTML5/CSS3在2009年開始引發討論，並且在2010年開始至今年產出了非常多極具實用性的文獻及週邊應用。除了新標籤的使用方式外，最令人關心的應該還是老舊瀏覽器的支援度問題。</p>
</div>

<div class="data_box">
<h3>課程公告</h3>
<dl>
<dt>2014年2月18日</dt>
<dd>第一週，課程介紹與基礎網頁複習。</dd>
<dt>2014年3月4日</dt>
<dd>網頁架構製作網頁設計的美學原則。</dd>
<dt>2014年3月11日</dt>
<dd>優秀網站蒐集與分析/CSS3語法實作與綜合練習。</dd>
<dt>2014年3月25日</dt>
<dd>jQuery Mobile：專業的使用者介面。</dd>
<dt>2014年4月22日</dt>
<dd><a href="link.html">外部連結</a>業師協同教學--HTML5 CSS3。</dd>
<dt>2014年5月23日</dt>
<dd>業師協同教學--互動式網頁實務技術。</dd>
</dl>
</div>

<ul id="pickup" class="clearfix">
<li class="first">
<h3><a href="about.html">課程簡介</a></h3>
<p class="text">講述本門課的注意事項<br />
及終極目的</p>

<li>
<h3><a href="profile.html">範例簡介</a></h3>
<p class="text">將進階網頁設計<br />
的講義整理於此。</p>
請見 http://mepopedia.com/~web102-c/hw03/hw03/hw03-css.txt

[hr]
<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>J
[hr]

<h2></h2>AVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>

[hr]

<h2></h2>
[hr]

<h2></h2><li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
om/~jinjin/hw04a/hw03-css.txt

[hr]
<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
<h3><a href="w<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
>
<p class="text">將同學們的做份<br />
分享於此。</p>
</li>

<li>
<h3><a href="link.html">外部連結</a></h3>
<p class="text">網頁設計相關教學網站、<br />
與優良範例連結。</p>
</li>

</ul>
</div>

<div id="footer">
<!-- 版權聲明 -->
<address>&copy; 2014 China University of Technology. All rights reserved.</address>
</div>
</body>
</html></xmp>

[hr]
<h3>CSS語法</h3>
請見 http://mepopedia.com/~jinjin/web/hw04a/hw03-css.txt

[hr]
<h2>Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)</h2>
http://mepopedia.com/forum/read.php?844,17480

[hr]

<h2>Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識</h2>
<h3>編號清單 ul、ol</h3>
ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<xmp><ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol></xmp>

<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ol>
範例程式 2 / 無編號的清單

<xmp><ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul></xmp>

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA Script</li>
</ul>※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]
<h3>區塊定義 dl、dt、dd</h3>
dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<xmp><dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl></xmp>

<dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl>
Changed By: JinJin
Change Date: March 24, 2014 01:18PM

[講義] HTML與CSS練習--首頁實作篇
Changed By: JinJin
Change Date: March 24, 2014 12:28PM

[講義] HTML與CSS練習--首頁實作篇
Changed By: JinJin
Change Date: March 24, 2014 12:27PM

[講義] HTML與CSS練習--首頁實作篇
Changed By: JinJin
Change Date: March 24, 2014 12:26PM

[講義] HTML與CSS練習--首頁實作篇
Changed By: JinJin
Change Date: March 24, 2014 12:26PM

[講義] HTML與CSS練習--首頁實作篇
Changed By: JinJin
Change Date: March 18, 2014 10:30AM

[講義] HTML與CSS練習--首頁實作篇
Changed By: JinJin
Change Date: March 18, 2014 10:30AM

[講義] HTML與CSS練習--首頁實作篇

Original Message

作者: JinJin
Date: March 18, 2014 07:28AM

[講義] HTML與CSS練習--首頁實作篇
與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站
範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站

範例說明


http://mepopedia.com/~web102-c/hw03/hw03/

本範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站

http://youtu.be/A8ES02LkPuA

rame width="853" height="480" src="//www.youtube.com/embed/A8ES02LkPuA?rel=0" frameborder="0" allowfullscreen>
="480" src="hCSS修改設定
ttps://www.youtube.com/embed/MSgUbEA1xYY?rel=0" frameborder="0" allowfullscreen>
上課影音
http://youtu.be/A8ES02LkPuA



[hr]
HTML與CSS練習 首頁實作篇 步驟1
http://youtu.be/w6Xx2tXBSNw



[hr]
HTML與CSS練習 首頁實作篇 步驟2 body背景圖片設定
http://youtu.be/BiPm7V8Pd5M



[hr]
HTML與CSS練習 首頁實作篇 步驟3 CSS修改設定
http://youtu.be/m7uZAHwLX1g



[hr]

首頁範例製作步驟


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

HTML語法


<br /> <!DOCTYPE html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br /> <title>進階網頁設計課程</title><br /> <link href="style.css" rel="stylesheet" type="text/css" /><br /> </head><br /> <br /> <body id="wrapper"><br /> <div id="header"><br /> <h1><a href="index.html">進階網頁設計課程</a></h1><br /> <p class="copy">China University of Technology </p><br /> <br /> <ul id="navi"><br /> <!-- 導覽列從此開始 --><br /> <li id="navi_01"><a href="index.html">首頁</a></li><br /> <li id="navi_02"><a href="about.html">課程簡介</a></li><br /> <li id="navi_03"><a href="profile.html">範例介紹</a></li><br /> <li id="navi_04"><a href="works.html">作業分享</a></li><br /> <li id="navi_05"><a href="link.html">外部連結</a></li><br /> <!-- 導覽列到此為止 --><br /> </ul><br /> <br /> </div><br /> <br /> <div id="contents"><br /> <div id="main" class="clearfix"><br /> <p class="photo"><img src="images/main.jpg" width="300" height="200" alt="首頁主視覺照片" /></p><br /> <h2>HTML5與CSS3</h2><br /> <p class="text">HTML5/CSS3在2009年開始引發討論，並且在2010年開始至今年產出了非常多極具實用性的文獻及週邊應用。除了新標籤的使用方式外，最令人關心的應該還是老舊瀏覽器的支援度問題。</p><br /> </div><br /> <br /> <div class="data_box"><br /> <h3>課程公告</h3><br /> <dl><br /> <dt>2014年2月18日</dt><br /> <dd>第一週，課程介紹與基礎網頁複習。</dd><br /> <dt>2014年3月4日</dt><br /> <dd>網頁架構<xmp><br /> <br />

[hr]

Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識


編號清單 ul、ol


ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<ol><br /> <li>HTML5</li><br /> <li>CSS3</li><br /> <li>JAVA Script</li><br /> </ol>


  1. HTML5

  2. CSS3

  3. JAVA Script


範例程式 2 / 無編號的清單

<ul><br /> <li>HTML5</li><br /> <li>CSS3</li><br /> <li>JAVA Script</li><br /> </ul>


  • HTML5

  • CSS3

  • JAVA Script

※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]

區塊定義 dl、dt、dd


dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
見

[hr]

Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識


編號清單 ul、ol


ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<ol><br /> <li>HTML5</li><br /> <li>CSS3</li><br /> <li>JAVA Script</li><br /> </ol>


  1. HTML5

  2. CSS3

  3. JAVA Script


範例程式 2 / 無編號的清單

<ul><br /> <li>HTML5</li><br /> <li>CSS3</li><br /> <li>JAVA Script</li><br /> </ul>


  • HTML5

  • CSS3

  • JAVA Script

※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]

區塊定義 dl、dt、dd


dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340
的美學原則。
2014年3月11日

優秀網站蒐集與分析/CSS3語法實作與綜合練習。

2014年3月25日

jQuery Mobile：專業的使用者介面。

2014年4月22日

外部連結業師協同教學--HTML5 CSS3。

2014年5月23日

業師協同教學--互動式網頁實務技術。