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

Advanced

[作業03 ]利用Div標籤與CSS建立基本網頁版型- 圖片篇

[作業03] 利用Div標籤與CSS建立基本網頁版型--圖片篇



1. 一、製作說明:



1.請參考 [講義03] 利用Div標籤與CSS建立基本網頁版型
的步驟製作

2.下載附件
(或以自己設定的主題與圖片製作)
可從這個作業開始,製作期中作業的第一頁
請選定自己喜歡的主題及相關資料


3.每個同學記得在title的部分打上"自訂的主題"
在#footer 註明 Designed by 某某某(可自行取名)
版權聲明部分請標註:本網站僅為作業之用,如有侵犯版權敬請告知。

4. 在#wrapper寬度上打上 px的數值

5. #content內,自行打入不同的內容文字,自行隨意設定

6. 以本單元的架構下,文字、圖片及設定,可依講義或自行發揮

7.本作業的的重點為:新增圖片按鈕,頂圖及內文圖。可依參考檔之作法製作,本頁請以自定主題設定為期中作業第一頁。


2. 二、繳交作業方式



1.製作完成後,檔案命名方式:

第三個作業FTP上的資料夾為:hw03

每位同學請將自己的資料夾命名為:hw03-學號
這個作業的網址則為:http://mepopedia.com/~css106-2c/hw03/hw03-105xxxxxxx

資料夾內含:
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾

存放在 < hw03-學號 > 的資夾內



2. 上傳至FTP

