網路傳播設計~自然戒

111

2009-04-28T14:25:00.001+08:00

2/23

2009-02-23T15:13:00.003+08:00

2/21

2009-02-21T10:06:00.006+08:00

2/14 新學期

2009-02-14T11:40:00.001+08:00

開學第一天~
就來了個好有難度的作業....
加油吧各位

學會從來鵠的《雲》製作一完整的Flash影片主題：雲千形萬狀竟還空，映水藏山片復重。無限旱苗枯欲盡，悠悠閒處作奇峰。---------------來鵠，《雲》。製作流程將作品分成七個影片段，主題四，外加片頭及片尾各一，及匯編一。　前製規畫
影片大小
背景音效
腳本繪製實際製作片段1（片頭）：
淡入
不同造形的中文字「雲」蛻變著；
字之前、後有數朵雲流動著。
文字：「作者：來鵠」，淡入。
淡出。
儲存檔案cloud_1

2009-01-11T11:28:00.001+08:00

原網站

修改後的網站

組\員\ 昭雯.逸慈.姿涵喔

純屬作業

1/3

2009-01-03T10:29:00.002+08:00

期末檢討~

雖然只有一組但是覺得改的真棒
可是阿上面是中文不知道下面能不能順便解釋一下
.....

12/27期末作業

2008-12-27T12:53:00.004+08:00

組員陳昭雯陳逸慈嚴姿涵

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

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

方法

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

可改善者

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

12/20 外觀

2008-12-20T12:07:00.002+08:00

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 網~站

2008-12-13T11:50:00.001+08:00

隨堂演練

開啟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

2008-12-06T11:54:00.002+08:00

隨堂作業

以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)層：網主及網友要能該網站取得什麼。

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

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

網站結構

2008-11-29T12:04:00.003+08:00

33973006 昭雯的網站

目標
了解網站內容的線性結構、層屬結構與檔案命名

學習新功能

網站地圖 (site map)
線性結構
層屬結構

超連結
一、前置作業

開啟Dreamweaver，進入網站管理，連結到遠端資訊。
於本機端修改上周的index.html檔，加入居中排列，依序作業一、作業二至作業七。
存檔。

二、網站地圖
一個網站是眾多網頁的組合，每一個網頁，都是個別的檔案，常見的附檔名為html。每一網頁會與其他網頁建立出關係，例如是同類關係，或者連續關係，或者連結關係。
為了管理這些網頁成為良好的結構，網站會附設網站地圖 (有中譯為網站導覽)，讓維修人員或瀏覽者容易理解整個網站的結構。在架網站時，須先想好內容的組織架構，以期能符合使用者經驗。

三、線性結構

線性結構：網頁內容像火車那樣，一站接一站往前或倒後。
實例簡介：利用線性結構，介紹三張圖文說明，用←(上一篇)及→(下一篇)做超連結。
製作步驟：

在本地端的www資料夾內新增一個資料夾，取一小寫英文名，如work_1。
在work_1內新增一個檔案，取名為article1.html。
再新增一個檔案，取名為article2.html。
再新增一個檔案，取名為article3.html。
再新增一檔案夾，取名為images。
將三個圖像放入images資料來內。

開啟article1.html，編輯它，使成為圖文作品，在文章最下方下一篇。
為下一篇設超連結，連到入article2.html。
儲存檔案article1.html。

另存新檔為article2.html，編輯它，換新圖文，在文章最下方下一篇左側，另鍵入上一篇。
為下一篇設超連結，連到入article3.html。
為上一篇設超連結，連到入article1.html。
儲存檔案article2.html。
另存新檔為article3.html，編輯它，換新圖文，將文章最下方下一篇刪除，另鍵入上一篇。。
將上一篇的超連結連到article2.html。
儲存檔案article3.html。
在瀏覽器測試 (IE的快速鍵為F12鍵)。
上傳到伺服器。
四、層屬結構

層屬結構：像書本那樣，一書有數章，每章數節等。
實例簡介：利用可任選且具超連結的文字或圖像。
製作步驟：

