90學年暑假翠中研習5.doc

Size: px

Start display at page:

Download "90學年暑假翠中研習5.doc"

全崔酆
5 years ago
Views:

1 網頁設計基礎班 (Dreamerwaver4.0) WWW 基本概念網頁 : 就是我們現在準備要做的東西首頁 : 就是當我們進站時, 第一眼看到的網頁網站 : 由一堆網頁所構成的完整內容, 稱為網站 WWW: 則是由一堆網站所連結而成的 HTML 語法 HTML 就是超文件標示語言 (HyperText Markup Language) 主要是在瀏覽器中顯示一份文件的內容它本身並非程式設計, 只不過是標示 (Mark-up), 用來強調及組織一般性的文字 HTML 是由一些標記 (tags) 所構成, 每個標記對瀏覽器下一個特定的指令, 這些指令會告訴瀏覽器如何顯示文件的內容編輯 HTML 不需要多麼高級的軟體配備, 你只要有記事本這項軟體就可以了但記得,HTML 文件的副檔名有些奇怪, 你必須設定為.htm 或是.html 才行例如 : index.html 是一個合法的 HTML 檔名, 但 index.txt 就不是了你可能聽過一些 HTML 的編輯程式如 :HotDog CutrHTML... 等對初學者而言, 使用這些工具並不太好雖然它們的設計目的是幫助你更容易使用 HTML 來工作但不幸的是, 其中有許多會將 HTML 的代碼隱覽起來, 造成學習上的困難那麼, 編輯好的 HTML 檔要怎麼看呢? 你要有瀏覽器, 不論是 IE 或是 NetScape 都行利用瀏覽器中的開啟檔案的功能就可以看到你所編輯的 HTML 檔了 HTML 是由很多的文件標記 ( Document Tags ) 所組成, 這些標記在你建立的每一個 HTML 文件都會用到它們會對文件檔中不同的部份作不同的定義大部分的標記都是成對的 ( 圍堵標記 Container Tags), 即包含起始標記和結束標記如 <HTML> 表示網頁的開始, 而 </HTML> 代表網頁的結束起始標記和結束標記差別就在於前面的斜線符號而己標記本身沒有大小寫的區分, 不過建議是使用大寫字母, 以便在文字編輯器中容易識別一個 HTML 的基本語法範例如下 : <HTML> <HEAD> <TITLE> 我的第一個網頁 </TITLE>

2 </HEAD> <BODY> 空山不見人, 但聞人語響 ; 返景入深林, 復照青苔上 </BODY> </HTML> 首先, 我們必需讓 Web 瀏覽器知道這是一個 HTML 文件, 我們必需加上起始標記 : <HTML> 注意 : 是 <HTML> 而不是 HTML 所有的標記指令都包含了 < 和 > 兩個符號, 這是 HTML 的標記規則, 如果沒有包含括號, 瀏覽器會把這些指令當作文字顯示在網頁中所以, 瀏覽器將 <HTML> 視為標記指令, 但 HTML 則視為一般文字 HTML 的頁首是你輸入網頁標題 (TITLE) 的地方輸入以下的文字, 可以建立 HTML 的頁首標題, 如下例 : <HEAD> <TITLE> 我的第一個網頁 </TITLE> </HEAD> 有了頁首後, 你就要輸入文字圖形等資料作為本文了在 </HEAD> 標記後輸入以下文字可以插入本文部份 : <BODY> </BODY> 在兩個標記之間, 你可以輸入網頁的其它文字或圖形, 如下例 : <BODY> 空山不見人, 但聞人語響 ; 返景入深林, 復照青苔上 </BODY> 最後, 我們必需結束整個 HTML 文件, 因此我們必需加上結束標記 :

3 </HTML> 如此一來, 它便是一個完整的 Web 文件了好站觀摩網頁素材 Dreamwaver 教學綱要壹. 安裝 A.Macromedia Dreamweaver 4 英文版 B. 安裝 Macromedia Dreamweaver 4 中文化界面貳. 啟動 Macromedia Dreamweaver 4 A. 暫時關閉不常用的控制面板, 保留物件視窗與屬性視窗 B. 建立本地電腦的網頁資料夾 ( 檔案總管 ) (ps. 網頁資料夾最好分門別類, 如 HTML 檔 ( 根目錄 ) 圖片檔(images) 聲音檔 (sounds) 資料檔(files) Flash 動畫 (flashs) 等等 ) C. 網頁檔名之命名原則 : 1. 一律以小寫英文或數字或底線 (_) 或連接線 (-) 來命名 ; 2. 檔名最好不要全部用數字 ; 3. 請盡量使用有意義的檔名, 以方便您記憶 ; 4. 不可使用標點或空白鍵 5. 以上原則也適用資料夾名稱參. 規劃您的網站內容 A. 網站設計流程 : 確認主題蒐集並整理資料各網頁內容設計繪製網頁架構草圖製作網頁元件調整網頁架構圖其他相關軟體的運用技術整合網頁上傳更新與維護 B. 首頁 ( 以頁框方式設計 ) 選單網頁( 表格或影像按鈕 ) 標誌網頁( 店面招牌 ) 站

4 主介紹教學理念班級經營班級活動花絮互動園地榮譽榜生活隨筆留言版友站連結歡迎來信等等 C. 附註 : 網站製作 ( 閱讀 ) 方式 1. 線性模式 : 首頁二頁三頁四頁 2. 組織架構模式肆. 設定本地端網站 A. 新增本地端網站 : 網站新增網站網站名稱 ( 自訂 ) 本地根資料夾 (W 磁碟機 ) HTTP 位址 : 帳號 B. 修改本地端網站 : 網站定義網站您的網站名稱編輯伍. 設定首頁 (index.html 或 index.html) 1. 網站網站檔案在本地資料夾窗格中的根目錄 (W 磁碟機 ) 按滑鼠右鍵開新檔案將 [ 未命名.htm] 改成 [index.html] 2. 對準 index.html 按下滑鼠右鍵選 [ 設成首頁 ] 完成設定陸. 網頁文字編輯請先回到編輯視窗, 檔案開啟舊檔 index.html A. 一般打字方式輸入 B. 換行方式 :Enter 鍵換段 ( 段落間可空出一行 ) Shift+Enter 強迫換行 ( 段落間不空行 ) C. 設定文字屬性 ( 屬性視窗 ) 1. 段落格式 2. 文字字體大小色彩套用樣式對齊方式項目符號縮排方式超連結 D. 水平分隔線 1.( 插入水平線 ) 2. 屬性設定 ( 屬性視窗 ): 寬度高度對齊方式與陰影 3. 改變顏色 ( 滑鼠右鍵編輯標籤, 如 hr color=red ) 柒. 美化網頁 ( 背景與圖片的運用 ) A. 全球資訊網抓圖, 如麻辣教室, 滑鼠右鍵快顯功能表另存圖片或背景 B. 加入圖片 ; 插入影像 C. 圖片屬性 : 1. 調整圖片寬與高 2. 與其他物件的對齊方式 3. 加入圖片的文字說明 ( 替代 Alt) 4. 設定圖片外框粗細 5. 如何更換圖片 6. 圖片與其他物件的垂直與水平距離 7. 在網頁中的對齊方式 8. 圖形切換效果 ( 低解析來源 )

