JinJin 的視覺設計專區 - 101-2《中國》竹進視傳二A-網頁設計實務

JinJin 的視覺設計專區 - 101-2《中國》竹進視傳二A-網頁設計實務 http://mepopedia.com/forum/list.php?1326 Wed, 29 Apr 2026 10:26:04 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?1326,94193,94193#msg-94193 愿自己每天都可以保持愉悦的心情和积极的生活心态 http://mepopedia.com/forum/read.php?1326,94193,94193#msg-94193 欢迎来到168开奖网仪式感很重要，忙绿的日子里也要把柴米油盐的生活过的有诗意。给自己做一顿美食，好好享受。愿自己每天都可以保持愉悦的心情和积极的生活心态。白白嫩嫩的小笼汤包饱满，润泽，嗯，看起来就很好吃。瞧，那皮儿是多么的娇嫩呀，娇嫩得欢迎来到168澳洲幸运10就好像胖娃娃肥嘟嘟的小脸蛋儿，轻轻一捏就破碎了。透过外皮儿，你能清清楚楚地看到里面那纯美的汤汁儿。成都妹儿从小喜爱美食，不单单是体现在爱吃，而是吃过了还要学着自己做。你知道吗，动手学习欢迎来到168极速飞艇制作美食的过程也是一种绝佳的享受呢。每当品尝着自己亲手做成功的美味时，心里美滋滋的。]]> andy123 101-2《中國》竹進視傳二A-網頁設計實務 Tue, 08 Aug 2023 10:58:30 +0800 http://mepopedia.com/forum/read.php?1326,94191,94191#msg-94191 小笼汤包不仅看相好，味道也很不错呢 http://mepopedia.com/forum/read.php?1326,94191,94191#msg-94191 欢迎来到168澳洲幸运10不仅看相好，味道也很不错呢。俗话说得好：“轻轻移，慢慢提，先开窗，后喝汤。”不过我饿管不了那么多，望着那么美味的小笼汤包，我的口水欢迎来到168极速飞艇早就“飞流直下三千尺”了，我顾不得什么淑女形象，抓起汤包就往嘴里塞。妈妈熬的鸡汤，白色的，很香，咸味，很好喝。每次妈妈做鸡汤，我都拿个小勺子喝，喝一口，品品味，再咽欢迎来到168开奖网下去，再喝一口，再品品味，再咽下去，再喝一口，再品品味，再咽下去，再喝一口，再品品味，再咽下去。每个城市都有不同的街景，不同的美食，不同的文化习俗，可是没有你，似乎都一样。]]> andy123 101-2《中國》竹進視傳二A-網頁設計實務 Tue, 08 Aug 2023 10:55:22 +0800 http://mepopedia.com/forum/read.php?1326,32234,32308#msg-32308 Re: [期末作業] 網頁設計實務期末作業 http://mepopedia.com/forum/read.php?1326,32234,32308#msg-32308
2.製作主題：貓咪認養

3.內容介紹與設計理念：貓咪認養及醫療相關資訊]]> linexzero2 101-2《中國》竹進視傳二A-網頁設計實務 Thu, 27 Jun 2013 21:14:14 +0800 http://mepopedia.com/forum/read.php?1326,32234,32266#msg-32266 Re: [期末作業] 網頁設計實務期末作業 http://mepopedia.com/forum/read.php?1326,32234,32266#msg-32266
2.製作主題：愛貓協會網頁

3.內容介紹與設計理念：貓咪相關資訊]]> 小貝 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 26 Jun 2013 21:09:50 +0800 http://mepopedia.com/forum/read.php?1326,32234,32263#msg-32263 Re: [期末作業] 網頁設計實務期末作業 http://mepopedia.com/forum/read.php?1326,32234,32263#msg-32263
2.製作主題：萬神殿介紹

