《《網(wǎng)頁(yè)設(shè)計(jì)與制作》上.ppt》由會(huì)員分享，可在線(xiàn)閱讀，更多相關(guān)《《網(wǎng)頁(yè)設(shè)計(jì)與制作》上.ppt（154頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、上,網(wǎng)頁(yè)設(shè)計(jì)與制作,第1課 初識(shí)Dreamweaver,第2課 站點(diǎn)的基本操作,第3課 為網(wǎng)頁(yè)添加文本,第4課 為網(wǎng)頁(yè)添加圖像,第5課 創(chuàng)建超級(jí)鏈接,第6課 在網(wǎng)頁(yè)中應(yīng)用表格,課堂講解 上機(jī)實(shí)戰(zhàn),第1課 初識(shí)Dreamweaver,課堂講解,什么是網(wǎng)頁(yè)和網(wǎng)站 網(wǎng)頁(yè)的分類(lèi) 網(wǎng)頁(yè)中的常用術(shù)語(yǔ) 網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)知識(shí) 認(rèn)識(shí)Dreamweaver 8 Dreamweaver 8的基本操作 Dreamweaver 8工作界面介紹,什么是網(wǎng)頁(yè)和網(wǎng)站,什么是網(wǎng)頁(yè) 什么是網(wǎng)站,什么是網(wǎng)頁(yè),網(wǎng)頁(yè)是由HTML（超級(jí)文本標(biāo)識(shí)語(yǔ)言）或者其他語(yǔ)言編寫(xiě)的，通過(guò)IE瀏覽器編譯后供用戶(hù)獲取信息的頁(yè)面，它又稱(chēng)為Web頁(yè)，其中可包含

2、文字、圖像、表格、動(dòng)畫(huà)和超級(jí)鏈接等各種網(wǎng)頁(yè)元素。,什么是網(wǎng)站,網(wǎng)站就是一個(gè)或多個(gè)網(wǎng)頁(yè)的集合。從廣義上講，網(wǎng)站就是當(dāng)網(wǎng)頁(yè)發(fā)布到Internet上以后，能通過(guò)瀏覽器在Internet上訪(fǎng)問(wèn)的頁(yè)面 。 門(mén)戶(hù)網(wǎng)站 職能網(wǎng)站 專(zhuān)業(yè)網(wǎng)站 個(gè)人網(wǎng)站,網(wǎng)頁(yè)的分類(lèi),按所處位置分類(lèi) 按表現(xiàn)形式分類(lèi),按所處位置分類(lèi),按網(wǎng)頁(yè)在網(wǎng)站中所處的位置可將網(wǎng)頁(yè)分為主頁(yè)和子頁(yè)兩類(lèi)。,按表現(xiàn)形式分類(lèi),按網(wǎng)頁(yè)的表現(xiàn)形式可將網(wǎng)頁(yè)分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)。,網(wǎng)頁(yè)中的常用術(shù)語(yǔ),萬(wàn)維網(wǎng)（www） 瀏覽器 統(tǒng)一資源定位符（URL） 文件傳輸協(xié)議（FTP） IP地址 域名 超級(jí)鏈接 超級(jí)文本標(biāo)記語(yǔ)言（HTML）,萬(wàn)維網(wǎng)（www）,萬(wàn)維網(wǎng)（www）

3、是World Wide Web的中文簡(jiǎn)稱(chēng)，也稱(chēng)為3W網(wǎng)，它的本質(zhì)是一種基于超級(jí)文本技術(shù)的交互式信息瀏覽檢索工具，是Internet提供的應(yīng)用最普及、功能最豐富、使用方法最簡(jiǎn)便的信息服務(wù)，用戶(hù)可通過(guò)它在Internet上瀏覽、編輯、傳遞超文本格式的文件（即.html格式文件）。,瀏覽器,瀏覽器是用于閱讀網(wǎng)頁(yè)中信息的一種軟件工具，就像使用電腦必須有操作系統(tǒng)一樣。 Internet Explorer（IE） Netscape Navigator（NE） 騰訊TT瀏覽器,統(tǒng)一資源定位符（URL）,URL（Uniform Resource Locator）主要是用來(lái)指定協(xié)議（如HTTP或FTP）以及對(duì)象

4、、文檔、萬(wàn)維網(wǎng)網(wǎng)頁(yè)或其他目標(biāo)在Internet的位置和存取方式。 通信協(xié)議 主機(jī)名 所要訪(fǎng)問(wèn)的網(wǎng)頁(yè)路徑及名稱(chēng),文件傳輸協(xié)議（FTP）,FTP（File Transfer Protocol）是一種廣泛使用的文件傳輸協(xié)議，是快速、高效和可靠的信息傳輸方法。 FTP是基于客戶(hù)/服務(wù)器模型的TCP/IP的應(yīng)用，所以只要在客戶(hù)端和服務(wù)器之間建立了TCP/IP連接，無(wú)論兩臺(tái)電腦的位置遠(yuǎn)近、連接方式的異同以及使用的操作系統(tǒng)的異同，都能通過(guò)FTP協(xié)議進(jìn)行文件的傳輸。,IP地址,IP地址用來(lái)標(biāo)識(shí)連接到Internet上電腦的指定編號(hào)，每一個(gè)IP地址對(duì)應(yīng)一臺(tái)電腦，這與用電話(huà)號(hào)碼標(biāo)識(shí)電話(huà)網(wǎng)絡(luò)中的電話(huà)相同。