5 D. 網頁背景 ( 修改頁面屬性 ) 1. 純色背景 2. 影像背景 3. 浮水印效果 -- 狀態列 body( 右鍵 ) 編輯標籤 ( 在影像背景檔名後加上 bgproperties="fixed") E. 輔助工具 1. 尺規 : 檢視尺規 2. 格線 : 檢視格線捌. 表格製作 A. 插入表格 ( 列與欄 ) 1. 選取表格或儲存格 2. 表格屬性 : 表格名稱寬高 (% 或像素 ) 內距間距對齊邊框背景顏色背景圖像邊框顏色 3. 儲存格屬性 : 寬高 (% 或像素 ) 水平對齊垂直對齊( 格內物件 ) 背景顏色背景圖像邊框顏色不換行頁首 B. 編輯表格與儲存格 1. 調整表格大小 2. 調整表格欄寬與列高 3. 欄與列的增減 4. 欄與列的合併或分隔 5. 設定內距與間距 6. 表格對齊方式 7. 設定表格邊框粗細 8. 設定表格背景顏色或圖像 9. 設定儲存格背景顏色或圖像 C. 在表格中加入物件, 如文字圖像等 1. 設定表格名稱 2. 物件在儲存格中的對齊方式 3. 設定儲存格欄寬與列高 4. 設定文字在儲存格中自動換行或不換行 D. 套用表格樣式 ( 命令表格格式 ) E. 配置式表格 -- 表格的自由創意發揮 1. 切換為 Layout View 版面檢視模式 2.[ 繪製版面表格 ] 按鈕 3.Ctrl+[ 繪製版面表格 ] 按鈕 ---- 繪製數個配置表格 4. 配置式表格屬性 F. 配置儲存格 -- 儲存格的自由創意發揮 1. 加入物件 ( 其餘大致同上 )

6 玖. 超連結與世界相通 A. 方式 : 1. 選定對象 ( 文字或圖片 ) 2. 建立連結 3. 設定連結文字的色彩 a. 修改頁面屬性 b. 命令設定頁面配色 4. 指定連結網頁的目標 (Target): 連結後的顯示 _blank--- 空白視窗 ( 開啟另一瀏覽網頁 ) _parent-- 上一層頁框視窗 _self---- 本身視窗 _top----- 全視窗 B. 建立超連結的對象 1. 文字 2. 圖像 3. 影像按鈕 ( 運用 PhotoImpact) 4. 影像地圖 C. 超連結的目標 1. 內部網頁 2. 外部網站 ( 全球資訊網 ) 3. 檔案連結 : 下載或網頁瀏覽 4. 電子信箱供上網瀏覽者發電子郵件給站主指定的信箱 5. 留言版 6. 加上計數器 -- 先到力行國小申請註冊後, 將 HTML 語法以的方式貼到指定的位置 7. 命名錨點 a. 物件視窗隱藏插入命名錨點輸入錨點名稱 ( 英文小寫與數字 ) b. 建立連結 ( 同一網頁或不同網頁 ) D. 利用 CSS 製作 Rollover ( 滑動 ) 效果 a:active--- 超連結物件被按下時 a:hover---- 滑鼠經過超連結物件時 a:link----- 文字物件被指定為超連結時 a:visited-- 連結物件被選取過時裝飾底線有指定色彩顯示, 保留底線上端線 --- 有指定色彩顯示, 保留底線, 再加一條上端線刪除線 --- 有指定色彩顯示, 保留底線, 中央再加一條刪除線閃爍有指定色彩顯示, 保留底線, 文字並會閃爍

7 無有指定色彩顯示, 去除底線拾. 設計多視窗分割的 Frame A. 介紹頁框 : 把一個網頁頁面分割成數個窗格 B. 設計頁框 1. 開啟頁框屬性面板 -- 視窗頁框或 Shift+F2 2. 新增頁框 : 物件視窗選取 [ 頁框 ] 3. 點選適當的頁框類別 4. 快速新增頁框 :Alt+ 拖曳框架線 5. 刪除頁框 : 將框線拖曳至頁面外 C. 調整頁框屬性 : 由點選 [ 頁框屬性面板 ] 來操作 1. 調整頁框大小 ---- 拖曳頁框線 2. 指定頁框大小 : 點選頁框組在頁框屬性列指定, 輸入數字, 選擇單位為像素百分比或相對 3. 設定頁框框線 : 點選頁框組, 自訂頁框邊框邊框顏色邊框寬度 4. 設定邊框捲軸 (scroll)-- 捲動 : 是 yes 否 no 自動 auto 預設 default 5. 顯示或隱藏頁框框線 D. 設定頁框組標題 E. 儲存頁框組 ( 通常是 index.html) 儲存全部頁框 ( 全部有多少頁框一起存檔 ) 儲存指定頁框 ( 分別自訂檔案儲存 ) F. 將現成網頁置入頁框中 1. 選單網頁 2. 一般網頁標題網頁 G. 在 Frame 中開啟網頁來編輯 H. 指定網頁在哪個頁框出現 (target) 修改選單網頁中的連結, 指定連結後顯示的方式其他建議結合其他影像處理軟體 ( 如 Ulead PhotoImpact) 可自製背景或標題 ( 標幟 ) 或按鈕可使網頁更與眾不同更有特色 DreamWeaver 簡介

8 大家用慣了微軟的產品, 對於 FrontPage 這套軟體可能較有親切感, 也因此較容易上手在小弟的教學過程中, 學生學習 FrontPage 的成就感遠大於 DreamWeaver, 但克服了使用習慣這問題後 ( 白話文叫 " 多練習 " ), 學生反而較容易接受 DreamWeaver 了網頁編輯軟體是幫我們開發網站用的, 可惜的是, 軟體的功能永遠無法涵蓋瀏覽器所能顯示的效果, 也因此, 我們所是必需學習其他的技能, 例如 : HTML VBScript JavaScript ASP... 等知識可喜的是 DreamWeaver 提供了軟體的擴充功能 (Extension), 利用 Extension 我們可以為 DreamWeaver 加上更多製作前之準備工作在開始製作網頁前, 除了要先了解學習軟體的指令使用外, 還要作好各種準備工作, 例如 : 網站的內容規劃資料蒐集整理網站風格設計等..., 都是製作網頁不可缺少的前置工作, 有了這些事先的準備, 才能讓製作的過程更加順利, 使網站內容更充實準備工作一般大致如下 : Step1 確定網站的主題與性質 : 先了解製作這個網站的目的為何? 想要表達何種訊息給瀏覽者? 是娛樂性質的網站嗎? 企業公司網站? 教育資訊網站? 個人網站? 或是電子商務網站等..., 確定網站的主題及所想要表達的內容是很重要的, 這可以使我們在後面製作的過程中, 有一個方向可遵循, 也可以使網站內容不會雜亂無章像大雜燴一樣 Step2 構思網站架構 : 確定了主題後, 依據我們想製作的內容, 來分類出網站中的各個項目, 每個項目下要放什麼內容有哪些延伸的小項目等一連串互相連結的細節要先規劃出來, 它就像是一個由上往下延伸的樹狀架構圖, 例如一個介紹個人作品的網站, 它的架構可以如下圖所示 :

