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-a/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-a/hw03/hw03-1025445049/

 (2) 風格設定:採用老師的範本練習

 (3) 有無遇到的問題 :遇到很多問題,圖片繞文的部分還有一些底圖方面都有些不了解

 (4) 製作感想 :這次遇到比較多問題

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


1025445049

MEPOERs said:
JinJin: 繼續加油喔!!!
(1) 作業網址 :http://mepopedia.com/~web103-a/hw03/hw03-1025445073/

 (2) 風格設定:自己做

 (3) 有無遇到的問題 :遇到很多問題,圖片不知插哪

 (4) 製作感想 :這次遇到比較多問題,而且有種心力交瘁的無力感

 (5) 製作作業的時間 :4小時左右


1025445073

MEPOERs said:
JinJin: 能舉一反三很棒!按鈕文字可再細緻化~有問題隨時來找我喔!
(1) 作業網址 :http://mepopedia.com/~web103-a/hw03/hw03-1025445133/

(2) 風格設定(色彩設定部份):休閒閱讀風

(3) 有無遇到的問題 : 圖片置入與位置安排一開始有點問題,不過現在解決了。

(4) 製作感想 : 網頁的連結終於變漂亮了,讓人越來越響鼓起幹勁繼續學下去!

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

1025445133 林哲立

MEPOERs said:
JinJin: good!繼續加油!
(1) 作業網址 :http://mepopedia.com/~web103-a/hw03/hw03-1025445091/

 (2) 風格設定:油畫

 (3) 有無遇到的問題 :尺寸設定調很久~

 (4) 製作感想 :製作網頁時要很小心,打錯字就顯是不出來,東西還要放對位置。

 (5) 製作作業的時間 :4小時左右


1025445091



Edited 1 time(s). Last edit at 11/08/2014 10:28AM by 小碧.
(編輯記錄)

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

 (2) 風格設定:老師範本練習

 (3) 有無遇到的問題 :title2 還是沒設定成功

 (4) 製作感想 :跟著教學影片一步步做,還是會有錯的地方,要再加強。

 (5) 製作作業的時間 :4小時左右

作業網址 :http://mepopedia.com/~web103-a/hw03/hw03-1025445067/

風格設定:舒服感

有無遇到的問題 : 圖文繞字的部分,明明在Dreamweaver的畫面是有成功,但在網頁看卻會重疊到,why!!!!!

製作感想 : 作出來後,真的會有成就感~

製作作業的時間:3小時

1025445067

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

 (2) 風格設定:課堂練習

 (3) 有無遇到的問題 :#content 的 padding: 30px;跑不出來,是看了很久才發現

前面我是這樣打的 content 後多接個div。

 (4) 製作感想 : 覺得自己漸漸的可以做出完整的網頁了,相當的開心!!!

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


1025445040



Edited 4 time(s). Last edit at 11/09/2014 01:05PM by MoMi.
(編輯記錄)


http://mepopedia.com/~web103-a/hw03/hw03-1025445001/

風格設定:使用老師範例,但背景與內部呼應使用灰色帶出理性的感覺。

有無遇到的問題:
再用footer的時候,明明會做但是不知道是哪裡語法錯誤結果搞了很久,
結果是文字換行打錯(躺)
然後要改body背景顏色,想說為什麼改不了...結果是我打成bady...(眼神死)

製作感想:
很好玩但是會被語法搞瘋(笑)
想說再做一個新的但是我還不知道我該做什麼風格...

