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-2c/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-2c/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/



Edited 1 time(s). Last edit at 09/21/2016 03:10PM by JinJin.
(編輯記錄)

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

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

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

2.風格設定偏粉,這兩首歌比較愛情一點所以就粉色系為主題。
製作上偶爾會遇到不小心刪到別的語法的小東西而無法正確呈現,但後來也會比較注意了~
製作時間每次上課都會跟著做,回去會花一些時間試試。

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

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

春之歌的歌詞意境帶有尋找幸福與等待愛人的意味, 因此風格設定以寒色系及暖色系作為連結頁色彩配置,
一寒一暖, 帶出歌詞有些憂愁以及盼望春天的到來,歌詞中「將來長大之後 我們將會重逢」 內心所帶來的期
望與感嘆,總有一天,我們將會等到櫻花盛開的那一天。
而在製作網頁時,不算是第一次的接觸,但有時也因為自己的疏忽漏掉了一個符號,或是排列位置錯誤,導致
無法呈現原有效果。
遇到較大的問題是原先兩個網頁最底背景想換不同顏色,自己試的有些久 ,之後終於了解要如何達成效果了,
也藉由不斷重複的嘗試,使自己能增加印象。
網頁設計未接觸時顯得有些生疏,經由這一次的功課練習,使自己有些基本的概念, 製作網頁也是一件有趣的
事物,在學習當中找到樂趣,使自己的學習成效事半功倍,也享受當下充實的生活。
不包括學校作業時間,製作作業時間大約為2~3小時,多為更改顏色花較多的時間。



Edited 2 time(s). Last edit at 10/13/2016 11:13PM by 松本.豪.
(編輯記錄)

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
製作遇到的問題:
因為跟原始碼還不熟,有時候會漏打導致效果出不來…
有時候老師一口氣講太多了也有點難消化
不過經過回想還有檢查之後這些問題都可以自己解決。
製作心得:
這是第一個作業因為上課有跟著進度而且有調好自己要的樣子所以沒有花費太久的時間,但是當自己回家重新試試看時發現有些還是記不起來,幸好上課有聽老師說所以跟著講義還是可以做出來。
風格設定:
這是一首情歌的歌詞,所以我用粉嫩的配色來呈現這首歌給人的氛圍。
背景是因為這首歌同時也是電影的主題曲所以用了藍色來還原電影的樣子,雖然是藍色但還是很粉嫩喔!
連結的部分是可以看下一段歌詞的,有戀愛讓人想更了解的感覺。
還有最重要的是可以一起欣賞這首歌。
製作作業的時間:
上課有跟著做所以調整的時間就不會太久了!

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
風格設定基本上跟歌詞沒有相對應,純粹只是喜歡這種明亮又有點可愛的感覺 winking smiley
盡量在上課時就調整好細項,回家時再用電腦看一下還能不能改得更好,所以也不確定製作時間該怎麼算。
遇到的問題就是色差,運用網頁調整好顏色,再將色碼貼到 Dreamweaver 時顏色就會跑掉一點,等全部都在學校電腦調完時,回家開啟網頁時色差就更明顯了,和當初設定以及看到的顏色差了不只一個階調。

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間:
覺得一開始被灌輸很多東西,但是回家慢慢吸收其實不難而且做網頁很有趣呢!
熟悉每個詞之後其實做得很快,如果沒出小差錯的話大概1小時就弄完了!
比較困難的在於要搞懂CSS裡#main的所有詞彙有時常常搞混,然後原本已經設定好的資料又被打亂就又要重新來一次很麻煩啊;漸漸摸熟然後重作好幾次同樣的步驟就跟他熟悉了還蠻好玩的,能夠設定出自己想要的感覺。
因為五月天這兩首新歌我認為帶點憂鬱和苦中作樂以及慶幸能出生在這個地方的心情,所以選了介於有點陰鬱的藍色與輕快的綠色之間的色彩!即使人生中有很多不如意的事情,但也要能以樂觀的心情去面對~



Edited 1 time(s). Last edit at 10/19/2016 10:38AM by j29927381.
(編輯記錄)

1、作業網址
http://mepopedia.com/~web105-2c/hw01/hw01-1045445212

2、心得
剛開始老師在教的時候看到一堆符號、英文,對於是電腦白癡的我,真的頭有點痛⋯⋯有時候老師講的比較快,我有一點點跟不上,不過旁邊的同學都會幫助我,讓我能成功把這些效果做出來,不過回家我可能就忘一半了吧⋯⋯不過我還是會努力的,上課認真聽老師講解,不會再問問同學。
不過為甚麼我在DW開起來預覽看的時候可以,之後開網頁的時候樣式就變了???老師能幫我看看是甚麼問題嗎


