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

Advanced

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

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



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



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

2.下載附件

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

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

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

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

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

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


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



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

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

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

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

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


2. 上傳至FTP

3.回覆本篇文章

 (1) 作業網址

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

 (3) 有無遇到的問題

 (4) 製作感想

 (5) 製作作業的時間

4.請務必在下次上課前回覆,否則為遲交



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

===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================
本週補充講義:
[color=#330066]1.網站設計解析
2.實做第一個網頁
3.利用 CSS 與 Div 標籤建立網頁版型[/color]

[color=#006600]以上PDF講義請至學生系統下載
http://192.192.78.86/student_portal/[/color]
===========================================



Edited 28 time(s). Last edit at 10/22/2011 06:32PM by JinJin.
(編輯記錄)

Attachments:
開啟 | 下載 - hw03-100.rar (105.4 KB)
1).作業網址 : http://mepopedia.com/~web100a/hw03/hw03-1001445052

(2).有無遇到的問題 : 無

(3)製作感想 : 經過這幾週的練習加上邊看講義已經沒有什麼太大的問題!!!

(4)製作作業的時間 : 課堂時間

MEPOERs said:
JinJin: 圖片的路徑有誤,如#header背景要改為images/header.jpg,以此類推
(1) 作業網址
http://mepopedia.com/~web100a/hw03/hw03-1001445041
 (2) 風格設定(色彩設定部份)
以教學範例為準 只有主標題用橘色(#333)文字
 (3) 有無遇到的問題
沒有
 (4) 製作感想
學習做按鈕很好玩
 (5) 製作作業的時間
一小時班至兩小時左右

1.作業網址: http://mepopedia.com/~web100a/hw03/hw03-1001445086

2.有無遇到的問題: 有~發現坐到一半全部做錯 重來一遍QAQ

3.製作感想: 用Dreamweaver感覺比較簡單 thumbs up

4.製作作業的時間: 課堂時間和回家2小時

1).作業網址 : http://mepopedia.com/~web100a/hw03/hw03-1001445015/

(2).有無遇到的問題 : 無

(3)製作感想 : 因為家裡的mac是英文版所以可說是困難重重,我還是在桌電pc安裝軟體好了,不然看老師講義都要研究好久,講義很清楚,是我自己的問題,我會想辦法解決。cool smiley

(4)製作作業的時間 : 回家後製作了兩個小時。

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

 (2) 風格設定(包括圖片設計與色彩設定部份) :依原圖製作

 (3) 有無遇到的問題 :不會放置圖片,放置後不知道如何調整。

 (4) 製作感想 :製作網頁沒有想像的那麼難...很開心。期待期中作業的玩工。

 (5) 製作作業的時間:學校製作+在家練習3~4小時,也一邊試做期中作業。(所以應該不止4小時。



Edited 1 time(s). Last edit at 10/21/2011 10:02PM by stu88153.
(編輯記錄)

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

 (2) 風格設定(包括圖片設計與色彩設定部份) :依原本的製作

 (3) 有無遇到的問題 :看著講義坐問題不大,只是比較慢要理解一下,最後放置圖片不知道如何調整。

 (4) 製作感想 :覺得一步一步慢慢來還行,但是沒有講一自己可能做不太出來。

 (5) 製作作業的時間:學校製作加在家2~3小時,在學校做的回家又做了好多次,研究了一下才做出來。

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

 (2) 風格設定(色彩設定部份)(加分) 按原製製作

 (3) 有無遇到的問題 細節要多注意之外無問題

 (4) 製作感想 現在比較想要知道怎麼放圖

 (5) 製作作業的時間 課堂+回家20分鐘左右

1.作業網址:http://mepopedia.com/~web100a/hw03/hw03-1001445013
2.風格設定:依原圖製作
3. 有無遇到的問題:無
4.製作感想:語法變複雜需要花一段的時間製作
5.製作作業的時間:課堂+回家練習3~4小時

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

(2) 風格設定:依原圖製作

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

(4) 製作感想:語法比較容易搞混。想知道連結怎麼用。

(5) 製作作業的時間:課堂+回家練習40分鐘

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

(2) 風格設定(色彩設定部份)(加分): 依照原圖製作

(3) 有無遇到的問題: 圖片右邊文字的部分處理很久還是沒辦法像原圖一樣完美,講義那篇文章好像也沒有那部分的教學confused smiley

(4) 製作感想: 可能是不太熟,需要花一些時間思考語法和步驟,如果沒看講義可能就做不太出來了hot smiley

(5) 製作作業的時間 : 上課做一遍,回家重新再做一遍(2小時)

回覆本篇文章

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

 (2) 風格設定(色彩設定部份)就老師給的圖片囉~

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

 (4) 製作感想 加圖片進去感覺很不一樣XD

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

MEPOERs said:
JinJin: 傳上去的檔案是還沒做完的嗎?
 (1) 作業網址 http://mepopedia.com/~web100a/hw03/hw03-9911445068/

 (2) 風格設定(色彩設定部份)照講義上提共的圖

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

 (4) 製作感想 加圖片當背景感覺不太一樣 還有多了滑鼠移過去圖會變 越來越有專業網站的感覺了

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

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

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

 (3) 有無遇到的問題 :回家做跟再學校版本不同有時無法理解講義上的東西

 (4) 製作感想 :雖然搞不太懂 但終於用完了

 (5) 製作作業的時間 :學校二小時 再家一小時半

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

 (2) 有無遇到的問題 無

 (3) 製作感想 越來越有成就感~哈哈!!老師的講義做得很詳細~而且還有同學可以問=D

 (4) 製作作業的時間 10/24

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

(2) 風格設定 依照老師範例

(3) 有無遇到的問題 製作完用網頁開啟有些文字變成亂碼

(4) 製作感想 製作時還是要一步一步看講義的語法 希望以後會再熟練些

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

MEPOERs said:
HP: 同學:請在<head>後加上 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ,這樣應該就不會有亂碼了。
 (1) http://mepopedia.com/~web100a/hw03/hw03-1001445088

 (2) 風格設定(色彩設定部份)照原圖製作

 (3) 有無遇到的問題 當時CONTECT有少做方框間距
但看到下面的大圖並對照,就很快找到錯誤

 (4) 製作感想 老師的講義真的很詳盡喔!Dreamweaver真的比較簡單~^O^~

 (5) 製作作業的時間 回家和課堂的時間約2小時

老師我後來有貼上去那段語法可是還是一樣耶
英文字和數字沒問題不會出現亂碼
但是中文就會出現亂碼

後來我用IE瀏覽器中文字就都正常了
但是用IE我的標題有個小背景圖就不見了



Edited 1 time(s). Last edit at 10/29/2011 05:05PM by enjoyad920.
(編輯記錄)

1).作業網址 : http://mepopedia.com/~web100a/hw03/hw03-1001445011

(2).有無遇到的問題 : 有!看不懂講義內容,因為是接著課堂上的做的檔案再做,存回家的檔案跟講義裡的差很多的樣子,所以不會做@@

(3)製作感想 : 好難喔我都看不懂 = =""也不會@@
(4)製作作業的時間 :研究講義就花很多時間不過還是毫無頭緒@@

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

(2) 風格設定(色彩設定部份)(加分): 照原圖完成

(3) 有無遇到的問題: 為什麼還沒上傳時自己無法看到按鈕變換成英文??

(4) 製作感想: 照著老師的步驟製作不會很難,但要自己獨立完成一個網頁有些困難

(5) 製作作業的時間 : 上課時加在家製作半小時



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

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

 (2) 風格設定(包括圖片設計與色彩設定部份) :以裕隆球隊為主軸,整體為球隊識別色藍色為主調.
 (3) 有無遇到的問題 :第一個步驟忘記先存檔,害我從做了一次,所以又多練習一次摟!

 (4) 製作感想 :製作網頁沒有想像的那麼難。

 (5) 製作作業的時間:在家製作時間約兩個多小時。smiling bouncing smiley

1.http://mepopedia.com/~web100a/hw03/hw03-1001445080/
2.風格設定: 依原圖製作
3. 有無遇到的問題: 還好啦 ~~
4.製作感想: 密密麻麻的步驟,感覺以後會很難熟練它 sad smiley
5.製作作業的時間: 課堂+回家練習1~2小時

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

(2) 風格設定(色彩設定部份):按下載原件圖

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

(4) 製作感想:網頁變得更加的豐富及美化 感覺越來越專業

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

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

(2) 風格設定(色彩設定部份): 照講義完成

(3) 有無遇到的問題: 按鈕轉換 連結頁面 上傳試了好幾次才看到檔案

(4) 製作感想: 目前可能是因為有老師上課一步步的講解加上講義 所以不懂時還可以照著做 感覺要自己完成的網頁會比較困難

(5) 製作作業的時間: 課堂加在家40分鐘

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

(2) 風格設定(色彩設定部份)用老師給的圖片做

(3) 有無遇到的問題 回家之後軟體出了點問題 開不了 所以沒有辦法繼續完成作業 所以就先上傳了在課堂紹做的部分!

(4) 製作感想 基本上不會很難 但是就是要慢慢來 不然會很混亂!

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


ps.10/26軟體搞定了 所以有在重新上傳一次了!

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

 (2) 風格設定(色彩設定部份)(加分) 按照老師的內容

 (3) 有無遇到的問題 有,範例裡有圖片可是教學沒有圖片..上網查了插入圖片的語法但文字無法環繞只能出現在下方很懊惱所以還是取消放圖片了

 (4) 製作感想 這次也是一步一步做 只是內容稍多 有點困難做得有點久

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

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

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

(3) 有無遇到的問題:遇到問題我只知道從頭來

(4) 製作感想:等我想到在告訴你

(5) 製作作業的時間:上課作完回家無任何修改

1.作業網址: http://mepopedia.com/~web100a/hw03/hw03-1001445050

2.有無遇到的問題: 有些地方會跑掉 就是..位置不一樣@@

3.製作感想: 還不錯辣

4.製作作業的時間: 課堂時間+回家 大概快2小

(1) 作業網址
http://mepopedia.com/~web100a/hw03/hw03-1001445122
(2) 風格設定(色彩設定部份)(加分)
原本風格
(3) 有無遇到的問題
大致上都沒有 照著講義做就OK了
(4) 製作感想
上手後比較不會再有手滑按錯然後心驚膽跳的困擾
(5) 製作作業的時間
2hr

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

 (2) 風格設定(色彩設定部份):依原圖製作

 (3) 有無遇到的問題:文繞圖,字跟圖的中間不會用空隙,放置圖片,放置後不知道如何調整。

 (4) 製作感想:步驟清楚後比較快上手,老師可以講完一部份就先讓我們先做嗎,一次講一大堆前面的都忘記後又要重頭
       講解有點浪費時間。

 (5) 製作作業的時間: 1-1小時半

1).作業網址 : http://mepopedia.com/~web100a/hw03/hw03-1001445128