5、電腦識(shí)別的IP地址由32位二進(jìn)制數(shù)值組成，電腦上以十進(jìn)制數(shù)值來(lái)顯示，一組數(shù)值分為4部分，每一部分均不能大于255，中間用“.”分隔，如61.139.2.69。,域名,域名就是常說(shuō)的網(wǎng)址，它也具有惟一性，如百度的網(wǎng)址、網(wǎng)易的網(wǎng)址等就是一個(gè)域名，域名由漢語(yǔ)拼音或英文字符加上數(shù)字表示，在訪(fǎng)問(wèn)網(wǎng)絡(luò)時(shí)，域名將通過(guò)域名服務(wù)器轉(zhuǎn)換成IP地址，這種轉(zhuǎn)換是在后臺(tái)完成的。,超級(jí)鏈接,超級(jí)鏈接是網(wǎng)頁(yè)中最常用的元素之一，網(wǎng)頁(yè)就是通過(guò)無(wú)數(shù)的超級(jí)鏈接才能組成一個(gè)網(wǎng)站。 超級(jí)鏈接可以鏈接到網(wǎng)站內(nèi)部頁(yè)面、對(duì)象，也可以鏈接到其他網(wǎng)站，大大方便了用戶(hù)在各個(gè)頁(yè)面對(duì)象之間實(shí)現(xiàn)跳轉(zhuǎn)。,超級(jí)文本標(biāo)記語(yǔ)言（HTML）,HTML（Hyp

6、er Text Markup Language）是一種用戶(hù)與電腦之間進(jìn)行交流的文本技術(shù)，各種網(wǎng)頁(yè)均是用HTML語(yǔ)言來(lái)描述的，用HTML語(yǔ)言編寫(xiě)的網(wǎng)頁(yè)文件的擴(kuò)展名一般為“*.htm”或“*.html”。,網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)知識(shí),設(shè)計(jì)網(wǎng)頁(yè)的原則 網(wǎng)頁(yè)設(shè)計(jì)的一般步驟 網(wǎng)頁(yè)制作的常用工具,設(shè)計(jì)網(wǎng)頁(yè)的原則,整體規(guī)劃 鮮明的主題 善用圖像 醒目的導(dǎo)航 及時(shí)更新 易記的網(wǎng)站名稱(chēng) 通用網(wǎng)頁(yè) 動(dòng)畫(huà)適量,網(wǎng)頁(yè)設(shè)計(jì)的一般步驟,規(guī)劃網(wǎng)站 收集整理資源 配置站點(diǎn) 創(chuàng)建頁(yè)面 測(cè)試站點(diǎn) 發(fā)布站點(diǎn) 維護(hù)、更新站點(diǎn),網(wǎng)頁(yè)制作的常用工具,網(wǎng)頁(yè)設(shè)計(jì)軟件 Dreamweaver是目前使用最多的網(wǎng)頁(yè)設(shè)計(jì)軟件。 圖像處理軟件 制作

7、網(wǎng)頁(yè)圖像的軟件種類(lèi)繁多，大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)人員選擇的是Fireworks或Photoshop。 動(dòng)畫(huà)制作軟件 網(wǎng)頁(yè)動(dòng)畫(huà)制作中最常用的軟件非Flash莫屬。,認(rèn)識(shí)Dreamweaver 8,使用Dreamweaver 8制作網(wǎng)頁(yè)之前，需先將該軟件安裝到電腦中，其方法與安裝其他軟件相似，用戶(hù)可根據(jù)提示操作。,Dreamweaver 8的基本操作,啟動(dòng)Dreamweaver 8 新建空白HTML網(wǎng)頁(yè) 保存網(wǎng)頁(yè)文檔 預(yù)覽網(wǎng)頁(yè)效果 退出Dreamweaver 8,啟動(dòng)Dreamweaver 8,選擇開(kāi)始 所有程序 Macromedia Macromedia Dreamweaver 8菜單命令,新建空白H

8、TML網(wǎng)頁(yè),選擇文件 新建菜單命令，打開(kāi)“新建文檔”對(duì)話(huà)框，在“分類(lèi)”欄中選擇“基本頁(yè)”選項(xiàng)，在“基本頁(yè)”欄中選擇“HTML”選項(xiàng)，單擊“創(chuàng)建”按鈕。,保存網(wǎng)頁(yè)文檔,選擇文件保存菜單命令，打開(kāi)的“另存為”對(duì)話(huà)框，在“保存在”下拉列表框中選擇文件的保存路徑，在“文件名”文本框中輸入保存的文件名，單擊“保存”按鈕。,預(yù)覽網(wǎng)頁(yè)效果,選擇文件 在瀏覽器中預(yù)覽 IExplore 6.0菜單 命令在IE瀏覽器中 預(yù)覽網(wǎng)頁(yè)文檔的效 果。,退出Dreamweaver 8,單擊Dreamweaver 8窗口右上角的“關(guān)閉”按鈕。 單擊Dreamweaver 8窗口左上角的圖標(biāo)，在彈出的下拉菜單中選擇“關(guān)閉”命

