1 / 17

Web Design B rief O utline 網頁設計概論

Web Design B rief O utline 網頁設計概論. 講師：王清皇 ( jessewjs@yahoo.com.tw ) 95.02.22. Agenda. 講師簡介 課程簡介 分組名單、期末報告討論 網頁設計概論 開發工具、開發環境、網頁組成簡介 設計團隊有哪些人 準備工作. 講師簡介. 王清皇 國立雲林科技大學 資訊管理研究所 福懋興業股份有限公司 資訊中心 本職學能即是網頁設計、 ASP+ 資料庫進階開發 B2B EC 、 Office 、 Web-based Design u106605@ftc.com.tw. 課程簡介.

dwight
Download Presentation

Web Design B rief O utline 網頁設計概論

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design Brief Outline網頁設計概論 講師：王清皇 (jessewjs@yahoo.com.tw) 95.02.22

  2. Agenda • 講師簡介 • 課程簡介 • 分組名單、期末報告討論 • 網頁設計概論 • 開發工具、開發環境、網頁組成簡介 • 設計團隊有哪些人 • 準備工作

  3. 講師簡介 • 王清皇 • 國立雲林科技大學 資訊管理研究所 • 福懋興業股份有限公司 資訊中心 • 本職學能即是網頁設計、ASP+資料庫進階開發 • B2B EC、Office、Web-based Design • u106605@ftc.com.tw

  4. 課程簡介 • 教學大綱 • 分組說明：由班代收齊下週交分組名單，每組4~5人 • 期中報告：一人一份，題目：如何規劃與設計網站，網站主題自訂，最少5頁A4大小(12級字) • 期末報告：一組一份，整合組員期中報告內容完成網頁設計，需上傳到Internet網站，並繳交光碟、書面報告 • 學網頁設計之心路歷程 • Why FrontPage2002 • FrontPage VS. Dreamweaver 比較

  5. Why FrontPage2002 • Office家族之一，親切的中文操作介面，會用Word就會做網頁 • 所見即所得，初學製作網頁很容易 • 多樣化的檢視模式 • 不需美工也能做出漂亮的網頁 • 結合最新的網頁開發技術 • 延伸進階網頁開發(ASP+資料庫)也很容易

  6. 系統軟體環境與開發工具 • 作業平台：Windows XP Advanced Server + IIS • 資料庫：MS-SQL2000 Server • 程式語言：ASP + VBScript + JavaScript + HTML • 開發工具：FrontPage2000 + Script Editor + IE • 製圖工具：PhotoShop + PhotoImpact

  7. 系統硬體環境 • 網路： • 區域網路(乙太網路) • RJ45 + 網路卡(100/10M) + Hub(5 port) • PC • 3-5台連線(Server一台，其餘為Client) • Server規格： • 1.2G CPU • 40G HD • 512M RAM • 網路卡 • 撥接卡 • 4合一Printer(列印、掃描、複印、傳真)

  8. 網頁設計團隊 (一般常見組成) • 系統管理： • 網站管理員、網路管理師、設備管理師、系統整合顧問等 • 行銷管理： • 行銷規劃師、網路訓練規劃師、網路廣告掮客等 • 資料維護： • 資料內容供應者->User (key in， scan)、資料管理整合員 • 程式設計： • HTML、DHTML、ASP、PHP、Java、VB、Delphi..程式設計師 • 介面設計：(網頁+美工+多媒體設計師) • 圖片、動畫、美工(色彩、版面)、多媒體設計師等 • 資料庫設計： • 資料庫設計師、資料庫管理師等

  9. WWW 基本概念 • Internet：一個網路的大環境(一堆網域s集合而成) • WWW：由一堆網站s集合而成 • 網站：由一堆網頁s所構成的完整內容 • 首頁：當我進站時，看到的第一個網頁 • 網頁：每個瀏覽器所看的文件內容 •  網頁s -> 網站s -> WWWs -> Internet

  10. 製作網頁流程 • 主題架構：網站內容主題、操作介面 • 取得工具：寫網頁工具、圖片製作工具、網路工具 • 編寫網頁：網頁製作…文字、圖片、特效… • 找個空間：找個免費空間來放 • 上傳網頁：網頁上傳至網路上 • 維護網頁：維護網頁，保持網頁新鮮度

  11. 網頁主題類別(範例) • 企業/學校/政府/慈善網站：70%皆為此類 • 產/官/學界、營利(買賣)/非營利 • 入口/搜尋網站：Google, Yahoo • 拍賣網站：Yahoo, eBay, PCHome(露天) • 媒體網站：中時, 聯合, 蘋果, Yahoo, 蕃薯藤, TVBS, 自由 • 教學網站：線上學習(老師/英語/日語/電腦/程式/美術/體育/) • 遊戲網站：蕃薯藤, 天堂, 戲谷, Flash遊戲 • 下載網站：免費/試用/盜版/正版(收費)…many… • 個人網站/Blog：各大網站皆有提供免費空間…申請即可 • 地下網站：非法…勿輕易嚐試…

  12. 網頁製作工具(網頁類) • HTML類工具：HTML標籤語法 • 不同browser下不易出錯 • 設計者容易掌握網頁架構 • Ex: 記事本、Script Editor、UltraEdit… • 所見即所得類工具： • 螢幕的樣子就是上網看到的樣子 • Ex: FrontPage、Dreamweaver、Homesite…

  13. 網頁製作工具(影像+多媒體類) • PhotoImpact：圖片製作、影像處理，較容易上手 • PhotoShop：同上，但較進階、精緻 • ACDSee 32 Browser：圖片瀏覽軟體，自動圖片播放 • Ulead GIF Animator：製作圖檔動畫 • Flash：製作向量圖檔動畫，檔案較小 • Cool3D：製作3D文字動畫軟體 • Paint Shop Pro 5.0：影像編輯軟體，免費

  14. 製作工具(網路工具) • Cute FTP、WS_FTP：上傳網頁、下載檔案 • Internet Explorer：Browser • Getright：檔案下載軟體 • Teleport Pro 中文版：可將他人的網站全部抓下來到硬碟中

  15. 網頁空間

  16. 網頁製作注意事項 • 螢幕解析度：解析度不同，版面可能跑掉 • 640*480, 800*600, 1027*768, 更高 • 設定螢幕解析度 • Browser相容性：瀏覽器不同，版面可能跑掉 • Netscape：JavaScript • IE：VBScript (Windows XP需安裝JavaScript元件:msjavx86.exe) • 註明版本 • 檔名大小寫： • Web server：若是Unix或Linux，不接受中文檔名、且大小寫需一致，若為MS IIS則無問題，但要注意有無支援ProntPage • 檔名原則：盡量使用英文小寫、少用中文

  17. 網站成功要素 • 有內容(豐富多元) • 速度快(檔案小) • 版面美(排版+配色+創意) • 常更新 • 好連結 • 宣傳功力 • 登錄各搜尋引擎(免費/付費) • 首頁做好網頁注釋：keywords, description • <meta http-equiv="keywords" content="xxx,xxx,xxx"> • <meta http-equiv="description" content="xxxx">

More Related