逢 甲 大 學

自動控制工程學系專題製作

專 題 論 文

自動化倉儲網頁製作

The Homepages Design for the Automated

nobody stores in a storehouse

指導教授：吳穎強

學 生：王智鴻

中 華 民 國 九 十 四 年 十 二 月 二 十 日

感謝

首先感謝教授吳穎強老師的指導,對於網頁的基礎架構.通訊.以及運用方式,

還有對於教授的專業領域無人化自動倉儲的運用,教授都提供了寶貴的意見,以及

許許多多的專業知識,來幫助我完成這一個網站的架設.

也藉由這個機會讓我能夠更加的深入了解網站許許多多的基本元件,以及整合

的方式,還有往許許多多可以幫助架設網站的程式.

在過程中也有許許多多熱心的同學提供相關的資訊以及程式運用來幫助自己

完成這一個網站的設計與使用,在過程中也學習到許許多多不是經由課堂上可以了

解的知識.

ii

中文摘要

網路的普遍化,造成了生活跟知識上的一種改革,許許多多的資料透過網路俯

拾即是,網路網頁的架構也成了普及化的技能與知識.所以嘗試建立一個與自己所

學科系的網站來分享一些有關於無人化自動倉儲的運用.

透過網頁製作加以介紹無人自動倉儲系統製作,對於無人化倉儲的基本介紹,

以及網頁製作的部分加以討論.而網頁製作最主要元件,如圖片.動畫.藝術文字.相

關報導.知識.以及連結的運用.參訪者留言.透過元件的蒐集,以及程式的應用,來

製作成一個基本的網站,來用吸引別人的目光,這樣才是一個成功的網站.

網站在製作過程中可以運的的東西比起基本的紙本教科書所用來傳達知識的

方式多出很多,而透過這些方式所表達出來的東西,也能夠更加的吸引住其他的人

目光,以及引起別人的共鳴,透過建立的過程中也能讓自己對於網站的設立與運作

有基礎的了解.

iii

AbstraAbstraAbstraAbstratttt The network generalization, has created the life with the knowledge in one kind of

reform, Many material penetration network very common. the network homepage

construction has also become the universalization skill and the knowledge. Therefore the

attempt establishes one to share some with own discipline department's website to have

melts the automatic warehousing about nobody the utilization.

The penetration homepage manufacture introduced nobody automatic warehousing

system manufacture, melts the warehousing regarding nobody the basic introduction, as

well as the homepage manufacture part discusses. But homepage manufacture most key

element, like picture. Animation. Artistic writing. Correlation report. Knowledge. As

well as linked utilization. Senate visitor message. Penetrates the part the collection, as

well as the formula application, manufactures a basic website, uses to attract others

vision, like this is a successful website.

Website may transport in the manufacture process the thing compares basic paper

this textbook to use for to transmit the knowledge the way to be many very many, but

penetrates the thing which these ways express, also can 夠 the even more attraction

other person vision, as well as causes others sympathetic chord, in the penetration

establishment process also can let oneself have the foundation understanding regarding

website establishment with the operation.

iv

目錄

感謝﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒ii

中文摘要﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒iii

英文摘要﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒iv

目錄﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒v

圖目錄﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒vii

表目錄﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒viii

第 1 章 前言﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒01

1.1 前言﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒01

1.2 研究目的﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒01 第 2 章 網頁概述﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒02

2.1 網頁的架構﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒02

2.2 網頁的元件﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒02

2.3 網頁的應用程式﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒03

第 3 章 網頁主要內容概述﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒05

3.1 倉儲概述﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒05

3.2 自動化倉儲的過程﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒05

3.3 自動化倉儲的系統﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒05

第 4 章 網頁製作流程﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒06

4.1主題架構﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒06

v

4.2取得工具﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒06

4.3編寫網頁﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒07

4.4上傳網頁﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒12 第 5 章 成果展示﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒15

5.1 首頁 index﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒15

第 6 章 結果與討論﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒16

參考文獻﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒17

vi

圖目錄

圖4-1Dreamweaver MX 2004啟用畫面﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒06