9 一個明確網站架構, 可以使網站內容有系統的呈現出來, 在日後的管理維護上也有非常大的幫助 Step3 資料的蒐集整理 : 根據網站主題及架構, 來蒐集所需的相關資料圖檔, 依架構中的各個項目來作資料上的分類整理 Step4 網站風格的設計 : 一個網站, 如果沒有版面美工設計, 是很難引起瀏覽者的參觀欲望 ; 相反的, 如果網站有著流暢清晰的版面搭配適合的美工風格, 不但可以吸引瀏覽者的目光, 也能使網站增色不少, 提高了網站的價值網站風格一定都要設計唯美使用大量圖檔嗎? 其實不然, 我們可以依網站的主題性質來作為設計考量, 例如 : 1. 網站的性質及想呈現的內容 : 如搜尋引擎網站以文字資訊為主, 排版上就呈現簡明舒暢的風格 ; 如阿貴的動畫網站, 就以活潑的畫面來表達網站的性質 2. 企業風格 : 若是屬於公司企業網站, 則可從企業識別色彩企業標誌企業性質或是企業文化來作為風格設計的考量除此之外, 還有其他可以當作設計的參考因素, 我們可以多看看別入的網站, 來增加設計時的靈感使用介面

10 偏好設定編輯 / 偏好設定 Gengeral: 一般設定定義網站

11 如果你使用 DreamWeaver 來管理網站, 並編輯網頁, 第一步你所要做的是定義一個網站, 通常定義網站可有兩種情況 : 定義新網站 : 從無到有, 新建立一個網站, 建議的方式是 : 你先在硬碟中建立一個新資料夾, 再定義名稱定義舊的網站 : 方式如同定義新網站, 但不用建立資料夾, 因為已經有了, 你只是更改名稱罷了基本上, 在單機上使用 DreamWeaver 並不需要 Web Server 的搭配, 除非你想使用 ASP (Active Server Page) 現在開始學習如何定義一個新網站了假定我們現在要建立一個新的網站, 它是儲存在 D 磁碟機中的 work 這個目錄中, 網站的名稱呢, 就叫作業好了步驟一 : 在你的電腦中的 D 磁碟 ( 不要在 C 磁碟, 因為有還原功能 ) 中建立一個資料夾叫 work( 自訂, 最好是有意義 ), 並啟動 DreamWeaver 步驟二 : 在編輯視窗的狀態列下, 按一下 Show Site 鈕, 啟動網站視窗步驟三 : 在網站視窗中點選 Define Sites

12 步驟四 : 建立資訊 1 設定網站名稱(Site Name) 2 設定本機資料夾名稱(Local Root Folder) 3 按 OK 鈕步驟五 : 直按按 OK 鈕步驟六 : 方才定義的網站已經出現了按 Done 完成設定

13 完成後顯示的畫面新增網頁要在 DreamWeaver 中新增網頁, 通常會有三種方式, 你可以任選一種來達到目的在檔案放置的資料夾上按右鍵, 再選 New File ( 新增檔案 ) 在網站視窗中, 選擇 File( 檔案 )/New File( 新增檔案 ) 或直接按 CTRL + SHIFT + N 來新增檔案現在, 就讓我們建立第一個檔案吧, 檔名就叫 index.html 步驟一 : 在資料夾上按右鍵, 選 New File 步驟二 : 輸入網頁的名稱, 目前是 index.html

14 步驟三 : 檔名輸入完成後, 按一下 Enter 鍵, 完成後如右圖是不是很簡單呢? 再新增加四個網頁吧! 名稱分別為 : ( 自己取容易記的 ) top.htm left.htm right.htm m1.htm 接下來要為網頁作一些設定, 如網頁標題網頁的底色背景圖等 ; 我們直接在畫面空白處按滑鼠右鍵, 點選選單的最下面一個選項 Page Properties 或是點選下拉式選單的 Modify>Page Properties 開啟 Page Properties 的對話框 :

Title Background Image Background 網頁標題網頁背景圖, 點選旁邊的 Browse 按鈕, 直接選取圖檔檔案網頁底色, 預設為白色, 可直接點選顏色方塊, 叫出色盤來選取其它顏色當 Background Image 及 Background 都有設定時, 畫面的順序是先出現 Background 再出現 Background Image Text Links

15 Title Background Image Background 網頁標題網頁背景圖, 點選旁邊的 Browse 按鈕, 直接選取圖檔檔案網頁底色, 預設為白色, 可直接點選顏色方塊, 叫出色盤來選取其它顏色當 Background Image 及 Background 都有設定時, 畫面的順序是先出現 Background 再出現 Background Image Text Links Visited Links Active Links Left Top Margin 文字顏色, 預設為黑色有設定超連結的文字顏色有設定超連結的文字被瀏覽過後的顏色有設定超連結的文字執行中的顏色網頁左方留白, 不設定時網頁畫面的左方會自動留一空白距離 (IE 的語法 ) 網頁上方留白, 不設定時網頁畫面的上方會自動留一空白距離 (IE 的語法 ) Margin Width 網頁留白寬度 (Netscape 的語法 ) Margin Height Document Encoding 網頁留白高度 (Netscape 的語法 ) 文字編碼 Tracing Image 網頁藍圖 Image Transparency 網頁藍圖的透明度

16 Document Folder Site Folder 網頁的文件資料夾網頁的網站資料夾當設定如上圖對話框之內容後, 結果如下 : 網頁編輯視窗的左上角出現了網頁標題, 用瀏覽器瀏覽時, 畫面的左上角也同樣會出現網頁標題而背景圖的部份, 當我們要填入底紋式的背景時, 只要截取一小部份的圖檔, Dreamweaver 會自動將圖檔複製貼滿整個畫面, 如圖所示 :

按功具列的, 選擇 Preview in iexplore (3). 若有將瀏覽器作 Primary Browser 的設定, 則預覽時直接按 F12 鍵即可預覽後會新增一個 TMPxxxxxxxxx.