(2).有無遇到的問題 : 沒有太大問題,操作還有些生疏

(3)製作感想 : 講義真是好幫手!

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

1.作業網址: http://mepopedia.com/~web100a/hw03/hw03-1001445132

2.有無遇到的問題: 有,回家之後感覺跟論壇交的不太一樣有錯誤就從頭來過

3.製作感想: Dreamweaver比較方便

4.製作作業的時間: 課堂時間和回家2小時

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

 (2) 風格設定(包括圖片設計與色彩設定部份) :依原圖製作

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

 (4) 製作感想 :用DW做感覺很酷 又學了一個軟體了

 (5) 製作作業的時間:學校製作和在家練習差不多兩個小時吧

MEPOERs said:
JinJin: 內容有問題,請再重傳喔!
1).作業網址 : http://mepopedia.com/~web100a/hw03/hw03-1001445027/

(2).有無遇到的問題 : 無

(3)製作感想 : 無

(4)製作作業的時間 : 在家

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

 (2) 風格設定(包括圖片設計與色彩設定部份) :依原本製作

 (3) 有無遇到的問題 :在學校看講義一步一步照做,上課也一直問老師您,但不知道為什麼編碼的部分一直有出錯的地方,我完全看不懂哪裡有問題@@回家後把內文貼在網頁裡時,試很多次還是全都變亂碼...我的dreamweaver還是一樣一直跟我要序號= =總之作業做得亂七八糟的,但我還是交了...

 (4) 製作感想 :感覺快被軟體和文字還有編碼的問題搞得頭昏腦脹的

 (5) 製作作業的時間:學校製作加在家1~2小時,但還是做得很差sad smiley

