12/27期末作業

組員 陳昭雯 陳逸慈 嚴姿涵

我們這次要改善的是 和服教室 喔~

期末作業
目標
以使用者經驗改善一家企業的網站

方法

依上半學期的分組，各組自選一家企業網站，改善之。改善之道如下：
1. 提出其可改善之處。
2. 提出同類型的優良企業網站，供改善參考。
3. 在部落格記錄每週改善記錄。
4. 在部落格做改善結果意見調查。


可改善者

台中技術學院日間部、進修部、進專及補校的網站
改善實例

12/20 外觀

33973006 昭雯的網站

網站外觀
目標
觀察網站，熟悉使用者經驗元素中的外觀 (surface)層，使頁面內的圖、文、色彩組合是一網站類型。

方法

援用Dreamweaver的範本，更動其圖像及CSS。

隨堂演練

一、

以Dreamweaver連結到你在學校的網站。(假如本地端無內容，你須將遠端內容下載)

在本地端網站的www資料夾內，新增work_6資料夾。
開啟Dreamweaver，點按右邊的從範本建立中的起始頁面。
二、建立檔案

從樣本頁面欄內選樣本，迄與你擬要改善的網站之頁面編排接近者。點按建立鈕。
在work_6資料夾，儲存為index.html。
三、檢視及編修網頁
點按頁面的圖像元素、文字元素及表格背景色等，變更之，以接近你欲修改的網站。
儲存該index.html。
四、修改CSS

在Dreamweaver右網站資訊區，點按附檔為CSS者。
將.bodyText內的color #FFFF00改為FFFFFF。
關啟CSS
檢視html檔的設計，發現主文區的文字全部由黃色變為白色。
可試著更改其他樣式的屬性，如文字大小等。

隨堂作業

將www資料夾中index.html檔案內的作業六超連結到work_6的index.html。
將www資料夾中的index.html存檔並上傳。
建議閱讀

張靜怡，葉俊賢，陳國明 (2003)，Dreamweaver MX，台北：文魁。六版。
胡為君譯 (2006)，Wogner原著，如何設計好網站，台北：上奇。
鄭巧玉譯 (2006)，Wogner原著，如何設計好網站之網頁改造術。台北：上奇。
RoseNya, 小包子 (2007)，Dreamweaver cs3即效見本，台北：上奇。
視覺系研究菀 (2006)，網頁設計部屋，台北：碁峯。

真得不太會這種密密麻麻的東西 多虧大家的幫忙喔 謝謝

12/13 網~站

隨堂演練

開啟Dreamweaver，新增html檔。
從主選單 >檢視 > 尺規 > 鉤選顯示。
從主選單 >檢視 > 格線 > 鉤選顯示格線。
從主選單 >檢視 > 格線 > 鉤選格線設定...。於對話框內調整間距的數值為10。
點選版面標貼，選APdiv。
在編輯區內畫一矩形。點選它，編輯它，並觀查及編輯區下方的屬性。並試著進行下列的屬性變動：

APdiv的名稱、大小、背景色
文字的對齊
文字的超連結

置入背景圖、插入圖像、圖像的超連結
儲存檔案。
將APdiv改為表格
div對較早期的瀏覽器可能不適用，所以若要為這些使用者考量，則可將div的程式碼轉換為表格table語法。其作法如下：

開啟有div的網頁。

從主選單 >修改 轉換 > 圖層轉換為表格。
從程式碼觀看程式碼的改變。

簡化表格。

隨堂作業

以Dreamweaver連結到你在學校的網站。(假如本地端無內容，你須將遠端內容下載)

在本地端網站的www資料夾內，新增work_4資料夾。
在work_4資料夾內新增skeleton.html，其內容係依前述瀏覽優良網站的評析，以APdiv方式排出頁面的間架--像建物的平面圖，每一APdiv插入該區間大小的圖像，並疊上文字。

儲存skeleton.html，並將它上傳到遠端伺服器。

將www資料夾中index.html檔案內的作業五超連結到skeleton.html。
將index.html存檔並上傳。
在瀏覽器測視你的作品。


越來越混亂~

網路建構-2

隨堂作業

以Dreamweaver連結到你在學校的網站。(假如本地端無內容，你須將遠端內容下載)

在本地端網站的www資料夾內，新增work_3資料夾。
依前二公司的網站瀏覽，在work_3資料夾內建立以下二個檔案

sitemap1.html，其內容能一目了然地看到創造力公司或Apple公司的網站

對象是誰？ 要提供什麼？
網站地圖 (另一名稱為網站導覽 )
網站結構的資料夾命名及各網頁的英文命名。
註：資料夾的名稱能在瀏覽器的網址欄看到，其原則如下：

在http://右方第一個 / 之後未具.html的英文(和或數字)名為第一層資料夾名稱。
在http://右方第二個 / 之後未具.html的英文(和或數字)名為第二層資料夾名稱，餘再依此類推。
網頁的名稱為有.htm或.html或asp或php副檔名者。
sitemap2.html，內容能一目了然地看到你期未作業欲改善的公司的網站

對象是誰？要提供什麼？
網站地圖。
網站結構的資料夾命名及各網頁的英文命名。
可改善之處何在？
將前兩個檔案存檔並上傳。

將www資料夾中index.html檔案中的作業三超連結到sitemap1.html。
將www資料夾中index.html檔案中的作業四超連結到sitemap2.html。
將index.html存檔並上傳。
在瀏覽器測視你的作品。

說明
依據Jesse James Garrett的看法，網站設計使用者經驗元素有五種，係由表層進入到最深層，依序有以下五層：

外觀 (Surface)層：圖、文元素的組合看起來是某一網站類型。
編排 (Skeleton)層：網頁元素的排列能讓使用者用起來最有效率。
結構 (Structure)層：內容的分類讓讀者知道如何去某目的地。
眼界 (Scope)層：使結構層得以完成的功能，例如，網路書店提供與甲書性質相近的書。
策略 (Strategy)層：網主及網友要能該網站取得什麼。

進行設計時，要由下往上建起。

真是越來越混亂了 一直問同學 .....
真是辛苦了 各位 謝謝大家