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

Advanced

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

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

1. 參考講義


1.[url=http://mepopedia.com/forum/read.php?804,16668][講義01] 以 HTML 與 CSS 完成第一個網頁[/url]

[hr]

2. 需下載的軟體


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

[hr]

3. 繳交作業的方式



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

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

[hr]

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

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

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

存放在hw01-學號的資夾內

[IMG]http://i.imgur.com/pUK69i6.jpg[/IMG]

[hr]
並請回覆本篇文章

1.作業網址:http://mepopedia.com/~web104-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/~web104-2b/hw01/hw01-1015448146/

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
老師有教如何用#main2修改about的頁面風格(換色) 不過試了好久還是換不了
因為一直在試換色的所以花了比較久時間 大約3小時

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


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

(1) 有無遇到問題:沒有

(2) 製作心得:雖然剛開始接觸網頁設計覺得語法那些好難喔,
但是認真的聽老師講解之後就覺得其實也沒有想像中的困難,
希望我慢慢地熟能生巧,學以致用。

(3) 風格設定與製作時間:這次的作業我選擇的歌是鄧紫棋的泡沫
因為泡沫是水做的,所以我用藍色系來強調我的歌詞~~~~
製作時間差不多2個小時多

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

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

遇到的問題:左上方有個小#,但是如果在html那邊沒有打的話背景色又出不來。
製作心得:作業過程讓我滿愉快的,每一個步驟都能感覺到對成果的影響。
風格設定:我使用較為典雅憂鬱的相似配色以配合內容。
時間約1.5小時



Edited 1 time(s). Last edit at 10/07/2015 06:15PM by 1035445194.
(編輯記錄)

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

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

目前在製作上無遇到問題,第一次用Dreamweaver這個軟體,很多東西都要適應,
比如寫語法,一但寫錯了就會跑不出來,跟以往學的軟體很不一樣,很多觀念都要
慢慢的吸收。這次的作業一,在介紹一首歌,是以女生的角度唱的情歌,所以歌詞
襯底的部分用粉色系,因為是一首悲傷的歌,所以外面的背景色以灰色做為代表。
整個製作時間花了2至3小時。

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

目前在製作上無遇到較大的問題,第一次用Dreamweaver這個軟體,很多東西都要適應,較為不熟悉,
需要參考老師的講義進行操作。
因為是一首悲傷的歌,所以外面的背景色以灰色做為代表。,整個製作時間花了2至3小時。

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間:
沒有遇問題。
很喜歡製作網頁,希望可以再學到更多深入的技法。
喜歡簡單的風格。
時間都在研究語言怎寫,大概2小時。

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

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

目前在製作上並沒有遇到問題。第一次使用Dreamweaver就是網頁設計這門課,比想像中有趣多了。風格是使用不會太灰暗也不會太熱情的顏
相似色。製作作業時間約2小時左右。

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
沒有接觸過這個課程過所以很陌生也覺得很難,經過幾次上課後就不覺得很困難了
我的風格是搭配我選擇的歌曲,因為曲風可愛所以背景色以紅粉色為主
製作作業的時間大約2~3小時

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
問題:畢竟是第一次學,所以必須花更多時間去製作這個作業,不過老師在網路上放的教學真的很有用,雖然要看好幾遍。
心得:其實製作過程是蠻有趣的,但是還是會花較多的時間去探索這個軟體,很有趣就是啦。
風格:我是做歌詞的網頁,用深藍來打底是因為這首歌我覺得很滄桑,所以我用了深藍與淺藍來製作;下一首歌用深藍與嫩綠當背景是為了讓畫面更跳。
製作時間:2~3個半小時。

作業網址:http://mepopedia.com/~web104-2b/hw01/hw01-1035445002
2.有無遇到的問題,製作心得,風格設定與製作作業的時間
遇到的問題:作業的網址連不上去

製作心得:

我覺得網頁設計梅我想像中的困難
風格設定:我希望能設計出可愛有趣的風格

製作作業的時間:2~3小時



Edited 3 time(s). Last edit at 10/07/2015 09:49PM by 1034445002.
(編輯記錄)

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

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

心得:
這是我第一次接觸網頁設計 其實蠻開心能學這個的,
雖然我真的認為網也設計蠻困難的,但會認真學習,希望
一後真的可以學以致用。

風格設定與製作時間:
風格設定走以間單明瞭,讓人看了一目了然為主。
做時間約2小時左右。

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

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

心得:
這是我第二次接觸網頁設計 高中時有教過這軟體過
但是我們老師當時沒有 詳細講解 只是過程帶過而已
也沒有講解這麼的深
所以不像這學期老師講解的哪麼細
雖然我真的覺得網頁設計蠻困難的,但是老師講解過後 目前還跟的上 也覺得滿有趣的
現在老師講解的速度可以接受部會太快也部會太慢

風格設定與製作時間:
顏色符合歌詞意境。
做時間約2小時。

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
沒有問題。經過老師的示範和教學,覺得網頁設計比想像中簡單,目前還跟得上。
因為選的是兒歌,風格就用看起來比較古典的顏色。
製作時間差不多二個小時。

作業網址:http://mepopedia.com/~web104-2b/hw01/hw01-1035445218

無遇到問題
製作心得:過程中很想加入圖片
風格設定:自我喜歡的綠色調和日文
製作作業的時間:課堂時間外加1至2小時

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
製作問題:忘了2個頁面換不同顏色的方法
製作心得:還可以
風格設定:我放了這2首歌感人是溫暖的,心情愉快,所以我使用了偏橘的色彩
製作作業的時間:2小時


1035445065

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

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

遇到的問題:程式碼有時候會不知道怎麼打
製作心得:感覺作出來,自己的網頁很開心。
風格設定:我用偏冷色系的顏色去作設計
時間約1.5小時

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


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

① 有無遇到問題:有
學校還有一點點沒做完,電腦只有英文版格式有點不同


② 製作心得:實際接觸到網頁的時候,發現語法其實沒想像中難,
只要跟老師的步驟一步一步學,慢慢吸收,就會變成我們的東西
,應該也是一開始所以教的沒那麼複雜,自然就比較得心應手。

(3) 風格設定與製作時間:(時間:約1.5-2hour)
我的歌都比較偏悲傷,走比較低調路線,所以使用外底白,內底
灰色不顯得沈重,標題用明彩度低的憂鬱深藍,內文黑色,風格
比較簡單,加上歌路的性質,故意偏左一些,讓畫面不置中。

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

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

一開始看到這些數字英文真得眼花撩亂,而且有時候不確定需要調整的地方應該去哪個視窗用,但漸漸熟悉後覺得也挺有趣的!因為這首歌原本就是較輕鬆的曲調,所以我使用較淡且清爽的顏色來呈現,製作時間約2小時



Edited 1 time(s). Last edit at 10/08/2015 01:10AM by 翁瑱真.
(編輯記錄)

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

2.有無遇到的問題:無
製作心得:一開始覺得好像很複雜,但經過老師的講解與自己的摸索後,
發現其實蠻有趣的,會讓人想繼續學下去.
風格設定:用淡淡淺灰配上綠色,給人一種清爽感看了很舒服.
製作作業的時間:2~3小時



Edited 2 time(s). Last edit at 10/08/2015 01:48AM by 1035445071.
(編輯記錄)

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

2.有無遇到的問題:網頁的字設定後都沒變、改了一個地方的文字,其他文字也會跟著變
製作心得:加了點圖片上去>W<
風格設定與製作作業的時間:劇情簡易,配色和字型、顏色比較花時間

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

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

剛開始在進行這項作業時,感覺很困難,因為是第一次接觸網頁這部分,不過後來真的在製作時,發現其實並沒有想像中的複雜,也覺得還蠻有趣的,希望在往後的課程能學習到更多的東西

風格設定:以較沉重的色調來呈現這個主題

製作作業的時間:2~3小時

1.作業網址:http://mepopedia.com/~web104-2b/hw01/hw01-1035445131/
2.有無遇到的問題,製作心得,風格設定與製作作業的時間
製作問題:忘了2個頁面換不同顏色
製作心得:還可以
製作作業的時間:2小時



Edited 1 time(s). Last edit at 10/08/2015 09:34AM by 吳寶蓉.
(編輯記錄)

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

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

到目前為止沒有什麼太大的問題,都能理解上課的內容。

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

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

在這個作業上沒有什麼太大的問題,但是對於寫程式碼這部分還是有些不太理解,我想之後可能我要在這方面做補強。
這是第一次自己做網頁設計,覺得很開心,因為一職以為做網頁設計是很難的一件事,但是學了之後才發現其實每有想像中的那麼難。



Edited 2 time(s). Last edit at 10/08/2015 01:32PM by 1035445053.
(編輯記錄)

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

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

心得:一開始學這覺得很複雜,沒學過網頁設計,但之後便慢慢熟悉,
還在摸索當中,希望之後可以學到更多。

風格設定:簡單簡潔
製作網頁時間:2.5小時

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

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

目前在製作上並沒有遇到問題。
風格是使用語歌詞意境相符的顏色。
製作作業時間約1小時左右。

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

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

3.網頁設計第一次學所以剛開始有點跟不上進度

4.我用的顏色以單一色為主,因為還沒搞懂所以就用的比較簡單

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

2.
有無遇到的問題:幾乎是弄巧成拙,出問題的都是多太多不必要的東西XD。
製作心得:過程中還蠻開心的,小成就,覺得在往後會有更多動力去學。
風格設定:偏少女。
製作作業的時間:2.5小時。

視傳2B 1035445107

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

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

目前在製作上並沒有遇到什麼特別大的問題。
風格是使用與歌詞感覺比較相像的樣子。
不足是沒有將兩頁之間的顏色用不一樣,下次會改進。
因為第一次做這樣的東西還不是很熟悉。

製作作業時間約1小時左右。



Edited 1 time(s). Last edit at 10/08/2015 09:55AM by 2zzzcm.
(編輯記錄)

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

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

第一次接觸這個程式覺得很新鮮,一步一步做出來的時候很有成就感。

因為歌曲是甜蜜及悲傷,所以顏色使用暗色一點的紅及灰,呈現低調甜蜜的感覺。

製作作業時間:一個半小時

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

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

剛開始還不太會使用這個軟體(DW),有些又看不太懂過程中還請室友幫忙,但是之後慢慢地熟悉了。
主要是以橘子和葡萄的顏色來呈現,使用陽光又清爽的風格,描述了小狗與寶寶的家庭生活(寫真攝影)
製作時間2小時。

1.作業網址:http://mepopedia.com/~web104-2b/hw01/hw01-1035461133
2.有無遇到的問題,製作心得,風格設定與製作作業的時間
慢慢的一步一步做其實沒有什麼大問題,
在製作中學到了很多,在摸索Dreamweaver中發現了很多不知道的功能覺得很有趣
因為內文是兒歌 所以使用較鮮豔明亮的顏色
製作時間 大約 2個小時

老師抱歉 這個帳號是1035445059的smiling smiley) 翁健瑋

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

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

