Dreamweaver網(wǎng)頁制作課件

1、Dreamweaver網(wǎng)頁制作主講：周星宇第一章 網(wǎng)頁制作基礎(chǔ)知識1.1 網(wǎng)頁制作概述1.2 HTML基礎(chǔ)1.3 DreamWeaver概述1.1 網(wǎng)頁制作概述1.1.1 網(wǎng)頁的基本概念1.1.2 網(wǎng)頁制作的一般過程1.1.3 網(wǎng)頁制作常用軟件1.1.4 網(wǎng)頁制作中注意的問題1.1.1 網(wǎng)頁的基本概念1. 網(wǎng)頁網(wǎng)頁就是在瀏覽器上看到的一個一個的頁面。網(wǎng)頁都是用HTML的文件格式來表示的。2. 網(wǎng)頁的類型 按照網(wǎng)頁在一個網(wǎng)站中所處的位置可將其分為：主頁：是指進(jìn)入一個網(wǎng)站時看到的第一頁。 內(nèi)頁：是指與主頁相鏈接的與本網(wǎng)站相關(guān)的頁面。1.1.1 網(wǎng)頁的基本概念3. 瀏覽器瀏覽器是專門用于瀏覽網(wǎng)頁的軟

2、件，如IE。4. 網(wǎng)頁制作網(wǎng)頁制作就是編寫網(wǎng)頁文件。5. 常見的名詞(1) 域名一個網(wǎng)站的網(wǎng)址。好像一個名字，該名字是全世界唯一的。 1.1.1 網(wǎng)頁的基本概念(2) 站點(diǎn)它是構(gòu)建在網(wǎng)絡(luò)上、具有獨(dú)立名稱的邏輯上的獨(dú)立體。大到一個網(wǎng)站，小到一個網(wǎng)頁。(3) 超級鏈接是指將一個網(wǎng)站中的不同頁面連接起來的功能。(4) 導(dǎo)航條相當(dāng)于一個網(wǎng)站的目錄，導(dǎo)航條通過超級鏈接與各個站點(diǎn)或網(wǎng)頁鏈接。1.1.1 網(wǎng)頁的基本概念(5) 表單是用于申請或提交某些信息而填寫的交互網(wǎng)頁。(6) 發(fā)布是將制作好的網(wǎng)頁上傳到網(wǎng)上的過程。 (7) URL是全球資源定位器。它的功能是提供一種在Internet上查找任何信息的標(biāo)準(zhǔn)方

3、法。使用最廣的URL形式是用于表示網(wǎng)頁的Internet位置。 http:/1.1.2 網(wǎng)頁制作的一般過程收集、整理素材規(guī)劃站點(diǎn)內(nèi)容制作網(wǎng)頁測試站點(diǎn)發(fā)布網(wǎng)頁創(chuàng)建導(dǎo)航條創(chuàng)建返回主頁鏈接構(gòu)建頁面框架填充內(nèi)容制作網(wǎng)頁的原則：為讀者提供有用的信息；要美觀。1.1.3 網(wǎng)頁制作常用軟件(1) 圖像處理軟件用來對圖片進(jìn)行效果處理。常用的有：Photoshop和Fireworks。Fireworks具有便捷的圖片和按鈕制作功能，并能快捷地生成網(wǎng)頁中常用的GIF、JPEG等圖像格式。(2) 動畫制作軟件常用的有Flash。用它能制作出具有交互功能的平面動畫，并且生成的播放文件很小，有利于網(wǎng)上發(fā)布。1.1.3

4、網(wǎng)頁制作常用軟件(3) 網(wǎng)頁布局軟件網(wǎng)頁布局就像Word排版一樣，只需將一個頁面中的內(nèi)容合理地整合即可。常用的有：FrontPage和Dreamweaver。Dreamweaver與FrontPage相比，它的排版能力更強(qiáng)，功能更全面、操作更靈活、專業(yè)性更強(qiáng)。1.1.3 網(wǎng)頁制作常用軟件圖形處理軟件Photoshop和Fireworks網(wǎng)頁布局軟件FrontPage和Dreamweaver動畫制作軟件Flash（Macromedia）圖片F(xiàn)lash動畫處理導(dǎo)入制作導(dǎo)入，作為網(wǎng)頁的插件通過小插件插入圖 三類軟件間的相互關(guān)系示意圖1.1.4 網(wǎng)頁制作中注意的問題首頁精簡頁面簡樸善用圖片鏈接豐富有綱

5、有領(lǐng)1.2 HTML基礎(chǔ)1.2.1 HTML的概念1.2.2 HTML的語法規(guī)則1.2.3 HTML文件的基本結(jié)構(gòu)1.2.4 HTML的常用標(biāo)記1.2.5 格式化文本1.2.1 HTML的概念HTML（Hypertext Markup Language，超文本標(biāo)記語言）是一種純文本類型的標(biāo)記式語言，不需要編譯而直接由瀏覽器解釋執(zhí)行。是目前Internet上用于編寫網(wǎng)頁的主要語言。它的作用是通過一些標(biāo)簽來告訴瀏覽器怎么顯示標(biāo)簽中的內(nèi)容。 HTML不僅要負(fù)責(zé)組織數(shù)據(jù)，還要負(fù)責(zé)顯示這些數(shù)據(jù)。HTML中的標(biāo)簽是固定的，不能自己擴(kuò)展標(biāo)簽。1.2.2 HTML的語法規(guī)則 HTML的語法規(guī)則有三種表達(dá)方式：

