第一篇:Dreamweaver教案
第一課 軟件簡(jiǎn)介與設(shè)置 1.1課程介紹 本課程主要內(nèi)容
①內(nèi)容提要/學(xué)習(xí)目標(biāo) ②軟件演示 ③實(shí)例操作步驟
本課程的三個(gè)特色欄目
①網(wǎng)頁(yè)色彩搭配; ②HTML基礎(chǔ);
③名詞解釋
1.2(軟件)基礎(chǔ)知識(shí) 內(nèi)容提要:
①起始頁(yè)的使用及相關(guān)設(shè)置;
②軟件界面概覽(菜單,工具,面板等); ③“插入”工具欄顯示模式的切換; ④文檔窗口的工具欄和狀態(tài)欄; ⑤如何設(shè)置,存儲(chǔ)和管理界面布局。
學(xué)習(xí)目標(biāo):
①了解Dreamweaver軟件的作用,基本界面布局,以及各功能區(qū)的應(yīng)用范圍;
②了解控制軟件界面和文檔的基本方法。
第二篇:Dreamweaver教案補(bǔ)充
1、Dreamweaver 這是Macromedia公司的出品的一款“所見即所得”的網(wǎng)頁(yè)編輯工具。與 Frontpage不同,Deamweaver采用的是Mac機(jī)浮動(dòng)面版的設(shè)計(jì)風(fēng)格,對(duì)于初學(xué)者來說可能會(huì)感到不適應(yīng)。但當(dāng)你習(xí)慣了其操作方式后,就會(huì)發(fā)現(xiàn)Dreamweaver的直觀性與高效性是Frontpage所無法比擬的。
Dreamweaver對(duì)于DHTML(動(dòng)態(tài)網(wǎng)頁(yè))的支持特別好,可以輕而易舉地做出很多眩目的互動(dòng)頁(yè)面特效。插件式的程序設(shè)計(jì)使得其功能可以無限的擴(kuò)展。Dreamweaver與Flash、Firework 并稱為 Macromedia的網(wǎng)頁(yè)制作三劍客,由于是同一公司的產(chǎn)品,因而在功能上有著一個(gè)非常緊密的結(jié)合。因此,說Dreamweaver是高級(jí)網(wǎng)頁(yè)制作的首選并不為過。
2、Dreamweaver 8 的功能
Dreamweaver 可以完全自定義。您可以創(chuàng)建您自己的對(duì)象和命令,修改快捷鍵,甚至編寫 JavaScript 代碼,用新的行為、屬性檢查器和站點(diǎn)報(bào)告來擴(kuò)展 Dreamweaver 的功能。
Dreamweaver 8 包括許多新增功能,使您只需花費(fèi)最少的時(shí)間和精力便可生成 Web 站點(diǎn)和應(yīng)用程序。Dreamweaver 使復(fù)雜的技術(shù)變得簡(jiǎn)單而方便,以幫助您達(dá)到事半功倍的效果。
下面是 Dreamweaver 8 中的一些主要新增功能: “縮放”工具和輔助線 可視化 XML 數(shù)據(jù)綁定 新的 CSS 樣式面板 CSS 布局的可視化 代碼折疊 “編碼”工具欄 后臺(tái)文件傳輸
“插入 Flash 視頻”命令
3、設(shè)計(jì)網(wǎng)站的基本步驟。
(1)網(wǎng)站的規(guī)劃與設(shè)計(jì)。首先確定網(wǎng)站的方向和功能,然后是申請(qǐng)便于記憶的域名和租用穩(wěn)定的空間,接著收集相關(guān)資料,最后將整個(gè)網(wǎng)站的結(jié)構(gòu)畫成結(jié)構(gòu)圖。
(2)布局與編排網(wǎng)頁(yè)。在網(wǎng)頁(yè)布局的過程中,應(yīng)該遵循平衡、對(duì)比、空白等原則。在設(shè)計(jì)網(wǎng)頁(yè)時(shí)需要考慮網(wǎng)頁(yè)的主題、網(wǎng)頁(yè)的命名、網(wǎng)站的標(biāo)志、色彩的搭配、字體的選擇等問題。
(3)填充網(wǎng)頁(yè)內(nèi)容。輸入文字和其它網(wǎng)頁(yè)元素,比如聲音、動(dòng)畫、圖像和其它形式的媒體,以便使網(wǎng)頁(yè)內(nèi)容更加充實(shí)。
(4)建立動(dòng)態(tài)網(wǎng)站。動(dòng)態(tài)網(wǎng)站是目前最流行的Web發(fā)展趨勢(shì),建立動(dòng)態(tài)站點(diǎn)需要為網(wǎng)頁(yè)加入Web應(yīng)用程序并實(shí)現(xiàn)與數(shù)據(jù)庫(kù)的連接。
(5)測(cè)試和發(fā)布站點(diǎn)。在發(fā)布Web站點(diǎn)之前,用戶應(yīng)該確認(rèn)所有文本和圖形都放在正確的位置,且所有的鏈接都能操作正確。測(cè)試Web站點(diǎn)的一種方法是通過檢查內(nèi)部和外部的鏈接來確認(rèn)目標(biāo)文件是否存在。
完成測(cè)試以后,根據(jù)服務(wù)商提供的資料,用戶可以將站點(diǎn)發(fā)布到服務(wù)器上,并對(duì)站點(diǎn)進(jìn)行定期更新,以保證站點(diǎn)內(nèi)容新穎。
4、網(wǎng)頁(yè)設(shè)計(jì)的基本理念。
(1)下載速度問題,下載響應(yīng)速度越快越好。
(2)能適應(yīng)不同瀏覽器及分辨率,網(wǎng)頁(yè)布局、內(nèi)容不應(yīng)出現(xiàn)紊亂。(3)合理的版面布局,應(yīng)做到圖文并茂。(4)精美的網(wǎng)站標(biāo)志,讓人記住你。(5)注重色彩搭配,給人以藝術(shù)的享受。(6)網(wǎng)頁(yè)內(nèi)容便于瀏覽,要有導(dǎo)航功能。(7)網(wǎng)頁(yè)內(nèi)容要精彩,讓人感覺到有吸引力。
(8)簡(jiǎn)約、美觀,不應(yīng)過于追求頁(yè)面的華麗。
5、網(wǎng)頁(yè)的整體風(fēng)格設(shè)計(jì)的基本原則。
(1)網(wǎng)站標(biāo)志要放在醒目位置,如左上角,而且要保持不變。(2)最好能夠有一句反映網(wǎng)站精髓的標(biāo)語(yǔ),并能動(dòng)態(tài)顯示。
(3)導(dǎo)航部分應(yīng)該放在每一張網(wǎng)頁(yè)的相同位置,便于訪問者瀏覽網(wǎng)站的全部?jī)?nèi)容。
(4)確定主體顏色,并注意顏色搭配要讓人感覺舒服,不要太刺眼,也不能不突出需要強(qiáng)調(diào)的內(nèi)容。(5)頁(yè)面的布局是風(fēng)格的一個(gè)重要標(biāo)志。不要忘記考慮主頁(yè)的可擴(kuò)充性,以方便將來再添加欄目。(6)內(nèi)容結(jié)構(gòu)越簡(jiǎn)單越好,分類要簡(jiǎn)而精。一切都為訪問者能夠最快地找到訪問的資料而考慮。
6、網(wǎng)頁(yè)色彩如何搭配。
網(wǎng)頁(yè)的色彩是樹立網(wǎng)站形象的關(guān)鍵之一,網(wǎng)頁(yè)的色彩處理得好,可以錦上添花,達(dá)到事半功倍的效果。色彩總的應(yīng)用原則應(yīng)該是“總體協(xié)調(diào),局部對(duì)比”,也就是網(wǎng)頁(yè)的整體色彩效果應(yīng)該是和諧的,只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對(duì)比。在色彩的運(yùn)用上,可以根據(jù)網(wǎng)頁(yè)內(nèi)容的需要,分別采用不同的主色調(diào),并注意以下色彩搭配的原理:
(1)色彩的鮮明性:網(wǎng)頁(yè)的色彩要鮮艷,容易引人注目。
(2)色彩的獨(dú)特性:要有與眾不同的色彩,使人印象強(qiáng)烈。
(3)色彩的合適性:色彩和表達(dá)的內(nèi)容氣氛相適合。如用粉色體現(xiàn)女性站點(diǎn)的柔性。
(4)色彩的聯(lián)想性:不同色彩會(huì)產(chǎn)生不同的聯(lián)想,藍(lán)色想到天空,黑色想到黑夜,紅色想到喜事等,選擇色彩要和網(wǎng)頁(yè)的內(nèi)涵相關(guān)聯(lián)。
一個(gè)網(wǎng)站的標(biāo)準(zhǔn)色彩應(yīng)盡量控制在三種色彩以內(nèi),不要將所有顏色都用到。背景和前文的對(duì)比盡量要大,(絕對(duì)不要用花紋繁復(fù)的圖案作背景),以便突出主要文字內(nèi)容。
7、Dreamweaver的三種視圖方式
在代碼視圖中可以直接編輯網(wǎng)頁(yè)的源代碼;而設(shè)計(jì)視圖能方便我們更好地美化網(wǎng)頁(yè),更合理地布局網(wǎng)頁(yè);同時(shí)顯示代碼視圖和設(shè)計(jì)視圖讓我們能夠更好地理解源代碼,提高編程能力。
8、什么是HTML?
HTML是Hypertext Markup Language的縮寫,即超文本標(biāo)記語(yǔ)言,是004km.cn就是一個(gè)域名。從技術(shù)上講,域名只是一個(gè)Internet中用于解決地址對(duì)應(yīng)問題的一種方法。
11、ftp協(xié)議(文件傳輸協(xié)議)
是 Internet 上用來傳送文件的協(xié)議,它是為了我們能夠在 Internet 上互相傳送文件而制定的文件傳送標(biāo)準(zhǔn),規(guī)定了 Internet 上文件如何傳送。也就是說,通過 FTP 協(xié)議,我們就可以跟 Internet 上的 FTP 服
務(wù)器進(jìn)行文件的上傳(Upload)或下載(Download)等動(dòng)作。
12、統(tǒng)一資源定位符(Uniform Resource Locator, URL)
包含如何訪問 Internet 上的資源的明確指令,也就是Internet文件在網(wǎng)上的地址。
URL的一般格式為:
Access-method://host:port/path/filename 例如:http://004km.cn/ 為 Microsoft 網(wǎng)站的萬維網(wǎng) URL 地址。
Access-method,訪問Internet資源的方法或是訪問的協(xié)議類型,可以是下表之一: http 通過 http 訪問該資源。格式 http:// ftp 通過 FTP訪問資源。格式 FTP:// file 資源是本地計(jì)算機(jī)上的文件。格式file:// gopher 通過 Gopher 協(xié)議訪問該資源。
mailto 資源為電子郵件地址,通過 SMTP 訪問。格式 mailto: MMS 通過 支持MMS(流媒體)協(xié)議的播放該資源。(代表軟件:Windows Media Player)格式 MMS:// ed2k 通過 支持ed2k(專用下載鏈接)協(xié)議的P2P軟件訪問該資源。(代表軟件:電驢)格式 ed2k:// Flashget 通過 支持Flashget:(專用下載鏈接)協(xié)議的P2P軟件訪問該資源。(代表軟件:快車)格式 Flashget:// thunder 通過 支持thunder(專用下載鏈接)協(xié)議的P2P軟件訪問該資源。(代表軟件:迅雷)格式 thunder:// news 通過 NNTP 訪問該資源。
host,主機(jī),指定的服務(wù)器的域名系統(tǒng)(DNS)主機(jī)名或 IP 地址。
port,指出被訪問的Internet資源所在的服務(wù)器端口號(hào),整數(shù),可選,省略時(shí)使用方案的默認(rèn)端口,如http的默認(rèn)端口為80。
path,路徑,由零或多個(gè)“/”符號(hào)隔開的字符串,一般用來表示主機(jī)上的一個(gè)目錄或文件地址,可選。
filename,指出被訪問的Internet資源名稱,可選。
13、鏈接的幾種路徑以及它們的不同:
絕對(duì)路徑是包含服務(wù)器協(xié)議的完全路徑,是一種與源地址文件無關(guān)的路徑形式。
文檔相對(duì)的路徑是指與當(dāng)前文檔所在的文件夾相對(duì)的路徑,它使用源地址文件和目標(biāo)地址文件之間的位置來表示路徑,只要整個(gè)站點(diǎn)的結(jié)構(gòu)和文件的位置不變,改變站點(diǎn)的路徑不會(huì)影響路徑的正確性。
根相對(duì)路徑是指從站點(diǎn)根文件夾到被鏈接文檔經(jīng)由的路徑。一個(gè)根相對(duì)路徑以前斜杠開頭,它代表站點(diǎn)根文件夾。
常用的鏈接有:文本鏈接;圖片鏈接及圖像熱點(diǎn)鏈接;郵件鏈接、下載鏈接以及其他鏈接;錨點(diǎn)鏈接及空鏈接。
只含有“#”的那種鏈接是空鏈接。
第三篇:DREAMWEAVER電子教案
第1章 初識(shí)Dreamweaver安裝、下載方法.一、教學(xué)目的:學(xué)習(xí)原DR的安裝、下載方法.二、教學(xué)重點(diǎn):概述和安裝
三、教學(xué)過程
1.1 Dreamweaver MX概述
1、直觀的新工作區(qū)
2、更加強(qiáng)大的模板
3、廣泛的代碼庫(kù)
4、新服務(wù)器技術(shù)
5、幫助初學(xué)者起步的示例內(nèi)容
6、XML和WEB標(biāo)準(zhǔn)支持
7、改進(jìn)的級(jí)聯(lián)樣式表(CSS)
8、高性能的新編碼功能
9、高性能的新編碼功能
10、優(yōu)化COLDFUSION MX開發(fā)環(huán)境
使用 Dreamweaver 工作區(qū)
一、教學(xué)目的:認(rèn)識(shí)DR的界面,了解各面板的組成,菜單的組成。
二、教學(xué)重點(diǎn):各面板的組成。
三、教學(xué)過程:
選擇工作區(qū)布局(僅適用于 Windows)在 Windows 中首次啟動(dòng) Dreamweaver 時(shí),會(huì)出現(xiàn)一個(gè)對(duì)話框讓選擇一種工作區(qū)布局。如果以后改變了主意,可以使用“參數(shù)選擇”對(duì)話框切換到一種不同的工作區(qū)。
選擇工作區(qū)布局:
選擇下列布局之一: Dreamweaver MX 工作區(qū)
HomeSite/代碼編寫者樣式的 Dreamweaver MX 工作區(qū) Dreamweaver 4 工作區(qū)
在選擇一種工作區(qū)后切換到另一種工作區(qū):
Dreamweaver MX 工作區(qū)
浮動(dòng)工作區(qū)布局(Windows 和 Macintosh)狀態(tài)欄
“文檔”窗口底部的狀態(tài)欄提供與正創(chuàng)建的文檔有關(guān)的其他信息。調(diào)整“文檔”窗口的大小
將“文檔”窗口的大小調(diào)整為預(yù)定義的大?。?/p>
向“窗口大小”彈出式菜單中添加新的大?。?/p>
將“文檔”窗口最大化(僅適用于 Windows 集成工作區(qū)):
使用快速啟動(dòng)條
快速啟動(dòng)條顯示在狀態(tài)欄中,包含用以打開和關(guān)閉各種面板、檢查器和窗口的按鈕。
若要顯示快速啟動(dòng)條,請(qǐng)?jiān)凇懊姘濉眳?shù)選擇中啟用“在面板和啟動(dòng)器中顯示圖標(biāo)”選項(xiàng)??梢灾付ㄔ诳焖賳?dòng)條中顯示哪些項(xiàng)目。
使用文檔工具欄
? “顯示代碼視圖
?
“顯示代碼視圖和設(shè)計(jì)視圖” ?
“顯示設(shè)計(jì)視圖
? “標(biāo)題”
? “文件管理”
? “在瀏覽器中預(yù)覽/調(diào)試”
?
“換行符”在插入點(diǎn)處插入一個(gè)換行符。還可以按下 Shift+Enter(Windows)“不換行空格”在插入點(diǎn)處插入一個(gè)不換行的空格()?!白笠?hào)”、“右引號(hào)”和“破折線”在插入點(diǎn)處插入標(biāo)點(diǎn)符號(hào)。“英鎊符號(hào)”、“歐元符號(hào)”和“日元符號(hào)”在插入點(diǎn)處插入貨幣符號(hào)?!鞍鏅?quán)”、“注冊(cè)商標(biāo)”和“商標(biāo)”在插入點(diǎn)處插入相應(yīng)的符號(hào)?!捌渌址?/p>
第二單元 文本的編輯與基本操作
一、教學(xué)目的:學(xué)習(xí)網(wǎng)頁(yè)的組成對(duì)象 設(shè)計(jì)要素 文本的字體大小顏色,段落的格式,基本的編輯命令。
二、學(xué)教重點(diǎn):文本編輯的基本操作
三、教學(xué)過程:
網(wǎng)頁(yè)的組成比報(bào)紙和雜志復(fù)雜的多,因?yàn)樗瑘D、聲、文、動(dòng)畫、控件等多媒體,另一大特點(diǎn)有超級(jí)鏈接。
1、文字
標(biāo)題:一般為圖形 尺寸 系統(tǒng)默認(rèn)大小
樣式:一般少用下劃線
字體:一般為系統(tǒng)默認(rèn)大小
顏色:以顏色來強(qiáng)調(diào)文章的重點(diǎn)
2、圖形
一般為GIF 和 JPG 格式
3、超級(jí)鏈接
站內(nèi)鏈接 和站外鏈接 網(wǎng)頁(yè)的設(shè)計(jì)要素
不同瀏覽器的顯示效果 網(wǎng)絡(luò)的傳輸速度 屏幕的分辨率 顏色的顯示
網(wǎng)頁(yè)的基本操作 創(chuàng)建網(wǎng)頁(yè)
文件――新建――對(duì)話框 打開文件類型 HTML SHTM SHTML XML文件
庫(kù)文件LBI 模板文件 DWT
樣式表文件 CSS 微軟服務(wù)器端文件 ASP JAVA 服務(wù)器端文件 PHP文件 TXT文件
CFM模板文件
JSF
fireworks文件 LASSO 打開當(dāng)前站點(diǎn)文件
從站點(diǎn)面板中打開 或 通過菜單-文件-打開命令 打開最近使用的文件
文件菜單下列出的文件名 從WORD中導(dǎo)入文件
先在WORD中將文件保存為HTML 文件 然后在DR 中 文件-導(dǎo)入-WORDHTML
還可打開后用命令-清除 保存網(wǎng)頁(yè) 另存為模板 輸入文本
直接輸入 使用剪貼板
用ENTER 相當(dāng)于插入
用SHIFT+ENTER 相當(dāng)于插入
改變字體樣式 改變字號(hào)
要使字體不隨瀏覽器的字體設(shè)置而改變就要用到層疊樣式(CSS Style)文本的顏色 選擇文字
然后用下列兩種方式 ? 用文字屬性面板中調(diào)整 ? ?
單擊調(diào)色板中的右上角要將字體改為默認(rèn)值點(diǎn)
按鈕或菜單文本――顏色
上機(jī)練習(xí):
段 落 格 式
創(chuàng)新新段落:
ENTER 分段落
在段落
格式下拉菜單選擇一種格式 對(duì)齊段落:
居中對(duì)齊 左對(duì)齊 右對(duì)齊
縮進(jìn)段落
取消縮進(jìn)
或菜單 或選擇段落后右擊彈出菜單
項(xiàng)目符號(hào): 每個(gè)段落前加一個(gè)項(xiàng)目符號(hào) 用
利用 插入分隔線
列表下拉選擇各種不同的情況
修改分隔線的屬性
改變長(zhǎng)度 改變高度
改變對(duì)齊方式
插入特殊字符和符號(hào)
菜單插入|特殊字符|
彈出子菜單,進(jìn)行所需要的項(xiàng)目選擇
其中包括:
換行符 SHIFT+RETURN 不換行空格 CTREL+SHIFT+SPACE
用于行首 插入符號(hào)
E-mail 地址鏈接
插入|電子郵件鏈接|
其效果將看到“歡迎聯(lián)系”字樣并帶下劃線 可以發(fā)送郵件 插入日期時(shí)間:
插入注釋文字
基本編輯命令 撤銷和重復(fù)操作 查找和替換
移動(dòng)和復(fù)制
直接用鼠標(biāo)拖動(dòng)
使用CUT
COPY
PASTE
靈活使用HISTORY 面板 SHIFT+F10
表示當(dāng)前剛完成的操作
重放按鈕 復(fù)制到剪帖板按鈕保存命令按鈕
彈出菜單按鈕可清除歷史記錄等操作
上機(jī)練習(xí),重復(fù)上述操作,記錄快捷鍵
作業(yè):做一個(gè)文字型的小網(wǎng)頁(yè),將學(xué)到的知識(shí)運(yùn)用在上面。
第3單元網(wǎng)頁(yè)中的圖像鏈接
教學(xué)目的:掌握網(wǎng)頁(yè)中插入圖像、修改屬性、插入交互圖像以及創(chuàng)建交互圖像的方法。教學(xué)重點(diǎn):插入圖像、控制圖像 創(chuàng)建鏈接、插入交互圖像的方法。插入圖像操作:
1.在“文檔”窗口中,將插入點(diǎn)放置在您要顯示圖像的地方,然后執(zhí)行以下操作之一: o 在“插入”欄的“常用”類別中,單擊“圖像”圖標(biāo)。
在“插入”欄的“常用”類別中,將“圖像”圖標(biāo)拖入“文檔”窗口中(或者,如果您正處理代碼,則拖入“代碼”視圖窗口中)。
o 選擇“插入”>“圖像”。
o 將圖像從“資源”面板(“窗口”>“資源”)拖到“文檔”窗口中的所需位置;然后跳到第 3 步。o 將圖像從“站點(diǎn)”面板拖到“文檔”窗口中的所需位置;然后跳到第 3 步。o 將圖像從桌面拖到“文檔”窗口中的所需位置;然后跳到第 3 步。
2.在出現(xiàn)的對(duì)話框中執(zhí)行下列操作之一: o 選擇“文件系統(tǒng)”以選擇一個(gè)圖形文件。o 選擇“數(shù)據(jù)源”以選擇一個(gè)動(dòng)態(tài)圖像源文件。3.瀏覽以選擇您要插入的圖像或內(nèi)容源文件。o
如果您正在一個(gè)未保存的文檔中工作,則 Dreamweaver 生成一個(gè)對(duì)圖像文件的 file:// 引用。將文檔保存到站點(diǎn)中的任何位置后,Dreamweaver 將該引用轉(zhuǎn)換為文檔相對(duì)路徑。4.在屬性檢查器(“窗口”>“屬性”)中,設(shè)置該圖像的屬性。設(shè)置圖像屬性
1.設(shè)置以下任一選項(xiàng): o 使用縮略圖下面的文本域設(shè)置名稱,以便在使用 Dreamweaver 行為(例如“交換圖像”)或腳本撰寫語(yǔ)言(例如 JavaScript 或 VBScript)時(shí)可以引用該圖像。o “寬”和“高”以像素為單位指定圖像的寬度和高度。o
“源文件”指定圖像的源文件。單擊文件夾圖標(biāo)以瀏覽到源文件,或者鍵入路徑。
“鏈接”指定圖像的超鏈接。將“指向文件”圖標(biāo)拖到“站點(diǎn)”面板中的某個(gè)文件,單擊文件夾圖標(biāo)瀏覽到站點(diǎn)上的某個(gè)文檔,或手動(dòng)鍵入 URL。有關(guān)創(chuàng)建鏈接的信息,“對(duì)齊”對(duì)齊同一行上的圖像和文本。
“替代”指定只顯示文本的瀏覽器或已設(shè)置為手動(dòng)下載圖像的瀏覽器中代替圖像顯示的替代文本。對(duì)于使用語(yǔ)音合成器(用于只顯示文本的瀏覽器)的有視覺障礙的用戶,將大聲讀出該文本。在某些瀏覽器中,當(dāng)鼠標(biāo)指針滑過圖像時(shí)也會(huì)顯示該文本?!暗貓D名稱”和“熱點(diǎn)工具”允許您標(biāo)注和創(chuàng)建客戶端圖像地圖。“垂直邊距”和“水平邊距”沿圖像的邊緣添加邊距(以像素為單位)?!按怪边吘唷毖貓D像的頂部和底部添加邊距?!八竭吘唷毖貓D像左側(cè)和右側(cè)添加邊距?!澳繕?biāo)”指定鏈接的頁(yè)應(yīng)當(dāng)在其中載入的框架或窗口。_blank,將鏈接的文件載入一個(gè)未命名的新瀏覽器窗口中。
_parent,將鏈接的文件載入含有該鏈接的框架的父框架集或父窗口中。如果含有該鏈接的框架不是嵌套的,則在瀏覽器全屏窗口中載入鏈接的文件。
_self,將鏈接的文件載入該鏈接所在的同一框架或窗口中。此目標(biāo)為默認(rèn)值,因此通常不需要指定它。
_top,在整個(gè)瀏覽器窗口中載入所鏈接的文件,因而會(huì)刪除所有框架?!斑吙颉笔且韵袼貫閱挝坏膱D像邊框的寬度。默認(rèn)為無邊框。
“編輯”啟動(dòng)您在“外部編輯器”參數(shù)選擇中指定的圖像編輯器并打開選定的圖像。有關(guān)設(shè)置外部圖像編輯器的信息,“重設(shè)大小” Control+代字號(hào)(~)
第四單元表格設(shè)計(jì)
教學(xué)目的:學(xué)習(xí)下列方法
? 在“標(biāo)準(zhǔn)”視圖中創(chuàng)建和修改表格 ? 向表格添加顏色
? 在“標(biāo)準(zhǔn)”視圖中設(shè)置相對(duì)寬度的表格
教學(xué)重點(diǎn):能進(jìn)行表格設(shè)計(jì) 教學(xué)過程:
在“標(biāo)準(zhǔn)”視圖中創(chuàng)建和修改表格 1.在 Dreamweaver 中,選擇“文件”>“新建”。即出現(xiàn)“新建文檔”對(duì)話框。
2.在“空文檔”列表中,選擇“HTML”,然后單擊“創(chuàng)建”以創(chuàng)建一個(gè)新的 HTML 文檔。3.在“文檔”工具欄的“標(biāo)題”文本域中,輸入“表格設(shè)計(jì)”為文檔添加一個(gè)標(biāo)題。
4.選擇“文件”>“保存”將該文檔保存到本地站點(diǎn)文件夾中。將其命名為 tableModify.htm。
插入表格
現(xiàn)在就可以在文檔中插入表格了。
1.在“文檔”窗口,將插入點(diǎn)放到文檔中,然后執(zhí)行下列操作之一: o 選擇“插入”>“表格”。o 在插入欄的“常用”類別中,單擊“表格”圖標(biāo)。
出現(xiàn)“插入表格”對(duì)話框。
2.在該對(duì)話框中,設(shè)置下列選項(xiàng):
o 在“行數(shù)”文本框中,鍵入 2。o 在“列數(shù)”文本框中,鍵入 2。o 在“寬度”文本框中鍵入 600,然后在“寬度”文本框右邊的彈出式菜單中選擇像素。將寬度設(shè)置為 600 像素將創(chuàng)建一個(gè)固定寬度的表格。稍后,我們將在本教程中更詳細(xì)地討論表格寬度。
o 在“邊框”文本框中,鍵入 1 將表格和表格單元格周圍的邊框?qū)挾仍O(shè)置為 1 個(gè)像素。
3.單擊“確定”。
Dreamweaver 將該表格插入到文檔中。
4.執(zhí)行下列操作之一來保存文檔: o 選擇“文件”>“保存”。o 按 Ctrl+S 組合鍵
修改表格
下一步,將修改表格的布局。將在表格中添加行和列,并且學(xué)習(xí)如何合并和拆分單元格以創(chuàng)建所需的頁(yè)面布局。
1.在左上方的單元格中單擊,然后向下拖動(dòng)直到最下面的行以選擇左邊的一列。
2.選擇“修改”>“表格”>“插入列”。現(xiàn)在該表格包含三列。
3.單擊左下方的單元格,然后選擇“修改”>“表格”>“插入行或列”。
即出現(xiàn)“插入行或列”對(duì)話框。提示: 如果想要插入特定數(shù)目的行或列,或者要選擇在表格中插入行或列的位置,請(qǐng)選擇“插入行或列”選項(xiàng)。
4.在該對(duì)話框中,設(shè)置下列選項(xiàng): 對(duì)于“插入”,選擇行。在“行數(shù)”框中,鍵入 2。對(duì)于“位置”,選擇 所選之上。5.單擊“確定”。
表格即會(huì)更新?,F(xiàn)在的表格為四行三列。6.保存所做的更改(“文件”>“保存”)。合并和拆分單元格
通過合并和拆分單元格,可以自定義表格的設(shè)計(jì)以符合布局需要。接下來,將看到如何使用菜單選項(xiàng)或?qū)傩詸z查器來合并或拆分表格單元格。
1.在文檔中,將指針從左上方的單元格拖到它下面的一個(gè)單元格,以選擇表格左列的上面兩個(gè)單元格。
2.選擇“修改”>“表格”>“合并單元格”。
兩個(gè)單元格合并成一個(gè)單元格。
3.單擊第二列的第三行,然后向右向下拖動(dòng)以選擇第二列和第三列中的最后兩行單元格。
4.在屬性檢查器中,單擊“合并”按鈕以合并單元格。選定的單元格合并為一個(gè)單元格。
可以拆分單個(gè)的單元格或列。
1.單擊左上方的單元格。
2.在屬性檢查器中,單擊“拆分單元格”按鈕。“拆分單元格”對(duì)話框出現(xiàn)。
3.在該對(duì)話框中,設(shè)置下列選項(xiàng): o 對(duì)于“把單元格拆分”,選擇列。o 在“列數(shù)”框中,輸入 2。4.單擊“確定”。表格即被修改。
更改行高和列寬
現(xiàn)在調(diào)整該表格的尺寸。將要增加表格的行間距,并且調(diào)整表格列間距。
1.沿表格底部邊框移動(dòng)指針直到指針變成一個(gè)邊框選擇器,然后向下拖動(dòng)以調(diào)整表格大小。
如果愿意,還可以使用此方法調(diào)整表格中的其他行高。
2.沿一個(gè)列的邊框移動(dòng)指針直到指針變成一個(gè)邊框選擇器,然后向左或向右拖動(dòng)它以更改列寬。
3.調(diào)整完成后,保存文檔。向表格添加顏色
可以向表格的任何部分添加顏色。將首先向整個(gè)表格添加背景顏色,然后對(duì)表格中的單元格應(yīng)用不同的背景顏色。最后,將更改邊框顏色。
1.在文檔中,單擊表格的任何一個(gè)單元格,然后在位于文檔窗口左下方的標(biāo)簽選擇器中單擊