3、風格
這是電影被偷走的那五年的經典歌曲,屬於抒情的類型,所以我用了淡粉色與灰色來做搭配,代表著情侶間的懷念與感傷。



Edited 1 time(s). Last edit at 10/29/2016 07:11PM by 1045445212.
(編輯記錄)

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

2.有無遇到的問題
有時會不小心少打語法,結果效果出不來

製作心得
因為第一次接觸網頁設計所以還不是很熟悉,但老師的講義解說得非常清楚,受益良多

風格設定
簡約

製作作業的時間
1-2小時

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
剛開始覺得很陌生,什麼都聽不懂,有時候會少打語法,使得效果跑不出來,
老師有時候會講比較多語法,沒辦法很快速的吸收會混亂掉,不過回家看影片
邊做,很快的就上手了,其實做網頁滿有趣的,對基本的東西也漸漸的了解 。

因為這兩首歌屬於比較悲傷抒情一點,所以用黑色當作底色,凸顯那種感覺,
加上兩首歌都關於愛情,所以背景就用粉嫩一點的顏色

在家製作時間大概花了1小時

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
語法一開始都看不懂,經過這幾個禮拜上課懂了許多,希望以後還可以學到更多好玩的網頁與法。

http://mepopedia.com/~web105-2c/hw01/hw01-1045445138


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

以前沒接觸過dreamweaver所以覺得很多東西都深澀難懂,

但是經過老師講解加上自己回家複習之後就發現其實沒想想像中那麼難

講義其實都講得很清楚,所以這個資源讓我做作業時覺得事半功倍

語法自有一套規則,把邏輯搞懂之後就可以很明確的運用那些語法。


版面配置因為考慮到文章的關係所以選擇中低彩度和明度的顏色,讓畫面呈現清爽感和知性感

閱讀起較為舒適,也比較符合文章的感覺。

製作過程約一小時至兩小時



Edited 1 time(s). Last edit at 10/19/2016 12:07AM by 1045445138.
(編輯記錄)

http://mepopedia.com/~web105-2c/hw01/hw01-1045445015
我以溫暖柔和的色系,呈現出比較柔和一點又溫馨的畫面,因為詞中提到美人魚跟花的故事,我想讓整個色調以活潑的暖色系但又不會過度搶眼的色調來呈現自己的作品,過程中雖然有一些小錯誤 ,所以使我的畫面跳了兩次之後畫面又會不見,後來慢慢試了很多次才發現一些小地方錯了,雖然有些比較複雜的地方,但慢慢的找到方法來做,還是會覺得做對做完有一種成就感呢!也謝謝老師上課都很細心的指導我們,解決同學每一個問題。

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

2.沒有遇到的問題,心得,呃,普通,製作時間約15分內

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

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

上課大概都聽得懂,製作的時間就是課堂上與下課回去差不多一個小時,做完鰻有成就感的。

我的風格就是依照主題的配色去做搭配,希望能繼續保持下去。

http://mepopedia.com/~web105-2c/hw01/hw01-1045445084

風格: 主題是無包裝商店,選擇的顏色多以貼近自然的大地色為主。

心得:覺得自己可以架設網頁是很特別的一件事。

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

2.到目前為止都沒有甚麼問題,但我覺得老師可以再上慢一點,有時還沒反應過來就已經教下一個了....

1.網頁網址:http://mepopedia.com/~web105-2c/hw01/hw01-1045445135

2.意見:希望可以上慢一點 謝謝老師

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

2..做css時,另存檔案後index和about卻沒有跳出檔名下方的style和原始碼,後來不知道為甚麼他就自己出現嘞

http://mepopedia.com/~web105-2c/hw01/hw01-1045445201
有無遇到的問題,製作心得,風格設定與製作作業的時間
我覺得這次的作業很充實 謝謝老師

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
一開始上這堂課的時候其實非常害怕學不來,跟不上教的進度,但是漸漸地發現網頁的架構其實非常有趣。

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

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

第一次接觸過程充滿許多問題,但也漸漸了解如何使用,雖然style有些亂了步調,但最後還是完成了網頁的基本架構,謝謝老師。

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

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

因為自己吸收比較慢,聽完老師上課,回家在自己慢慢摸索就有比較了解了~
用自己喜歡的偶像樂團做起來很開心,法國片的MV是用黑白的方式呈現,
所以就黑灰白的方式呈現;我們背對著青春帶點有點憂鬱,歌聲輕柔,
色調輕柔,所以用藍色調的方式呈現。
製作時間:1個小時

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

