網站設計：簡捷建站技巧

Epistemological/Digital Aesthetics- Formation Methodology

知識美學/數位美學之建構方法

A problem solving approach

簡捷建站技巧與程序

本建站教學課程自1990年代開始，當時的網路服務都是提供網路空間，使用者必須自行建站，同學學習也非常熱心。

本課程目標鼓勵群體創作，群體網站應有風格定位，亦即採用範本式設計開發。希望組員能各自設計一套範本，再經由組內分享討論，選擇代表群體的範本。

但後來網站服務走向部落格、社交網站化，使用者只需要打字、貼圖，並不用建站。建站教學過程中發現，組員並沒有全員參與，而是交付單一人負責。而負責人也可能沒有動機學習完整建站，甚至發生拿坊間過時的、非CSS網站範本當作業。

我們不僅作網站，更要作搜尋排行榜上頂尖的網站，希望我們創作的心血，有分享大眾的機會。但如果學習投入時間不足，又發生兩難。

因應社會需求趨勢的變遷，本課程也決定提供簡捷建站程序如後。目的在提供範本應用的創作方式，不需要從零開始建站，但可學習比部落格更多的個人化與特色設計，也可以對網站原理，有基礎知識性的認識。

Expression Web 免費下載 合法正版

SharePoint Designer 免費下載 合法正版

簡捷建站技巧與程序的單元

簡捷建站技巧與程序的單元包括：

跨平臺範本網站網址

下載跨平臺範本網站

標準內容範本網站網址

下載標準內容範本網站

Expression Web 簡捷應用 或 SharePoint Designer 簡捷應用

講義系列中的簡潔單元，將以黃底標示。

動態範本網頁

修改內文

修改標幟

修改連結

實體/虛擬結構

著作權聲明

意義設計/CSS

識別系統設計

資訊地圖設計

Expression Web 簡捷技巧應用

User Interface 使用介面

Expression Web/SharePoint Designer 使用介面可分3欄，經常維持2欄。

介面簡介

〉網站

〉開啟網站

〉面板

    〉資料夾清單

資料夾清單（或其他面板）右上角的圖釘符號，表示按下去，會「自動隱藏」，但不是「關閉」，而是點到後，以浮動方式出現。適合螢幕太小時。目前是使用固定位置。

資料夾清單也會呈現預設瀏覽器，目前是Firefox。

命令列與工具列

命令列與工具列與一般 Office 軟體大致相同。

多檔案全部儲存

網站編輯經常會發生同時編輯多檔案的情形，EW 比一般 Office 軟體，多一個多檔案「全部儲存」功能圖示，可善於利用。

多檔案全部關閉

網站編輯經常會發生同時編輯多檔案的情形，EW 也比一般 Office 軟體，多一個多檔案「全部關閉」功能：

〉視窗

〉關閉所有頁面 

新增網站

雖然使用普通資料夾的資料也可以建立網站，但使用 EW，應先新增 EW 的系統網站資料夾，再匯入資料，才能避免可能錯誤。

>網站

>新增網站

>空白網站

在此設定網站資料夾的位置和名稱。

>網站

>匯入

>匯入網站精靈

>檔案系統

>瀏覽

找到要匯入的普通資料夾，會出現在右側。以「資料夾」檢視，如果資料量大，分別點選各資料夾，再按「向左」箭頭。

網站資料夾圖示

建立後，該資料夾會出現網站資料夾圖示。

圖示所在與變更，如連結。

範本網站轉個人網站快訣 Tips for Your Exercise

You want to prepare a storage to save your exercise step by step and to use a large capacity storage other than a floppy disc.

注意：如果要將範本網站轉為個人網站，不宜以複製後更名方式，可能會造成系統隱藏檔遺失。可行方式有3；

1.必須先建立個人空白網站，再將範本網站以「發布網站」方式發布到個人網站。

2.網站複製均以「發布」方式為宜，但很多人可能覺得麻煩。若一定要用複製方式，檔案總管必須打開隱藏檔。

3.檔案總管打開隱藏檔後，亦可在 Expression Web 內更名：

〉網站

〉網站設定

〉一般

〉網站名稱

如何打開隱藏檔

Windows 7 以後版本

〉檔案總管

〉組合管理

〉資料夾和搜尋選項

〉檢視

取消各有關係統檔案的隱藏設定。 

Expression Web 版本與環境設定

〉工具

〉網頁編輯器選項

〉網站

〉網站設定     

〉一般

要勾選在網站上新增中繼資料，否則無法使用 [伺服器訊息語言] 下拉式清單。

〉網站設定     

〉預覽

在一般狀況下，使用網站 URL 預覽，而不另自訂。

〈使用 Expression Development Server〉是有動態網頁才使用，可以不選。

如果選，也『不要』選「所有網頁」，因已發現，與 ftp 交互作用時，會出現亂碼。 

〉網站設定     

〉進階 

底線字元開頭的檔案及資料夾

如果要以拖拉方式發布網站，就勾選「隱藏底線字元開頭的檔案及資料夾」。個人資料也不要使用底線字元開頭的檔案及資料夾。

〉網站

〉發布

如有子網站，可勾選。

最佳化，已當前網路速度，影響不大。萬一以後發生由伺服器傳本機，反不易讀，故偏向不選。

面板區塊排列

〉面板

點選各面板名稱，可以移動位置。

移動到介面4周，會出現「藍線」，靠近平行「藍線」，表示面板會以平行方式排列；靠近垂直「藍線」，表示面板會以垂直方式排列。但垂直「藍線」不容易出現，要特別注意。

在瀏覽器中預覽

〉檔案 

內容區 上方<TAB>

分作網站TAB和網頁TAB，各自包括不同的下方<TAB>，重要者為：

〉網站檢視TAB

    〉資料夾

    〉發布

    〉超連結

〉網頁TAB

    〉設計

    〉程式碼檢視

EW/SP 系統檔案資料夾

Expression Web/SharePoint System Folders

Expression Web/SharePoint 系統檔案就是以底線 _ 開頭的檔案。

 _vti_cnf, _vti_pvt, _vti_sub Folders 必須同步

_vti_cnf, _vti_pvt, _vti_sub 這3個系統檔案資料夾，不得刪改。

「同步」時不得疏漏，否則會出現亂碼等症狀。

_vti_cnf, _vti_pvt, _vti_sub contain info that talks to the sever. Do not change any of them.

vti stands for virtual terminal interface.

_derived Folder

注意：EW/SP 雖然也提供 FTP 上傳，但無法傳 _derived 資料夾-即布景主題中導覽的圖片檔，所以最好不要使用，而改用其他 FTP。 

Html 與程式碼介面精華篇 An introduction to the "Code View" 

上傳設計成果

Security