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

JinJin 的視覺設計專區 - 101-2《中國》竹進視傳二A-網頁設計實務 http://mepopedia.com/forum/list.php?1326 Wed, 29 Apr 2026 10:22:21 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?1326,94193,94193#msg-94193 愿自己每天都可以保持愉悦的心情和积极的生活心态 (no replies) 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 小笼汤包不仅看相好，味道也很不错呢 (no replies) 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,32257,32257#msg-32257 網頁設計 (no replies) 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,32234#msg-32234 [期末作業] 網頁設計實務期末作業 (12 replies) 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-網頁設計實務 Tue, 30 Jul 2013 00:34:45 +0800 http://mepopedia.com/forum/read.php?1326,31425,31425#msg-31425 [講義] 天文館首頁實作 (no replies) 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 [第二次遠距教學] 網路天文館案例解說 (no replies) 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,29810#msg-29810 [作業02] 專業網站資料蒐集與設定 (8 replies) http://mepopedia.com/forum/read.php?1326,29810,29810#msg-29810 使其重新建立
1.官網(需含入口首頁與共同版型之內頁)
2.手機版網頁
以建立符合其專業性的全新網站

請參考
http://tamweb.tam.gov.tw/v3/tw/go.asp

[hr]

請盡量以政府機關或大專院校網站等為主

並設定：
1.網站名稱：
2.網址：
3.現有網站問題：
(美感、使用便利性、風格設定、跨瀏覽器，請詳列)
4.網站屬性與主要特色：
5.使用族群：
6.欲改善之風格：
7.網站架構：
8.參考之優良網站蒐集與分析：
(列出優良網站名稱及網址，並提出設計優良與可參考的方向)

請註明學號

並在3/27前回覆]]> JinJin 101-2《中國》竹進視傳二A-網頁設計實務 Tue, 23 Apr 2013 14:33:49 +0800 http://mepopedia.com/forum/read.php?1326,29648,29648#msg-29648 [講義] 手機版網頁的認識 (no replies) http://mepopedia.com/forum/read.php?1326,29648,29648#msg-29648 在進入之前，請大家先了解何謂手機版網頁，與一般網頁的差異為何?如何以現有知識與技術進入手機版網頁的設計？

首先詳讀

手機版網頁設計（CSS/Javascript）百科
http://mepopedia.com/?page=983

並自行蒐集手機版網頁的相關資料
了解何謂jQuery

何謂CSS3
http://www.css3maker.com/
http://css3generator.com/
http://www.w3schools.com/css3/default.asp

以作為本學期進入手機版課程的基礎]]> JinJin 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 27 Feb 2013 10:13:08 +0800 http://mepopedia.com/forum/read.php?1326,29647,29647#msg-29647 [作業01] 複習DIV與CSS (13 replies) http://mepopedia.com/forum/read.php?1326,29647,29647#msg-29647
請參照以下講義
http://mepopedia.com/forum/976

回答以下問題
並做出基本版型

1.何謂DIV ?
2.何謂CSS ?

3.請參考以下網址，並牢記下圖盒子模型／區塊模型（Box Model）

[img]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/img]

4.參照講義
http://mepopedia.com/forum/read.php?804,16481

製作以DIV架構搭配CSS的基本網頁

製作完畢請上傳FTP
下載：http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

1.網址:http://mepopedia.com/~web101-a/hw01/hw01-100xxxxxxx
2.設計概念與心得：
3.學號：]]> JinJin 101-2《中國》竹進視傳二A-網頁設計實務 Wed, 10 Apr 2013 00:24:41 +0800