[CSS] 各主流瀏覽器不相容情形之網頁實例整理: IE6、IE8、Firefox、Chrome (2011) (16 replies)

January 2, 2012, 5:31 am

≫ Next: [Blog] HomeWork 3 自選部落格樣式 (4 replies)

以下為實例整理之格式。

網頁：中國科技大學首頁

網址：http://www.cute.edu.tw/home_page.html

觀察時間：民國100年7月20日

觀察瀏覽器：IE6、IE8、Firefox5、Chrome12

原始碼：見附檔。

摘要
IE6、IE8正常。

Google Chrome：右欄中段之搜尋列高度過大。

Firefox：除右欄中段之搜尋列高度過大外，同區之功能欄(新竹校區、網站地圖等)有排版異常的情況。主要由於功能欄使用之底圖(background=" http://www.cute.edu.tw/images/home_page_18.jpg ")與文字不相匹配，產生重疊。以Firebug觀察後發現原因為多了上下margin各12px，這是由於 Firefox 會將 <p> 前後都加上和「一行文字」同高的 margin，而該<p>段落所指定的font-size就是12px(class="text3")。同時，經檢視文件後發現網頁並無宣告 DOCTYPE，因此被 Firefox 判斷為 Quirks Mode，此為網頁其他部份呈現異常之主因。

此網頁之語法使用為早期常見之設計方式：無任何DOCTYPE宣告，同時使用大量table作為排版及佈局。以Firefox中呈現異常的右側功能欄為例，就是在「第四層」table之中。此種大量而複雜地使用table的作法，不僅網頁維護困難，在開發時單在IE各版本瀏覽器上要求一致性就可能相常困難，更遑論在不同的瀏覽器間維持網頁的相容性。而缺少DOCTYPE的宣告讓網頁進入 Quirks Mode (暫翻作怪異模式)，更讓問題複雜化。另外，此頁在中欄的y方向(垂直方向)和/或x方向(不同瀏覽器效果不同)產生了不必要的 scroll bar，是在網頁語法使用上可以改進的部份。

IE6(效果和IE8類似)

Firefox

↧

[Blog] HomeWork 3 自選部落格樣式 (4 replies)

August 2, 2011, 12:03 am

≫ Next: [Forum] 論壇樣式初步修改--以全民國防教育暑期戰鬥營為例 (6 replies)

≪ Previous: [CSS] 各主流瀏覽器不相容情形之網頁實例整理: IE6、IE8、Firefox、Chrome (2011) (16 replies)

一.這週請自選一個部落格樣式修改

http://www.serendipity-templates.org/all-templates/screenshot/

修改完後請回復本篇文章
註明：

1.修改的樣式原名稱：
2.新命名：
3.風格：
4.使用族群：
5.色彩計畫：
(1)色調：
(2)主色系：
(3)輔助色系：
6.修改原樣式截圖：
7.修改後樣式截圖：

二.將前兩週的風格做修正，同樣附上前述說明

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

製作提示

1.在illustrator做的圖，到photoshop可以切得更精確

2.如果不確定要修改的CSS，請逐項修改看看，也可更深入了解其各項設定

3.每修改完一個項目，請上傳看效果，並註明修改項目與內容

4.請注意整體的色彩搭配與風格設定所要傳達的意象

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

截圖軟體
FastStone Capture 6.9

http://tw.myblog.yahoo.com/jen9945x/article?mid=11317

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

其他網頁樣式參考網站

http://www.freetemplatesonline.com/

http://www.templatesbox.com/templates.htm

http://www.freecsstemplates.org/

http://www.freewebtemplates.com/

http://www.freewebsitetemplates.com/

http://www.free-css-templates.com/

http://www.templateworld.com/free_templates.html

http://www.oswd.org/

http://www.templatemo.com/

http://www.templateyes.com/

http://www.zymic.com/free-templates/

http://andreasviklund.com/templates/

http://www.tan-studio.net/website-design-services/1012/

http://www.globaltemplates.com/free-website-templates

http://www.campaignmonitor.com/templates/

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

↧

[Forum] 論壇樣式初步修改--以全民國防教育暑期戰鬥營為例 (6 replies)

August 16, 2011, 11:15 am

≫ Next: [WEB] 優良設計網站蒐集與分析 (6 replies)

≪ Previous: [Blog] HomeWork 3 自選部落格樣式 (4 replies)

不同論壇樣式範例

全民國防教育暑期戰鬥營 http://www.mepopedia.com/forum/718
美寶莊園 http://mepopedia.com/forum/list.php?699

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

以全民國防教育暑期戰鬥營為例，需修改的部分

1. 修改 template 名稱（info.php）

　將第5行的 $name = 'emerald' 的 emerald 改為新的 template 名稱 (可以是中文名稱)

2. 風格顏色設定 (setting.tpl)

設定下列三個顏色變數後(可以將 #0079B7 改為要設定的顏色碼)，整個論壇的風格就會有很大的改變。

{VAR border_color "#0079B7"} (第54行)
{VAR link_color "#0079B7"} (第59行)
{VAR breadcrumb_border_color "#0079B7"} (第63行)

其他的顏色設定可自行嘗試。例如 link_hover_color 是滑鼠移到超連結文字上時出現的顏色。

3. 改變論壇 body 背景底圖樣式 (css.tpl)

將網頁中css 檔案中的body 樣式，直接複製至 css.tpl

如:原來

body {
background-color: {body_background_color};
}

複製後

body {
        background-color: {body_background_color};
        background-repeat: repeat-y;
        background-position: center top;
        background-image: url(imgs/body_bg_1.jpg);
}

url 改 background-image: url(http://camp.gpwb.gov.tw/imgs/body_bg_1.jpg);

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

4.
list.tpl (文章列表討論串只在一篇顯示)

list_threads.tpl(文章列表討論串分篇顯示)

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

5.文章標題欄 (table.list th)

把圖片顯示 // 註解，即無法顯示圖片

原來:

#phorum table.list th {
background-repeat: repeat-x;
background-image: url('{header_background_image}');
color: {border_font_color};
background-color: {border_color};
font-size: {font_small};
padding: 5px;
}

改

#phorum table.list th {
background-repeat: repeat-x;
//background-image: url('{header_background_image}');
color: {border_font_color};
background-color: {border_color};
font-size: {font_small};
padding: 5px;
}

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

6.改右上登入資訊，將之改為不顯示

header.tpl 在115行 <div id="user-info"> 前面加註解  <br> <br> ================================================================ <br> <br> 本次作業： <br> <br> 請將視覺專區 <a rel="nofollow" href="javascript:;" onclick="post_nav(sdl('aFu/n%mps2%riF2etmFs.e8epp0nho4tppL.?enrudTsriZsla2i=.mnhclgtoN.tmmcp%9o%2Am3FI/Afit%opr2r/', 77, 91, 4, 23), {su:window.location}, '_blank');">http://mepopedia.com/forum/804</a> <br> 修改成另一種風格</div>

↧

[WEB] 優良設計網站蒐集與分析 (6 replies)

August 29, 2011, 4:33 am

≫ Next: [WEB] PROFILE個人簡介頁面蒐集 (2 replies)

≪ Previous: [Forum] 論壇樣式初步修改--以全民國防教育暑期戰鬥營為例 (6 replies)

請蒐集設計優良的網站，列出網址與下列資訊，並分析其網站的優劣

範例：

基本資料
1.網址：http://www.apple.com/tw/
2.名稱：Apple台灣官方網站
3.類型：科技類商業網站
4.族群：年輕，追求時尚與科技感
5.網站性質：科技產品介紹與產品販售

分析

1.色系：以白色、灰色系、黑色為主調，輔助色為藍色

http://i556.photobucket.com/albums/ss1/whc915/apple-color.jpg

2.風格：科技與時尚感

一致的版面設計，用色與字型，可以立即感覺到網站經營的俐落風格

3.編排分析

