目前日期文章:200707 (14)

瀏覽方式: 標題列表 簡短摘要
/*(Step 5)設定連結(link)的屬性*/
在談連結屬性之前,我們得先談一下連結的概念,在網頁中我們可以最常選擇文字或圖片來作為連結客體,當我們按下連結文字或圖片時,網頁就會轉向(redirect)到我們指定的連結位址去。而HTML語言中,連結的語法不外是下面兩種:
<A HREF="指定的連結位址">設定作為連結的文字內容</A>
<A HREF="指定的連結位址"><IMG="設定作為連結的圖片位址"></A>


這表示在Container這個選擇器下,可以指定文字與圖片連結的表現形式,以及當滑鼠移到這連結時,所出現的hover效果。在一般網頁原始碼中,連結的標籤的程式碼會是這樣的形式:
<A HREF="指定的連結位址">設定作為連結的文字內容</A>

這原始碼呈現出的網頁效果,會只是簡單的底線表示此文字帶有連結,當滑鼠移到連結處時,就會根據瀏覽器的設定更改顏色。如果我們想讓某一個容器標籤下的連結式樣有些不同,我們就必須在這個容器標籤下,額外宣告一種特殊的上下文選擇器(Contextual Selector)。以Container容器為例,在這容器標籤下所連結的一段文字,網頁原始碼會大概是下列的情況:<Div ID=Container>...<A HREF=""></A>...</Div>

這表示如果我想讓Conatiner容器下的連結標籤所呈現的樣式效果,跟原本的網頁效果不同,那我就得額外如下宣告:
#Conatiner a {
color:#3399FF;/*顏色改為#3399FF色碼*/
text-decoration:none;/*文字不加底線*/
}

克里斯 發表在 痞客邦 PIXNET 留言(1) 人氣()

容器標籤內可置放的網頁元素,當然有很多種。但依照目前PIXNET的部落格型態,能夠透過CSS修飾外觀的,不外是文字(text)的字型與段落、圖片(image)、表格(table)、表單(form)及連結(link)的顯示。所以接下來我們來談的,就是設定這些內部相關元素的屬性。由於CSS中對於更改同一屬性的方法有時會有多種表示法,我想只要可以達到目的就好,沒必要把所有表示法全部列出來,我可不是在寫規格表。為避免文章過長,這篇內容只介紹字型與段落文字的屬性。

/*(Step 3)設定字型的屬性*/
font-family:"Trebuchet MS",細明體,新細明體;
/*設定字型為"Trebuchet MS"、細明體、新細明體這幾種字型,英文字型須加上引號表示,字型之間要以半形逗點作區隔。當然,你可以設定一堆奇特的字型,但是如果其他人沒這字型的,你設定了也沒用。*/

克里斯 發表在 痞客邦 PIXNET 留言(0) 人氣()

在寫文章之前,得先解釋一下瀏覽器程式與標籤的運作。當IE或FireFox等瀏覽器讀取網頁原始碼而讀到標籤時,它就會去找尋跟這標籤有關的屬性值,如果瀏覽器所讀到的標籤是帶有選擇器(可能是ID或Class)的,那麼它就會到CSS樣式表中尋找那個選擇器的內容。因此,ID選擇器就是IE等瀏覽器的線索。以<Div id= "Container ">為例,Container這個關鍵字就是一個ID選擇器,瀏覽器程式會去CSS中尋找Container這個關鍵字所定義的屬性值,讀取之後就顯現在網頁。

從前篇文章的圖示可以知道,在Grey模板中,<Div id= "Container" >這個容器標籤是個起始,由於這個父輩標籤包含了所有其他的容器標籤,因此其他子標籤也就得繼承他的所有屬性(可能是家產,也可能是負債)。談到繼承,我想就用我國目前財產繼承制度作個解釋範例,大家就當我閒扯吧。根據台灣的民法,如果子女不打算繼承父母親的遺產(這情形多發生在父母留下龐大的債務),就得在繼承開始後六個月內向法院聲請『拋棄繼承』,如果不依照法律向法院提出這樣的宣告的話,作子女的就得扛起父母的負債