9、令。 在Dreamweaver 8窗口中選擇文件退出菜單命令。 在當(dāng)前窗口為Dreamweaver 8工作界面時(shí)，按【Alt+F4】鍵退出Dreamweaver 8。,Dreamweaver 8 工作界面介紹,插入欄 文檔工具欄 文檔編輯區(qū) 網(wǎng)頁(yè)標(biāo)簽 擴(kuò)展按鈕 浮動(dòng)面板組 屬性面板 標(biāo)簽選擇器 水平標(biāo)尺和垂直標(biāo)尺,上機(jī)實(shí)戰(zhàn),本課上機(jī)實(shí)戰(zhàn)將練習(xí)在Dreamweaver 8中新建一個(gè)只包含文本的簡(jiǎn)單網(wǎng)頁(yè)，并使用IE瀏覽器預(yù)覽其效果。其中主要練習(xí)Dreamweaver 8的啟動(dòng)、新建文檔、保存網(wǎng)頁(yè)、預(yù)覽網(wǎng)頁(yè)和退出Dreamweaver 8的操作。,課堂講解 上機(jī)實(shí)戰(zhàn),第2課 站點(diǎn)的基本操作,課堂講解

10、,站點(diǎn)的規(guī)劃 創(chuàng)建本地站點(diǎn) 創(chuàng)建遠(yuǎn)程站點(diǎn) 管理本地站點(diǎn) 管理站點(diǎn)地圖 頁(yè)面設(shè)置,站點(diǎn)的規(guī)劃,Dreamweaver 8的站點(diǎn)類(lèi)型 規(guī)劃站點(diǎn)結(jié)構(gòu) 繪制網(wǎng)站結(jié)構(gòu)草圖,Dreamweaver 8的站點(diǎn)類(lèi)型,本地站點(diǎn) 遠(yuǎn)程站點(diǎn) 測(cè)試站點(diǎn),規(guī)劃站點(diǎn)結(jié)構(gòu),規(guī)劃站點(diǎn)結(jié)構(gòu)是設(shè)計(jì)站點(diǎn)的必要前提，其操作是將不同的文件分類(lèi)存放在文件夾中以便于設(shè)計(jì)者管理。合理地組織站點(diǎn)結(jié)構(gòu)，可提高工作效率，加快對(duì)站點(diǎn)的設(shè)計(jì)。,繪制網(wǎng)站結(jié)構(gòu)草圖,站點(diǎn)規(guī)劃好之后，就可以根據(jù)規(guī)劃繪制出一個(gè)網(wǎng)站結(jié)構(gòu)草圖，以便于有一個(gè)清晰的思路。,創(chuàng)建本地站點(diǎn),新建站點(diǎn) 新建文件夾 新建網(wǎng)頁(yè)文件,新建站點(diǎn),通過(guò)站點(diǎn)新建站點(diǎn)菜單命令或“文件”面板新建站點(diǎn)。,新

11、建站點(diǎn),新建文件夾,建立好站點(diǎn)后就可以在站點(diǎn)中新建文件夾，該文件夾主要用來(lái)存儲(chǔ)這個(gè)網(wǎng)站中用到的網(wǎng)頁(yè)元素，如圖片、音樂(lè)等。,新建網(wǎng)頁(yè)文件,新建網(wǎng)頁(yè)文件的方法與新建文件夾的方法相同 。,創(chuàng)建遠(yuǎn)程站點(diǎn),創(chuàng)建遠(yuǎn)程站點(diǎn)的方法與創(chuàng)建本地站點(diǎn)的方法類(lèi)似，只是無(wú)需在站點(diǎn)文件夾下再新建文件夾或網(wǎng)頁(yè)文件。,管理本地站點(diǎn),編輯本地站點(diǎn) 刪除本地站點(diǎn),編輯本地站點(diǎn),選擇本地站點(diǎn) 刪除站點(diǎn)中的文 件和文件夾 更改站點(diǎn)信息,刪除本地站點(diǎn),如果不需要某個(gè)站點(diǎn)時(shí)，可以將其從站點(diǎn)列表中刪除。,管理站點(diǎn)地圖,定義主頁(yè) 查看站點(diǎn)地圖 在站點(diǎn)地圖中管理頁(yè)面文件,定義主頁(yè),在使用站點(diǎn)地圖查看站點(diǎn)時(shí)必須保證這個(gè)站點(diǎn)已定義了一個(gè)主頁(yè)，因?yàn)?/p>

12、主頁(yè)是一個(gè)站點(diǎn)的根節(jié)點(diǎn)，必須有根節(jié)點(diǎn)才有各個(gè)支節(jié)點(diǎn)，也就是各個(gè)子頁(yè)。,查看站點(diǎn)地圖,查看站點(diǎn)地圖是在Dreamweaver 8的“文件”面板的“視圖”下拉列表框中選擇“地圖視圖”選項(xiàng)。,在站點(diǎn)地圖中管理頁(yè)面文件,選擇頁(yè)面文件 打開(kāi)頁(yè)面文件 新建頁(yè)面文件 更改頁(yè)面標(biāo)題,選擇頁(yè)面文件,在站點(diǎn)地圖中的某個(gè)頁(yè)面文件上單擊鼠標(biāo)即可選擇該文件。 按住【Shift】鍵的同時(shí)單擊需要選取的文件，可選擇多個(gè)連續(xù)的頁(yè)面文件。 按住【Ctrl】鍵的同時(shí)單擊需要選取的文件，可選擇多個(gè)不連續(xù)的頁(yè)面文件。,打開(kāi)頁(yè)面文件,在頁(yè)面文件上雙擊鼠標(biāo)即可打開(kāi)該文件。 在選擇頁(yè)面之后，選擇文件打開(kāi)菜單命令打開(kāi)頁(yè)面。 選擇頁(yè)面后單擊鼠

