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) 使用photoshop製作頂圖及導覽列按鈕。
 (3) 利用圖片設計加上CSS色彩搭配,營造網頁整體風格(加分)


2. 二、繳交作業方式



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

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

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

資料夾內含:
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/

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

補充下載參考檔案
文字檔 : http://mepopedia.com/~cg104-1a/hw03/hw03-ex/hw03.txt
練習圖檔:http://mepopedia.com/~cg104-1a/hw03/hw03-ex/back.psd

(1) 作業網址
http://mepopedia.com/~cg104-1a/hw03/hw03-1045440046
(2) 風格設定(色彩設定部份)(加分)
用藍色想表現愛麗絲清新脫俗、脫離現實的感覺。
(3) 有無遇到的問題
目前沒有。
(4) 製作感想
有成就感,覺得神奇。
(5) 製作作業的時間
不想讀書的時候。

(1) 作業網址:

http://mepopedia.com/~cg104-1a/hw03/hw03-1045440010

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

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

(3) 有無遇到的問題:

沒有,目前都還算順利。

(4) 製作感想:

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

(5) 製作作業的時間:

週四放學回家後就全部做完,大概花了2小時多左右。

(1) 作業網址:

http://mepopedia.com/~cg104-1a/hw03/hw03-1045440020

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

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

(3) 有無遇到的問題:

還可以。

(4) 製作感想:

覺得其實一點也都不難。

(5) 製作作業的時間:

回家時間。

(1) 作業網址:

http://mepopedia.com/~cg104-1a/hw03/hw03-1045440013

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

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

(3) 有無遇到的問題:

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

(4) 製作感想:

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

(5) 製作作業的時間:

因為在學校做的網頁回家打開有問題又重設了不少東西,時間隔得有點久也有點忘記,所以花了一些時間。



Edited 1 time(s). Last edit at 04/12/2016 05:51PM by 1045440013.
(編輯記錄)

 (1) 作業網址
http://mepopedia.com/~cg104-1a/hw03/hw03-1045440014
 (2) 風格設定
以淡粉紅色為主
 (3) 有無遇到的問題
感覺越來越複雜了,可沒有太大的問題
 (4) 製作感想
學到新的東西了
 (5) 製作作業的時間
自己回家有時間就做。

 (1) 作業網址:http://mepopedia.com/~cg104-1a/hw03/hw03-1045440051

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

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

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

 (5) 製作作業的時間:分兩天做,每天至少3 - 4小時



Edited 1 time(s). Last edit at 04/16/2016 11:31PM by custard3928.
(編輯記錄)

http://mepopedia.com/~cg104-1a/hw03/hw03-1045440011/

(2) 風格設定
以灰色色為主
 (3) 有無遇到的問題
雖然有越來越難,但做得比一開始順手了
 (4) 製作感想
做了自己喜歡的明星很開心
 (5) 製作作業的時間
課餘時間

 (1) 作業網址
http://mepopedia.com/~cg104-1a/hw03/hw03-1045440044
 (2) 風格設定
都白白的
 (3) 有無遇到的問題
到這裡都沒問題
 (4) 製作感想
後面還有大魔王
 (5) 製作作業的時間
10分鐘

(1) 作業網址
http://mepopedia.com/~cg104-1a/hw03/hw03-1045440029/indx.html
 (2) 風格設定
米白色 襯托攝影師的照片
 (3) 有無遇到的問題
按照老師的講義做 沒甚麼問題 但頂端一直有空白很困擾
 (4) 製作感想
很期待全部做完的成果
 (5) 製作作業的時間
2天的時間 相當的漫長



Edited 3 time(s). Last edit at 04/20/2016 10:15PM by 1045440029-yu.
(編輯記錄)

(1) 作業網址 :
http://mepopedia.com/~cg104-1a/hw03/hw03-1025435233
(2) 風格設定 : 以亮粉色為主
(3) 有無遇到的問題 : 沒有
(4) 製作感想 :原本覺得很難,但做出第一頁後覺得很有成就感
(5) 製作作業的時間 : 晚上有空時

(1) 作業網址
http://mepopedia.com/~cg104-1a/hw03/hw03-1045440045

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

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

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

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

影視1A 1045440045 蘇美蓉

 (1) 作業網址 http://mepopedia.com/~cg104-1a/hw03/hw03-1045440019

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

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

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

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

作業網址 : http://mepopedia.com/~cg104-1a/hw03/hw03-1045440024

網站主題:只想擁抱你

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

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

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

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

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

(6)製作作業的時間:8小時



Edited 2 time(s). Last edit at 05/19/2016 07:20PM by 翕洗喜翕西.
(編輯記錄)

 (1)作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-1045440014

(1)網站主題: 少女時代

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

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

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

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

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

(6)製作作業的時間:2個禮拜

(1) 作業網址 http://mepopedia.com/~cg104-1a/hw03/hw03-1045440009

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

 (3) 有無遇到的問題 無

 (4) 製作感想 很累

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

 (1) 作業網址 http://mepopedia.com/~cg104-1a/hw03/hw03-1045440002

 (2) 風格設定 :黑白簡約風

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

 (4) 製作感想:難爆惹

 (5) 製作作業的時間:大約2天吧呵呵呵

(1) 作業網址: http://mepopedia.com/~cg104-1a/hw03/hw03-1045440021

 (2) 風格設定(色彩設定部份)(加分):走極簡的風格

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

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

 (5) 製作作業的時間 :一天,封面的部分蠻難做的

(1) 作業網址
http://mepopedia.com/~cg104-1a/hw03/hw03-1045440024
(2) 風格設定
淡淡得無色彩灰色白色黑色體現這個故事單傳的白亮與沉痛的黑
(3) 有無遇到的問題
一直都有,不過慢慢爬文就解決了
(4) 製作感想
這東西真不簡單
(5) 製作作業的時間
4個小時左右

作業網址:http://mepopedia.com/~cg104-1a/hw03/hw03-1045440003/

1搞笑
2.還好
3.有點困難在設定風格的時候'
4.兩天

http://mepopedia.com/~cg104-1a/final/final-1045440012/

 (2) 風格設定:鮮豔繽紛

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

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

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

(1) 作業網址
http://mepopedia.com/~cg104-1a/hw03/hw03-1045440028
(2) 風格設定 MARVEL
(3) 有無遇到的問題
目前沒有
(4) 製作感想
有成就感,覺得神奇。
(5) 製作作業的時間
7

(1) 作業網址
http://mepopedia.com/~cg104-1a/hw03/hw03-1045440033
(2) 風格設定(色彩設定部份)(加分)
我也不知
(3) 有無遇到的問題
目前沒有。
(4) 製作感想
沒有
(5) 製作作業的時間
下課時間

(1) 作業網址
http://mepopedia.com/~cg104-1a/hw03/hw03-1045440032/
(2) 風格設定(色彩設定部份)(加分)
黑黑酷酷的
(3) 有無遇到的問題
忘記目錄要怎模更換了
(4) 製作感想
還不錯
(5) 製作作業的時間
幾個小時

(1) 作業網址
http://mepopedia.com/~cg104-1a/hw03/hw03-1045440006
(2) 風格設定(色彩設定部份)(加分) :簡約風格
(3) 有無遇到的問題 :目前沒有。
(4) 製作感想 :有成就感,覺得神奇。
(5) 製作作業的時間 :不想讀書的時候。