無論如何，想要對自家的Blog有任何的想法之前
必須認識HTML CSS Javascript這些東西
認識的越深，可以做到的事就越多
首先，簡單的認識一下 這三樣東西分別是甚麼
1.HTML 網頁建立和其它可在網頁瀏覽器中看到的資訊
2.CSS 一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言
3.Javascript 客戶端的腳本語言
仔細一點來說明，一個網站是用來傳遞訊息的資訊載具
HTML就是儲存這些「資訊」的結構
想想，我要傳遞的一篇文章中，可能有段落，表格，或是註解等等
在中文作文中，規範空兩格作為段落開頭
同樣的，HTML是這樣的規範規則。明顯的資訊結構描述方式並不唯一
也許，你還聽過Markdown或是TeX他都有類似的目的
不過，HTML是網站中最為廣泛的「標準」
而CSS是對HTML呈現方式做再定義
主要是如果透過HTML本身做許多關於呈現方式的定義顯得過於瑣碎
我們希望HTML文本，單純為了傳遞資料存在
但是，資料呈現的方式也想當重要，我們就把這項工作
搬到CSS中還完成，一份CSS必然的要搭配一套HTML
Javascript可以做一些多樣的效果，這裡先略過吧。
我們回頭複習一次HTML與CSS
HTML是資料的載具，CSS是呈現資料的形式
事實上，HTML也提供一些對外觀的語法
很少，而且簡單，在HTML5中更多描述外觀的基本語法被移除，
並且改由CSS來提供例如：
粗體
同時，給予原本的布局元素提供語意
- 2014/11/20(木) 22:43:44|
- FC2樣板
-
| 引用:0
-
| 留言:0
研究樣板，就讓我們從FC2的預設樣板開始吧
對於樣板，還是必須了解HTML
為了瞭解HTML對應位置，準備一個好的瀏覽器
例如說chrome或是IE都是可以的
簡單來看HTML代碼
html
head
body
div super_container
div right
div left
div footer
在div right之外僅存在一組簡單的標題與標題的超連結
<h1><a href="<%url>"><%blog_name></a></h1> <h2><%introduction></h2> |
稍微有點HTML概念的立刻會看出<%url>這個標籤不是HTML標籤
沒錯這是FC2的變數標籤，之後會被系統替換成正確的內容
首先我對這段小代碼有點想法，例如用<header>把她包起來
實際上，這樣做沒甚麼意義，至少現在是這樣的
我們繼續看
div left顯然是這個二分版面的左側，也就是內容的部分
<h3><a id="<%topentry_no>" name="<%topentry_no>"><%topentry_title></a></h3>
<div class="body">
... |
這段即是主要的內容區塊
<%topentry_body> 就是你文章的所有內容 他會把文章的HTML碼完全的搬過來
包含CSS與Javascript很有趣吧
我想這樣應該就夠了，我們來從新編寫一個更簡單的樣版
只要可以顯示文章就夠了 範例如下：
| <div id="left"> <!--topentry--> <h3><a id="<%topentry_no>" name="<%topentry_no>"><%topentry_title></a></h3> <div class="body"> <%topentry_body> </div> <!--/topentry--> </div> <div id="footer"> <p><%ad> <%ad2></p> |
<!--/topentry-->是必須的，雖然看似是沒用的註解但是系統會去分析這些東西下一步就是CSS
因為現在的樣板被大量簡化之後
我們需要關心的樣式表也少非常多
除了基本的標籤還有
super_container
left
body
footer
之後我們再來改這些鬼玩意
我想先把這些代碼稍微調整成HTML5的形式
- 2014/11/19(水) 21:32:43|
- FC2樣板
-
| 引用:0
-
| 留言:0