3.內容介紹與設計理念：萬神殿的介紹與簡約的風格]]> 1006445037 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 26 Jun 2013 20:41:04 +0800 http://mepopedia.com/forum/read.php?1326,32234,32261#msg-32261 Re: [期末作業] 網頁設計實務期末作業 http://mepopedia.com/forum/read.php?1326,32234,32261#msg-32261 2.製作主題：天文館
3.內容介紹與設計理念：新潮]]> 葉斯勇 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 26 Jun 2013 20:27:48 +0800 http://mepopedia.com/forum/read.php?1326,32234,32260#msg-32260 Re: [期末作業] 網頁設計實務期末作業 http://mepopedia.com/forum/read.php?1326,32234,32260#msg-32260
2.製作主題：復仇者聯盟

3.內容介紹與設計理念：科技感，人物介紹]]> 朱少華 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 26 Jun 2013 20:15:07 +0800 http://mepopedia.com/forum/read.php?1326,32234,32259#msg-32259 Re: [期末作業] 網頁設計實務期末作業 http://mepopedia.com/forum/read.php?1326,32234,32259#msg-32259 2.製作主題：ㄋㄟㄋㄟ補給讚
3.內容介紹與設計理念：休閒.娛樂.觀光.親子教學]]> 陳君雯 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 26 Jun 2013 20:10:07 +0800 http://mepopedia.com/forum/read.php?1326,32234,32258#msg-32258 Re: [期末作業] 網頁設計實務期末作業 http://mepopedia.com/forum/read.php?1326,32234,32258#msg-32258
主題: 天文館
風格:天文星象。]]> 曾代諭 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 26 Jun 2013 20:09:48 +0800 http://mepopedia.com/forum/read.php?1326,32257,32257#msg-32257 網頁設計 http://mepopedia.com/forum/read.php?1326,32257,32257#msg-32257 2.製作主題：ㄋㄟㄋㄟ補給讚
3.內容介紹與設計理念：休閒.娛樂.觀光.親子教學]]> 陳君雯 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 26 Jun 2013 20:06:36 +0800 http://mepopedia.com/forum/read.php?1326,32234,32255#msg-32255 Re: [期末作業] 網頁設計實務期末作業 http://mepopedia.com/forum/read.php?1326,32234,32255#msg-32255
2.製作主題：佳南幼稚園

3.內容介紹與設計理念：小朋友會喜歡的可愛簡單風格]]> 潘布丁 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 26 Jun 2013 19:45:30 +0800 http://mepopedia.com/forum/read.php?1326,32234,32254#msg-32254 Re: [期末作業] 網頁設計實務期末作業 http://mepopedia.com/forum/read.php?1326,32234,32254#msg-32254 2.主題:Holle Kitty
3.風格:極簡風]]> Huang jun shien 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 26 Jun 2013 19:37:20 +0800 http://mepopedia.com/forum/read.php?1326,32234,32253#msg-32253 Re: [期末作業] 網頁設計實務期末作業 http://mepopedia.com/forum/read.php?1326,32234,32253#msg-32253 2.製作主題：歐舍咖啡
3.內容介紹與設計理念：美化、方便性、時尚]]> 林綺欣 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 26 Jun 2013 19:28:14 +0800 http://mepopedia.com/forum/read.php?1326,32234,32251#msg-32251 Re: [期末作業] 網頁設計實務期末作業 http://mepopedia.com/forum/read.php?1326,32234,32251#msg-32251
2.製作主題：電子樂介紹

3.內容介紹與設計理念：白色簡約，配合電子樂的無機質感設計，內容物件利用動態一一帶入，想要有清爽乾淨，科技感]]> 嘉俊 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 26 Jun 2013 19:24:37 +0800 http://mepopedia.com/forum/read.php?1326,32234,32250#msg-32250 Re: [期末作業] 網頁設計實務期末作業 http://mepopedia.com/forum/read.php?1326,32234,32250#msg-32250
2.製作主題：永安國民小學

