Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

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

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

1. 參考講義


1.[講義01] 以 HTML 與 CSS 完成第一個網頁
2.[講義] FileZila FTP上傳圖例教學




2. 需下載的軟體


FileZilla 免費又好用的FTP軟體,供客戶端和伺服器端使用
官方下載網頁:http://filezilla-project.org/


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




3. 繳交作業的方式



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

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




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

2.至少兩個可以互相連結的html檔,其中首頁命名為index.html,另一檔案可命名為about.html
3.以及一個命名為style.css的css樣式檔

存放在hw01-學號的資夾內

並請回覆本篇文章

1.作業網址:

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



4. 參考範例



1.http://mepopedia.com/forum/read.php?855,15612
2.http://mepopedia.com/forum/read.php?851,15597
3.http://mepopedia.com/forum/read.php?976,20201



Edited 1 time(s). Last edit at 09/16/2012 08:41PM by JinJin.
(編輯記錄)

1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445243
2.心得:完成啦~~不過字體好像設的有點小!!字好多喔!!分段分到快起肖了



Edited 1 time(s). Last edit at 09/29/2012 09:13PM by 1015445243.
(編輯記錄)

MEPOERs said:
JinJin: 動作很快,但還沒完全做完,記得補齊喔!
1.作業網址 : http://mepopedia.com/~web101c/hw01/hw01-1015445235
2.心得 : 我覺得很難啊 婷勻教了我好久



Edited 2 time(s). Last edit at 09/20/2012 08:21PM by 1015445235.
(編輯記錄)

http://mepopedia.com/~web101c/hw01/hw01-1015445206

哈哈 有點晚交 sorry ~到現在才會回應文章= =

1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445261
2.心得:研究了一下語法,慢慢懂得如何應用,途中有一個語法寫錯,結果就跑不出來自己想要的結果很像玩遊戲!!

MEPOERs said:
JinJin: 不錯不錯,動作很快,而且差不多了耶,給你拍拍手!還有一個margin:0px;貼緊上下的語法可以試試!
1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445203

2.心得:找了外框語法找了好久哈哈,不過終於做到進度,真開心smiling smiley
剛剛在用FTP還傳錯資料夾嚇死我了XD大家辛苦了~~~老師教師節快樂唷!!!



Edited 1 time(s). Last edit at 09/28/2012 09:47PM by 1015445203.
(編輯記錄)

MEPOERs said:
JinJin: 哈!妳超前進度了XD
1015445203: 真的假的><是因為圖片嗎haha
1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445234
2.心得:有去找貼背景音樂的語法...但是貼上去之後都沒有音樂@@

MEPOERs said:
JinJin: 你的style.css的s寫成大寫所以設定樣ˋ無法顯示喔!
了解!!
已經修改好了也重新上傳了~~

1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445215

2.心得:做完一小段就覺得很有成就感,很想繼續作下去 !! 不過做到後面插入圖片後,
圖片有時候可以顯示有時候又不行顯示,不太懂是哪裡出問題。

MEPOERs said:
JinJin: 因為無名的相片是浮動的,無法插入
JinJin: 你可以找有.jpg的圖檔網址,或者存下來另外上傳,方法課堂之後會說明
1.作業網址:http://mepopedia.com/~web101c/hw01/hw01-1015445240
2.心得:我搞錯了,我用成發表文章,刪不掉.......



Edited 1 time(s). Last edit at 10/05/2012 01:31AM by 1015445240.
(編輯記錄)

MEPOERs said:
JinJin: 幫你刪除了喔!有多加語法!可多發表一點心得XD
1.作業網址:http://mepopedia.com/~web101c/hw01/hw01-1015445255/index.html
2.心得:我有點怕麻煩 ㄏㄏ

知道我是誰嗎~~~

MEPOERs said:
JinJin: 哈!我知道你是班代啊XD,你的網址其實http://mepopedia.com/~web101c/hw01/hw01-1015445255 就可以了 : )
rgy759153: 哈哈 是喔
1.作業網址:http://mepopedia.com/~web101c/hw01/hw01-1015445245

2.心得: 本來用好了動畫,想放進去,但是不知道怎麼做><



Edited 5 time(s). Last edit at 10/06/2012 09:01PM by 1015445245.
(編輯記錄)

