1 / 23

網頁設計課程

網頁設計課程. 資管系　宋鎮宇. 前言. 網頁的介紹 Dreamweaver 的介紹 如何看到自己製作的網頁 網路上有哪些免費空間可以放置網頁呢 某些空間使用上的限制 網頁語法參考網站. 網頁的介紹. 能利用瀏覽器在 www 上所能看到的畫面 即所謂的網頁 詳細介紹（維基百科） http://zh.wikipedia.org/w/index.php?title=%E7%B6%B2%E9%A0%81&variant=zh-tw. Dreamweaver 的介紹. 讓使用者能有效率地設計、開發和維護以標準為基礎的網站和應用程式 詳細介紹連結

forest
Download Presentation

網頁設計課程

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. 網頁設計課程 資管系　宋鎮宇

  2. 前言 • 網頁的介紹 • Dreamweaver的介紹 • 如何看到自己製作的網頁 • 網路上有哪些免費空間可以放置網頁呢 • 某些空間使用上的限制 • 網頁語法參考網站

  3. 網頁的介紹 • 能利用瀏覽器在www上所能看到的畫面 即所謂的網頁 • 詳細介紹（維基百科） • http://zh.wikipedia.org/w/index.php?title=%E7%B6%B2%E9%A0%81&variant=zh-tw

  4. Dreamweaver的介紹 • 讓使用者能有效率地設計、開發和維護以標準為基礎的網站和應用程式 • 詳細介紹連結 • http://www.softking.com.tw/soft/clickcount.asp?fid3=21344 • 載點 • http://backzerg.myweb.hinet.net/Dreamweaver8.rar

  5. 如何看到自己製作的網頁 • 首要條件：網頁必須先存檔成功(非常重要) • 方法1：直接到本機資料夾使用瀏覽器瀏覽 • 方法2：在Dreamweaver內按「F12」按鈕 • 方法3：上傳到網路空間後，使用網址連結

  6. 有哪些免費空間可以放置網頁呢 • 大葉，免費20MB（限本校學生） • 網址：ftp://aries.dyu.edu.tw • 帳號：學號 • 密碼：同信箱密碼 • 尚未申請：http://lotus.dyu.edu.tw/caccount/

  7. 某些空間使用上的限制 • MP3上傳的限制 • EXE檔案上傳的限制 • 支援語法的限制 • JPG、BMP、PNG…等等圖片檔案的限制 • 檔名命名的限制

  8. 網頁語法參考網站 • 網站建置百寶箱 • http://dob.tnc.edu.tw/ • i-Web 網頁教學 • http://www.i-webhk.com/home.php • 爪哇島 • http://cdh.idv.tw/

  9. 網頁設計作業 • 最後兩節課，使用Dreamweaver建構 • 分割頁框 • 跨頁框超連結 • 圖片連結 • 超連結 • 背景圖的使用 • 上傳至個人空間 • 原始電子檔的保存

  10. 學習項目 • 框架 • 貼圖 • 超連結 • 表格 • 背景圖案 • 音樂 • 上傳 • 常發生的錯誤

  11. 框架 　框架就是將瀏覽視窗分割成為幾個區域， 　每個區域都是一個獨立的網頁。 　而框架運用在網頁設計上是常見到的， 　這種將許多網頁結合呈現的方式， 　讓使用者容易閱讀網頁， 　而編輯者也可以做活潑的網頁設計。

  12. 找到調整框架的工具 位於「檔案」下方的「常用」按鈕 點選後選擇「版面」

  13. 找到調整框架的工具 請找到下圖的圖案，右方的倒三角形按下後 出現數種框架分割的範例

  14. 使用工具分割頁框 請選擇「上及左巢狀頁框」

  15. 分割頁框調整選項 應該會出現下面的視窗，請直接按確定

  16. 分割頁框 已經分割完成，還剩下一些細部項目

  17. 框架的存檔 • 在做完左右分割框架後，接下來就是我們要注意的地方：若分割成二個框架，則必須總共存三個檔案。(如下圖紅、綠、藍色所示，每一個顏色都代表一個的檔案。

  18. 圖片連結 • 就是俗稱的「貼圖」 • 語法 • <img src="檔案位置" width="768" height="598" > • 或是「工具列」→「插入」→「影像」 • 　　　　　　　　　　　　　　　↓ • 　　　　　　　「選取你想要插入的圖片」

  19. 超連結 • 語法 • <a href="想連結的目標">連結名稱</a> • 或是 • 「工具列」→「插入」→「超連結」 • 　　　　　　　　　　　　　↓ • 　　　　　　　　　　　「輸入資料」

  20. 表格 • 「工具列」→「插入」→「表格」 • 細部調整後即可使用 • Ps.表格中可再插入表格

  21. 背景 • 畫面中點選滑鼠右鍵→「頁面屬性」 • 　　　　　　　　　　　　↓ • 　　　　　　　　　　　「外觀」 • 　　　　　　　　　　　　↓ • 　　　　　　　　　　　「背景顏色」 • 　　　　　　　　　　　　ＯＲ • 　　　　　　　　　　　「背景影像」

  22. 音樂 • 背景音樂語法 • <bgsound src="音樂名稱"> • <embed src="音樂名稱" width="100" height="40" loop="1" >

  23. 額外補充 • 快速縮短超級長的網址 • 下載「YouTube」的影片 • 好用的免費網路硬碟 • 簡單好用的上傳分享空間

More Related