3.內容介紹與設計理念：校內的活動資訊、教育理念、成就、紀錄，以海洋作為網頁的風格主題]]> 黃正綱 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 26 Jun 2013 19:24:04 +0800 http://mepopedia.com/forum/read.php?1326,32234,32234#msg-32234 [期末作業] 網頁設計實務期末作業 http://mepopedia.com/forum/read.php?1326,32234,32234#msg-32234
final資料夾
檔名為:final-學號

1.至少完成天文館首頁版型
2.套用於自己網頁完成網頁者加分

請回覆於此篇文章

1.網址:http://mepopedia.com/~web101-a/final/final-100xxxxxxx
2.製作主題：
3.內容介紹與設計理念：]]> JinJin 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 26 Jun 2013 00:27:45 +0800 http://mepopedia.com/forum/read.php?1326,31425,31425#msg-31425 [講義] 天文館首頁實作 http://mepopedia.com/forum/read.php?1326,31425,31425#msg-31425

1. 網路天文館網站
2. 首頁基本架構
3. 製作步驟
3.1 [步驟1] 於dreamweaver建立新檔，按上學期的基本步驟，建立基本DIV架構
3.2 [步驟2] 於#header加入網站基本功能文字
3.3 [步驟3] 於#header內加#search
3.4 [步驟4] 於#search內再加入#btn
3.5 [步驟5] 於#search與#btn內，貼上文字
3.6 [步驟6] 於#search內插入搜尋語法
3.7 CSS語法部分

1. 網路天文館網站

http://tamweb.tam.gov.tw/v3/tw/go.asp

參考其作法，建立一入口首頁，以及其他共同版型之內頁

網路天文館首頁

[hr]

2. 首頁基本架構

主要的DIV架構基本上跟上學期所教類似，但：
1.在#header中多加入了#search，#search中又加入了#btn，多了DIV了層次關係，需注意浮動對齊的位置。
2.多了浮動圖層apDiv的作法，增加了排版的彈性，可以自由調整DIV位置，但使用需謹慎，以免版面混亂。

[hr]

3. 製作步驟

1. [步驟1] 於dreamweaver建立新檔，按上學期的基本步驟，建立基本DIV架構

在程式碼視窗中，於body之間插入以下語法

<div id="wrapper"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div>

[hr]

2. [步驟2] 於#header加入網站基本功能文字

│網站地圖 │ 手機版 │天文館官網 │VTAM English│

[hr]

3. [步驟3] 於#header內加#search

<div id="wrapper"> <div id="header">│網站地圖 │ 手機版 │天文館官網 │VTAM English│ <div id="search"></div> </div> <div id="content"></div> <div id="footer"></div> </div>

[hr]

4. [步驟4] 於#search內再加入#btn

<div id="wrapper"> <div id="header">│網站地圖 │ 手機版 │天文館官網 │VTAM English│ <div id="search"> <div id="btn"></div> </div> </div> <div id="content"></div> <div id="footer"></div> </div>
[hr]

5. [步驟5] 於#search與#btn內，貼上文字

<div id="wrapper"> <div id="header">│網站地圖 │ 手機版 │天文館官網 │VTAM English│ <div id="search">搜尋天文館 <div id="btn"> 互動式教材│ 直航鑽石星益智學習│ 展示場主題介紹 </div> </div> </div> <div id="content"></div> <div id="footer"></div> </div> [hr]

6. [步驟6] 於#search內插入搜尋語法

<div id="wrapper"> <div id="header">│網站地圖 │ 手機版 │天文館官網 │VTAM English│ <div id="search">搜尋天文館<input name="" type="text" size="18" />搜尋 <div id="btn"> 互動式教材│ 直航鑽石星益智學習│ 展示場主題介紹 </div> </div> </div> <div id="content"></div> <div id="footer"></div> </div>
[hr]

7. CSS語法部分