圖4-2啟用新的的網站﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒07

圖4-3為新的網站命名﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒07

圖4-4設定網站及其存放位址 ﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒07

圖4-5新增網頁﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒08

圖4-6圖片匯入﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒08 圖4-7選擇頁面屬性﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒09 圖4-8原始碼的編列﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒09

圖4-9建立新網頁﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒10 圖4-10網頁架設﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒11

圖4-11網頁試跑﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒11 圖 4-12 上傳軟體﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒12 圖 4-13 上傳主機連接﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒12 圖 4-14 主機登入﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒13 圖 4-15 登入畫面﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒13 圖4-16選定上傳檔案﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒14 圖4-17檔案上傳﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒14

圖4-18上傳完畢﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒14

圖5-1程式資料夾﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒15

圖5-2首頁﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒15

vii

表目錄

表格4-1﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒﹒10

vii

第 1 章 緒論 1.1 緒論

台灣網路的發展生態，由剛開始純學術性的與國際學術網路（Bitnet）連

線，到台灣學術網路（TANet）的建立，再到與美國國際網路的連線

(Internet)，以至相關網路的建立發展－SEEDNet、HiNet，到目前可以看到商

業力也逐漸滲透到網路系統當中；而以網際網路傳輸的用途來看，從軍事上傳

送訊息的構想到學術界、科學家的報告與見解透過網路互相交換研究發現，後

來，新聞上了網路，然後，人與人之間的耳語也上了網路。

而網路經過這幾年來蓬勃的發展幾乎可以與生活上所有的東西都有相關聯

，像是利用電腦連接上網路，閱讀資訊的進步生活化，透過電子化數據所進行的

遠距教學或是製作成電子書，已成為各界研究發展的重點，電腦網路應用在學習

上也成了另一種的途徑，透過了遠距離教學的應用也使的終身學習的目標邁向前

的一大步以現在知識爆炸的時代來說網路幾乎可以代表了許許多多可以應用的

知識與傳承。

1.2 研究目的

根據統計青少年人越來越多人花在網路上的時間成正比的成長由此可見網

路對於現代人的生活已經密不可分，網路的應用幾乎是現代人必備的基本能力

而透過學習網站的架設了解到網頁的應用方式以及許許多多程式的應用，。

1

第 2 章 網頁概述 2.1 網頁的架構

1. 首頁: 透過首頁的說明來清楚的引導參訪者簡潔並快速的瀏覽整的網站的內

容。

2. 連結：利用相關的連結加快並正確的引導瀏覽整個網頁的資料，並且可以獲取

相關性質的資料內容。

3. 資料庫：何謂資料庫，簡單說，就是儲存資料而功能強大，可管理、紀錄相關

資訊。

2.2 網站的元件

網路上的東西在這幾年的蓬勃發展下為了在廣大的網路世界中吸引到別人目光，總

是有許許多多推陳出新的應用方式，這樣才能將眾人的焦點吸引過來，其中包括

的下列的元件

1.HTML: HTML就是超文件標示語言（HyperText Markup Language）。主要是在瀏

覽器中顯示一份文件的內容。它本身並非程式設計，只不過是標示(Mark-

up)，用來強調及組織一般性的文字。

2.項目清單: 當我們所要傳達的訊息是一條一條的說明時，這種就是所謂的清單

資料。在短時間內傳送大量資訊最好的方法就是使用多層次的清單。清單讓

你的文件看來更有層次、更有組織，使用者也可以很容易地找到他們所需要

的資訊。

3.圖片: 雖然圖片的主要功能是用來裝飾網頁，但少了圖片的網頁就如同少了裝

潢的店面，即使貨品齊全，也很難吸引人潮。在網頁上，如果你要加上圖

片，有兩種圖片的格式是為大部份的瀏覽器所接受的；GIF 和 JREG。

4.動畫:之前網路上暴紅的動畫中幹譑龍其中就是以動畫的內容來成功的吸引大眾

的目光。

5音樂:在許多的網頁中也提供的不少的背景音樂提供參訪者一邊導覽網頁一邊欣