13、標(biāo)右鍵，在彈出的快捷菜單中選擇“打開(kāi)”命令可打開(kāi)頁(yè)面。,新建頁(yè)面文件,在建立好站點(diǎn)地圖之后，如果還需要在其中添加新的網(wǎng)頁(yè)文件，可以在站點(diǎn)地圖中新建一個(gè)頁(yè)面文件。,更改頁(yè)面標(biāo)題,在站點(diǎn)地圖中可對(duì)頁(yè)面標(biāo)題進(jìn)行更改，以方便絕對(duì)站點(diǎn)的管理。,頁(yè)面設(shè)置,當(dāng)站點(diǎn)建立好之后，就可以進(jìn)行具體的網(wǎng)頁(yè)編輯操作了，但在編輯網(wǎng)頁(yè)之前，還需要對(duì)頁(yè)面進(jìn)行一些簡(jiǎn)單的屬性設(shè)置以方便以后的工作。,上機(jī)實(shí)戰(zhàn),本課上機(jī)實(shí)戰(zhàn)將練習(xí)創(chuàng)建一個(gè)名為“國(guó)畫(huà)欣賞”的站點(diǎn)，將其中的本地站點(diǎn)保存在“D:guohua”文件夾下，遠(yuǎn)程站點(diǎn)保存在“E:guohua”文件夾下。然后為“國(guó)畫(huà)欣賞”網(wǎng)站建立一個(gè)存放圖片的文件夾“pic”，并新建名為“inde

14、x.html”、“ghzs.html”、“jrmh.html”、“ghds.html”、“flxs.html”、“ghlt.html”和“l(fā)xwm.html”的網(wǎng)頁(yè)文件，最后設(shè)置“index.html”的頁(yè)面屬性。,課堂講解 上機(jī)實(shí)戰(zhàn),第3課 為網(wǎng)頁(yè)添加文本,課堂講解,插入文本 格式化文本 項(xiàng)目列表的應(yīng)用 標(biāo)尺和網(wǎng)格,插入文本,插入普通文本 插入特殊字符 在字符之間添加空格 插入其他文本,插入普通文本,將插入點(diǎn)定位在文檔編輯區(qū)中，直接輸入文本即可。 在Word等文本編輯軟件中編輯好文本之后，將其復(fù)制到剪貼板上，然后在Dreamweaver 8中將插入點(diǎn)定位到文檔編輯區(qū)中，粘貼剪貼板中的文本即可

15、。,插入特殊字符,在Dreamweaver 8中編輯文本時(shí)，往往會(huì)遇到一些無(wú)法通過(guò)鍵盤(pán)直接輸入的特殊字符，如版權(quán)符號(hào)、注冊(cè)商標(biāo)符號(hào)等，這時(shí)可通過(guò)Dreamweaver 8插入特殊字符的功能進(jìn)行插入。,在字符之間添加空格,Dreamweaver 8中的文檔格式都是以HTML編碼形式存在的，而HTML編碼中只允許字符之間包含一個(gè)空格，所以在Dreamweaver 8中無(wú)論按多少次空格鍵都只會(huì)輸入一個(gè)空格。,插入其他文本,插入水平線(xiàn) 添加水平線(xiàn) 修改水平線(xiàn) 插入日期,添加水平線(xiàn),在文檔編輯區(qū)將插入點(diǎn)定位到所需位置，選擇插入HTML水平線(xiàn)菜單命令或單擊“插入”欄中的“HTML”選項(xiàng)卡在其中單擊 按鈕即

16、可添加水平線(xiàn)。,修改水平線(xiàn),初始繪制的水平線(xiàn)的格式往往不能滿(mǎn)足實(shí)際需要，此時(shí)可通過(guò)屬性面板對(duì)其進(jìn)行修改。,插入日期,在制作網(wǎng)頁(yè)時(shí)，有時(shí)需要插入當(dāng)前的日期，Dreamweaver 8提供了快速插入日期和時(shí)間的功能。,格式化文本,設(shè)置字體外觀 設(shè)置字體大小 設(shè)置顏色 設(shè)置字體樣式 設(shè)置對(duì)齊方式 設(shè)置標(biāo)題格式 設(shè)置樣式,設(shè)置字體外觀,用戶(hù)也可對(duì)屬性面板的“字體”下拉列表框中的字體列表重新編輯。,設(shè)置字體大小,在屬性面板的“大小”下拉列表框中選擇相應(yīng)的選項(xiàng)，并選擇其后的“單位”下拉列表框中相應(yīng)的單位選項(xiàng)，即可設(shè)置所選文本的字體大小。 其中字體的度量單位有像素（px）、厘米（cm）等，可根據(jù)具體情況

17、進(jìn)行選擇，但一般都以像素為單位。,設(shè)置顏色,單擊屬性面板中的 按鈕，在彈出的顏色列表框中選擇相應(yīng)的選項(xiàng)可設(shè)置所選文本的字體顏色，在其后的文本框中直接輸入顏色的英文名（如Red、Green等）或以“#”開(kāi)頭的十六進(jìn)制顏色代碼（如#ff0000、00ff00）設(shè)置所選文本的顏色。,設(shè)置字體樣式,粗體 根據(jù)在“首選參數(shù)”對(duì)話(huà)框的“常規(guī)”選項(xiàng)中設(shè)置的樣式參數(shù)選擇，將或標(biāo)簽應(yīng)用于選定的文本，即對(duì)所選文本加粗。單擊按鈕即可設(shè)置“加粗”設(shè)置，再次單擊按鈕可取消“加粗”設(shè)置。 斜體 根據(jù)在“首選參數(shù)”對(duì)話(huà)框的“常規(guī)”選項(xiàng)中設(shè)置的樣式參數(shù)選擇，將或標(biāo)簽應(yīng)用于選定的文本，即對(duì)所選文本進(jìn)行傾斜設(shè)置。選中按