@charset "utf-8"; body { background-color: #000; } #wrapper { background-repeat: no-repeat; background-image: url(images/back.jpg); margin: auto; width: 950px; height: 650px; } #header { font-family: Arial, Helvetica, sans-serif, "微軟正黑體"; font-size: 12px; color: #FFF; padding-left: 10px; padding-top: 10px; height:160px; } #search{ width:260px; float: right; } #btn{ width:200px; float:right; padding-right: 20px; } #content{ height:480px; position: relative; } #footer{ } img{ border:0; } #btn .btn-a a { color: #FFF; text-decoration: none; background-color: #8B7932; } #btn .btn-a a:hover { color: #FFF; text-decoration: none; background-color: #B69E41; } #btn p .btn-b a { color: #FFF; text-decoration: none; background-color: #879535; } #btn p .btn-b a:hover { color: #FFF; text-decoration: none; background-color: #B1C254; } .btn-a { font-size: 16px; line-height: 2em; background-color: #8B7932; border: 1px dotted #C6B762; padding: 2px; } .btn-b { font-size: 16px; line-height: 2em; background-color: #879535; border: 1px dotted #C6B762; padding: 2px; } div.swap img { //height: 70px; } div.swap a:hover img{ width: 95%; } #apDiv1 { position:absolute; left:565px; top:-61px; z-index:1; } #apDiv2 { position:absolute; left:620px; top:-6px; z-index:2; } #apDiv3 { position:absolute; left:642px; top:60px; z-index:3; } #apDiv4 { position:absolute; left:645px; top:208px; z-index:4; } #apDiv5 { position:absolute; left:612px; top:269px; z-index:5; } #apDiv6 { position:absolute; left:653px; top:132px; z-index:6; } #apDiv7 { position:absolute; left:540px; top:328px; z-index:7; } #apDiv8 { position:absolute; left:464px; top:382px; z-index:8; } #apDiv9 { position:absolute; left:521px; top:-120px; z-index:9; } #apDiv10 { position:absolute; left:787px; top:406px; z-index:10; font-family: Arial, Helvetica, sans-serif, "微軟正黑體"; font-size: 14px; color: #FFF; padding: 2px; line-height: 2em; } #apDiv11 { position:absolute; left:27px; top:321px; width:433px; height:72px; z-index:11; font-family: Arial, Helvetica, sans-serif, "微軟正黑體"; font-size: 12px; color: #FFF; line-height: 1.5em; } .search { font-family: Arial, Helvetica, sans-serif, "微軟正黑體"; font-size: 13px; color: #FFF; background-color: #685D27; padding: 1px; } .search a { font-size: 13px; color: #FFF; background-color: #6B5E27; padding: 2px; } #header a { font-size: 13px; color: #FFF; padding: 2px; text-decoration: none; } #header a:hover { font-size: 13px; color: #FFF; background-color: #C9B650; padding: 2px; text-decoration: none; }
未完待續...]]> JinJin 101-2《中國》竹進視傳二A-網頁設計實務 Tue, 28 May 2013 23:50:21 +0800 http://mepopedia.com/forum/read.php?1326,31083,31083#msg-31083 [第二次遠距教學] 網路天文館案例解說 http://mepopedia.com/forum/read.php?1326,31083,31083#msg-31083 http://tamweb.tam.gov.tw/v3/tw/go.asp

參考其作法，建立一入口首頁，以及其他共同版型之內頁

網路天文館首頁

網路天文館共同版型內頁

[hr]

影音部分請務必至Moodle系統下載及點閱
教材區中的第二次遠距教學點擊下載

參考此範例，請同學於上課下載練習檔，參照作法，製作出此類版型

