HP 的所有文章
Page 1 of 2
Pages: 12
Results 1 - 30 of 46
1. step5: 地標設定2. STEP6 HTML元素跳動效果>3. STEP7 燈箱式跳出頁面效果4. 2015/5/28上課影音5. 上課影片1. step5: 地標設定
重點:
CSS絕對定位:position: absolute;
CSS定位座標:top, bottom, left, right
1.加入視角及地標元件
FunTaipei
/* STEP 1: 佈景設計 */
body {
width:100%;
background-image:url(../images/bg.png);
overflow:hidd
by
HP
-
網頁設計與語法(HTML/CSS)
1. step5: 地標設定2. STEP6 HTML元素跳動效果>3. STEP7 燈箱式跳出頁面效果4. 2015/5/28上課影音5. 上課影片6. 整體設計7. 佈景設計8. 頂部選單9. 頂部細部設計10. 主佈局設計11. 上課影音6. 整體設計
.message-body img { width: 83% }
7. 佈景設計
step1.html
FunTaipei
body {
width:100%;
background-image:url(../images/bg.png);
overflow:hidden;
}
by
HP
-
網頁設計與語法(HTML/CSS)
美感,是一切人類才能的泉源。
[42:40 ~ 52:06]
康德美學:自由遊戲理論
1. 美,是知性與想像力之間的自由遊戲。
2. 知性,是概念與規則的泉源;想像力,是透過「聯想」,令概念產生感性意義(包括物質感與感受)的創作力。
這是我今天要跟各位介紹的東西:美學——康德美學。康德,他是17世紀、18世紀的人。在他之前,所有的人都認為美學是科學。
Slide 20 [65:11 ~ 66:43]
最後,我還要再講一下這個觀念,就是——美學理念 (Aesthetic Ideas)。
因為我們一般想 IDEA 或理念,我們都會覺得是理性,或者是一種概念。
可是我要和你們講,理念不是只有這樣子而已。我們的心靈狀態不是只能夠想像抽象的東西。
我們可以想像得出來的那種抽象的東西,那叫理性的理念,或者是概念的理念。比如說上帝,或者是我剛剛講的自由,等等......
by
HP
-
設計理論
1. step5: 地標設定2. STEP6 HTML元素跳動效果>3. STEP7 燈箱式跳出頁面效果4. 2015/5/28上課影音5. 上課影片6. 整體設計7. 佈景設計8. 頂部選單9. 頂部細部設計10. 主佈局設計11. 上課影音12. 設定「按鈕 / BUTTON」12.1 預設狀態與按下滑鼠時12.2 當滑鼠移至上方時13. 調整版型為全幅畫面14. 加入自動置中圖片14.1 HTML14.2 CSS 設定14.3 解決圖片下方間隙設計目標樣版與設計練習範例:
1. 設定 CSS Class:.ui-bar-a
.ui-bar-a {
border: none;
&
by
HP
-
手機版網頁設計(CSS/Javascript)
經過許久的調查後發現,原來問題差異是在「Doctype] 的宣告上。
如果是用 standard 的宣告,則只有在 IE 舊瀏覽器上會有問題,如果宣告成「HTML5」,則在幾乎所有的瀏覽器上會有「圖片下方空隙」的問題。
可參考以下網頁的「Almost standards mode」:
http://en.wikipedia.org/wiki/Quirks_mode#Almost_standards_mode
另外,底下這個文章也有提及相關問題(此文主要是介紹「DOCTYPE」):
http://www.fantxi.com/blog/archives/browser-mode/
by
HP
-
跨瀏覽器相容性網頁設計
這個問題也可以參考下面這篇文章的解說:
http://mepopedia.com/forum/read.php?804,17462
另外,如果這個問題和「跨瀏覽器」有關的話,建議也請說明這個問題在不同瀏覽器上不同的地方。如此對這個問題可以有更深入的了解。同時,如果和「跨瀏覽器」沒有關係會話,可能也不用強調這個問題是屬於跨瀏覽器的問題。
目前有一個可以觀察的例子是這個頁面(六~七世紀漢語文化圈的印度佛教思潮-國科會哲學學門人才培育計畫):
http://buddhica.nccu.edu.tw/
這個頁面 (或網站) 在 IE 瀏覽器中 (應該是 IE6~IE8 都有) 有水平導覽列圖片下方有空隙的問題,而在其他瀏覽器中似乎就沒有。我想這可能是個可以著手的地方。當然,這個空隙問題也不一定是和圖片標籤有關。這一點就需要進一步的分析。
最後,這個問題應該是和「
by
HP
-
跨瀏覽器相容性網頁設計
補充:
在 table 中設定 <table cellpadding="0"> 效果等於在 CSS 設定 td { padding:0;}。
也因此,在 CSS 設定一次 td { padding:0;} 就不用每次在 table 中設定 cellpadding="0" 了。
另外,CSS 中的 padding-left、padding-right 等屬性也適用於 td 中。用來控制 table/td 的 padding 非常好用。同時,這個用法也經過跨瀏覽器的測試,在不用的瀏覽器都能正常地使用。
by
HP
-
網頁設計與語法(HTML/CSS)
網址:http://host.cc.ntu.edu.tw/sec/schinfo/schinfo_asp/show.asp
不相容瀏覽器:IE8、Firefox3.6、Chrome16之間皆有所不同
IE8字比較不清楚。「一般事項」、「校內外徵才」的位置也和其他二個瀏覽器不一樣。而 Chrome16 的臺大校訊的「頂圖」則是會和整體版面不一致,整體版面會比頂圖大。
IE8
Firefox3.6
Chrome16
by
HP
-
網頁設計與語法(HTML/CSS)
作業七範例網址:
http://mepopedia.com/~jinjin/web/hw07-w
修正後:
http://mepopedia.com/~jinjin/web/hw07
IE6 畫面:
作業七的範例網頁主要在 IE6 上會有問題:
1. Table 會跑得很下面(會超過左欄內容,也就是基本上浮動失效)
原因其實也不是浮動失效,主要是 table 寬度設為 100%,IE6 會覺得要用整個 DIV 的寬度,也就是 950px 作業寬度,因此跑到下面。
解決方式我猜測是把 table 寬度設一個固定的類似 750px (或以下) 就可以了。
2. 水平導覽列會換行
這個很明顯地是因為導覽列太寬。但為什麼只有在 IE6?這剛好就是之前提的 3-pixel bug(三像素間距問題)。
解決方式不易。一個是如
by
HP
-
跨瀏覽器相容性網頁設計
有關你提到的「發現用"DW"做出來效果有時跟預覽出來不一樣,還蠻困擾的」。這也是為什麼老師要用原始碼教你們 DIV + CSS 作法的原因。
這樣才不會過於依賴 Dreamweaver,造成出了問題和預覽不一樣而不會解決的狀況。希望大家能體會啊!
另外,你的期中作業作得非常好,老師應該會給你非常高的分數。而且,上次和寫給你的「動態圖片置換」的方法你都有完整地作到與修改,其實不容易。而且也加上置中的排版,看起來更協調。
by
HP
-
100-1《中國》北視傳一B-網頁設計
「圖片空隙」是一個很經典的問題。以下面這位同學的網頁為例:
http://mepopedia.com/~web100a/hw04/hw04-1001445068/
在網頁最後的 #footer 部份可以看到最後有一整條很小但依舊在的「空隙」。
解釋如下:基本上 img 標籤不像 div 一樣是「區塊元素」,而是一個比較像文字的「內文元素」(inline element),也就是像是文字一樣。而為了讓像 y、g、j 這樣文字可以正常地顯示「尾巴」,所以在文字底下會有一些空隙讓文字能正常顯示。但對圖片來說,這個「空隙」通常不是我們想要的。
示意圖片:
解決方式有二:
1. 把 img 設定「區塊元素」:display: block。
2. 把 img 設為「垂直置底」:vertical-ailgn: bottom。
還有一個解決方式是
by
HP
-
網頁設計與語法(HTML/CSS)
Hello,
你犯了一個很典型的錯誤:檔名不能有大寫(尤其是 index.html 主頁)。你現在寫的是 index.HTML,伺服器是認不得的,所以你的網頁現在出不來。要改成 index.html。
我針對你的問題整理出二點,放在這篇文章中(目前的第一點與第二點就是以你目前的問題寫的):
http://mepopedia.com/forum/read.php?804,17300
主頁寫成大寫(index.HTML)的話就會出現下面的畫面:
by
HP
-
100-1《中國》北視傳一B-網頁設計
1. step5: 地標設定2. STEP6 HTML元素跳動效果>3. STEP7 燈箱式跳出頁面效果4. 2015/5/28上課影音5. 上課影片6. 整體設計7. 佈景設計8. 頂部選單9. 頂部細部設計10. 主佈局設計11. 上課影音12. 設定「按鈕 / BUTTON」12.1 預設狀態與按下滑鼠時12.2 當滑鼠移至上方時13. 調整版型為全幅畫面14. 加入自動置中圖片14.1 HTML14.2 CSS 設定14.3 解決圖片下方間隙15. 「檔名」注意勿用大寫16. 「路徑」勿以自己電腦的路徑為路徑17. [知識補充] 許多常見HTML標籤有預設邊距(margin)18. [實作經驗] 適當使用內距(padding)讓版面平衡15. 「檔名」注意勿用大寫
檔名盡量勿用大寫(或中文),尤其是 index.html 主頁。例如下圖中檔名寫成 index.HTML 而造成
by
HP
-
網頁設計與語法(HTML/CSS)
同學 骸蒼Aoi 您好:
我用你的網頁試作了一個你想要的效果,你看看如何:
http://mepopedia.com/~jinjin/web/hw04-1001445042-HP/work.html
我在 IE6、Firefox7測試過,應該都沒有問題。
我想先說的是,因為看到您作的網頁(作業)實在是很用心,就試了一陣幫你把效果作出來。
在說明我是怎麼改到現在的效果前,我還是要先講,底下的修改真得比較難。這是由於雖然 Dreamweaver 內建的一些動態功能雖然很好用,對非理工科系背景的設計師來說很好用,但內建的語法基本上就會比較沒有彈性,一遇到問題就很難改。不過因為我想你應該會想要學,所以我還是試著用你原來的作法作為基礎和你講解。如果太難的話,你直接用也可以。以下就「理論部份」和「實作部份」都和你作解說,希望你能在理論上和實作上都有一些收獲。
在
by
HP
-
100-1《中國》北視傳一B-網頁設計
Hello,
你遇到的問題主要是 HTML 前段的語法都少了!我貼給你相關的語法,請仔細比較一下少了那些哦!
主要的差異在作業一與作業二都有提到哦!可以再回去看看。
利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i0&&parent.frames.length) {
d=parent.frames.document; n=n.substring(0,p);}
if(!(x=d)&&d.all) x=d.all; for (i=0;!x&&i
by
HP
-
100-1《中國》北視傳一A-網頁設計
同學 s930335w 你好:
我看了你的原始碼,我發現應該是 css 檔(style.css)裡面一開始的 body 設定的後大括號不見了(就是 } )。你找一下應該就會發現。希望你知道我的意思。
啊,我想我直接貼出來給你應該會更清楚。
你的版本:
body{margin:0px;
background-color:#FC9;
加上大括號的正確版本:
body{margin:0px;
background-color:#FC9;
}
這樣你知道我的意思了嗎?
by
HP
-
100-1《中國》北視傳一B-網頁設計
這篇文章是回應某位同學的網頁設計作業,回應目的是這位同學使用了一些 CSS 的進階語法,但在IE中不支援,所以寫了篇文章和他說明及提供修改建議。(不過此作業中的網頁可能會有所修改,和原始繳交時不一樣。)
原文回應在:http://mepopedia.com/forum/read.php?855,16483,16659#msg-16659
同學你好:
我注意到你的網頁裡面使用了非常多的進階語法,而且裡面有許多 CSS3 的語法。CSS3 的語法的好處是很好用而且功能很強,但缺點就是其實最多人使用的瀏覽器以及版本(IE6~IE8)基本上是不支援的。所以,你可以找一個 IE8 的瀏覽器看一看你的網頁,你可以發現有幾個地方有很大的不一樣。
嗯,我想我直接作個截圖好了:
左邊的是 Chrome14 的效果,右邊的是 IE8。
細節就不提了。我想最
by
HP
-
跨瀏覽器相容性網頁設計
同學你好:
我注意到你的網頁裡面使用了非常多的進階語法,而且裡面有許多 CSS3 的語法。CSS3 的語法的好處是很好用而且功能很強,但缺點就是其實最多人使用的瀏覽器以及版本(IE6~IE8)基本上是不支援的。所以,你可以找一個 IE8 的瀏覽器看一看你的網頁,你可以發現有幾個地方有很大的不一樣。
嗯,我想我直接作個截圖好了:
左邊的是 Chrome14 的效果,右邊的是 IE8。
細節就不提了。我想最明顯的差異主要是「#header 背景圖的大小」和「#content 背景透明度」(在IE中背景沒有任何透明度)。
其實這二個問題不好解,我現在也沒什麼時間幫你試。我大致和你提我的看法與建議。
1. 背景圖的大小 (background-size)
「background-size」是 CSS3 才有的進階語法。在這個網頁你找一下可以看
by
HP
-
100-1《中國》北視傳一B-網頁設計
建議要點:
一、CSS 設定先後次序原則
body 等重要整體風格設定應放在 CSS 文件開頭,標籤及類別設定不應以任意順序加入。建議以以下順序加入:
1. 整體風格設定(如body或自定之#main、#wrapper,主要為設定版面寬度、背景、基本字體、版面置中與否等)
2. 基本風格設定(如h1、h2、p、a、table等)
3. 區塊視覺設定(如#header、#content、#footer)
二、區塊修改建議
區塊之間之間距建議以 padding 或 margin 控制,儘量勿以段落標籤 <p> 等以「內容」方式讓版面中之區塊有間距。
頂圖區塊:#wikiheader
#wikiheader 的 background 設定應由原本之向右改為向左 (background: left)。
內容區塊:#content
#conten
by
HP
-
跨瀏覽器相容性網頁設計
一、基礎
定位屬性(position)顧名思義是一種CSS屬性(property),設計的目的是在達到「絕對定位」的排版需求。既然是「屬性」就會有「預設值」,position 的預設值是 static(靜態定位),其效果就是我們平常所認知的「從上到下、由左至右」的排版效果。也就是說,每一個HTML元素(div、p、span等)就算我們沒有設定,都會有一個 position 屬性,同時是以 static 的形態存在,版面也照著我們所預期的而官方文件稱為「自然流動」的方式排列著。
在繼續介紹之前,讓我們整理一下position常用的三種設定值與效果:靜態定位(STATIC)、相對定位(RELATIVE)、絕對定位(ABSOLUTE)。
二、基本概念:Relative 與 Absolute
基本語法:
#phorum div.message-body br {clear
by
HP
-
網頁設計與語法(HTML/CSS)
Inilne style (直接在標籤中設定) 的用法:
直接在 <img> 中寫上 style="display:block; margin:auto;" 。例如:
<img src="圖片網址" style="display:block; margin:auto;"/>
CSS 用法:
img {
display:block;
margin: auto;
/* max-width: 500px; 建議可加上「最大寬度」讓圖片不會過大。500px只是一個例子*/
}
附注:這個用法應是跨瀏覽器相容的。
by
HP
-
網頁設計與語法(HTML/CSS)
#phorum div.message-body br {clear:none;}首先,而要達到「文繞圖」。在 <img> 裡面加上 style="float:left" (圖片置左) 或 style="float:right" (圖片置右) 就可以了。
例如:
<img src="圖片網址" style="float:left;"/> (圖片置左)
<img src="圖片網址" style="float:right;"/> (圖片置右)
同時,這邊要特別提醒的是:「無論置左置右,圖片都要放在文字之前」。不然就失去效果了。例如,這篇文章的第一個小公仔就是放在文章的一開始,而第二個小公仔就是放在第一段文字的「......就可以了。」之後。這樣編排後,就會出現現在文章中的效果。
以這篇文章的原始碼作為「文繞圖」的例子,請特別注意文字與圖片的「前後關係」
by
HP
-
網頁設計與語法(HTML/CSS)
觀察要點2:
依 W3C 官方定義,段落 <p> 的前後會有預設「一個字體大小(font-size)= 1em」的 margin,但在實例觀察中, IE6 和 IE7 沒有這個預設 margin。
若習慣於 IE6/IE7 的設計,沒有考慮到官方定義的預設段落 margin,就會出現下圖中頁尾部份的多餘空隙(紅框中的灰色部份)。在紅框中是以段落 <p> 所構成的一個空白行,因為預設的上下邊距,所以整個段落(紅框部份)有三行行高。但依 CSS Box Model 的官方定義,段落(任何元素)的背景(background)不包括邊距,所以淡藍色(#FAFAFA)的背景顏色無法出現在下邊距(margin-bottom),形成三不管地帶。最後這個三不管地帶由於沒有元素管轄,所以就繼承了 <body> 的背景顏色(#E3E3E3)。
預設段落邊距(margin)
by
HP
-
跨瀏覽器相容性網頁設計
1. 要記得加上 width(在 IE6 中不加 width,overflow 會無效)。
例如:
pre{
overflow: auto;
width: 700px;
}
2. 若只有水平捲軸,對 IE 瀏覽器請將垂直捲軸(overflow-y)移除。
IE 和 Firefox 比較:IE 的水平捲軸會「算在區塊裡面」,所以造成本來沒有的垂直捲軸又跑出來。若要解決,請將垂直捲軸設為隱藏: overflow-y: hidden。
參考資料:
http://remysharp.com/2008/01/21/fixing-ie-overflow-problem/
3. 有些HTML標籤要設為 display:block:例如 <xmp>
在 IE8 中會把 <xmp>(功能是把HTML tag視為純文字,全不解
by
HP
-
跨瀏覽器相容性網頁設計
觀察網頁:暨大外文系友會 - 生涯經驗分享
觀察時間:2011年9月23日
觀察瀏覽器:IE6、IE7、IE8、Firefox6、Chrome13
1. IE6 眼中的系友會百科
簡要觀察:頁面右側有多餘的空隙。(此空隙由當下區塊所繼承的 background-color 填滿)
2. IE7
簡要觀察:頁面右側有多餘空隙的問題沒有了,但出現表格(table)寬度超過主文區塊(#wikitext)的問題。
Firefox6 眼中的系友會百科(此結果和 IE8、Chrome 類似)
簡要觀察:
1. table 與主文區塊(#wikitext)相衝突。(不是 table 太寬就是 #wikitext 太窄)
2. footer(上方)部份有多餘空隙。
HTML 佈局簡要示意
..
by
HP
-
跨瀏覽器相容性網頁設計
我想在這個主題之下能分享優良的比賽作品,應該對許多同學有更多幫助。
例如今年台科大的一位同學參加「紅點」比賽的獲獎作品:
另外,該校另有三件作品獲獎。請見:
http://www.libertytimes.com.tw/2011/new/aug/13/today-life6.htm
by
HP
-
設計比賽
有關 DOCTYPE 宣告的部份,建議可以下列 HTML5 新制定的語法宣告。這個語法不僅可以讓網頁支援最新的 HTML5 語法,也可相容 IE6、IE7、Max IE5等舊型瀏覽器,是一個既簡潔又可相容新、舊瀏覽器的語法:
(HTML 5 新式宣告)
(HTML 4.01 舊式宣告)
不過比較仔細的同學可能會有這樣的疑惑:新式宣告裡面什麼也沒有,沒有寫 HTML 4.01 或 XHTML 1.0 等資訊,那瀏覽器怎麼知道是用什麼模式讀取網頁?又或者,舊型瀏覽器開發的時候又沒有 HTML5,它怎麼知道 HTML5 是用這樣的宣告?
by
HP
-
100-1《中國》北視傳一A-網頁設計
其實要做的事很簡單,只是因為觀念不清楚,今天在改東西的時候超結設定一直出不來。後來發現原因,所以寫個文章記錄一下。
要設定某個類別(class)的文字顏色時,會以以下語法設定(這邊以 article 這個英文字作為自定類別名稱):
.article{
color: white;
}
上面的意思是類別 article 的文字顏色設為白色。
若要設定屬於類別 article 的超連結顏色,就要在 .article 前面加上 a。(要注意 article 前面要加 .)
a.article{
color: white;
}
今天一直設不出來的原因是,我把 a.article 寫成 article.a(其實寫網頁寫這麼久了,還會有這種錯誤真是......)。
「a」寫在前面的原因是它是 HTML 內建的共用功能標籤,是比較「高位」的。而 aritl
by
HP
-
網頁設計與語法(HTML/CSS)
Page 1 of 2
Pages: 12