Clik here to view.
[CSS] 各主流瀏覽器不相容情形之網頁實例整理: IE6、IE8、Firefox、Chrome (2011) (16 replies)
以下為實例整理之格式。 網頁：中國科技大學首頁 網址：http://www.cute.edu.tw/home_page.html 觀察時間：民國100年7月20日 觀察瀏覽器：IE6、IE8、Firefox5、Chrome12 原始碼：見附檔。 摘要 IE6、IE8正常。 Google Chrome：右欄中段之搜尋列高度過大。...
View Article[Blog] HomeWork 3 自選部落格樣式 (4 replies)
一.這週請自選一個部落格樣式修改 http://www.serendipity-templates.org/all-templates/screenshot/ 修改完後請回復本篇文章 註明： 1.修改的樣式原名稱： 2.新命名： 3.風格： 4.使用族群： 5.色彩計畫： (1)色調： (2)主色系： (3)輔助色系： 6.修改原樣式截圖： 7.修改後樣式截圖：...
View Article[Forum] 論壇樣式初步修改--以全民國防教育暑期戰鬥營為例 (6 replies)
不同論壇樣式範例 全民國防教育暑期戰鬥營 http://www.mepopedia.com/forum/718 美寶莊園 http://mepopedia.com/forum/list.php?699 ============================================== 以全民國防教育暑期戰鬥營為例，需修改的部分 1. 修改 template 名稱（info.php）...
View ArticleClik here to view.
[WEB] 優良設計網站蒐集與分析 (6 replies)
請蒐集設計優良的網站，列出網址與下列資訊，並分析其網站的優劣 範例： 基本資料 1.網址：http://www.apple.com/tw/ 2.名稱：Apple台灣官方網站 3.類型：科技類商業網站 4.族群：年輕，追求時尚與科技感 5.網站性質：科技產品介紹與產品販售 分析 1.色系：以白色、灰色系、黑色為主調，輔助色為藍色 2.風格：科技與時尚感...
View Article[WEB] PROFILE個人簡介頁面蒐集 (2 replies)
請蒐集具設計感之PROFILE個人簡介頁面 越多越好，國內外皆可 可說明優點，也可以附上網址即可 如: pixnet的不同類型: http://www.cwyuni.tw/profile http://mix78.pixnet.net/profile http://raindog.pixnet.net/profile http://www.giddens.tw/profile...
View Article[HTML] HTML5 (1 reply)
HTML5是HTML下一個的主要修訂版本，現在仍處於發展階段。 目標是取代1999年所定訂的HTML 4.01和XHTML 1.0 標準，以期能在網際網路應用迅速發展的時候，使網路標準達到符合當代的網路需求。 廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。 它希望能夠減少瀏覽器對於需要外掛程式的豐富性網路應用服務（plug-in-based rich...
View Article[CSS/HTC] 支援所有主流瀏覽器的「圓角/圓弧邊角」作法 (no replies)
.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...
View Article[CSS] 支援所有主流瀏覽器的「三角」作法 (no replies)
跨瀏覽器相容之「三角形」語法（此語法在 IE6、IE8、Firefox5、Chrome12 中實測無誤）： .arrow-up { width:0px; height:0px; border:5px solid; border-color:transparent transparent black transparent;/ border-style:dashed dashed solid...
View ArticleClik here to view.
[CSS/IE6] 跨瀏覽器：畫面動態調適視窗大小(max-width)同時讓背景圖片(backgroun-image)正常顯示的方法 (no replies)
1. 情境說明 我們經常將網頁固定為某個寬度，例如： #container{ width: 928px; } 但這樣的設定在電腦的視窗變窄或者在行動裝置上時就會顯得太大，而可能難以閱讀。 例如以美寶莊園的地圖為例，在正常視窗大小時內容可完整呈現： 但寬度縮為 360px 時，內容變得不好理解而難以操作： 2. 改善方法：加入 max-width 及 _width (IE6) 的設定 在相關的...
View Article[基礎CSS] 用自定類別 (class) 設定超連結的屬性：a 要寫在 class 前面 (no replies)
其實要做的事很簡單，只是因為觀念不清楚，今天在改東西的時候超結設定一直出不來。後來發現原因，所以寫個文章記錄一下。 要設定某個類別（class）的文字顏色時，會以以下語法設定（這邊以 article 這個英文字作為自定類別名稱）： .article{ color: white; } 上面的意思是類別 article 的文字顏色設為白色。 若要設定屬於類別 article 的超連結顏色，就要在...
View Article[網址] 台灣大專院校與政府機關網址 (no replies)
全國大專院校連結頁面 http://www.tkblearning.com.tw/2006actions/20060925_university/index.htm 台灣大專院校列表 维基百科，自由的百科全書...
View ArticleClik here to view.
[CSS] 文繞圖用法與注意事項（img style="float:right"） (1 reply)
#phorum div.message-body br {clear:none;}首先，而要達到「文繞圖」。在 <img> 裡面加上 style="float:left" (圖片置左) 或 style="float:right" (圖片置右) 就可以了。 例如： <img src="圖片網址" style="float:left;"/> (圖片置左) <img...
View Article[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position） (no replies)
一、基礎 定位屬性（position）顧名思義是一種CSS屬性（property），設計的目的是在達到「絕對定位」的排版需求。既然是「屬性」就會有「預設值」，position 的預設值是 static（靜態定位），其效果就是我們平常所認知的「從上到下、由左至右」的排版效果。也就是說，每一個HTML元素（div、p、span等）就算我們沒有設定，都會有一個 position 屬性，同時是以...
View ArticleClik here to view.
[講義03] 利用Div標籤與CSS建立基本單欄網頁版型 (6 replies)
1. Adobe Dreamweaver CS5 & CS5.5使用手冊2. 以視覺化方式建立 Spry 頁面3. 使用選單列 Widget3.1 關於選單列 Widget3.2 插入和編輯選單列 Widget3.3 自訂選單列 Widget3.3.1 變更選單項目文字樣式3.3.2 變更選單項目背景顏色3.3.3 變更選單項目尺寸3.3.4 定位子選單4. 關於標籤面板...
View ArticleClik here to view.
[講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 (1 reply)
1. Adobe Dreamweaver CS5 & CS5.5使用手冊2. 以視覺化方式建立 Spry 頁面3. 使用選單列 Widget3.1 關於選單列 Widget3.2 插入和編輯選單列 Widget3.3 自訂選單列 Widget3.3.1 變更選單項目文字樣式3.3.2 變更選單項目背景顏色3.3.3 變更選單項目尺寸3.3.4 定位子選單4. 關於標籤面板...
View Article[講義01] 以 HTML 與 CSS 完成第一個網頁 (no replies)
1. Adobe Dreamweaver CS5 & CS5.5使用手冊2. 以視覺化方式建立 Spry 頁面3. 使用選單列 Widget3.1 關於選單列 Widget3.2 插入和編輯選單列 Widget3.3 自訂選單列 Widget3.3.1 變更選單項目文字樣式3.3.2 變更選單項目背景顏色3.3.3 變更選單項目尺寸3.3.4 定位子選單4. 關於標籤面板...
View Article[CSS] 一次解決DIV與文字的垂直水平置中/上下左右置中 (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
View ArticleClik here to view.
[講義04] 以CSS製作網頁導覽列 (no replies)
1. Adobe Dreamweaver CS5 & CS5.5使用手冊2. 以視覺化方式建立 Spry 頁面3. 使用選單列 Widget3.1 關於選單列 Widget3.2 插入和編輯選單列 Widget3.3 自訂選單列 Widget3.3.1 變更選單項目文字樣式3.3.2 變更選單項目背景顏色3.3.3 變更選單項目尺寸3.3.4 定位子選單4. 關於標籤面板...
View ArticleClik here to view.
[整理] 初學者常見實作錯誤與知識補充：HTML/CSS (no replies)
1. Adobe Dreamweaver CS5 & CS5.5使用手冊2. 以視覺化方式建立 Spry 頁面3. 使用選單列 Widget3.1 關於選單列 Widget3.2 插入和編輯選單列 Widget3.3 自訂選單列 Widget3.3.1 變更選單項目文字樣式3.3.2 變更選單項目背景顏色3.3.3 變更選單項目尺寸3.3.4 定位子選單4. 關於標籤面板...
View ArticleClik here to view.
[CSS] 圖片空隙的起因：圖片標籤(img)是內文元素(inline element)，會有「尾巴」 (no replies)
「圖片空隙」是一個很經典的問題。以下面這位同學的網頁為例： http://mepopedia.com/~web100a/hw04/hw04-1001445068/ 在網頁最後的 #footer 部份可以看到最後有一整條很小但依舊在的「空隙」。 解釋如下：基本上 img 標籤不像 div 一樣是「區塊元素」，而是一個比較像文字的「內文元素」（inline...
View Article