MEPOERs said:
JinJin: 按鈕圖片的路徑有誤,應為images/34-01-1.jpg 以此類推,不懂的話課堂再詢問,加油!
Hello,

你遇到的問題主要是 HTML 前段的語法都少了!我貼給你相關的語法,請仔細比較一下少了那些哦!

主要的差異在作業一與作業二都有提到哦!可以再回去看看。

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> </head>

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

 (2) 風格設定(色彩設定部份) 照老師做

 (3) 有無遇到的問題 看著講義做 沒什麼問題

 (4) 製作感想 還好

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

4.請務必在下次上課前回覆,否則為遲交

1).作業網址 : http://mepopedia.com/~web100a/hw03/hw03-1001445090

(2).有無遇到的問題 : 無

(3)製作感想 : 沒有什麼太大的問題

(4)製作作業的時間 : 課堂時間

MEPOERs said:
JinJin: 檔案有問題,請再重新上傳!
(1).作業網址 : http://mepopedia.com/~web100a/hw03/hw03-1001445102/

(2).有無遇到的問題 : 些許小問題 , 但無大礙 .

(3)製作感想 : 對於自己建立的網頁版型頗具成就感 .

(4)製作作業的時間 : 約50分鐘 .

1).作業網址 : http://mepopedia.com/~web100a/hw03/hw03-1001445019