第一次自己自作的網站覺得非常的有趣,可是每次上課都要下載一些東西,電腦就會盪掉。



Edited 1 time(s). Last edit at 10/12/2015 03:18PM by 1035445149.
(編輯記錄)

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

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

製作心得:平時注意聽課回家看講義便事半功倍
還有英文需要當作背單字一樣熟記才能認得意思
不然光是挑整貼齊邊緣花掉太多時間

風格設定:兩首歌詞內容憂鬱用冷色系搭配

制訂作業時間:因為不滿意前一個所以重新做
用了大約一兩個小時



Edited 1 time(s). Last edit at 10/13/2015 03:50AM by 1035445026.
(編輯記錄)

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
設定上一頁的時候會試不成功
我覺得要找出頁面配色跟歌詞有關的風格要嘗試比較多種顏色,但也學習到很多網頁的專業用語。
因為歌詞是以中國風的為主所以配色上也以藍色來表達,製作時間約為1小時。

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
用我最喜歡的樂團的歌來做因為他們團用黑白來做代表色所以我的網頁也是用黑白的

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


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

沒有問題

製作心得:
雖然還不太熟悉這個,但經過老師的解說,
也慢慢的了解,也學會自己架設一個簡單的網站。
就算不太了解,還有網站的解說,更清楚地去製作。

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

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