17 設定好首頁後, 記得 Save 存檔, 再來作其他編輯動作若要預覽此網頁, 有三種方式 : (1). 由下拉式選單選擇 File>Preview in Browser>iexplore 此時預設的預覽瀏覽器為 IE, 若要新增其他的瀏覽器, 則選擇 Edit Browser List, 呼叫出對話框來設定 (2). 按功具列的, 選擇 Preview in iexplore (3). 若有將瀏覽器作 Primary Browser 的設定, 則預覽時直接按 F12 鍵即可預覽後會新增一個 TMPxxxxxxxxx.htm 的檔案, 這些由預覽所產生的檔案, 可直接刪除, 不必將之上傳插入文字在任何的編輯軟體中, 輸入文字都是相當簡單的事, 你只要打打字就行了在 DreamWeaver 中輸入文字時, 如果一行的長度超過目前視窗的顯示寬度, 則這行文字會自動折到下一行, 如下圖, 你不需要按 Enter 鍵這個好處是, 不管瀏覽器調成多大, 網頁的文字都會自動換行, 不會讓瀏覽者使用到捲軸

18 如果你要從另一個段落開始, 你可以將游標放在要分段的位置, 再按下 Enter 鍵, 這時, 上下段落之間會出現空白的一行, 以便我們區別, 如下圖這個動作如同你加了 <P> 這個換行標籤如果只是將文字手動分行, 但卻不想讓上下的文字之間產生空行, 你可以使用 Sfift + Enter 鍵, 如下圖, 這時上下行仍然是同一個段落這個動作如同你加了 <BR> 這個換行標籤

有時, 你可能會用到鍵盤上無法打出的字元, 以目前的瀏覽器而言, 多半會支援一些常用,

.. 等在 DreamWeaver 中, 如果你要輸入這些字元, 你可以執行功能表中的插入

你也可以直接從網頁上文字複製, 再貼到 DreamWeaver 的編輯器中例如 :

你會出現下面左圖的結果 ; 如果你使用編輯 (Edit)/ 貼上 HTML(Paste As Text)

19 有時, 你可能會用到鍵盤上無法打出的字元, 以目前的瀏覽器而言, 多半會支援一些常用, 但無法直接輸入的字元, 例如 : 註冊商標版權聲明... 等在 DreamWeaver 中, 如果你要輸入這些字元, 你可以執行功能表中的插入 (Insert)/ 特殊字元 (Characters) 你會看到一些符號, 插入幾個試試看吧你也可以直接從網頁上文字複製, 再貼到 DreamWeaver 的編輯器中例如 : 你要將右邊網頁中的文字複製到你的編輯器中, 如果你使用編輯 (Edit)/ 貼上 (Paste), 你會出現下面左圖的結果 ; 如果你使用編輯 (Edit)/ 貼上 HTML(Paste As Text) 則會出現下面右圖的結果因為 : 貼上 : 所貼上的文字內含 HTML 語法貼上 HTML : 僅貼上文字,HTML 的標籤則忽略在 DreamWeaver 中複製文字時, 在編輯 (Edit) 功能表下, 這兩項功能是有所不同的 :

拷貝 (Copy): 文字連同內含的 HTML 語法一起複製 : 拷貝 HTML(Copy As Text): 僅複製文字, 但不含 HTML 語法文字樣式屬性如果網頁上的文字都是同樣大小, 同樣的顏色, 閱讀起來一定相當的吃力適當的為文字加上一些樣式的變化, 會使網頁更加的生動文字可供設定的樣式有很多, 例如 : 大小字型色彩.

20 拷貝 (Copy): 文字連同內含的 HTML 語法一起複製 : 拷貝 HTML(Copy As Text): 僅複製文字, 但不含 HTML 語法文字樣式屬性如果網頁上的文字都是同樣大小, 同樣的顏色, 閱讀起來一定相當的吃力適當的為文字加上一些樣式的變化, 會使網頁更加的生動文字可供設定的樣式有很多, 例如 : 大小字型色彩... 等等你可以從功能表中的文字 (Text) 來設定, 如右圖, 你在這功能表下的選項中, 應該可以看到很多的項目另一種較快的方式是由屬性面板中來設定, 如下圖如果你的視窗中沒有看到下圖的面板, 你可以直接執行功能表中的視窗 (Window)/ 內容 (Properties) 來設定往下進行前, 你可以先下載本單元中所會用到的練習檔段落格式文字的內容面板中, Format 這個項目是設定整個段落的文字樣式的, 這個功能如同你執行功能表中的文字 / 段落格式一般常用的有標題一(Heading1) ~ 標題六 (Heading6), 這些設定如同你使用了 HTML 中的 <H1>...<H6> 等標籤這些功能多半用來設定標題樣式, 可使文字加粗並改變大小要設定段落樣式, 只要將插入點移到段落中的任一處, 再從內容視窗中的 Format 中選一個樣式即可

設定字型網頁上的中文字型多半是細明體, 如果你想用特殊的字型當然也可以, 但除非瀏覽者的系統中也有和你相同的字型,

你必須先將文字選取, 再從內容視窗中來更改這如同你設定 HTML 中的 <Font Face="XXX">

21 設定字型網頁上的中文字型多半是細明體, 如果你想用特殊的字型當然也可以, 但除非瀏覽者的系統中也有和你相同的字型, 否則, 他們也是看不到你精心挑選的字型的但如果字數不多的話, 你可以用圖片來解決這問題如果你想更改網頁的字型, 你必須先將文字選取, 再從內容視窗中來更改這如同你設定 HTML 中的 <Font Face="XXX"> 這個標籤但 DreamWeaver 中內建的中文字型並不多, 你必須先定義字型步驟如下 : 步驟一 : 從內容視窗中選擇 Edit Font List... 步驟二 : 從 Available Fonts 選項中挑選字型, 這是你系統中所安裝過的字型 ; 再按一下 << 按鈕, 你就會發現所選的字型出現在 Font List 中了按確定鈕完成

22 以後, 你就可以從這個列表中來設定字型了一種字型只要做一次就行了設定新字型時, 只要將文字選取, 再選擇合適的字型即可文字大小使用內容視窗中的 Size 選項可以設定文字的大小, 共有 7 個等級, 數字愈小, 文字也就愈小 ; 如同你加上了 <HTML> 中的 <Font Size=?> 這個標籤以一般的設計來說, 文字多半設計成 3 號 (DreamWeaver 中內定 ) 或 2 號字至於選項中的 +2 是代表比預設的基準字大 2 號, -2 的道理相同設定字型時, 你可以先將文字選取, 再更改 Size 中的值即可這個設定可適用於段落中的某些字的大小如果你是要設定標題, 用 Format 這個選項可能較為適用