MEPOERs said:
JinJin: 你的問題是資料夾名稱打錯,你的是how01-1015445245,應該是hw01-1015445245,多了一個o,更名就好了
1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445219

2.心得:真的有點複雜,非常感謝耐心聽我問問題的同學們,太感謝他們了 spinning smiley sticking its tongue out

MEPOERs said:
JinJin: 不錯呀!還是做出來囉!配色不錯喔!繼續加油囉!
作業網址:http://mepopedia.com/~web101c/hw01/hw01-1015445214/hw01-1015445214/about.html
心得:真的越做越有成就感,每一次只要重新整理就會有驚奇啊!哈哈哈哈哈

MEPOERs said:
JinJin: 厲害唷!很認真耶!果然有驚奇!
JinJin: 不過我發現你作業放的路徑有點多,需要再整理清楚
1.作業網址:http://mepopedia.com/~web101c/hw01/hw01-1015445270/
2.心得:急急忙忙花了快1小時左右簡單完成,有點混亂還有許多要研究的

MEPOERs said:
JinJin: 不錯喔!不過配色的部分可以再研究研究怎麼會更好!
1.作業網址:http://mepopedia.com/~web101c/hw01/hw01-1015445216/

2.心得:抓到訣竅後就做得很快了、順便稍微研究了一下圖片的放法XD



Edited 1 time(s). Last edit at 10/07/2012 04:18PM by sp39678910.
(編輯記錄)

MEPOERs said:
JinJin: 不錯喔!
作業網址:http://mepopedia.com/~web101c/hw01/hw01-1015445263
心得:哈哈小老師還要請教別人 還是謝謝貝貝教我 有好多語法都還不清楚

MEPOERs said:
JinJin: 哈哈!還是做出來囉!不過還要設padding(內距),還有第二頁要回來第一頁
1.作業網址:http://mepopedia.com/~web101c/hw01/hw01-1015445228
2.心得:拖很久又很陽春內容有點小中二的網頁.....TAT

MEPOERs said:
JinJin: 配色還不錯,但內容多些效果會更好喔!
1.作業網址:http://mepopedia.com/~web101c/hw01/hw01-1015445269

2.心得:做完之後發現無法置中,卻找不到問題在哪,希望老師可以告訴我,
而且學會架簡單的網站,很實用很開心.

MEPOERs said:
JinJin: 你的width: 1500px;太寬了,要設定1000px以下才看得出效果喔!加油喔!還有你本來傳到外面,我先幫你搬進來!
1.作業網址http://mepopedia.com/~web101c/hw01/hw01-1015445221
2.心得:花很多時間在語法上,反覆嘗試弄蠻久,配色還是怪怪的

MEPOERs said:
JinJin: 語法應該比較沒問題了!配色的確需要多時間練習,也可以多觀察好的作品!
1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445218
2.心得:第一次自己寫網頁程式好好玩^_^

MEPOERs said:
JinJin: 還不錯喔!不過內文用色非常大膽!會屬於特定族群!
1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445250
2.心得:摸了很久...終於清楚多了
P.S老師我不小心發文到別的地方了 麻煩幫我刪掉一下= =



Edited 1 time(s). Last edit at 10/08/2012 02:14AM by sena5555.
(編輯記錄)

1.作業網址 : http://mepopedia.com/~web101c/hw01/hw01-1015445208
2.心得 : 貼好多圖片~開心smiling smiley找圖找好久

MEPOERs said:
JinJin: 很不錯喔!繼續加油唷!
1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445244
2.心得:完—全—不會用(黑臉)好難用喔

1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445225
2.心得:我要GG了!!!!! 但還是很愛上你ㄉ課!

MEPOERs said:
JinJin: 哈哈!OK的!謝謝你愛我的課呀~ : )
作業網址 : http://mepopedia.com/~web101c/hw01/hw01-1015445254
心得:是因為貼上維基的字,所以"現"後面都會出現"?",不能跳下一行,想貼圖不知怎麼用...

語法部分都背不起來@@ 使用還不習慣 所以我做得很簡單@@ 大家好強都會貼圖O口Q

http://mepopedia.com/~web101c/hw01/hw01-1015445207

