[作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 1. [color=#663300]一、製作說明：[/color]2. [color=#663300]二、繳交作業方式[/color][color=#990000][作業03] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇[/color] 1. [color=#663300]一、製作說明：[/color] 1.請參考 [url=http://mepopedia.com/forum/read.php?804,16271][講義03] 利用Div標籤與CSS建立基本網頁版型[/url] 的步驟製作 2.下載附件 3.每個同學記得在[color=#990033]title的部分打上"自訂的主題"[/color] 在#footer 註明 Designed by 某某某(可自行取名) 4. 在#wrapper寬度上打上 px的數值 5. #content內，自行打入不同的內容文字，自行隨意設定 6. 以本單元的架構下，文字、圖片及設定，可依講義或自行發揮 7. 本次作業的重點在於： 　[color=#CC0000](1) 練習 Dreamweaver 的操作與使用。 　(2) 使用photoshop製作頂圖及導覽列按鈕。 　(3) 利用圖片設計加上CSS色彩搭配，營造網頁整體風格（加分）[/color] 2. [color=#663300]二、繳交作業方式[/color] 1.製作完成後，檔案命名方式： [color=#669900]第三個作業FTP上的資料夾為：hw03 每位同學請將自己的資料夾命名為：hw03-學號 這個作業的網址則為:http://mepopedia.com/~cg104-1a/hw03/hw03-104xxxxxxx 資料夾內含： 1.首頁命名為index.html 2.一個命名為style.css的css樣式檔 3.images圖檔資料夾 存放在 < hw03-學號 > 的資夾內[/color] 2. 上傳至FTP 3.回覆本篇文章 　(1) 作業網址 　(2) 風格設定（色彩設定部份）（加分） 　(3) 有無遇到的問題 　(4) 製作感想 　(5) 製作作業的時間 [color=#CC3300]範例參考網站：[/color] http://mepopedia.com/~jinjin/web/hw03/ 學長姐範例 http://mepopedia.com/~web100-a/hw03/hw03-1006445010/ http://mepopedia.com/~web100b/hw03/hw03-1001445006/ =========================================== [color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color] =========================================== 補充下載參考檔案 文字檔 ： http://mepopedia.com/~cg104-1a/hw03/hw03-ex/hw03.txt 練習圖檔：http://mepopedia.com/~cg104-1a/hw03/hw03-ex/back.psd http://mepopedia.com/forum/read.php?2563,80547,80547#msg-80547 Fri, 23 Oct 2026 06:42:54 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2563,80547,82087#msg-82087 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,82087#msg-82087 http://mepopedia.com/~cg104-1a/hw03/hw03-1045440006
(2) 風格設定（色彩設定部份）（加分） ：簡約風格
(3) 有無遇到的問題 ：目前沒有。
(4) 製作感想 ：有成就感，覺得神奇。
(5) 製作作業的時間 ：不想讀書的時候。]]> 1045440006 104-2《中國》竹影視一A-電腦繪圖實作(一) Fri, 17 Jun 2016 13:20:28 +0800 http://mepopedia.com/forum/read.php?2563,80547,82072#msg-82072 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,82072#msg-82072 http://mepopedia.com/~cg104-1a/hw03/hw03-1045440032/
(2) 風格設定（色彩設定部份）（加分）
黑黑酷酷的
(3) 有無遇到的問題
忘記目錄要怎模更換了
(4) 製作感想
還不錯
(5) 製作作業的時間
幾個小時]]> littlechih0828 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 16 Jun 2016 21:03:00 +0800 http://mepopedia.com/forum/read.php?2563,80547,82049#msg-82049 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,82049#msg-82049 http://mepopedia.com/~cg104-1a/hw03/hw03-1045440033
(2) 風格設定（色彩設定部份）（加分）
我也不知
(3) 有無遇到的問題
目前沒有。
(4) 製作感想
沒有
(5) 製作作業的時間
下課時間]]> afd78949 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 16 Jun 2016 15:10:52 +0800 http://mepopedia.com/forum/read.php?2563,80547,82043#msg-82043 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,82043#msg-82043 http://mepopedia.com/~cg104-1a/hw03/hw03-1045440028
(2) 風格設定 MARVEL
(3) 有無遇到的問題
目前沒有
(4) 製作感想
有成就感，覺得神奇。
(5) 製作作業的時間
7]]> 1045440028 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 16 Jun 2016 14:26:30 +0800 http://mepopedia.com/forum/read.php?2563,80547,82020#msg-82020 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,82020#msg-82020
　(2) 風格設定:鮮豔繽紛

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

