使用Dreamweaver 8 國立竹東高級中學 資訊科技概論 黃秋雅老師 網頁設計基礎 使用Dreamweaver 8 國立竹東高級中學 資訊科技概論 黃秋雅老師
設定主題、收集資料 作業的主題分為「人文／科技／慈善」三個類別，請同學們從自己生活領域，課業學習內容中找出符合這三類的主題。 資料不可以直接從網站上面複製，也不可以直接將書本的內容直接全抄，這樣都是違反智慧財產權的，引用網站要在網頁上附上該網站的網址，引用書本內容要在文末加註書本的作者書名頁次，這樣可以尊重作者及讓看的人更清楚這個資料來源的可信度。
取得工具 動畫：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 免費試用軟體
第一步：開新網站 展開以顯示本機和遠端網站
規劃網站藍圖 網頁製作的第一頁檔名設為 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」資料夾中。
繪製網站地圖 收合至僅顯示本機或遠端網站 網站地圖
上傳檔案 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
101~110班同學請將「使用安全FTP(SFTP)」打勾 設定本地資訊及遠端資訊 101~110班同學請將「使用安全FTP(SFTP)」打勾 本設定內容以111班45號為例
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/ 網頁設計
利用iframe 設置內置框架 內置框架的語法 <iframe name="content" width="600" height="400" src="home.html" frameborder="0" scrolling="auto" allowtransparency="true">很抱歉，您必需使用支援inline frame 內置框架的瀏覽程式才可以看到完整的網頁。</iframe> 作法 複製以上語法 打開HTML語法視窗 貼在欲建置內置框架的網頁位置 說明： 名稱(name)：內置框架名稱為 content 寬度(width)：框架寬度 600 (依自己網頁修改) 高度(height)：框架高度400 (依自己網頁修改) 來源檔(src)：框架內第一個顯示檔案為home.html 邊框(frameborder) ： 設 0 表示沒有框線 捲軸(scrolling)：設自動" auto" ，依網頁長度自動顯示 選單項目設定連結時：目標要設為 content
利用CSS讓超連結動起來 自訂超連結的文字顯示格式 利用CSS讓超連結動起來 自訂超連結的文字顯示格式 <style type="text/css"> a {text-decoration:none;font-size:14pt;font-family="標楷體";} a:link {color:#ff6633;} </style> 設定當滑鼠移過時的超連結文字顯示格式 <style type="text/css"> a {text-decoration:none;font-size:14pt;font-family="標楷體";} a:link {color:#ff6633;} a:visited {color:#ff66ff;} a:hover {color:#009900;} </style> 設定正被選取的超連結文字顯示格式 <style type="text/css"> a {text-decoration:none;font-size:14pt;font-family="標楷體";} a:link {color:#ff6633;} a:visited {color:#ff66ff;} a:hover {color:#009900;} a:active {font-weight:bold;} </style>
CSS捲軸 CSS程式碼 <style> body {font-family:Tahoma,Arial; font-size: 10px; color:#666666; scrollbar-face-color: #FFCCCC; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #FFCCCC; scrollbar-darkshadow-color: #DDDDDD; scrollbar-shadow-color: #FF9999; scrollbar-arrow-color: #FF9999; scrollbar-track-color: #DDDDDD; } </style> 作法一： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>無標題文件</title> 複製CSS程式碼貼在這裡 </head> <body> </body> </html> 作法二： 將CSS程式碼複製(不包含<style> </style>)，另存到一個檔案，例：scroll.css 在預顯示捲軸效果的HTML檔中，切換到程式碼畫面，輸入以下紅色列HTML程式碼。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>無標題文件</title> <link href="scroll.css" rel="stylesheet" type="text/css">
CSS背景設定 背景屬性一覽 background-color:#F5E2EC /* 背景色彩 */ background-image : url(image/bg.gif) /* 背景圖片 */ background-attachment : fixed /* 固定背景 */ background-repeat : repeat /* 重複排列 - 網頁預設 */ background-repeat : no-repeat /* 不重複排列 */ background-repeat : repeat-x /* 在 x 軸重複排列 */ background-repeat : repeat-y /* 在 y 軸重複排列 */ background-position : 90% 90% /* 圖片在 x 與 y 軸的位置 */ 將背景放在網頁 x 軸 90% y 軸 90% 的地方，且固定不隨著捲動 <style type=text/css> <!-- body{ background-image : url(image/bg.gif); /*背景圖存放路徑*/ background-repeat : no-repeat; /*背景圖不要重複*/ background-position : 90% 90%; /*放在 x 軸 90% y 軸 90% */ background-attachment : fixed; /*背景固定*/ } --> </style> 將背景排列在網頁 x 軸，且固定不隨著捲動 background-image : url(image/bg.gif); background-repeat : repeat-x ;/*在 x 軸重複排列，若改為 repeat-y 則在y軸重複排列背景圖*/ background-attachment : fixed;
CSS背景設定 背景固定─將小圖片固定在左下角 <head> CSS背景設定 背景固定─將小圖片固定在左下角 <head> <style type=text/css> <!-- body{ background-image:url(images/bg.gif); /*背景圖存放路徑*/ background-attachment:fixed; /*背景固定*/ background-repeat:no-repeat; /*背景圖不要重複*/ background-position:bottom left; /*置放位置 下面 左邊*/ } --> </style> </head> 說明： 將images資料夾裡的 bg.gif 檔設為背景圖，固定顯示在左下角 用法： 1.將<style>...</style> 複製到 <head> </head> 之間 2.準備一張背景圖，檔名為 bg.jpg 儲存於 images 資料夾中 3.測試效果
CSS背景設定 背景樣式運用-內置框架完全透視 步驟一、先在你的網頁中設定的內置框架加入粗體字的部份 <iframe name="content" frameborder="0" height="400" width="500" scrolling="yes" src="home.html" allowtransparency="true" ></iframe> 步驟二、 複製語法貼於要顯示於內置框架的網頁<head></head>之間 <style type="text/css"> <!-- body{background-color:transparent} --> </style> 另一個做法：複製語法到scroll.css檔 body{ } 之間 background-color:transparent 參考網址：OECSpace http://www.hsiu28.net/style/article_detail.php?id=3
CSS框線設定 框線屬性一覽表 border-top : 1px solid #6699cc; /*上框線 粗細1px 實線 水藍色*/ border-bottom : 1px solid #6699cc; /*下框線*/ border-left : 1px solid #6699cc; /*左框線*/ border-right : 1px solid #6699cc; /*右框線*/ 線條樣式說明： solid /*實線框*/ dotted /*虛線框*/ double /*雙線框*/ groove /*立體內凸框*/ ridge /*立體浮凸框*/ inset /*凹框*/ outset /*凸框*/ 框線樣式簡化寫法: border: 1px solid #6699cc; /*宣告四邊同樣屬性*/ 使用說明 新增CSS樣式，例：tablel.css 在欲使用Table框線設定效果的HTML檔中，切換到程式碼畫面，輸入以下紅色列HTML程式碼。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>CSS框線設定</title> <link href="table.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html> table.css 參考內容 table { border-top-width: thin; /*上框線寬度 細線*/ border-right-width: medium; /*右框線寬度 中等*/ border-bottom-width: thick;/*下框線寬度 粗線*/ border-left-width: 1px;/*左框線寬度 1px*/ border-top-style: dashed;/*上框線樣式 虛線*/ border-right-style: solid;/*右框線樣式 實線*/ border-bottom-style: dotted;/*下框線樣式 點狀線*/ border-left-style: double;/*左框線樣式 雙畫線*/ border-top-color: #33CCFF;/*上框線顏色 */ border-right-color: #CCCC00;/*右框線顏色*/ border-bottom-color: #FF6633;/*下框線顏色*/ border-left-color: #6666CC;/*左框線顏色*/ }
CSS框線設定 選擇功能表「文字／CSS樣式／新增」，選取器類型─標籤（重新定義指定標籤的外觀）。 另存新檔：檔名table.css 設定邊框