採用的是，導覽列於上方的一目瞭然簡單俐落的編排方式
以產品名及重要選項列於上方便於點擊

下方是產品分類

主商品出現在產品分類下以大張照片瀏覽方式呈現

其後是以棋盤式的分割方式，將產品介紹與相關資訊分別呈現

分割的區塊以淺灰色為外框，並賦予些微陰影，使不同區塊形成不同的重點

4.字體

主標題：粗體黑色
內文：灰色
連結：淺藍色

形成一目了然的三個重點
統一的黑體字設計，形成一致的設計感

4.整體分析

去除多餘顏色與複雜編排的俐落風格
展現屬於現代科技的冷冽形象

因為APPLE是主流時尚品牌
所以簡潔的設計也可以成為時尚的典範

附圖

http://i556.photobucket.com/albums/ss1/whc915/apple-001-1.jpg

內政部機關網站評獎
www.moi.gov.tw/moisite/96/p5_4.asp

http://i556.photobucket.com/albums/ss1/whc915/apple-002-1.jpg

↧

[WEB] PROFILE個人簡介頁面蒐集 (2 replies)

August 15, 2011, 7:29 am

≫ Next: [HTML] HTML5 (1 reply)

≪ Previous: [WEB] 優良設計網站蒐集與分析 (6 replies)

請蒐集具設計感之PROFILE個人簡介頁面

越多越好，國內外皆可

可說明優點，也可以附上網址即可

如:

pixnet的不同類型:

http://www.cwyuni.tw/profile
http://mix78.pixnet.net/profile
http://raindog.pixnet.net/profile
http://www.giddens.tw/profile
http://lovetabris.pixnet.net/profile

↧

[HTML] HTML5 (1 reply)

August 28, 2011, 6:44 am

≫ Next: [CSS/HTC] 支援所有主流瀏覽器的「圓角/圓弧邊角」作法 (no replies)

≪ Previous: [WEB] PROFILE個人簡介頁面蒐集 (2 replies)

HTML5是HTML下一個的主要修訂版本，現在仍處於發展階段。

目標是取代1999年所定訂的HTML 4.01和XHTML 1.0 標準，以期能在網際網路應用迅速發展的時候，使網路標準達到符合當代的網路需求。

廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。

它希望能夠減少瀏覽器對於需要外掛程式的豐富性網路應用服務（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，與Oracle JavaFX的需求，並且提供更多能有效增強網路應用的標準集。

html5 相關網頁整理

HTML5維基百科 http://zh.wikipedia.org/wiki/HTML_5

HTML 5 教程 http://www.w3school.com.cn/html5/index.asp

OK Go x Pilobolus - "All Is Not Lost" 運用HTML5結合Chrome可做出自己專屬的MV
http://www.allisnotlo.st/videoend_ja.html?mid=zloemQjwYAp

HTML5 vs. Flash 誰主未來？ http://mag.udn.com/mag/digital/storypage.jsp?f_ART_ID=252703

HTML5、iPad、Flash，他們在吵什麼？http://www.techbang.com.tw/posts/2358-html5-ipad-flash-what-they-are-arguing

HTML 5 Demos and Examples http://html5demos.com/

什麼是 HTML 5 ? http://www.dns.com.tw/blog/2009/06/html-5.html

↧

[CSS/HTC] 支援所有主流瀏覽器的「圓角/圓弧邊角」作法 (no replies)

August 16, 2011, 8:52 am

≫ Next: [CSS] 支援所有主流瀏覽器的「三角」作法 (no replies)

≪ Previous: [HTML] HTML5 (1 reply)

.rounded-corners { -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Chrome */ -khtml-border-radius: 10px; /* Konqueror */ border-radius: 10px; /* Opera 10.50 and later (CSS3 standard) */ behavior: url(border-radius.htc); /* IE6, IE7, IE8 */ }
CSS behavior 檔下載：
http://mepopedia.com/files/border-radius/border-radius.htc

本文原始碼出處：http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

參考資料
對 border-radius 輔以圖文的詳盡介紹：http://www.css3.info/preview/rounded-border/
跨瀏覽器簡要介紹：http://graphicmaniacs.com/note/cross-browser-border-radius-solution-with-example/

↧

[CSS] 支援所有主流瀏覽器的「三角」作法 (no replies)

August 25, 2011, 6:01 am

≫ Next: [CSS/IE6] 跨瀏覽器：畫面動態調適視窗大小(max-width)同時讓背景圖片(backgroun-image)正常顯示的方法 (no replies)

≪ Previous: [CSS/HTC] 支援所有主流瀏覽器的「圓角/圓弧邊角」作法 (no replies)

跨瀏覽器相容之「三角形」語法（此語法在 IE6、IE8、Firefox5、Chrome12 中實測無誤）：

<div class="arrow-up"></div> <div class="arrow-down"></div> <div class="arrow-right"></div> <div class="arrow-left"></div> <style type="text/css"> .arrow-up { width:0px; height:0px; border:5px solid; border-color:transparent transparent black transparent;/ border-style:dashed dashed solid dashed; //向上三角形 } .arrow-down { width:0px; height:0px; border:20px solid; border-color:#f00 transparent transparent transparent;/ border-style:solid dashed dashed dashed; //向下三角形 } .arrow-right { width:0px; height:0px; border:60px solid; border-color:transparent transparent transparent green;/ border-style:dashed dashed dashed solid; //向右三角形 } .arrow-left { width:0px; height:0px; border:10px solid; border-color:transparent blue transparent transparent;/ border-style:dashed solid dashed dashed; //向左三角形 } </style>
範例效果：

向上三角形


向下三角形

向右三角形

向左三角形

參考網站:
http://www.36ria.com/demo/triangle/
http://cssshare.com/1/chun-csssan-jiao-xiao-guo-dai-ma

↧

[CSS/IE6] 跨瀏覽器：畫面動態調適視窗大小(max-width)同時讓背景圖片(backgroun-image)正常顯示的方法 (no replies)

September 1, 2011, 10:11 am

≫ Next: [基礎CSS] 用自定類別 (class) 設定超連結的屬性：a 要寫在 class 前面 (no replies)

≪ Previous: [CSS] 支援所有主流瀏覽器的「三角」作法 (no replies)

1. 情境說明

我們經常將網頁固定為某個寬度，例如：

#container{
width: 928px;
}

但這樣的設定在電腦的視窗變窄或者在行動裝置上時就會顯得太大，而可能難以閱讀。

例如以美寶莊園的地圖為例，在正常視窗大小時內容可完整呈現：

但寬度縮為 360px 時，內容變得不好理解而難以操作：

2. 改善方法：加入 max-width 及 _width (IE6) 的設定

在相關的 block 中設定 CSS，將寬度改為可動態調整：
#container{ max-midth: 928px; /* CSS 標準語法 */ _width:expression((documentElement.clientWidth >928) ? "928px" : "auto"); /* IE6 特有語法*/ margin: auto; /*此為「水平置中」的語法，若有需要可加上*/ }
調整後結果：

可以看到「美寶莊園地圖」和內容部份都能動態調整大小並置中。但美中不足的是美寶莊園的「頂圖」部份沒有辦法看到代表網站形象的「LOGO」。這個部份的解決辦法在下一步驟說明。

3. 改善頂圖 LOGO 的呈現：設定 background-position (CSS)

頂圖 LOGO 無法出現主因是背景圖片 (background-image) 一般是水平置左，而例子中的美寶莊園 LOGO 是位於頂圖的「右側」，所以無法呈現。

我們只要將頂圖的設定改為「置右」即可：
#header{ background-image: url(imgs/wiki_top.jpg); background-position: right top; } #header{ /* 簡寫 */ background: url(imgs/wiki_top.jpg) right top; }
修改後可見頂圖 LOGO 已成功呈現：

以上為美寶莊園地圖（與百科）為了「動態調適視窗大小」而作的一系列的改善步驟，希望對讀到這篇文章的人有所幫助！