賞著音樂。

6.資料庫:但是目前因為電腦技術進步,因此早己經有很多資料庫管理軟體被開發

出來完成上述所說的工作,例如微軟的ACCESS資料庫軟體(管理功能不是很

強),SQL資料庫管理軟體;甲骨文公司出的ORACLE;另外還有免費的MYSQL(必須

掛在LINUX作業系統),所以資料庫管理己經變成對資料庫的結構了解程度和應

用這些軟體,以及會寫資料庫讀取程式的能力。

2

7.外掛程式:許多程式的運用原先的瀏覽器並不足以開啟或運用這時候就要透過該

檔案的外掛程式來作動這樣原本的程式效果才會顯現出來。

2.3 網頁的應用程式

1.首頁工具

隨著電腦的發展電腦程式介面也是一日千里的改變網頁的製作方式也是日新

月異下面我們隨著發展概述了幾種網頁的設計方式

(1)HTML(1)HTML(1)HTML(1)HTML: HTML 就是超文件標示語言（HyperText Markup Language）。主要是在

瀏覽器中顯示一份文件的內容。它本身並非程式設計，只不過是標示(Mark-

up)，用來強調及組織一般性的文字。HTML 是由一些標記（tags）所構成，每個

標記對瀏覽器下一個特定的指令，這些指令會告訴瀏覽器如何顯示文件的內容。

編輯 HTML 不需要多麼高級的軟體配備，你只要有『記事本』這項軟體就可以

了。但記得，HTML 文件的副檔名有些奇怪，你必須設定為 .htm 或是 .html 才

行。例如： index.htm 是一個合法的 HTML 檔名，但 index.txt 就不是了。你

可能聽過一些 HTML 的編輯程式如：HotDog、CutrHTML....等。對初學者而言，

使用這些工具並不太好。雖然它們的設計目的是幫助你更容易使用 HTML 來工

作。但不幸的是，其中有許多會將 HTML 的代碼隱覽起來，造成學習上的困難。

那麼，編輯好的 HTML 檔要怎麼看呢?你要有瀏覽器。利用瀏覽器中的『開啟檔

案』的功能就可以看到你所編輯的 HTML 檔了。

(2)FrontPage(2)FrontPage(2)FrontPage(2)FrontPage: 操作介面如同使用 WORD 一般,提供“主題”(Theme)，也能夠讓

多網頁套用到某些“主題”的樣式，但是 FrontPage 的這項功能彈性比較差。套

用的樣式主要都有固定的模式對於個人化的網站不太合適使用

(3)Dreamweaver 8 (3)Dreamweaver 8 (3)Dreamweaver 8 (3)Dreamweaver 8 :提供的 XML 和 XSLT 支援功能類似於 Dreamweaver 1 提供

的 查看它, 以便將適當的欄位拖放至網頁上。您可從這裏進入程式碼檢視, 以

使用支援 XML 和 XSLT 的增強程式碼提示功能。而且還可運用全新的 XML 和

XSLT 參考內容。全新的統一 CSS 面板讓複雜的 CSS 變得簡單。將 CSS 套用至

內容後, 您就可以透過合併檢視和以視覺化方式呈現階層, 來進一步掌握 CSS,

還可快速存取內容及強大的性能。此外, 您也能精確知道要在何處做修改、選擇

3

和執行 － 而不需在諸多文字檔案中搜尋。針對使用 CSS 進行內容定位方面,

全新的 CSS 版面配置視覺化可提供設計時期的視覺化協助, 讓您快速輕鬆地檢

視頁面結構。樣式產生工具列則可預覽頁面套用不同 CSS 媒體類型的效果。

2影像工具

(1)Ulead PhotoImpact:(1)Ulead PhotoImpact:(1)Ulead PhotoImpact:(1)Ulead PhotoImpact:影像製圖常用到的軟體，更是極盡強悍、簡易之能。

(2)ACDSee 32 Browser(2)ACDSee 32 Browser(2)ACDSee 32 Browser(2)ACDSee 32 Browser：超級快的圖片瀏覽軟體，使用方便、快速，並可設定自

