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

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