(2).有無遇到的問題 : 無

(3)製作感想 : 沒有什麼太大的問題,只是上課做得跟講義寫得有點不一樣,有點難做

(4)製作作業的時間 : 約1小時

http://mepopedia.com/~web100a/hw03/hw03-1001445126
風格設定-藍色外框
問題-第五格往下掉
感想-可以慢一點點 這樣進度會剛好
課堂完當天晚上

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

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


作業網址:http://mepopedia.com/~web100a/hw03/hw03-1001445003存放在

有無遇到的問題 :無

製作感想 :無

製作作業的時間 :2小時

(因家中無法登入論壇,所以只能在上課時回覆此文章)

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

(2)風格設定:範例風格

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

(4)製作感想: 沒有講義可能就不行了...

(5)製作作業的時間: 15分鐘

MEPOERs said:
JinJin: 你應該是Bˇ的喔?這裡是A班喔
(1) 作業網址 http://mepopedia.com/~web100a/hw03/hw03-1001445060/

 (2) 風格設定 照圖製作

 (3) 有無遇到的問題 我覺得FileZilla好怪

 (4) 製作感想 加入圖片讓網站不會太空

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



Edited 1 time(s). Last edit at 11/01/2011 08:42PM by ryomabl333.
(編輯記錄)

MEPOERs said:
JinJin: 網址有誤?
ryomabl333: 老師不好意思 我重連了!!!
 (1) 作業網址 http://mepopedia.com/~web100a/hw03/hw03-1001445066/
 
(2) 風格設定(色彩設定部份)(加分) 使用原案

 (3) 有無遇到的問題 css開始的指令開始變多了,有些混亂

 (4) 製作感想 看到完整個網頁出爐,覺得一切值得!

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

作業網址 : http://mepopedia.com/~web100a/hw03/hw03-1001445033

(2).有無遇到的問題 : 無

(3)製作感想 : 很難..
(4)製作作業的時間 : 課堂時間

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

 (2) 風格設定(色彩設定部份):用老師給的圖片

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

 (4) 製作感想:還在慢慢了解中

 (5) 製作作業的時間:家裡,約半小時