Welcome! 登入 註冊
美寶首頁 美寶百科 美寶論壇 美寶落格 美寶地圖

Advanced

FileZila FTP上傳圖例教學-Re: [作業01] 以html與css完成第一個網頁

[作業01] 以HTML與CSS完成第一個網頁

前言:

基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前,能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習,自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候,能更如虎添翼,舉一反三了!

Let's go!!!大家一起加油吧!!!!

===========================================

建議需先安裝的軟體

---------------------------------------------------------------------------------------

FileZilla 免費又好用的FTP軟體,供客戶端和伺服器端使用

官方下載網頁:http://filezilla-project.org/

---------------------------------------------------------------------------------------

好用的免費記事本軟體
Notepad++官方網頁:http://notepad-plus-plus.org/

---------------------------------------------------------------------------------------

FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: FireBug ,五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體,是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀,從各個不同的角度剖析Web頁面內部的細節層面,給Web開發者帶來很大的便利。

在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可

---------------------------------------------------------------------------------------

推薦很棒的CSS網站

---------------------------------------------------------------------------------------

CSS-TRICKS http://css-tricks.com/

HTML & CSS基礎教學影音(必看,雖然是英文,但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/

---------------------------------------------------------------------------------------

其他HTML & CSS相關網站
有空可多多研讀,增加自己的功力

HTML
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

CSS
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/ptcomputer03_2/hcss/cssintroduction.htm
CSS教程(簡體)http://www.dreamdu.com/css/

---------------------------------------------------------------------------------------

HTML的最基本結構

<html> <head> <title> </title> </head> <body> 您所要在瀏覽器顯示的內容 </body> </html>
---------------------------------------------------------------------------------------

網頁所有檔案命名原則:

1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁),依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內,資料夾請以學號命名,每一個作業請依序以:
hw01-學號,為資料夾名稱,若有圖檔,請於網站資料夾內另開圖檔專屬資料夾( img 或 images )

---------------------------------------------------------------------------------------

作業一的步驟與要求:
請自行以自己的內容,完成以下需求

1.於記事本上打入第一行你要打的字(中英文皆可,如:WELCOME MYWEB!!!!)

2.儲存為index.html於桌面,可直接將檔案拉入Firefox,觀看預覽效果

3.如果想把字體變得又大又粗,可以用<標題1>的語法,於字的前後加上
<h1> 大標題 </h1>

大標題


儲存後,一樣於Firefox重整觀看效果

4.接下來,打入我們的第二行文字,用以下p 語法來換行

<h1>嗨!大家好</h1> <p>welcome to my website!!!</p>

嗨!大家好

welcome to my website!!!



5.接著我們另存新檔為: about.html,製作第二個頁面,新增如下文字:

<h1>嗨!大家好</h1> <p>welcome to my website!!! 想要再多學一點嗎?......</p>
接著加入超連結語法 a ,如下:

<h1>嗨!大家好</h1> <p>welcome to my website!!! <a>想要再多學一點嗎?......</a> </p>
拉入Firefox預覽效果

6.要出現連結效果還要加入以下語法:

index.html
<h1>嗨!大家好</h1> <p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
about.html
<h1>嗨!大家好</h1> <p>welcome to my website!!! <a href="index.html">回到首頁</a> </p>
即可以呈現互相連結的效果
重整Firefox預覽效果

7.如果想要在標題字增加不同的視覺效果,如改變顏色
就要開始進行簡單的CSS設定
我們可以先直接在h1中直接加入style的語法



<h1 style="color:red;">嗨!大家好</h1> <p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
重整預覽,index的標題則會出現紅色的字,可是about則還是黑色


8.接著我們要在html網頁架構上,讓他更加的完整
首先加入body的語法
補充:BODY之間則為主要語法所在,也是網頁的主要呈現部分。

<body> <h1 style="color:red;">嗨!大家好</h1> <p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p> </body>
重整之後,看起來沒甚麼不同

9.接著再把html語法的架構寫的更完整
把最外層的html包進去,再加入於body之上,設定頂部head語法的部分,如下
其中 tilte語法呈現的視網頁標題的部分,會出現在瀏覽器上,並便於搜尋

<html> <head> <title>歡迎來到JinJin的網頁</title> </head> <body> <h1 style="color:red;">嗨!大家好</h1> <p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p> </body> </html>
10.接著我們開一個新的文件檔,將之命名為style.css
沒錯,CSS要登場了
甚麼是CSS呢?
CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件,便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡,縮小檔案下載的速度。
(4)適用於各種作業平台。


