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

Advanced

[作業05 ] 繞圖排文與推文按鈕的應用

[作業05 ] 繞圖排文與推文按鈕的應用

請參考

[講義05] 繞圖排文與推文按鈕的應用
http://mepopedia.com/forum/read.php?804,17878,17878


本講義範例網址
http://mepopedia.com/~jinjin/web/hw05/story.html 



的步驟製作

下載附件的練習檔修改製作 (或以期末作業主題繼續設計新的一頁),必須是全新的內容的一頁。

本次作業的重點在於:

(1 )善用CSS導覽列功能
(2 )繞圖排文
(3 )推文設定
(4 )圖片跳窗放大
(5 )利用CSS,做更細緻的內文設定
(6 )如何利用圖片與文字的編排搭配出有質感的網頁。





1. 二、繳交作業方式



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

第五個平時作業FTP上的資料夾為:hw05

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

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

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



2.上傳至FTP

3.回覆本篇文章

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
2.有無遇到的問題?
3.製作感想
4.製作作業的時間





Edited 1 time(s). Last edit at 12/12/2017 09:51PM by JinJin.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 素色新聞版面
2.有無遇到的問題? 越來越上手的感覺
3.製作感想 : 圖片能夠放大點開來看感覺很棒,也很便利!
做網頁設計要特別小心才行~~
4.製作作業的時間 : 2小時



