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

Advanced

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

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

1. 參考講義


1.[講義01] 以 HTML 與 CSS 完成第一個網頁



2. 需下載的軟體


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




3. 繳交作業的方式



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

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




這禮拜請同學按照講義的步驟及做法,自選文字主題。

1.以自己設定的文字內容,字體大小、文字、背景顏色等,盡可能以最具美感的配色與配置為主
做html與css的設定

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

存放在hw01-學號的資夾內

http://i.imgur.com/pUK69i6.jpg



並請回覆本篇文章

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-104xxxxxxx

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



4. 參考範例


作業參考
(1) http://mepopedia.com/~web103-a/hw01/hw01-1005445193/
(2) http://mepopedia.com/~web103-a/hw01/hw01-1025445151/
(3) http://mepopedia.com/~web103-c/hw01/hw01-1025443044/

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445014

2.覺得進度有點快,可能還在消化前面就進行到下一個步驟了,
但上次問完老師,作業大致上是沒甚麼問題~

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1035443110

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
差不多做了一小時左右,有一些小步驟有些忘記,但看了影片就會回復印象

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445017

2.
有無問題:無
製作心得:第一次學網頁設計,非常有趣,且都能跟上老師的進度並受益良多,之後也會以認真的心態來面對。
風格:簡約甜美風
製作時間:2~3小時



Edited 1 time(s). Last edit at 10/13/2016 01:38PM by lemon2016.
(編輯記錄)

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445182

2.
有無問題:無
製作心得:覺得非常有趣。
風格:粉嫩系列
製作時間:1小時

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445095

2.因為兩個網面要設計,所以要搞懂是在寫哪一個的語法,
然後看完講義和聽了老師的講解有越來越理解網頁的架構。

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445119

2第一次上網頁設計覺得好難喔喔喔~~

1. 作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445125

2. 做網頁還蠻簡單蠻好玩的 只是邏輯要清楚一點才比較能搞懂順序排列hot smiley
希望可以學到更多~~~~~~~~~~~~~smileys with beer謝謝老師thumbs up



Edited 1 time(s). Last edit at 10/13/2016 12:08PM by OuO1045445125.
(編輯記錄)

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445062

2.第一次上網頁設計感覺很新鮮cool smiley,英文太爛看得有點辛苦hot smiley

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445161

2.製作心得 : 只要一小個分心,就會造成很多跟不上進度,但靜下心來複習過之後,會發現沒有想像中的困難,以後會增加自己的專注力。
風格設定 : 因為是情歌,所以色系設定成溫暖甜蜜色調
製作作業的時間 : 3小時



Edited 1 time(s). Last edit at 10/13/2016 12:14PM by 1045445161.
(編輯記錄)

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445080

2.有時程式碼會搞混,我發現網頁設計還蠻有趣蠻好玩的自己是蠻有興趣的,而製作風格是走粉紅泡泡因為歌詞屬於比較甜甜的感覺,製作時間大概3小時。

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445008

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

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445002

2.有無遇到的問題
有時候會不小心打錯語法,要找一段時間才會發現

製作心得
原本以為網頁設計很困難,因為之前完全不懂的時候去看了CSS,一堆英文字跟數字排在一起,覺得根本不是我的世界該出現的東西XDDD
後來理解構造後後就覺得滿好玩的,希望可以學更多語法

風格設定
我做的網頁內容是某個遊戲裡的偶像團體,他們的風格比較流行跟時尚,團體主色調是黑色,所以在背景上我就選擇使用它們的主色調,
歌詞背景的部分則是配合歌詞內容去調整顏色,但直接跟黑色放在一起好像有點太跳痛(?)
所以嘗試弄出白框,希望感覺有比較緩和一點點(?)
然後歌詞的標題也試著改成每首歌適合的顏色,讓整體不要都是黑白跟灰階。