(1).首先先在index.html的title底下打入如下語法(這比較難背,可以直接貼上):
<link rel="stylesheet" href="style.css" media="screen" />
(2).把index.html裡h1後的style設定剪下,預覽一下,紅色不見了
<html> <head> <title>歡迎來到JinJin的網頁</title> <link rel="stylesheet" href="style.css" media="screen" /> </head> <body> <h1>嗨!大家好</h1> <p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p> </body> </html>
(3).接著在新的style.css檔案裡鍵入

h1{ color:red; }
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定,結果如何呢?


11.接著,可以自己改變顏色,可參考:
網頁色碼選擇器: http://rhinejo.myweb.hinet.net/home/color/color-cord.html
Adobe Kuler: http://kuler.adobe.com/
調色盤-色票產生器: http://cowwu.myweb.hinet.net/note/js/Color.htm
MyChat 調色盤 http://mychat.to/pub_java/selcolor.htm

也可以改變字體大小,於style.css設定如下

h1{ color:#AC5C52; font-size:12px; }
重整FireFox看效果

12.接著於文字的外層包上一層div

補充說明:
被DIV或SPAN標籤包起來的文字、圖片...任何東西,瀏覽器都會將之視作一個物件。

被DIV包住的網頁元件會變成一個「區塊物件」,也就是會「自成一塊」,旁邊的東西的會被擠到上一行或下一行去,自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起,不會斷行,也不會自成一塊。可以視不同的狀況,使用不同的標籤。


index.html
<html> <head> <title>歡迎來到JinJin的網頁</title> <link rel="stylesheet" href="style.css" media="screen" /> </head> <body> <div id="main"> <h1>嗨!大家好</h1> <p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p> </div> </body> </html>
style.css
h1{ color:#AC5C52; font-size:16px; } #main{ /*div id前面要加上#*/ width:500px; /*寬度*/ margin:0 auto; /*置中語法*/ background-color:#eee; /*背景色*/ padding:10px; /*div內部距離*/ } body{ background-color:#004EA0; /*body的背景色*/ margin:0px; /*貼緊頂部底部以及左右*/ }
重整會發現在新版的FireFox以及Chrome是正常的居中,IE卻無法置中

13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼,一般會有,直接貼上即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="http ://www.w3.org/1999/xhtml" > <head> <title>歡迎來到JinJin的網頁</title> <link rel="stylesheet" href="style.css" media="screen" /> </head> <body> <div id="main"> <h1>嗨!大家好</h1> <p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p> </div> </body> </html> ==========================================================

補充:
標籤說明:網頁其實就是一堆標籤(所謂標籤就是指被<>包起來的語法)集合起來的,透過瀏覽器的消化整理,就便成了美侖美奐的網頁了。

簡單而言,通常一份完整的網頁包含了二個部份:標頭(HEAD)、文件主體(BODY)。也就是在上面所看到的以及。

---------------------------------------------------------------------------------------

繳交作業的方式:

1.以FTP上傳至老師指定位置,每一個作業都會有一個相對應的資料夾
如:第一個作業的資料夾為:hw01
每位同學請將自己的資料夾命名為:hw01-學號
這個作業的網址則為:http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx

2.切勿擅改別人的資料檔案,若經發現則以零分計


---------------------------------------------------------------------------------------

這禮拜請同學按照以上做法,
以自己設定的文字內容,字體大小、文字、背景顏色等等
做html與css的設定

至少兩個可以互相連結的html檔,其中首頁命名為index.html,
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內

並請回覆本篇文章

1.作業網址

2.有無遇到的問題,製作作業的時間

完全達成要求即有100分




Edited 18 time(s). Last edit at 09/29/2011 04:19PM by mepoadm.
(編輯記錄)

有關 DOCTYPE 宣告的部份,建議可以下列 HTML5 新制定的語法宣告。這個語法不僅可以讓網頁支援最新的 HTML5 語法,也可相容 IE6、IE7、Max IE5等舊型瀏覽器,是一個既簡潔又可相容新、舊瀏覽器的語法:

<!DOCTYPE html> (HTML 5 新式宣告) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> (HTML 4.01 舊式宣告)
不過比較仔細的同學可能會有這樣的疑惑:新式宣告裡面什麼也沒有,沒有寫 HTML 4.01 或 XHTML 1.0 等資訊,那瀏覽器怎麼知道是用什麼模式讀取網頁?又或者,舊型瀏覽器開發的時候又沒有 HTML5,它怎麼知道 HTML5 是用這樣的宣告?

就我的了解是這樣的。在文件型態(DOCTYPE)的宣告原則中,因為已假設會使用 DOCTYPE 的網頁設計者是「內行人」,也就是說知道要宣告 DOCTYPE 才會進入使用官方語法的「標準模式」才會使用,所以就算宣告得比較不完整或比較簡略,也都沒有問題,都會進入「標準模式 Standard Mode」。

所以,對舊型瀏覽器而言,它雖然不知道什麼是 HTML5,但還是會進入標準模式(儘管是使用 HTML4.01)。而對新式瀏覽器而言,當然就更沒有問題,直接進入支援 HTML5 的標準模式了。

最後,提了這麼多的「標準模式」倒底是什麼呢?基本上就是相較於 Netscape 和 Internet Explorer 還在大戰時的「一套標準各自解讀」時期,各家舊瀏覽器的「各自解讀」模式,到後來約 2000年推出完整支援 CSS (CSS Level1) 的 Mac IE5,才開始支援 HTML/CSS 標準語法的「標準模式」。但,進入了大家(勉為其難)開始支援標準模式的時期,那舊時代的網頁怎麼辦?所以就發明了一種模式叫作 Quirks Mode,專門用以處理舊式設計規則的網頁。因為舊式網頁當然沒有 DOCTYPE 的宣告,所以,「不要宣告 DOCTYPE」就會進入屬於舊瀏覽器模式的 Quirks Mode。

最後的最後要提醒在設計網頁時要記得加上 <!DOCTYPE html> 的宣告,這樣網頁才不會被歸類為「舊時代的產物」,也才能讓 CSS 的相關語法「正確/正常」地將功能呈現。


相關詳細的說明與相容性整理可見維基百科(英文):
http://en.wikipedia.org/wiki/Quirks_mode#Comparison_of_document_types



Edited 3 time(s). Last edit at 09/13/2011 05:34PM by HP.
(編輯記錄)

1.網址: http://mepopedia.com/~web100a/hw01/hw01-1001445096/index.html

2. 沒什麼大問題,都按照步驟看著做。時間上就上課時間做...在家有練習一點點,(之前有介面互相連結失敗過,但後來沒問題了。

1.作業網址: http://mepopedia.com/~web100a/hw01/hw01-1001445086

2.基本上還好,上傳時有點搞不清楚~
不過教學內容大致了解~

http://mepopedia.com/~web100a/hw01/hw01-1001445056/
沒什麼太大的問題,速度放慢一些之後有懂得比較多smiling smiley



Edited 1 time(s). Last edit at 10/04/2011 09:46PM by 1001445056.
(編輯記錄)

老師的講解步驟非常詳細 大致上是沒問題tongue sticking out smiley

FileZila FTP上傳圖例教學

因學校網路似乎有阻擋FTP上傳功能
因此製作圖例說明上傳方式

http://i1136.photobucket.com/albums/n481/parkparkyang/web01-01.jpg

http://i1136.photobucket.com/albums/n481/parkparkyang/web01-02-1.jpg

http://i1136.photobucket.com/albums/n481/parkparkyang/web01-03.jpg

http://i1136.photobucket.com/albums/n481/parkparkyang/web01-04.jpg



Edited 3 time(s). Last edit at 10/20/2011 04:31PM by mepoadm.
(編輯記錄)

作業網址: http://mepopedia.com/~web100a/hw01/hw01-1001445114

沒有太大問題.老師在網路po文可說非常清楚

http://mepopedia.com/~web100a/hw01/hw01-1001445007

我覺得老師教得很仔細
跟我高中的老師相比好太多了TAT..........
因為以前學過了~除了CSS的地方之外沒什麼問題

http://mepopedia.com/~web100a/hw01/hw01-1001445080
老師上課速度放慢後變得很容易理解 ~~
回家也花了一些些的時間做了個小練習 ~~

1.http://mepopedia.com/~web100a/hw01/hw01-1001445009/index.html

2.沒有很大的問題 之前有些不太了解的地方也能在論壇上找詳細的方法 順便複習 smiling smiley

1.作業網址: http://mepopedia.com/~web100a/hw01/hw01-1001445118

2.給老師的話:
老師愈教愈好,上課有認真聽的話真的學到很多東西thumbs up

1. http://mepopedia.com/~web100a/hw01/hw01-1001445019/

2. 大致上還好,沒什麼問題



Edited 1 time(s). Last edit at 10/04/2011 09:36PM by SAIN.
(編輯記錄)

http://mepopedia.com/~web100a/hw01/hw01-1001445066/

沒有特別的問題 老師的說明相當清楚詳細

1.http://mepopedia.com/~web100a/hw01/hw01-1001445037/


2.大致OK



Edited 1 time(s). Last edit at 10/05/2011 11:24AM by 1001445037.
(編輯記錄)

spinning smiley sticking its tongue out http://mepopedia.com/~web100a/hw01/hw01-1001445124/

: ) 實際操作很重要!!



Edited 1 time(s). Last edit at 10/05/2011 12:06PM by shiyi1126.
(編輯記錄)

http://mepopedia.com/~web100a/hw01/hw01-1001445082
我上傳好了
老師辛苦了 !!!!
免強可以跟上!!!!spinning smiley sticking its tongue out

作業網址 : http://mepopedia.com/~web100a/hw01/hw01-1001445052
問題 : 其實問題不多 只希望可以再慢一點 了解了吧!!!!

http://mepopedia.com/~web100a/hw01/hw01-1001445098

作業是在上課期間完成!!約半小時至一小時即可吧(邊看說明邊做)!!spinning smiley sticking its tongue out



Edited 1 time(s). Last edit at 09/28/2011 04:32PM by 0零零0.
(編輯記錄)

MEPOERs said:
mepoadm: 第二個頁面也要記得加上 style.css 這個檔案哦。請再檢查一下!
Re: [作業01] 以html與css完成第一個網頁

學號1001445074

1. http://mepopedia.com/~web100a/hw01/hw01-1001445074

2.這次放慢都聽的懂!問題不大~

http://mepopedia.com/~web100a/hw01/hw01-1001445011

filezilla有點問題所以是請同學幫我上傳上去的

MEPOERs said:
JinJin: 要把首頁檔名改成 index.html,目前是index(1).html
1. http://mepopedia.com/~web100a/hw01/hw01-1001445072
2. 速度放慢之後基本上沒什麼問題



Edited 1 time(s). Last edit at 10/04/2011 07:15PM by yaya0127.
(編輯記錄)

Re: [作業01] 以HTML與CSS完成第一個網頁

1.http://mepopedia.com/~web100a/hw01/hw01-1001445084

2.沒遇到什麼問題 , 老師講解速度放慢後都比較清楚了 .

http://mepopedia.com/~web100a/hw01/hw01-1001445040
我做了兩個小時多

雖然不是很美
但是我有用心做

1.作業網址: http://mepopedia.com/~web100a/hw01/hw01-1001445118
2.給老師的話: 愈教愈好!!上課認真聽講真的可以學到很多東西thumbs up



Edited 2 time(s). Last edit at 10/04/2011 09:38PM by 連竟成.
(編輯記錄)

MEPOERs said:
JinJin: OK的!一起加油吧!
完成作業了!我絕得如果老師以後也能這樣交的很仔細速賭也不要太快的話,我應該能把網頁設計學會winking smiley

MEPOERs said:
JinJin: 哈!謝謝你!一起加油吧!不過要把網址附上喔!
1.網址:http://mepopedia.com/~web100a/hw01/hw01-1001445013
2.沒什麼問題,上課速度放慢後變得容易理解

1.作業網址:http://mepopedia.com/~web100a/hw01/hw01-1001445076/index.html

2.剛開始覺得很難不熟悉,但老師不僅重複教一次還放慢速度,回家後也花了一些些時間練習,
就覺得並沒有想像中困難,反而是對上傳的filezilla有點問題所以是請同學幫我上傳的。

1.作業網址:http://mepopedia.com/~web100a/hw01/hw01-1001445078


2.大致上沒問題~ 不過css有點不懂耶 其他的老師都說得很清楚 製作時間大概半小時以內smiling smiley

1 J:\聖元的大學課程\網頁設計課\hw01-1001445041\inder.html
2 剛開始學比較難 但是有老師的網站 學起來便快了很多!! 謝謝老師

1. http://mepopedia.com/~web100a/hw01/hw01-1001445130

2.上課速度有點快,切換畫面也有點太快@@但是老師的講義很清楚,其實仔細看蠻好上手.

1.作業網址: http://mepopedia.com/~web100a/hw01/hw01-1001445033



2.還OK啦!只是很多英文單字要弄清楚...大概四個小時!!
 
 
 
 
 
 



Edited 1 time(s). Last edit at 10/05/2011 12:05PM by saf19927.
(編輯記錄)

網址 http://mepopedia.com/~web100a/hw01/hw01-1001445134/
第一次學所以有點困難

MEPOERs said:
HP: 這位同學你很白目耶,居然在作業裡面寫網頁設計這們課很無聊。你是不想過了嗎 (科科)?
1.http://mepopedia.com/~web100a/hw01/hw01-1001445104

2.雖然家裡是無法上傳,不過今天上課已繳交

1.http://mepopedia.com/~web100a/hw01/hw01-1001445100
(上次被同學不小心覆蓋到的)
2.大致上都聽得懂 網站上有詳細說明很方便!