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/~cg104-1a/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/~cg104-1a/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 02/25/2016 09:20AM by JinJin.
(編輯記錄)

1.作業網址:http://mepopedia.com/~cg104-1a/hw01/hw01-1045440013

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

Ans:問題:目前遇到的問題是想知道about檔的body background-color該怎麼改變顏色。

製作心得:經過學習了基礎的網頁設計,我了解到了其實設計網頁並沒有我想像中的如此困難,現在回頭看看那些程式編碼,也多了份親切的感覺少了份未知的恐懼。

風格設定:以清爽的配色作為這次風格設定。

製作時間:課間和自己課餘時後製作所以沒有特別佔用到其他時間。



Edited 3 time(s). Last edit at 03/17/2016 09:05AM by 1045440013.
(編輯記錄)

1.作業網址:http://mepopedia.com/~cg104-1a/hw01/hw01-1045440011

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

製作心得:終於成功了~千歲千歲千千歲



風格設定:牆外的風景 所以被僅使用牆壁材質.和顏色

製作時間:課間和自己課餘時後製作所以沒有特別佔用到其他時間。



Edited 2 time(s). Last edit at 03/17/2016 09:07AM by GEE.
(編輯記錄)

http://mepopedia.com/~cg104-1a/hw01/hw01-1045440001

一開始甚麼都看不懂
只知道打開 dreamweaver 每次上課都是這樣的重複
後來知道說有影片可以看
回去複習時跟著影片做,終於了解不少!!!
還可以教同學順便複習
了解原來網頁是這樣子的程序~
(好複雜阿~~持續努力當中)
......遇到了很多問題 但還好有影片 還有老師的熱心教導:"))
剛一個小作業我就花了1~2天研究!!!
呼~還不錯玩拉!!謝謝老師
影視一A 高詩雅1045440001

1.作業網址:http://mepopedia.com/~cg104-1a/hw01/hw01-1045440045

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

Ans:問題:因為沒上到課所以不太知道FZ怎麼用,但同學有教我,還是順利完成了~

製作心得:因為先做完期中作業才開始做作業01(有點不應該哈哈哈),所以輕鬆很多,沒什麼大問題。

風格設定:一個是甜美,一個是清爽。

製作時間:拍戲中的空閑時間。

影視1A 1045440045 蘇美蓉

1.作業網址:http://mepopedia.com/~cg104-1a/hw01/hw01-1045440019

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

問題:做完期中期末反而不習慣最基礎的

製作心得:不好意思我遲交了

風格設定:再見 淡淡的哀愁所以選擇藍色/新的心跳 當然就是紅色啦~

製作時間:一個晚上

1.作業網址:http://mepopedia.com/~cg104-1a/hw01/hw01-1045440010

2.有無遇到的問題:沒有,都還算順利。

製作心得:第一次做好一個屬於自己的小網頁很開心;希望之後做更完整的網頁時也可以很順利。

風格設定:喜歡的顏色加上對偶像的歌的愛為主題風格製作。

製作作業的時間:上課認真和回家有時間就做。

1.作業網址:http://mepopedia.com/~cg104-1a/hw01/hw01-1045440014

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
製作心得:瞭解了過後發現網頁設計好像沒有想像中的困難,好像也沒有太大的問題。
風格設定:底色是淡藍色。
姐:這首歌我是配比較偏冷色調。
小幸運:這首歌我是配比較偏暖色調。
製作時間:課間和自己回家有時間就做。

1.作業網址:http://mepopedia.com/~cg104-1a/hw01/hw01-1025435233

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
製作心得:上課認真聽作起來也滿簡單的,目前還沒有遇到甚麼很大的困難,但是第二頁的背景還是不會換。

1.作業網址:http://mepopedia.com/~cg104-1a/hw01/hwol-1045440029

2.有無遇到的問題:沒有只是要多注意一些。

製作心得:第一次做屬於自己的網頁很興奮;之後也可以做更完整的網頁所以很期待。

風格設定:馬卡龍的顏色是歌曲給我的感覺 所以決定這樣製作
製作作業的時間:上課認真跟著做和回家有時間就做。



Edited 2 time(s). Last edit at 03/16/2016 11:47PM by 1045440029-yu.
(編輯記錄)

1.作業網址:http://mepopedia.com/~cg104-1a/hw01/hw01-1045440044

2.有無遇到的問題:沒有

製作心得:做那個背景的時間做得比網頁久Zzzz

風格設定:其實只是隨便畫個正方形

製作作業的時間:1hr



Edited 1 time(s). Last edit at 03/17/2016 02:00AM by 1045440044.
(編輯記錄)

1.作業網址:http://mepopedia.com/~cg104-1a/hw01/hw01-1045440046

2.有無遇到的問題:沒有。

製作心得:覺得神奇。
風格設定:應該是清新感。

製作作業的時間:上課認真做。

1.作業網址:http://mepopedia.com/~cg104-1a/hw01/hw01-1045440051

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

問題#都卡在一些小地方而已, 到最後還是慢慢解決了

製作心得#學到一些基本的程式碼之後還是覺得很複雜,光是一些英文字母就搞得我頭很大呢,希望能慢慢上手

風格設定#這次設定的風格是對比性的藍白風

製作時間#都是利用自己的時間完成的

1.作業網址:http://mepopedia.com/~cg104-1a/hw01/hw01-1045440032

2.有無遇到的問題:有遇到許多問題 但後來都解決了

3.製作心得:我終於成功了~~~spinning smiley sticking its tongue out

4.風格設定:符合歌詞內容情境的設定

5.製作時間:大約90分鐘

http://mepopedia.com/~cg104-1a/hw01/hw01-1045440024

製作問題:簡單來說就是一個新手的概念,從零到有,跌跌撞撞試了好幾次才成功
製作風格:白色與灰色映襯雪地的明與暗
製作時間:有點忘了總時間,3小時以上

1.作業網址:http://mepopedia.com/~cg104-1a/hw01/hw01-1045440009

2.有無遇到的問題,製作心得,風格設定與製作作業的時間
做了一個多小時 有點累但是滿酷的 依歌曲的風格設定

1.作業網址:http://mepopedia.com/~cg104-1a/hw01/hw01-1045440020

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

Ans:問題:no

製作心得:經過學習了基礎的網頁設計,我了解到了其實設計網頁並沒有我想像中的如此困難,現在回頭看看那些程式編碼,也多了份親切的感覺少了份未知的恐懼。

風格設定:以簡單的配色作為這次風格設定。

製作時間:回家時間。

1.作業網址:http://mepopedia.com/~cg104-1a/hw01/hw01-1045440028

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

製作心得:做完很有成就感餒

風格設定:美國隊長3:英雄內戰

製作時間:7

1.作業網址:http://mepopedia.com/~cg104-1a/hw01/hw01-1045440033

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

製作心得:恩



風格設定:我也不知

製作時間:三十分鐘

不好意思登錯帳號,此人沒給我登出害我拿錯帳號發文啦!



Edited 1 time(s). Last edit at 06/17/2016 12:01PM by 1045440030.
(編輯記錄)

1.作業網址:http://mepopedia.com/~cg104-1a/hw01/hw01-1045440006

2.有無遇到的問題:沒有。

製作心得:覺得神奇。

風格設定:無彩色。

製作作業的時間: .......