1 / 17

網頁設計基礎

網頁設計基礎. 使用 Dreamweaver 8 國立竹東高級中學 資訊科技概論 黃秋雅老師. 設定主題、收集資料. 作業的主題分為「人文／科技／慈善」三個類別，請同學們從自己生活領域，課業學習內容中找出符合這三類的主題。 資料不可以直接從網站上面複製，也不可以直接將書本的內容直接全抄，這樣都是違反智慧財產權的，引用網站要在網頁上附上該網站的網址，引用書本內容要在文末加註書本的作者書名頁次，這樣可以尊重作者及讓看的人更清楚這個資料來源的可信度。. 取得工具. 動畫： Macromedia Flash 、 Ulead Gif Animator

ace
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. 網頁設計基礎 使用Dreamweaver 8 國立竹東高級中學 資訊科技概論 黃秋雅老師

  2. 設定主題、收集資料 • 作業的主題分為「人文／科技／慈善」三個類別，請同學們從自己生活領域，課業學習內容中找出符合這三類的主題。 • 資料不可以直接從網站上面複製，也不可以直接將書本的內容直接全抄，這樣都是違反智慧財產權的，引用網站要在網頁上附上該網站的網址，引用書本內容要在文末加註書本的作者書名頁次，這樣可以尊重作者及讓看的人更清楚這個資料來源的可信度。

  3. 取得工具 • 動畫：Macromedia Flash、Ulead Gif Animator • 繪圖影像處理：Macromedia Fireworks、Adobe Photoshop、Ulead Photo Impact、Corel DRAW、Corel Painter、...。 • 圖片管理：ACDSee、Picasa。 • 網頁製作工具：Macremedia Dreamweaver、Microsoft Frontpage、...。 • Macromedia 與Adobe合併，Dreamweaver、Flash、Fireworks...最新版可以在Adobe下載。 • Corel 免費試用軟體

  4. 第一步：開新網站 展開以顯示本機和遠端網站

  5. 規劃網站藍圖 • 網頁製作的第一頁檔名設為 index.html • 選單頁：main.html • 內容第一頁：home.html • 研究主題頁：research.html、底下的相關檔可以設為r01.html、r02.html... • 各科作業：homework.html、底下的相關檔設為 h01.html、h02.html、...。 • 好站連結：link.html • 網站地圖：map.html • 站長介紹：profile.html，可以將自己的部落格連結在站長介紹裡互連。 • 參考資料：reference.html • 增設一個「images」資料夾，將所有的圖片都放在「images」資料夾中。

  6. 繪製網站地圖 收合至僅顯示本機或遠端網站 網站地圖

  7. 上傳檔案 • 101~110班同學的作品網址（ URL）範例：http://www2.ctsh.hcc.edu.tw/~st960145/ • 主機：www2.ctsh.hcc.edu.tw • 帳號：st960145 • 網頁存放資料夾（目錄）：public_html • 111~114班同學的作品網址（URL）範例：http://web2.ctsh.hcc.edu.tw/~s9611401/ • 主機：web2.ctsh.hcc.edu.tw • 帳號：s9611401 • 網頁存放資料夾（目錄）：public_html

  8. 設定本地資訊及遠端資訊 本設定內容以111班45號為例 101~110班同學請將「使用安全FTP(SFTP)」打勾

  9. HTML 的基本架構 • HTML文件的程式碼分為三個區塊 <html>...</html>、<head>...</head>、<body>...</body>。 • 整個HTML文件由<html>...</html>標籤(tag)包圍、瀏覽器一看到這個標籤就知道這是一個HTML文件，而範圍內又包含了<head>...</head>、<body>...</body>標籤。 <html> <head> HTML 文件的標題　 </head> <body> HTML 文件的內容 </body> </html> • 詳細說明： http://web2.ctsh.hcc.edu.tw/~bcc/網頁設計

  10. 利用iframe 設置內置框架

  11. 利用CSS讓超連結動起來

  12. CSS捲軸

  13. CSS背景設定

  14. CSS背景設定

  15. CSS背景設定

  16. CSS框線設定

  17. CSS框線設定 • 選擇功能表「文字／CSS樣式／新增」，選取器類型─標籤（重新定義指定標籤的外觀）。 • 另存新檔：檔名table.css • 設定邊框

More Related