參考資料：
1. ie6实现min-width/max-width http://blog.feshine.net/technology/367.html
2. Placing a CSS background image horizontally right on an h2 using a span element (2009)

↧

[基礎CSS] 用自定類別 (class) 設定超連結的屬性：a 要寫在 class 前面 (no replies)

September 7, 2011, 8:00 am

≫ Next: [網址] 台灣大專院校與政府機關網址 (no replies)

≪ Previous: [CSS/IE6] 跨瀏覽器：畫面動態調適視窗大小(max-width)同時讓背景圖片(backgroun-image)正常顯示的方法 (no replies)

其實要做的事很簡單，只是因為觀念不清楚，今天在改東西的時候超結設定一直出不來。後來發現原因，所以寫個文章記錄一下。

要設定某個類別（class）的文字顏色時，會以以下語法設定（這邊以 article 這個英文字作為自定類別名稱）：
.article{ color: white; } 上面的意思是類別 article 的文字顏色設為白色。

若要設定屬於類別 article 的超連結顏色，就要在 .article 前面加上 a。（要注意 article 前面要加 .）
a.article{ color: white; }
今天一直設不出來的原因是，我把 a.article 寫成 article.a（其實寫網頁寫這麼久了，還會有這種錯誤真是......）。

「a」寫在前面的原因是它是 HTML 內建的共用功能標籤，是比較「高位」的。而 aritlce 等類別只是我們自己定義的，目的只是「修飾」的屬性，所以要寫在 a 的後面。就好像說，「沒有國那裡會有家...」，要先有超連結的標籤 a，才會有超連結可以設定啊！

↧

[網址] 台灣大專院校與政府機關網址 (no replies)

September 15, 2011, 6:25 pm

≫ Next: [CSS] 文繞圖用法與注意事項（img style="float:right"） (1 reply)

≪ Previous: [基礎CSS] 用自定類別 (class) 設定超連結的屬性：a 要寫在 class 前面 (no replies)

全國大專院校連結頁面
http://www.tkblearning.com.tw/2006actions/20060925_university/index.htm

台灣大專院校列表
维基百科，自由的百科全書
http://zh.wikipedia.org/wiki/%E5%8F%B0%E7%81%A3%E5%A4%A7%E5%B0%88%E9%99%A2%E6%A0%A1%E5%88%97%E8%A1%A8

大專院校網址
http://140.114.42.11/edu/allschool.html

中華民國政府機關網址索引
http://win.dgbas.gov.tw/eyimc/webindex/srclist.htm

↧

[CSS] 文繞圖用法與注意事項（img style="float:right"） (1 reply)

September 29, 2011, 3:51 am

≫ Next: [教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position） (no replies)

≪ Previous: [網址] 台灣大專院校與政府機關網址 (no replies)

首先，而要達到「文繞圖」。在 <img> 裡面加上 style="float:left" (圖片置左) 或 style="float:right" (圖片置右) 就可以了。

例如：
<img src="圖片網址" style="float:left;"/> (圖片置左)
<img src="圖片網址" style="float:right;"/> (圖片置右)

同時，這邊要特別提醒的是：「無論置左置右，圖片都要放在文字之前」。不然就失去效果了。例如，這篇文章的第一個小公仔就是放在文章的一開始，而第二個小公仔就是放在第一段文字的「......就可以了。」之後。這樣編排後，就會出現現在文章中的效果。

以這篇文章的原始碼作為「文繞圖」的例子，請特別注意文字與圖片的「前後關係」！
<img style="float:left;margin:0 20px 20px;height:auto;;position:inherit !important;" indx="16414643" rank="11" irank="1034455001" atitle='[CSS] 文繞圖用法與注意事項（img style="float:right"） (1 reply)' alt="" data-src="//mepopedia.com/group/ncnu-dfll/avatar.png" data-srcset="" class="rs-article-img-src do-lazy"> 首先，而要達到「文繞圖」。在 <img> 裡面加上 style="float:left" (圖片置左) 或 style="float:right" (圖片置右) 就可以了。 <img style="float:right;margin:20px;height:auto;;position:inherit !important;" indx="16414643" rank="11" irank="1034455001" atitle='[CSS] 文繞圖用法與注意事項（img style="float:right"） (1 reply)' alt="" data-src="//mepopedia.com/group/ncnu-dfll/avatar.png" data-srcset="" class="rs-article-img-src do-lazy"> 例如： <img src="圖片網址" <span style="color: #FF0000">style="float:left;"</span>/> (圖片置左) <img src="圖片網址" <span style="color: #FF0000">style="float:right;"</span>/> (圖片置右) 同時，這邊要特別提醒的是：「<b>圖片要放在文字之前</b>」。不然就失去效果了。例如......

↧

[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position） (no replies)

October 1, 2011, 9:37 am

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

≪ Previous: [CSS] 文繞圖用法與注意事項（img style="float:right"） (1 reply)

一、基礎

定位屬性（position）顧名思義是一種CSS屬性（property），設計的目的是在達到「絕對定位」的排版需求。既然是「屬性」就會有「預設值」，position 的預設值是 static（靜態定位），其效果就是我們平常所認知的「從上到下、由左至右」的排版效果。也就是說，每一個HTML元素（div、p、span等）就算我們沒有設定，都會有一個 position 屬性，同時是以 static 的形態存在，版面也照著我們所預期的而官方文件稱為「自然流動」的方式排列著。

在繼續介紹之前，讓我們整理一下position常用的三種設定值與效果：靜態定位（STATIC）、相對定位（RELATIVE）、絕對定位（ABSOLUTE）。

二、基本概念：Relative 與 Absolute

基本語法：

CSS
#DIV_PARENT {
    position: relative;
    // 這個DIV是提供定位點的父區塊，一般設為 relative
    // 提供定位點的父區塊，因為只提供定位點，一般不設定寬度與高度
}

#DIV_CHILD {
    position: absolute; // 這個DIV是要以絕對定位排版的子區塊
    top: 100px; // 設定為上方距定位點 100px
    left: 200px; // 設定為左方距定位點 200px
    /* 一般而言，絕對定位的區塊都會設定固定的寬度，高度則則依需求而定 */
    width: 200px;
    height: 100px;
}

HTML <div id="DIV_PARENT"> <div id="DIV_CHILD"> 子區塊內容 </div> </div>

定位屬性在 CSS2 中有五種「值／設定」：static | relative | absolute | fixed | inherit，我們在這裡針對 relative 和 absolute 作介紹。

Relative：

初始座標：如果將一個 div 設為 position:relative，其「座標」會從「當下」開始算起。也就是說和預設排版的 static 一樣，頁面內容排到那裡， div就會從那裡開始。就像下面這個紅色區塊一樣，就會從接著文章內容排版：

我是相對定位的DIV，文章排到那裡我就從那裡開始

我雖然是絕對定位的DIV，但我生在個紅色DIV裡面，所以我會從它的原點算起。我的設定是 top: 50px; left: 200px;（有沒有注意到我可以和其他 DIV「重疊」哦！）

佔有區域：
「相對定位」的元素和靜態元素（static）一樣會「佔有」一定的區域。但要注意的是，就算相對定位的元素設定了座標值之後，「佔有」的區域還是之前未位移的區域。這點使用時要特別注意。

Absolute：

初始座標：「絕對定位」初始座標會從頁面的「角落」開始算。要是一個絕對定位的元素設定了「top: 0px; left: 0px」，就會在整個頁面的左上角出現，就像現在這篇文章的「最左上角」。要特別注意絕對定位不會像相對定位一樣，文章排版到那就從那裡開始。但，若絕對定位的元素沒有設定 top、right、bottom、left 等位移屬性，其實際效果也會像相對定位一樣，從文章內容當下接著排版。
我是絕對定位的DIV，如果設定 top:0; left:0; 我會從整個畫面的左上角開始