沒有問題

製作心得:
雖然還不太熟悉這個,但經過老師的解說,
也慢慢的了解,也學會自己架設一個簡單的網站。
就算不太了解,還有網站的解說,更清楚地去製作。

1035445176 呂姿儀

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
沒遇到甚麼大問題,除了老師教得自己也有摸索了一下發現做網頁很好玩,做完以後很有成就感!
時間大約2小時~~

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

2.沒有遇到太困難的問題,可以在摸索軟件中解決
在配色方面覺得還好能夠配合歌曲主題
暫時還是能夠跟上課堂進度

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間:
現階段還沒有遇上什麼問題,因為最基本的語法我本來也有約稍稍學過一點。由於是一個介紹寵物大白鼠的網頁,而大白鼠的毛色又多為黑、白、灰,所以主要想多用灰階(或低飽和度)的顏色去設計網站,不過為了讓它看起來不那麼死氣沉沉,我應該也會把非主要區塊的欄位設定相比灰階顏色來更較繽紛的顏色。這一份作業是上課時做完的。

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

使用了自己很喜歡的歌手艾薇兒的其中一首歌「let me go」歌曲帶著濃烈的愛意
所以被景色使用了比較深沉的藍色,色塊使用一點紫灰,標題的字則是使用紅色,
代表了愛意。
之前就使用過了dreamweaver,但是當初沒有很深的去使用並了解,現在才去深入
,還有FZ跟講義的網站都是我沒有用過的,總合起來時間也有1.2個小時。