文字色彩如果你想為文字增加一些色彩, 你可以使用內容面板中的 Text Color 這個方塊這如同你設定 <Font Color="xxxxxx"> 這個標籤設定時, 你必須先選取文字, 再設定 Text Color 中的顏色先不要關掉你現在使用的檔案, 下個單元我們再繼續文字格式的設定再談文字樣式屬性

23 文字色彩如果你想為文字增加一些色彩, 你可以使用內容面板中的 Text Color 這個方塊這如同你設定 <Font Color="xxxxxx"> 這個標籤設定時, 你必須先選取文字, 再設定 Text Color 中的顏色先不要關掉你現在使用的檔案, 下個單元我們再繼續文字格式的設定再談文字樣式屬性以下的面板是我們上一個單元中所使用的面板, 這個單元我們繼續上一個單元, 繼續來取文字的樣式設定粗體斜體及其他粗體斜體字是相當常見的樣式設定, 相當於 HTML 中的 <B> 和 <I> 這兩個標籤, 設定時, 你必須先選取文字, 再按相對的按鈕其實你可以在選取文字後, 再執行功能表中的文字 (Text)/ 樣式 (Style), 這裏面有更多的樣式可供選擇

24 對齊方式段落中的對齊方式有靠左, 置中, 和靠右三種 ; 相較於 HTML 語法, 如同你設定了 <P ALIGN="Center"> 等標籤將游標置於段落中, 再按適當的按鈕即可項目符號與編號項目符號是逐條式的文句排列, 可以產生出類似齊單的效果, 可以幫助瀏覽者更容易找到重點如同項目符號的設定, 編號的設定方式很類似你可以選取文字, 按適當的按鈕即可, 如要解除設定, 再按一次按鈕即可

文字縮排文字縮排可造成該段的文字往內縮的效果, 如同你下了一個 <BLOCKQUOTE> 的標籤

一般而言, 適時的在網頁中加上水平線的設定, 可以加強你網頁內容的區隔, 讓瀏覽者不致遺漏一些重點

(Insert)/ 水平線 (Horizontal Line) 即可這個指令如同你設定 <HR>

25 文字縮排文字縮排可造成該段的文字往內縮的效果, 如同你下了一個 <BLOCKQUOTE> 的標籤設定縮排時只要將游標置於段落中即可, 如果要縮排兩次, 按兩下增加縮排的按鈕即可水平線一般而言, 適時的在網頁中加上水平線的設定, 可以加強你網頁內容的區隔, 讓瀏覽者不致遺漏一些重點在網頁中加上水平線的設定很簡單, 只要將游標移到要加水平線的地方, 再執行功能表中的插入 (Insert)/ 水平線 (Horizontal Line) 即可這個指令如同你設定 <HR> 標籤當你在水平線上按一下時 ( 選取水平線 ), 內容面板會切換成水平線的設定模式, 你可以用來改變水平線的一些屬性設定 :

圖檔可顯示全彩圖片, 採用破壞性壓縮法使圖檔檔案變小, 壓縮的愈多, 檔案愈小, 但圖片失真的情況也愈嚴重此種圖檔格式多適用於照片影像有羽化效果的漸層或是顏色很多的圖片 GIF 圖檔最多只能顯示 256 色, 它是以減色的方式來使檔案變小, 而不是用破壞性壓縮法,

26 水平線的面板的設定值如下 : 其中單位的設定最好使用 %, 如此的設定可使水平線依不同的瀏覽器的大小來適時的調整寬度 ; 例如 : 你可以設定 W 為 90, 代表水平線的寬度永遠佔視窗的 90% 一般你使用這種方式設定的水平線是灰色的, 但你可以自行來加上水平線的顏色你只要按下面版中右邊的 Quick Edit Tag 這個按鈕, 再填入 Color = "xxxxxx" 的屬性就可以了但你要在瀏覽器中瀏覽才看得到插入圖片一般網路上所使用的圖檔大多為 JPG 及 GIF 格式, 這兩種格式的圖檔都有檔案小以方便網路傳輸下載的優點 JPG 圖檔可顯示全彩圖片, 採用破壞性壓縮法使圖檔檔案變小, 壓縮的愈多, 檔案愈小, 但圖片失真的情況也愈嚴重此種圖檔格式多適用於照片影像有羽化效果的漸層或是顏色很多的圖片 GIF 圖檔最多只能顯示 256 色, 它是以減色的方式來使檔案變小, 而不是用破壞性壓縮法, 因此畫面不會失真適用於顏色少沒有羽化漸層的圖檔, 如線條按鈕商標卡通圖畫等圖案另外,GIF 圖檔也可以製作動畫圖檔及去背景色的透明圖, 這是 JPG 圖檔無法作到的因此在選擇圖檔的格式時, 可以針對圖案本身的特性及傳輸速度來考慮輸出何種格式插入圖片及相關設定說明插入圖片步驟 :

Step1 先在影像處理軟體或繪圖軟體處理好圖檔, 在 Site 下的網頁資料夾中建立一個 image 的資料夾, 並將檔案存放在此資料夾裡, 如果沒有先將圖檔放在 Site 的資料夾下就直接插入圖檔,Dreamweaver 會出現對話框, 要求先將圖檔複製到 Site 之下 Step2 在一般物件 ( Common ) 的物件面板 (Object ) 上點選圖示, 或是點選下拉式選單的

27 Step1 先在影像處理軟體或繪圖軟體處理好圖檔, 在 Site 下的網頁資料夾中建立一個 image 的資料夾, 並將檔案存放在此資料夾裡, 如果沒有先將圖檔放在 Site 的資料夾下就直接插入圖檔,Dreamweaver 會出現對話框, 要求先將圖檔複製到 Site 之下 Step2 在一般物件 ( Common ) 的物件面板 (Object ) 上點選圖示, 或是點選下拉式選單的 Insert>Image Step3 出現 Select Image Source 對話框 : 點選圖檔後按 Select, 圖片就會被會置入網頁畫面中在插入圖檔時, 為必免網頁上傳後發生掉圖現象, 有下列幾點要注意 : (1) 圖檔要存放在 Site 下的網頁資料夾中 (2) 圖檔要以英文命名 (3) 新開啟的網頁要先存檔後再來插入圖檔作編輯的動作如果沒有先存檔就插入圖檔, 則會出現如下之對話框, 再點選你要插入的來源即可 Dreamweaver 會將圖檔路徑轉為 file:// 的路徑, 而不是相對路徑 ( 路徑的的說明將在超連結的課程中有介紹 ) 內容設定介紹 : 選取圖片後, 內容設定面板會如下所示 :

面板其他指令說明 : Align 圖片與文字的相關位置可以選擇圖片對齊文字的方式, 有 Browser Default Baseline Top Middle Bottom Text Top Absolute Middle Absolute Bottom Left Right 注意 : 選取圖案後, 會出現三個小黑點, 直接拖曳可改變尺寸大小, 但是影像會變的不清楚,