　(4) 製作感想 :網頁好難做 sad smiley

　(5) 製作作業的時間:3小時]]> 小花蛀牙 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 16 Jun 2016 11:49:41 +0800 http://mepopedia.com/forum/read.php?2563,80547,81821#msg-81821 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,81821#msg-81821
1搞笑
2.還好
3.有點困難在設定風格的時候'
4.兩天]]> king4221029 104-2《中國》竹影視一A-電腦繪圖實作(一) Tue, 14 Jun 2016 00:31:37 +0800 http://mepopedia.com/forum/read.php?2563,80547,81435#msg-81435 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,81435#msg-81435
網站主題:只想擁抱你

製作動機:喜歡這部電影，喜歡這部電影的主題曲

導覽列項目:最新資訊、電影簡介、演員簡介、音樂專輯

風格設定:但採、無色彩的方式凸顯主題

有無遇到的問題:爬文萬應通

(5)製作感想:感覺我需要打掉重練...

(6)製作作業的時間:8小時]]> 翕洗喜翕西 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 19 May 2016 11:26:42 +0800 http://mepopedia.com/forum/read.php?2563,80547,81431#msg-81431 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,81431#msg-81431 http://mepopedia.com/~cg104-1a/hw03/hw03-1045440024
(2) 風格設定
淡淡得無色彩灰色白色黑色體現這個故事單傳的白亮與沉痛的黑
(3) 有無遇到的問題
一直都有，不過慢慢爬文就解決了
(4) 製作感想
這東西真不簡單
(5) 製作作業的時間
4個小時左右]]> 翕洗喜翕西 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 19 May 2016 00:00:18 +0800 http://mepopedia.com/forum/read.php?2563,80547,81182#msg-81182 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,81182#msg-81182
http://mepopedia.com/~cg104-1a/hw03/hw03-1045440020

(2) 風格設定（色彩設定部份）（加分）:

因為還沒有想法概念所以用老師提供的檔案製作。

(3) 有無遇到的問題:

還可以。

(4) 製作感想:

覺得其實一點也都不難。

(5) 製作作業的時間:

回家時間。]]> 1045440020 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 28 Apr 2016 13:24:39 +0800 http://mepopedia.com/forum/read.php?2563,80547,81168#msg-81168 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,81168#msg-81168
　(2) 風格設定（色彩設定部份）（加分）：走極簡的風格

　(3) 有無遇到的問題： 很多問題,電腦沒有軟體好不方便

　(4) 製作感想 ：看完覺得蠻不錯,很有成就感

　(5) 製作作業的時間 ：一天,封面的部分蠻難做的]]> 1045440021 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 28 Apr 2016 00:11:26 +0800 http://mepopedia.com/forum/read.php?2563,80547,81163#msg-81163 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,81163#msg-81163
　(2) 風格設定 :黑白簡約風

　(3) 有無遇到的問題:有 我的DW是英文版所以我一直搶室友電腦做

　(4) 製作感想:難爆惹

　(5) 製作作業的時間:大約2天吧呵呵呵]]> 1045440002 104-2《中國》竹影視一A-電腦繪圖實作(一) Wed, 27 Apr 2016 23:42:17 +0800 http://mepopedia.com/forum/read.php?2563,80547,81159#msg-81159 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,81159#msg-81159
　(2) 風格設定（色彩設定部份）（加分） 紫色調

　(3) 有無遇到的問題 無

　(4) 製作感想 很累

　(5) 製作作業的時間 5小時]]> 1045440009 104-2《中國》竹影視一A-電腦繪圖實作(一) Wed, 27 Apr 2016 18:00:23 +0800 http://mepopedia.com/forum/read.php?2563,80547,81155#msg-81155 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,81155#msg-81155
(1)網站主題： 少女時代

(2)製作動機，對象：喜歡少女時代，給一樣喜歡的人看

(3)導覽列項目：團體介紹、成員介紹、音樂作品、戲劇作品、專屬節目

(3)風格設定：以粉紅色為主色調，因為少女時代的代表色是玫瑰粉

(4)有無遇到的問題：沒有太大的問題

(5)製作感想：感覺越來越複雜了

(6)製作作業的時間：2個禮拜]]> 1045440014 104-2《中國》竹影視一A-電腦繪圖實作(一) Wed, 27 Apr 2016 17:25:35 +0800 http://mepopedia.com/forum/read.php?2563,80547,81153#msg-81153 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,81153#msg-81153
　(2) 風格設定（色彩設定部份）（加分） 紅白

