Friday, September 28, 2007

隨堂作業

前置作業
利用Dreamweaver先在自己的電腦D:槽或隨身碟建立本地端網站,並與遠端網站連線,將遠端網站的內容下載到本地端網站。

作業目標:
完成純文字的網頁及超連結,它是網際網路剛開始時的主要功能。

製作細項:
一、利用Dreamweaver製作一文件,取名為work01,存在www資料夾內。其內容請到google、wikipedia去找出下列有關網路傳播有關的專有名詞及說明
  • internet網際網路
  • www全球資訊網
  • web site網站
  • homepage首頁
  • web page 網
  • hyperlink超連結
  • html超文件標示語言
  • URL
  • http
  • ftp
二、開啟你上一次的index檔,在文件內加入文字「作業一」,並將「作業一」超連結到前述的work01.html
三、修改work01.html,在文件內加入「回首頁」,並作超連結到index.html
四、完成上述作業,試著在瀏覽器看你的作品。

補充說明:
  • 你可以考慮將work01.html的文字做色彩及字型級數的變化,以達易讀美觀的要求。
  • 當你從其他軟體或網頁拷貝文字到dreamweaver時,最好先貼到Windows附屬軟體「筆記本」,使這些字成為純文字,再選取這些純文字,複製,再貼到dreamweaver。

Friday, September 21, 2007

學期作業

本課程以上Dreamweaver為主,Fireworks為輔。
本學期除課堂練習外,主要作業有兩項:
  • 期中考:個人網頁,主題自訂。
  • 期末考:公司網站,修改現有公司或為尚未有網站的公司設計網頁內容。

日設三1自我許願

請在這留言欄內許下你希望在這個學期這門課,
  • 學到什麼?
  • 自己完成什麼?
記得留下你的資料,例如你的部落格名或學號
如果到學期宋,上兩項都完成,我會給你85-95分。

Thursday, September 20, 2007

參考書目

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

日設三A自我許願

請在這留言欄內許下你希望在這個學期這門課,
  • 學到什麼?
  • 自己完成什麼?
記得留下你的資料,例如你的部落格名或學號
如果到學期宋,上兩項都完成,我會給你85-95分

在學校伺服器架網站

一般而言,架網站有二個方式:
  • 一是以自己的電腦當伺服器(server);你要申請網站,要繳年費;
  • 二是以別人的電腦當伺服器。你可能要繳費,但很多是免費的。
現在,你要做的是第二種,即以本校提供每人10MB空間來架設個人網站。它有一些限制,譬如,它無法建構資料庫。雖如此,仍可完出一些有趣的內容,以下介紹以dreamweaver來架設網站的方法,分以七大步驟:
一、建立本地端的資料夾
  1. 先到學校網站首頁的Eportal更新你的密碼。
  2. 先在電腦D:槽內新增一個資料夾,一律取小寫英數名,不要空格或特殊符號,例如,取名為web123456。若一定要用特殊符號,建議只用下標_,例如,web_1234
  3. 打開web123456資料夾,新增一個資料夾,取名為www。(注意:一定要取名為www,英文要小寫),取名www的理由是校方伺服器的要求。
二、用Dreameweaver建立本地資訊
  1. 啟動Dreamweaver,開啟新檔,選html」。
  2. 從主選單選網站 >管理網站,於對話框點按「新增網站」鈕。
  3. 點按浮動視窗上方的「進階」標頭。
  4. 在左上角的分類下,選「本地資訊」。
  5. 點按「本地資料夾」空白欄右側的資料夾圖示,選擇web123456這個資料夾。(注意紅色框內最右邊不可以有www)。
三、設定遠端資訊
  1. 接著,在分類欄內選「遠端資訊」,並完成類似下圖之資料設定。
    注意,主機目錄欄要留白。要打V的一定要打鉤。
    不知密碼者,請到http://web2.ntit.edu.tw找尋。
  2. 換測試鈕。
    當顯示可以連繫成功,可以按「確定」鈕。
四、實際連線
  1. 在Dreamweaver作業視窗右側,按以「連線至遠端主機」。
  2. 選用「本地端」。
  3. 滑鼠在www資夾,點按右鍵,按新增檔案,取名為index.html
    注意,這項命名字不可錯誤。
  4. 點按index.html二下以開啟dreamweaver,它會是一個空白頁面。
  5. 在頁面內輸入能表達你個人資料的文字內容。
  6. 在title欄內鍵入「xxxx的首頁」
  7. 檔案>存檔。
五、檔案上傳。
  1. 點按上傳圖示。
六、瀏覽成果
依上述步驟,你應已架好自己的個人網站了,你應該記下你自己的網站的網址!它應該像下列文字串:http://web2.ntit.edu.tw/~sxxxxxxxxxxx/ (註:sxxxxxxxxxxx是你的學號)
  1. 到瀏覽器的位址欄,鍵入你的網址
    http://web2.ntit.edu.tw/~sxxxxxxxxxxx
    http://web2.ntit.edu.tw/~sxxxxxxxxxxx/index.html
    http://web2.ntit.edu.tw/~sxxxxxxxxxxx/index.htm
    看看三者有沒不同。
七、下載
當你將網站資料下傳到伺服器之後,你可到任何地方將資料下載。下載的步驟如下:
  1. 同主步驟一至四。
  2. 點按Dreamweaver作業視窗右側的下載。
  3. 在本地端,將下傳的檔案加以編輯,儲檔。
  4. 上傳。
  5. 到瀏覽器看結果。
八、刪除網站
當你使用學校的軟體經營你的本地端網站,要離去時,記得執行
  1. 網站 > 管理網站 >
  2. 對話框內選取你的網站名 > 移除。
如此,可以防此其它人不小心闖入你的網站。

小結
由於學校的網站伺服器內已為每位使用者設好www資料夾供網頁使用,所以你的任何資料務必要存入該資料夾內,否則一定會出問題。因此,本地端的www資料夾與遠端的資料夾是對等的。你將本地端的資料夾上傳,就會蓋過遠端的www資料夾。反之亦然,另外,這兩個資料夾內,一定要有一個檔案,其檔名為 index.html。


有了網站,你的問題是你要表現什麼內容?要如何表現?
說到內容,最好是你最感興趣的,或者你被逼得要做的(例如,你接了case)。
說到表現,答案可不只一種,它就像印刷編雜誌一樣,你要有版式、圖片、色彩計劃、分類。但與印刷雜誌不同的是,它會用到超連結(hyperlink)、多媒體(flash)或視訊及音效等。
本學習中,你的學習目標有二:
  1. 模仿網站:觀賞網站,模仿其風格架設自己設想內容的網站。
  2. 改版:以前一階段的能力為基礎,設計另一種風格(模仿亦可,自創更佳),強化自己改版的能力,並為業界的網站做更版 。
補充
你可由以下的超連結去建構免費網站