28 面板其他指令說明 : Align 圖片與文字的相關位置可以選擇圖片對齊文字的方式, 有 Browser Default Baseline Top Middle Bottom Text Top Absolute Middle Absolute Bottom Left Right 注意 : 選取圖案後, 會出現三個小黑點, 直接拖曳可改變尺寸大小, 但是影像會變的不清楚, 最好是在外部的影像處理軟體修改存檔後, 用 Reset Size 指令更新尺寸, 才能保持影像的清晰度變換影像你也許在網頁上看過這樣的按鈕, 當顯示時是一種圖片, 滑鼠移過時又是一種圖片, 這是變換影像 (RollOver Image) 的技巧, 當然, 你也可以加上超連結, 試試右圖, 但這沒有加上超連結技術上,rollover 是由一個 <img> 這個標籤的 src 屬性所控制的, 藉由 src 值的改變, 圖像就會由一個圖像轉變為另一個圖像要製作變換影像, 每一個影像須要兩張圖片 ; 例如, 以上一個範例而言, 平時顯示時是 up.gif 這個影像, 而滑鼠移上去時, 是 rollover.gif 這個影像步驟如下 : 步驟一 : 執行功能表上插入 / 互動式影像 / 滑鼠變換影像 ( 或工具箱上 Insert Rollover Image 工具 ) 步驟二 : 設定影像檔及連結網址, 完成後按 OK 鈕

29 設定時, 最好勾選預先載入滑鼠變換影像這個選項, 因為它會預先下載變換後的圖片, 如果不勾選, 可能會造成在 rollover 時, 有延遲的現像產生建立超連結何謂超連結? 從一個網頁連結到另一個網頁或是網站就是超連結在設定超連結之前, 我們必須先了解超連結的路徑觀念, 才能避免網頁上傳後, 發生無法顯示網頁或是掉圖的情況路徑觀念 : 相對路徑 : 當我們在 Site 之下插入圖檔或是設定超連結時, 可以看到內容設定面板的 Src 欄 ( 插入圖檔時 ), 及 Link 欄 ( 設定連結時 ) 的檔案路徑為 " 資料夾名稱 / 檔名 " 或是 ".. / 資料夾名稱 / 檔名 ", 例如 (images/title.gif 或../images) 此種檔案路徑都屬於相對路徑, 由於所連結的檔案全都建立在 Site 之下, 所以在網頁上傳至伺服器後, 一般瀏覽者仍能藉由這些路徑讀取到所連結的檔案及網頁因此, 相對路徑是我們製作網頁時所採用的路徑方式絕對路徑 : 和相對路徑不同的是, 絕對路徑是一個完整的路徑, 例如下列兩種路徑 : 網址路徑完整的網址路徑, 如當我們要連結至別人的網站時, 就要輸入網址路徑但是採用網址路徑有一個缺點, 就是當網址有改變時, 連結就會錯誤, 而無法顯示網頁或檔案

30 所以如果是要插入圖檔或設定網頁連結, 儘量採用相對路徑, 而不要採用網址路徑本機路徑如果沒有建立 Site, 或是沒有把連結檔案置於 Site 之下, 就直接設定超連結或插入圖檔, 路徑就會變成 " file:// 本機電腦名稱 / 資料夾名稱 / 檔名 " 這樣的路徑稱為本機路徑, 當網頁上傳後, 只有本機才能讀取檔案和網頁, 其他的瀏覽者是看不到網頁的文字與圖片之超連結設定文字超連結 : Step1 將要超連結文字選取 Step2 點選內容設定面板的 Link 右側的圖示 Step3 出現選擇檔案的對話框, 點選要連結的檔案後, 按 Select Step4 文字將呈現連結狀態, 且 Link 欄也出現被連結的檔案名稱若要連結至其他網站, 在選取文字後, 於 Link 欄直接輸入網址即可下載檔案之超連結 Step1 選取文字或圖片 Step2 點選功能面板的 Link 右側的, 選擇要下載的檔案, 方法和文字圖片超連結相同 (1). 要連結下載的檔案名稱最好以英文命名 (2). 要連結下載的檔案要放在 Site 的資料夾下之超連結 : 方法一 Step1 點選物件面板的圖示, 或是點選下拉式選單的 Insert> Link

31 Step2 會出現 Insert Link 的對話框, 我們在 Text 欄輸入連結的文字 ; 在欄輸入帳號 Step3 設定完後, 可以看到內容設定面板的 Link 欄出現的連結帳號方法二我們也可以先選取文字再設定連結 ; 當我們使用圖案來設定連結時, 就要採用這種方式 Step 點選圖片, 在內容設定面板的 Link 欄輸入 " mailto: 帳號 ", 也可以在 Alt 欄加上中文註解, 如圖所示 : 內部連結 ( 錨點建立 ) 超連結是 HTML 文件中非常重要的一項功能, 藉此我們可以將一些相關的文件連結起來, 使它們能夠彼此參考另外, 我們也可以利用超連結的功能連上其他網址上的網頁, 而達到網網相連的目的基本的文字連結製作方式可以在超連結的教學檔案中找到, 圖片連結的內容你也可以參考一下這個單元中首先登場的是內容連結當 HTML 文件內容很長時, 我們可在文件的前方建立索引以方便使用者查詢, 這時我們可以藉由內部連結的方式讓使用者快速地前往相關的部份底下有現成的範例, 先連連看 : 要建立內部連結前, 你必須在要到達的位置先建立錨點 (Anchor) 建立的步驟如下 :

32 步驟一 : 將游標置於連結目的地的文字之前, 執行功能表中的插入 / 隱藏 / 命名錨點步驟二 : 輸入錨點名稱, 完成後, 按下確定鈕完成後, 剛才游標所在的位置會出現如右圖的標記完成錨點的設定後, 你就可以設定內容連結了, 步驟如下 :

瀏覽器會使用前一個畫面的頁框來顯示超連結所設定的網頁 ; 如果沒有前一個畫面, 則使用整頁顯示內容加入表格表格在一般文書處理上是很常應用的, 網頁的使用則更加廣泛

33 步驟一 : 選取文字, 在面板上輸入錨點的名稱, 記得, 錨名稱前要加上 # 好了, 你可以儲存檔案, 並且測試一下連結了 _SELF: 瀏覽噞會使用同一個頁框來顯示超連結所設定的網頁此為預設值 _TOP: 瀏覽器會清除所有的頁框, 然後使用整個瀏覽器來顯示超連結所設定的網頁 _BLANK: 瀏覽器會開啟另一個新的瀏覽器視窗來顯示超連結所設定的網頁 _PARENT: 瀏覽器會使用前一個畫面的頁框來顯示超連結所設定的網頁 ; 如果沒有前一個畫面, 則使用整頁顯示內容加入表格表格在一般文書處理上是很常應用的, 網頁的使用則更加廣泛以往很多設計師利用表格來規畫網頁, 即使目前新的技術如 DTHML 的普及, 表格仍不失為一種能兼顧瀏覽器版本和規劃網頁版面的方式首先, 我們先了解一下表格各部份的名稱 : 你可以使用 Object 面板來加上表格, 步驟如下 :