轉到CSS樣式語法,也同樣是這個道理,子標籤如果要有自己的樣式屬性,就得站出來革命,表達「我要有自己的個性」,得在CSS中提出自己個別樣式的宣告,不然子標籤就必須繼承父標籤中的樣式。無論如何,先不管未來自己的小孩想不想繼承老爸留下的遺產,但當老爸的一定要爭氣,至少不能留下爛攤子給兒孫收拾。<Div id= "Container ">這個容器標籤也相同,我們得先定義好它的所有屬性,這樣日後在處理其他標籤時,就會輕鬆很多,如果不打算個別宣告,就可以讓其他子標籤直接繼承它的屬性就好。

克里斯 發表在 痞客邦 PIXNET 留言(4) 人氣()

從程式碼中我們已整理出含有CSS樣式的所有HTML標籤,而這些標籤看起來很多,但本質上不外是下面這幾種而已。
<DIV>(容器區塊)、<Span>(容器區塊)、<Table>(表格)、<P>(段落)、<Input>(輸入欄位)、<a>(文字)、<h4>(標題文字)。

Grey模板中最多的HTML標籤應該是<DIV>(容器區塊,Container Tag),這標籤透過Class選擇器或ID選擇器去選擇個別樣式的屬性,容器區塊所涵蓋的範圍很大,這標籤裡就如同容器一樣可以容納其他HTML標籤元素。一個容器裡面還可以裝另一個容器,但是第二個容器裡面的屬性如果沒有重新定義的話,就會繼承(Inherit)上一層容器的屬性。不知道大家有沒有看過俄羅斯娃娃,最外面的一個大娃娃裡面包了一個中娃娃,中娃娃裡面包了小娃娃,整個Grey模板的部落版面基本上就像這樣,因此我們必須知道容器的上下隸屬關係,才能有效控制我們的部落格版面。
從網頁原始碼中,我們可以得知Grey模板的容器區塊約略是這樣的從屬關係:

克里斯 發表在 痞客邦 PIXNET 留言(4) 人氣()

說實在的,這系列的研究文章並沒有太高深的技術學問,寫這些文章的動機只是想"把磚頭丟出來看能不能砸到專家秀出玉石出來",希望做為有心想改CSS樣式者的一個入門。

我也不是什麼程式專家,學法律的我,專長向來是套用,套用一切既有的邏輯。CSS的本質並非程式語言,充其量只能說是標籤語法的一部分(嚴格說來是樣式語法),所以能做的有限,無法像程式語言那般可經過邏輯編排迸出新的功能,故非著作權保護之標的。由於坊間所有的教學文章或書籍,多是資訊背景的人寫的,其實有點寫的太過"天書",比較適合專攻網頁美術或程式的人,對於只想改自己部落格外觀的人來說,有點太過複雜。所以在這裡,我也拋掉原本法律專欄文字的拘謹,用比較平淺的方式看能不能給朋友們一點入門的幫助。

CSS做的只是MAKE UP版面,讓既有版面模版發生一些外觀上的變化。目前PIXNET提供四組部落格模版,每個模版皆有其差異,類別(Class)與ID選擇器的命名也有所不同。由於很多人是直接到後台套用某個模板的既有樣式,之後再作部份修改,但因為分享樣式的人撰寫CSS的習慣頗有差異,所以常發生套用者找不到特定ID去修改樣式個別值的窘境。基此,我的建議是要學就從源頭開始,這當然是檢視網頁的原始碼。

克里斯 發表在 痞客邦 PIXNET 留言(1) 人氣()

認識我的人都知道我討厭小孩。
說是討厭小孩,還不如說因為我愛寵物多一些。所以我跟老婆抱著頂客族的堅持,把愛心給了我們家的寵物,以前是Bobby、Kiki,現在則是小比。

但是,無論如何,我都有不得不跟小孩相處的機會(夢靨),尤其是跟一群小孩…

克里斯 發表在 痞客邦 PIXNET 留言(7) 人氣()