並以此類版型出發，製作類似作法之網站]]> JinJin 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 08 May 2013 02:23:00 +0800 http://mepopedia.com/forum/read.php?1326,29810,30788#msg-30788 Re: [作業02] 專業網站資料蒐集與設定 http://mepopedia.com/forum/read.php?1326,29810,30788#msg-30788 2.網址： http://www.hhh.com.tw/
3.現有網站問題：重點不知道在哪、內容過多較讓人不知道該往哪先看起、使用起來不便利
4.網站屬性與主要特色：介紹空間裝潢類與家具類等商品
5.使用族群：社會人士
6.欲改善之風格：簡潔、重點分類清楚
7.網站架構：雙欄網頁
8.參考之優良網站蒐集與分析： http://www.uch-design.com/簡潔有力、有互動性、配色舒適且簡潔
1006445037]]> 1006445037 101-2《中國》竹進視傳二A-網頁設計實務 Tue, 23 Apr 2013 14:33:49 +0800 http://mepopedia.com/forum/read.php?1326,29810,30731#msg-30731 Re: [作業02] 專業網站資料蒐集與設定 http://mepopedia.com/forum/read.php?1326,29810,30731#msg-30731 2.網址：http://www.gohappy.com.tw/
3.現有網站問題：商品太多、字太小、廣告很多
4.網站屬性與主要特色：網購
5.使用族群：大眾
6.欲改善之風格：簡單、重新設計頁面
7.網站架構：雙欄網頁
8.參考之優良網站蒐集與分析：http://mimo-style.com/shopping.php?id=Top
1006445019]]> 張佳惠 101-2《中國》竹進視傳二A-網頁設計實務 Sat, 20 Apr 2013 13:20:31 +0800 http://mepopedia.com/forum/read.php?1326,29810,30609#msg-30609 Re: [作業02] 專業網站資料蒐集與設定 http://mepopedia.com/forum/read.php?1326,29810,30609#msg-30609 2.網址： http://www.fu-joe.com.tw/chuansheng/front/bin/home.phtml
3.現有網站問題：首頁雜亂、沒重點，整體感覺俗氣
4.網站屬性與主要特色：包裝設計
5.使用族群：社會大眾
6.欲改善之風格：簡單化、色彩活潑
7.網站架構：三欄網頁
8.參考之優良網站蒐集與分析：東方包裝 http://www.orientpack.com/aboutus.php 風格簡單方便瀏覽

1006445029]]> kai_ickw 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 17 Apr 2013 19:48:26 +0800 http://mepopedia.com/forum/read.php?1326,29810,30606#msg-30606 Re: [作業02] 專業網站資料蒐集與設定 http://mepopedia.com/forum/read.php?1326,29810,30606#msg-30606 2.網址： http://www.youthwant.com.tw/
3.現有網站問題：廣告太多、字太小、一堆有的沒的太雜亂
4.網站屬性與主要特色：五花八門資訊
5.使用族群：普羅大眾
6.欲改善之風格：簡潔
7.網站架構：
8.參考之優良網站蒐集與分析：http://www.gamme.com.tw/