Edited 1 time(s). Last edit at 12/26/2017 09:51PM by Ch2254.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 玩具總動員 配色與風格設定:藍色系列
("我的作業5是在"people"那頁)
2.有無遇到的問題? 一開始做繞圖排文時,一直無法全部對整齊 但只後知道做繞圖排文時,文字要夠多,才會比較整齊。
3.製作感想 :覺得圖片放大很好玩 還有分享連結 覺得很酷
4.製作作業的時間: 3小時



Edited 1 time(s). Last edit at 12/20/2017 09:47PM by 林宥柔.
(編輯記錄)

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

(2).請回答以下問題:

1.網頁主題: 暖色系

2.有無遇到困難 多了一些語法,

3.製作感想 無

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



Edited 2 time(s). Last edit at 01/10/2018 04:07AM by stelas0309.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定;巧克力風格
2.有無遇到的問題? 無
3.製作感想 其實跟著老師的飲片一步一步慢慢做 就會勒
4.製作作業的時間 30分鐘到45分鐘

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

(2)
1.網頁主題: 配色與風格設定:藍色調
2.有無遇到的問題? 無
3.製作感想 很有趣但要磨很久
4.製作作業的時間 1小

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

(2)
1.網頁主題:配色與風格設定:藍色調
2.有無遇到的問題?無
3 .製作感想很有趣但要磨很久
4.製作作業的時間1小

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

(2).請回答以下問題:
1.網頁主題:綠色自然風
2.有無遇到的問題?上面的連結只有三個這樣很奇怪?!!!
3.製作感想 : 這次的其實很多都做過了所以也還好不過CC版本的很多東西不會用,像是連結的部分複製老師的範例也不行,所以都是在課堂上完成最後的部分。
4.製作作業的時間 :4小時??!!

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 粉粉紫紫可愛風
2.有無遇到的問題? : 很多上課有教過所以其實還好
3.製作感想 :雖然沒有做得很好(而且這個主題之前好像有人做過了QQ)我還是希望能夠把這個主題做完整
4.製作作業的時間 :大約2小時左右

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:嚴肅質感冷冷北極風,告訴大家北極熊很可憐,不要再浪費電了
2.有無遇到的問題? 其它頁面的內容目前還沒有想法,有想法之後會立馬補上
3.製作感想 希望可以做出一個能夠提醒世人節約能源的重要性,可以幫助到可憐又可愛的北極熊
4.製作作業的時間 忘了計算,不過有用心在做spinning smiley sticking its tongue outthumbs up

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


1.網頁主題: 配色與風格設定: 清新的簡單的
2.有無遇到的問題? 沒什麼大問題
3.製作感想 : 覺得好玩
4.製作作業的時間 : 2小時

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

1.網頁主題:古老黑魔法
配色與風格設定:黑暗恐怖邪惡詛咒
2.有無遇到的問題? 有時候想要圖片往下一點可以嗎..eye popping smileyconfused smiley
3.製作感想 :慢慢出現的我想要的感覺 就很想在首頁一開始加上動畫grinning smiley或著是有選項ex:你滿18了嗎? yes/no
不過這只是我的幻想confused smileysmoking smiley
4.製作作業的時間:沒有很久,大部分在上課時候都有跟上進度 好棒!smileys with beer

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

(2).請回答以下問題:
1.網頁主題:p714星球 配色與風格設定: 淡藍色清新可愛風
2.有無遇到的問題? 找不到圖片
3.製作感想 :完成第二頁了
4.製作作業的時間 :1小時

(1).作業網址 :http://mepopedia.com/~css106-2c/hw05/hw05-1055445183
(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 青色
2.有無遇到的問題?: 程式碼真的好難,我不懂網頁...
3.製作感想 :怕.jpg
4.製作作業的時間 :3小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 黑暗風格
2.有無遇到的問題? 沒有
3.製作感想 恩恩 ,有點煩
4.製作作業的時間 1小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 黃粉色的可愛風
2.有無遇到的問題? : 對網頁還是不是完全了解,還是有請同學幫忙
3.製作感想 :雖然沒有做得很好我還是希望能夠把這個主題做好做完整
4.製作作業的時間 :大約4小時左右

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:skrillex 白 米白 紅
2.有無遇到的問題? 沒
3.製作感想 : 恩
4.製作作業的時間 :20分鐘

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

(2).請回答以下問題:
1.網頁主題:oystermusic 配色與風格設定: 咖啡色調、清新
2.有無遇到的問題? 無
3.製作感想:不熟練的地方,多嘗試,會得到成就感!
4.製作作業的時間 :1小時多

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

(2).請回答以下問題:
1.網頁主題:探險活寶 配色與風格設定:黃色系列
2.有無遇到的問題:無
3.製作感想:學到新的東西,覺得很棒
4.製作作業的時間: 1小時半



Edited 1 time(s). Last edit at 12/27/2017 12:40AM by 1055445033.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 黃色暖色系
2.有無遇到的問題? 無
3.製作感想 :覺得越來越好玩 越來越上手
4.製作作業的時間 :一個小時到一個半小時

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

(2).請回答以下問題:
1.網頁主題:Ghost in the shell 配色與風格設定: 藍灰現代感
2.有無遇到的問題? 對.arttext 的設定搞不太懂
3.製作感想 :越來越複雜.....搞不懂自己哪裡做錯
4.製作作業的時間 :4小時

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

(2).請回答以下問題:

1.網頁主題: 暖色系!

2.有無遇到困難 多了一些語法,要去明白是什麼

3.製作感想 我做得很開心!很像在布置自己房間一樣!

4.製作作業的時間 不要問我會怕

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 蠟筆小新 黃色紅色為主體色
2.有無遇到的問題? : 因為有影片教學越來越上手了
3.製作感想 :雖然做得不好但已經越來越上手,希望期末可以做得更好
4.製作作業的時間 :大約1.2個小時左右

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 紫色
2.有無遇到的問題? : 對網頁還是不是完全了解,繞文排圖不太會
3.製作感想 :還是覺得很難
4.製作作業的時間 :半天左右

3.回覆本篇文章

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 搖滾但是卻可以溫暖人
2.有無遇到的問題? 無
3.製作感想 就像變魔術一樣
4.製作作業的時間 5個小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 黑粉
2.有無遇到的問題? 還好
3.製作感想 : 沒有
4.製作作業的時間 : 3小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 没有风格
2.有無遇到的問題? 没问题
3.製作感想 为什么Facebook连不上
4.製作作業的時間 半小时

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 黑白色調
2.有無遇到的問題? 連結麻煩
3.製作感想 : 又是一個艱辛的時刻
4.製作作業的時間 : 1.5小時

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

(2).請回答以下問題:
1.網頁主題:林珉萱(小威老師)
配色與風格設定: 粉紫色想走華麗風格
2.有無遇到的問題? 很多QUQ
3.製作感想 雖然問題很多,但有些呈現出來很開心~~
4.製作作業的時間 花了一世紀

http://mepopedia.com/~css106-2c/hw05/hw05-1055443120
配色 玄幻
问题 蛮多的= =
时间 2小时
感想 感觉期末要gg

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

(2)
1.網頁主題:配色與風格設定:多色調
2.有無遇到的問題?無
3 .製作感想:越來越覺得有趣
4.製作作業的時間2小

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

(2).請回答以下問題:

1.網頁主題: 龍貓 配色與風格設定:綠色系列
2.有無遇到的問題? 繞圖排文做得不太好。
3.製作感想 :有點難但還是會努力完成
4.製作作業的時間: 2小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 黑白
2.有無遇到的問題? 無
3.製作感想 很難慢慢摸索
4.製作作業的時間 1小時

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


1.網頁主題: 冰雪奇緣 配色與風格設定:可愛藍白色調
2.有無遇到的問題? 沒有
3.製作感想 滿有趣
4.製作作業的時間 2小時

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

(2).請回答以下問題:
1.網頁主題:三麗鷗
配色與風格設定:
2.有無遇到的問題?
3.製作感想
4.製作作業的時間 5小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:黃色系
2.有無遇到的問題? 越來越好玩
3.製作感想 : 很好
4.製作作業的時間 : 2小時

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

(2).請回答以下問題:
1.網頁主題:B.A.P 最新專輯 配色與風格設定: 深灰、淺灰、深紅
2.有無遇到的問題? 繞圖排文上出了一點問題 花很多時間理解
3.製作感想 : 成就感
4.製作作業的時間 : 3小時

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

(2).請回答以下問題:
1.網頁主題: 福山雅治 配色與風格設定:黑灰白色調
2.有無遇到的問題? 無
3.製作感想 能讓版面看起來更規律 真好
4.製作作業的時間 2小時

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


1.網頁主題: 配色與風格設定:海賊王 <> 黑灰白+紅色系

2.有無遇到的問題? 覺得要全部慢慢打要花很多時間 還有手殘用錯

3.製作感想 網頁程式碼好難 打錯一個字母後面就全錯 然後就得找拿裡打錯找很久eye popping smiley 謝謝老師的教學影片,不會的還可以反覆來看

4.製作作業的時間 1天

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

(2).請回答以下問題:
1.網頁主題: Troye Sivan
配色與風格設定:Blue
2.有無遇到的問題? 無,很順利
3.製作感想 加入推文按鈕很實用
4.製作作業的時間 1小時

.作業網址 :http://mepopedia.com/~css106-2c/hw05/hw05-1055443122

老师多看下不同的链接 谢谢您