網頁設計入門與 Dreamweaver 使用簡介

講師：梁家豪E-Mail: u8855043@ccu.edu.tw

頁框觀念• 頁框組 (Frameset)

– 定義頁框的分割情形及顯示的細部設定• 頁框 (Frame)

– 獨立處在的網頁，只是經由頁框組的整合而顯示在一起

插入頁框• 第一步，按下 Object 功能表上的 Common

• 第二步，切換至 Frame 的項目• 第三步，選擇適合的樣式• 完成後，可以按下【 Window/Frame 】，叫出 Frame 管理員幫助工作，步驟四

• 按住 Frame 管理員的外框，此時即可選擇到 Frameset ，並選擇【 File/Save Frameset 】將其存檔，步驟五

框頁組細部設定• 先點選 Frame 管理員的最外框，以選取到框頁組 (Frameset)– Border ，代表是不是要出現邊框– Border Width ，如果要出現邊框，則出現的寬度為何

– Border Color ，邊框顏色– Column/Row ，代表所占據之寬度或高度

• 1 Relative ，代表其它 Frame 剩餘的部份– RowCol Selection ，代表目前所設定的 Fram

e 為何

【選取 FrameSet 】

【 FrameSet 的細部設定】

框頁細部設定• 按下 Frame 管理員上欲設定的框頁

– Src ，代表此框頁的獨立網頁為何– Scroll ，代表此框頁是否要出現捲軸– Borders ，代表是否要有邊框– No Resize ，是否予許使用者改變大小– Border Color ，邊框色彩– Margin Width/Height ，邊框與網頁之間的留白空間

【選取 Frame 】

【 Frame 的細部設定】

頁框之中連結設定

• 與一般連結設定相近，但選擇完欲連結檔案時，可多設定【 target 】，步驟一– _blank ，代表開一新視窗– _parent ，代表在目前頁框的上一層顯示– _self ，代表在該頁框中顯示– _top ，代表到最上層顯示，即打破頁框設定– leftFrame ，代表在該頁框中顯示

設定預設連結• 步驟二，先將 Object 功能表切換至 Head• 步驟三，選擇【 Insert Base 】• 步驟四，選擇欲預設的 Target• 步驟五，選擇【 Window/Code Inspector 】• 步驟六，將其

<base href=“” target=“leftFrame”>之中的 hef=“” 刪除

Flash Button

• 首先將目前檔案存檔• 步驟一，按下 Object 功能表上的【 Insert Flash

Button 】• 步驟二，依其需求設定

– Sample ，可以將滑鼠移上試試效果– Style ，是不同樣式的 sample

– Button Text ，是要在按鈕上顯示的文字– Font ，是字形– Save As ，則是 Flash 的 SWF 檔案要存放的放置

Flash Text• 先將檔案存檔 ( 若已存檔，可省略此步驟 )• 步驟一，按下 Object 功能表上的【 Insert Flash

Text 】• 步驟二，依其需求設定

– Font ，是欲顯示的字型– Size ，大小– Color ，是文字的顏色– Rollover Color ，是當滑鼠移上去時，變換的顏色– Text ，是欲顯示的文字

• 注意！ Flash Button & Text 目前無法使用中文

事件概念• 所謂的事件是指，使用者的一個動作而引起的效果，常見的事件如下所示– onMouseOver ，當滑鼠移上時– onMouveOut ，當滑鼠移出時– onClick ，當點一下滑鼠時– onLoad ，當網頁載入完成時– onUnLoad ，當使用者離開網頁時– onResize ，當使用者改變視窗大小時

Behavior – 播放背景音樂• 第一步，按右下角的【 Show Behavior 】• 第二步，按下加字鍵• 第三步，選擇【 Play Sound 】• 第四步，選擇適合的 Midi 檔案，按下確定即可

• 若需重覆播放，則需將參數中的 loop 改成 true

Behavior – 跳出對話方塊• 第一步，按下 Behavior 的加號，選擇 Po

pup Message

• 第二步，於 Popup Message 的對話方塊之中填入欲顯示的文字，再按下確定即可

• 按下 F12 預覽，即可看到效果• 第三步，如欲改變發生時機，則需按下向下的鍵頭，選擇不同的事件

Behavior – 跳出新視窗• 第一步，按下 Behavior 的加號後，選擇【 Open

Browser Window 】• 第二步，按其需求設定

– Url to Display ，代表欲顯示的網頁– Window Width / Height ，新視窗的大小– Navigation Toolbar ，是否有導覽列 ( 如上一頁下一頁 )

– Menu Bar ，是否有功能表選單– Location Bar ，是否有輸入位置列– Scrollbar as Needed ，是否要出現捲軸– Status Bar ，是否要出現狀態列– Resize Handles ，是否予許使用者改變大小

Behavior – 設定狀態列文字• 第一步，按下 Behavior 的加號後，選擇【 Set Text/Set Text of Status Bar 】

• 第二步，輸入欲顯示的字• 第三步，按下 F12 預覽，即可看到左下角的狀態列出現，剛才輸入的文字

CSS 樣式表• CSS 的全名是 Cascading Style Sheet ，中文名稱為樣式表。

• Style Sheets 是一群體定義的集合，能夠讓網頁製作者自行定義文件中編排的方式，例如文字字體、字距、行距、大小等。讓段落文字在瀏覽器中能有更整齊、美觀的形式表現出來。

• 目前 IE 及 Netscape都有支援，但支援程序不一

CSS – 連結顏色改變• 第一步，按下右下角【 Show CSS Style 】• 第二步，按下 CSS Style 視窗右下角的【 New Style 】

• 第三步，選擇【 Use CSS Selector 】和【 This Document Only 】– a:active ，代表當按下去時的樣式– a:hove ，代表當滑鼠在連結上的樣式– a:link ，代表一般連結的樣式– a:visited ，代表使用者已連結過的樣式

CSS – 連結顏色改變• 第四步，依需求設定細項

– Font ，代表字型– Color ，代表色彩– Decoration ，代表線條樣式– Background Color ，代表背景顏色– Size ，代表大小

• CSS 依其作用對象不同，還有許多設定，詳細資料，請參考【 Window/Reference 】或市面上 DHTML 的書籍

公佈我的網頁• 首先，先至免費空間申請一個帳號 ( 如果已有網頁空間者，可跳過此步驟 )

• 利用 FTP軟體或 Dreamweaver Site 管理員的 FTP 功能，將檔案依免費空間所提供的帳號密碼上傳至遠端電腦

• 上傳之檔案為當初 Site建立時，所在目錄下的所有檔案