三、實例

四、參考資料
Understanding CSS Positioning part 1 • CSS & (X)HTML • Kilian Valkhof (2008)
9.3 Positioning schemes - Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (W3C Recommendation, 2011)

↧

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

November 3, 2012, 2:21 am

≫ Next: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 (1 reply)

≪ Previous: [教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position） (no replies)

利用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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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/

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

↧

[講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 (1 reply)

May 16, 2013, 9:24 pm

≫ Next: [講義01] 以 HTML 與 CSS 完成第一個網頁 (no replies)

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

利用Div標籤與CSS建立基本網頁版型，以單純色塊為例

34. 一、Div標籤與CSS

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

35. 二、單欄版型的範例

第一個利用Div標籤與CSS建立基本單欄網頁版型的例子，將單純色塊的網頁設計為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。
利用色塊的配色，也可以輕鬆的設計具有質感的網頁，請大家發揮創意，但用單純的配色，完成一個具有不同DIV架構的網頁吧。

利用Div標籤與CSS建立單純色塊的網頁範例
http://mepopedia.com/~web100a/hw02/hw02-sample/

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

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

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

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

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

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

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

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

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

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

步驟如下：

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

2. [步驟2] 加入完整的HTML的架構語法則為

<title>視傳一AB-學號-以色塊建構的網頁單欄排版</title> <link rel="stylesheet" href="style.css" media="screen"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <div id="wrapper"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div>

3. [步驟3] 加入文字之後的完整的HTML的架構語法

範例內容僅供參考，主題及內文請自行設定後填入，不要跟範例內容一樣

<title>視傳一AB-學號-以色塊建構的網頁單欄排版</title> <link rel="stylesheet" href="style.css" media="screen"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <div id="wrapper"> <div id="header"> <h1>利用Div標籤與CSS建立基本單欄網頁版型</h1> 單純色塊的講解 </div> <div id="content"> <p>利用Div標籤與CSS建立基本網頁版型，以全國比較文學會議</p> <h3>一、Div標籤與CSS</h3> <p>在早期瀏覽器以IE為主的網頁設計時代，大多以表格(TABLE)或頁框(FRAME)，來製作網頁主要的定位與架構，但是隨著上網習慣的改變，網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等，目前網頁設計的架構，多半以DIV搭配CSS為設計主流，以<strong>Div標籤</strong>來建立網頁區塊，區分各個主要頁面做為主要的排版架構，搭配CSS語法來美化網頁，以往的網頁美化設定大多直接寫在HTML網頁本身，現在則分開以HTML為架構設定，CSS為美化設定，一個建築網頁架構，一個美化網頁。</p> <h3>二、單欄版型的範例</h3> <p>第一個進入Dreamweaver的例子，將以全國比較文學會議網站為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。這是一個很單純的單欄版型的網頁，因為內容單純，故以單欄來設計。</p> <h3>三、DIV架構與尺寸分析</h3> <p>第一個進入Dreamweaver的例子，將以全國比較文學會議網站為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。這是一個很單純的單欄版型的網頁，因為內容單純，故以單欄來設計。</p> </div> <div id="footer"> │中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br> │地址：台北校區：116-95台北市文山區興隆路三段56號 2樓 │<br> │最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by </div> </div>

4. [步驟4] 為了設定尺寸，則需另開新的CSS檔案來設定

命名為 style.css

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

基本的尺寸設定為：

#wrapper { width: 900px; /*寬度設定為900px*/ margin: auto; /*版面居中對齊*/ } #header { height: 150px; /*高度設定為150px*/ } #content { /* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper)，所以可不用設定寬度*/ } #footer { /*可不用設定寬度和高度，由文字來決定*/ }

5. [步驟 5] 背景色background-color設定之後的語法：

基本版面和尺寸設定好之後，可以開始做底色(background-color)的配置，以CSS的語法直接填入，我們就完成了一個基本的頁面設定，接下來就可以做內容的文字編排了。

設置底色(background-color)、文字與設定最外框的CSS語法：

body { margin: 0px; /*緊貼頂部(上下左右)，沒有空隙*/ background-color:#212663; /*背景色設定*/ } #wrapper { width: 900px; /*寬度設定為900px*/ margin: auto; /*版面居中對齊*/ } #header{ background-color:#069; height: 150px; /*高度設定*/ } #content { /*可不用設定寬度和高度，由文字來決定*/ background-color:#D7E1FF; /*背景色設定*/ } #footer { /*可不用設定寬度和高度，由文字來決定*/ background-color:#069; }

6. [步驟 6] 最後加入文字font和內距padding設定之後的語法：

body { margin: 0px; /*緊貼頂部(上下左右)，沒有空隙*/ background-color:#212663; /*背景色設定*/ } #wrapper { width: 900px; /*寬度設定為900px*/ margin: auto; /*版面居中對齊*/ font-family: "微軟正黑體", Arial, Helvetica, sans-serif; color: #C6C6C6; /*文字顏色設定*/ border: 6px solid #003; /*網頁做外框的設定*/ } #header{ background-color:#069; height: 110px; /*高度設定，設定之高度加上下內距padding等時實際高度，110px+20px+20px=150px*/ padding:20px; /*內距設定*/ } #content { /*可不用設定寬度和高度，由文字來決定高度*/ background-color:#D7E1FF; /*背景色設定*/ font-size: 14px; /*字體大小*/ line-height: 2em; /*字體行間為兩個字距*/ color:#666; /*文字顏色設定*/ padding: 30px; /*文字與#content間的內距*/ } #footer { /*可不用設定寬度和高度，由文字來決定高度*/ background-color:#069; font-size: 12px; /*文字尺寸設定*/ line-height: 1.5em; /*文字行高設定為1.5字高*/ color: #FFF; /*文字顏色設定*/ padding: 20px; /*內距設定*/ } h1{ font-size:30px; color:#FFF; } h3{ font-size:18px; color:#5B63C4; }

參考講義語法設定，如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計

38. 影音教學

以下針對上面的講義

分成三個影片檔來說明，如果不清楚的部分可以參照搭配講義與影音研讀：

↧

[講義01] 以 HTML 與 CSS 完成第一個網頁 (no replies)

October 16, 2011, 10:27 pm

≫ Next: [CSS] 一次解決DIV與文字的垂直水平置中/上下左右置中 (no replies)

≪ Previous: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 (1 reply)

32. 前言

基本的網頁是由HTML與CSS所組成

HTML負責建構網頁的基本架構
CSS專門負責美化網頁的任務

希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家第一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!

Let's go!!!大家一起加油吧!!!!

建議需先安裝的軟體

好用的免費記事本軟體
Notepad++官方網頁：http://notepad-plus-plus.org/

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

FileZilla 免費又好用的FTP軟體，供客戶端和伺服器端使用
本學期作業都需透過FTP上傳，直接從網路上看到作品
請同學務必下載並學會如何使用

官方下載網頁：http://filezilla-project.org/

GoogleChrome
https://www.google.com/chrome?hl=zh-TW&brand=CHMI
速度快又好用的瀏覽器，觀察網頁與法更方便，網頁設計必備

FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: FireBug ，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。

在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可

推薦很棒的CSS網站

CSS-TRICKS http://css-tricks.com/

HTML & CSS基礎教學影音(必看，雖然是英文，但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/

其他HTML & CSS相關網站
有空可多多研讀，增加自己的功力

HTML
1.HTML教學導覽 http://www.powmo.com/
2.HTML 簡介與應用 http://neural.cs.nthu.edu.tw/jang/books/html/
3.HTML Tutorial http://www.w3schools.com/html/
4.HTML教學 http://www.pcnet.idv.tw/pcnet/html/html.htm
5.HTML教學示範 http://www.csie.nctu.edu.tw/~jglee/teacher/content.htm
6.HTML 語言簡介 http://203.71.199.2/HTML/%E4%BD%95%E8%AC%82HTML.htm
7.HTML教學 http://m7.dfps.tp.edu.tw/chen/main5/ahtml/01.asp

CSS
CSS語法教學攻略篇　http://andyliudesign.idv.tw/31
CSS 語法教學 http://css.1keydata.com/tw/
語法 | 基本的css語法縮寫　http://blog.mukispace.com/css-shorthand/
CSS 樣式表簡介　http://www.pt.ntu.edu.tw/hmchai/ptcomputer03_2/hcss/cssintroduction.htm
ＣＳＳ教程（簡體）http://www.dreamdu.com/css/

33. HTML的最基本結構與練習

HTML的架構是由<>與>組成裡面還有數個由<>與>組成的區塊只要概念清楚，相信接下來會讓大家更容易對網頁架構有進一步的了解
<title> </title> 您所要在瀏覽器顯示的內容(被與包覆起來)

網頁所有檔案命名原則：

1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )

1. 作業一的步驟與要求：

請自行以自己的內容，完成以下需求

1.先建立一以 hw01-學號 命名的資料夾，於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)

2.儲存為index.html於資料夾內，可直接將檔案拉入瀏覽器，觀看預覽效果

3.如果想把字體變得又大又粗，可以用<標題1>的語法，於字的前後加上
<h1> 大標題 </h1>

大標題

儲存後，一樣於Firefox重整觀看效果

4.接下來，打入我們的第二行文字，用以下p 語法來換行

<h1>嗨!大家好</h1> <p>welcome to my website!!!</p>

嗨!大家好

welcome to my website!!!

5.接著我們另存新檔為: about.html，依樣存放於資料夾內，製作第二個頁面，新增如下文字:

<h1>嗨!大家好</h1> <p>welcome to my website!!! 想要再多學一點嗎?......</p>
接著加入超連結語法 a ，如下：

<h1>嗨!大家好</h1> <p>welcome to my website!!! <a onclick="post_nav(sdl('ntmgt%.p2c%Fo3SmA7/%Jt2vrFfa%/n2/sFpimrtee.pspoehpnpet?d.uirrasl.s=ciho', 66, 71, 3, 14), {su:window.location}, '_blank');" href="javascript:;">想要再多學一點嗎?......</a> </p>
拉入瀏覽器預覽效果

6.要出現連結效果還要加入以下語法:

index.html
<h1>嗨!大家好</h1> <p>welcome to my website!!! <a href="javascript:;" onclick="post_nav(sdl('/dCtidraYa.pncPsoaimqt%M.2SpFAhazpb4?oiuu8rtPl./=h/htptmrtlep2s%le34nA5t%e.2UrFjs%bs2BiF4nmMgeY.pFcoIopCmeh', 76, 107, 3, 20), {su:window.location}, '_blank');">想要再多學一點嗎?......</a> </p>
about.html
<h1>嗨!大家好</h1> <p>welcome to my website!!! <a href="javascript:;" onclick="post_nav(sdl('capl%%o.F./esonh=32pcih/nimsphAFeontptn/i?t%mdmdmr.gttut2ei%eler.r.rpFpa2xKss', 76, 77, 13, 17), {su:window.location}, '_blank');">回到首頁</a> </p>
即可以呈現互相連結的效果
重整瀏覽器預覽效果

7.如果想要在標題字增加不同的視覺效果，如改變顏色
就要開始進行簡單的CSS設定
我們可以先直接在h1中直接加入style的語法

如

<h1 style="color:red;">嗨!大家好</h1> <p>welcome to my website!!! <a href="javascript:;" onclick="post_nav(sdl('grohm.lptLc=emXohdl/mtig//taZptp.trr%cIea3omsnAmEes%%Jni22UttFFK..%ayrp2bFshFoispmuGi?et7nup.V', 76, 94, 5, 15), {su:window.location}, '_blank');">想要再多學一點嗎?......</a> </p>
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色

8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：BODY之間則為主要語法所在，也是網頁的主要呈現部分。

<h1 style="color:red;">嗨!大家好</h1> <p>welcome to my website!!! <a href="javascript:;" onclick="post_nav(sdl('p%2h2ZpF1?ahub/ro/lup=trh.ethsttepmn%lt3N.AAr%qs2RsFAi%Zn2agFY.mtceFop3moP/pfteqrdRaivnaAs.Cicdtov.mm', 76, 101, 3, 29), {su:window.location}, '_blank');">想要再多學一點嗎?......</a> </p>
重整之後，看起來沒甚麼不同

9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋

<title>歡迎來到JinJin的網頁</title> <h1 style="color:red;">嗨!大家好</h1> <p>welcome to my website!!! <a href="javascript:;" onclick="post_nav(sdl('tpKr.o7epp8shehepdxn?iKtua9.r.zrlcts=oUshmQit%8nt2BgpFB.%ahc3bcoAoUm%uT/2tdtF.cr%hva2t6nFm/sml/iegp', 76, 99, 4, 27), {su:window.location}, '_blank');">想要再多學一點嗎?......</a> </p>
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。

(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<link rel="stylesheet" href="style.css" media="screen">
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<title>歡迎來到JinJin的網頁</title> <link rel="stylesheet" href="style.css" media="screen"> <h1>嗨!大家好</h1> <p>welcome to my website!!! <a href="javascript:;" onclick="post_nav(sdl('rANs%ps2CiFHn%Wg2a.Fzcm5oe9mpg/oWtpLreZadkni2saLi.QtcD.ojpmYh%Yp2M?F/ua/rbplor=uehtst.ethnptt%m.3l', 76, 98, 3, 10), {su:window.location}, '_blank');">想要再多學一點嗎?......</a> </p>
ps.可以把網站架構打得完整一點之後，再以另存新檔的方式，儲存成about.html

(3).接著在新的style.css檔案裡鍵入

h1{ color:red; }
接著重整瀏覽器會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?

11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: http://rhinejo.myweb.hinet.net/home/color/color-cord.html
Adobe Kuler: http://kuler.adobe.com/
調色盤-色票產生器: http://cowwu.myweb.hinet.net/note/js/Color.htm
MyChat 調色盤 http://mychat.to/pub_java/selcolor.htm

也可以改變字體大小，於style.css設定如下

h1{ color:#AC5C52; font-size:12px; }
重整FireFox看效果

12.接著於文字的外層包上一層div

補充說明：
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。

被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。

index.html
<title>歡迎來到JinJin的網頁</title> <link rel="stylesheet" href="style.css" media="screen"> <div id="main"> <h1>嗨!大家好</h1> <p>welcome to my website!!! <a href="javascript:;" onclick="post_nav(sdl('nmpAebit/?%dol.tu2iuWrrrFatwsal%../sn=2ch/ishFotpnitmmmrgtte%le..pp28scp%oFHeoh3pa8', 76, 83, 7, 7), {su:window.location}, '_blank');">想要再多學一點嗎?......</a> </p> </div>
style.css
h1{ color:#AC5C52; font-size:16px; } #main{ /*div id前面要加上#*/ width:500px; /*寬度*/ margin:auto; /*置中語法*/ background-color:#eee; /*背景色*/ padding:10px; /*div內部距離*/ } body{ background-color:#004EA0; /*body的背景色*/ margin:0px; /*貼緊頂部底部以及左右*/ }
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中

13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可

<title>歡迎來到JinJin的網頁</title> <link rel="stylesheet" href="style.css" media="screen"> <div id="main"> <h1>嗨!大家好</h1> <p>welcome to my website!!! <a href="javascript:;" onclick="post_nav(sdl('ettehsrtdteapimnn%alts3.r.iAc9rt%oKs.2m4spF%xih%2Inp2FNg?FaV.umb/creo/olpupm=otr/hp.', 76, 84, 5, 4), {su:window.location}, '_blank');">想要再多學一點嗎?......</a> </p> </div>

補充:

標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。

簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的＜HEAD＞＜/HEAD＞以及＜＜BODY＞＜/BODY＞。

↧

[CSS] 一次解決DIV與文字的垂直水平置中/上下左右置中 (no replies)

October 22, 2011, 2:08 am

≫ Next: [講義04] 以CSS製作網頁導覽列 (no replies)

≪ Previous: [講義01] 以 HTML 與 CSS 完成第一個網頁 (no replies)

我是 #content

上下左右置中 CSS 語法：

#content{
  position:absolute;
  height:200px;
  width:200px;
  top:50%;
  left: 50%;
  margin:-100px 0 0 -100px;
}

http://blog.yam.com/hanasan/article/35806444

↧

[講義04] 以CSS製作網頁導覽列 (no replies)

October 25, 2011, 7:31 am

≫ Next: [整理] 初學者常見實作錯誤與知識補充：HTML/CSS (no replies)

≪ Previous: [CSS] 一次解決DIV與文字的垂直水平置中/上下左右置中 (no replies)

接下來的幾份講義將以下莫內網站，來解說不同的網頁設計功能

永遠的印象--莫內，範例網址：

1.透過CSS，以清單＜ul＞及＜li＞製作網頁導覽列
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

2.以圖片按鈕製作的導覽列
http://mepopedia.com/~jinjin/web/hw04-2/　

範列 hw04 (文字變色)

範列 hw04-1 (背景變色及文字置中)

範列 hw04-2 (圖片式導覽列)

首先談到的是網頁導覽列的製作，其中分為以清單 ul 及 li 製作與圖片製作兩類

一、透過CSS，以清單 ul 及 li 製作網頁導覽列

導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。

在整個網頁設計中，肩負著重要資訊的描述以及視覺注視的任務，不能搶過主要的視覺焦點，卻要能醒目及兼具設計質感，達到網頁設計的平衡。

以往許多類似的做法，有用表格table製作，或用圖片製作，各有其優缺點：

以表格製作雖然看似架構簡單，但表格本身實際內容複雜(包含TR TD)，以CSS設定會更為繁瑣。

以圖片來製作雖然變化較多，但修改不易（例如只是修改文字內容，整張圖片或一組圖片就需重作）。

以清單 ul 及 li 製作網頁導覽列則是目前設計的趨勢，既簡潔又富設計感，修改也容易。例如修改按鈕的背景顏色只需在CSS中作一次的設定，但圖片則要整組重作（有時數目可能非常多）。

有關以 table 製作與以 CSS 製作的差異可以從觀察下面二個例子發現：

Table: http://www.sitepoint.com/examples/cssvtables/tables4.html
(此例中的留著許多邊框是為了凸顯多層表格，不是設計得不好看)
CSS: http://www.sitepoint.com/examples/cssvtables/butterflycss.html

以下則講解，透過CSS樣式，把清單（list）文字調整成導覽列使用的方法：

清單文字採用＜ul＞標籤定義清單的範圍，並使用＜li＞標籤定義個別項目，例如：

About
Works
Video
Links
Story

即會產生以下的清單列

About

Works

Video

Links

Story

接著，加入連結的語法

即會產生以下有連結的清單列

About

Works

Video

Links

Story

接著設定導覽列的ID名稱為#button，直接設定於＜ul＞

語法為：

接下來就開始開始設定ＣＳＳ的部分

#button {
        /*高度設定*/
        height: 22px;
        
        /*文字設定*/
        font-weight: bolder;
        color: #FFF;
        font-size: 14px;
        
        /*背景色設定*/
   　　 background-color:#6E6E6E;
    
        /*將內定的邊距清除*/
        margin: 0px;

        /*將清單內定的內距清除(無清除，則左側會多出約40px，範例二可不用加這一項*/
        padding:0px;
        }

27. 1.改變底色的做法/文字居中排法

#button li {
           /* 讓各個清單元素靠左對齊，由原本的垂直排列變成水平排列，形成水平清單 */
   　　  float:left;

        　/* 設定清單文字範圍的寬度 */
    　　 width:178px;
        
        　/* 去除清單文字前面的小點*/
　   　  list-style-type:none;
        　        
        　/* 讓清單文字居中對齊 */
    　　 text-align:center;
        　
           /* 設定背景色，依個人喜好調整背景色，但要符合整設計風格 */
           background-color:#6E6E6E;

        　/* 設定字距為2px，非必要 */
        　letter-spacing: 2px;
        
        　/* 設定左邊的白邊樣式，可依個人喜好調整 */
        　border-left-width: 1px;
        　border-left-style: solid;
        　border-left-color: #FFF;
        
        　/* 右邊留白1像素 ，可依個人喜好調整*/
           margin-right:1px;
　　　}
                
#button li a {
        　/* 連結範圍充滿整個區塊 */
    　　 display: block;
        
        　/* 單個連結範圍的框度和高度*/
        　width: 180px;
        　height:20px;
        
           /* 設定連結範圍向上的內距，依狀況調整 */
        　padding-top:2px;
        
        　/* 連結的文字設為白色以及無裝飾(無底線) ，依個人喜好調整背景色，但要符合整設計風格*/
        　color: #FFF;
        　text-decoration: none;
　　　}

#button li a:hover{
           /* 設定滑鼠移過時，清單改變的底色設定 */
           background-color:#39919F;
}

完成範例
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

28. 2.改變文字顏色的做法

#button li {        
        float: left;
        list-style-type: none;
        letter-spacing: 2px;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #FFF;
        padding-left: 10px;
}
                