18、鈕即可將所選的文本應(yīng)用“傾斜”。再次單擊按鈕可取消“傾斜”設(shè)置。,設(shè)置對(duì)齊方式,通過(guò)屬性面板中的“左對(duì)齊”按鈕、“居中對(duì)齊”按鈕、“右對(duì)齊”按鈕和“兩端對(duì)齊”按鈕可設(shè)置文本的對(duì)齊方式。,設(shè)置標(biāo)題格式,在屬性欄的“格式”下拉列表框中可設(shè)置標(biāo)題格式，其中“段落”是應(yīng)用標(biāo)簽的默認(rèn)格式，“標(biāo)題 1”選項(xiàng)應(yīng)用標(biāo)簽，設(shè)置該選項(xiàng)可以將所選的文本設(shè)置成各種標(biāo)題。標(biāo)題號(hào)越小，字體越大。,設(shè)置樣式,屬性面板中的“樣式”下拉列表框可用于顯示當(dāng)前應(yīng)用于所選文本的樣式。,項(xiàng)目列表的應(yīng)用,有序列表 無(wú)序列表 定義列表 為現(xiàn)有文本創(chuàng)建列表 創(chuàng)建嵌套列表 設(shè)置項(xiàng)目列表屬性,有序列表,有序列表又稱(chēng)為編號(hào)列表，是有一定排列順序的

19、列表，一般前面有數(shù)字前導(dǎo)字符，其中前導(dǎo)字符可以是阿拉伯?dāng)?shù)字、英文字母或羅馬數(shù)字等。,無(wú)序列表,無(wú)序列表又稱(chēng)為項(xiàng)目列表，是一系列無(wú)順序級(jí)別關(guān)系的項(xiàng)目文本組成的列表，一般前面是用項(xiàng)目符號(hào)作為前導(dǎo)字符。,定義列表,定義列表不使用項(xiàng)目符號(hào)或數(shù)字這樣的前導(dǎo)字符，通常用在詞匯表或說(shuō)明書(shū)中。,為現(xiàn)有文本創(chuàng)建列表,除了先創(chuàng)建列表項(xiàng)再輸入文本外，還可以先輸入文本，然后再設(shè)置列表項(xiàng)。,創(chuàng)建嵌套列表,嵌套列表是包含在其他列表中的列表。,標(biāo)尺和網(wǎng)格,標(biāo)尺 網(wǎng)格,標(biāo)尺,標(biāo)尺分為水平標(biāo)尺和垂直標(biāo)尺，分別顯示在Dreamweaver 8文檔編輯區(qū)的上方和左側(cè)。標(biāo)尺的單位包括像素、厘米和英寸，在默認(rèn)狀態(tài)下使用像素為單位。,網(wǎng)

20、格,網(wǎng)格與標(biāo)尺都是定位工具，但在網(wǎng)頁(yè)布局中使用網(wǎng)格更方便。文檔編輯區(qū)中顯示了網(wǎng)格后，就可以對(duì)網(wǎng)頁(yè)元素進(jìn)行準(zhǔn)確的定位了。,上機(jī)實(shí)戰(zhàn),在本課的上機(jī)實(shí)戰(zhàn)中，將在已有基本框架（相關(guān)知識(shí)將在后面幾課詳細(xì)講解）的“國(guó)畫(huà)欣賞”網(wǎng)站的首頁(yè)頁(yè)面中添加文本、項(xiàng)目列表，并對(duì)它們進(jìn)行設(shè)置，如縮進(jìn)、加粗、傾斜、大小、顏色等。,課堂講解 上機(jī)實(shí)戰(zhàn),第4課 為網(wǎng)頁(yè)添加圖像,課堂講解,網(wǎng)頁(yè)圖像的格式及來(lái)源 插入圖像 設(shè)置圖像屬性 圖像高級(jí)設(shè)置,網(wǎng)頁(yè)圖像的格式及來(lái)源,GIF格式 JPEG格式 PNG格式 網(wǎng)頁(yè)圖像來(lái)源,GIF格式,GIF全稱(chēng)為“Graphics Interchange Format”，意為可交換圖像格式，它是第

21、一個(gè)支持網(wǎng)頁(yè)的圖像格式，在PC機(jī)和蘋(píng)果機(jī)上都能被正確識(shí)別。它最多支持256種顏色，可以使圖像變得容量相當(dāng)小。GIF圖像可以在網(wǎng)頁(yè)中以透明方式顯示，還可以包含動(dòng)態(tài)信息，即GIF動(dòng)畫(huà)。,JPEG格式,JPEG全稱(chēng)為“Joint Photographic Experts Group”，意為聯(lián)合圖像專(zhuān)家組，它可以高效地壓縮圖片，丟失人眼不易察覺(jué)的部分圖像，使文件容量在變小的同時(shí)基本不失真，通常用來(lái)顯示顏色豐富的精美圖像。,PNG格式,PNG全稱(chēng)為“Portable Network Graphics”，意為便攜網(wǎng)絡(luò)圖像，它是逐漸流行的網(wǎng)絡(luò)圖像格式。PNG格式既融合了GIF能透明顯示的特點(diǎn)，又具有JPEG