但如非必要, 建議以百分比較佳, 因為建立的表格, 會隨著視窗的大小, 自動的更改表格的大小設定視窗中, 內距指的是儲存格內文字和邊框之間的距離, 而間距指的是儲存格之間的空隙, 不可搞亂

34 步驟一 : 按 Object 面板上的插入表格鈕, 在插入表格的視窗中, 設定表格的大小, 完成後, 再按確定鈕完成後如左圖其中, 如果你的編輯視窗中, 看不到 Objects 面板的話, 你可以執行功能表上的視窗 / 面板, 或直接按 Ctrl + F2 來啟動面板在設定表格時, 寬度這個設定你可以選用百分比 (Percent), 或是像素 (Pixel) 為單位, 但如非必要, 建議以百分比較佳, 因為建立的表格, 會隨著視窗的大小, 自動的更改表格的大小設定視窗中, 內距指的是儲存格內文字和邊框之間的距離, 而間距指的是儲存格之間的空隙, 不可搞亂框架概念切割框架 (Frame, 頁框 ) 是網頁中常使用的效果, 如果你不清楚框架作用, 拉拉本頁右邊的捲軸, 有沒有發現只有內容的部分有捲動功能, 而上方標題及左方瀏覽列是固定不動的, 這就是框架囉

35 以本站的框架樣式為例, 如同右圖, 一共分為 top, left, right 三個框架, 各為一個網頁檔然而我們要如何告訴瀏覽器他們的排放位置及尺寸大小等資訊呢? 此時就需要第四個網頁檔來告訴電腦如何切割框架, 這個檔案在瀏覽器上是看不到的, 默默的安排框架的展現方式 left.htm top.htm right.htm 依此類推假設要切 5 個框架, 就有 6 個 html 檔, 其中一個檔案是用來告訴電腦要如何切割的一個頁面不要切太多框架 ( 不要超過 4 個 ), 否則顯示內容的區域就太小了,.. 網頁的版面可是粉珍貴的建立頁框這是一種網頁上常見的技術, 基本上, 頁框是將一個完整的視窗切割成不同的區域, 以便放置不同的網頁, 這就是頁框以目前你看到的視窗而言, 上方的標題部份是一個頁框, 左邊的選單是一個頁框, 目前的內容視窗也是一個頁框, 共有三個檔案, 連同目前的框架組在內, 你現在看到的畫面是由四個檔案所構成的一般而言, 我們會先完成頁框內所需要的檔案, 再將檔案組合成框架組但這並沒有強制的規定, 你也可以先完成框架組, 再編輯頁框的內容假定我們要完成如同目前視窗的頁框組, 你可以依照以下的順序完成 : 的網站上, 那麼, 就要在連結面板上直接註名網址或檔案名稱了, 如下圖 : 在連結面板的 Target 選項中, 是設定連結網頁出現的地方, 內定的選項有 :

36 _SELF: 瀏覽噞會使用同一個頁框來顯示超連結所設定的網頁此為預設值 _TOP: 瀏覽器會清除所有的頁框, 然後使用整個瀏覽器來顯示超連結所設定的網頁 _BLANK: 瀏覽器會開啟另一個新的瀏覽器視窗來顯示超連結所設定的網頁 _PARENT: 瀏覽器會使用前一個畫面的頁框來顯示超連結所設定的網頁 ; 如果沒有前一個畫面, 則使用整頁顯示內容建立頁框 - 實作現在, 我們開始建立一個框架組了, 架構如下圖 : 先新建完成的三個檔案分別是 :Top.htm,Left.htm,Right.htm, 然後在其內容分別打入標題選單首頁 ( 主頁 ) 我們要利用這三個檔案來完成一個新的框架組, 步驟如下 : 步驟一 :View > Frame Borders. 顯示框架開啟工具箱 (Window/ Objects), 屬性面板 (Window / Properties), 框架控制面板 (Window / Frames), 關閉其他不用的面板工具箱切換到 Frames 工具 > 選擇其一

現在, 我們要指定各框架的網頁了, 首先, 你要先將頁框的設定視窗找出來, 你可以執行功能表中的