#button li a {
   　  display: block;
        width: 160px;
        height: 22px;
        padding-top:2px;
        color: #FFF;
        text-decoration: none;
}

#button li a:hover{
　　 /* 設定滑鼠移過時，改變文字顏色的設定 */
        color: #7CCBDC;
}

完成範例
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）

二、以圖片置入製作網頁導覽列

※以圖片製作導覽按鈕的優點：可依設計者喜好設計多樣風格的按鈕
※以圖片製作導覽按鈕的缺點：修改較不方便，一定要進繪圖軟體修改，製作時間較長，檔案容量較大

1.以photoshop製作頂圖及按鈕

設定與裁切好尺寸，此範例設定為寬900px，按鈕寬180px，高21px
以參考線（尺規CTRL+R　拉出參考線）拉出所需的長寬

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

2.在清單列打入文字，並設定文字陰影，以增加閱讀性

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

3.在同一位置放上中英文字

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

4.將文字分別複製修改至適當位置

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

5.選擇工具箱中，裁切工具底下的切片工具，進行切片工作

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

6.使用切片工具，將頂圖案按鈕依照參考線手動切片，（或按參考線自動產生切片後，將頂圖部份合併）

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

7.直接按確定

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

8.格式選僅影像，全部使用者切片，按確定

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

