我有想過為什麼我之前學做網頁會失敗
發現有兩個原因
1.主題分類不明確
2.沒有先學排版
其實我那個時候也算是有主題的，我本來想要做一個自我介紹的網頁
可是我參考了別人的自我介紹之後突然變得很沮喪
因為再怎麼介紹，也就只有一兩頁而已
(不過現在我知道了，自我介紹也是可以很豪華的)
總之不管是自我介紹也好，其他的主題也好
先把內容分類整理好，也就是先定義好你的選單
選單數量最好4~6種之間剛好是小有所成的數量
所以這次交代我做的活動網頁對我來說就是一個很好的主題
(也就是一個實用的網站該有的樣子)
決定好內容之後
接下來就是要怎麼呈現
為什麼我會說要先學排版
因為網頁設計有各種不同的效果
但是這些效果都要搭配排版才會變得美麗
而且學會排版最重要的一點就在於
就算只會一點點語法
也可以做出漂亮的網頁
這跟我以前想要拿一本書慢慢練習的想法真的差很多
我覺得這大概也就是我資料庫沒有學好的原因吧
如果時間允許當然可以這樣做
但是有些東西想要學起來還是要從實用層面著手
也跟我們lab boss的要求、這個社會的潛規則很像
我們不要你全部學完才整碗端出來 這樣太久了
而是要一邊學一邊就端出來給別人看
既然要給別人看
就要學會包裝自己的東西
雖然說是學排版
可是排版也是有難易度的
所以不太可能一開始就可以百分之百排出自己想要的樣子
可能是我真的太晚頓悟
google後的結果發現網路上一大堆關於網頁排版的教學
其中用CSS+div標籤達到排版的效果是我覺得最適合初學的人學習的
教學非常的簡單，我看的是這個 → http://mepopedia.com/forum/read.php?804,16271,16499
因為我要做的是雙欄的，當然也有人分享 → http://www.flycan.com.tw/board/modules/newbb/viewtopic.php?topic_id=300
看了上面兩個網址的教學加上我前面說的東西
我整理出了一些重點步驟
1.決定內容並分類
不用做到所有的內容都準備好的程度，而是分類好就可以
2.認識基本版型並設計版面
因為我們是初學者，所以應該先從基本版型練習
不要一下子追求多特別的排版方式
即使是基本版型也可以有很多種變化
我選擇了雙欄版型之後便開始設定我想要呈現的大小
就是我上一篇畫的設計圖的樣子囉
3.決定實作工具
在上面的網址中有提到兩種實作方法
第一種是以單純的HTML加CSS的方式撰寫
第二種則是以DREAMWEAVER來製作排版
其實我們每個人的電腦裡面都有一個最簡單的寫網頁的工具，那就是 記事本
記事本雖然不能幫你debug，但是無論是寫程式寫網頁，都還是一個使用的選擇呢
說到設計網頁的工具，我以前有碰過微軟出產的frontpage
可是我腦海中第一個出現的是adobe的dreamwever
明明從來都沒有用過但是不知道為什麼
我就是覺得這個工具一定可以做出我想要做的東西!?
結果我其實還是不知道這個到底好不好用...因為我的方式就是開啟兩種視窗
左側是網頁的code，右側是預覽的樣子
我也完全沒有用視窗上面的任何一個按鈕
但是光是這個樣子就讓我覺得好方便
所以我使用的方式比較像是兩種方式的合體版
4.最基本的語法
上面1.2.3.點什麼都準備好了之後，還是要會用才可以阿
▓在網頁架構中<body>跟</body>之間加入div標籤
這個是我自己設計的div標籤
<div id="wrapper"> <!--最外層包裝 -->
<div id="header"></div> <!--頁首 -->
<div id="adlogo"></div> <!—網頁形象圖片 -->
<div id="main_nav">....</div> <!—側選單 -->
<div id="content"></div> <!--內容區 -->
<div id="footer"></div> <!--頁尾 -->
</div> <!--最外層包裝 結尾-->
▓加入css設定檔
加入css有兩種方式，都是加在網頁架構中的<head>跟 </head>之中
第一種是直接加入
<style type="text/css">這裡是css樣式</ style >
的二種就是將css跟網頁分開(外部呼叫)，自己做一個css檔(較佳)
這個又有兩種做法
一種是用link標籤(較佳)
<link rel=stylesheet type="text/css" href="css的路徑">
一種是用匯入
<style type="text/css">
@import url(css的路徑);
</style>
雖然第二種有很多優點不過我選擇的方法是第一種直接加入，我是覺得對初學者而言先學會用一種使用方法之後再看能不能包裝得更好
▓怎麼寫css
因為我也是個愛玩部落格css樣式的人
所以我也算是比初學者進階一點點
目前就我所知道有三種設定
第一種就是自己所設定的div標籤
在剛剛第一個加入div標籤的id名稱是自己取的，並不是原本就有的
所以在css裡面名稱前面要加上”#”
#wrapper {
/*這裡是樣式設定*/
}
#header {
}
# adlogo {
}
# main_nav {
}
#content {
}
#footer {
}
第二種就是原本就有的標籤
例如<body>, <p>, <img>, <a>這些常見的標籤
在css裡面名稱前面不必加上”#”
body{
}
img{
}
a{
}
不過這裡想提到一個繼承的用法
就是如果我寫了一個樣式設定是長這樣
#header p {
}
這裡面的p繼承了#header
所以<p>的設定只會在header的div區塊內生效
第三種是class
其實我們的範例並沒有用到class
所以我現在也沒有什麼特別得心應手的心得
只是在css的寫法中名稱前面要加上”.”
這個範例是我在網路上找的讓文字產生陰影的語法(但是IE就是不能用Q_Q)
.shadow {
filter:progid:DXImageTransform.Microsoft.Shadow(color='#FFFFFF', Direction=135, Strength=3);
}
使用的方式如下
<p class="shadow">輸入文字</p>
Class還有更多用法，但是我覺得初學的我目前到這樣就可以了
===========2014/11/19補充=======================================
後來我還是用到了
用在文章排版的地方
我設計了三個類型
p.indent1 {
padding-left:15px;
text-indent:-2em; /*除首行皆縮排(首行凸排)*/
margin-left:2em;
font-family: 微軟正黑體,Arial;
font-size:16px;
}
p.indent2 {
padding-left:90px;
text-indent:-3em; /*除首行皆縮排(首行凸排)*/
margin-left:3em;
font-family: 微軟正黑體,Arial;
font-size:16px;
margin:2px auto;
}
p.indent3 {
padding-left:15px;
text-indent:-3em; /*除首行皆縮排(首行凸排)*/
margin-left:3em;
font-family: 微軟正黑體,Arial;
font-size:16px;
}
使用的時候是這樣用
<p class="indent1">裡面放文字</p>
<p class="indent2">裡面放文字</p>
<p class="indent3">裡面放文字</p>
這樣就可以讓文字排在自己想要的地方
=================================================================
以上我大概花了幾天的時間就全部弄好了
所以我突然有距離一個專業網頁的樣子不遠了的錯覺
====20150114補充===================================================
在CSS裡面常常要設定大小
在這裡補充一下設定大小的單位
以我做的網頁的話，我只用了兩種單位
px 跟 em
但是其實還有rem, pt, %, 還有新的 vh, vw 跟 vmin等等....
可以上網查查看這些有什麼差別 ↓
http://www.1keydata.com/css-tutorial/tw/length-units.php
http://ithelp.ithome.com.tw/question/10130500
其實我一開始通通都是用px為單位
因為我看到很多別人寫的CSS都是用px
px指的就是像素（Pixels），也就是螢幕顯示的基本單位
所以在指定大小的時候用這個單位通常不會有什麼問題
但是我在做文字排版的時候覺得px真的是很難用
一直沒辦法排到我想要的位置
這時候我才認識到em這個單位
http://jas9.blogspot.tw/2011/09/pxemrem.html
解釋如下:
em並不是任何專有名詞的縮寫，而單純只是指一個大寫字母「M」所佔有的寬度
為什麼是大寫字母「M」呢？
因為在所有字母裡，M是最接近全尺寸滿格的一個
所以把它拿來當作衡量字體大小的單位應該也最恰當
所以我覺得em很適合用來做文字排版的單位
然後也有人說用%比較好 → http://blog.longwin.com.tw/2007/12/css_px_em_difference_2007/
我是覺得如果沒有這麼一絲不苟
以我來說
px跟em就已經可以達到不錯的效果了
真的要專業下去就是要針對網頁的狀況去選擇單位囉
附上px跟em的單位換算表
http://www.flycan.com/article/css/css-em-to-px-87.html
=================================================================
5.用不同的瀏覽器開開看吧
上面才在那邊得意很快的我又馬上遇到問題
那就是dreamwever所讓你預覽的效果並不會在所有的瀏覽器(我只有用IE跟google chrome)都可以看到一樣的效果
我發現原因就是每個瀏覽器對div的排版方式並不會全部都一樣
如果你的內容區塊很多，很容易就會有跑掉的情形
如果你不想要排版跑掉，就必須設計出嚴謹的div排版
於是我在這當中學會了”放格子”的概念
這個意思就是，把要放的內容都當成一個個格子
當格子數量太多的時候，就拿一個更大的格子將這些格子裝進去
雖然我上面一開始提到的排版其實就已經很像我說的放格子了
但是我指的是連內容都要一層一層用格子裝起來
算是”排版放格子”的進階版放格子
以上就是我的學習流程，老實說自己都覺得，這系列文大概就這篇比較有價值吧哈哈哈哈哈
請先 登入 以發表留言。