HP 的所有文章
Page 2 of 2
Pages: 12
Results 31 - 46 of 46
一、目的:
此文件編寫目的為給視傳相關科系大一新生之「網頁設計」課程作為相關教材(當然,對一般對網頁設計有興趣的朋友也是相當適合的)。此文的內容提供 DOCTYPE 宣告語法的介紹,編寫目的為讓讀者了解宣告與不宣告 DOCTYPE 的差異與避免讓網頁進入當初為了相容舊型瀏覽器而生的「接縫模式 / 轉折模式」Quirks Mode。
一般視傳相關科系的學生(或甚至老師)的學習要點多重於「視覺」與「設計」部份,而容易對一些「語法」或「規則」部份有所忽略。「DOCTYPE」即為一般常忽略的一個要點,也讓許多網頁會進入「Quirks Mode」。也因此,宣告與不宣告之間,在不同瀏覽器的呈現之下就往往產生很不一樣的結果。
目前文章編寫中,請見此主題之百科介紹:http://mepopedia.com/?page=866
二、DOCTYPE 的宣告
有關 DOCTYPE
by
HP
-
跨瀏覽器相容性網頁設計
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 特有語法*/
ma
by
HP
-
網頁設計與語法(HTML/CSS)
網頁:大學選校互動系統(「關於我們」分頁)
網址:http://cnt.heeact.edu.tw/site1/index.asp?method=about
觀察時間:民國100年8月31日
觀察瀏覽器: IE6、IE8、Firefox5、Chrome12
不相容瀏覽器:Firefox5、Chrome12
原始碼:見附檔。
Chrom12 截圖(相簿功能有異):
by
HP
-
網頁設計與語法(HTML/CSS)
.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.htmlremi
by
HP
-
網頁設計與語法(HTML/CSS)
在 Forum 的文章閱讀模式中 (read.php),背景分為「作者資訊及標題區」及「文章內容區」。
以 http://mepopedia.com/forum/read.php?804,15341 為例,「作者資訊及標題區」就是 JinJin 及 PROFILE個人簡介頁面蒐集的區域。而之後的內容部份就是「文章內容區」。以下分別說明設定及修改背景顏色的方法。
1. 作者資訊及標題區
CSS 類別:
#phorum div.generic{ background-color: #EDF2ED;} //css.tpl中約第130行
TPL 變數:
{VAR alt_background_color "#edf2ed"} //settings.tpl 中第52行
修改 settings.tpl 中第52行的 TPL 變數 alt_background_col
by
HP
-
網頁設計與語法(HTML/CSS)
一、跨瀏覽器不相容情形描述:
1. 「網站導覽功能列」文字原應以水平書寫,但因瀏覽器不相容,造成擠壓而成垂直書寫,版本因而過大。
2. 「站內搜尋功能列」因相同原因,原以水平書寫部份轉為垂直書寫,造成版面擠壓,佔據版面過大區域,影響呈現效果。
二、不相容情形涵蓋瀏覽器:Firefox系列、Google Chrome、IE7 標準模式、IE8 標準模式。
三、不相容情形影響範圍:全網站
四、改善建議與分析
分析:
網站版面出現瀏覽器不相容之頂部之導覽功能區因使用「多層表格」進行版面排版,同時又不必要地在「第一層表格」(見所附原始碼)將表格分為「左中右」三塊,而將主要的「導覽功能區」壓縮在「右區塊」。再加以將無任何內容之左、中區塊設定佔據過大版面,因此造成原為水平書寫之文字,擠壓為垂直書寫。
改善建議:
在可以改動原有排版模式的前提下,建議
by
HP
-
網頁設計與語法(HTML/CSS)
相容性觀察說明及截圖:http://mepopedia.com/forum/read.php?804,15128,15168#msg-15168
--
「搜尋列」主要<form>這個功能構成,裡面包括兩個部份
1. 文字輸入列:<input type="text">
2. 「送出」按鈕:<input type="submit">
而瀏覽器呈現「高與寬」的差異主要就是在對以上三者解讀不同所造成的。
IE submit default settings:
input, input['type="submit"] {
padding: 1px 8px;
border: 3px;
margin: 0;
}
Firefox submit default settings:
input, input['type="s
by
HP
-
網頁設計與語法(HTML/CSS)
背景圖片路徑可以改
主要都是在 settings.tpl 這個檔案裡面改。
找到檔案的最後一段 {! -- Background Images -- } 的部份就是了。
我以其中二個背景圖片設定為例子:
{VAR body_background_image "http://camp.gpwb.gov.tw/imgs/body_bg_1.jpg"}
{VAR top_banner_image "http://www.mepopedia.com/imgs/forum_top_vd.jpg"}
第一個 body_background_image 就是 CSS 中的 body{ background-image: ...} 的意思。就是論壇左右兩邊的灰色的邊。
第二個 top_background_image 就是頂圖(就是這一張。http://www.mep
by
HP
-
網頁設計與語法(HTML/CSS)
0.1 這個頁面上的內容需要較新版本的 Adobe Flash Player。相容性問題說明:http://mepopedia.com/forum/read.php?804,15128,15191#msg-15191
首先,此頁IE之外瀏覽器不相容之處主要是 Flash 動畫只能在 IE 正常呈現,在Firefox、Chrome中則無法正常呈現。
為簡化說明,以下先舉出兼容 IE、Firefox、Chrome 等主流瀏覽器之 Flash 語法。之後再針對「中華民國海軍」此實例作相容性之實作。
簡要來說,第一段的 object 是給 IE 看的,第二段有許多特殊註解 object 是給其他瀏覽器看的。(請注意,第一行的clsdi: 後面的 d 原為大寫,但在此論壇冒號 : 後按大寫D會轉為表情符號,故改為小寫,但效果不變。)
1. 跨瀏覽器兼容之 Flash 語法
by
HP
-
網頁設計與語法(HTML/CSS)
以下列出網址:
醒吾技術學院
http://www.hwc.edu.tw/releaseRedirect.do?unitID=183&pageID=3513 (incompatible in Firefox)
黎明技術學院
http://www.lit.edu.tw/onweb.jsp?webno=333333332; (除了IE以外,應該都有問題)
(這個網址比較特別,最後一個「分號 ;」要自己手打)
http://www.energylabel.org.tw/intro/introduction/list.asp
http://elearning.hrd.gov.tw/eHRD2005/
http://www.tam.gov.tw/MP_104051.html
http://ccnt1.cute.edu.tw/dba/
http://cc
by
HP
-
網頁設計與語法(HTML/CSS)
以下為實例整理之格式。
網頁:中國科技大學首頁
網址: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> 前後都加上和「一行文字」同高的 m
by
HP
-
網頁設計與語法(HTML/CSS)
1. 預設 body margin 不一樣
IE6 預設 body margin 上下是 15px,左右是 10px。Firefox 等瀏覽器上下左右四邊的預設 body margin 皆為 8px。
http://www.quirksmode.org/bugreports/archives/2005/10/IE6_input_field_topbottom_unwanted_margin.html
2. 指定 DIV 高度(height)時,最小高度不同
例如:<div style="height:5px"> </div> 這個 DIV 的高度在 Firefox 中就是指定的5px,但在 IE6 中是 19px。
DIV最小高度的差異來自 IE6 不會將DIV高度設為低於文字內容之高度(和 font-size 有關
by
HP
-
網頁設計與語法(HTML/CSS)
我們在使用 DIV 時,通常目的都是在裡面寫上文字,而很常會為了讓畫面更好看,對「文字框 (DIV)」裡面的文字和邊框之間加上一段邊距、留白、內邊界(以上是等意詞)。特別是在 h2、h3等標題式文字的應用。
例如以某民間補習班的圖片為例子(上方和左方各留 25px 的邊距):
為了加上這 25px 的邊距,我們往往都會很直覺地使用 margin / margin-top 去「留白」,然後因為 CSS 官方很複雜的定義(margin collapsing),往往效果不如預期或甚至沒有效果。(這個沒有效果的情況可在上面這個「學苑」的文章中找到,但很遺憾的,這篇文章就是用了我所想強調不要用的 margin)
但不論 CSS margin 的定義和使用法有多複雜,問題是, margin 根本就不是這個意思, padding 才是留白的意思。如果我們把 DIV 等 block
by
HP
-
網頁設計與語法(HTML/CSS)
首先,補充幾個原作者 style.css 少漏或疏乎的地方:
1. 第15行 body{} 裡面的 color 少打了冒號 ( : )。
2. 第96行的 #footer_sponsors {} 應該要加上 margin: 0 auto; 這樣 #footer_sponsors 才會置中。
接下來說明 index.tpl 與 style.css 相互搭配而構成的整體佈局。同時參考上文 JinJin 老師所畫的圖示。
學習重點:指定寬度的雙欄式佈局-DIV float 的運用
1. 整個頁面是以 div#container (紅色大框的那一塊) 為主進行排版。裡面包括 logo、ad_space、top、content、footer 五塊子 DIV。整個佈局的重點在以div#content中的 #left 和 #right 作為雙欄式佈局的核心。以下對 co
by
HP
-
網頁設計與語法(HTML/CSS)
在ㄧ個 div 中,主要包括 content / padding / border / margin 四個部分,而我們在設定 CSS 的 background 時,常會搞不清楚 background-color、background-image 等設定的範圍到底到哪裡。其實,就是包括 content (文字部分),包括 padding,包括 border,但不包括 margin。而 border 的部分在 background-border 中指定就可以了。
所以,只要把握以上原則,就可以掌握 background 的範圍了。(下圖只是對Box Model的示意,並沒有畫出background的範圍,background就是到淺綠色的border那一段)
圖片引用自 wikipedia
參考資料
W3C 官方網站: http://www.w3.org/TR/CSS
by
HP
-
網頁設計與語法(HTML/CSS)
Page 2 of 2
Pages: 12