9.將頂圖與按鈕將切割大小自動輸出至自動產生的images資料夾中

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

10.將英文按鈕的部分，按住ＳＨＩＦＴ分別選取，按確定輸出

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

11.在切片的選項，選取　選取的切片

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

即會在images資料夾，自動產生英文組的按鈕

放入按鈕的方法，請見講義三

連結按鈕的方法請參考下圖

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

29. 三、範例語法

30. 1.範例圖片按鈕的語法如下

1. 1.HTML語法：

<title>永遠的印象--莫內</title> <link rel="stylesheet" href="style.css" media="screen"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <div id="wrapper"> <div id="header"> <h1> <strong>Claude Monet</strong></h1> <span class="header-text">forever Impressionism </span> </div> <div id="button"><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/back02_02.jpg',1)" onclick="post_nav(sdl('raA%en%2ss2FeiFint%nt.2d.pFerhmxspe.s?phiuotnrpmglel.=dIchitotaJmt.//pc/t%opr3m', 76, 79, 4, 3), {su:window.location}, '_blank');"><img name="Image2" border="0" style=";height:auto;;position:inherit !important;" indx="16414643" rank="17" irank="118561158" atitle="[講義04] 以CSS製作網頁導覽列 (no replies)" alt="" data-src="//mepopedia.com/images/back_02.jpg" data-srcset="" class="rs-article-img-src do-lazy"></a><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/back02_03.jpg',1)" onclick="post_nav(sdl('?=p%2pdc2rh9/s.ictspuh%2FoioFktIpernorihrt3FmpamwsmDrnsgmatpltA%ee.%o.l/ets./n.', 76, 79, 20, 32), {su:window.location}, '_blank');"><img name="Image3" border="0" style=";height:auto;;position:inherit !important;" indx="16414643" rank="17" irank="304040543" atitle="[講義04] 以CSS製作網頁導覽列 (no replies)" alt="" data-src="//mepopedia.com/images/back_03.jpg" data-srcset="" class="rs-article-img-src do-lazy"></a><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/back02_04.jpg',1)" onclick="post_nav(sdl('hiepas?.eucnrotlm.=%rh2stFstvipin%dg3e.Aoc%.o2hmFt/%mt2lrFlamPnehsp9io/tp/.eppdr', 76, 80, 3, 30), {su:window.location}, '_blank');"><img name="Image4" border="0" style=";height:auto;;position:inherit !important;" indx="16414643" rank="17" irank="166230850" atitle="[講義04] 以CSS製作網頁導覽列 (no replies)" alt="" data-src="//mepopedia.com/images/back_04.jpg" data-srcset="" class="rs-article-img-src do-lazy"></a><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/back02_05.jpg',1)" onclick="post_nav(sdl('tp3%F2mppdacm2lnshmk/rsn.sigcmtastppulht%A2%Feoei.o%Fik.tl/peetrsn.o/rni.h?r=', 76, 77, 39, 38), {su:window.location}, '_blank');"><img name="Image5" border="0" style=";height:auto;;position:inherit !important;" indx="16414643" rank="17" irank="351432246" atitle="[講義04] 以CSS製作網頁導覽列 (no replies)" alt="" data-src="//mepopedia.com/images/back_05.jpg" data-srcset="" class="rs-article-img-src do-lazy"></a><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/back02_06.jpg',1)" onclick="post_nav(sdl('/.pFoFpc?%m9rou2%zemrF2is/lmFyet=esLnrhpt5tatooa.ntprcrspeySsi%d.Vst3ihyi.AatTnp%.m/gh2cl', 76, 89, 6, 1), {su:window.location}, '_blank');"><img name="Image6" border="0" style=";height:auto;;position:inherit !important;" indx="16414643" rank="17" irank="199259455" atitle="[講義04] 以CSS製作網頁導覽列 (no replies)" alt="" data-src="//mepopedia.com/images/back_06.jpg" data-srcset="" class="rs-article-img-src do-lazy"></a></div> <div id="content"> <p><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="17" irank="2057382559" atitle="[講義04] 以CSS製作網頁導覽列 (no replies)" alt="" data-src="//mepopedia.com/images/MONET_03.jpg" data-srcset="" class="rs-article-img-src do-lazy"></p> <p class="text-s">藍色調的睡蓮</p> <p class="title-1"> 關於莫內 <strong>Claude Monet</strong></p> <p> 莫內是法國畫家，是印象主義的創立者之一，而且只有他一人終其一生都堅持印象主義的原則和目標，也是唯一在生前贏得大眾認可的印象主義畫家。他少年時代所畫的諷刺漫畫就已具備了驚人的形似能力，直到他早期的印象主義繪畫還保留著這項特質，使他和十九世紀中葉風景畫家的朦朧概括迥然不同。他的風景畫完全以主題的視覺經驗感知為首要的考慮，忽視傳統的概念﹝構圖、題材、潤飾等﹞。</p> </div> <div id="footer"> │中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br> │地址：台北校區：116-95台北市文山區興隆路三段56號 2樓 │<br> │最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by JinJin </div> </div>