6、表達(dá)方式一：對象 封閉類型標(biāo)記，占多數(shù)。成對出現(xiàn)。例如(粗體顯示)： 網(wǎng)頁制作課程 表達(dá)方式二： 對象封閉類型標(biāo)記的擴(kuò)展形式，利用屬性可以進(jìn)一步設(shè)置對象某方面的內(nèi)容，而參數(shù)則是設(shè)置的結(jié)果。例如（創(chuàng)建超級鏈接）： 新浪主頁 1.2.2 HTML的語法規(guī)則 表達(dá)方式三： 非封閉類型標(biāo)記，較少，例如換行符：例如(以兩行顯示)： 網(wǎng)頁制作課程 語法規(guī)則說明：以純文本形式存放，擴(kuò)展名為“*.htm”或“*html”HTML標(biāo)記不分大小寫多數(shù)HTML標(biāo)記可以嵌套，但不可交叉如：錯誤：北京HTML文件一行可以寫多個標(biāo)記，也可以一個標(biāo)記寫在多行中，但一個單詞不能分兩行寫HTML源文件的換行、回車符及多個空格在

7、顯示時都是無效的。是換行符，是換段符注釋：正確：北京1.2.3 HTML文件的基本結(jié)構(gòu)一個典型的HTML文本的基本結(jié)構(gòu)形式如下： HTML文件標(biāo)記 文件頭標(biāo)記 標(biāo)題標(biāo)記 文本標(biāo)題 文件體標(biāo)記，網(wǎng)頁中的所有內(nèi)容 文本內(nèi)容 1.2.3 HTML文件的基本結(jié)構(gòu)1.2.3 HTML文件的基本結(jié)構(gòu)文件體標(biāo)題1.2.4 HTML的常用標(biāo)記1. HTML標(biāo)記符這兩個標(biāo)記符是HTML文檔的標(biāo)記符。處于文檔的最前端，表示文檔的開始，即瀏覽器從開始解釋。而則位于文件的最后一行，這樣的結(jié)果表示這一整份的文檔都是HTML語法的文檔。 1.2.4 HTML的常用標(biāo)記2. HEAD標(biāo)記符 是HTML文件頭標(biāo)記符，用來描述

8、HTML首部的內(nèi)容，說明文檔的整體信息。所有首部信息并不會出現(xiàn)在利用WWW瀏覽器所看到的窗體中。通常與某些標(biāo)記符一起使用。如： 標(biāo)記符。1.2.4 HTML的常用標(biāo)記3. TITLE標(biāo)記符指的是一份文檔的標(biāo)題。通常來說，每一份文檔都應(yīng)該有一個標(biāo)題來簡述這一份文檔的特色或是主題。對于WWW瀏覽器而言，標(biāo)題所在的位置雖然依照瀏覽器的不同而不同，但是大部分都位于瀏覽器的最上方。 1.2.4 HTML的常用標(biāo)記4. BODY標(biāo)記符指的是定義出一個HTML文檔的體部，位于首部下面。在標(biāo)記符內(nèi)的文字，所有使用標(biāo)記符的地方都可以經(jīng)瀏覽器正確地顯示在瀏覽器窗體中。 1.2.5 格式化文本1. 字型設(shè)置標(biāo)記1.

9、2.5 格式化文本2. 字體格式設(shè)置格式：文字3. 字號設(shè)置格式：文字Size：17的整數(shù)， 1號最小。默認(rèn)字號為3。4. 文字顏色設(shè)置格式：文字練 習(xí)格式化文本，要求： 文本內(nèi)容：“網(wǎng)頁制作”，字體為“隸書”,字號為“6”，字體顏色為“#ooooff”。網(wǎng)頁制作1.2.5 格式化文本5. 標(biāo)題格式設(shè)置格式：標(biāo)題文字有6級標(biāo)題，n的值為16，值越小，字號越大。6. 段落對齊設(shè)置：格式：align屬性值：“l(fā)eft”、“center”、“right”7. 強(qiáng)制換行標(biāo)記：格式：是一個單標(biāo)記，與的區(qū)別是：段落標(biāo)記的行距要寬。練 習(xí)在記事本中編寫一個完整的HTML文件，要求：標(biāo)題為“歡迎光臨我的主頁”

10、主頁內(nèi)容為“網(wǎng)頁制作課程簡介”，其中：字體為“隸書”,字號為“6”，字體顏色為“#ooooff”。段落內(nèi)容居中顯示。1.3 DreamWeaver概述1.3.1 Dreamweaver的界面1.3.2 文檔的基本操作1.3.1 Dreamweaver的界面1. 插入欄放置了各種類型的對象（如圖像、表格和層等的按鈕）。每個對象都有一段HTML代碼，允許在插入它時設(shè)置不同的屬性。2. 工具欄放置了各種視圖（如設(shè)計視圖、代碼視圖）、各種查看選項(xiàng)和一些常用的操作按鈕。 3. 編輯窗口顯示當(dāng)前創(chuàng)建和編輯的文檔。1.3.1 Dreamweaver的界面4. 屬性面板用于查看和更改所選對象或文本的各種屬性，