製作作業的時間
上課
(第一個頁面的Youtube連結放錯了,之後改>"<)

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445146

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

第一次接觸網頁設計覺得很新鮮,只要有html和css的基本概念就可以架構出簡單網頁,另外老師的講義也條理有序,照著步驟也可以快速完成,所以有哪些部分忘記了也不用擔心,可以看講義重拾記憶

兩首歌都是比較走悲情的路線,所以在風格配色上多使用灰色和冷色

製作時間約1~2小時

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445188
2.有無遇到的問題,製作心得,風格設定與製作作業的時間

剛開始是還滿ok的,到後面教的css我卡最久
因為一直都沒弄出顏色來,幸好後來重新摸索後終於搞懂了

網頁這種東西真的是需要常常複習
雖然現在只懂點皮毛而已,但是網頁真的滿好玩的。


風格是造歌給我的感覺做的,因為歌曲本身激昂所以把配色也弄得
鮮豔一點更可以感受這首歌的感覺。

因為後來摸索花了點時間大概5小時完成



Edited 2 time(s). Last edit at 10/18/2016 01:54AM by 1045445188.
(編輯記錄)

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445089

2.第1次接觸網頁設計覺得新鮮也很有趣,希望可以學到更多東西唷~spinning smiley sticking its tongue outspinning smiley sticking its tongue outspinning smiley sticking its tongue out

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445074

2.一開始覺得原始碼很難,瞭解了之後,多練習反而覺得很有趣!
希望老師能多提供些有趣的例子

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445092

2.剛開始進度會跟不上,經過練習後,懂了很多,也很喜歡網頁設計這門課
希望老師可以多教一些。

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445071

2.作業於10/17開始製作 遇到困難時還有講義可以看很棒

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445113

2.第一次接觸網頁設計覺得有點複雜

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445065

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

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445173

2.製作心得: 剛開始有點覺得頭痛, 我會盡力跟上。

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1006445030
2.有無遇到的問題,製作心得,風格設定與製作作業的時間
3.無
4.藍色調

作業網址:file:///C:/Users/user/Desktop/hw01-1045445035/index.html

老師 抱歉有點完交 我很喜歡這堂課 很有成就感



Edited 1 time(s). Last edit at 10/21/2016 01:45PM by 1045445035.
(編輯記錄)

Attachments:
開啟 | 下載 - about.html (6 KB)
開啟 | 下載 - index.html (1.7 KB)
開啟 | 下載 - style.css (917 bytes)
網址:C:\Users\user\Desktop\hw01-1045445035\index.html

我剛開始其實我還學得很慢,但現在好多了

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445068

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
一開始做有點跟不上進度,但後來用手機拍下來就漸漸的可以跟上了
因為還不熟所以沒有做得很好...希望以後做出來的更好

http://mepopedia.com/~web105-2b/hw01/hw01-1045445152/

剛開始學覺得這個非常有趣
但也覺得有點困難
不過老師教的步調剛好 可以跟得上
所以覺得很好玩

風格:清新


不知道為甚麼第二篇在程式上可以連結

在這卻無法?!



Edited 1 time(s). Last edit at 10/27/2016 11:59AM by 1045445152.
(編輯記錄)

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445170/index.html

2.製作心得:之前作業有先傳上來,然後剛剛從傳,他說覆寫,我就覆寫了,我就找不到我的檔案了,然後我的網址也怪怪的了。
做這個真的好難好難啊。

重做一次,總算好了,可是還是喜歡上次改的。
我要崩潰了,為甚麼我的問題那麼多。



Edited 2 time(s). Last edit at 11/03/2016 12:51AM by 1045445170.
(編輯記錄)

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445110

2.有無遇到的問題,製作心得,風格設定與製作作業的時間 在css方面還需要在琢磨,

而在HTML也需要再加強,了解那些語法的含意,作亂了一切重來,過程中有比較熟悉到底
哪裡出了問題~
在風格上,設定了與歌詞相關的顏色搭配,其實也花蠻久時間的摸索,看著老師給的影片,
也清楚的了解很多~

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445104
2.以前沒有接觸過這個軟體,覺得非常難!!!

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445059
2
我覺得這次的作業有點小困難

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445056

2.真的很複雜,還好有老師的教學影片,總算是有點上手了。

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445003

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
風格設定為低調奢華,整體用無彩色來構成版面

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445086

2.真的好複雜,還好有同學的協助才能順利完成!第一個作業就搞得我非常困惑了
希望以後加油sad smiley

作業網址:file:///C:/Users/user/Desktop/hw-01-1045445023/ABOUT.HTML


有無問題:無
第一次接觸到網頁設計,覺得這些程式碼是什麼阿~~~

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445077
2高中有上過網頁設計所以有一點點點的印象(真的只有一點XD)



Edited 1 time(s). Last edit at 11/24/2016 10:52AM by 1045445077.
(編輯記錄)

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1045445131

2.第一次上網頁設計感覺很有趣

1.作業網址:http://mepopedia.com/~web105-2b/hw01/hw01-1025445119
2.有無遇到的問題:無
風格設定:想要有清新的感覺