前言:
基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前,能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習,自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候,能更如虎添翼,舉一反三了!
Let's go!!!大家一起加油吧!!!!
===========================================
[color=#990000]建議需先安裝的軟體[/color]
---------------------------------------------------------------------------------------
好用的免費記事本軟體
[color=#990000]Notepad++[/color]官方網頁:http://notepad-plus-plus.org/
---------------------------------------------------------------------------------------
[color=#0033CC]FileZilla[/color] 免費又好用的FTP軟體,供客戶端和伺服器端使用
官方下載網頁:http://filezilla-project.org/
---------------------------------------------------------------------------------------
FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件:
[color=#0033CC]FireBug[/color] ,五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體,是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀,從各個不同的角度剖析Web頁面內部的細節層面,給Web開發者帶來很大的便利。
在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可
---------------------------------------------------------------------------------------
[color=#990000]推薦很棒的CSS網站[/color]
---------------------------------------------------------------------------------------
[color=#CC6600]CSS-TRICKS[/color] http://css-tricks.com/
HTML & CSS基礎教學影音(必看,雖然是英文,但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/
---------------------------------------------------------------------------------------
其他HTML & CSS相關網站
有空可多多研讀,增加自己的功力
[color=#663300]HTML[/color]
1.HTML教學導覽 http://www.powmo.com/
2.HTML 簡介與應用 http://neural.cs.nthu.edu.tw/jang/books/html/
3.HTML Tutorial http://www.w3schools.com/html/
4.HTML教學 http://www.pcnet.idv.tw/pcnet/html/html.htm
5.HTML教學示範 http://www.csie.nctu.edu.tw/~jglee/teacher/content.htm
6.HTML 語言簡介 http://203.71.199.2/HTML/%E4%BD%95%E8%AC%82HTML.htm
7.HTML教學 http://m7.dfps.tp.edu.tw/chen/main5/ahtml/01.asp
[color=#663300]CSS[/color]
CSS語法教學攻略篇 http://andyliudesign.idv.tw/31
CSS 語法教學 http://css.1keydata.com/tw/
語法 | 基本的css語法縮寫 http://blog.mukispace.com/css-shorthand/
CSS 樣式表簡介 http://www.pt.ntu.edu.tw/hmchai
您所要在瀏覽器顯示的內容
---------------------------------------------------------------------------------------
[color=#CC0000]網頁所有檔案命名原則:[/color]
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁),依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內,資料夾請以學號命名,每一個作業請依序以:
hw01-學號,為資料夾名稱,若有圖檔,請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
[color=#660099]作業一的步驟與要求:[/color]
請自行以自己的內容,完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可,如:WELCOME MYWEB!!!!)
2.儲存為index.html於桌面,可直接將檔案拉入Firefox,觀看預覽效果
3.如果想
[color=#006600]把字體變得又大又粗,可以用<標題1>的語法[/color],於字的前後加上
大標題
儲存後,一樣於Firefox重整觀看效果
4.接下來,打入我們的
[color=#006600]第二行文字,用以下p 語法來換行[/color]
ttp://www.dreamdu.com/css/
---------------------------------------------------------------------------------------
HTML的最基本結構
您所要在瀏覽器顯示的內容
---------------------------------------------------------------------------------------
[color=#CC0000]網頁所有檔案命名原則:[/color]
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁),依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內,資料夾請以學號命名,每一個作業請依序以:
hw01-學號,為資料夾名稱,若有圖檔,請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
[color=#660099]作業一的步驟與要求:[/color]
請自行以自己的內容,完成以下需求
儲存後,一樣於Firefox重整觀看效果
4.接下來,打入我們的
[color=#006600]第二行文字,用以下p 語法來換行[/color]
嗨!大家好
welcome to my website!!!
1.於記事本上打入第一行你要打的字(中英文皆可,如:WELCOME MYWEB!!!!)
2.儲存為index.html於桌面,可直接將檔案拉入Firefox,觀看預覽效果
3.如果想
[co嗨!大家好
welcome to my website!!! 想要再多學一點嗎?......