htm, 步驟就完成了步驟三之一 : 依次指定完成下方左邊 (left.htm) 和右邊 (right.

37 現在, 我們要指定各框架的網頁了, 首先, 你要先將頁框的設定視窗找出來, 你可以執行功能表中的視窗 / 頁框, 就可以看到右邊的小視窗了步驟三 : 指定檔案 : 選取所要指定檔案的頁框, 頁框名字為 right 指定檔案 right.htm., 頁框名字為 left 指定檔案 left.htm, 頁框名字為 top 指定檔案 top.htm, 步驟就完成了步驟三之一 : 依次指定完成下方左邊 (left.htm) 和右邊 (right.htm) 的檔案, 上面 (top.hrm) 完成圖如右當你將頁框組儲存之後, 如果以後要更改各頁框組的內容, 你可以直接執行檔案 / 全部儲存, 將更改後的內容一次儲存完成

在檢視面板的 Frame Name 的選項中輸入頁框的名稱, 例如 :top 請繼續將其他的兩個頁框命名下左 :left 下右 :right

38 頁框的連結頁框最迷人的地方除了它能在同一個瀏覽視窗中同時顯示不同檔案的內容, 更好用的是你可以使用超連結的效果, 將不同的網頁顯示在你所指定的頁框中如果你要利用這項功能, 你必須將頁框指定一個名稱, 再製作超連結, 而超連結的目的地, 則設定為頁框的名稱將頁框命名 1 選取你所要命名的頁框 2 在檢視面板的 Frame Name 的選項中輸入頁框的名稱, 例如 :top 請繼續將其他的兩個頁框命名下左 :left 下右 :right 當你設定好頁框的名稱後, 你就可以使用這個名稱來指定連結的目的了頁框的設定再看一次上個單元完成的例子 index.htm, 你可以自由的利用滑鼠在瀏覽器中改變頁框的大小

你可以試試, 看一看結果, 再用功能表中的編輯 / 復原就可以了頁框大小的控制你是可以設定頁框不可以自行調整大小的, 在頁框

39 頁框顯示大小的調整首先, 我們要練習調整頁框的大小, 在 DreamWeaver 的編輯視窗中, 你可以直接利用滑鼠來拖曳頁框的邊界, 但請注意, 你不可以將頁框的邊界拖曳到整個視窗的邊界中, 這樣就變成了刪除頁框的功能, 你可以試試, 看一看結果, 再用功能表中的編輯 / 復原就可以了頁框大小的控制你是可以設定頁框不可以自行調整大小的, 在頁框的控制面板上選取所要設定的頁框, 再勾選檢視面板的 No Resize 的選項, 我只勾選了上方的頁框, 看一下效果, 你不能更改上邊頁框的高度了, 只能更改左右兩邊的頁框寬度

一定不顯示捲軸 Auto: 根據網頁的內容而決定是否要顯示捲軸 Default: 根據瀏覽器來使用捲軸邊框顏色的設定

40 捲軸的設定基本上, 瀏覽器會根據你網頁的內容來決定是否應該出現捲軸, 但你可以自行設定捲軸的出現與否選取了要設定的框架後, 你可以設定檢視視窗中的 Scroll 選項, 設定值如 : Yes: 強迫顯示捲軸 No: 一定不顯示捲軸 Auto: 根據網頁的內容而決定是否要顯示捲軸 Default: 根據瀏覽器來使用捲軸邊框顏色的設定你可以更改邊框的顏色, 雖然在實際應用上很少人如此做選取了要設定的框架後, 你可以設定檢視視窗中的 Border Colorl 選項

邊框的顯示大部份的應用上, 我們的網頁都會將邊框的寬度設定為不顯示, 尤其是你有一整張圖片要顯示在不同的頁框時選取了要設定的框架後, 你可以設定檢視視窗中的 Borders 選項 Yes: 將邊框以 3D 的方式顯示 No: 讓邊框以單一顏色顯示在 Target 的設定中, 尚有 _blank,_self,_top,_parent, 等選項, 各設定值的涵義請參照建立頁框的內容建立圖層

41 邊框的顯示大部份的應用上, 我們的網頁都會將邊框的寬度設定為不顯示, 尤其是你有一整張圖片要顯示在不同的頁框時選取了要設定的框架後, 你可以設定檢視視窗中的 Borders 選項 Yes: 將邊框以 3D 的方式顯示 No: 讓邊框以單一顏色顯示在 Target 的設定中, 尚有 _blank,_self,_top,_parent, 等選項, 各設定值的涵義請參照建立頁框的內容建立圖層有了圖層之後, 排版就更加 easy 了, 什麼是圖層呢? 簡單的說就是網頁中的網頁, 任何物件都可以置入, 特點是除了平面的 x.y 座標之外, 還有 z 座標, 物件就有前後順序之分了, 而且可以任意拖曳, 非常方便不過還是有缺點的, 例如圖層位置可能會偏移, 舊版瀏覽器不支援... 目前有兩種標準,CSS 與 Netscape 圖層圖層標準 CSS (Dreamweaver 預設 ) Netscape 定義機構 W3C Netscape 標籤 <DIV>, <SPAN> <LAYER>, <ILAYER> 瀏. 覽. 器 IE 和 Netscape4.0 版以上 Netscape4.0 以上 1. 工具箱上拖拉出圖層範圍 2. 圖層屬性

42 Z 軸前後順序, 數字愈小愈底層 3. 圖層控制面板 : Window > Layers 4. 搬移圖層點一下圖層外框, 滑鼠移至外框上, 出現移動圖示 > 按下 > 拖曳或直接按住圖層左上方的井字號 > 拖曳表單多數免費空間皆不支援 CGI 或 ASP, 沒關係, 可以做一個表單 CGI(Common Gateway Interface), ASP(Active Server Pages) 不在本課程範圍內 1. 工具箱切換到 "Forms" 工具 > 按下 " 插入表單工具 ", 出現紅色虛線代表表單範圍, 表單必須作在此範圍內才有效果 2. 插入表格, 將表單內容做在表格內, 放上合適的表單工具項目並依序做好設定 3. 按一下紅色虛線 > 出現表單屬性面板,Action 填上 mailto: 你的信箱, 表單結果就會送到你的信箱 3. 開啟原始碼檢視畫面 > 在 "POST" 之後加上 enctype="text/plain" > 完成如下的表單

43 姓名性別女生男生 ( 單選 ) 興趣音樂舞蹈美食職業資訊業 ( 下拉選單 ) ( 複選 ) 旅遊電影睡眠信箱留言送出重填訪客填完表單寄出後, 你收到的訊息長這個樣子 : 姓名 =Sara 性別 =girl 興趣 =music 興趣 =food 興趣 =travel 興趣 =movie 職業 = 資訊業留言 = 小野麗莎還不錯聽喔! mail=sara123@ms11.url.com.tw Submit= 送出網頁特效 (Javascript.Java Applet) 跑馬燈 ( 將以下的這段 javascript 語法 copy 到 right.htm 的 <BODY></BODY> 間 <SCRIPT language=javascript> <!-- function scroll(seed) { var m1 = " 歡迎光臨 LUU 老師的家 "

44 var m2 = " 請使用 IE 4.0 以上版本瀏覽, 謝謝! " var msg=m1+m2; var out = " "; var c = 1; if (seed > 100) { seed--; var cmd="scroll(" + seed + ")"; timertwo=window.settimeout(cmd,100); } else if (seed <= 100 && seed > 0) { for (c=0 ; c < seed ; c++) { out+=" "; } out+=msg; seed--; var cmd="scroll(" + seed + ")"; window.status=out; timertwo=window.settimeout(cmd,100); } else if (seed <= 0) { if (-seed < msg.length) { out+=msg.substring(-seed,msg.length); seed--;

45 var cmd="scroll(" + seed + ")"; window.status=out; timertwo=window.settimeout(cmd,100); } else { window.status=" "; timertwo=window.settimeout("scroll(100)",7); } } } timerone=window.settimeout('scroll(100)',50); //--> </SCRIPT> 搜尋引擎及下拉式選單好站連結將老師分享的語法及圖片製作成一個網頁其他特效請參考

p.2 1 <HTML> 2 3 <HEAD> 4 <TITLE> </TITLE> 5 </HEAD> 6 7 <BODY> 8 <H3><B> </B></H3> 9 <H4><I> </I></H4> 10 </BODY> </HTML> 1. HTML 1. 2.

p.2 1 <HTML> 2 3 <HEAD> 4 <TITLE> </TITLE> 5 </HEAD> 6 7 <BODY> 8 <H3><B> </B></H3> 9 <H4><I> </I></H4> 10 </BODY> </HTML> 1. HTML 1. 2. 2005-06 p.1 HTML HyperText Mark-up Language 1. HTML Logo, Pascal, C++, Java HTML 2. HTML (tag) 3. HTML 4. HTML 1. HTML 2. 3. FTP HTML HTML html 1. html html html cutehtmleasyhtml 2. wyswyg (What you see