11、選取不同的對象，其屬性面板內(nèi)容不同。5. 可?？扛用姘迨峭？吭谀硞€標(biāo)題下面的相關(guān)面板的集合。6. 狀態(tài)欄用于顯示當(dāng)前文檔的狀態(tài)。7. 快捷菜單工具欄插入欄屬性面板編輯窗口浮動面板組網(wǎng)頁標(biāo)簽1.3.2 文檔的基本操作1. 文檔的存取單擊“文件”“打開”命令。2. 文檔的編輯3. 在瀏覽器中預(yù)覽網(wǎng)頁單擊“文件”“在瀏覽器中預(yù)覽” ”“Iexplore”命令F12。1.3.2 文檔的基本操作4. 文檔視圖的選擇(1) 從網(wǎng)頁的設(shè)計方面考慮：標(biāo)準(zhǔn)視圖：是典型的Dreamweaver設(shè)計視圖。布局視圖：可以繪制布局單元格或布局表格并在其中添加各種內(nèi)容（如圖像、文本等）。(2) 從文檔窗口顯示的內(nèi)容方面

12、考慮：代碼視圖代碼和設(shè)計視圖設(shè)計視圖第二章 如何創(chuàng)建自己的網(wǎng)站2.1 網(wǎng)站的概念站點(diǎn)包括：本地和遠(yuǎn)程使用Dreamweaver創(chuàng)建Web站點(diǎn)最常見的方法是在您的本地磁盤上創(chuàng)建并編輯網(wǎng)頁，然后將這些網(wǎng)頁的副本上傳到一個遠(yuǎn)程Web服務(wù)器使公眾可以訪問它們。2.2 站點(diǎn)管理2.2 站點(diǎn)管理2.2.1 新建本地站點(diǎn)2.2.2 編輯本地站點(diǎn)2.2.3 編輯站點(diǎn)文件2.2.4 在瀏覽器中預(yù)覽2.2.1 新建本地站點(diǎn)圖 新建站點(diǎn)對話框_1輸入站點(diǎn)名字單擊“下一步”單擊“基本”選項(xiàng)卡圖 新建站點(diǎn)對話框_2單擊“下一步”選擇“否”，表示該站點(diǎn)是一個靜態(tài)站點(diǎn)，沒有動態(tài)頁。圖 新建站點(diǎn)對話框_3單擊“下一步”選擇站

13、點(diǎn)的本地根文件夾選中圖 新建站點(diǎn)對話框_4選擇“無”單擊“下一步”圖 新建站點(diǎn)對話框_5 “總結(jié)”界面單擊“完成”2.2.2 編輯本地站點(diǎn)單擊“站點(diǎn)”“管理站點(diǎn)”命令?？梢詫φ军c(diǎn)進(jìn)行編輯、刪除和復(fù)制等操作。圖 “管理站點(diǎn)”對話框2.2.3 編輯站點(diǎn)文件1. 新建文件夾右擊“站點(diǎn)”窗口的空白處，在彈出菜單中選擇“新建文件夾”。2. 新建文件右擊新建的文件夾，在彈出菜單中選擇“新建文件”。此時即可在Dreamweaver窗口中進(jìn)行網(wǎng)頁文件的編輯。2.2.3 編輯站點(diǎn)文件3. 復(fù)制文件/文件夾4. 刪除文件/文件夾5. 重命名文件/文件夾6. 打開文件打開一個已有的網(wǎng)頁文件 example.htm。

14、7. 保存文件單擊“文件”“另存為”，將它保存到站點(diǎn)中。2.2.4 在瀏覽器中預(yù)覽單擊“文件”“在瀏覽器中預(yù)覽” “iexplore”命令。 上機(jī)實(shí)戰(zhàn)創(chuàng)建我的站點(diǎn)地圖要求：在D盤建立名為Mysite的站點(diǎn)在新建站點(diǎn)下建立名為untitled、image及web的三個文件夾。將名為untitled的文件夾改名為yuansuji第三章 基本操作3.1 創(chuàng)建和編輯文檔3.2 插入圖片3.3 插入其他媒體3.4 上機(jī)實(shí)戰(zhàn)3.1 創(chuàng)建和編輯文檔3.1.1 創(chuàng)建文檔3.1.2 設(shè)置頁面屬性3.1.3 屬性面板3.1.4 文本設(shè)置3.1.5 段落設(shè)置3.1.1 創(chuàng)建文檔單擊“文件”“新建”命令。3.1.2

15、設(shè)置頁面屬性單擊“修改”“頁面屬性”命令。圖 “頁面屬性”對話框3.1.2 設(shè)置頁面屬性外觀頁面字體、大小、文本顏色、背景顏色鏈接標(biāo)題標(biāo)題/編輯頁面實(shí)例：設(shè)置個性化標(biāo)題方法1：查看工具欄文檔標(biāo)題方法2：標(biāo)題/編輯頁面3.1.3 屬性面板文本類型（段落/標(biāo)題）字體字體大小字體顏色粗體 斜體 段落對齊方式段落整體凸出 縮進(jìn)設(shè)置項(xiàng)目無序列表 有序列表圖 “屬性面板”建立鏈接3.1.4 文本設(shè)置1. 設(shè)置文本格式2. 設(shè)置字體顏色1. 設(shè)置文本格式文本類型：可選擇文本為段落還是標(biāo)題類型。字體大?。骸?”表示在原字體上加大字號。 “-”表示在原字體上減小字號?！?7”和“7”號字的大小相同。文本類型（段