22、處理精美圖像的優(yōu)勢(shì)，且可以包含圖層等信息，常常用于制作網(wǎng)頁(yè)效果圖。,網(wǎng)頁(yè)圖像來(lái)源,網(wǎng)頁(yè)圖像的素材有很多來(lái)源，如可以使用圖形處理軟件（如Photoshop、Fireworks和FreeHand等軟件）制作；可以購(gòu)買(mǎi)網(wǎng)頁(yè)素材光盤(pán)；可以從網(wǎng)絡(luò)上下載等。,插入圖像,直接插入 占位符插入 圖像的放大顯示,直接插入,選擇插入圖像菜單命令。 單擊插入欄的“常用”選項(xiàng)卡中的按鈕。 按【Ctrl+Alt+I】鍵。,占位符插入,制作網(wǎng)頁(yè)時(shí)還未選定需插入的圖像，但確定了圖像大小的時(shí)候，可以使用占位符來(lái)代替圖像的方式插入到文檔中。 將圖像確定后雙擊占位符，在打開(kāi)的對(duì)話(huà)框中設(shè)置后插入即可。,設(shè)置圖像屬性,在網(wǎng)頁(yè)中插

23、入圖像后可通過(guò)屬性面板對(duì)其屬性進(jìn)行修改等設(shè)置。,圖像命名 圖像大小 編輯圖片 源文件設(shè)置,文本說(shuō)明 圖像與文本的對(duì)齊 圖像邊距 圖像邊框,圖像命名,為了在使用Dreamweaver行為（如交換圖像）或腳本撰寫(xiě)語(yǔ)言（如JavaScript或VBScript）時(shí)可以引用該圖像，可在屬性面板的“圖像”文本框中為圖像命名。,圖像大小,在Dreamweaver 8中插入圖像后系統(tǒng)會(huì)自動(dòng)將圖像的原始大小顯示在“寬”和“高”文本框（以像素為單位）中。,編輯圖片,在網(wǎng)頁(yè)中選擇圖像之后，單擊屬性面板中的按鈕，打開(kāi)圖像處理軟件，對(duì)圖像進(jìn)行處理。如果安裝了Fireworks，那么Fireworks將被默認(rèn)為圖像處理

24、軟件。如果沒(méi)有安裝，用戶(hù)也可自己設(shè)置使用其他軟件中處理圖像。,源文件設(shè)置,在屬性面板的“源文件”文本框中顯示了圖像的保存路徑，如果要重新插入一幅新圖像，可以在選取圖像后的屬性面板中的“源文件”文本框中重新輸入要插入圖像的地址，或單擊右側(cè)后的 按鈕，在打開(kāi)的“選擇圖像源文件”對(duì)話(huà)框中重新選擇需要的圖像。,文本說(shuō)明,在選取圖像后的屬性面板的“替換”下拉列表框中可以輸入圖像的文本說(shuō)明。,圖像與文本的對(duì)齊,選取圖像后，在屬性面板的“對(duì)齊”下拉列表框中可設(shè)置處于同一行上的圖像與文本的對(duì)齊方式。,圖像邊距,選取圖像在屬性面板的“垂直邊距”和“水平邊距”文本框中可以設(shè)置圖像與頁(yè)面上方和左側(cè)之間的距離，也可以

25、設(shè)置圖像與其他網(wǎng)頁(yè)元素之間的距離。,圖像邊框,選取圖像后，在屬性面板的“邊框”文本框中可以設(shè)置圖像邊框的寬度，單位為像素，“0”表示無(wú)邊框。,圖像高級(jí)設(shè)置,鼠標(biāo)經(jīng)過(guò)圖像設(shè)置,鼠標(biāo)經(jīng)過(guò)圖像設(shè)置,鼠標(biāo)經(jīng)過(guò)圖像是一種在瀏覽器中查看網(wǎng)頁(yè)時(shí)，鼠標(biāo)光標(biāo)經(jīng)過(guò)該圖像時(shí)，圖像發(fā)生變化的動(dòng)態(tài)圖像。,上機(jī)實(shí)戰(zhàn),本課上機(jī)實(shí)戰(zhàn)主要練習(xí)在網(wǎng)頁(yè)中插入圖像并對(duì)其進(jìn)行屬性設(shè)置。在練習(xí)過(guò)程中，將用到課堂講解中所學(xué)的插入圖像的方法、圖像屬性設(shè)置的方法、熱點(diǎn)鏈接的設(shè)置及鼠標(biāo)經(jīng)過(guò)圖像的創(chuàng)建方法等知識(shí)。,課堂講解 上機(jī)實(shí)戰(zhàn),第5課 創(chuàng)建超級(jí)鏈接,課堂講解,超級(jí)鏈接概念 超級(jí)鏈接分類(lèi) 創(chuàng)建文本超級(jí)鏈接 創(chuàng)建錨鏈接 創(chuàng)建空鏈接 創(chuàng)建電子郵件