1006445033]]> linexzero2 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 17 Apr 2013 19:12:52 +0800 http://mepopedia.com/forum/read.php?1326,29810,30601#msg-30601 Re: [作業02] 專業網站資料蒐集與設定 http://mepopedia.com/forum/read.php?1326,29810,30601#msg-30601 2.網址：http://www.yaps.ttct.edu.tw/front/bin/home.phtml
3.現有網站問題：畫面的元素太多，很難找到想看的地方，缺乏設計感
4.網站屬性與主要特色：公佈校園訊息
5.使用族群：家長、學生
6.欲改善之風格：簡化整合，重新設計頁面
7.網站架構：三欄網頁
8.參考之優良網站蒐集與分析：http://ccnt1.cute.edu.tw/hc/
1006445018]]> 黃正綱 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 17 Apr 2013 14:26:13 +0800 http://mepopedia.com/forum/read.php?1326,29810,30594#msg-30594 Re: [作業02] 專業網站資料蒐集與設定 http://mepopedia.com/forum/read.php?1326,29810,30594#msg-30594 2.網址： http://mepopedia.com/~web100-a/final/final-1006445014/
3.現有網站問題：顏色太單調，網頁內容太簡單，視覺元素死板
4.網站屬性與主要特色：介紹電子音樂
5.使用族群：年輕族群
6.欲改善之風格：板面架構再多樣化一些，色彩更鮮活，
7.網站架構：雙欄網頁
8.參考之優良網站蒐集與分析：http://www.djsasha.com/
1006445014]]> 嘉俊 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 17 Apr 2013 11:09:50 +0800 http://mepopedia.com/forum/read.php?1326,29810,30584#msg-30584 Re: [作業02] 專業網站資料蒐集與設定 http://mepopedia.com/forum/read.php?1326,29810,30584#msg-30584 2.網址：http://www.orsir.tw/
3.現有網站問題：看到一推雜七雜八的字，讓人頭昏眼花。進網頁不想再繼續閱讀，也沒有購買慾望，沒有方便性。色調還可再修改更吸引人的注意，照片沒吸引力。
4.網站屬性與主要特色：介紹咖啡的特色與網購
5.使用族群： 20~50歲以上 or 上班族群
6.欲改善之風格：美化、方便性
7.網站架構：雙欄網頁
8.參考之優良網站蒐集與分析：http://www.crownfancy.com/ 可方便閱讀與網購
1006445002]]> 林綺欣 101-2《中國》竹進視傳二A-網頁設計實務 Tue, 16 Apr 2013 23:28:01 +0800 http://mepopedia.com/forum/read.php?1326,29810,30543#msg-30543 Re: [作業02] 專業網站資料蒐集與設定 http://mepopedia.com/forum/read.php?1326,29810,30543#msg-30543 2.網址： http://www.sanrio.com.tw/
3.現有網站問題：首頁太雜，東西太多
4.網站屬性與主要特色：介紹當季最流行的商品
5.使用族群：年輕族群
6.欲改善之風格：簡潔有力，可愛風格
7.網站架構：雙欄網頁
8.參考之優良網站蒐集與分析： http://www.awmcorps.com/afterain/yiweishen/
1006445013]]> Huang jun shien 101-2《中國》竹進視傳二A-網頁設計實務 Mon, 15 Apr 2013 21:39:32 +0800 http://mepopedia.com/forum/read.php?1326,29647,30402#msg-30402 [作業01] 複習DIV與CSS http://mepopedia.com/forum/read.php?1326,29647,30402#msg-30402 用來建立網頁區塊

2.何謂CSS ?
用以美化網頁的語法

3.網址:http://mepopedia.com/~web101-a/hw01/hw01-1006445002/

4.設計概念與心得：
重新複習...之前已上傳了 ><"卻忘了回復論壇

5.學號：1006445002]]> 林綺欣 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 10 Apr 2013 00:24:41 +0800 http://mepopedia.com/forum/read.php?1326,29647,30078#msg-30078 Re: [作業01] 複習DIV與CSS http://mepopedia.com/forum/read.php?1326,29647,30078#msg-30078 學號1006445006]]> 陳君雯 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 20 Mar 2013 21:52:34 +0800 http://mepopedia.com/forum/read.php?1326,29647,30077#msg-30077 Re: [作業01] 複習DIV與CSS http://mepopedia.com/forum/read.php?1326,29647,30077#msg-30077 2.設計概念與心得：
喚醒之前的記憶，希望這次不要再忘記了XD
3.學號：1006445010]]> 潘布丁 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 20 Mar 2013 21:43:14 +0800 http://mepopedia.com/forum/read.php?1326,29647,30054#msg-30054 Re: [作業01] 複習DIV與CSS http://mepopedia.com/forum/read.php?1326,29647,30054#msg-30054 學號：1006445029]]> kai_ickw 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 20 Mar 2013 20:18:29 +0800