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

Advanced

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

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



1. 一、製作說明:



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

2.下載附件

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

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

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

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

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

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


2. 二、繳交作業方式



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

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

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

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

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



2. 上傳至FTP

3.回覆本篇文章

 (1) 作業網址

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

 (3) 有無遇到的問題

 (4) 製作感想

 (5) 製作作業的時間



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

學長姐範例

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

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

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

Attachments:
開啟 | 下載 - hw03-100.rar (105.4 KB)
開啟 | 下載 - TOP.rar (661.6 KB)
(1) 作業網址 : http://mepopedia.com/~web103-c/hw03/hw03-1025445036

(2) 風格設定(色彩設定部份)沒做什麼太大的顏色改變

(3) 有無遇到的問題 : 按鈕的部分還在練習

(4) 製作感想 : 慢慢有些上手了

(5) 製作作業的時間 : 2014/11/4

1025445036 李易達

(1) 作業網址 : http://mepopedia.com/~web103-c/hw03/hw03-1015448006

(2) 風格設定:沒做什麼太大的改變

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

(4) 製作感想 : 簡單輕鬆學習

(5) 製作作業的時間 : 2014/11/5

1015448006 簡國榮

(1) 作業網址 http://mepopedia.com/~web103-c/hw03/hw03-1025445072/

(2) 風格設定(色彩設定部份)跟老師做的一樣

(3) 有無遇到的問題 無

(4) 製作感想 有點麻煩~繞圖排文一直跑掉

(5) 製作作業的時間 幾個禮拜


1025445072 王人永

(1) 作業網址 http://mepopedia.com/~web103-c/hw03/hw03-1025445141

(2) 風格設定色彩設定部份跟老師做的一樣

(3) 有無遇到的問題 照做

(4) 製作感想 有點麻煩 不過還行

(5) 製作作業的時間 一個禮拜


1025445141 王心仁

(1) 作業網址 http://mepopedia.com/~web103-c/hw03/hw03-1025445069

 (2) 風格設定(色彩設定部份)(加分) 跟老師做得一樣

 (3) 有無遇到的問題 會搞混

 (4) 製作感想 真的要多練習不然會忘記

 (5) 製作作業的時間 11/3

(1) 作業網址:http://mepopedia.com/~web103-c/hw03/hw03-1025443044/

 (2) 風格設定:跟範例一樣

 (3) 有無遇到的問題:步驟會有點亂掉,按鈕還在練習

 (4) 製作感想:東西越教越多,越來越複雜,慢慢吸收中

 (5) 製作作業的時間 :11/5

視傳2C 1025443044 王薏茹

(1) 作業網址 http://mepopedia.com/~web103-c/hw03/hw03-1025445123

(2) 風格設定(色彩設定部份)跟老師做的一樣

(3) 有無遇到的問題 會找不到哪裡有錯誤。

(4) 製作感想 有點複雜,還記不太起來。

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


1025445123



Edited 1 time(s). Last edit at 11/05/2014 09:30PM by Yuchi.
(編輯記錄)

(1) 作業網址 http://mepopedia.com/~web103-c/hw03/hw03-1025445018

(2) 風格設定(色彩設定部份)跟老師做的一樣

(3) 有無遇到的問題 不知哪裡做錯會找頗久

(4) 製作感想 越來越複雜,有時候會不知道自己做到哪裡

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


1025445018 陳怡融

(1) 作業網址 : http://mepopedia.com/~web103-c/hw03/hw03-1025445039

(2) 風格設定:沒做什麼太大的顏色改變

(3) 有無遇到的問題 : 語法好難

(4) 製作感想 : 還在努力

(5) 製作作業的時間 : 2014/11/4

1025445039 何佳霖

 (1) 作業網址 http://mepopedia.com/~web103-c/hw03/hw03-1025445153

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

 (3) 有無遇到的問題 在google瀏覽器 和IE不一樣 很困惑!!!

 (4) 製作感想 其實懂就不會很難還蠻輕易上手的

 (5) 製作作業的時間 回家利用3個多小時完成

1025445153 廖敏君

(1) 作業網址: http://mepopedia.com/~web103-c/hw03/hw03-1025445060