在本地端的www資料夾，新增一個資料夾，取一小寫英文名，如work_2。
在work_2資料夾內新增一個檔案，取名為article1.html。
再新增一個檔案，取名為article2.html。
再新增一個檔案，取名為article3.html。
再新增一個檔案，取名為article4.html。
再新增一檔案夾，取名為images。
將四個圖像放入images資料來內。

article1.html，編輯它，使成為圖文作品，在文章最下方加入第一篇、第二篇、第三篇、第四篇等四個詞，為讓各詞間有空白，按Ctrl+Shift+空間棒。

將第一篇做超連結到article1.html。
將第二篇做超連結到article2.html。
將第三篇做超連結到article3.html。
將第四篇做超連結到article4.html。
儲存檔案。
另存新檔，取名為article2.html，取代原檔案，編輯article2.html，存檔。
另存新檔，取名為article3.html，取代原檔案，編輯article3.html，存檔。
另存新檔，取名為article4.html，取代原檔案，編輯article4.html，存檔。
在瀏覽器測試 (IE的快速鍵為F12鍵)。
上傳到伺服器。
五、首頁與內頁超連結

將index.html檔的作業一與work_1內的article1.html連結。
將index.html檔的作業一與work_2內的article2.html連結。
在瀏覽器測試 (IE的快速鍵為F12鍵)。
儲存檔案。
上傳到伺服器。

越看越花這真是有難度阿

11/29網站架設

2008-11-29T11:12:00.001+08:00

http://kimonotw.myweb.hinet.net/

一般而言，架網站有二個方式：

一是以自己的電腦當伺服器（server）；你要申請網站，要繳年費；
二是以別人的電腦當伺服器。你可能要繳費，但很多是免費的。
現在，你要做的是第二種，即以本校提供每人10ＭＢ空間來架設個人網站。它有一些限制，譬如，它無法建構資料庫。雖如此，仍可完出一些有趣的內容，以下介紹以dreamweaver來架設網站的方法，分以七大步驟：

一、建立本地端的資料夾

先在電腦D:槽內新增一個資料夾，一律取英數名，不要空格或特殊符號，本例中，取名為web123456。
打開web123456資料夾，新增一個資料夾，取名為www。(注意：英文要小寫)

二、用Dreameweaver建立本地資訊

啟動Dreamweaver，開啟新檔，選「html」。
從主選單選網站 >管理網站，於對話框點按「新增網站」鈕。
點按浮動視窗上方的「進階」標頭。
在左上角的分類下，選「本地資訊」。
點按「本地資料夾」空白欄右側的資料夾圖示，選擇web123456這個資料夾。(注意紅色框內最右邊不可以有www)。

三、設定遠端資訊

接著，在分類欄內選「遠端資訊」，並完成類似下圖之資料設定。
注意，主機目錄欄要留白。要打V的一定要打鉤。
換測試鈕。
當顯示可以連繫成功，可以按「確定」鈕。

四、實際連線

在Dreamweaver作業視窗右側，按以「連線至遠端主機」。
選用「本地端」。
滑鼠在www資夾，點按右鍵，按新增檔案，取名為index.html。
注意，這項命名字不可錯誤。
點按index.html二下以開啟dreamweaver，它會是一個空白頁面。
在頁面內輸入能表達你個人資料的文字內容。
在title欄內鍵入「xxxx的首頁」
檔案>存檔。
五、檔案上傳。

點按上傳圖示。
六、瀏覽成果
依上述步驟，你應已架好自己的個人網站了，你應該記下你自己的網站的網址！它應該像下列文字串：http://web2.ntit.edu.tw/~sxxxxxxxxxxx/ （註：sxxxxxxxxxxx是你的號碼）

到瀏覽器的位址欄，鍵入你的網址
http://web2.ntit.edu.tw/~sxxxxxxxxxxx或
http://web2.ntit.edu.tw/~sxxxxxxxxxxx/index.html或
http://web2.ntit.edu.tw/~sxxxxxxxxxxx/index.htm。
看看三者有沒不同。

七、下載
當你將網站資料下傳到伺服器之後，你可到任何地方將資料下載。下載的步驟如下：