動圖片播放。

(3)Paint Shop Pro(3)Paint Shop Pro(3)Paint Shop Pro(3)Paint Shop Pro：很棒的影像編輯軟體，可以做出許多的效果。

(4)FLASHFLASHFLASHFLASH: FLASH動畫只是FLASH用途的其中一項！它並不代表就是所謂FLASH！

其實...FLASH的用途很廣！可以用來作網站！可以用來作BANNER可以用來作遊

戲！可以用來作動畫！可以用來作多媒體！

4

第三章網頁主要內容概述

3.1 倉儲的概述

倉儲作業大致上包括以下基本作業,在大部分的倉庫中都可以看到:

1.進貨:進貨必須先接收各項進入倉庫的物料.並確認物料的品質與數量均正確,最

後將各物料分 派至作業地點或倉庫內儲存。

2.預先包裝:一般在供應商進貨時,物品通常是大量進貨.或與其他品項包裝在一起,

進入倉庫後要先拆解成商品單位的小包裝或與其他零件組合成盒包,以便後續處

理。

3.入庫:係指將各品像依照一定的規則放置到倉庫之內,包括了物料搬運.儲位確定

以及產品的放置。

4.儲存:物品在被揀取前處於儲存的狀態,儲存的方法會因品項的大小.數量或特殊

要求而不同。

5.揀貨:將品項由上述的儲存位置移動出來,以滿足某一項訂單的需求,這是倉儲的

基本功能,也是大部分倉儲功能設計所需要滿足的目的。

6.包裝及訂價:包裝與定價可以在揀貨後加以進行,在揀貨後進行可使現存的庫存

更具有彈性。

7.分類及集中:當一張訂單所需品項超過一項.或是在揀貨時無法進行集中,就必須

將批次揀取的貨品依照訂單區分開來,在將各種不同的品項集中到同一張訂單中。

8.單位包裝及出貨:此階段的工作包括確定訂單內品項.以適當的容器包裝.出貨。

3.2 自動化倉儲的過程

電腦在倉儲運作中的正確角色應該是協助倉儲管理者進行管理,並且協助倉儲作業

人員進行相關的作業.對管理者而言應該要具備:

1.性進行倉儲作業的剖析,協助管理者找出及預測到可能產生問題的區域,以及各

作業層次及作業型態的主要變化。

2.監控倉庫的生產力.出貨及存貨準確度,倉儲訂單週期時間,以及儲存密度等績效

指標。

3.儲作業人員與設備之間作業的溝通與最佳化,藉此持續簡化倉儲作業。

3.3自動化倉儲的系統

1.庫存進出:針對採購.外包.工程管理出入庫等事件加以記錄已便掌握。

2.庫存地點管理:為求保存地點效率化,入出庫作業迅速化,作項目的保管地點管

理。

3.盤存處理:入出庫處理的錯誤,使項目資料.庫存地點資料儲存的庫存資料與倉庫

裡的實有庫存量發生誤差,為修正此誤差,需作盤存。

5

第 4 章 網頁製作流程

4.1主題架構

透過指導教授的研究資料以及相關的工作經驗還有網路上面蒐集到的資訊加

以整合,透過程式的運用以及整理來呈現成一個完整的自動化無人倉儲介紹網站的

設置.

4.2取得工具 在這次的網頁設計中所使用到的主要程式是Dreamweaver而選用Dreamweaver有

下列的優點寫互動式網頁如ASP及PHP功能優於frontpage 對大量網頁原始碼替換功

能功能優於frontpage 可以刪除WORD所寫的網頁中多餘無用之原始碼

圖4-1Dreamweaver MX 2004啟用畫面

6

4.3編寫網頁

使用Dreamwave製作網頁,一定要先定義一個網站 其流程如下。

圖4-2啟用新的的網站

圖4-3為新的網站命名

圖4-4設定網站及其存放位址

7

定義網站後,我們開始來製作網站,首先我們來新增一張網頁或是圖片到資

料夾,其方法如下:

圖4-5新增網頁

