網頁設計

網站基本觀念與介紹
網站基本觀念與介紹
教材說明
輕鬆玩HTML5 + CSS3 + JavaScript 網頁 JavaScript 網頁程式設計超入門
程式設計

● 作者： 榮欽科技, 陳婉凌 ● 作者： 狩野祐東 / 陳禹豪

● 出版社：博碩 ● 出版社： 旗標
● 出版日期：2015/04/30 ● 出版日：2016/04/28
● ISBN：9789864340071 ● ISBN：9789863123453

博客來網路書店 博客來網路書店
https://www.books.com.tw/product https://www.books.com.tw/product
s/0010672675 s/0010714211
開發工具介紹
Visual Studio Chrome Brackets

下載：https://goo.gl/z9xFXR 下載：http://brackets.io/
基本名詞 - 網路通訊協定
不同廠牌的電腦要互通檔案或資訊，除了需要靠通信網路之外，尚必需使用共
通的語言，始能彼此互通並相互運作。所謂共通的語言即是大家共同約定的協
定 (Protocol)， 簡言之，即是用以規範特定的資料傳輸格式、 序列及偵錯的一
組標準化規則。例如:

● TCP/IP：[ 網際網路 / 互聯網 / Internet ] 的通訊協定

● HTTP：網頁傳輸通訊檔案傳輸協定
● FTP：檔案傳輸協定
● SMTP：郵件傳輸協定
基本名詞- IP
● IP位址(Internet Protocol Address)

● 代表一台電腦或主機的位址，就相當於電腦或主機在網路中的門牌號碼

● IPv4 (Internet Protocol version 4)

○ IP位址是由4組數字，共32個位元所組成。通常會將這 32 個位元分成四組 8 個位元，
其間以"."區隔
○ 例如：192.168.0.1

● IPv6 (Internet Protocol version 6)

○ 為了解決IPv4位址枯竭問題而設計
○ 採用 128 位元的位址
○ 例如：2001:0DB8:02de:0000:0000:0000:0000:0e13
查看自己電腦的IP位址(1/3)
方法1：在Windows 作業系統的「命令提示字元」中使用「ipconfig/all」指令，
便可查看自己電腦所使用的IP 位址。
查看自己電腦的IP位址(2/3)
方法二：

1. 點選「開始→控制台」
2. 雙擊「網路共用中心」圖示
3. 再雙擊其中的「變更介面卡設定」即可看到目前使用的區域連線
4. 雙擊任何其中一標籤，查看｢詳細資料｣即可看到IP 位址
查看自己電腦的 IP 位址(3/3)
查看自己電腦對外的 IP 位址

https://myip.com.tw/
基本名詞-網域名稱(Domain name)
● 一般使用者在網際網路上所看到的網址
● 舉例：www.tcu.edu.tw
● 常見頂級網域名稱類型：
DNS - 網域名稱查找 IP
查詢Domain Name和IP的指令
● 利用nslookup, 例如：
○ nslookup www.tcu.edu.tw
○ nslookup www.yahoo.com.tw
○ nslookup www.google.com.tw
● 利用網站
○ http://www.whois365.com/tw
○ http://whois.twnic.net/
Ping - 查詢與某台機器連線暢通否
如何登記 Domain Name
● 台灣地區是由TWNIC(台灣網路資訊中心)主管網域名稱註冊申請業務
● 取得網域名稱之審查標準係採先登記先享用原則(first-come , firstserve)
● 確認無人登記後則須繳納註冊費用與使用年費，註冊手續才算完成
● 目前網路上出現很多經營代辦網域名稱申請
受理註冊機構
基本名詞 - 網站的位址 URL
● http://www.tipo.gov.tw/ch/index.htm 表示
○ http 表示要看網頁
○ 到 www.tipo.gov.tw 這台機器上
○ 基地資料夾中的 ch 資料夾
○ 當中的 index.htm 檔案
通訊埠
若將電腦比做郵局, 連接埠就像窗口, 負責各種
HTTP port 80
不同的業務。一部電腦只有一個IP 位址, 但有
許多連接埠, 以區分各使用 TCP/IP 的程式。 HTTPS port 443

當電腦收到IP封包時, 便根據其連接埠編號, 判
MySQL port 3306
斷交由哪個應用程式來處理。 PC
SMTP port 25
連接埠編號的原則連接埠編號有16個位元，所
以從 0 至65535。 SQL Server port 1433

0-1023 port (Well known port) RDP port 3389

網際網路服務 - HTTP / HTTPS
● HTTP ( HyperText Transfer Protocol)
○ 超文件傳輸通訊協定
● 網頁：使用HTTP通訊協定來傳輸
● 網址前面加上 http://，就是在告訴瀏覽
器
○ 請用 HTTP 通訊協定跟這個網站溝通
○ 我們要看的資料是網頁
● 通訊埠:
○ HTTP：80
○ HTTPS：443

From：https://www.instantssl.com/ssl-certificate-products/https.html
網頁開發基本介紹
網頁設計流程
階段一：
階段二：
蒐集資料與規劃
網頁製作與測試
網站架構

階段三： 階段四：
網站上傳與推廣 網站更新與維護
搜尋引擎優化 SEO
2
1
1. 讓網頁關鍵字成為網址的一部份

2. 讓網頁關鍵字顯示在標題列
5
3. 讓網頁關鍵字出現在內容標題

4. 讓網頁關鍵字出現在內容裡
3
5. 為影片或圖片指定替代文字，以利圖片搜尋
4