1035445056陳冠霖

1.作業網址:http://mepopedia.com/~web104-2b/hw01/hw01-1035445014/
2.無遇到特別的文題,就要慢慢記語法吧^^
希望能學習到如何做到完整網頁。


學號:1035445014

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

2.
有無遇到的問題:問題就是...明明照著做都可以出問題 ..
找不出問題的煩躁(重作從新整理,對這類還是挫折..
製作心得:
做完成了當然開心成就感
風格設定與製作作業的時間 :配合歌詞的感覺
聽到這首歌會想到的 顏色感覺
一個晚上...

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


(1) 有無遇到問題:沒有

(2) 製作心得:希望之後使用上能更上手

(3) 風格設定與製作時間:沉穩

(4)製作時間:1個半小時

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


(1) 有無遇到問題:沒有

(2) 製作心得:希望之後使用上能更厲害

(3) 風格設定與製作時間:藍藍

(4)製作時間:1個半小時

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
製作問題:忘了2個頁面換不同顏色的方法
製作心得:開始上手了
風格設定:我放了這2首歌是關於戀愛的,所以用的甜美的粉色
製作作業的時間:2小時


1035445140

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


(1) 有無遇到問題:css常跑掉

(2) 製作心得:之前就滿上手了 但太久沒做需要重新琢磨一下

(3) 風格設定與製作時間:鮮豔.

(4)製作時間:1小時

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

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

(1) 有無遇到問題:有
在DW上明明就有打上至中對齊了,可是旁邊沒有,一開網頁又有。

(2) 製作心得:

(3) 風格設定與製作時間:這次的作業我選擇是郭采潔的歌和落花時期,背景色選用我覺得適合歌詞意境的天藍和粉色。
製作時間大約1小時多



Edited 1 time(s). Last edit at 12/19/2015 03:49PM by 1035445179.
(編輯記錄)