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

Advanced

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

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



1. 一、製作說明:



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

2.下載附件

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

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

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

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

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

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


2. 二、繳交作業方式



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

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

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

資料夾內含:
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 18 time(s). Last edit at 10/22/2011 06:33PM by JinJin.
(編輯記錄)

Attachments:
開啟 | 下載 - hw03-100.rar (105.4 KB)
同學:

之前作業三的目錄 (hw03) 沒有開,現在已經開了。同學可以開始上傳作業了!

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

 (2) 風格設定(色彩設定部份)(加分)沒有改變

 (3) 有無遇到的問題 目前無

 (4) 製作感想 能學到很快樂

 (5) 製作作業的時間 在學校完成 回家上傳

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


 (2) 風格設定(色彩設定部份)(加分) 沒有變

 (3) 有無遇到的問題 目前無

 (4) 製作感想 有點麻煩

 (5) 製作作業的時間 兩節課

3.回覆本篇文章

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


 (2) 風格設定(色彩設定部份)(加分) 和老師一樣smiling smiley

 (3) 有無遇到的問題 目前無

 (4) 製作感想 很順利

 (5) 製作作業的時間 在學校完成 回家上傳

MEPOERs said:
HP: Hello, 你的 css 路徑寫錯了,現在你寫的是:file:///K|/hw03-100/style.css。直接寫 style.css 就可以了。
啥??什麼路徑??confused smiley

MEPOERs said:
HP: 不好意思,我回錯人了。我應該是要回底下的 Ping-yun。
(1) 作業網址 http://mepopedia.com/~web100b/hw03/hw03-1001445095


 (2) 風格設定(色彩設定部份)自己有些微的改變顏色

 (3) 有無遇到的問題 目前無

 (4) 製作感想 目前還好

 (5) 製作作業的時間 在學校完成 回家改顏色上傳smiling smiley

MEPOERs said:
HP: Hello, 你的 css 路徑寫錯了,現在你寫的是:file:///K|/hw03-100/style.css。直接寫 style.css 就可以了。
(1) 作業網址 http://mepopedia.com/~web100b/hw03/hw03-1001445107


(2) 風格設定(色彩設定部份)(加分) 略改一些

 (3) 有無遇到的問題 目前沒有smiling bouncing smiley

 (4) 製作感想 還可以

 (5) 製作作業的時間 在學校完成 回家稍微改過上傳

1.http://mepopedia.com/~web100b/hw03/hw03-1001445049/

2.將content背景底色及字體色彩稍做修改調整,wrapper邊框效果使用outset。

3.無。

4.Dreamweaver雖然很方便,但有時自己輸入好像反而比較不會混淆。

5.課堂時間操作整體架構,回家修改、調整色彩,共計約2小時多。

MEPOERs said:
HP: 嗯,對。「自己輸入」有時候會比較有感覺。
(1) 作業網址 http://mepopedia.com/~web100b/hw03/hw03-1001445026/

(2) 風格設定(色彩設定部份)(加分)
加藍邊框而已

(3) 有無遇到的問題
雖然會做可是還是有點茫然

(4) 製作感想
語法不斷的要記住

(5) 製作作業的時間
兩節課

(1) http://mepopedia.com/~web100b/hw03/hw03-1001445123/

 (2) 風格設定(色彩設定部份)(加分)
以墨綠色為主,修改了邊與底色的配色。

 (3) 有無遇到的問題
為什麼在家裡打語法得時候它無法自動顯示,必須自己把語法全部拼出來....?
 (4) 製作感想
覺得很有趣,但因為MAC的dreamweaver全部是英文,回家修改得時候有些吃力...

 (5) 製作作業的時間
大概課堂兩小時 ,回家研究修改一小時。

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


 (2) 風格設定(色彩設定部份)(加分)無特定改變ˋ

 (3) 有無遇到的問題 還好 我會加油ˊsmileys with beer

 (4) 製作感想 sad smiley網頁設計得多練習才行ˊ

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

1.http://mepopedia.com/~web100b/hw03/hw03-1001445016/
2.沒有
3.沒有
4.覺得自己很厲害
5.兩hour 在學校完成

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


