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

網頁設計入門與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，代表目前所設定的Frame為何

【選取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的加號，選擇Popup 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建立時，所在目錄下的所有檔案

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