16、落/標(biāo)題）字體字體大小字體顏色粗體 斜體 圖 “屬性面板”2. 設(shè)置字體顏色使字體顯示默認(rèn)色打開“顏色”對話框圖 “顏色”對話框圖 “顏色列表”3.1.5 段落設(shè)置1. 設(shè)置段落對齊方式2. 設(shè)置列表首先將文本類型設(shè)置為段落： 在“格式”下拉列表框中選擇“段落”。段落對齊方式段落整體凸出 縮進(jìn)設(shè)置項(xiàng)目無序列表 有序列表圖 “屬性面板”3.2 插入和編輯圖像2.3.1 圖像文件格式2.3.2 插入圖像 直接插入圖像 用占位符插入圖像2.3.3 編輯圖像3.2.1 圖像文件格式JPG/JPEG(聯(lián)合圖像專家組)：有損壓縮格式的圖像，擴(kuò)展名jpg或jpeg;它支持24位真彩色，如果要顯示的圖像特別重

17、視色彩，可以使用該類型的圖像。GIF(圖像交換格式)：無損壓縮，僅支持8位顏色，適用于顯示卡通等對色彩要求不高的地方；它支持動畫格式，所以在網(wǎng)絡(luò)上很流行。 直接插入圖像單擊“插入”“圖像”命令。如果圖像文件不在定義的本地站點(diǎn)中，則詢問是否復(fù)制到本地站點(diǎn)中。圖 “選擇圖像源”對話框選中“文件系統(tǒng)”單選項(xiàng) 用占位符插入圖像占位符用于在圖像為準(zhǔn)備好之前要安排頁的布局在插入欄的“常用”選 按鈕 雙擊占位符插入圖像“圖像占位符”對話框3.2.3 編輯圖像更換圖像輸入該圖像的名稱以便用腳本語言（如JavaScript）引用。邊框粗細(xì)設(shè)置圖像左側(cè)和右側(cè)的邊距設(shè)置圖像頂部和底部的邊距圖像與周圍文字的對齊方式寬

18、、高建立鏈接圖 圖像屬性面板 3.3 插入其他媒體3.3.1 插入水平線 插入HTML水平線3.3.2 插入Flash插入媒體3.4上機(jī)實(shí)戰(zhàn)新建一個網(wǎng)頁，輸入不同字體和顏色的文字，并為其加上背景圖片。選擇一張喜歡的圖片，插入到網(wǎng)頁中，使文字與圖環(huán)繞插入一張圖片，要求當(dāng)鼠標(biāo)滑過圖片時能看到相關(guān)介紹在網(wǎng)頁中練習(xí)插入各種媒體（flash按鈕、水平線等）第四章 表格技術(shù)4.1 添加表格4.2 表格的設(shè)置4.3 實(shí)例應(yīng)用4.4 上機(jī)實(shí)戰(zhàn)4.1 添加表格4.1.1 表格的概念表格：由一些線條分開的小格組成。邊框：組成表格的線條。單元格：被邊框分開的區(qū)域。行：位于水平方向的一系列單元格。列：位于垂直方向的一

19、系列單元格。單元格中可以存放數(shù)據(jù)、文字、圖形、圖片。單元格內(nèi)部邊距：文字或其他對象同單元格邊緣之間的距離。單元格間距：單元格之間的距離4.1.1 表格的基本概念班級學(xué)號姓名計算機(jī)0101張千 列1列2列3行1行2邊框單元格間距內(nèi)部邊距4.1.2. 插入表格切換到設(shè)計視圖窗口。單擊“插入”欄中的“布局”選項(xiàng)卡。單擊“標(biāo)準(zhǔn)視圖”按鈕“插入表格”按鈕，打開“插入表格”對話框?！安迦氡砀瘛卑粹o圖 “插入表格”對話框說明在“頁眉”部分選擇一個標(biāo)題選項(xiàng)：無:對表不啟用列或行標(biāo)題。左側(cè): 可以將表的第一列作為標(biāo)題列，以便為表中的每一行 輸入一個標(biāo)題。 頂部: 可以將表的第一行作為標(biāo)題行，以便為表中的每一列

20、輸入一個標(biāo)題。兩者: 使您能夠在表中輸入列標(biāo)題和行標(biāo)題。在“輔助功能”部分指定以下選項(xiàng)：標(biāo)題:提供了一個顯示在表格外的表格標(biāo)題。對齊標(biāo)題:指定表格標(biāo)題相對于表格的顯示位置。摘要:給出了表格的說明。屏幕閱讀器可以讀取摘要文本，但是該文本不會顯示在用戶的瀏覽器中。4.1.3. 在表格中添加內(nèi)容單元格中可以插入任何類型的數(shù)據(jù)，例如文本、圖像、表單甚至表格，同時可以按照通常的編輯方式編輯其中的內(nèi)容。4.2 表格的設(shè)置1. 選取表格、行、列2. 調(diào)整表格和單元格的大小3. 在表格中插入行或列4. 刪除行/列/表格5. 合并、拆分單元格以上操作中使用菜單命令的方法：方法一：單擊“修改”“表格”命令，選擇其