Google宣佈擴展Google Print Ads的涵蓋版圖,並且把這服務包裹成Google Adwords的服務之一, Google Print Ads是2006年11月就啟動,這項具有測試性質的臨時服務,最初僅在50份報紙與部份廣告媒體中運行,但目前已經擴展到225份報紙,這些報紙的總發行量影響力已不可小覷,這代表Google大神當初的眼光沒有錯。透過Google Print Ads這項單一介面服務,廣告代理商或廣告主們就可以直接向多家報紙媒體購買平面廣告版面,不用再個別向每一家媒體詢問。當然,這對報紙媒體來說也有好處,他們可以吸收從Google這個平台來的客戶,尤其這些客戶又多半是新客戶。

克里斯 發表在 痞客邦 PIXNET 留言(1) 人氣()

本篇網誌同步發表於2007年8月《PC home》雜誌

被網友們戲稱為「丁丁大站」的無名小站,在七月四日無預警地要求會員們必須重新完成認證程序,引發軒然大波,除了在BBS以及部落格中公開對丁丁大站嗆聲外,還有網友們直接訴諸媒體要求給個公道。

整件風波起因於7月4日,無名小站以網站擬改採SSL網 路傳輸標準、提昇全體會員的帳號使用安全為理由,進行全面的密碼更改作業。公告中提及因為網路經常傳出有惡意人士入侵、攻擊的事件,擔心使用者的帳號、密 碼、姓名、地址、電話等個人資料遭到盜用,所以突發性地要求會員全面更改密碼。然而,因為無名小站是將認證密碼寄往會員所登錄的郵件帳號中,由於不少會員 都是資深部落客,從學生時代就已經註冊,長年註冊的學生帳號早已年久失效,根本無法收到認證信,這些資深部落客瞬時進不了自己的部落格,抱怨聲四起,彷彿柯董附身狂喊「丁丁大站,還我帳號來!!」。
(擷圖引用自http://blog.xdite.net)

克里斯 發表在 痞客邦 PIXNET 留言(1) 人氣()


酒後不開車 安全有保障

克里斯 發表在 痞客邦 PIXNET 留言(6) 人氣()

天氣實在太炎熱了,決定今日中午來吃握壽司配啤酒,小比遠遠地看著我的午餐,我知道他正肖想什麼...

小比,就算你把頭放在桌子上,我也不可能給你吃的!!可以停止裝可愛了...

克里斯 發表在 痞客邦 PIXNET 留言(9) 人氣()

東京行第二日,上午安排參觀東京地區大型的書店「淳久堂」,這家書店的規模真的挺大的,光結帳櫃台就大概有十幾處。由於日本的書店多禁止拍照,因此我並未踰矩只在外頭拍了書店大樓外觀,以免壞了規定。

中午用餐是安排自由行,先前來東京時,就來過「淳久堂」書店過,所以知道這附近有家很不錯的拉麵店「麵創房」。

克里斯 發表在 痞客邦 PIXNET 留言(1) 人氣()

什麼情況下需要雙證件?

1.申請電信服務
《固定通信業務管理規則》第 49- 2條 『經營者應核對及登錄其用戶之資料,經載入經營者之系統資料檔存查後始得開通,並至少保存至服務契約終止後一年;有關機關依法查詢時,經營者應提供之。前項用戶之資料包括姓名、身分證統一編號、第二證件號碼、地址及所指配號碼等資料。』

克里斯 發表在 痞客邦 PIXNET 留言(0) 人氣()


這是此次東京行的最後一天,雖然一早就在飯店裡用了早餐,但大家還是迫不及待地要到築地市場享受美食,今天旅行社安排的就是讓我們到這家著名的壽司店用午餐。還不到十二點,喜代村本店外頭就排滿了不少人。

我們也在裡面稍等了一下,趁這個機會,我趕緊拍下一樓的場景,這完全是標準的日式料理亭情境,之後我們被安排到第三階去。

克里斯 發表在 痞客邦 PIXNET 留言(0) 人氣()

WEB 2.0所帶來的改變

克里斯 發表在 痞客邦 PIXNET 留言(0) 人氣()