製作作業的時間: 5小時(躺




Edited 1 time(s). Last edit at 11/09/2014 01:31PM by royu.
(編輯記錄)

http://mepopedia.com/~web103-a/hw03/hw03-1025445178

風格: 老師的範例

遇到的困難 : 有.框架一直跑掉XD忘記圖片繞文那邊怎麼做.
後來看完老師的上課影片還有問室友!!終於跑出來了!!

還有tittle bar會忘記怎麼插入!!XD 但是都會了!!

完成時間: 5小時(想了兩天有先做個大概可是圖片塞不進去只好重做wwww

製作感想: 當下很想打自己的腦袋....怎麼做出來都跟老師不一樣(XD)
不過操作好多天終於有感覺了!!有比較熟練了,語法那些要整理好不然一直跑掉!!看了很煩躁= =

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

 (2) 風格設定:採用老師的範本練習

 (3) 有無遇到的問題 :圖片繞文的部分還不了解

 (4) 製作感想 :慢慢比較了解語法的邏輯了

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


1025445043

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

(2) 風格設定:課堂範例檔

(3) 有無遇到的問題:偶爾會打錯符號,然後樣式就顯示出不來了

(4) 製作感想:老師交的東西越來越多,而自己做出來的網頁也越來越完整,感覺很棒!

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

1025445070



Edited 1 time(s). Last edit at 11/09/2014 06:20PM by 1025445070.
(編輯記錄)

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

(2) 風格設定:課堂練習

(3) 有無遇到的問題 : 圖片位置安排一開始有問題

(4) 製作感想 : 上課講的速度對我來說有點快,不過可以看講義一個步驟做

(5) 製作作業的時間:不詳

1025445202林彥希

作業網址:http://mepopedia.com/~web103-a/hw03/hw03-1025445151

(2) 風格設定:無

(3) 有無遇到的問題 :

遇到超多問題
整個做反,重做
圖片大小弄錯...等等

(4) 製作感想 :好累
(5) 製作作業的時間 :6小



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

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

(2) 風格設定:偏簡約

(3) 有無遇到的問題 : 不小心把CSS檔案刪掉...

(4) 製作感想 : 很累很好玩

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

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

(2) 風格設定:老師的範本

(3) 有無遇到的問題 :超級多問題,編碼一錯都要找很久才改的回來

(4) 製作感想 :等級跟之前的網頁比起來跳的有點多啊!弄起來超級麻煩的

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


1025445139 呂鍰慈

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

(2) 風格設定:無

(3) 有無遇到的問題: 繞圖排文那部分用蠻久的。

(4) 製作感想:語法字母好多有點頭昏眼花,不過有慢慢上手了。

(5) 製作作業的時間:三小時半左右。

學號:1025445082

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

 (2) 風格設定(色彩設定部份)(加分) 照老師的範例

 (3) 有無遇到的問題 按老師的步驟來但是做出來卻不一樣

 (4) 製作感想 我不做網頁啦JOJO!

 (5) 製作作業的時間 兩三個小時吧

1025445223

http://mepopedia.com/~web103-a/hw03/hw03-1025445160/
有無遇到的問題: 大部分都是照著老師教的做,沒什麼問題
製作感想:網頁製作學到越來越多變化,很有成就感
製作作業的時間:2小時

1025445160 吳羽筑

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

 (2) 風格設定(色彩設定部份)(加分) 依照老師給的製作

 (3) 有無遇到的問題 文法好多好複雜做到最後有點亂

 (4) 製作感想 學到更多

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

MEPOERs said:
1025445124: 用錯帳號傳作業 這是1025445124的
(1) 作業網址 :http://mepopedia.com/~web103-a/hw03/hw03-1025445181/

(2) 風格設定: 課堂練習

(3) 有無遇到的問題 : 不熟練

(4) 製作感想 : 蠻困難的,需要看老師給的講義

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

1025445181 徐鄀凡

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

(2) 風格設定:課堂練習

(3) 有無遇到的問題 : 有點複雜

(4) 製作感想 : 做完有比較有成就感!

(5) 製作作業的時間:忘了

1025445187

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

(2) 風格設定:依照遊戲版本的配色

(3) 有無遇到的問題 :對後面的語法有點陌生..出了問題,還有只要語法一亂掉就回不去了...,網頁會出現色塊
跑掉的現象

(4) 製作感想 :很好玩啊 終於做出來了QQ 可是好複雜

(5) 製作作業的時間 :忘了 挺久的樣子

1025445064



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

作業網址:http://mepopedia.com/~web103-a/hw03/hw03-1025445100
風格設定:採用老師的範本練習
有無遇到的問題:插入Div標籤那裡講義沒有很清楚,重試了很多次
製作感想:這次的難度感覺比之前都難很多,也花費了很多時間去一再嚐試才完成,所以有了很多收穫.
製作作業的時間:2~3小時

1025445100 葉芳羽



Edited 1 time(s). Last edit at 11/15/2014 01:04PM by 葉芳羽.
(編輯記錄)

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

(2) 風格設定:用老師的範本

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

(4) 製作感想:老師講解的很詳細~但這次的複雜度比較高,花費比較多精神力去做

(5) 製作作業的時間:4小時左右

1005445193/徐芯儀

http://mepopedia.com/~web103-a/hw03/hw03-1025445136/
風格設定:老師範本

有無遇到的問題:
有了範本還算ok
接下來的東西才是重點
小學的夢魘浮現眼前
架構人人都能學會
有料用料成敗關鍵
想著想著腦炸天

製作感想:
近期中‧處其中
苦在其中
樂在其中
苦在考試作業中
樂在成績pass中
不到最終
一切盡在不言中


製作作業的時間: 共約2小時
1025445136 劉志彥

作業網址: file:///C:/Users/woodsean/Desktop/hw03-1025445130/index.html

有無遇到的問題: 遇到很多不會的 覺得很挫折

製作感想: 好難好難好難好難

製作作業的時間: 5小時

1025445130楊淯婷

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

 (2) 風格設定(色彩設定部份):可愛風,一種小清新的感覺~

 (3) 有無遇到的問題:遇到非常多問題,一下圖片消失,一下圖片跳位子,
在做#title_bar 第一行標題字的方框用很久一直用不好,很多設定也一直搞錯。

 (4) 製作感想:網頁設計真的好難好難,摸索很久,觀看錄影檔,參考網路上
的說明,也請教了同學,最後終於做出一點像樣的網頁來了= = 好累~~~

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


1025445046

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

 (2) 風格設定:採用老師的範本練習

 (3) 有無遇到的問題 :很多問題,邊做邊看講義,尋求是有協助

 (4) 製作感想 :有點難

 (5) 製作作業的時間 :2個半小時左右

(1) 作業網址 :http://mepopedia.com/~web103-a/hw03/hw03-1025445169/
(2) 風格設定:老師的範本練習
(3) 有無遇到的問題 :一直弄不好,但最終還是解決。
(4) 製作感想 :跟著教學影片做,做到後面,自己越做越亂。
(5) 製作作業的時間 :4小時左右

1025445169/視傳2A/古佳綺

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

(2) 風格設定:老師的範例

(3) 有無遇到的問題 :有 超多問題 而且卻找不到問題在哪

(4) 製作感想 :這次遇到比較多問題 而且一直挫折

(5) 製作作業的時間 :6小時左右 而且因為一直出錯找不到原因 重做好幾次

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

(2) 風格設定:採用老師的範本練習

(3) 有無遇到的問題 :邊做邊看講義,還是一直找不到問題所在

(4) 製作感想 :很困難

(5) 製作作業的時間 :應該說一直重做

1005445196 張靜怡

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

 (2) 風格設定:用老師範本

 (3) 有無遇到的問題 :圖片繞文的部分還是不太會

 (4) 製作感想 : 好難有點暈了

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

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

 (2) 風格設定:使用老師給的範本練習

 (3) 有無遇到的問題 :圖片繞文的部分

 (4) 製作感想 :很多問題

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

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

(2) 風格設定:插畫風

(3) 有無遇到的問題 :內容文章編輯 一堆語法...

(4) 製作感想 :要改好多東西 怕忘記步驟

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



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

file:///C:/Users/User/Desktop/hw03-1025445031/index.html

好難好難

1025445031 江冠霖

(1)l網址:http://mepopedia.com/~web103-a/hw03/hw03-1025445085
(2)依照老師給的製作

(3) 有無遇到的問題:一直被文法搞混,看了好幾次教學影片

(4) 製作感想:學到不少

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

1025445085 楊婷淵

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

(2) 風格設定:採用老師的範本練習

(3) 有無遇到的問題 :在要開始做時一定要把資料跟圖片用在一個檔案裏面,圖文繞字,語法太多很複雜。

(4) 製作感想 :這次的作業比上兩次還要來的難一些些,不過只要知道他們的英文名字,就會清楚地找到方向。

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


1025445199

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

 (2) 風格設定:自己做

 (3) 有無遇到的問題:圖片很多數字也多會搞混

 (4) 製作感想:因為這次是有加圖片近來,有加圖片的話,程式碼就會更多要找東西的話會很難找

有些還是要請同學教才知道在哪裡這樣。

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

1025445106



Edited 1 time(s). Last edit at 11/12/2014 09:28PM by j840516.
(編輯記錄)

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

 (2) 風格設定(色彩設定部份)(加分) 按照老師範本

 (3) 有無遇到的問題 背景跟聯結有錯 一直修改

 (4) 製作感想 連結比較複雜還不太會

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


1025445076 葉珈妤

http://mepopedia.com/~web103-a/hw03/hw03-1005445195/


  風格設定:採用老師的範本練習

  有無遇到的問題 :文繞圖比較困難一點

  製作感想 :蠻有趣的

  製作作業的時間 :2小時


1005445195 黃沛容

http://mepopedia.com/~web103-a/hw03/hw03-1025445175/

 (2) 風格設定:採用老師的範本練習

 (3) 有無遇到的問題 :有,邊做邊看講義

 (4) 製作感想 :覺得超難

 (5) 製作作業的時間 :4個半小時左右

視傳二a1025445175 張怡萱

**上次已經交過作業 忘記回復文章了><

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

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

(3) 有無遇到的問題 看到眼睛花花

(4) 製作感想 格子在設定之後都會莫名地跑不見,所以一直重複做才完成

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

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

 (2) 風格設定(色彩設定部份)(加分)
使用粉色系列感覺溫馨可愛

 (3) 有無遇到的問題
圖片部分我一直弄都沒辦法至中,很煩惱

 (4) 製作感想
做完覺得超有成就感的!!但很難很累

 (5) 製作作業的時間
製作一頁的時間大概是4個小時

1025443064



Edited 1 time(s). Last edit at 11/19/2014 01:23AM by 1025443064.
(編輯記錄)

作業網址 :http://mepopedia.com/~web103-a/hw03/hw03-1025445190/

風格設定:普通

有無遇到的問題 : 排版很麻煩
製作感想 : 真的很麻煩

製作作業的時間:1.5小時

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

 (2) 風格設定:自己做

 (3) 有無遇到的問題 :遇到很多問題,格式問題,字形大小顏色獨一修改問題

 (4) 製作感想 :這次遇到比較多問題,要一直重復去編碼裡找程式碼修改!做這網頁非常的有挑戰性

 (5) 製作作業的時間 :4小時左右

1025461015

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

(2) 風格設定:採用老師的範本練習

(3) 有無遇到的問題 :遇到很多問題,像是圖片擺放的語法很複雜等等...

(4) 製作感想 :跟以前一樣覺得語法麻煩複雜

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


1025445097陳慶芳



Edited 3 time(s). Last edit at 11/21/2014 11:14AM by 1025445097.
(編輯記錄)

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

 (2) 風格設定:亂想

 (3) 有無遇到的問題 :太多問題了,每一個都是,我很笨

 (4) 製作感想 :我我我我我,快瘋了!!!!!!!!! 但還是要繼續網頁

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

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

(2) 風格設定:普通風格

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

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

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

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

 (2) 風格設定:採用老師的範本練習

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

 (4) 製作感想 :這次遇到比較多問題

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


1025445163 曾國鼎