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

Advanced

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

1. 一、製作說明


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

2.下載附件

3.每個同學記得在title的部分打上"自訂的主題"
在#footer 註明 Designed by 某某某(可自行取名) 10154452xx

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

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

6. 以本單元的架構下,文字、圖片及設定,可依講義或自行發揮,也可以期中作業的內容開始製作

7. 本次作業的重點在於:

 (1) 練習 Dreamweaver 的操作與使用
 (2) 透過 Dreamweaver 的練習,比較藉由 Dreamweaver 輔助與直接編輯「HTML/CSS原始碼」的優缺點。
 (3) 利用圖片設計加上CSS色彩搭配,營造網頁整體風格(加分)


2. 二、繳交作業方式



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

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

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

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

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



2. 上傳至FTP

3.回覆本篇文章

 (1) 作業網址

 (2) 風格設定(色彩設定部份)(也可以期中作業的內容開始製作)(加分)

 (3) 有無遇到的問題

 (4) 製作感想

 (5) 製作作業的時間

4.請務必在下次上課前回覆,否則為遲交



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

===========================================
本週補充講義:
1.網站設計解析
2.實做第一個網頁
3.利用 CSS 與 Div 標籤建立網頁版型


以上PDF講義請至學生系統下載
http://192.192.78.86/student_portal/


===========================================



Edited 3 time(s). Last edit at 10/21/2012 07:31PM by JinJin.
(編輯記錄)

Attachments:
開啟 | 下載 - hw03-101.rar (105.4 KB)
(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445203

(2) 風格設定:白、灰風格

(3) 有無遇到的問題:有,不過已經解決了謝謝老師:)

(4) 製作感想:很開心,因為製作的是自己喜歡的人物^________^

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

