介紹我做的戀戀莒光網站給您參考─智邦公益電子報─台灣最大公益電子報發行中心

第二階段【網頁製作系列報導】電子報【超棒網站蓷薦】

GiGiGaGa發報台將於11月22日，終止未回娘家補登資料之收報服務請GiGiGaGa發報台會員緊速，重新訂閱或另選發報臺本報參加IDV新人王比賽，請大家幫忙投票，還可以拿大獎哦。

超棒網站蓷薦

第二篇
介紹我做的戀戀莒光網站給您參考

壹、推薦理由：
01.一個值得您學習網頁及到國內旅遊的好網站，這是我最近完成屬於介紹國內地方特色的網站。
02.本站大量使用CSS、Layer、JavaScript、Java等程式，很多地方值得網友參考。
03.另外，我想用這個實例來告訴您，不管您是自己做或接受別人委託，都可以參考我是如何從開始規劃到完成的。
04.如果您想學Homepage但又沒時間自己做一個網站，我除了可以幫您在短期內完成外，並針對該站指導您如何維護。

有此需要者，請線上報名

或跟我聯絡

。

貳、網站介紹：
01.從網站的名稱中，您應該就可以感受到這個地方的美麗與值得珍藏。
02.在這裡，您除了可以免費瀏覽馬祖莒光風光外，另外還可學到許多網頁製作要領或秀圖技巧。
03.計劃或想到馬祖一遊得讀者，這更是您蒐集或參考資料的最佳網站。
04.很抱歉到目前為止，本站還有少部份資料或圖片，因委託者還沒提供，所以請多包涵，惟不影響使用。

參、網站規劃與整體架構：
01.規劃製作一個網站，絕不可想到那裡做到那裡，做到那裡又改到那裡！
02.不能沒有現成資料及電子檔(如：文章、圖片、影音等)，否則光輸入文字或製作圖檔，就把您累死了。
03.主題及架構一定要非常明確，才能安排妥當及做的順利。
04.決定主要選單(Main Menu)模式，本室學員教材，將選單分為(文字等)十餘種類型(詳註

)。
05.選擇視窗模式很重要，您應依選項多寡及題材內容，決定採用何種視窗開啟模式。
06.如果您的選單想採用圖像Icon，建議在規劃階段先以文字型選單替代，等確定後再製作成Icon。

肆、如何準備及管理進度：
01.廢棄紙張及電腦內的記事本是我最好的準備及管理工具。
02.隨時想到甚麼就用筆紙將構想(Ideal)寫下來，需要用到網頁的部份，就改用記事本記下來。
03.我通常會利用檔案總管，先開一個與該站站名稱有關的目錄(如：jukuang)，來存放網站所有資料。
04.接下來會在此目錄下再建一個子目錄(data)，這是放所有與製作有關的檔案或文件。
05.基本上，我會在data目錄內建立一個data.txt 或目錄(guest)，這是放委託人相關基本資料的重要檔案。
06.除此，我還會建立menu.txt及report.txt兩個記事本，用來管理我工作狀況。
07.menu.txt，是網站選單中、英文檔名的草擬檔；report.txt，是我的工作進度紀錄檔(提供給委託人參考及回應用)。
08.通常我會再設申請資料檔(apply.txt) & 常用套用檔(use.txt) & 代客登錄檔(addurl.txt) & 委託人要求更新檔(update.txt)。
09.完整的各式檔案製作資料庫(如CSS、Layer、JavaScript、Java等常用套用程式)，是您不可或缺的重要協助工具。
10.如果要套用資料很多，use.txt 可改為次目錄(use)來存放。

伍、製作過程說明：
開始接案

彼此交換意見

檢視客戶提供資料

網站流程規劃

呈現初稿

報價與簽約

付訂(30%)

交換意見與研討

申請網址與空間

首頁、視窗版面、選單模式確定

隨時進度提報與問題協調

補充委託資料

隨時線上檢視作品與修改

進度過半，不得變更視窗、選單模式

進度達80%付清尾款

最後檢視與修改內容

如期完成

代客登錄網站

製成光碟片交付客戶

網站維護與更新

網址或空間期滿通知客戶是否續約

長期保持聯絡，建立友好關係。

陸、網頁製作技巧：
01.利用分割視窗技巧，讓網址固定不動。

參考網頁：首頁(index.htm)
<FRAMESET ROWS="100%,0" BORDER=0>
<FRAME SRC="welcome.htm" NAME="welcome">
</FRAMESET>
02.為考慮傳輸問題，盡可能控制圖檔大小，本站首頁燈塔圖就是分成三張圖哦。

參考網頁：首頁(index.htm)
(略)
03.本站使用許多IE專用語法，所以在首頁加了 Browser 判斷程式，強破非 IE Browser 者不得進入。

參考網頁：首頁
<script language=JavaScript>
function agentcheck()
{
if( navigator.appName == "Netscape")
{
self.location.href = "nc.htm";
}
}
</script>
註：原則上我們設計網站，要盡可能符合兩大瀏覽器都能觀看為佳。
04.返回首頁、設為首頁、加入最愛，幾近是現在網站必必選項，您可不能錯過哦。

參考網頁：首頁(index.htm)
(略)
05.較複雜或龐大網站，我們都會加一個網站導攬頁，讓訪客更易瞭解您的內容。

參考網頁：網站地圖(map.htm)
您只要使用小圖示及表格，就可以完成這個工作。
06.使用圖檔表格或簡單表格模組，來美化畫面與增進作業時效。

參考網頁：最新消息(news.htm)
(略)
註：(本報教學會員資料內，蒐集近50個現成圖檔表格模組)

。
07.選單採用onmouseout & onmouseover時，為了讓圖片顯示順利，預載圖片功能不可省略。

參考網頁：服務選民
<script language="JavaScript1.2" src="menus2.js"></script>
<body onload="MM_preloadImages('icon/s11.gif','icon/s22.gif','icon/s33.gif','icon/s44.gif','icon/s55.gif','icon/s66.gif')">
08.為達到不一樣網頁效果，可以考量增加一段飛行文字特效。

參考網頁：您的建言(comm.htm)
(略)
09.使用IFRAME使文章閱讀更容易。

參考網頁：歷年提案(case.htm)
<IFRAME SRC="text/case.htm" NAME="float" WIDTH="720" HEIGHT="250" scrolling="yes">
</IFRAME>
10.本站寄信採傳統的mailto:，我運用一些假動做與JavaScript技巧，值得您細心觀摩！

參考網頁：加入鏈結(join.htm)
(略)

柒、網頁秀圖技巧：
01.首頁燈塔之閃爍燈光，就是運用Layer來定位的。

參考網頁：首頁(index.htm)
(略)
02.內頁多個頁面均使用到CSS Style 立體字特效，值得您多加利用。

參考網頁：主要選單(home.htm)
<DIV style="color: red; filter: Shadow(color=0a0a0a, Direction=135); font: 18pt/36pt; letter-soacing: 4px; text-align: center; width: 400px">
<SPAN style="font: 25pt 新細明體"><B>‧歡迎使用‧</B></SPAN>
</DIV>
03.使用onmouseout & onmouseover來預視內容秀出訊相關息文字。

參考網頁：發現美食(food.htm)
<on .... Mouseover = "show(0)" onMouseout = "hide()" ...>
04.運用彈出視窗及自動關閉功能，來自動定位秀(關)圖。

參考網頁：東莒風情(home.htm)
<script>
window.open('tower1.htm','t1','width=122,height=227,resizable=no,scrollbars=no,top=290,left=670');
</script>
<SCRIPT language=JavaScript>