同主步驟一至四。
點按Dreamweaver作業視窗右側的下載。
在本地端，將下傳的檔案加以編輯，儲檔。
上傳。
到瀏覽器看結果。

學到了一種架設網站的方法了

11/15隨堂作業

2008-11-15T10:10:00.002+08:00

1.半學期來製作個人部落格及分組部落格的收穫與待改進之處。

徐文嫻的部落格

白意婷的部落格

蔡妙音的部落格

虛實之間 (入選無名網站動漫第20名)

阿土伯的有機肥

雪兒好

小心眼

因為之前就有在無x有一個blog 可是都沒有很辛勤的在更新
而在開始製作後發現網誌要常更新(要有內容 ) 在版面上也是
需要花心思的呦版面不僅要有新意文章內容的字要清楚
背景也要考慮許多因素我覺得這是一門深奧的學問阿

2.以下兩者的差異

阿默的生活

中國攝影

阿默 - 偏向個人及活動資訊分享比較偏向個人為中心的blog
影像- 是一個交流的平台而且與藝術相關不像是日誌偏向大眾交流的網站

3看以下的網站有何感想

Macannashoe

好厲害的一個網站有個性及特色
但是一開始看到首頁還以為只是個塗鴉的網站
沒想到是在賣個人商品還走國際化路線呢

11/8分組報告之最終決戰

2008-11-08T21:37:00.004+08:00

下次上課在5樓囉

同學們的 blog

for nothing - 街頭藝術

小天使的第1000首歌 - 音樂藝術

慈悲熊美食料理 - 家常美食

饕掏不絕 - 城市風味美食

圖片來源:komika 如有侵權請告知喲謝謝

11/1 新的一個月之分組報告 2

2008-11-01T22:46:00.006+08:00

在遙遠的彼方能看見夢想之地嗎?

我在慌亂中探索著我的之後

也在這裡闡述著... 現在的我

今天分組報告的同學blog如下

連結列

波本可樂 - 地方美味

八分之四等於二分之一 -人文藝術

毛毛造照 - 心情扎記創作

人生樂不樂 - 行銷無所不在...

大家都好厲害喔不論是在分組的或是個人的
每個人都用心的在經營著自己的小天地
也希望大家的小天地能變成大世界喔加油

10/27 分組報告呦

2008-10-27T00:49:00.008+08:00

本次是要報告大家分組後所開拓的blog唷

我們這組介紹的是有關動漫小說

有興趣的同好們

歡迎到我們的blog上交流交流

連結-歡迎點選

虛實之間 - 動漫小說相關

同學的

四人行必有我師 - 心情記事相關

三人成唬 - 設計心情記事相關

阿土伯的有機肥 -農業產銷地方特色?相關

以上是10/25 報告的同學們雖然還沒全部報告完所以有些沒有連結不過我也會陸續更新的

希望有興趣的各位可以多多支持我們喔

97.10.18

2008-10-18T10:29:00.003+08:00

圖文就是一整個沒交集..

今日教學-如何新增意見調查 1.版面配置 2.新增小工具3.意見調查這樣就可以囉

說點題外話今天五月天要來台中開演唱會耶好想去看看喔早上出門的時候看到一大群人在排隊

陣仗真是不輸台大場(看得懂的就是看得懂不了解得等你想涉入動漫區的就在看看吧)真是

好想去聽演唱會阿可是要上課老天爺阿你這是捉弄我嗎? 為什麼活動都在假日阿(淚奔)

97.10.11

2008-10-11T11:32:00.003+08:00

今天要上台報告我們網誌的主題

總結大致上是小說和漫畫

可是無名不知道怎麼了居然連不進去阿

天阿只好回家在整理了

分享一張滿復古的照片

回應的連結

2008-10-04T10:58:00.000+08:00

1.先到要回應的文章 2.先鍵入一些程式碼 (上面的那一個)。

xxx是你想連結的文章網址以上

如何修改版頭

2008-09-27T11:16:00.000+08:00

今天的教學~

如何修改版頭第一步點新文章 2.版面配置 3.網頁元素 4.版頭編輯即可

one day ~~~

2008-09-20T11:09:00.000+08:00

上課第一天 ~~ 試貼