(2) 風格設定(色彩設定部份)(加分) 除了邊框沒什麼改變

 (3) 有無遇到的問題:我第一次上傳的檔案是錯誤的,所以我重新上傳了一次新的,但在這裡看時卻還是第一次上傳的網頁...

 (4) 製作感想:有點似懂非懂的

 (5) 製作作業的時間:在學校完成 回家改過



Edited 1 time(s). Last edit at 10/25/2011 10:31PM by s930335w.
(編輯記錄)

MEPOERs said:
JinJin: 網頁會有暫存的現象,現在看是正常的
(1) 作業網址 http://mepopedia.com/~web100b/hw03/hw03-1001445042

 (2) 風格設定(色彩設定部份)(加分) 沒特定風格

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

 (4) 製作感想 學會如何用btn了!!

 (5) 製作作業的時間 上課時間製作

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

 (2) 風格設定(色彩設定部份)(加分) 沒特定風格

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

 (4) 製作感想 越做越有成就感

 (5) 製作作業的時間 上課時間製作+回家做一下下

(1) 作業網址 http://mepopedia.com/~web100b/hw03/hw03-1001445024
(2) 風格設定 無
(3) 有無遇到的問題 目前還ok
(4) 製作感想 越來越多收穫
(5) 製作作業的時間 兩節課

 (1) http://mepopedia.com/~web100b/hw03/hw03-1001445008/

 (2)風格設定(色彩設定部份:有些字用淡米黃色

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

 (4) 製作感想: 需要多多練習~

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

(1) http://mepopedia.com/~web100b/hw03/hw03-1001445129/

 (2)風格設定(色彩設定部份:無

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

 (4) 製作感想: 好開心喔好想做好多網頁喔~~~~

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

(1) http://mepopedia.com/~web100b/hw03/hw03-1001445030

(2) 使用藍天與綠地的組合風格

(3) 一開始用的時候感覺卡卡的,但是後來看講義以及自己的記憶力,覺得一下又上手哩

(4) 雖然一開始很多的步驟以及按鍵,但是慢慢去操作就發現簡單易懂,讓我更有信心完成作業

(5) 1H

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

 (2) 風格設定 讓背景顏色更一致

 (3) 有無遇到的問題 無

 (4) 製作感想 老師上課講得很清楚~棒!

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

http://mepopedia.com/~web100b/hw03/hw03-1001445045/
風格 和老師相同
沒有遇到太大問題
大約兩個小時製作

http://mepopedia.com/~web100b/hw03/hw03-1001445045/
風格和老師相同
沒有遇到大問題
製作時間大約兩個小時

http://mepopedia.com/~web100b/hw03/hw03-1001445063
2.邊框搭配相近的顏色
3.包語法較複雜,容易出錯
4.語法技巧不夠熟練,需要搭配講義才能製作正確
5.兩個半小時

1. http://mepopedia.com/~web100b/hw03/hw03-1001445075

 2.. 風格設定(色彩設定部份) : 和老師一樣

 3. 有無遇到的問題 : 無

 4. 製作感想 : 目前很順利

 5. 製作作業的時間 : 約兩個半小時

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

 (2) 風格設定(色彩設定部份)(加分)
傳統老就可以感覺到有灰塵的風格~

 (3) 有無遇到的問題
講義都寫很清楚所以還好

 (4) 製作感想
很有趣,只是變化有點小
而且對於長寬要填多少還是有點混亂

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

MEPOERs said:
JinJin: 配色改得很好!
http://mepopedia.com/~web100b/hw03/hw03-1001445069/




回家自己再做一遍的~ (拭汗)

MEPOERs said:
JinJin: 楷體的感覺也不錯
http://mepopedia.com/~web100b/hw03/hw03-1001445002/

1.風格設定 以藍色做為邊框 亮眼

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

3.製作感想 很複雜sad smiley

4.製作作業的時間 在學校完成 回家稍微改過上傳



Edited 1 time(s). Last edit at 10/26/2011 06:04PM by 1001445002.
(編輯記錄)

-
1 . 作業網址
  http://mepopedia.com/~web100b/hw03/hw03-1001445022/

2 . 風格設定(色彩設定部份)(加分)
  色彩簡單,大量留白讓整體網頁更舒服、好看

3 . 有無遇到的問題
  無

4 . 製作感想
  利用 DIV 和 CSS 設計網頁很好玩
  從這個地方可以學到更多程式語法,讓我很感興趣

5 . 製作作業的時間
  兩個小時,課堂上完成

-



Edited 1 time(s). Last edit at 10/26/2011 09:30PM by hughero1314.
(編輯記錄)

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

 (2) 風格設定(色彩設定部份)(加分)沒有改變

 (3) 有無遇到的問題 目前無

 (4) 製作感想 常常不小心打錯字 找好久才發現錯誤的地方

 (5) 製作作業的時間 在學校完成 回到家發現檔案沒存好又重做了一遍

終於在一陣氣憤下完成。
我的作業都是以回家再做一次為主
都不是課堂上完成的
結果遇上很多問題
像是 我的版本是cs3 完全有問題
很多東西都找不到
而我的部分是中文 老師的圖片寫的是英文((但這問題一點都不重要
so 我被感挫折 終於在研究之下完成了
所以這次卡很久
像是找不到 插入標籤 cs3版開啟後下面沒有新增css規則 滑鼠變化影像 等等的困難
http://mepopedia.com/~web100b/hw03/hw03-1001445055
這次以老師的風格為主瞜 :">
大概2小時多

eva221022 Wrote:
-------------------------------------------------------
> http://mepopedia.com/~web100b/hw03/hw03-1001445067
> 1 沒有改顏色
2
> 3 製作上遇到問題但在下課留下來問學姊完成了
4 在學校上課時間內就完成

http://mepopedia.com/~web100b/hw03/hw03-1001445067
1 沒有改顏色
2 無
3 製作上遇到問題但在下課留下來問學姊完成了
4 在學校上課時間內就完成

blue1818 Wrote:
-------------------------------------------------------
> 1http://mepopedia.com/~web100b/hw03/hw03-1001445053
>
2 風格設定(色彩設定部份)(加分)沒有改變

3沒遇到問題毆

4 回家發現存錯打重做一次Q Q

5 製作作業的時間 在學校完成 但回去又花了一小時用完

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

(2) 風格設定(色彩設定部份)(加分):改了邊框的顏色

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

(4) 製作感想:講義寫的很清楚易懂

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

MEPOERs said:
JinJin: 少了置中,margin:auto;
(1) 作業網址 :http://mepopedia.com/~web100b/hw03/hw03-1001445057/

 (2) 風格設定(色彩設定部份)(加分) : 加了藍色邊框

 (3) 有無遇到的問題 : 較以前繁複但沒有太大的問題

 (4) 製作感想 : 學到按鈕變換感覺滿實用的

 (5) 製作作業的時間 : 上課枝後回家花了半小時就修改好了,準時上傳但忘記回應所以現在才來回應

(1) 作業網址 http://mepopedia.com/~web100b/hw03/hw03-1001445036/
(2) 風格設定(色彩設定部份)(加分)-只加content底色
(3) 有無遇到的問題 - 按照老師步驟做沒有什麼問題
(4) 製作感想 - 語法要記住
(5) 製作作業的時間 - 上課兩節課

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

 (2) 風格設定:沒有改變

 (3) 有無遇到的問題:問題都在課堂上解決囉

 (4) 製作感想:感謝同學與老師指教smiling smiley

 (5) 製作作業的時間:課堂上作完,回家上傳,但忘記回覆了sad smileysorry..."

1) 作業網址 http://mepopedia.com/~web100b/hw03/hw03-1001445083


(2) 風格設定(色彩設定部份)(加分) 自己用photoshop改圖

 (3) 有無遇到的問題 目前沒有

 (4) 製作感想 修圖花了很多時間

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

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

 (2) 風格設定(色彩設定部份)(加分)沒有改變

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

 (4) 製作感想 :因為是之前做的現在補回復所以我也忘記當時的心情了

 (5) 製作作業的時間 :在學校作完的吧!!