2.有無遇到的問題、製作心得:
很久沒接觸跟網頁有關的作業,所以需要一點時間去熟悉,老師講解的內容都很熟悉也給很多時間去練習,進度安排的剛好可以跟上。

風格設定:
簡約色塊、帶感情的

製作作業的時間:
1-2小時

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

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

本身是有點電腦白癡,作業時間花了很久,所以做作業時很頭痛,尤其是一直做沒成功的時候,
但後來做完了覺得很開心,而且老師的講義也幫助了我很多。
海綿寶寶這首歌超可愛,我用海綿寶寶身上的顏色來配色,畫面看起來比較活潑~



Edited 1 time(s). Last edit at 10/22/2016 02:05PM by 1045445144.
(編輯記錄)

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

2.風格較為偏藍色調,從醒著到願意睡著這首歌給人的到安逸,因此選擇藍色為主調。
對於網頁設計一直感到陌生,也害怕對於原始碼的運用,需要一步一步慢慢的理解,但是網頁設計
非常的有趣,講義也能清楚了解。

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
蝦米怎麼這麼難

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

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

第一次製作網頁設計,做得過程雖然覺得繁瑣但完成很有成就感。

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

2.風格設定篇感傷,這兩首歌比較愛情一點所以就紅色系為主題。

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

2.本身喜歡張學友的歌曲 因為一千個傷心的理由這首歌關於心情上的轉變 所以用了互補色來加強視覺上的效果
客家本色 由於本身是客家人 所以就做了這首歌 讓大家更了解客家文化 在色彩配置上呢 也用了比較豐富強烈的色彩 給大家新的視覺享受

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間 :
css在製作上有稍微費點心思還有在製作上有時會少了{或是一些小細節
東西就會出不來~考驗眼力阿~~ˊˇˋ

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

2.有無遇到的問題:有時候上課老師講得有點快,給我們做的時間有點短,
有時候會來不及做,老師就直接到下一個步驟了。
製作心得:因為做的是自己喜歡的東西,所以做得還滿開心的。
風格設定:一個是藍色的色調,一個是橘色的,用兩首歌的風格去製作。
製作作業的時間:額每天做一點(?



Edited 1 time(s). Last edit at 11/01/2016 10:09PM by Jieru.
(編輯記錄)

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

2.有無遇到的問題:註冊一直失敗,原來是g"m:ail打成g"a"mil
製作心得:我很棒
風格設定與製作作業的時間 :萬聖節的感覺,30分鐘到1個小時(15分鐘再創帳號)

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

2.老師有時候會一下子教太快太多,一下子反應不過來就不會做了
但老師還是會下來一個一個教,所以我目前覺得還可以。
製作風格是兩首歌都走憂鬱路線



Edited 1 time(s). Last edit at 11/02/2016 01:28AM by 1045445018.
(編輯記錄)

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

2.有無遇到的問題:老師教得有些快 但是之後有跟上進度

第一個作業多少因為覺得比較簡單,所以多少有排版一下哈哈哈,但是還不是很滿意,可能要到真的很熟練才能將全部融會關通吧,希望其中時能將全部都熟練好,才能順利通過啊,不然排版很醜自己看了也是沒辦法,但是覺得網頁真的是很神奇又很煩的東西~~~謝寫老師指導


http://mepopedia.com/~web105-2c/hw01/hw01-1045445019

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

2.老師好快呀呀呀呀跟不太上~~~~~

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

2.喜歡田馥甄,所以做他的歌

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

2.有無遇到的問題,製作心得,風格設定與製作作業的時間:
老師講課速度很快,反應不過來。

http://mepopedia.com/~web105-2c/hw01/hw01-1045445105
2.製作過程看似簡單但只要打錯一個字網頁就會跑不出來

作業網址:C:\Users\user\Desktop\hw01-1045445120\index.html
老師速度太快嘞~

1025445200-連怡婷
1.作業網址:http://mepopedia.com/~web105-2c/hw01/hw01-1025445200
2.有無遇到的問題,製作心得,風格設定與製作作業的時間
沒有特別大的問題,老師講得很清楚,製作起來蠻上手的

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

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


我的配色是依照主題的感覺去做搭配。大概花了1小時製作。做完非常的有成就感!!

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

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

一開始被灌輸很多東西,使我對網頁產生不小的畏懼,但是透過老師用心的影片教學使我對他有了更多的認識。
但偶爾還是會出小差錯,雖然這些差錯令人很煩躁,但以樂觀的心去面對的話, 就會覺得網頁也是可以很有趣的。



Edited 1 time(s). Last edit at 11/23/2016 12:15PM by 曾慶恩.
(編輯記錄)