26、超級(jí)鏈接 創(chuàng)建圖像超級(jí)鏈接 創(chuàng)建導(dǎo)航條,超級(jí)鏈接概念,超級(jí)鏈接是指頁(yè)面對(duì)象之間的鏈接關(guān)系，它網(wǎng)頁(yè)的靈魂，能合理、協(xié)調(diào)地把網(wǎng)站中的各個(gè)元素、頁(yè)面通過(guò)超級(jí)鏈接構(gòu)成了一個(gè)有機(jī)整體，使瀏覽者能快速地訪(fǎng)問(wèn)到想要訪(fǎng)問(wèn)的頁(yè)面。,超級(jí)鏈接分類(lèi),絕對(duì)超級(jí)鏈接 文檔相對(duì)路徑 站點(diǎn)根目錄相對(duì)路徑,絕對(duì)超級(jí)鏈接,絕對(duì)超級(jí)鏈接就是形如“http://www.china/zh_cn”的超級(jí)鏈接地址，它給出了超級(jí)鏈接目標(biāo)端點(diǎn)完整的URL地址，包括使用的協(xié)議“http://”。一般用于創(chuàng)建站外具有固定地址的超級(jí)鏈接。,文檔相對(duì)路徑,使用文檔相對(duì)路徑不需要給出完整的URL地址，可省去URL地址的協(xié)議，只需保留不同的部分。如pi

27、c/logo.gif，這是本地站點(diǎn)超級(jí)鏈接中最常用的鏈接形式。由于相對(duì)超級(jí)鏈接的文件之間相互關(guān)系并沒(méi)有發(fā)生變化，因此使用文檔相對(duì)路徑創(chuàng)建的超級(jí)鏈接在上傳時(shí)可以不用更新各個(gè)超級(jí)鏈接。,站點(diǎn)根目錄相對(duì)路徑,站點(diǎn)根目錄相對(duì)路徑是形如“/help/help.html”的超級(jí)鏈接地址，它基于站點(diǎn)根目錄，在同一個(gè)站點(diǎn)中網(wǎng)頁(yè)的超級(jí)鏈接也可采用這種方法。,創(chuàng)建文本超級(jí)鏈接,文本超級(jí)鏈接是最常見(jiàn)的超級(jí)鏈接，通過(guò)使用鼠標(biāo)點(diǎn)擊文本即可從一個(gè)網(wǎng)頁(yè)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)。,創(chuàng)建錨鏈接,創(chuàng)建命名錨記 鏈接命名錨記,創(chuàng)建命名錨記,在制作網(wǎng)頁(yè)時(shí)，為了達(dá)到跳轉(zhuǎn)到網(wǎng)頁(yè)固定位置的目的，可以使用錨鏈接。通過(guò)對(duì)網(wǎng)頁(yè)中指定位置的命名，利用超級(jí)

28、鏈接打開(kāi)目標(biāo)網(wǎng)頁(yè)時(shí)可直接跳轉(zhuǎn)到相應(yīng)的命名位置上。,鏈接命名錨記,創(chuàng)建好錨記之后，必須創(chuàng)建對(duì)應(yīng)的超級(jí)鏈接源端點(diǎn)。,創(chuàng)建空鏈接,要想對(duì)文本設(shè)置行為，首先必須為文本建立空超級(jí)鏈接（空超級(jí)鏈接是一個(gè)未指派目標(biāo)的超級(jí)鏈接），這樣行為才會(huì)有效。 為文本建立空超級(jí)鏈接時(shí)，只要先在文檔窗口中選中需要建立空超級(jí)鏈接的文本，然后在屬性面板的“鏈接”文本框中輸入一個(gè)“#”符號(hào)即可。建立空超級(jí)鏈接的目的只是為了應(yīng)用行為，其他情況下不必建立。,創(chuàng)建電子郵件超級(jí)鏈接,電子郵件在網(wǎng)絡(luò)應(yīng)用中十分廣泛，在網(wǎng)頁(yè)中建立電子郵件超級(jí)鏈接可方便網(wǎng)頁(yè)瀏覽者與設(shè)計(jì)者之間的聯(lián)系。,創(chuàng)建圖像超級(jí)鏈接,為一般圖像創(chuàng)建超級(jí)鏈接 創(chuàng)建圖像熱點(diǎn)超

29、級(jí)鏈接,為一般圖像創(chuàng)建超級(jí)鏈接,創(chuàng)建圖像熱點(diǎn)超級(jí)鏈接,要在一幅比較大的圖片中添加許多超級(jí)鏈接時(shí)，應(yīng)該將圖片化整為零，分割成較小的圖片，然后分別為這些小圖像上建立超級(jí)鏈接來(lái)達(dá)到目的，但這時(shí)整幅圖片就不能對(duì)齊，利用Dreamweaver 8的圖像熱點(diǎn)超級(jí)鏈接功能就能避免這個(gè)問(wèn)題。,創(chuàng)建導(dǎo)航條,插入導(dǎo)航條 編輯導(dǎo)航條,插入導(dǎo)航條,導(dǎo)航條一般由圖像或圖像組組成，這些圖像的顯示內(nèi)容隨用戶(hù)的操作不同而進(jìn)行相應(yīng)的變化。導(dǎo)航條為訪(fǎng)問(wèn)者瀏覽不同網(wǎng)頁(yè)提供了一條捷徑。,編輯導(dǎo)航條,上機(jī)實(shí)戰(zhàn),本課上機(jī)實(shí)戰(zhàn)制作過(guò)程可分為左側(cè)導(dǎo)航圖像超級(jí)鏈接的創(chuàng)建、主要內(nèi)容區(qū)文本和圖像超級(jí)鏈接的創(chuàng)建、公司Logo下方的圖像熱點(diǎn)超級(jí)鏈接的