21、中相應(yīng)的命令。方法二：將光標(biāo)定位在表格中，單擊右鍵，選擇快捷菜單中的相應(yīng)命令。4.2 編輯表格1. 選取表格、行、列選定表格：使用菜單命令。選定行、列：鼠標(biāo)指向行、列，光標(biāo)變成箭頭后點(diǎn)左鍵。2. 調(diào)整表格和單元格的大小方法一：使用菜單命令。方法二：直接用鼠標(biāo)拖動邊框。3. 在表格中插入行或列方法一：使用菜單命令。方法二：右擊，單擊“表格”“選擇表格”命令，然后直接修改屬性面板中的行數(shù)、列數(shù)。4. 刪除行/列/表格方法一：使用菜單命令。方法二：同插入方法二。方法三：選中要刪除的行/列/表格，按delete鍵。5. 合并、拆分單元格選中單元格，使用菜單命令。表格格式化1. 設(shè)置表格屬性2. 設(shè)置單

22、元格屬性3. 自動套用格式1. 設(shè)置表格屬性如果窗口中沒有屬性面板，可單擊“窗口”“屬性”命令。將光標(biāo)定位在表格中，單擊右鍵，選擇“表格”“選擇表格”命令?；蛘邌螕簟靶薷摹薄氨砀瘛薄斑x擇表格”命令。打開表格屬性面板。清除列寬清除行高表格與同一段落中文本或圖像的對齊方式。將表格寬度/高度轉(zhuǎn)換成像素將表格寬度/高度轉(zhuǎn)換成 %單元格內(nèi)間距（像素）單位是：像素2. 設(shè)置單元格屬性單元格中的文本在“水平”/“垂直”方向上的對齊方式以“像素”表示，若以百分比表示，在數(shù)值后加% 使單元格成為標(biāo)題單元格 圖 單元格的屬性面板3. 自動套用格式可用系統(tǒng)提供的表格設(shè)計方案來格式化表格。具體操作：選取表格。單擊“命

23、令”“格式化表格”命令，顯示“格式化表格”對話框。在列表中選擇合適的設(shè)計方案。單擊“確定”。3. 自動套用格式圖 “格式化表格”對話框邊框粗細(xì)?！?”表示無表格線表格實(shí)例應(yīng)用制作個人簡歷制作各種不同效果的立體表格突出的立體表格邊框凹進(jìn)的立體表格凹進(jìn)的立體表格邊框突出的立體表格上機(jī)實(shí)戰(zhàn)利用表格技術(shù)重新布局你的網(wǎng)頁第五章 創(chuàng)建超級鏈接超級鏈接的類型超級鏈接的路徑創(chuàng)建鏈接實(shí)例應(yīng)用5.1 超級鏈接的類型超級鏈接有源端點(diǎn)和目標(biāo)端點(diǎn)兩種鏈接形式。源端點(diǎn)超級鏈接中有鏈接的一端稱為鏈接的源端點(diǎn)。目標(biāo)端點(diǎn)超級鏈接中跳轉(zhuǎn)到的頁面稱為鏈接的目標(biāo)端點(diǎn)。5.1 超級鏈接的類型源端點(diǎn)的鏈接：文本鏈接：即文字鏈接。帶有下劃

24、線的文字。 圖像鏈接：單擊圖像跳轉(zhuǎn)到相關(guān)的瀏覽頁面。美觀實(shí)用。最常用。表單鏈接：當(dāng)填寫完一個表單后，單擊提交或取消等按鈕時會自動跳轉(zhuǎn)頁面。5.1 超級鏈接的類型目標(biāo)端點(diǎn)的鏈接：外部鏈接：鏈接的目標(biāo)端點(diǎn)是本站點(diǎn)外的站點(diǎn)或文檔。如:友情鏈接。 內(nèi)部鏈接：鏈接的目標(biāo)端點(diǎn)是本站點(diǎn)中的其他文檔。E-mail鏈接：單擊該鏈接可以啟動電子郵件程序,允許書寫并發(fā)送郵件到指定的郵箱地址。局部鏈接：是通過文檔中的命名錨實(shí)現(xiàn)的,在瀏覽時即可跳轉(zhuǎn)到當(dāng)前文檔或其他文檔的某一指定位置。5.2 超級鏈接的路徑復(fù)習(xí)： URL是全球資源定位器。它的功能是提供一種在Internet上查找任何信息的標(biāo)準(zhǔn)方法。每個網(wǎng)頁只有唯一的地址

25、，稱為資源定位符（即URL地址）。通過URL可以訪問世界上任何發(fā)布在網(wǎng)上的信息。完整的URL地址： 協(xié)議類型:/服務(wù)器名:端口號/目錄/文件名+文檔中的命名錨 :1024/news/index.html#hello5.2 超級鏈接的路徑1. 絕對路徑絕對路徑提供鏈接目標(biāo)端點(diǎn)所需的完整的URL地址，包括使用的協(xié)議類型。 例如：http:/news/index.html優(yōu)點(diǎn)： 路徑與源端點(diǎn)所處的位置無關(guān)。不論源端點(diǎn)如何移動，都可以正常實(shí)現(xiàn)跳轉(zhuǎn)。缺點(diǎn)： 如果目標(biāo)在本網(wǎng)站上，則會給移植和測試帶來不便，因此，對內(nèi)部鏈接和局部鏈接最好不使用絕對路徑。5.2 超級鏈接的路徑2. 相對路徑是目標(biāo)端點(diǎn)與源端點(diǎn)之

