Search
《我是 柯威》

​每天打開手機，滑滑滑～線上課程、Facebook、google、線上購物都離不開網站，
每天身活都離不開手機，更離不開網路與網站。

然而網站是什麼？
如何架網站？

過去你想買東西，會走出家門，然後在去商店街逛街，或是去菜市場買菜：

流程：就是走出門⇒商店地址⇒選擇商品⇒付現金⇒交易完成⇒帶商品回家

當網路發達後，流程就變成：打開手機⇒輸入網址(商店網址)⇒瀏覽網站⇒選擇商品⇒線上信用卡付款⇒交易完成⇒等宅配送貨到家

兩者共同的地方就是商店地址，差別在於一個是實體店面地址，一個是虛擬網路地址，但是概念是相同的。都有一個地址，有了地址就知道如何到達。
虛擬的網址概念，跟實體地址是一樣的。

所以我們要建立一網站，就跟建立一個商店概念相同，對應如下：
  1. 註冊網域（申請一個門牌）
  2. 租用虛擬主機（租一塊地）
  3. 設定DNS指向（申請地圖標示，找地址，指引商店位置）
  4. 安裝架站軟體（蓋房子）

如何架構網站

1. 架網站：先認識 網域是什麼

什麼是網域？

網域 (Domain name) 又稱「網域名」，是網站首頁的地址。例如，在瀏覽器輸入 www.google.com.tw會到達谷歌網站首頁。

2. 架網站：什麼是『URL』？

什麼是『URL』？
URL (Uniform Resource Locator) 指的是
       「Uniform：統一 ；Resource：資源；Locator：定位器」，俗稱網址。

一個網站：
由HTML、CSS、JavaScript、PHP… 等檔案組成（也就是分屬於不同的資料夾）。URL是到達資料夾中某檔案的路徑。

例如，微軟台灣站的筆電(surface)網頁，是(surface)資料夾中的一個檔案：

網域是URL的一部份，若只輸入網域（google.com.tw，你會到達網站的根目錄（所謂的首頁）。

3. 架網站：『SSL』憑證是什麼? 網站真的需要安裝嗎？

『SSL』憑證是什麼? 網站真的需要安裝嗎？

SSL是 「Secure Sockets Layer」縮寫

SSL就是網址（https://） 裡面的「s」

S：代表網站資訊很安全、有加密、有認證。

SSL的發明者：Netscape的科學家 Taher Elgamal，SSL安全憑證：主要是用於網站的安全傳輸協定。

網域是URL的一部份，若只輸入網域（google.com.tw，你會到達網站的根目錄（所謂的首頁）。

4. 架網站：​什麼是『DNS』？

什麼是『DNS』？
DNS，也就是網域名稱系統，它將人們可讀取的網域名稱 (例如，www.amazon.com) 轉換成為機器可讀取的 IP 地址 (例如，192.0.2.44)。

5. 架網站：​選擇虛擬主機 (Web hosting) 服務

選擇虛擬主機 (Web hosting) 服務:

虛擬主機 (Web hosting) 又稱「雲端網頁空間」，是存放網站檔案的雲端伺服器。
  1. GoDaddy
  2. Cloudways
  3. BlueHost
  4. HostGator
  5. SiteGround
  6. A2 Hosting
  7. Hostinger
  8. Dreamhost​

6. 架網站：​​網域+虛擬主機 ⇒ 一站完成（新手區)

選擇網域+虛擬主機 一條龍服務:
  1. Wix
  2. Strikingly
  3. weebly

一條龍架站：Wix

一條龍架站：​Strikingly

一條龍架站：​weebly

常用網站語法

1. <img src="貼上圖片網址"> 貼圖語法

2. <img src="圖片網址" style="FLOAT: left; maring: 5px"/>

放在文字左邊，圖片要靠左 (left)或靠右 (right)自行設定，圖片距離文字的多少也自訂

3. <a href="請輸入要連結的網址">輸入你要的文字描述</a>文字超連結

4.<a href="輸入連結網址" target="_blank">輸入你要的文字</a> 連結並開啟新視窗

5.<a href="請輸入要連結的網址"><img src="圖檔網址"></a>

用圖片開啟視窗連結，如要開啟新視窗，請加入target=_blank

6.<img src="請輸入圖檔網址" width="25" height="25" border="0" alt="輸入你要的文字描述">

貼圖，改變圖片顯示大小。
border 是代表圖片要不要有外框 ,0代表沒有 1 2 3 4 5...框線會越大 border color="#色碼" 你也可以選用外框顏色 . width="25" height="25" 這是圖片大小的語法 寬25 長25 (自行調整) 文字敘述--即滑鼠指在圖片上顯示之文字

基本連結—應用語法



1.一般連結
​<a href="網址">網名</a>
網址：可自行更改成要的網址
網名：可自行更改成要的名稱

2.一般連結(另開新的視窗)
<a href="網址" target="_blank">網名</a>

網址：可自行更改成要的網址
網名：可自行更改成要的名稱

3.按網名名稱開啟網站超連結(顯示註解文字)
<a href="網站位址" title="文字敘述">網名</a>


4.按網名名稱開啟超連結(顯示註解文字)(另開新視窗)
<a href="網站位址" title="文字敘述" target="_blank">網名</a>


5.按圖片名稱開啟圖片超連結(顯示註解文字)(另開新視窗)
<a href="圖片位址" title="文字敘述" target="_blank">圖片名稱</a>


6.按圖開啟網站超連結(顯示註解文字)
<a href="網站位址"><img src="圖片位址" alt="文字敘述"></a>


7.按圖開啟網站超連結(顯示註解文字)(另開新視窗)
<a href="網站位址" target="_blank"><img src="圖片位址" alt="文字敘述"></a>


8.按圖開啟圖片超連結(顯示註解文字)(另開新視窗)
<a href="圖片位址" target="_blank"><img src="圖片位址" alt="文字敘述"></a>


9.插入E-maiil
<a href="mailto:信箱位址 ">文字敘述</a>


10.插入E-maiil (另開新視窗)
<a href="mailto:信箱位址 " target="_blank">文字敘述</a>


11.按圖開啟超連結滑鼠移到圖上(顯示註解文字)(可當logo連結用)(另開新視窗)
<a href="部落格網址" target="_blank"><img src="logo圖片網址" alt="部落格名稱"></a>

12.開新的網頁語法
<a href="http://www.yahoo.com" target="_blank" title="yahoo">yahoo</a>