30、創(chuàng)建及底部版權(quán)信息區(qū)電子郵件超級(jí)鏈接的創(chuàng)建4部分進(jìn)行。,課堂講解 上機(jī)實(shí)戰(zhàn),第6課 在網(wǎng)頁(yè)中應(yīng)用表格,課堂講解,插入表格 輸入表格內(nèi)容 表格嵌套 選擇表格 合并及拆分單元格 插入或刪除行或列 設(shè)置表格、單元格屬性和表格模板 表格內(nèi)容的移動(dòng)和排序 表格數(shù)據(jù)的導(dǎo)出,插入表格,在網(wǎng)頁(yè)制作中，對(duì)頁(yè)面進(jìn)行布局是非常重要的，表格就是頁(yè)面布局中常用的方式。Dreamweaver 8不僅支持在表格中有序地排列數(shù)據(jù)，還可用表格對(duì)網(wǎng)頁(yè)中的文本、圖像及其他元素進(jìn)行定位。,輸入表格內(nèi)容,手動(dòng)添加表格內(nèi)容 從其他文檔導(dǎo)入表格式數(shù)據(jù),手動(dòng)添加表格內(nèi)容,將表格插入到文檔后即可向表格添加文本或圖像等內(nèi)容。向表格添加內(nèi)容的方法

31、很簡(jiǎn)單，只需將插入點(diǎn)定位到要輸入內(nèi)容的單元格中，再輸入文本或插入圖像即可。,從其他文檔導(dǎo)入表格式數(shù)據(jù),Dreamweaver 8可以將創(chuàng)建在另一個(gè)應(yīng)用程序（如寫(xiě)字板文件）中的數(shù)據(jù)導(dǎo)入到網(wǎng)頁(yè)中并設(shè)置為表格的格式，而且各數(shù)據(jù)之間不可以制表符、逗號(hào)、冒號(hào)、分號(hào)或其他分隔符分隔開(kāi)來(lái)。,表格嵌套,嵌套表格是表格布局中一個(gè)十分重要的環(huán)節(jié)，它是指在一個(gè)表格的單元格中再插入一個(gè)表格，嵌套表格的寬度受所在單元格的寬度限制，其編輯方法與表格相同。,選擇表格,選擇整個(gè)表格 選擇整行或整列 選擇單元格,選擇整個(gè)表格,選擇整行或整列,將鼠標(biāo)光標(biāo)移到要選擇行或列的左側(cè)或上方，當(dāng)需要選擇的行或列邊框線(xiàn)呈紅色時(shí)單擊鼠標(biāo)即可。

32、,選擇單元格,單元格的選擇分為選擇單個(gè)單元格和選擇多個(gè)單元格區(qū)域。,合并及拆分單元格,合并單元格 拆分單元格,合并單元格,合并單元格操作只能針對(duì)連續(xù)的單元格使用。,拆分單元格,表格中每一行中的單元格列數(shù)可能不等，這時(shí)就可根據(jù)需要使用拆分命令把一個(gè)單元格變?yōu)閹讉€(gè)單元格。,插入或刪除行或列,插入單行或單列 插入多行或多列 刪除行或列,插入單行或單列,插入多行或多列,刪除行或列,將插入點(diǎn)定位到要?jiǎng)h除行或列的任意一個(gè)單元格中，然后選擇修改表格刪除行菜單命令或選擇修改表格刪除列菜單命令。 選擇表格要?jiǎng)h除的行或列，然后選擇編輯清除菜單命令或按【Delete】鍵。,設(shè)置表格、單元格屬性和表格模板,設(shè)置表格屬

33、性 設(shè)置單元格屬性 套用表格模板,設(shè)置表格屬性,“表格”屬性面板中顯示了插入表格的所有特性，通過(guò)修改面板中的參數(shù)可快速地編輯表格外觀。,設(shè)置單元格屬性,在編輯網(wǎng)頁(yè)時(shí)除可以設(shè)置整個(gè)表格的屬性外，還可以單獨(dú)設(shè)置表格中某行、列或單元格的屬性。,套用表格模板,在Dreamweaver 8中提供了多個(gè)表格模板供用戶(hù)選擇使用，還可以通過(guò)設(shè)置模板的參數(shù)來(lái)調(diào)整表格的外觀。,表格內(nèi)容的移動(dòng)和排序,表格整列內(nèi)容的移動(dòng) 表格的排序,表格整列內(nèi)容的移動(dòng),表格的排序,表格一般用來(lái)處理數(shù)據(jù)，在處理數(shù)據(jù)的同時(shí)還需要對(duì)表格中的各項(xiàng)進(jìn)行排序。,表格數(shù)據(jù)的導(dǎo)出,因?yàn)檎Z(yǔ)言原因，導(dǎo)出的文件只能用寫(xiě)字板打開(kāi)才能正確顯示其中的數(shù)據(jù)，在其他程序中打開(kāi)會(huì)亂碼。,上機(jī)實(shí)戰(zhàn),本課上機(jī)實(shí)戰(zhàn)練習(xí)“項(xiàng)目介紹”頁(yè)面的制作，主要用到表格的創(chuàng)建、表格內(nèi)容的添加和表格屬性設(shè)置等知識(shí)。本節(jié)將在已有基本框架的頁(yè)面基礎(chǔ)上進(jìn)行制作。,