Dreamwaver有一個特性,就是如果你的圖形不是在定義資料夾內的話,他會

自動複製一張並較你重新命名,如下:

圖4-6圖片匯入

8

網頁標題和網頁背景的製作

圖4-7選擇頁面屬性

圖4-8原始碼的編列

9

網頁規劃

表格4-1

透過程式建立一個新的網頁

圖4-9建立新網頁

10

首 頁

倉

儲

概

述

管

理

系

統

介

紹

倉

儲

種

類

留

言

版

寫

信

給

我

自

動

化

過

程

自動倉儲危害評估

好

站

連

結

網頁的逐步架構以及相關連結美化

圖4-10網頁架設

網頁的大致架設完畢

圖4-11網頁試跑

11

4.4上傳網頁 FTP是一種網路上的檔案傳輸服務，我們常常在下載軟體，用到的就是FTP的檔

案傳輸服務。所謂上傳呢！其實就是FTP的其中一個功能，我們既然能夠將檔案從

網路上抓下來，那麼當然也可以把檔案從自己的電腦，送到網路上去啊！因此，簡

而言之，上傳就是把你電腦中的資料，藉由軟體傳輸到網路的伺服器上。

而這次網頁上傳所使用的軟體是CUTEFTP 1. 請先進行安裝...。然後，按兩下開啟 Cute FTP。進入以後，您會看到這個對

話框：

圖 4-12 上傳軟體

2. 按下「ADD」將我們要放置網頁的主機輸入進去。

圖 4-13 上傳主機連接

12

3. 按下「Connect」連線到我們要放置網頁的主機輸去。

圖 4-14 主機登入

4. 連通後出現的主機訊息。

圖 4-15 登入畫面

13

5. 左邊視窗是自己的硬碟視窗，請自行切換到擺網頁的目錄。右邊視窗是伺服器

（也就是網頁空間）的視窗，是我們要上傳的目的地。選定上傳檔案後，按上傳

圖示，就可以上傳了。

圖 4-16 選定上傳檔案

6. 若是伺服器上已經有相同的檔名存在，您可以自行判斷是否要覆蓋

（Overwrite）過去，還是要改名（Rename）上傳或取消（Skip）上傳。

圖 4-17 檔案上傳

7. 若是訊息框已經不再動作，並且看到類似下列的訊息，表示已經傳檔完畢

圖4-18上傳完

14

5 章 成果展示

5.1 首頁 index

點選資料夾中的首頁index即可開啟首頁

圖5-1程式資料夾

圖5-2首頁

15

第 6 章 結果與討論

網路的蓬勃發展中，其中網際網路的改變也變的更快速更便捷，回想起剛接

觸電腦時後還在用數據機撥接的年代，一直到現在的光纖網路網路的世界一直在

進步，相對於網站的設立也是更加的多元化，資料庫的連結相片的上傳短片的上

傳以及線上視訊的傳撥，零零種種都顯示著網路不斷的進化。

在製作網站的過程中，接觸到許許多多應用的程式，不過這些程式也是經過

前人的經驗，經過了許多人的巧思讓我們在架設網站時候，運用起來更為便利更

為簡單，讓許多不會程式語言的玩家，也可以經由程式的輔助設計出來一個很完

整的網站來，而透過製作的過程也了解到一些網站基礎的運作使用的元件管理以

及程式的運用。

而在Dreamweaver的使用上，因為在介面上Dreamweaver的設計非常的簡

單化，能夠讓使用者在視窗介面以及HTML文字的介面上，作編輯的動作，所以作

設計網站時候對於有時候會出現小小的錯誤或，需要修改的小地方往往能夠很便

捷的修改到，而透過原始碼方式呈現時也能幫助自己培養閱讀程式碼的一些小基

礎。

16

參考文獻

[1]李孟蓁，Dreamweaver MX 2004 中文版範例教本v，

[2]風采設計宛，動態網頁特效神乎奇技

[3] 陳惠安，創意網站經典

[4] dreamweaver教學台南科技大學，

http://elearning.stut.edu.tw/media/dreamweaver/

17