(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445258

(2) 風格設定:藍黃對比風格

(3) 有無遇到的問題:有,還好有同學們救我不然我就GG了

(4) 製作感想:有種解脫的感覺網頁真的好難不是普通人會做的事但還好做完了ˊ_>ˋ

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

 (1) 作業網址 http://mepopedia.com/~web101c/hw03/hw03-1015445231

 (2) 風格設定 綠

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

 (4) 製作感想 好困難

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

(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445243

(2) 風格設定:凱莉克萊森 簡約風

(3) 有無遇到的問題:還好都只是小問題~~因為做了第二次 =口=

(4) 製作感想:用AI切片會切到手軟~~~

(5) 製作作業的時間 :3天的樣子~~~((依舊三天



Edited 2 time(s). Last edit at 11/01/2012 01:12AM by 1015445243.
(編輯記錄)

(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445239

(2) 風格設定:白、灰、酒紅

(3) 有無遇到的問題:有,已經自己解決了^____^

(4) 製作感想:冠希好帥♥

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

http://mepopedia.com/~web101c/hw03/hw03-1015445245

 (1) 風格設定 : 有點古典風的去看熊熊維尼的由來

 (2) 有無遇到的問題 : 程式一直搞混...重新打了好多次 >3<

 (3) 製作感想 : 很開心 !!! 我學到好多,做完後,整個就....爽 啦!!!!!! grinning smiley

 (4) 製作作業的時間 : 2 天多 (不包含找圖片和資料)

(1) 作業網址/http://mepopedia.com/~web101c/hw03/hw03-1015445269
(2) 風格設定/綠色系列為配合茶葉的綠色。
(3) 有無遇到的問題/某個按鈕無法排列對齊、按鈕遮住上方文字。
(4) 製作感想/步驟一多容易混亂,然後做不好又重改,好累。
(5) 製作作業的時間/兩天多。

(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445218

(2) 風格設定(色彩設定部份):紅.黃.白.黑(米老鼠的顏色)

(3) 有無遇到的問題 :原本字體會亂碼,後來有人教就好囉!

(4) 製作感想:快做完一個完整的網頁囉~~好開心好開心><

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

(1) 作業網址 :http://mepopedia.com/~web101c/hw03/hw03-1015445234

 (2) 風格設定: 白、紫粉色系

 (3) 有無遇到的問題 有~~感謝黃凱敬同學的幫忙~已經解決

 (4) 製作感想 :每次做到按鈕時都會忘記~有越做越順的感覺,因為我們以前都是用 FlasH做的,現在比較上手了.

 (5) 製作作業的時間: 留下來的輔導時間

(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445235

(2) 風格設定:粉色系風格

(3) 有無遇到的問題:在排版上常常會搞錯

(4) 製作感想:還蠻有成就感的 可以做自己喜歡的主題

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

MEPOERs said:
JinJin: 檔案無法正常顯示喔!
(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445213

(2) 風格設定:灰、綠風格

(3) 有無遇到的問題:有,黃同學凱敬幫我解除了

(4) 製作感想:很開心,能夠設計自己喜歡的網頁以及音樂歌手

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

(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445208

(2) 風格設定:清爽風格

(3) 有無遇到的問題:困難已被我解決

(4) 製作感想:好累!一直重做、一直改,不過最後終於做完,非常的開心

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

作業網址 :http://mepopedia.com/~web101c/hw03/hw03-1015445261

風格設定:硬式派風格,使用低調但沉穩的顏色,呈現出騎士精神和中古世紀的感覺

有無遇到的問題 :背景跟圖片放置弄了很久

製作感想 :做完很有成就感!!要一直檢查有無錯誤,只要發現錯誤就要馬上改,不然全部做完後才找到,再改就會非常累!!

製作作業的時間 :花了我一整天...

(1)網址:http://mepopedia.com/~web101c/hw03/hw03-1015445225




 (2) 風格設定(色彩設定部份)(也可以期中作業的內容開始製作)
:使用之前作業2,為出發點! 再套用圖片!

 (3) 有無遇到的問題
;有!非常多!!!

 (4) 製作感想
我要被G爆了!

 (5) 製作作業的時間
= = 兩個禮拜(攤!

MEPOERs said:
JinJin: 沒有看到你上傳的網頁~再檢查一下喔
(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445227

(2) 風格設定:黑、白、紅風格

(3) 有無遇到的問題:有sad smiley(不小心刪錯東西,只好重做!!悲劇阿

(4) 製作感想:不管做什摩作業都要記得隨時存檔、備份,不然就等著GG吧

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

(1) 作業網址 :http://mepopedia.com/~web101c/hw03/hw03-1015445221

 (2) 風格設定:藍 白

 (3) 有無遇到的問題:有圖片排版跟設定小地方的問題,都已解決

 (4) 製作感想:感謝老師不斷的教我,做出網頁了

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

(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445240
(2) 風格設定 紅粉色系
(3) 有無遇到的問題 無
(4) 製作感想 學到很多,會繼續努力
(5) 製作作業的時間 兩天多



Edited 1 time(s). Last edit at 11/04/2012 11:19PM by 1015445240.
(編輯記錄)

(1) 作業網址 http://mepopedia.com/~web101c/hw03/hw03-1015445206

 (2) 風格設定 咖啡色系

 (3) 有無遇到的問題 挺多的哈哈 因為我的DW是CS3版本 所以有點搞不清楚要怎麼做 還好有達令救了我 真的很感謝她

 (4) 製作感想 我真的超感動 我能做完 也超愛達令的辣

 (5) 製作作業的時間 數不清辣

(1) 作業網址 :http://mepopedia.com/~web101c/hw03/hw03-1015445207

(2) 風格設定:咖啡色系.極簡

(3) 有無遇到的問題 :一開始有遇到header出不來的情況 最後有解決

(4) 製作感想:看到做出來封面時,有股成就感!

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



Edited 1 time(s). Last edit at 11/05/2012 12:04AM by FF.
(編輯記錄)

 (1) 作業網址 : http://mepopedia.com/~web101c/hw03/hw03-1015445201

 (2) 風格設定:紅、黑、白

 (3) 有無遇到的問題 :有達林的協助,問題已經解決了!

 (4) 製作感想:能做出來很開心~~~ ^^

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

(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445215

(2) 風格設定: 黑暗、神秘。

(3) 有無遇到的問題:有,已自己解決。

(4) 製作感想:很開心能學習到新的語法做完這次的作業,看到自己的網頁作出來真的很有成就感!

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

(1) 作業網址 :http://mepopedia.com/~web101c/hw03/hw03-1015445270/

(2) 風格設定 :淡色系

(3) 有無遇到的問題 :還有很多需要多多研究

(4) 製作感想 :終於趕完了! 呼~

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

(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445233

(2) 風格設定:繽紛風

(3) 有無遇到的問題:放按鈕有點難

(4) 製作感想:有點刺激

(5) 製作作業的時間 : 好多個小時

(1) 作業網址 http://mepopedia.com/~web101c/hw03/hw03-1015445202

(2) 風格設定 白灰

(3) 有無遇到的問題 圖片變換一直跑框

(4) 製作感想 我真的覺得從零到有真的很有成就感我好喜歡郭采潔喔

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

作業網址:http://mepopedia.com/~web101c/midterm/midterm-1015445250
1.設計風格:酷炫風
2.色彩計畫:暗色調
3.有無遇到的問題:慢慢摸索就解決了
4.製作感想:複雜....困難.......還是搞定..........累..........
5.製作作業的時間 :兩天............

(1) 作業網址 http://mepopedia.com/~web101c/hw03/hw03-1015445241

(2) 風格設定 暗色系

(3) 有無遇到的問題 無

(4) 製作感想 做完了

(5) 製作作業的時間 1天

1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445232

(2) 風格設定:白、綠風格

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

(4) 製作感想:以為要全部做完,沒想到只要做一頁就好~

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

(1) 作業網址 http://mepopedia.com/~web101c/hw03/hw03-1015445214/

 (2) 風格設定 黑白灰 呈現比較黑暗的感覺

 (3) 有無遇到的問題 影片致中的問題

 (4) 製作感想 做好了之後檔案不見真的很悲劇

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

(1) 作業網址 http://mepopedia.com/~web101c/midterm/midterm-1015445214/

(2) 風格設定 黑白灰 呈現比較黑暗的感覺

 (3) 有無遇到的問題 影片致中的問題

 (4) 製作感想 做好了之後檔案不見真的很悲劇

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

(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445263

(2) 風格設定: 紅、藍風

(3) 有無遇到的問題:有,我遇到非常大的問題,她好可愛怎麼辦

(4) 製作感想:對於不是設計出身的人真的是非常困難的一門功課

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

(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445259

(2) 風格設定:粉色系happy tree friends

(3) 有無遇到的問題:有但有聰明的daddy幫助我>_^

(4) 製作感想:能夠更深入的了解這個卡通的內容還有主角之類

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

(1) 作業網址 http://mepopedia.com/~web101c/hw03/hw03-1015445255/

(2) 風格設定 海綿寶寶

(3) 有無遇到的問題 還好

(4) 製作感想 很麻煩而已

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

(1) 作業網址 : http://mepopedia.com/~web101c/hw03/hw03-1015445252

(2) 風格設定: 可愛俏皮

(3) 有無遇到的問題:一開始要先好好複習講義,一些小問題也問同學解決了~

(4) 製作感想 :其實網頁設計並不難,只是有些設定很麻煩...自己打語法真有成就哈哈,以前都看不懂

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



Edited 1 time(s). Last edit at 11/05/2012 04:22PM by Chian Chian.
(編輯記錄)

(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445217

(2) 風格設定:粉粉的

(3) 有無遇到的問題:有,同學真好

(4) 製作感想:好想睡覺

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

 (1) 作業網址 http://mepopedia.com/~web101c/hw03/hw03-1015445254

 (2) 風格設定 底圖是由一張東方神起的合照用ps修圖後設的 粉藍風格

 (3) 有無遇到的問題 常常DW有顯示 彈道瀏覽器時就顯示不出來

 (4) 製作感想 其實做法簡單,需要多做筆記

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

(1) 作業網址:http://mepopedia.com/~web101c/midterm/midterm-1015445210/

(2) 風格設定:主角們的色系

(3) 有無遇到的問題:有 同學都很有耐心幫忙 啾咪

(4) 製作感想:越來越有興趣

(5) 製作作業的時間 :一節課

(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445236

(2) 風格設定:盧廣仲的風格

(3) 有無遇到的問題:有,不過同學幫我弄好了

(4) 製作感想:雖然很麻煩別人,但還是做完了

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

(1)作業網址:http://mepopedia.com/~web101c/midterm/midterm-1015445212/index.html
(2)
1.設計風格: 兒童的
2.色彩計畫: 粉色藍綠色
3.有無遇到的問題:連結的部分
4.製作感想:連結的部分有些困難後來就慢慢懂了
5.製作作業的時間 : 周末,做一些
smiling bouncing smileysmoking smileysmoking smileysmoking smileysmoking smileysmoking smileysmoking smiley
(1)網站主題:玩具總動員
(2)製作動機: 喜歡這電影
(3)製作內容(分頁項目): 關於玩具總動員
(4)資料蒐集分析: http://www.facebook.com/PixarToyStory/info

(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445223

(2) 風格設定:白、藍風格

(3) 有無遇到的問題:有 好多密密麻麻的數據看不懂 可是有問同學解決
(4) 製作感想做完後會覺得 其實沒有想像中的難

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

(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445248

(2) 風格設定:單調、瞭然

(3) 有無遇到的問題:對於插入方面不太懂

(4) 製作感想:越做越有心得,具有挑戰性

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

(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445256

(2) 風格設定:粉色系風格

(3) 有無遇到的問題:有,不過已經解決了謝謝老師:)

(4) 製作感想:很開心,因為製作的是自己喜歡的卡通人物

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

(1)作業網址:http://mepopedia.com/~web101c/midterm/midterm-1015445257
(2).
1.設計風格: 簡單、舒服
2.色彩計畫: 粉紅、黃、藍綠
3.有無遇到的問題: 有,插入影片
4.製作感想: 越做越有心得越有想法^_^
5.製作作業的時間 : 一天

_________________________

(1)網站主題:棉花糖
(2)製作動機:喜歡他們的歌><
(3)製作內容(分頁項目): 關於棉花糖

(1)作業網址: http://mepopedia.com/~web101c/midterm/midterm-1015445219/
(2).
1.設計風格: 下課後(卡通)風格
2.色彩計畫: 藍色系+下課後色系
3.有無遇到的問題: 路徑問題
4.製作感想: 真的很複雜,但有大家的幫忙,終於做好了
5.製作作業的時間 : 2天


(1)網站主題: Recess
(2)製作動機: 最近很懷念一直看卡通的時光
(3)製作內容(分頁項目):T.J.、Vince、Ashley、Gretchen、Mikey、Gus
(4)資料蒐集分析
◎設計優良網站(風格): 可愛、有活力

(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445251

(2) 風格設定:普普風

(3) 有無遇到的問題:有老師大人的幫忙完全沒問題

(4) 製作感想:下次不要翹那麼多課 拖到最後才做完 很累

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

(1) 作業網址:http://mepopedia.com/~web101c/hw03/hw03-1015445224

(2) 風格設定:簡單大方 清新脫俗

(3) 有無遇到的問題:影音檔 連結

(4) 製作感想:過程雖然很繁複可是做完了別有一般成就

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

{1) 作業網址 http://mepopedia.com/~web101c/hw03/hw03-1015445229

(2) 風格設定 黑、灰、白

(3) 有無遇到的問題 功能忘好快~

(4) 製作感想 黑白配色好難

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

(1) 作業網址:file:///C:/Users/Aki/Desktop/hw03-9821445142/index1.html

(2) 風格設定:可愛彩色

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

(4) 製作感想:參考書本跟講義很清楚

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