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

Advanced

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

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

1. 範例說明


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

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

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



<<20150326上課影音>>

[HTML與CSS練習]-- 首頁實作篇
https://youtu.be/MSgUbEA1xYY






3/25上課影音


http://youtu.be/A8ES02LkPuA





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





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





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





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"> <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>


2. CSS語法


請見 http://mepopedia.com/~jinjin/web/hw04a/hw03-css.txt



3. Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)


http://mepopedia.com/forum/read.php?844,17480




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


1. 編號清單 ul、ol


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

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

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

  1. HTML5

  2. CSS3

  3. JAVA Script


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

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

  • HTML5

  • CSS3

  • JAVA Script

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



2. 區塊定義 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

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

項目標題一

這裡是項目敘述一 ...

項目標題二

這裡是項目敘述二 ...





Edited 14 time(s). Last edit at 03/26/2015 02:58PM by JinJin.
(編輯記錄)

Attachments:
開啟 | 下載 - images.rar (8.1 KB)