3.回覆本篇文章

 (1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-105xxxxxxx

 (2) 主題 / 風格設定(色彩設定部份)

 (3) 有無遇到的問題

 (4) 製作感想

 (5) 製作作業的時間



範例參考網站:
http://mepopedia.com/~jinjin/web/hw03/

作業參考
(1) http://mepopedia.com/~jinjin/web/hw03/
(2) http://mepopedia.com/~web103-a/hw03/hw03-1025445001/
(3) http://mepopedia.com/~web101c/hw03/hw03-1015445231/
(4) http://mepopedia.com/~web100-a/hw03/hw03-1006445010/
(5) http://mepopedia.com/~web101c/hw03/hw03-1015445203/
(6) http://mepopedia.com/~web101c/hw03/hw03-1015445243/Introduction.html

http://mepopedia.com/~web100-a/hw03/hw03-1006445010/

http://mepopedia.com/~web100b/hw03/hw03-1001445006/

===========================================
若經發現作業為直接複製同學檔案以零分計
===========================================



Edited 2 time(s). Last edit at 10/31/2017 04:23PM by JinJin.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445075

(2) 主題 / 風格設定(色彩設定部份):小小兵的代表顏色 黃色系列

(3) 有無遇到的問題 :無

(4) 製作感想: 我覺得加入圖片以及按鈕 感覺起來真的很像一個網站,也希望我的期中作業能順利的完成。
謝謝老師的耐心教導

(5) 製作作業的時間 :2~3小時完成



Edited 3 time(s). Last edit at 11/20/2017 09:01PM by 林宥柔.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445205

 (2) 主題 / 風格設定 怪醫黑傑克 紅 黑 白用主角身上的顏色當主色調

 (3) 覺得按鈕很難做

 (4) 覺得很有趣,但做的很累

 (5) 5個小時



Edited 1 time(s). Last edit at 12/06/2017 08:11PM by 1055445205.
(編輯記錄)

 (1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445156

 (2) 主題 / 風格設定 暖色系復古風

 (3) 有很多藏在細節的

 (4) 製作感想:我覺得網頁就是要不斷集中精神不然會錯亂

 (5) 製作作業的時間 :5小時

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445039
 
(2) 主題 / 風格設定(色彩設定部份)
史迪奇/採用史迪奇這藍色生物獨有得特色作為這次作業的風格。

(3) 有無遇到的問題
有,還不熟悉,故會忘記語法,還需看老師的影片邊做邊復習。

(4) 製作感想
其實,還不錯玩啦~~從來!!!沒想過自己居然也有一天看得非常簡單的懂程式碼這些火星文XDDD

(5) 製作作業的時間
1-2h

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1035471056

(2) 主題 / 風格設定(色彩設定部份):极简风格

(3) 有無遇到的問題 :圖片添加環繞的怎麼這麼難啊,聽不懂這個騷操作

(4) 製作感想: 無

(5) 製作作業的時間:很久

1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445078

(2) 主題 / 風格設定(色彩設定部份):藍色粉色

(3) 有無遇到的問題 :操作上很多不懂

(4) 製作感想: 無

(5) 製作作業的時間:2

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445129

(2) 主題 / 風格設定(色彩設定部份):很可愛很粉嫩

(3) 有無遇到的問題 :語法用很久,設定看很久因為都是英文...

(4) 製作感想: 做好久好累QQ研究很久

(5) 製作作業的時間:幾個小時(忘記了)

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445087

(2) 主題 / 風格設定(色彩設定部份):可愛粉嫩系列

(3) 有無遇到的問題 :因為是cc版本又是英文版本,所以就研究很久,一直需要翻譯,所以還有些找不到的地方,像是圖文圍繞還沒搞定

(4) 製作感想: 做的時間很長~因為是cc又是英文版

(5) 製作作業的時間:很久很久

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445015

(2) 主題 : House 拉拉熊的家

風格:可愛少女夢幻高質感風
 
(3) 有無遇到的問題 : DW是英文版的,很多按鈕都要google翻譯查中文,雖然這樣可以順便學英文,但需要花一些時間。

(4) 製作感想 : 克服重重困難之後,看到令自己滿意的網頁,覺得再辛苦也都值得了,希望期中作業一樣可以達到自己的理想。

(5) 製作作業的時間 : 1個小時左右



Edited 4 time(s). Last edit at 11/21/2017 09:19PM by 大漢堡王.
(編輯記錄)

 (1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445036

 (2)LINE FRIEND / LINE的風格

 (3)因為我是CC版所以有一點不一樣 ,要花時間思考spinning smiley sticking its tongue out
 
(4) 越看越愛上熊大了
 
(5)2~3hrhot smiley

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445021

(☆我的作業3是在"關於傻嚕"那頁)

(2) 主題是介紹傻嚕(插畫家) 風格屬於可愛類 粉紅粉藍

(3) 花了好多時間理解為甚麼有些地方會變得很奇怪

(4) 這次作業多了比較多語法,雖然大部分跟之前差不多,但是感覺有變困難。

(5) 花的時間大概2-5小時

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055443122

(2) 主題 / 風格設定(色彩設定部份):咖啡介绍

(3) 有無遇到的問題 :很多

(4) 製作感想: 没有

(5) 製作作業的時間 :非常久

(1) 作業網址:
http://mepopedia.com/~css106-2c/hw03/hw03-1055440122
http://mepopedia.com/~css106-2c/hw03/hw03-1055440122/about.html
p.s 因覺得首頁內容太少,所以也將做好的其中一頁貼上來了。

(2) 主題 :千芝的美食之旅
  風格設定:粉色活潑系列。

(3) 有無遇到的問題: 有時候不小心將圖片移動到的話,圖片就要重新連結,
          在製作的過程中要很細心,任何一個語法都不可遺漏。

(4) 製作感想:做完屬於自己的東西還蠻開心的,當理解後就覺得網頁設計不難。

(5) 製作作業的時間:10 hours(屢次改圖的關係)

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445102

(2) 主題 / 風格設定 簡單清新

(3) 有無遇到的問題 我要一次教4個人外基本都算沒問題

(4) 製作感想 我要一次教4個人命很苦

(5) 製作作業的時間 2個小時 加上教人共6個小時

1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445042
(2) 主題 / 風格設定(色彩設定部份):刺客教條 黑暗風格

(3) 有無遇到的問題 :很多

(4) 製作感想: 累

(5) 製作作業的時間 :3小時

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445183

 (2) 主題 / 風格設定:簡單有質感

 (3) 有無遇到的問題 :網頁設計真的好難

 (4) 製作感想 :好難

 (5) 製作作業的時間 :5小時

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445024

 (2) 主題 / 風格設定: 清新

 (3) 有無遇到的問題 : 無

 (4) 製作感想: 需要花更多時間去了解語法的功用,也需要更多耐心解決問題

 (5) 製作作業的時間:5小時

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445144

(2) 主題 / 風格設定(色彩設定部份):浪漫愛情故事所用色較粉嫩

(3) 有無遇到的問題 :無

(4) 製作感想: 過程中如果出錯我會找不太到問題點

(5) 製作作業的時間 :2~3小時完成

 (1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1035445036


 (2) 主題 / 風格設定(色彩設定部份):米色、咖啡色系


 (3) 有無遇到的問題:一直搞錯圖片大小,放近網頁裡變超大,嚇死我了,還好有改回來。


 (4) 製作感想 :覺得難,因為都是程式碼,但可以看教學影片,真的還是不會可以開外掛(複製貼上萬歲),想把這幾次製作的網站拿去使用在畢業製作上,但是這樣網頁內的圖就得自己製作了drinking smiley,很多地方還要一直修改;其實頁面的圖、標題和logo都還沒做好,是放網路的圖片,雖然有用AI和PS修過,現在看起來矬矬的,下次得再改過頁面的圖、標題和logo,結果最花時間的是準備資料,準備資料花最久時間了,哈哈,謝謝老師執導~。


 (5) 製作作業的時間:約2.5小時。

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445150

(2) 主題 / 風格設定(色彩設定部份):死而復甦的歌手~Aimer / 暗色系,較多星空雲彩的元素

(3) 有無遇到的問題 :當初看影片邊做都很順利,只是忘記在button放圖片時要游標放在那之間一度找不出原因然後很崩潰,但發現問題後就豁然開朗了。

(4) 製作感想: 做到這裡網頁對我來說已經不會太困難了,至少還能去教同學,希望之後學習也可以更順利,謝謝老師的教學影片,很實用。

(5) 製作作業的時間 :3~4小時完成

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445096

(2) 主題 / 風格設定 暗黑高冷風

(3) 有很多小細節不太會

(4) 製作感想:感覺一做網頁整個精氣神都非常的集中

(5) 製作作業的時間 :3小時

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445105

(2) 主題 / 風格設定 小熊維尼/維尼風格

(3) 做的時候還是會卡卡的

(4) 製作感想:做起來很難但是做完後會有滿滿的成就感

(5) 製作作業的時間 :很久

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445057

(2) 主題 / 風格設定 海底總動員/海的感覺

(3) 還是會需要別人的幫助

(4) 製作感想:做玩感覺很棒

(5) 製作作業的時間 :超久

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445141

(2) 主題 / 風格設定(色彩設定部份):海洋浪漫冷色調

(3) 有無遇到的問題 :無

(4) 製作感想: 雖然很難但讓我學到很多真的很棒

(5) 製作作業的時間 :2小時完成

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445132

(2) 主題 / 風格設定(色彩設定部份):對應黃色的極簡黑

(3) 有無遇到的問題 :無

(4) 製作感想: 原來製作一個網頁是這麼的費心,也讓我了解到每一個網頁背後的努力

(5) 製作作業的時間 :1~2小時完成



Edited 1 time(s). Last edit at 11/25/2017 01:15AM by 堯詩洪.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445192

(2) 主題 / 風格設定(色彩設定部份):暗黑系

(3) 有無遇到的問題 :無

(4) 製作感想: 這真的超難,但一次比一次還要順利了
(5) 製作作業的時間 :5-6小時完成

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445117

(2) 主題 / 風格設定(色彩設定部份):暗色系

(3) 有無遇到的問題 :軟體是英文版,很複雜很不好操作

(4) 製作感想: 製作時間有點長

(5) 製作作業的時間:120分鐘左右

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445054


 (2) 主題 / 風格設定(色彩設定部份) :以fischer's的風格去呈現,藍色調

 (3) 有無遇到的問題 :在做按鈕的時候有點困難,還有無意間不小心刪掉大括號,整個網頁都沒有邊框,找超久才發現被我刪掉了eye rolling smiley

 (4) 製作感想 :其實在做的時候很開心,畢竟是做事己喜歡的東西~雖然有些地方有複雜到eye rolling smiley

 (5) 製作作業的時間 :5小時左右



Edited 3 time(s). Last edit at 11/25/2017 03:30PM by gigiteng.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445177

 (2) 主題 / 風格設定:角落生物/可愛風格

 (3) 有無遇到的問題:遇到圖片無法繞圖排文 然後用了很久

 (4) 製作感想:如果一開始有問題就要趕快發現比較好,不然後面找很久也有可能找不到

 (5) 製作作業的時間 :三天



Edited 2 time(s). Last edit at 11/25/2017 06:14PM by 1055445177.
(編輯記錄)

 (1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445060

 (2) 主題 / 風格設定(色彩設定部份) 紅.白.米白

 (3) 有無遇到的問題 沒

 (4) 製作感想 想睡覺

 (5) 製作作業的時間 3小時

(1)作業網址 :http://mepopedia.com/~css106-2c/hw03/hw03-1055445003
(2)
1有無遇到的問題 : 不太會做
2.製作感想 :製作時間長,摸索很久
3.製作作業的時間 半天

(傳錯作業,傳到期中)

(1)網站主題: one ok rock
(2)製作動機: 喜歡這個樂團
(3)製作內容:
團員介紹(Member)
團體故事(Story)
歷年專輯(album)

(每個導覽列的中文及(英文檔名))
(4)風格設定: 暗黑搖滾風
(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:

https://www.facebook.com/ONEOKROCK/



Edited 1 time(s). Last edit at 11/29/2017 12:52AM by i19980730.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445063

 (2) 主題 / 風格設定(色彩設定部份) :以小小兵為主題 / 黃白色調為主

 (3) 有無遇到的問題:無

 (4) 製作感想:需要一顆清晰的腦袋

 (5) 製作作業的時間 :半天



Edited 1 time(s). Last edit at 11/29/2017 01:38AM by 1055445063.
(編輯記錄)

(1) 作業網址:http://mepopedia.com/~css106-2c/hw03/hw03-1055445033/index.html

其中作業有再更改

(2) 主題 / 風格設定(色彩設定部份):嚕嚕米深藍和亮黃對比
(3) 有無遇到的問題 :無

(4) 製作感想:
覺得做個網頁還滿複雜
但深入了解網頁構成
還滿上手的
謝謝老師的耐心教導

(5) 製作作業的時間 :3~4小時完成



Edited 1 time(s). Last edit at 11/29/2017 11:17PM by 1055445033.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445186
 (2) 主題 / 風格設定(色彩設定部份) 藍白風格

 (3) 有無遇到的問題:無

 (4) 製作感想:我覺得有點難,但是成品出來的時候很開心
 (5) 製作作業的時間 2~2.5小時

作业网址 http://mepopedia.com/~css106-2c/hw03/hw03-1055443120
问题 图片在实际网页打开时无法显示
风格 暖色
完成时间 3小时

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445111
(2) 主題 / 風格設定(色彩設定部份):遊戲美術圖居多

(3) 有無遇到的問題 :
電腦dw沒辦法放圖片然後又重新灌什麼的.......
然後再製作的時候也很有問題.....然後弄了好久qq
有些設定明明有設定卻還是不知道為什麼沒辦法用好


(4) 製作感想: 很有挫敗感的網頁設計qq同時也是最有成就感的網頁設計!!
在弄繞圖排文的時候雖然一直弄不好但是最後弄出來的成果真的很有成就感
因為我的電腦dw是cc版本然後又是英文的所以在操作上面真的真的很有障礙qq
所以真的要花很多時間去做這個看起來還是做到一半的網頁qq

(5) 製作作業的時間:不知道弄多久

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445045

 (2) 主題 / 風格設定 :星空

 (3) 有無遇到的問題 : 無

 (4) 製作感想 : 比之前的作業要負很多 花很多時間理解

 (5) 製作作業的時間 : 2天

 (1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055443135

 (2) 主題 / 風格設定(色彩設定部份) 五月天,深色

 (3) 有無遇到的問題,图片不见了刚开始

 (4) 製作感想 不会做~~

 (5) 製作作業的時間 3小时

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055443135

 (2) 主題 / 風格設定(色彩設定部份) 五月天 深色

 (3) 有無遇到的問題 小标题做不出来 改了很多次

 (4) 製作感想 不会做

 (5) 製作作業的時間 很久不记得改了好多次

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445206
(2) 主題 / 風格設定(色彩設定部份) 沉月之鑰/ 星空系列

(3) 有無遇到的問題 無

(4) 製作感想

(5) 製作作業的時間 5h

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1045445241/
(2) 主題 / 風格設定(色彩設定部份):海洋,藍色

(3) 有無遇到的問題 :有 一點點

(4) 製作感想: 越來越難

(5) 製作作業的時間 :一天



Edited 1 time(s). Last edit at 12/13/2017 12:02PM by popo80049.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~css106-2c/hw03/hw03-1055445159

 (2) 主題 / 風格設定:淡藍憂鬱

 (3) 有無遇到的問題:背景圖片的尺寸設定卡了一陣子

 (4) 製作感想:十分有成就感

 (5) 製作作業的時間 :2小時