26、間的相對位置，它的參考點(diǎn)是源端點(diǎn)，與協(xié)議類型、網(wǎng)址和根目錄的位置無關(guān)。優(yōu)點(diǎn)： 只要站點(diǎn)的結(jié)構(gòu)和文件的相對位置不變，鏈接就不會出現(xiàn)錯誤。缺點(diǎn)： 如果修改了站點(diǎn)的結(jié)構(gòu)，或移動了文檔，則文檔中的鏈接就會失敗。5.2 超級鏈接的路徑3. 基于根目錄的路徑可以看作是一個基于本網(wǎng)站的根目錄的相對路徑，通常用一個/表示根目錄。不管源端點(diǎn)在哪個文件中，都可以使用正確的路徑鏈接到指定的位置。例 ./image/tu1.jpg5.3 創(chuàng)建鏈接1. 文檔鏈接2. 鏈接到命名錨3. E-mail鏈接4. 熱區(qū)鏈接5. 導(dǎo)航條1. 文檔鏈接方法一：打開屬性面板，直接在“鏈接”文本框中輸入鏈接的文檔地址。方法二：單擊 ，

27、打開“選擇文件”對話框。方法三：直接拖動 到站點(diǎn)中要鏈接的目標(biāo)文件上。指定鏈接文檔在哪一級目錄中被打開圖 屬性面板 2. 鏈接到命名錨創(chuàng)建命名錨（建立錨點(diǎn)）錨所在的位置就是鏈接的目標(biāo)端點(diǎn)位置鏈接命名錨設(shè)置源端點(diǎn)若鏈接的目標(biāo)錨位于當(dāng)前文檔 #樣章試讀若鏈接的目標(biāo)錨位于其他文檔Index.htm1#樣章試讀3. E-mail鏈接選中要作為超級鏈接的文字。單擊 ，或“插入”“電子郵件鏈接”菜單命令。在“文本”框中輸入要作為鏈接的文字，在“E-mail”框中輸入E-mail地址。圖 “電子郵件鏈接”對話框 圖 屬性面板 圖 “E-mail鏈接”演示4. 熱區(qū)鏈接圖像鏈接 利用熱點(diǎn)工具在圖像上添加多個鏈

28、接5.3.5 創(chuàng)建導(dǎo)航條導(dǎo)航條的作用無論瀏覽到何處，單擊導(dǎo)航條即可跳轉(zhuǎn)到相應(yīng)的網(wǎng)頁。在頁面中起網(wǎng)站導(dǎo)航的作用。 復(fù)習(xí)： 相當(dāng)于一個網(wǎng)站的目錄，導(dǎo)航條通過超級鏈接與各個站點(diǎn)或網(wǎng)頁鏈接。1. 插入導(dǎo)航條單擊 ，或“插入”“圖像對象”“導(dǎo)航條”菜單命令。1. 插入導(dǎo)航條添加/刪除導(dǎo)航條按鈕圖 “插入導(dǎo)航條”對話框在“導(dǎo)航條元件”列表框中上移/下移圖 在設(shè)計視圖中看到的導(dǎo)航條“目標(biāo)”欄設(shè)置為“_blank”圖 在瀏覽器中使用導(dǎo)航條2. 編輯導(dǎo)航條選中導(dǎo)航條。單擊“修改”“導(dǎo)航條”菜單命令。圖 “修改導(dǎo)航條”對話框上機(jī)練習(xí)設(shè)置個人主頁，編輯文字體 。在個人主頁中設(shè)置個人主頁、個人簡介、個人影展及新聞導(dǎo)航

29、幾個欄目在主頁中插入圖片對圖片設(shè)置熱區(qū)鏈接對幾個欄目設(shè)置不同的鏈接插入導(dǎo)航欄第六章 框架結(jié)構(gòu)6.1 框架的基本概念6.2 創(chuàng)建框架和框架集6.3 選擇框架和框架集6.4 設(shè)置框架和框架集屬性6.5 保存框架和框架集6.1 框架的基本概念框架的功能是把一個瀏覽器窗口劃分為若干個區(qū)域，分別顯示不同的網(wǎng)頁。每一個框架是瀏覽器窗口的一個能夠顯示獨(dú)立頁面的區(qū)域，也可以理解成一個能夠獨(dú)立顯示的文檔?？蚣苡蓡蝹€框架和框架集組成：單個框架是指在網(wǎng)頁上定義的一個區(qū)域。 框架集定義了一組網(wǎng)頁顯示的框架數(shù)、框架大小、載入框架的網(wǎng)頁源和其他可定義的屬性等。 6.2 創(chuàng)建框架和框架集方法一：單擊布局“框架”按鈕中的預(yù)定

30、義框架集中的一個。藍(lán)色區(qū)域表示當(dāng)前文檔，白色區(qū)域顯示其他文檔的框架?？蚣馨粹o圖 “插入欄”6.2 創(chuàng)建框架和框架集方法二：將光標(biāo)定位在文檔中。單擊“插入” “HTML” “框架”菜單中所需的框架類型。 6.2 創(chuàng)建框架和框架集方法三：將光標(biāo)定位在一個框架中。單擊“修改”“框架頁”菜單中所需的拆分項(xiàng)。 6.2 創(chuàng)建框架和框架集圖 創(chuàng)建好的框架6.3 選擇框架和框架集方法一：在文檔窗口中選擇按住Alt鍵在框架內(nèi)單擊。被選擇框架的邊框帶有點(diǎn)線輪廓。方法二：在框架面板中選擇單擊“窗口”“其他”“框架”菜單命令，在浮動面板組中打開框架面板。在框架面板中單擊需要的框架。圖 框架面板6.4 設(shè)置框架和框架集