MEPOERs said:
JinJin: 現階段先以了解和看懂語法為優先,作品OK喔~繼續加油!
http://mepopedia.com/~web101c/hw01/hw01-1015445202
我覺得做得很有挫折感
連結做不出來
圖片也無法用
老師快救救我!

MEPOERs said:
JinJin: 看起來沒問題啊!先別緊張,目前還沒有提到圖片的部分,真的很想知道的話,下次會講喔!
作業網址:http://mepopedia.com/~web101c/hw01/hw01-1015445252
心得:
雖然還沒很熟悉,但終於完成囉~其實還滿有趣的第一次接觸網頁設計
靠自己打程式語法做出網頁實在太神奇haha~~

MEPOERs said:
JinJin: 不錯喔!繼續加油啦!
1.作業網址:http://mepopedia.com/~web101c/hw01/hw01-1015445201
2.心得:一堆的程式,有點小複雜,最後終於按照一步驟一步驟完成了。放了兩個css檔,這樣是可以的嗎?

MEPOERs said:
JinJin: 不錯啊!第一頁用色可以再稍微大膽一點點,小檔案用一個CSS就可以了
1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445248

2.心得:一開始會覺得有點難懂,不過越做越上手!

MEPOERs said:
JinJin: 做的不錯喔!
http://mepopedia.com/~web101c/hw01/hw01-1015445241/

老師您好.我做這樣行嗎?

MEPOERs said:
JinJin: 內容豐富點會更好喔!
1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445229

2.心得: 終於傳成功了...基本的語法搞懂 慢慢就知道怎麼運用 然後想去研究新的語法~
自己做網頁很有成就感 很有趣!!!
用IE看的話有些東西看不到......



Edited 2 time(s). Last edit at 10/15/2012 12:01PM by 1015445229.
(編輯記錄)

1015445262

http://mepopedia.com/~web101c/hw01/hw01-1015445262

剛開始做的時候 其非常不熟練
但之後搞懂會做了 就很有成就感

1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445213
2.心得:怎麼跟我繳交的不一樣 好奇怪為什麼會這樣 但好有趣!!!!!

1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445271
2.心得:第一次做這個網頁設計很有成就感~因為覺得超難...

1.作業網址 : http://mepopedia.com/~web101c/hw01/hw01-1015445222
2.心得 : 有點似懂非懂,還要在加油T T

1.作業網址 : http://mepopedia.com/~web101c/hw01/hw01-1015445223
2.心得 : 研究好久,可是會了以後就好喜歡做喔!^^

1.作業網址:
http://mepopedia.com/~web101c/hw01/hw01-1015445258
2.有無遇到的問題,製作心得與製作作業的時間 :
原來網頁是這麼麻煩的東西,可是做完的感覺還是非常好哈哈
希望下次可以更跟得上進度 老師對不起不是故意鑰匙交不要扣太多分謝謝拜託!

1.作業網址 :http://mepopedia.com/~web101c/hw01/hw01-1015445246
2.心得 :屋~~~終於做完了~~,沒做完,感覺較好像一顆石頭壓著我阿,真可怕!!

http://mepopedia.com/~web101c/hw01/hw01-1015445239

摁摁做好很久沒上傳... 因為忘記當初的帳號麻~~~

1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445233
2.心得:好像有點難哈哈哈哈哈.

1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445251

2.有無遇到的問題,製作心得與製作作業的時間
拖的有點久 做到現在還是一頭霧水 很多語法還搞不太懂 都是看範例複製貼上的 希望能趕快學會囉
最後也謝謝老師耐心的教導

1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445217

2.心得 : OH YAEH 我交了第一次的網頁設計

1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445230

2.心得: 終於該死的回覆作業了 抱歉@ _@



Edited 1 time(s). Last edit at 11/05/2012 02:56AM by 1015445230.
(編輯記錄)

1.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445209
2.心得:高中教的都忘得一乾二淨了,但現在慢慢的想起來拉~

.作業網址: http://mepopedia.com/~web101c/hw01/hw01-1015445226
2.心得: 傳了很多次都找不到 還好最後有弄好

1.作業網址:http://mepopedia.com/~web101c/hw01/hw01-1015445236/
2.心得:終於做完了



Edited 1 time(s). Last edit at 11/05/2012 05:03PM by 1015445236.
(編輯記錄)