(2) 風格設定(色彩設定部份﹞:有一些小地方是按照自己喜歡的顏色做改變

(3) 有無遇到的問題:1.按鈕列跟頂圖之間有一條白白的地方不知道要怎麼調整.....
2. IE瀏覽跟GOOLE瀏覽的結果不一樣........

(4) 製作感想: 有比之前上手一些些,但還是要多練習不然有時候還是會忘記一些語法的概念

(5) 製作作業的時間:半個晚上+課堂


視傳2C 1025445060 黃淯婷

(1) 作業網址 : http://mepopedia.com/~web103-c/hw03/hw03-1025445198
(2) 風格設定 跟老師的範例一樣

(3) 有無遇到的問題 : 圖片更換的語法有點看不懂

(4) 製作感想 : 還得加強很多地方

(5) 製作作業的時間 : 2014/11/7

(1) 作業網址 : http://mepopedia.com/~web103-c/hw03/hw03-1025445147

(2) 風格設定:跟老師一樣

(3) 有無遇到的問題 : 圖與文字圍繞

(4) 製作感想 : 開始熟悉一些做法了

(5) 製作作業的時間 : 2014/11/7

1025445147 張 郁

(1) 作業網址 : http://mepopedia.com/~web103-c/hw03/hw03-1025445126

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

(3) 有無遇到的問題 : 放置圖片上去有些難

(4) 製作感想 : 有些複雜

(5) 製作作業的時間 : 2014/11/4

1025445126 宋映萱

(1) 作業網址 : http://mepopedia.com/~web103-c/hw03/hw03-1025445045

(2) 風格設定和老師的一樣

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

(4) 製作感想 : 學到很多

(5) 製作作業的時間 : 2014/11/4

1025445045 饒文欣

(1) 作業網址 http://mepopedia.com/~web103-c/hw03/hw03-1025445162

(2) 風格設定:跟老師做的一樣

(3) 有無遇到的問題: 沒有太大的問題

(4) 製作感想: 很難

(5) 製作作業的時間: 幾個小時。


1025445162陸怡潔

(1) 作業網址 : http://mepopedia.com/~web103-c/hw03/hw03-1025445129

(2) 風格設定(色彩設定部份)跟老師一樣

(3) 有無遇到的問題 : 一些步驟比較困難

(4) 製作感想 : 要結合以前學的內容有點困難

(5) 製作作業的時間 : 2014/11/3

1025445129 王嬿婷

(1) 作業網址 : http://mepopedia.com/~web103-c/hw03/hw03-1025445102

(2) 風格設定 跟老師的範例一樣

(3) 有無遇到的問題 : 有些設定不太懂,繞圖排文會跑掉

(4) 製作感想 : 我覺得應該要在多練一下一些語法的用法

(5) 製作作業的時間 : 2014/11/5 課堂上

1025445102 邱筱惠

 (1) 作業網址: http://mepopedia.com/~web103-c/hw03/hw03-1025445015

 (2) 風格設定: 模仿老師製做的

 (3) 有無遇到的問題: 要多練習才會上手

 (4) 製作感想: 有時候東西會跑掉很麻煩

 (5) 製作作業的時間; 上課時間還有回家自己做調整


1025445015陳曉琪

 (1) 作業網址: http://mepopedia.com/~web103-c/hw03/hw03-1025445006

 (2) 風格設定: 跟老師製做一樣的

 (3) 有無遇到的問題: 有些貼了字會亂跑

 (4) 製作感想: 很複雜有些看不懂 英文太多頭好痛

 (5) 製作作業的時間; 上課時間還+在家

 (1) 作業網址 http://mepopedia.com/~web103-c/hw03/hw03-1025445120

 (2) 風格設定(色彩設定部份)跟老師做一樣的

 (3) 有無遇到的問題 沒什麼太大問題都是自己忘記某個步驟

 (4) 製作感想 多弄幾次就知道了

 (5) 製作作業的時間 弄破解版軟體最久 作業問一下旁邊的恢復記憶就會了

1025445120

(1) 作業網址 http://mepopedia.com/~web103-c/hw03/hw03-1025445090/

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

 (3) 有無遇到的問題 步驟會搞亂 光搞懂語法就幾個小時了

 (4) 製作感想 不熟應該還要多加練習

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

1025445090 鍾婷玟

(1) 作業網址 file:///C:/Users/melod_000/Desktop/%E5%A4%A7%E4%BA%8C%E4%BD%9C%E6%A5%AD/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88/hw03-1025445075/index.html

 (2) 風格設定(色彩設定部份)(加分 ) 範例


 (3) 有無遇到的問題 非常複雜很緊張

 (4) 製作感想 好累><

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

http://mepopedia.com/~web103-c/hw03/hw03-1025445009


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

有無遇到的問題 :字老是跳來跳去,很常忘記字要放在甚麼和甚麼之間

製作感想 :一個人做完一個網頁蠻開心的,但是真的好複雜

製作作業的時間 :2-3個星期

(1) 作業網址 http://mepopedia.com/~web103-c/hw03/hw03-1025445003

(2) 風格設定:跟老師做的一樣

(3) 有無遇到的問題: 圖繞文的部分,原本有點小問題,請教了同學後,才知道有少掉一個小步驟

(4) 製作感想: so funny~so happy~~~ smiling smiley

(5) 製作作業的時間: 課堂+昨晚的幾個小時。


1025445003 潘相逸



Edited 1 time(s). Last edit at 11/12/2014 11:34AM by pam352.
(編輯記錄)

作業網址 http://mepopedia.com/~web103-c/hw03/hw03-1025445111/
有無遇到的問題 步驟好多,順序搞錯
製作感想 步驟有點亂,不太熟悉
製作作業的時間 幾個小時

1025445111 莊于萱

(1) 作業網址 http://mepopedia.com/~web103-c/hw03/hw03-1025445054/

(2) 風格設定(色彩設定部份) 大部分跟老師作的相同

(3) 有無遇到的問題 有些設定太多會搞不清楚,找不到錯誤的地方
文字旁邊的小方框一直用不好

(4) 製作感想 做的時候有上有一點,不過有時步驟還是會搞亂

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


1025445054 許雅筑

(1) 作業網址 http://mepopedia.com/~web103-c/hw03/hw03-1025445132

(2) 風格設定(色彩設定部份)跟老師做的一樣

(3) 有無遇到的問題 無

(4) 製作感想 :覺得有點複雜 容易搞混
(5) 製作作業的時間 幾個禮拜


1025445132 羅雅嫚

(1) 作業網址 :http://mepopedia.com/~web103-c/hw03/hw03-1025445063

(2) 風格設定(色彩設定部份):盡量跟老師做的一樣

(3) 有無遇到的問題 :很難做 網站連結一直做錯

(4) 製作感想 :好難 要多學習

(5) 製作作業的時間 :很久好幾個小時


1025445063 洪筠真

作業網址 : http://mepopedia.com/~web103-c/midterm/midterm-1025445156
做好久 但是很有成就感!

1025445156 蔡佳芬

(1) 作業網址 :http://mepopedia.com/~web103-c/hw03/hw03-1025445135

(2) 風格設定(色彩設定部份):先把這個學好 之後才來變換花樣

(3) 有無遇到的問題:可多了 進階版跟之前的差好多 好複雜~~

(4) 製作感想:做完後大概就比較清楚了

(5) 製作作業的時間:我已經不知道了...


1025445135 李品萱

(1) 作業網址 :http://mepopedia.com/~web103-c/hw03/hw03-1025445048

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

(3) 有無遇到的問題:圖片尺寸設定錯誤加上連結出錯

(4) 製作感想:覺得網頁設計很難,看語法會看到花掉,不知道自己在哪ㄍ步驟

(5) 製作作業的時間:花了很多天慢慢做出來的


1025445048 林侑慶

(1) 作業網址─http://mepopedia.com/~web103-c/hw03/hw03-1025445138/

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

(3) 有無遇到的問題─邊看老師的教學影片+做筆記,學習效果較佳。(自己的感覺)

(4) 製作感想─重點是要會分門別類及對於語法的了解,需要多寫兩~三個網站語法熟悉。

(5) 製作作業的時間─四天

視二C 1025445138 梁奕堯(遲交)

(1) 作業網址 http://mepopedia.com/~web103-c/hw03/hw03-1025445192/

(2) 風格設定(色彩設定部份)跟老師一樣

(3) 有無遇到的問題 無

(4) 製作感想 有點麻煩

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


1025445192 黃婷萱

(1) 作業網址 http://mepopedia.com/~web103-c/hw03/hw03-1025445165

 (2) 風格設定(色彩設定部份)以老師做得為主

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

 (4) 製作感想 好複雜

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

1025445165

(1) 作業網址 http://mepopedia.com/~web103-c/hw03/hw03-1025445033

 (2) 風格設定(色彩設定部份)以老師做得為主

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

 (4) 製作感想 有點難

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

1025445033 林子軒