　(3) 有無遇到的問題 自己就是一個問題

　(4) 製作感想 終於做完第一頁了耶!

　(5) 製作作業的時間 1天不到]]> 1045440019 104-2《中國》竹影視一A-電腦繪圖實作(一) Wed, 27 Apr 2016 13:24:49 +0800 http://mepopedia.com/forum/read.php?2563,80547,81137#msg-81137 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,81137#msg-81137 http://mepopedia.com/~cg104-1a/hw03/hw03-1045440045

(2) 風格設定（色彩設定部份）（加分）
用玩具總動員當初設定的安弟的房間“藍色系”來當底色，很可愛。

(3) 有無遇到的問題
同學有幫助，所以目前沒有。

(4) 製作感想
很有成就感，這麼亂的亂碼竟然看得懂，而且我的DW是英文版的，感覺影聞有變好：））

(5) 製作作業的時間
拍戲間的空擋

影視1A 1045440045 蘇美蓉]]> 蘇美蓉 104-2《中國》竹影視一A-電腦繪圖實作(一) Mon, 25 Apr 2016 14:30:46 +0800 http://mepopedia.com/forum/read.php?2563,80547,81046#msg-81046 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,81046#msg-81046 http://mepopedia.com/~cg104-1a/hw03/hw03-1025435233
(2) 風格設定 : 以亮粉色為主
(3) 有無遇到的問題 : 沒有
(4) 製作感想 :原本覺得很難，但做出第一頁後覺得很有成就感
(5) 製作作業的時間 : 晚上有空時]]> 1025435233 104-2《中國》竹影視一A-電腦繪圖實作(一) Wed, 20 Apr 2016 23:15:56 +0800 http://mepopedia.com/forum/read.php?2563,80547,81042#msg-81042 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,81042#msg-81042 http://mepopedia.com/~cg104-1a/hw03/hw03-1045440029/indx.html
　(2) 風格設定
米白色 襯托攝影師的照片
　(3) 有無遇到的問題
按照老師的講義做 沒甚麼問題 但頂端一直有空白很困擾
　(4) 製作感想
很期待全部做完的成果
　(5) 製作作業的時間
2天的時間 相當的漫長]]> 1045440029-yu 104-2《中國》竹影視一A-電腦繪圖實作(一) Wed, 20 Apr 2016 22:10:18 +0800 http://mepopedia.com/forum/read.php?2563,80547,81040#msg-81040 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,81040#msg-81040 http://mepopedia.com/~cg104-1a/hw03/hw03-1045440044
　(2) 風格設定
都白白的
　(3) 有無遇到的問題
到這裡都沒問題
　(4) 製作感想
後面還有大魔王
　(5) 製作作業的時間
10分鐘]]> 1045440044 104-2《中國》竹影視一A-電腦繪圖實作(一) Wed, 20 Apr 2016 21:42:34 +0800 http://mepopedia.com/forum/read.php?2563,80547,81038#msg-81038 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,81038#msg-81038
(2) 風格設定
以灰色色為主
　(3) 有無遇到的問題
雖然有越來越難，但做得比一開始順手了
　(4) 製作感想
做了自己喜歡的明星很開心
　(5) 製作作業的時間
課餘時間]]> GEE 104-2《中國》竹影視一A-電腦繪圖實作(一) Wed, 20 Apr 2016 20:48:40 +0800 http://mepopedia.com/forum/read.php?2563,80547,80828#msg-80828 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,80828#msg-80828
　(2) 風格設定（色彩設定部份）（加分）：黑白風

　(3) 有無遇到的問題：上課的時候是用Dreamweaver 6版，可是筆電只有CC版的，所以很多事情都要自己從新摸索，很難！

　(4) 製作感想：整個花了很多時間都在找CC版的按鈕，超難用的！所以整個都等於學不到什麼，希望能完全摸索完CC版～

　(5) 製作作業的時間：分兩天做，每天至少3 - 4小時]]> custard3928 104-2《中國》竹影視一A-電腦繪圖實作(一) Sat, 16 Apr 2016 23:30:33 +0800 http://mepopedia.com/forum/read.php?2563,80547,80813#msg-80813 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,80813#msg-80813 http://mepopedia.com/~cg104-1a/hw03/hw03-1045440014
　(2) 風格設定
以淡粉紅色為主
　(3) 有無遇到的問題
感覺越來越複雜了，可沒有太大的問題
　(4) 製作感想
學到新的東西了
　(5) 製作作業的時間
自己回家有時間就做。]]> 1045440014 104-2《中國》竹影視一A-電腦繪圖實作(一) Fri, 15 Apr 2016 17:38:07 +0800 http://mepopedia.com/forum/read.php?2563,80547,80697#msg-80697 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,80697#msg-80697
http://mepopedia.com/~cg104-1a/hw03/hw03-1045440013

