[網頁版型]CSS DIV單欄直行萬用版型

2015.04.15 / 分類: awei研究室, 網頁版型 / 0 則回應

利用Div標籤與CSS建立單欄直行萬用版型

以前我們在規劃版型時常用表格(TABLE)或頁框(FRAME)，來製作網頁版型與架構，但是由於時代的進步，目前網頁設計的架構，多半以DIV搭配CSS為設計主流，利用Div標籤來建立網頁區塊，並且規劃頁面做為主要的排版架構，而CSS語法則是用來美化網頁，在加上javascript等程式特效就是一個完美的網頁了。

設計方式我的習慣是先建立一個風格CSS檔取名為style.css
再以外部載入檔案的方式崁入目標網頁
雖然CSS也可以直接寫進一個html頁面，但是如果頁面資料一多，有時要找到需要更改的項目將會相對困難

規劃好自己的版面並且定義區塊

首先我們先在紙上畫好自己想要的版型區塊，並且進行有意義的定義ID
最外層包覆整個版型的Wrapper
主要標題Header
內容區塊Content
頁尾Footer

singal_tilte_s1

1.建立一個新的html檔.並載入style.css

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>單欄網頁awei測試頁</title>
<link rel=stylesheet type=”text/css” href=”style.css”>

<body>

</div>
</body>
</html>