31、屬性使用框架屬性面板可以設(shè)置框架屬性?？蚣軐傩园蚣艿拿Q、框架源文件、框架的空白邊距、框架的滾動特性、框架的邊框特性等。1. 設(shè)置框架屬性選中要設(shè)置屬性的框架，顯示框架屬性面板。該名稱可以被JavaScript程序引用框架中的內(nèi)容到邊框的距離框架源文件的URL地址是否能在瀏覽器中通過拖動框架邊框來改變框架大小文檔內(nèi)容超出框架的大小時，是否顯示滾動條是否顯示邊框1. 設(shè)置框架屬性“滾動”：文檔內(nèi)容超出框架的大小時，是否顯示滾動條?！笆恰保簾o論框架文檔中的內(nèi)容是否超出框架大小，都會顯示滾動條?！胺瘛保杭词箍蚣芪臋n中的內(nèi)容超出了框架大小，也不顯示滾動條?！白詣印保寒?dāng)框架文檔中的內(nèi)容超出了框架大小

32、時，才會顯示滾動條?！澳J(rèn)”：大多數(shù)瀏覽器按“自動”方式處理?！斑吙颉保菏欠耧@示邊框。“是”：顯示框架的邊框?！胺瘛保翰伙@示框架的邊框?！澳J(rèn)”：多數(shù)瀏覽器采用顯示框架的邊框方式。2. 設(shè)置框架集屬性選中要設(shè)置屬性的框架集，顯示框架集屬性面板。設(shè)置框架集中所有框架的屬性。設(shè)置框架集中不同框架的行列大小注意：框架的屬性設(shè)置優(yōu)于框架集的屬性設(shè)置。6.5 保存框架和框架集框架中的文檔內(nèi)容1. 保存框架文件：保存某個框架中的文檔內(nèi)容。2. 保存框架集文檔：保存框架集和其中的文檔內(nèi)容。3. 保存框架集中的全部文件：依次將各個框架中的內(nèi)容保存為一個單獨(dú)的文件。LeftFrameTopFrameMainFr

33、ame6.5 保存框架和框架集1. 保存框架文件：將光標(biāo)定位到要保存的框架中。單擊“文件”“保存框架”菜單命令。2. 保存框架集文檔：選中要保存的框架集。單擊“文件”“保存框架頁”菜單命令。6.5 保存框架和框架集3. 保存框架集中的全部文件：將光標(biāo)定位到要保存的框架中。單擊“文件”“保存全部”菜單命令。如果框架集中有文檔未被保存，則會出現(xiàn)“另存為”對話框，提示保存該文檔。上機(jī)實(shí)戰(zhàn)建立一個框架結(jié)構(gòu)的網(wǎng)頁，使左邊鏈接的內(nèi)容可以在右下方的框架內(nèi)變換。第七章 設(shè)置CSS樣式表7.1 創(chuàng)建css樣式方法一：窗口“css樣式”面板方法二：文本屬性檢查器樣式管理樣式方法三：窗口標(biāo)簽檢查器相關(guān)css新建規(guī)則

34、方法四：文本css樣式新建“新建CSS樣式”對話框第七章 設(shè)置CSS樣式1.定義css樣式類型2. 背景3.區(qū)塊：文本格式3.4.3 編輯樣式7.2 Css實(shí)例我的風(fēng)格字沒有下劃線的鏈接：修飾無特定鼠標(biāo)：擴(kuò)展光標(biāo)風(fēng)格字：擴(kuò)展過濾器（濾鏡）光暈效果glow陰影效果drowshadow遮罩字mask動感字blur半透明網(wǎng)頁7.3 上機(jī)實(shí)戰(zhàn)作三個網(wǎng)頁，使他們運(yùn)用相同的樣式表制作一個黑色背景的網(wǎng)頁，制作一種樣式，使上面的文字呈陰影狀。第八章 層的應(yīng)用8.1 層的基本概念8.2 插入層8.3 編輯層8.4 層面板的使用8.5 層的嵌套8.1 層的基本概念層就是網(wǎng)頁內(nèi)容的容器。在網(wǎng)頁布局中，層是非常有用的

35、工具，利用嵌套在頁面中的層可以精確定位對象。在Dreamweaver中，使用嵌套在頁面中的層實(shí)現(xiàn)了用標(biāo)記對文檔內(nèi)容的精確定位。8.2 插入層在 “布局”選項(xiàng)卡中，有“描繪層”按鈕?！懊枥L層”按鈕層標(biāo)記8.3 編輯層1. 選取一個層、多個層2. 移動層3. 調(diào)整層大小4. 對齊層1. 選取一個層、多個層方法一：單擊層邊框選取一個層。按住Shift，再單擊要選取的層的邊框選取多個層。方法二：單擊“窗口”“層”命令，打開設(shè)計面板中的“層”面板(F2)。在層面板中直接單擊層，按住Shift可以選取多個層。 圖 設(shè)計面板中的“層”面板2. 移動層將光標(biāo)移到層邊框上，當(dāng)光標(biāo)變成十字箭頭圖標(biāo)時拖動光標(biāo)到新的