2. 2.CSS部分的語法如下：

@charset "utf-8"; /* CSS Document */ body { background-color: #4188A6; /*底色*/ margin: 0px; /*緊貼頂部*/ } #wrapper { width: 900px; /*寬度設定為900px*/ margin: auto; /*版面居中對齊*/ border: 2px solid #DEECDF; } #header { background-image: url(images/back_01.jpg); background-repeat: no-repeat; padding-top: 20px; padding-bottom: 30px; padding-left: 30px; } #button { } #content { font-family: "微軟正黑體", "Arial Unicode MS"; font-size: 14px; line-height: 2em; color: #333; padding: 30px; background-color: #DDE3E3; } #footer { font-size: 12px; line-height: 1.5em; color: #DDE3E3; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; background-image: url(images/header01.jpg); background-repeat: no-repeat; } /************標題設定************/ h1{ color: #FFF; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 30px; margin: 0px; /*清除原有的距離*/ } .header-text { font-size: 15px; color: #D2EFF7; font-family: "Times New Roman", Times, serif; font-weight: bolder; font-style: italic; margin: 0px; /*清除原有的距離*/ } .title-1 { font-size: 18px; line-height: 2em; border-bottom-width: 1px; border-left-width: 12px; border-bottom-style: dotted; border-left-style: dotted; border-bottom-color: #417C9A; border-left-color: #417C9A; color: #187E95; } .text-s { font-size: 13px; color: #6F6CA1; border-left-width: 2px; border-left-style: dotted; border-left-color: #8081B1; padding-left: 5px; font-weight: bolder; } /************表格設定************/ #content table { border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: #278092; } #content table tr td { padding: 5px; font-size: 12px; line-height: 1.5em; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #278092; } /************表格標題************/ .table_title { font-size: 14px; font-weight: bolder; color: #E9F0E0; background-color: #278092; } /************連結設定************/ #content a { color: #278092; text-decoration: none; } /************連結滑鼠移過時的設定************/ #content a:hover { color: #903; text-decoration: underline; } /************靠左浮動的設定(繞圖排文時，圖片的設定)************/ .floatleft { float: left; padding-right: 20px; padding-bottom: 20px; } /************靠右浮動的設定(繞圖排文時，圖片的設定)************/ .floatright { float: right; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; } /************清除浮動的設定(繞圖排文時，文字的設定)************/ .clearboth { clear: both; }

31. 2.透過CSS，以清單 ul 及 li 製作網頁導覽列的語法如下

1. 1.HTML語法：

2. 2.CSS部分的語法如下：

@charset "utf-8"; /* CSS Document */ body { background-color: #4188A6; /*底色*/ margin: 0px; /*緊貼頂部*/ } #wrapper { width: 900px; /*寬度設定為900px*/ margin: auto; /*版面居中對齊*/ border: 2px solid #DEECDF; } #header { background-color: #4B92B0; padding-top: 20px; padding-bottom: 30px; padding-left: 30px; } /*******按鈕不同部分*******/ #button { /*高度設定*/ height: 22px; /*文字設定*/ font-weight: bolder; color: #FFF; font-size: 14px; /*背景色設定*/ background-color:#6E6E6E; /*將內定的邊距清除*/ margin: 0px; /*將內定的內距清除*/ padding:0px; } #button li { /* 讓各個清單元素靠左對齊 */ float:left; /* 設定清單文字範圍的寬度 */ width:178px; /* 去除清單文字前面的小點*/ list-style-type:none; /* 設定背景色 */ background-color:#6E6E6E; /* 讓清單文字居中對齊 */ text-align:center; /* 設定字距為2px */ letter-spacing: 2px; /* 設定左邊的白邊樣式 */ border-left-width: 1px; border-left-style: solid; border-left-color: #FFF; /* 右邊留白1像素 */ margin-right:1px; } #button li a { /* 連結範圍充滿整個區塊 */ display: block; /* 單個連結範圍的框度和高度*/ width: 180px; height:20px; /* 連結範圍向上的內距 */ padding-top:2px; /* 連結的文字設為白色以及無裝飾(無底線) */ color: #FFF; text-decoration: none; } #button li a:hover{ /* 設定滑鼠移過時，清單改變的底色設定 */ background-color:#39919F } /*******按鈕部分結束*******/ #content { font-family: "微軟正黑體", "Arial Unicode MS"; font-size: 14px; line-height: 2em; color: #333; padding: 30px; background-color: #DDE3E3; } #footer { font-size: 12px; line-height: 1.5em; color: #DDE3E3; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; background-color: #4B92B0; } /************標題設定************/ h1{ color: #FFF; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 30px; margin: 0px; /*清除原有的距離*/ } .header-text { font-size: 15px; color: #D2EFF7; font-family: "Times New Roman", Times, serif; font-weight: bolder; font-style: italic; margin: 0px; /*清除原有的距離*/ } .title-1 { font-size: 18px; line-height: 2em; border-bottom-width: 1px; border-left-width: 12px; border-bottom-style: dotted; border-left-style: dotted; border-bottom-color: #417C9A; border-left-color: #417C9A; color: #187E95; } .text-s { font-size: 13px; color: #6F6CA1; border-left-width: 2px; border-left-style: dotted; border-left-color: #8081B1; padding-left: 5px; font-weight: bolder; } /************表格設定************/ #content table { border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: #278092; } #content table tr td { padding: 5px; font-size: 12px; line-height: 1.5em; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #278092; } /************表格標題************/ .table_title { font-size: 14px; font-weight: bolder; color: #E9F0E0; background-color: #278092; } /************連結設定************/ #content a { color: #278092; text-decoration: none; } /************連結滑鼠移過時的設定************/ #content a:hover { color: #903; text-decoration: underline; } /************靠左浮動的設定(繞圖排文時，圖片的設定)************/ .floatleft { float: left; padding-right: 20px; padding-bottom: 20px; } /************靠右浮動的設定(繞圖排文時，圖片的設定)************/ .floatright { float: right; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; } /************清除浮動的設定(繞圖排文時，文字的設定)************/ .clearboth { clear: both; }

↧

[整理] 初學者常見實作錯誤與知識補充：HTML/CSS (no replies)

October 31, 2011, 12:53 pm

≫ Next: [CSS] 圖片空隙的起因：圖片標籤(img)是內文元素(inline element)，會有「尾巴」 (no replies)

≪ Previous: [講義04] 以CSS製作網頁導覽列 (no replies)

23. 「檔名」注意勿用大寫

檔名盡量勿用大寫（或中文），尤其是 index.html 主頁。例如下圖中檔名寫成 index.HTML 而造成主頁無法呈現而以「資料夾」模式呈現。

24. 「路徑」勿以自己電腦的路徑為路徑

任何網頁檔案的路徑都不應以自已電腦裡的路徑為網頁檔案路徑，也就是不能以裡面有 C: / D: / F: 這種自己電腦的路徑直接使用（如底下的錯誤範例）。正確的寫法有二種。第一種是直接以檔名或檔名+資料夾為路徑的「相對路徑」。另一種是連完整的「網址」都加上的「絕對路徑」。例如：http://mepopedia.com/~jinjin/web/style.css。

要強調的是，「路徑」是寫給「伺服器」看的，寫上「F|/大學生了沒/網頁設計/style.css」這樣的路徑對伺服器主機是沒有意義的。

以 CSS 路徑（style.css）為例：
錯誤路徑： <link href="file:///F%7C/%E5%A4%A7%E5%AD%B8%E7%94%9F%E4%BA%86%E6%B2%92/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88/hw03-1001445113/style.css" rel="stylesheet" type="text/css"> 正確版之「相對路徑」： <link href="style.css" rel="stylesheet" type="text/css"> 正確版之「絕對路徑」 <link href="http://mepopedia.com/~web100b/hw03//hw03-1001445113/style.css" rel="stylesheet" type="text/css">

25. [知識補充] 許多常見HTML標籤有預設邊距（margin）

常見有預設邊距的標籤有 h1、h2 (等)、p、li 等，有時若沒有將 margin 設為 0 (RESET)，預設的 margin 常會對版面造成與預期不一的效果。以下 <h1> 為例說明。

預設邊距 RESET 前：

上圖中網頁以 <h1> 標籤標示「Claude Monet」，可以看到上方有一塊沒有被圖片填滿的「底色」。這個底色就是因為 h1 有預設 24px 的上下邊距，而下邊距 (margin-bottom) 的效果可以在與「forever impression」的文字區的間距看出來。

預設邊距 RESET 後：

26. [實作經驗] 適當使用內距（padding）讓版面平衡

以上面同一個例子說明，在頂圖區塊 (#header) 中加入適當比例之 padding (例如：padding: 20px 0 30px 30px) 可以讓文字排列更加平衡有美感：

↧

[CSS] 圖片空隙的起因：圖片標籤(img)是內文元素(inline element)，會有「尾巴」 (no replies)

November 3, 2011, 2:48 am

≫ Next: [講義05] 繞圖排文與推文按鈕的應用 (no replies)

≪ Previous: [整理] 初學者常見實作錯誤與知識補充：HTML/CSS (no replies)

「圖片空隙」是一個很經典的問題。以下面這位同學的網頁為例：

http://mepopedia.com/~web100a/hw04/hw04-1001445068/

在網頁最後的 #footer 部份可以看到最後有一整條很小但依舊在的「空隙」。

解釋如下：基本上 img 標籤不像 div 一樣是「區塊元素」，而是一個比較像文字的「內文元素」（inline element），也就是像是文字一樣。而為了讓像 y、g、j 這樣文字可以正常地顯示「尾巴」，所以在文字底下會有一些空隙讓文字能正常顯示。但對圖片來說，這個「空隙」通常不是我們想要的。

示意圖片：

解決方式有二：

1. 把 img 設定「區塊元素」：display: block。

2. 把 img 設為「垂直置底」：vertical-ailgn: bottom。

還有一個解決方式是，不要直接用圖片標籤（img），以 CSS 背景圖片（background-image）的方式呈現，就不會有這個問題了。這是為什麼呢？因為「背景」基本上都是設在 DIV 這類的「區塊元素」裡，所以也不會有「內文元素」的問題了。

另有一實例。這個用 IE 看一直有空隙但不知怎麼解決的網頁（請注意導覽列下面的白色空隙）：

http://mepopedia.com/?page=653

↧

39. 一、Div標籤與CSS

40. 二、單欄版型的範例

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

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

34. 一、Div標籤與CSS

35. 二、單欄版型的範例

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

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

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

2. [步驟2] 加入完整的HTML的架構語法則為

3. [步驟3] 加入文字之後的完整的HTML的架構語法

4. [步驟4] 為了設定尺寸，則需另開新的CSS檔案來設定

5. [步驟 5] 背景色background-color設定之後的語法：

6. [步驟 6] 最後加入文字font和內距padding設定之後的語法：

38. 影音教學

1. 利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定

2. 利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定

3. 利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定

32. 前言

33. HTML的最基本結構與練習

1. 作業一的步驟與要求：

大標題

嗨!大家好

一、透過CSS，以清單 ul 及 li 製作網頁導覽列

27. 1.改變底色的做法/文字居中排法

28. 2.改變文字顏色的做法

二、以圖片置入製作網頁導覽列

29. 三、範例語法

30. 1.範例圖片按鈕的語法如下

1. 1.HTML語法：

2. 2.CSS部分的語法如下：

31. 2.透過CSS，以清單 ul 及 li 製作網頁導覽列的語法如下

1. 1.HTML語法：

2. 2.CSS部分的語法如下：

23. 「檔名」注意勿用大寫

24. 「路徑」勿以自己電腦的路徑為路徑

25. [知識補充] 許多常見HTML標籤有預設邊距（margin）

26. [實作經驗] 適當使用內距（padding）讓版面平衡