網(wǎng)站建設(shè)與網(wǎng)頁制作課程ppt課件

網(wǎng)頁設(shè)計與制作 呂戈靜 2016 10 教學(xué)目標(biāo) 通過本章的學(xué)習(xí) 能夠讓學(xué)生了解網(wǎng)站的設(shè)計與工作流程 掌握HTML的基本概念和結(jié)構(gòu) 能利用HTML制作網(wǎng)頁 了解和DHTML XML的區(qū)別 能熟練掌握利用Dreamweaver制作網(wǎng)頁 利用Fireworks制作圖片 利用Flash制作動畫 并能有機(jī)地結(jié)合 制作出精美的網(wǎng)頁 第1章網(wǎng)頁設(shè)計概述第2章HTML語言基礎(chǔ)第3章Dreamweaver基礎(chǔ)第4章網(wǎng)頁中的基礎(chǔ)元素第5章網(wǎng)頁頁面布局第6章網(wǎng)頁中的層和時間軸第7章表單的應(yīng)用第8章在網(wǎng)頁中使用行為第9章CSS樣式使用第10章網(wǎng)頁中的多媒體應(yīng)用第11章模板和庫第12章站點測試和發(fā)布第13章Flash8簡介第14章Fireworks8簡介 目錄 第1章網(wǎng)頁設(shè)計概述 知識目標(biāo) 掌握網(wǎng)頁 網(wǎng)站及主頁的概念了解網(wǎng)頁中的主要元素了解各種網(wǎng)頁制作工具8 能力目標(biāo) 各種網(wǎng)頁制作工具的配合使用網(wǎng)站的整體規(guī)劃網(wǎng)站的設(shè)計流程 1 1網(wǎng)頁和網(wǎng)站1 2網(wǎng)頁中的主要元素1 3網(wǎng)頁制作工具1 4網(wǎng)頁設(shè)計的基本流程本章小結(jié) 第1章網(wǎng)頁設(shè)計概述 1 1網(wǎng)頁和網(wǎng)站 1 1 1網(wǎng)頁1 1 2網(wǎng)站1 1 3網(wǎng)頁的基本功能 1 網(wǎng)頁網(wǎng)頁 WEB 是用html語言編寫的 通過www網(wǎng)傳輸 并被web瀏覽器翻譯成可以顯示出來的集合文本 圖片 聲音和動畫等信息元素的頁面文件 網(wǎng)頁示例 2 網(wǎng)頁的類型根據(jù)頁面內(nèi)容可以分首頁 主頁 專欄網(wǎng)頁 內(nèi)容網(wǎng)頁和功能網(wǎng)頁等類型 按制作技術(shù)分為靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁 1 1 1網(wǎng)頁 1 1網(wǎng)頁和網(wǎng)站 網(wǎng)站就是把一些網(wǎng)頁等信息文件通過超鏈接的形式關(guān)聯(lián)起來形成的信息文件的集合 信息可以是網(wǎng)頁形式也可以是其他的文檔形式 網(wǎng)頁與網(wǎng)站的區(qū)別與聯(lián)系 網(wǎng)站是一個文件夾 其中的文件不僅是網(wǎng)頁還有網(wǎng)站所需的其他文件或文件夾 網(wǎng)頁是一個頁面文件 用來發(fā)布各種信息 網(wǎng)頁是網(wǎng)站的構(gòu)成要素 是網(wǎng)站信息發(fā)布與表現(xiàn)的一種主要形式 網(wǎng)站是網(wǎng)頁通過超鏈接形成的集合 1 1 2網(wǎng)站 1 1網(wǎng)頁和網(wǎng)站 1 媒介的作用 使用者與信息之間的媒介 一方面是發(fā)布者 功能是發(fā)布信息 另一方面是瀏覽者 功能是提供瀏覽的信息 通過瀏覽網(wǎng)頁找尋需要的信息 2 互動的作用 瀏覽者與網(wǎng)頁制作單位之間互動的窗口 可以單向或雙向傳遞信息 3 傳輸?shù)淖饔?作為傳輸各種電子文件或信息之用 如下載說明書 更新文件 驅(qū)動程序等 1 1 3網(wǎng)頁的基本功能 1 1網(wǎng)頁和網(wǎng)站 1 2網(wǎng)頁中的主要元素 1 2 1文本1 2 2圖像1 2 3鏈接標(biāo)志1 2 4其他的基本要素 網(wǎng)頁的基本要素一般包括 文字 圖像 動畫和鏈接標(biāo)志等 除此之外 網(wǎng)頁的元素還包聲音 多媒體和視頻等 是網(wǎng)頁中最基本的元素 網(wǎng)頁中文字的設(shè)計一般從以下幾個方面來考慮 1 字體的選擇 2 字號 行距的選擇 3 特殊字體的使用 4 字體的顏色 1 2 1文本 1 2網(wǎng)頁中的主要元素 現(xiàn)在網(wǎng)絡(luò)上使用的絕大多數(shù)圖片和圖像是gif jpeg和png文件格式 網(wǎng)頁上使用圖像要注意的問題 JPEG格式適合于照片圖像 GIF格式適合于包含純色的圖像 例如插圖和線條圖 利用圖像編輯軟件來放大或縮小圖像 屏幕顯示圖像的分辨率一般為72dpi 制作圖像時 不必使用比此再高的分辨率 1 2 2圖像 1 2網(wǎng)頁中的主要元素 如果建立的圖像中只有黑色和白色 處理時可將它保存為黑白圖像格式 這樣可以減少圖像文件的大小 如果設(shè)計的GIF格式圖像包含了漸變和直線 應(yīng)盡量使得它們水平 因為GIF格以每條水平線為基礎(chǔ)來壓縮 嘗試各種不同的JPEG壓縮率 使用合適的色彩模式 慎用動畫 1 2 2圖像 1 2網(wǎng)頁中的主要元素 鏈接也叫超鏈接 Hyperlink 是從一個網(wǎng)頁指向另一個目的端的鏈接 是頁面間的鏈接關(guān)系 鏈接標(biāo)志 載體 指的是網(wǎng)頁中特殊的文本或圖像 它們常常用不同的顏色和下劃線來標(biāo)識 在瀏覽器中 訪問者可以用鼠標(biāo)單擊它們 能夠從當(dāng)前的網(wǎng)頁轉(zhuǎn)到鏈接的目的端位置 超鏈接的標(biāo)志一般有 文本 圖像 熱區(qū)三種 要注意的是 所有超鏈接標(biāo)志均應(yīng)清晰無誤地向瀏覽者標(biāo)識出來 讓人一看就知道 1 2 3鏈接標(biāo)志 1 2網(wǎng)頁中的主要元素 除上述幾種要素之外 在網(wǎng)頁上經(jīng)常使用的還有動畫 視頻 聲音等各種信息的形式 1 動畫 目前網(wǎng)絡(luò)上常用的動畫類型有g(shù)if和Flash動畫兩種 2 視頻 是多媒體網(wǎng)頁的一個重要組成部分 常用的視頻格式有avi mpeg和mov等 視頻會大大增加網(wǎng)頁的文件量 從而使用訪問速度受到影響 因此要慎用 3 音頻 在網(wǎng)頁中插入音頻會增加網(wǎng)頁的生動性 常用的音頻格式有rm ram midi wav和mp3等格式 音頻文件和視頻文件一樣都會增加網(wǎng)頁的文件量 因此要慎用 1 2 4其他的基本要素 1 2網(wǎng)頁中的主要元素 1 3網(wǎng)頁制作工具 1 3 1網(wǎng)頁編輯工具1 超文本標(biāo)識語言 HTML 2 FrontPage簡介3 Dreamweaver1 3 2網(wǎng)頁圖像編輯工具1 3 3動態(tài)網(wǎng)頁技術(shù) 1 Photoshop 是Adobe公司開發(fā)的 是當(dāng)今最流行的圖形圖象處理軟件之一 它能夠?qū)崿F(xiàn)各種專業(yè)化的圖像制作 處理及合成 2 Fireworks 是由Macromedia公司開發(fā)的圖形處理工具 它是第一個專門為制作網(wǎng)頁圖形而設(shè)計的軟件 同時也提供專業(yè)的網(wǎng)頁圖形設(shè)計及制作的解決方案 3 Flash Macromedia公司出品的Flash是目前非常流行的一種交互式Web矢量動畫軟件 Dreamweaver和Flash Fireworks三個軟件被稱為 網(wǎng)頁三劍客 是現(xiàn)在公認(rèn)的比較標(biāo)準(zhǔn)的網(wǎng)頁制作利器 1 3 2網(wǎng)頁圖像編輯工具 1 3網(wǎng)頁制作工具 動態(tài)網(wǎng)頁可以實現(xiàn)網(wǎng)頁瀏覽者和網(wǎng)頁設(shè)計者的交互 實現(xiàn)交互技術(shù)有兩種 一種是客戶端技術(shù)如常用的JavaScript和VBScript 另一種是服務(wù)器端技術(shù)如目前常用的ASP和PHP 1 ASP ActiveServerPages 2 PHP HypertextPreprocessor 3 JSP JavaServerPages 1 3 3動態(tài)網(wǎng)頁技術(shù) 1 3網(wǎng)頁制作工具 1 4網(wǎng)頁設(shè)計的基本流程 1 4 1網(wǎng)站的設(shè)計流程1 4 2網(wǎng)頁的設(shè)計與制作1 4 3網(wǎng)頁的測試1 4 4網(wǎng)頁上傳和發(fā)布 1 確定網(wǎng)站的主題2 規(guī)劃網(wǎng)站的整體結(jié)構(gòu)3 收集整合網(wǎng)頁素材4 確定網(wǎng)頁版面布局 5 制作網(wǎng)頁 6 添加網(wǎng)頁特效 7 測試和發(fā)布網(wǎng)站 1 4 1網(wǎng)站的設(shè)計流程 1 4網(wǎng)頁設(shè)計的基本流程 1 確定網(wǎng)頁的版面布局 1 平衡性 2 對稱性 3 對比性 4 疏密度 5 比例 6 韻律感 網(wǎng)頁的排版布局是決定網(wǎng)站美觀與否的一個重要方面 通過合理的 有創(chuàng)意布局 才可以把文字 圖像等內(nèi)容完美地展現(xiàn)在瀏覽者前面 2 網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作一般分為靜態(tài)網(wǎng)頁制作和動態(tài)網(wǎng)頁制作兩類 1 4 2網(wǎng)頁的設(shè)計與制作 1 4網(wǎng)頁設(shè)計的基本流程 1 瀏覽器兼容性測試 目前瀏覽器有 InternetExplorer與Netscape兩大主流瀏覽器 二者對HTML和CSS等語法的支持度是不同的 在Dreamweaver中提供了可以檢查網(wǎng)頁中是否含有某版本瀏覽器不能識別的語法功能 設(shè)計者可以借助其進(jìn)行檢查 2 平臺的兼容性測試 設(shè)計要為用戶著想 必須最少在一臺PC和一臺Mac機(jī)上測試你的網(wǎng)站網(wǎng)頁 看看兼容性如何 3 超鏈接完好性測試 超鏈接是連接網(wǎng)頁之間 網(wǎng)站之間的橋梁 瀏覽者是不愿意訪問一個經(jīng)常出現(xiàn) 找不到網(wǎng)頁 的問題的網(wǎng)站 作為設(shè)計者必須檢測超鏈接的完好性 保證鏈接的有效性 不要留下太多的壞鏈接 1 4 3網(wǎng)頁的測試 1 4網(wǎng)頁設(shè)計的基本流程 網(wǎng)頁設(shè)計好 必須把它發(fā)布到互聯(lián)網(wǎng)上 否則網(wǎng)站形象仍然不能展現(xiàn)出去 發(fā)布的服務(wù)器可以是遠(yuǎn)程 也可以是本地 如果是發(fā)布到互聯(lián)網(wǎng)上 要先申請域名和主頁空間 然后再利用專用軟件 如 CuteFTP 上傳 FTP有很多種軟件 最著名的是CuteFTP和LeapFTP 也可以用Dreamweaver內(nèi)置的FTP上傳 1 4 4網(wǎng)頁上傳和發(fā)布 1 4網(wǎng)頁設(shè)計的基本流程 本章小結(jié) 第1章網(wǎng)頁設(shè)計概述 知識目標(biāo) 了解HTML文件的基本結(jié)構(gòu)掌握HTML中文本的編輯及圖像的語法掌握HTML中各種設(shè)置超級鏈接的語法掌握HTML中表格和框架的基本語法8 能力目標(biāo) 掌握進(jìn)行文本及圖像的編輯操作掌握創(chuàng)建各種超級鏈接的操作能夠編寫簡單的HTML網(wǎng)頁掌握HTML文件中表格和框架的使用 第2章HTML語言基礎(chǔ) 2 1HTML概述2 2文本的編輯2 3圖像編輯2 4建立超鏈接2 5表格與框架本章小結(jié) 第2章HTML語言基礎(chǔ) 2 1HTML概述 2 1 1HTML簡介2 1 2HTML語法結(jié)構(gòu) HTML HyperTextMarkupLanguage 又稱超文本標(biāo)識語言 是一種標(biāo)識性的語言 是網(wǎng)頁設(shè)計的最初語言 文件的擴(kuò)展名 html 或 htm 例2 1簡單的HTML文檔 長春歡迎您 這里是長春悠游網(wǎng) 我們帶您暢游長春 由 組成的就是標(biāo)記 在HTML語言中標(biāo)記分 單標(biāo)記 和 圍堵標(biāo)記 2 1 1HTML簡介 2 1HTML概述 1 圍堵標(biāo)記格式 2 單標(biāo)記格式 只有起始標(biāo)記 沒有結(jié)束標(biāo)記 最常用的單標(biāo)記是 它表示段內(nèi)換行 3 標(biāo)記屬性格式 各屬性間無前后順序 屬性也可省略 當(dāng)省略屬性時取標(biāo)記的默認(rèn)值 2 1 1HTML簡介 2 1HTML概述 HTML文檔的基本結(jié)構(gòu) 文件開始標(biāo)頭區(qū)開始 標(biāo)題區(qū)標(biāo)頭區(qū)結(jié)束文件主體內(nèi)容開始文件主體內(nèi)容 文件主體內(nèi)容結(jié)束文件結(jié)束其中之間表示這是個網(wǎng)頁文件 是必有的標(biāo)記 2 1 2HTML語法結(jié)構(gòu) 2 1HTML概述 2 2文本的編輯 2 2 1段落標(biāo)記2 2 2文本標(biāo)記2 2 3標(biāo)題顯示等級2 2 4列表 1 段落 基本語法格式為 其中參數(shù)align用于設(shè)定段落的位置是靠左 靠右還是居中 默認(rèn)值是靠左 除align之外還有其他參數(shù)如class class參數(shù)是可選項 如果沒有將按照默認(rèn)值顯示 2 換行單標(biāo)記 放在一行的末尾 可以在一個段落內(nèi)實現(xiàn)文本的強(qiáng)制換行 設(shè)置標(biāo)記后面的文本字 圖像和表格等內(nèi)容顯示于下一行 2 2 1段落標(biāo)記 2 2文本的編輯 1 字體標(biāo)記其基本語法格式為 Size 設(shè)置字體的顯示字號 范圍是從 1 7 其中 3 是默認(rèn)值 Color 設(shè)置文本的顏色 值可以是顏色名 英文如red代表紅色 或顏色的十六進(jìn)制代碼 000000代表黑色 FFFFFF代表白色 Face 設(shè)置文本顯示的字體 值為字體的名稱 在文本的標(biāo)記中還有很多常用的標(biāo)記 比如表示字體效果的 黑體 斜體 加下劃線 2 2 2文本標(biāo)記 2 2文本的編輯 2 特殊字符HTML中除了我們上面學(xué)的的一些標(biāo)記外 還有一些我們常用的特殊字符比如 這些特殊字符在HTML語言中都有對的轉(zhuǎn)義符 常用的轉(zhuǎn)義符與特殊字符參見下表 2 2 2文本標(biāo)記 2 2文本的編輯 3 水平線標(biāo)記水平線是在網(wǎng)頁上劃出一條水平的分割線 用來標(biāo)記水平線 語法格式為 Size 設(shè)置水平線的高度 以像素為單位 Color 設(shè)置水平線的顏色 Width 設(shè)置水平線的寬度 單位是像素或百分比 像素是絕對大小 不會隨著程序窗口的大小而改 百分比是相對于程序窗口水平線所占的比例 會隨著程序窗口的大小而改變 Align 設(shè)置水平線的對齊方式 對齊方式有左對齊 居中 右對齊三種 2 2 2文本標(biāo)記 2 2文本的編輯 語法格式為 n 表示不同級別的標(biāo)題 n值可以是1 6中的任意數(shù)字 其中1表示的標(biāo)題字體最大 另外 可以用align屬性設(shè)置對齊方式 常用的有左對齊 居中 右對齊三種對齊方式 2 2 3標(biāo)題顯示等級 2 2文本的編輯 在HTML中 列表常用的有 有序列表 和 無序列表 1 有序列表基本語法結(jié)構(gòu)為 項目1項目2 項目n 2 2 4列表 2 2文本的編輯 1 有序列表Type 設(shè)置列表的序號類型 常用序號如下 n 1 用數(shù)字作為序號 n A 用大寫字母作為序號 n a 用小寫字母作為序號 n I 用大寫羅馬數(shù)字作為序號 n i 用小寫羅馬數(shù)字作為序號 Start 為可選參數(shù) 用于設(shè)置序號的起始數(shù)值 如不添加 start 則從每類序號的第一個序號開始 2 2 4列表 2 2文本的編輯 2 無序列表基本語法結(jié)構(gòu)為 項目1項目2 項目nType 設(shè)置符號形狀 有實心圓 小正方形 空心圓三種 具體如下 n disk 符號為實心圓 n square 符號為正方形 n circle 符號為空心圓 2 2 4列表 2 2文本的編輯 2 3圖像編輯 2 3 1插入圖像2 3 2使用背景圖像 我們在網(wǎng)頁上經(jīng)常會瀏覽圖像 適當(dāng)使用圖像可以增加網(wǎng)頁的美觀 在網(wǎng)頁最常用到的是插入圖像和設(shè)置背景圖像 1 語法格式 單標(biāo)記Src 指明要添加的圖像所在的具體路徑和文件名 路徑可以是相對路徑 也可以是絕對路徑 例 絕對路徑 完整的描述文件位置的路徑就是絕對路徑 對于絕對路徑可以不需要知道其他任何信息就可以判斷出文件的位置 相對路徑 所謂相對路徑 顧名思義就是當(dāng)前文檔與目標(biāo)的相對位置 例 2 3 1插入圖像 2 3圖像編輯 2 圖像的屬性除了 src 以外 還有其他屬性 可以定義圖像的對齊方向 與周圍元素的距離等 各屬性及作用見表2 2 表2 2圖像屬性列表 2 3 1插入圖像 2 3圖像編輯 語法格式為 2 3 2使用背景圖像 2 3圖像編輯 2 4建立超鏈接 2 4 1建立超鏈接2 4 2使用書簽2 4 3標(biāo)記新窗口和基準(zhǔn)鏈接 建立超鏈接的標(biāo)記是 語法格式為 超鏈接標(biāo)識url 指明鏈接目標(biāo)的具體路徑和文件名 超鏈接標(biāo)識 是網(wǎng)頁中鏈接的載體 可以是文字或圖像等頁面元素 用戶點擊它就會跳到超鏈接的目標(biāo)位置 2 4 1建立超鏈接 2 4建立超鏈接 定義書簽在HTML中 首先要定義書簽 然后才在鏈接使用 定義書簽的語法格式為 書簽名不能用中文 只能用英文和數(shù)字 使用書簽鏈接其鏈接的格式為 超鏈接標(biāo)識 與書簽名之間不能有空格 2 4 2使用書簽 2 4建立超鏈接 1 標(biāo)記新窗口 target target blank 是鏈接標(biāo)記的一個參數(shù) 語法格式為 超鏈接標(biāo)識當(dāng)點擊鏈接載體的 就會在新窗口打開鏈接目標(biāo) 2 基準(zhǔn)鏈接標(biāo)記是單標(biāo)記 禁止使用結(jié)束標(biāo)記 可以改變文件中所有鏈接標(biāo)記的參數(shù)默認(rèn)值 它只能位于文件的開頭部分 即標(biāo)記與之間 語法格式為 2 4 3標(biāo)記新窗口和基準(zhǔn)鏈接 2 4建立超鏈接 2 5表格與框架 2 5 1建立表格2 5 2表格屬性2 5 3建立框架2 5 4框架屬性 表格標(biāo)記有 和四個 他們的具體含義是 定義表格 是表格必須的元素 定義標(biāo)題單元格 在這個單元格中的文字將用粗體表示 定義表格中的行 定義單元格 使用標(biāo)記一定要放在標(biāo)記內(nèi)部 上述標(biāo)記中 可以省略 其他三個是必須的 具體應(yīng)用見例2 12 標(biāo)記中可以添加屬性和參數(shù) 其中border 用于設(shè)置表格的邊框?qū)挾?值為大于等于 0 的整數(shù) 當(dāng)值為 0 在瀏覽器中顯示無邊框表格 無邊框表格是網(wǎng)頁布局最主要的手段 2 5 1建立表格 2 5表格與框架 除了border外 常用的表格屬性參數(shù)有 定義單元格之間的距離 值為大于等于 0 的整數(shù) 單位是像素 0 表示沒有間距 定義單元格內(nèi)的文字或其他元素到邊框的距離 值為大于等于 0 的整數(shù) 單位是像素 0 表示沒有距離 定義表格的高度 值有兩種單位 一是像素 表示表格高度為固定大小 一是百分比表示表格占據(jù)整個網(wǎng)頁的高度百分比 定義表格的寬度 與高度一樣有像素和百分比兩種單位 定義表格邊框的顏色 定義表格的背景色 2 5 2表格屬性 2 5表格與框架 1 框架頁的基本結(jié)構(gòu) 標(biāo)記一個普通的HTML文檔 用于在不支持框架的瀏覽器中顯示 用于定義分割窗口 可以設(shè)置窗口的分割方式及是否顯示框架邊框等 用于設(shè)置每個區(qū)域顯示的內(nèi)容 每個URL值指定一個事先己制作好的文件 2 5 3建立框架 2 5表格與框架 2 建立框架 1 建立縱向框架建立縱向框架的基本語法為 Cols 設(shè)置垂直分割窗口 用 分隔 它的值可以是像素值或者是百分比 代表對應(yīng)的子窗體占屏幕窗口的大小 如要將屏幕分割成三個子窗口 其中兩個都占整個窗口的30 那么只給開始的兩個窗口賦值 語句為 代表框架剩余的部分分給最后一個子窗口 當(dāng)然也可以寫成 2 5 3建立框架 2 5表格與框架 2 建立橫框架建立橫向框架的基本語法為 rows 這個參數(shù)用來水平分割窗口 它的值可以是數(shù)字或者是百分比 代表對應(yīng)的子窗口的大小 使用方法與cols相同 3 嵌套框架嵌套框架是在己有的框架中嵌入框架的結(jié)構(gòu) 利用嵌套框架可以實現(xiàn)窗口的橫向與縱向的混合分割 嵌套框架的設(shè)置見例2 16 2 5 3建立框架 2 5表格與框架 常用的框架屬性有以下幾種 1 設(shè)置框架的邊框 值為yes 或1 有邊框或no 或0 無邊框 2 設(shè)置各窗口之間的空白區(qū)域大小 值是以像素為單位的數(shù)值 3 設(shè)置邊框的顏色 值可以是的英文或顏色代碼 4 設(shè)置框架是否顯示滾動條 有三個值 yes表示有滾動條 no表示沒有 auto表示根據(jù)內(nèi)容的多少瀏覽器自動設(shè)置 5 設(shè)置框架在瀏覽器中不能被調(diào)整 2 5 4框架屬性 2 5表格與框架 本章小結(jié) 第2章HTML語言基礎(chǔ) 知識目標(biāo) 認(rèn)識Dreamweaver8操作界面掌握如何規(guī)劃站點的結(jié)構(gòu)掌握網(wǎng)頁文件的基本操作8 能力目標(biāo) 熟悉工作界面和使用各種面板能夠建立和管理本地站點熟練網(wǎng)頁文件的基本操作 第3章Dreamweaver基礎(chǔ) 3 1Dreamweaver8工作界面3 2規(guī)劃與創(chuàng)建站點3 3網(wǎng)頁文件的基本操作本章小結(jié) 第3章Dreamweaver基礎(chǔ) 3 1Dreamweaver8工作界面 3 1 1啟動Dreamweaver83 1 2Dreamweaver8操作界面 單擊 開始 按鈕 在開始菜單中依次選擇 程序 Macromedia MacromediaDreamweaver8 啟動Dreamweaver8程序 啟動Dreamweaver8后出現(xiàn)開始界面 3 1 1啟動和退出Dreamweaver8 3 1Dreamweaver8工作界面 在Dreamweaver8的起始頁中 單擊 創(chuàng)建新項目 下的 HTML 打開Dreamweaver8的工作界面 3 1 2Dreamweaver8操作界面 3 1Dreamweaver8工作界面 3 1 2Dreamweaver8操作界面 3 1Dreamweaver8工作界面 文檔工具欄 面板組和文件面板 3 2規(guī)劃與創(chuàng)建站點 3 2 1規(guī)劃網(wǎng)站的整體結(jié)構(gòu)3 2 2建立本地站點3 2 3管理本地站點 規(guī)劃網(wǎng)站的結(jié)構(gòu)要注意以下幾個方面 1 文件及文件夾的命名要規(guī)范2 不要將所有文件存放在站點根目錄下3 建立子文件夾對文件進(jìn)行分類存放4 每個主欄目下都建立獨立的Image目錄5 模板 Library 和庫 Templates 文件夾一定要位于站點根目錄之下并不能被更名 否則在使用模板和庫就會出錯 3 2 1規(guī)劃網(wǎng)站的整體結(jié)構(gòu) 3 2規(guī)劃與創(chuàng)建站點 創(chuàng)建站點 1 本地站點本地文件夾是我們在硬盤上建立的工作目錄 Dreamweaver將該文件夾作為 本地站點 2 遠(yuǎn)程站點遠(yuǎn)程文件夾是存儲文件的位置 Dreamweaver該文件夾稱為 遠(yuǎn)程站點 一般說來 遠(yuǎn)程文件夾位于運行Web服務(wù)器的計算機(jī)上 3 測試服務(wù)器測試服務(wù)器文件夾是Dreamweaver處理動態(tài)頁的文件夾 1建議 使用英文小寫字母命名站點中的文件夾和文件 2建議 文件名要易記 要統(tǒng)一命名 站點結(jié)構(gòu)規(guī)劃 選擇菜單 站點 管理站點 打開編輯站點對話框 站點維護(hù)操作 1新建站點 2編輯站點 3復(fù)制站點 4刪除站點 5導(dǎo)入和導(dǎo)出站點 1 在本地電腦硬盤上建立一個空的文件夾2 在Dreamweaver8中建立站點的操作 1 單擊菜單欄中 站點 新建站點 命令 打開 未命名站點1的站點定義為 對話框 3 2 2建立本地站點 3 2規(guī)劃與創(chuàng)建站點 2 在 您打算為您的站點起什么名字 對話框中輸入站點的名稱 如我們在此輸入 長春悠游網(wǎng) 然后單擊下一步 3 2 2建立本地站點 3 2規(guī)劃與創(chuàng)建站點 3 在對話框中選擇 否 我不想使用服務(wù)器技術(shù) 單擊 下一步 打開對話框 3 2 2建立本地站點 3 2規(guī)劃與創(chuàng)建站點 4 選擇 編輯我的計算機(jī)上的本地副本 完成后再上傳到服務(wù) 推薦 E 選項 5 單擊 瀏覽 按鈕 打開對話框 選擇D盤上創(chuàng)建的 myweb1 文件夾為站點本地根文件夾 6 單擊 下一步 打開對話框如下右圖 3 2 2建立本地站點 3 2規(guī)劃與創(chuàng)建站點 7 在 如何連接到遠(yuǎn)程服務(wù)器 選項的下拉列表中選擇 無 單擊下一步 打開站點定義的 總結(jié) 對話框如左圖 8 單擊 完成 后 可以在 文件 面板中看到所設(shè)置的站點 如右圖所示 單擊菜單欄中 站點 站點管理 命令 打開 站點管理 對話框 一 復(fù)制站點1 在 管理站點 對話框中 選擇要復(fù)制的站點 如選擇 依林小鎮(zhèn) 2 單擊對話框中的 復(fù)制 按鈕 即可復(fù)制出 依林小鎮(zhèn)復(fù)制 的站點 3 2 3管理本地站點 3 2規(guī)劃與創(chuàng)建站點 二 刪除站點1 在 管理站點 對話框中 選擇要刪除的站點 如選擇 依林小鎮(zhèn) 2 單擊對話框中的 刪除 按鈕 彈出提示對話框 詢問是否刪除本地站點 如圖所示 單擊 是 即可刪除本地站點 依林小鎮(zhèn) 3 2 3管理本地站點 3 2規(guī)劃與創(chuàng)建站點 三 編輯站點 編輯站點是對己創(chuàng)建的本地站點進(jìn)行修改和編輯 將 依林小鎮(zhèn)復(fù)制 站點的名稱改為 依林小鎮(zhèn) 為例的操作為 1 在 管理站點 對話框中選擇要編輯的站點 依林小鎮(zhèn)復(fù)制 2 單擊對話框中的 編輯 按鈕 打開 依林小鎮(zhèn)復(fù)制的站點定義為對話框 單擊高級選項卡 3 在站點名稱對話框中 將 依林小鎮(zhèn)復(fù)制 改為 依林小鎮(zhèn) 單擊 確定 按鈕即可 3 2 3管理本地站點 3 2規(guī)劃與創(chuàng)建站點 3 3網(wǎng)頁文件的基本操作 3 3 1新建網(wǎng)頁3 3 2保存網(wǎng)頁3 3 3關(guān)閉網(wǎng)頁3 3 4打開網(wǎng)頁3 3 5預(yù)覽網(wǎng)頁 1 執(zhí)行以下操作之一 單擊菜單欄中 文件 新建 命令 單擊標(biāo)準(zhǔn)工具欄上的按鈕 2 打開 新建文檔 對話框 3 選擇 基本頁 選項中的 HTML 單擊 創(chuàng)建 按鈕 即可新建一個空白的文檔 3 3 1新建網(wǎng)頁 3 3網(wǎng)頁文件的基本操作 1 執(zhí)行以下操作之一 單擊菜單欄中 文件 保存 命令 單擊標(biāo)準(zhǔn)工具欄上的按鈕 2 打開 另存為 對話框 3 在 保存在 選項中選擇網(wǎng)頁的保存位置 在 文件名 文本框中的輸入文件名 4 單擊 保存 按鈕 文件就保存到指定位置 3 3 2保存網(wǎng)頁 3 3網(wǎng)頁文件的基本操作 單擊菜單欄中 文件 關(guān)閉 或單擊文檔的窗口右上角的 關(guān)閉 即可 3 3 3關(guān)閉網(wǎng)頁 打開己保存的網(wǎng)頁有以下三種方法 通過文件菜單打開己有的網(wǎng)頁 1 執(zhí)行以下操作之一 單擊菜單欄中的 文件 打開 命令 或單擊標(biāo)準(zhǔn)工具欄上的 2 打開 打開 對話框 3 在查找范圍下拉列表中選擇網(wǎng)頁所在的文件夾 選擇要打開的文件 單擊 打開 按鈕 即可打開了文件2 在 文件 面板中打開網(wǎng)頁文件在 文件 面板中 雙擊要打開的文件 即可打開網(wǎng)頁3 在資源管理器中打開網(wǎng)頁文件在資源管理器中 右擊要打開的網(wǎng)頁文件 在彈出的快捷菜單中選擇 在Dreamweaver8 中編輯即可將文件在Dreamweaver8中打開 3 3 4打開網(wǎng)頁 3 3網(wǎng)頁文件的基本操作 以在Iexplore中預(yù)覽為例 執(zhí)行以下操作之一 單擊菜單欄中 文件 在瀏覽器中預(yù)覽 Iexplore6 0 命令 使用快捷鍵為F12 在文檔工具欄中單擊 選擇在瀏覽器中預(yù)覽 如圖所示 3 3 5預(yù)覽網(wǎng)頁 3 3網(wǎng)頁文件的基本操作 本章小結(jié) 第3章Dreamweaver基礎(chǔ) 知識目標(biāo) 掌握在網(wǎng)頁中的文本和段落的設(shè)置方法掌握圖像的插入及其屬性的設(shè)置的方法熟悉頁面屬性的設(shè)置熟悉各種超級鏈接及設(shè)置8 能力目標(biāo) 掌握文本和段落屬性設(shè)置的操作掌握圖像的插入及圖像屬性設(shè)置的操作掌握頁面屬性的設(shè)置操作掌握各種超級鏈接的設(shè)置及編輯操作 第4章網(wǎng)頁中的基礎(chǔ)元素 4 1在網(wǎng)頁中插入文本4 2在網(wǎng)頁插入圖像4 3插入其他網(wǎng)頁元素4 4設(shè)置網(wǎng)頁的頁面屬性4 5設(shè)置超級鏈接本章小結(jié) 第4章網(wǎng)頁中的基礎(chǔ)元素 4 1在網(wǎng)頁中插入文本 4 1 1插入文本4 1 2設(shè)置文本格式4 1 3段落格式的編輯4 1 4設(shè)置列表4 1 5簡單的CSS樣式應(yīng)用 一 插入普通文本 添加文本有以下三種方法 1 直接在文檔窗口中輸入文本 2 拷貝文本 3 從其他文檔導(dǎo)入文本 二 插入特殊字符1 將光標(biāo)定位在要插入特殊字符的位置 2 在 插入 欄的 文本 類別中 選擇要插入的符號 如圖 4 1 1插入文本 4 1在網(wǎng)頁中插入文本 1 選擇要設(shè)置的文本 2 在 屬性檢查器 設(shè)置文本格式 4 1 2設(shè)置文本格式 4 1在網(wǎng)頁中插入文本 一 應(yīng)用己有的標(biāo)題格式 二 自定義設(shè)置段落格式1 設(shè)置對齊方式2 設(shè)置段落縮進(jìn) 4 1 3段落格式的編輯 4 1在網(wǎng)頁中插入文本 列表包括項目列表和編號列表兩種 創(chuàng)建項目列表或編號列表的操作為 1 選擇要創(chuàng)建列表的文本 2 在 屬性檢查器 中單擊按鈕 可以創(chuàng)建項目列表 單擊按鈕 可以創(chuàng)建編號列表 3 單擊 屬性檢查器 中的按鈕 以彈出的 列表屬性 對話框中可以重新設(shè)置列表的屬性 4 1 4設(shè)置列表 4 1在網(wǎng)頁中插入文本 CSS是CascadingStyleSheets 層疊樣式表單 的簡稱 使用CSS樣式改變行距的操作為 1 按組合鍵Shift F11 打開CSS面板如所示 2 點擊CSS面板上的按鈕 打開 新建CSS規(guī)則 對話框并設(shè)置如圖右 單擊確定 4 1 5簡單的CSS樣式應(yīng)用 4 1在網(wǎng)頁中插入文本 單擊 確定 按鈕 打開 hangju的CSS規(guī)則定義 對話框 設(shè)置如圖 單擊 確定 退出 4 1 5簡單的CSS樣式應(yīng)用 4 1在網(wǎng)頁中插入文本 選擇要應(yīng)用樣式的兩段文本或光標(biāo)定位在段落中 在 屬性檢查器 中 樣式 下拉列表中 選擇 hangju 則文本的行距發(fā)生了改變 如圖所示 4 1 5簡單的CSS樣式應(yīng)用 4 1在網(wǎng)頁中插入文本 4 2在網(wǎng)頁插入圖像 4 2 1插入圖像4 2 2設(shè)置圖像屬性4 2 3編輯圖像4 2 4圖像外部編輯4 2 5鼠標(biāo)經(jīng)過圖像4 2 6創(chuàng)建導(dǎo)航條 在網(wǎng)頁中插入圖像的操作為 1 將光標(biāo)定位在要插入圖像的位置 2 執(zhí)行以下操作之一 單擊菜單欄中的 插入 圖像 命令 在 插入 欄的 常用 類別中 單擊 圖像 按鈕3 打開 選擇圖像源文件 對話框 選擇需要的文件名稱 6 在 相對于 下拉列表中選擇 站點 7 單擊 確定 按鈕 圖像則插入到網(wǎng)頁中 4 2 1插入圖像 4 2在網(wǎng)頁插入圖像 在文檔窗口選中圖像時 在 屬性檢查器中就可以顯示該圖像的屬性 并可對其進(jìn)行修改 1 設(shè)置圖像大小 可以直接在 寬 和 高 兩個文本框內(nèi)輸入新的數(shù)值即可 還可以直接用鼠標(biāo)拖動來改變圖像的大小 具體操作為 1 選中要改變的圖像 圖像四周出現(xiàn)控制點 2 拖動任一個控制點則可改變圖像大小 4 2 2設(shè)置圖像屬性 4 2在網(wǎng)頁插入圖像 3 設(shè)置圖像對齊方式4 其他圖像屬性 源文件 指定圖像的源文件 單擊 瀏覽 按鈕或者直接鍵入文件的路徑 可以重新定義源文件 替代 用于指定在圖像不能正常顯示時 顯示的關(guān)于圖像的文本提示信息 在某些瀏覽器中 當(dāng)鼠標(biāo)指針滑過圖像時也會顯示該文本 垂直邊距和水平邊距 以像素為單位設(shè)定圖像與周圍的網(wǎng)頁元素間的距離 邊框 是以像素為單位的圖像邊框的寬度 默認(rèn)為無邊框 4 2 2設(shè)置圖像屬性 4 2在網(wǎng)頁插入圖像 在Dreamweaver8中提供了基本圖像編輯功能 各編輯按鈕如下 優(yōu)化 單擊此按鈕可以打開 Fireworks 程序?qū)D像進(jìn)行優(yōu)化 裁剪 可讓修剪圖像的大小 從所選圖像中刪除不需要的區(qū)域 重新取樣 可對已調(diào)整大小的圖像進(jìn)行重新取樣 提高圖片在新尺寸和形狀下的品質(zhì) 亮度和對比度 可讓調(diào)整圖像的亮度和對比度設(shè)置 銳化可調(diào)整圖像的清晰度 4 2 3編輯圖像 4 2在網(wǎng)頁插入圖像 啟動外部圖像編輯器執(zhí)行以下操作之一 雙擊要編輯的圖像 選擇要編輯的圖像 然后在屬性檢查器中單擊 編輯 在 站點 面板中雙擊圖像文件 啟動主圖像編輯器 如果尚未指定圖像編輯器 Dreamweaver8將啟動該文件類型的默認(rèn)編輯器 4 2 4圖像外部編輯 4 2在網(wǎng)頁插入圖像 設(shè)置鼠標(biāo)經(jīng)過圖像的操作為 1 在 文檔 窗口中 將光標(biāo)定位在要顯示鼠標(biāo)經(jīng)過圖像的位置 2 執(zhí)行以下操作之一 打開插入鼠標(biāo)經(jīng)過圖像對話框 單擊菜單欄中 插入 圖像對象 鼠標(biāo)經(jīng)過圖像 命令 在 插入 欄的 常用 類別中 單擊 圖像 按鈕右側(cè)的箭頭 在彈出的菜單中 選擇 鼠標(biāo)經(jīng)過圖像 如圖所示 4 2 5鼠標(biāo)經(jīng)過圖像 4 2在網(wǎng)頁插入圖像 3 打開 鼠標(biāo)經(jīng)過圖像 對話框 4 單擊 確定 在網(wǎng)頁中插入了鼠標(biāo)經(jīng)過圖像 5 保存并在瀏覽器中預(yù)覽網(wǎng)頁 4 2 5鼠標(biāo)經(jīng)過圖像 4 2在網(wǎng)頁插入圖像 1 準(zhǔn)備好用于制作導(dǎo)航條的圖像 這些圖像最好大小尺寸一樣 2 在文檔窗口中 將光標(biāo)定位在要顯示導(dǎo)航條的位置 一般導(dǎo)航條位網(wǎng)頁的頂部或兩側(cè) 3 單擊菜單欄中 插入 圖像對象 導(dǎo)航條 4 打開對話框 在對話框中設(shè)置 在導(dǎo)航條中 每一個項目都對應(yīng)一個按鈕 該按鈕具有一組狀態(tài)圖像 最多可達(dá)四個 項目名稱在 導(dǎo)航條項目 列表中顯示 用箭頭按鈕排列項目在導(dǎo)航條中的位置 單擊 按鈕 添加另一個項目 單擊 可以刪除選中的項目 向上和向下的箭頭按鈕 用于調(diào)整項目在導(dǎo)航條中排序 4 2 6創(chuàng)建導(dǎo)航條 4 2在網(wǎng)頁插入圖像 5 設(shè)置完成一個項目后 單擊加號 按鈕向?qū)Ш綏l添加另一個項目 然后重復(fù)上述步驟定義該項目 6 完成設(shè)置后 單擊 確定 按鈕 在網(wǎng)頁中插入了導(dǎo)航條 4 2 6創(chuàng)建導(dǎo)航條 4 2在網(wǎng)頁插入圖像 4 3插入其他網(wǎng)頁元素 4 3 1水平線4 3 2日期和時間 一 插入水平線 在網(wǎng)頁中插入水平線的操作為 1 在 文檔 窗口中 將光標(biāo)定位在要插入水平線的位置 2 執(zhí)行下列操作之一 單擊菜單欄中 插入 HTML 水平線 命令 在 插入 欄的 HTML 類別中 單擊 水平線 按鈕 如圖 3 水平線插入在網(wǎng)頁中如圖 4 3 1水平線 4 3插入其他網(wǎng)頁元素 二 設(shè)置水平線屬性 1 選擇水平線2 打開 水平線屬性 如圖所示 寬 用于設(shè)置水平線的寬度 高 以像素為單位 設(shè)置水平線的高度 對齊 設(shè)置水平線的對齊方式 默認(rèn) 左對齊 居中對齊 或 右對齊 陰影 指定繪制水平線時是否帶陰影 取消選擇此選項將使用純色繪制水平線 4 3 1水平線 4 3插入其他網(wǎng)頁元素 三 增添顏色1 選擇水平線2 在 屬性檢查器 上 單擊打開快速標(biāo)簽編輯器如圖 3 插入color 顏色取值可以是英語 如yellow 也可用十六進(jìn)制代碼 如 FFFF00 4 3 1水平線 4 3插入其他網(wǎng)頁元素 一 將當(dāng)前日期插入到文檔中1在 文檔 窗口中 定位光標(biāo)在要插入日期的位置 在圖4 34的網(wǎng)頁中的圖像下面輸入文本 本網(wǎng)頁制作于 2執(zhí)行下列操作之一 單擊菜單欄中 插入 日期 命令 在 插入 欄的 常用 類別中 單擊 日期 按鈕3 打開 插入日期 對話框如圖 4 3 2日期和時間 4 3插入其他網(wǎng)頁元素 4 在對話框中 選擇星期格式 日期格式和時間格式 5 如選擇 儲存時自動更新 在每次保存文檔時都會更新插入的日期 取消選擇 日期在插入后變成純文本并永遠(yuǎn)不自動更新 6 單擊 確定 插入日期 效果如圖所示 4 3 2日期和時間 4 3插入其他網(wǎng)頁元素 4 4設(shè)置網(wǎng)頁的頁面屬性 4 4 1打開頁面屬性對話框4 4 2設(shè)置網(wǎng)頁的標(biāo)題4 4 3設(shè)置網(wǎng)頁的背景4 4 4設(shè)置網(wǎng)頁的文本4 4 5設(shè)置網(wǎng)頁的邊界 1 要打開頁面屬性對話框可以執(zhí)行以下操作之一 單擊菜單欄中 修改 頁面屬性 命令 單擊文本 屬性檢查器 中的 頁面屬性 按鈕 2 打開頁面屬性對話框 如圖所示 4 4 1打開頁面屬性對話框 4 4設(shè)置網(wǎng)頁的頁面屬性 1 在頁面屬性對話框中 選擇 標(biāo)題 編碼 分類 如圖所示 2 在 標(biāo)題 文本框內(nèi)輸入網(wǎng)頁的標(biāo)題內(nèi)容 如 長春游游網(wǎng) 3 點擊 確定 退出頁面屬性對話框 4 保存并在瀏覽器中預(yù)覽網(wǎng)頁 則標(biāo)題出現(xiàn)在瀏覽器的左上角 4 4 2設(shè)置網(wǎng)頁的標(biāo)題 4 4設(shè)置網(wǎng)頁的頁面屬性 一 設(shè)置網(wǎng)頁的背景顏色1 在頁面屬性對話框中 選擇 外觀 分類 2 執(zhí)行以下操作之一 在 背景顏色 對話框中輸入顏色的十六進(jìn)制代碼如 66CCFF 點背景顏色后的按鈕 打開調(diào)色板選擇顏色 3 點擊 確定 退出頁面屬性對話框 4 保存并在瀏覽器中預(yù)覽網(wǎng)頁 4 4 3設(shè)置網(wǎng)頁的背景 4 4設(shè)置網(wǎng)頁的頁面屬性 二 設(shè)置網(wǎng)頁的背景圖像1 在頁面屬性對話中 選擇 外觀 分類 2 點擊 背景圖像 后的 瀏覽 按鈕 打開選擇圖像源對話框 3 查找并選擇作為網(wǎng)頁背景的圖像 單擊 確定 退出頁面屬性對話框 4 保存并在瀏覽器中預(yù)覽網(wǎng)頁 5 重復(fù)選項 確定是否以及如何重復(fù)背景圖像 有四個選項 不重復(fù) 只在開始處顯示一次圖像 重復(fù) 在水平和垂直方向平鋪圖像 橫向重復(fù) 和 縱向重復(fù) 分別在水平和垂直方向重復(fù)排列背景圖像 4 4 3設(shè)置網(wǎng)頁的背景 4 4設(shè)置網(wǎng)頁的頁面屬性 在頁面屬性對話框架可以對網(wǎng)頁的文本進(jìn)行統(tǒng)一的字體 字號及文本顏色的設(shè)置1 在頁面屬性對話框中 選擇 外觀 分類 2 在 頁面字體 的下拉菜單中 選擇字體 3 在 大小 下拉菜單中 選擇字號 4 單擊 文本顏色 右側(cè)的調(diào)色板 可以設(shè)置文本的顏色 4 4 4設(shè)置網(wǎng)頁的文本 4 4設(shè)置網(wǎng)頁的頁面屬性 頁面屬性中 左邊距 右邊距 上邊距 和 下邊距 四個選項 用于設(shè)置網(wǎng)頁頁面元素與頁面邊界的寬度或高度 其右側(cè)下拉列表為寬度或高度的單位 默認(rèn)為 像素 4 4 5設(shè)置網(wǎng)頁的邊界 4 5設(shè)置超級鏈接 4 5 1超鏈接的路徑4 5 2創(chuàng)建基本超鏈接4 5 3錨點鏈接4 5 4熱區(qū)鏈接4 5 5電子郵件鏈接 絕對路徑 是提供所鏈接文檔的完整路徑 且包含其應(yīng)用協(xié)議 如http 主要用于創(chuàng)建站外具有固定地址的鏈接 如要建立到中央電視臺的鏈接就可以使用 文檔相對路徑 是以當(dāng)前文檔所在位置為起點到被鏈接文檔經(jīng)由的路徑 省略對于當(dāng)前文檔和所鏈接的文檔都相同的絕對路徑部分 而只提供不同的路徑部分 如 gerenwenjian jiangli html 具有可移植性 是網(wǎng)頁制作的首選 根目錄相對路徑 又稱服務(wù)器路徑 使用多個服務(wù)器的大型站點會要用到這種文檔路徑 如 image button gif 即是連接網(wǎng)絡(luò)服務(wù)器根目錄下的image文件夾中的button gif文件 必須在網(wǎng)絡(luò)環(huán)境之下才能使用這種路徑 4 5 1超鏈接的路徑 4 5設(shè)置超級鏈接 1 在網(wǎng)頁中 選擇要超鏈接的載體 文字或者圖 像 選擇 凈月潭國家森林公園 2 在屬性檢查器中 單擊 鏈接 后的 瀏覽 按鈕 打開 選擇文件 對話框 3 選擇鏈接的目標(biāo)文件 單擊 確認(rèn) 按鈕 4 在 屬性檢查器 中的 目標(biāo) 下拉菜單中 選擇目標(biāo)文件打開的位置 如圖 5 保存并在瀏覽器中預(yù)覽網(wǎng)頁 建立了超鏈接的文字變?yōu)樗{(lán)色并帶有下劃線 6 單擊創(chuàng)建超鏈接的文字 測試鏈接的完好性 4 5 2創(chuàng)建基本超鏈接 4 5設(shè)置超級鏈接 1 創(chuàng)建命名錨記 1 光標(biāo)定位在要創(chuàng)建命名錨記的位置 如在圖4 49網(wǎng)頁中的標(biāo)題 長春介紹 前定位光標(biāo) 2 執(zhí)行以下操作之一 單擊菜單欄中的 插入 命名錨記 命令 在 插入 欄中的 常用 類別中 單擊 命名錨記 3 打開 命名錨記 對話框 如圖 4 5 3錨點鏈接 4 5設(shè)置超級鏈接 4 在 錨記名稱 文本框中輸入錨記名稱 如 top 5 單擊 確定 按鈕退出 則在文檔的相應(yīng)位置出現(xiàn)一個圖標(biāo)這就是命名錨記的符號 4 5 3錨點鏈接 4 5設(shè)置超級鏈接 1 在網(wǎng)頁中插入圖片 2 單擊選中圖片 屬性檢查器 出現(xiàn)熱區(qū)工具按鈕 3 單擊 矩形 熱區(qū)按鈕 將光標(biāo)移到圖像上按下并拖動鼠標(biāo) 繪制出一個淺藍(lán)色帶有黑色的邊框的矩形區(qū)域 4 5 4熱區(qū)鏈接 4 5設(shè)置超級鏈接 4 松開鼠標(biāo) 屬性檢查器 變?yōu)?熱點屬性 如圖所示 設(shè)置鏈接 與文本或圖像的超鏈接設(shè)置相同 保存并在瀏覽器中預(yù)覽網(wǎng)頁 將光標(biāo)指向熱區(qū)位置時 出現(xiàn)手形圖標(biāo) 如圖所示 4 5 4熱區(qū)鏈接 4 5設(shè)置超級鏈接 1 在文檔窗口中 選擇鏈接載體 如選擇 站長信箱 文本 2 執(zhí)行以下操作之一 單擊菜單欄 插入 電子郵件鏈接 命令 在 插入 欄的 常用 類別中 單擊 電子郵件鏈接 按鈕 3 打開 電子郵件鏈接 對話框 4 文本 顯示己選中的文本 如沒有選擇文本 可在此直接輸入作為鏈接的文本載體 5 E Mail 輸入電子郵件地址 6 保存并在瀏覽器中預(yù)覽網(wǎng)頁測試電子郵件鏈接 4 5 5電子郵件鏈接 4 5設(shè)置超級鏈接 本章小結(jié) 第 章網(wǎng)頁中的基礎(chǔ)要素 知識目標(biāo) 掌握表格及單元格的創(chuàng)建和編輯掌握通過表格來進(jìn)行網(wǎng)頁頁面的布局方法掌握建立框架網(wǎng)頁及框架屬性設(shè)置的方法8 能力目標(biāo) 熟練掌握表格的基本操作熟練運用表格進(jìn)行網(wǎng)頁布局熟練運用框架進(jìn)行網(wǎng)頁的布局 第5章網(wǎng)頁頁面布局 5 1表格5 2表格布局5 3框架布局本章小結(jié) 第5章網(wǎng)頁頁面布局 5 1表格 5 1 1插入表格5 1 2添加內(nèi)容5 1 3選擇表格5 1 4設(shè)置表格屬性5 1 5編輯表格的基本操作 在表格中橫向為行 縱向為列 行列交叉部分就叫做單元格 單元格中的內(nèi)容和邊框之間的距離叫邊距 單元格和單元格之間的距離叫間距 表格的邊線叫做邊框 一 插入表格1 定位光標(biāo)在要插入表格的位置 然后執(zhí)行以下操作之一 單擊菜單欄中的 插入 表格 命令 在 插入 欄的 常用 類別中 單擊 表格 按鈕 2 打開表格對話框 5 1 1插入表格 5 1表格 5 1 1插入表格 5 1表格 3 單擊 確定 創(chuàng)建表格插入 4行5列 的表格 二 插入嵌套表格1 將光標(biāo)定位在表格的一個單元格內(nèi) 2 執(zhí)行插入表格的操作 即可在表格內(nèi)嵌套表格如圖 5 1 1插入表格 5 1表格 將插入點定位在表格內(nèi) 即可輸入文本 圖像 動畫等網(wǎng)頁元素 5 1 2添加內(nèi)容 5 1表格 一 選擇整個表格選擇整個表格執(zhí)行以下操作之一 單擊表格的左上角 右邊或底部邊緣的任意位置 單擊表格單元格 在菜單欄單擊 修改 表格 選擇表格 命令 二 選擇行或列1 鼠標(biāo)指向行的左邊緣或列的上邊緣 光標(biāo)變?yōu)榛?2 單擊鼠標(biāo)則選擇鼠標(biāo)指向的行或列 3 拖動鼠標(biāo) 則選擇連續(xù)的多行或多列 4 按Ctrl同時單擊鼠標(biāo) 則可選擇不連續(xù)的多行或多列 5 1 3選擇表格 5 1表格 三 選擇單元格1 選擇單個單元格 請執(zhí)行以下操作之一 單擊單元格 然后在文檔窗口左下角的標(biāo)簽選擇器中選擇標(biāo)簽 在單元格內(nèi)雙擊鼠標(biāo)則可選擇該單元格 在單元格內(nèi)單擊 然后按組合鍵Ctrl A 2 選擇連續(xù)的多個單元格可以執(zhí)行以下操作之一 單擊第一個單元格 按住Shift鍵的同時單擊另一個單元格 兩個單元格之間的矩形區(qū)域內(nèi)所有的單元格均被選中 在一個單元格中單擊并拖動鼠標(biāo)橫向或縱向移動到其他一個單元格 然后松開鼠標(biāo)則鼠標(biāo)經(jīng)過區(qū)域的單元格被選中 3 按Ctrl同時單擊單元格則可選擇不相鄰的多個單元格 5 1 3選擇表格 5 1表格 一 表格屬性表格被選中之后 可以利用表格屬性來設(shè)置或修改表格的屬性 二 單元格屬性單元格被選中或光標(biāo)定位在單元格中時 可以利用單元格屬性 來設(shè)置或修改單元格的屬性 5 1 4設(shè)置表格屬性 5 1表格 一 調(diào)整表格的大小 1 選擇整個表格 在表格的邊緣出現(xiàn)3個黑色控制點 2 執(zhí)行以下操作 用鼠標(biāo)拖動這些控制點則可改變表格的大小 在表格 屬性檢查器 中重新設(shè)置 高度 與 寬度 值 改變表格的大小 二 調(diào)整行高和列寬1 將鼠標(biāo)移到要調(diào)整的行高或列寬的邊框上 光標(biāo)變?yōu)榛?2 拖動鼠標(biāo)即調(diào)整行高或列寬 5 1 5編輯表格的基本操作 5 1表格 三 合并或折分單元格1 拆分單元格 1 選擇 或?qū)⒐鈽?biāo)定位在 要拆分的單元格 2 執(zhí)行以下操作之一 單擊菜單欄中的 修改 表格 拆分單元格 命令 在 屬性檢查器 中 單擊 拆分單元格 的按鈕 3 打開拆分單元格對話框如圖 4 在這可以選擇拆分行還是拆分列 以及設(shè)置拆分的行數(shù)或列數(shù) 如設(shè)置拆分為 行 行數(shù)為 2 5 單擊確定 單元格被拆分 5 1 5編輯表格的基本操作 5 1表格 2 合并單元格 1 選擇需要進(jìn)行合并的兩個以上單元格 2 執(zhí)行以下操作之一 單擊菜單欄 修改 表格 合并單元格 命令 在 屬性檢查器 中 單擊 合并單元格 按鈕 3 選的單元格被合并 5 1 5編輯表格的基本操作 5 1表格 四 插入和刪除行或列1 插入單行或單列在所選擇的行 列或單元格的上面及左側(cè)插入單行或單列 操作如下 1 選擇行 列或單元格 2 單擊菜單欄中的 修改 表格 插入行 或 插入列 命令 選擇 插入列 命令 可以在所選列的左側(cè)添加一列 選擇 插入行 命令 可以在所選行的上面添加一行 5 1 5編輯表格的基本操作 5 1表格 2 插入多行或多列 1 選擇行 列或單元格 2 單擊菜單欄中的 修改 表格 插入行或列 的命令 打開 插入行或列 對話框 3 選擇插入 列 或 行 并設(shè)置數(shù)目 單擊確定 5 1 5編輯表格的基本操作 5 1表格 3 刪除行或列在表格中刪除行或列的操作為 1 選擇要刪除的行或列 2 執(zhí)行以下操作之一 單擊菜單欄中的 修改 表格 刪除行 或 刪除列 命令 單擊菜單欄中的 編輯 清除 命令 使用鍵盤上的 Delete 鍵 5 1 5編輯表格的基本操作 5 1表格 5 2表格布局 5 2 1布局視圖5 2 2繪制布局表格和布局單元格5 2 3編輯布局表格和布局單元格 5 2表格布局 一 切換布局視圖1 執(zhí)行以下操作之一 單擊菜單欄中 視圖 表格視圖 布局視圖 命令 在 插入 欄的 布局 類別中 單擊 布局模式 按鈕 2 打開 從布局模式開始 對話框 5 2 1布局視圖 5 2表格布局 3 單擊 確定 按鈕 進(jìn)入布局視圖模式 4 單擊 退出 按鈕 或單擊相應(yīng)的其他視圖按鈕 退出布局視圖 5 2 1布局視圖 5 2表格布局 二 布局工具按鈕在 插入欄 的 布局 類別中 有布局用的各種工具按鈕 從左到右依次為 標(biāo)準(zhǔn) 單擊進(jìn)入標(biāo)準(zhǔn)視圖模式 擴(kuò)展 單擊進(jìn)入擴(kuò)展表格模式 布局 單擊進(jìn)入布局視圖模式 用于繪制布局表格 用于繪制布局單元格 用于添加布局框架 用于導(dǎo)入表格數(shù)據(jù) 5 2 1布局視圖 5 2表格布局 一 繪制布局表格1 切換到布局視圖模式2 單擊 繪制布局表格 按鈕 鼠標(biāo)指針變?yōu)?3 在文檔窗口中 按住鼠標(biāo)左鍵并拖動 可以繪制出布局表格 表格的框線顯示為綠色 5 要繪制多個布局表格 按住Ctrl鍵同時單擊 繪制布局表格 按鈕 6 每個布局表格都在頂端有標(biāo)簽 并在布局表格的底端或頂端顯示表格的大小 5 2 2繪制布局表格和布局單元格 5 2表格布局 7 單擊 繪制布局表格 按鈕 可以在布局表格內(nèi)繪制嵌套的布局表格如圖所示 嵌套的表格大小不能超過包含它的布局表格 5 2 2繪制布局表格和布局單元格 5 2表格布局 二 繪制布局單元格1 切換到布局視圖模式2 單擊 繪制布局單元格 按鈕 鼠標(biāo)指針變?yōu)?3 在布局表格中合適位置 按住鼠標(biāo)左鍵并拖動 可以繪制出布局單元格 單元格的框線顯示為藍(lán)色 如圖所示 4 要繪制多個單元格 可以在按住Ctrl鍵的同時單擊 繪制布局單元格 按鈕并繪制 5 2 2繪制布局表格和布局單元格 5 2表格布局 一 移動布局表格和布局單元格1 單擊布局表格標(biāo)簽 可以選中布局表格 單擊單元格邊框 可以選擇布局單元格 2 用鼠標(biāo)拖動布局表格或布局單元格到合適位置 二 調(diào)整布局表格和布局單元格大小1 選擇