36、位置。3. 調(diào)整層大小方法一：直接拖動層四周的控制點(diǎn)。方法二：在層屬性面板中設(shè)置。4. 對齊層選取要對齊的層，單擊“修改”“對齊”命令。選擇對齊方式。8.4 層面板的使用層編號：只能用英文字母，不允許用空格、橫杠等特殊字符。Z軸：編號大的層在編號小的層上面。值可正可負(fù)?？梢娦裕褐付▽拥某跏硷@示狀態(tài)。標(biāo)簽：指定層的HTML標(biāo)簽。溢出：指定層的內(nèi)容超過了實(shí)際大小時的處理方法。剪輯：定義層的可見區(qū)域（矩形），在區(qū)域外的部分將不可見。8.4 層面板的使用可見性：指定層的初始顯示狀態(tài)。Default：是不指定可見屬性，但多數(shù)瀏覽器把本項(xiàng)解釋為Inherit。Inherit：繼承父層的可見屬性。Visib

37、le：顯示層的內(nèi)容，忽略父值。Hidden：隱藏層的內(nèi)容，忽略父值。溢出：指定層的內(nèi)容超過了實(shí)際大小時的處理方法。Visible：增加層的大小，使層的內(nèi)容都可見。Hidden：保持層的大小，不顯示超出層范圍的內(nèi)容。Scroll：給層增加滾動條，超出部分可通過滾動條顯示。Auto：自動顯示滾動條。8.4 層面板的使用多層屬性面板選擇多個層時，層面板為多層屬性面板。8.5 層的嵌套創(chuàng)建嵌套的方法將光標(biāo)定位到頁面上已有層內(nèi)，插入布局對象層利用“描繪”層按鈕，在現(xiàn)有層中繪制。若禁用，按alt鍵。利用層制作下拉菜單步驟新建網(wǎng)頁編輯主菜單創(chuàng)建一個1行3列的表格，表格邊框設(shè)置為1分別在三個單元格中輸入菜單1

38、、菜單2、菜單3編輯子菜單分別利用層制作3個子菜單，并將屬性設(shè)置為隱藏制作下拉菜單分別將3個層設(shè)置不同的錨點(diǎn)分別將菜單1、2、3設(shè)置#1、#2、#3的鏈接按shift+f4打開行為面板，將光標(biāo)置于菜單1鏈接中，單擊動作添加按鈕，選顯示/隱藏層，在彈出的面板中將第一層設(shè)置為顯示，其他層設(shè)置為隱藏。菜單2、3的設(shè)置同前。預(yù)覽效果第九章 動態(tài)網(wǎng)頁技術(shù)9.1 表單9.2 行為9.3 創(chuàng)建翻轉(zhuǎn)圖像9.9 插入Flash動畫9.1 表單9.1.1 表單中的基本概念9.1.2 創(chuàng)建表單9.1.3 表單屬性面板9.1.9 插入表單對象9.1.5 用表格幫助設(shè)計表單9.1.1 表單中的基本概念表單：是用于申請或

39、提交某些信息而填寫的交互網(wǎng)頁。是網(wǎng)頁動態(tài)元素。是網(wǎng)站管理者與瀏覽者之間溝通的橋梁。表單中的對象：可以是文本框、單選按鈕、復(fù)選框、下拉列表、按鈕等。表單域：具有相互聯(lián)系的、能夠完成一定功能的表單對象的集合。一個網(wǎng)頁中可有多個表單域。注意： 表單不能嵌套，但是一個網(wǎng)頁中可以有多個表單。9.1.2 創(chuàng)建表單將光標(biāo)置于要創(chuàng)建的表單的位置。單擊“插入”“表單”菜單命令?；蛘邌螕簟安迦氡韱巍卑粹o。如果沒有看到表單域，單擊“查看”“可視化助理” “不可見元素”菜單命令。插入表單表單域9.1.3 表單屬性面板“動作”選項(xiàng)：指定到處理該表單的動態(tài)頁或腳本的路徑?！胺椒ā边x項(xiàng)：將表單數(shù)據(jù)傳輸?shù)椒?wù)器的方法。POS

40、T：在HTTP請求中嵌入表單數(shù)據(jù)。GET： 將值追加到請求該頁的URL中。默認(rèn)：將表單數(shù)據(jù)發(fā)送到服務(wù)器。通常默認(rèn)為“GET”?！癕IME類型”選項(xiàng)：提交給服務(wù)器進(jìn)行處理的數(shù)據(jù)使用的MIME編碼類型。 “目標(biāo)”選項(xiàng)：顯示調(diào)用程序所返回的數(shù)據(jù)窗口。9.1.9 插入表單對象表單中的對象：可以是文本框、單選按鈕、復(fù)選框、下拉列表、按鈕等。單擊“插入”“表單對象”命令，再單擊相應(yīng)的命令。或者單擊工具欄按鈕。 1. 插入文本域文本域是用戶在其中可輸入響應(yīng)的表單對象。將光標(biāo)定位在表單中。單擊“插入”“表單對象”“文本域”命令?；颉安迦霗凇鄙系陌粹o：1. 插入文本域三種類型的文本域的屬性面板。 單行 密碼 多行2. 插入文件域插入文件域前在表單的屬性面板中做如下設(shè)置：1. 將“方法”選項(xiàng)設(shè)置為POST。該文件被發(fā)送到表單的“動作”文本框中所指定的地址上。2. 將“MIME類型”選項(xiàng)設(shè)置為“multipart/form-data”，然后再插入文件域，才能使文件域有效，并正常時運(yùn)行。2. 插入文件域方法：將光標(biāo)定位在表單中插入文件域的位置。單擊“插入”“表單”“文件域”命令?；颉安迦霗?/p>