(2) 風格設定（色彩設定部份）（加分）:

以「水」作為設計概念，希望能呈現出清新、大方的風格。

(3) 有無遇到的問題:

還好，不過隔了一段時間做所以有小小的戰鬥。

(4) 製作感想:

覺得網頁架構越來越多元及充實，也更加懂得運用各種語法，當自己能看得懂右鍵後出來其他人架設的網頁程式碼，不自覺有種「覺得感動」的心情。

(5) 製作作業的時間:

因為在學校做的網頁回家打開有問題又重設了不少東西，時間隔得有點久也有點忘記，所以花了一些時間。]]> 1045440013 104-2《中國》竹影視一A-電腦繪圖實作(一) Sun, 10 Apr 2016 12:04:46 +0800 http://mepopedia.com/forum/read.php?2563,80547,80687#msg-80687 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,80687#msg-80687
http://mepopedia.com/~cg104-1a/hw03/hw03-1045440010

(2) 風格設定（色彩設定部份）（加分）:

因為夏天快到了，所以以藍色跟白色來表現清爽的感覺；標題圖片則是用喜愛的偶像及自己畫的背景圖下去做結合。

(3) 有無遇到的問題:

沒有，目前都還算順利。

(4) 製作感想:

第一次知道PS原來可以跟網頁做結合，學到新的經驗；期待之後上課可以學習到更多。

(5) 製作作業的時間:

週四放學回家後就全部做完，大概花了2小時多左右。]]> 1045440010 104-2《中國》竹影視一A-電腦繪圖實作(一) Sun, 10 Apr 2016 00:11:32 +0800 http://mepopedia.com/forum/read.php?2563,80547,80675#msg-80675 Re: [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,80675#msg-80675 http://mepopedia.com/~cg104-1a/hw03/hw03-1045440046
(2) 風格設定（色彩設定部份）（加分）
用藍色想表現愛麗絲清新脫俗、脫離現實的感覺。
(3) 有無遇到的問題
目前沒有。
(4) 製作感想
有成就感，覺得神奇。
(5) 製作作業的時間
不想讀書的時候。]]> 1045440046 104-2《中國》竹影視一A-電腦繪圖實作(一) Sat, 09 Apr 2016 14:03:57 +0800 http://mepopedia.com/forum/read.php?2563,80547,80547#msg-80547 [作業03 ] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 http://mepopedia.com/forum/read.php?2563,80547,80547#msg-80547
  1. 1. [color=#663300]一、製作說明：[/color]
  2. 2. [color=#663300]二、繳交作業方式[/color]

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



1. [color=#663300]一、製作說明：[/color]



1.請參考 [url=http://mepopedia.com/forum/read.php?804,16271][講義03] 利用Div標籤與CSS建立基本網頁版型[/url]
的步驟製作

2.下載附件

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

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

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

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

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

　[color=#CC0000](1) 練習 Dreamweaver 的操作與使用。
　(2) 使用photoshop製作頂圖及導覽列按鈕。
　(3) 利用圖片設計加上CSS色彩搭配，營造網頁整體風格（加分）[/color]

2. [color=#663300]二、繳交作業方式[/color]



1.製作完成後，檔案命名方式：

[color=#669900]第三個作業FTP上的資料夾為：hw03

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

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

存放在 < hw03-學號 > 的資夾內[/color]


2. 上傳至FTP

3.回覆本篇文章

　(1) 作業網址

　(2) 風格設定（色彩設定部份）（加分）

　(3) 有無遇到的問題

　(4) 製作感想

　(5) 製作作業的時間



[color=#CC3300]範例參考網站：[/color]
http://mepopedia.com/~jinjin/web/hw03/

學長姐範例

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

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

===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================

補充下載參考檔案
文字檔 ： http://mepopedia.com/~cg104-1a/hw03/hw03-ex/hw03.txt
練習圖檔：http://mepopedia.com/~cg104-1a/hw03/hw03-ex/back.psd]]> JinJin 104-2《中國》竹影視一A-電腦繪圖實作(一) Wed, 30 Mar 2016 22:09:00 +0800