《網(wǎng)頁設(shè)計與制作》上.ppt

上,網(wǎng)頁設(shè)計與制作,第1課 初識Dreamweaver,第2課 站點(diǎn)的基本操作,第3課 為網(wǎng)頁添加文本,第4課 為網(wǎng)頁添加圖像,第5課 創(chuàng)建超級鏈接,第6課 在網(wǎng)頁中應(yīng)用表格,課堂講解 上機(jī)實(shí)戰(zhàn),第1課 初識Dreamweaver,課堂講解,什么是網(wǎng)頁和網(wǎng)站 網(wǎng)頁的分類 網(wǎng)頁中的常用術(shù)語 網(wǎng)頁設(shè)計的相關(guān)知識 認(rèn)識Dreamweaver 8 Dreamweaver 8的基本操作 Dreamweaver 8工作界面介紹,什么是網(wǎng)頁和網(wǎng)站,什么是網(wǎng)頁 什么是網(wǎng)站,什么是網(wǎng)頁,網(wǎng)頁是由HTML（超級文本標(biāo)識語言）或者其他語言編寫的，通過IE瀏覽器編譯后供用戶獲取信息的頁面，它又稱為Web頁，其中可包含文字、圖像、表格、動畫和超級鏈接等各種網(wǎng)頁元素。,什么是網(wǎng)站,網(wǎng)站就是一個或多個網(wǎng)頁的集合。從廣義上講，網(wǎng)站就是當(dāng)網(wǎng)頁發(fā)布到Internet上以后，能通過瀏覽器在Internet上訪問的頁面 。 門戶網(wǎng)站 職能網(wǎng)站 專業(yè)網(wǎng)站 個人網(wǎng)站,網(wǎng)頁的分類,按所處位置分類 按表現(xiàn)形式分類,按所處位置分類,按網(wǎng)頁在網(wǎng)站中所處的位置可將網(wǎng)頁分為主頁和子頁兩類。,按表現(xiàn)形式分類,按網(wǎng)頁的表現(xiàn)形式可將網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。,網(wǎng)頁中的常用術(shù)語,萬維網(wǎng)（www） 瀏覽器 統(tǒng)一資源定位符（URL） 文件傳輸協(xié)議（FTP） IP地址 域名 超級鏈接 超級文本標(biāo)記語言（HTML）,萬維網(wǎng)（www）,萬維網(wǎng)（www）是World Wide Web的中文簡稱，也稱為3W網(wǎng)，它的本質(zhì)是一種基于超級文本技術(shù)的交互式信息瀏覽檢索工具，是Internet提供的應(yīng)用最普及、功能最豐富、使用方法最簡便的信息服務(wù)，用戶可通過它在Internet上瀏覽、編輯、傳遞超文本格式的文件（即.html格式文件）。,瀏覽器,瀏覽器是用于閱讀網(wǎng)頁中信息的一種軟件工具，就像使用電腦必須有操作系統(tǒng)一樣。 Internet Explorer（IE） Netscape Navigator（NE） 騰訊TT瀏覽器,統(tǒng)一資源定位符（URL）,URL（Uniform Resource Locator）主要是用來指定協(xié)議（如HTTP或FTP）以及對象、文檔、萬維網(wǎng)網(wǎng)頁或其他目標(biāo)在Internet的位置和存取方式。 通信協(xié)議 主機(jī)名 所要訪問的網(wǎng)頁路徑及名稱,文件傳輸協(xié)議（FTP）,FTP（File Transfer Protocol）是一種廣泛使用的文件傳輸協(xié)議，是快速、高效和可靠的信息傳輸方法。 FTP是基于客戶/服務(wù)器模型的TCP/IP的應(yīng)用，所以只要在客戶端和服務(wù)器之間建立了TCP/IP連接，無論兩臺電腦的位置遠(yuǎn)近、連接方式的異同以及使用的操作系統(tǒng)的異同，都能通過FTP協(xié)議進(jìn)行文件的傳輸。,IP地址,IP地址用來標(biāo)識連接到Internet上電腦的指定編號，每一個IP地址對應(yīng)一臺電腦，這與用電話號碼標(biāo)識電話網(wǎng)絡(luò)中的電話相同。 電腦識別的IP地址由32位二進(jìn)制數(shù)值組成，電腦上以十進(jìn)制數(shù)值來顯示，一組數(shù)值分為4部分，每一部分均不能大于255，中間用“.”分隔，如61.139.2.69。,域名,域名就是常說的網(wǎng)址，它也具有惟一性，如百度的網(wǎng)址、網(wǎng)易的網(wǎng)址等就是一個域名，域名由漢語拼音或英文字符加上數(shù)字表示，在訪問網(wǎng)絡(luò)時，域名將通過域名服務(wù)器轉(zhuǎn)換成IP地址，這種轉(zhuǎn)換是在后臺完成的。,超級鏈接,超級鏈接是網(wǎng)頁中最常用的元素之一，網(wǎng)頁就是通過無數(shù)的超級鏈接才能組成一個網(wǎng)站。 超級鏈接可以鏈接到網(wǎng)站內(nèi)部頁面、對象，也可以鏈接到其他網(wǎng)站，大大方便了用戶在各個頁面對象之間實(shí)現(xiàn)跳轉(zhuǎn)。,超級文本標(biāo)記語言（HTML）,HTML（Hyper Text Markup Language）是一種用戶與電腦之間進(jìn)行交流的文本技術(shù)，各種網(wǎng)頁均是用HTML語言來描述的，用HTML語言編寫的網(wǎng)頁文件的擴(kuò)展名一般為“*.htm”或“*.html”。,網(wǎng)頁設(shè)計的相關(guān)知識,設(shè)計網(wǎng)頁的原則 網(wǎng)頁設(shè)計的一般步驟 網(wǎng)頁制作的常用工具,設(shè)計網(wǎng)頁的原則,整體規(guī)劃 鮮明的主題 善用圖像 醒目的導(dǎo)航 及時更新 易記的網(wǎng)站名稱 通用網(wǎng)頁 動畫適量,網(wǎng)頁設(shè)計的一般步驟,規(guī)劃網(wǎng)站 收集整理資源 配置站點(diǎn) 創(chuàng)建頁面 測試站點(diǎn) 發(fā)布站點(diǎn) 維護(hù)、更新站點(diǎn),網(wǎng)頁制作的常用工具,網(wǎng)頁設(shè)計軟件 Dreamweaver是目前使用最多的網(wǎng)頁設(shè)計軟件。 圖像處理軟件 制作網(wǎng)頁圖像的軟件種類繁多，大多數(shù)網(wǎng)頁設(shè)計人員選擇的是Fireworks或Photoshop。 動畫制作軟件 網(wǎng)頁動畫制作中最常用的軟件非Flash莫屬。,認(rèn)識Dreamweaver 8,使用Dreamweaver 8制作網(wǎng)頁之前，需先將該軟件安裝到電腦中，其方法與安裝其他軟件相似，用戶可根據(jù)提示操作。,Dreamweaver 8的基本操作,啟動Dreamweaver 8 新建空白HTML網(wǎng)頁 保存網(wǎng)頁文檔 預(yù)覽網(wǎng)頁效果 退出Dreamweaver 8,啟動Dreamweaver 8,選擇開始 所有程序 Macromedia Macromedia Dreamweaver 8菜單命令,新建空白HTML網(wǎng)頁,選擇文件 新建菜單命令，打開“新建文檔”對話框，在“分類”欄中選擇“基本頁”選項(xiàng)，在“基本頁”欄中選擇“HTML”選項(xiàng)，單擊“創(chuàng)建”按鈕。,保存網(wǎng)頁文檔,選擇文件保存菜單命令，打開的“另存為”對話框，在“保存在”下拉列表框中選擇文件的保存路徑，在“文件名”文本框中輸入保存的文件名，單擊“保存”按鈕。,預(yù)覽網(wǎng)頁效果,選擇文件 在瀏覽器中預(yù)覽 IExplore 6.0菜單 命令在IE瀏覽器中 預(yù)覽網(wǎng)頁文檔的效 果。,退出Dreamweaver 8,單擊Dreamweaver 8窗口右上角的“關(guān)閉”按鈕。 單擊Dreamweaver 8窗口左上角的圖標(biāo)，在彈出的下拉菜單中選擇“關(guān)閉”命令。 在Dreamweaver 8窗口中選擇文件退出菜單命令。 在當(dāng)前窗口為Dreamweaver 8工作界面時，按【Alt+F4】鍵退出Dreamweaver 8。,Dreamweaver 8 工作界面介紹,插入欄 文檔工具欄 文檔編輯區(qū) 網(wǎng)頁標(biāo)簽 擴(kuò)展按鈕 浮動面板組 屬性面板 標(biāo)簽選擇器 水平標(biāo)尺和垂直標(biāo)尺,上機(jī)實(shí)戰(zhàn),本課上機(jī)實(shí)戰(zhàn)將練習(xí)在Dreamweaver 8中新建一個只包含文本的簡單網(wǎng)頁，并使用IE瀏覽器預(yù)覽其效果。其中主要練習(xí)Dreamweaver 8的啟動、新建文檔、保存網(wǎng)頁、預(yù)覽網(wǎng)頁和退出Dreamweaver 8的操作。,課堂講解 上機(jī)實(shí)戰(zhàn),第2課 站點(diǎn)的基本操作,課堂講解,站點(diǎn)的規(guī)劃 創(chuàng)建本地站點(diǎn) 創(chuàng)建遠(yuǎn)程站點(diǎn) 管理本地站點(diǎn) 管理站點(diǎn)地圖 頁面設(shè)置,站點(diǎn)的規(guī)劃,Dreamweaver 8的站點(diǎn)類型 規(guī)劃站點(diǎn)結(jié)構(gòu) 繪制網(wǎng)站結(jié)構(gòu)草圖,Dreamweaver 8的站點(diǎn)類型,本地站點(diǎn) 遠(yuǎn)程站點(diǎn) 測試站點(diǎn),規(guī)劃站點(diǎn)結(jié)構(gòu),規(guī)劃站點(diǎn)結(jié)構(gòu)是設(shè)計站點(diǎn)的必要前提，其操作是將不同的文件分類存放在文件夾中以便于設(shè)計者管理。合理地組織站點(diǎn)結(jié)構(gòu)，可提高工作效率，加快對站點(diǎn)的設(shè)計。,繪制網(wǎng)站結(jié)構(gòu)草圖,站點(diǎn)規(guī)劃好之后，就可以根據(jù)規(guī)劃繪制出一個網(wǎng)站結(jié)構(gòu)草圖，以便于有一個清晰的思路。,創(chuàng)建本地站點(diǎn),新建站點(diǎn) 新建文件夾 新建網(wǎng)頁文件,新建站點(diǎn),通過站點(diǎn)新建站點(diǎn)菜單命令或“文件”面板新建站點(diǎn)。,新建站點(diǎn),新建文件夾,建立好站點(diǎn)后就可以在站點(diǎn)中新建文件夾，該文件夾主要用來存儲這個網(wǎng)站中用到的網(wǎng)頁元素，如圖片、音樂等。,新建網(wǎng)頁文件,新建網(wǎng)頁文件的方法與新建文件夾的方法相同 。,創(chuàng)建遠(yuǎn)程站點(diǎn),創(chuàng)建遠(yuǎn)程站點(diǎn)的方法與創(chuàng)建本地站點(diǎn)的方法類似，只是無需在站點(diǎn)文件夾下再新建文件夾或網(wǎng)頁文件。,管理本地站點(diǎn),編輯本地站點(diǎn) 刪除本地站點(diǎn),編輯本地站點(diǎn),選擇本地站點(diǎn) 刪除站點(diǎn)中的文 件和文件夾 更改站點(diǎn)信息,刪除本地站點(diǎn),如果不需要某個站點(diǎn)時，可以將其從站點(diǎn)列表中刪除。,管理站點(diǎn)地圖,定義主頁 查看站點(diǎn)地圖 在站點(diǎn)地圖中管理頁面文件,定義主頁,在使用站點(diǎn)地圖查看站點(diǎn)時必須保證這個站點(diǎn)已定義了一個主頁，因?yàn)橹黜撌且粋€站點(diǎn)的根節(jié)點(diǎn)，必須有根節(jié)點(diǎn)才有各個支節(jié)點(diǎn)，也就是各個子頁。,查看站點(diǎn)地圖,查看站點(diǎn)地圖是在Dreamweaver 8的“文件”面板的“視圖”下拉列表框中選擇“地圖視圖”選項(xiàng)。,在站點(diǎn)地圖中管理頁面文件,選擇頁面文件 打開頁面文件 新建頁面文件 更改頁面標(biāo)題,選擇頁面文件,在站點(diǎn)地圖中的某個頁面文件上單擊鼠標(biāo)即可選擇該文件。 按住【Shift】鍵的同時單擊需要選取的文件，可選擇多個連續(xù)的頁面文件。 按住【Ctrl】鍵的同時單擊需要選取的文件，可選擇多個不連續(xù)的頁面文件。,打開頁面文件,在頁面文件上雙擊鼠標(biāo)即可打開該文件。 在選擇頁面之后，選擇文件打開菜單命令打開頁面。 選擇頁面后單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“打開”命令可打開頁面。,新建頁面文件,在建立好站點(diǎn)地圖之后，如果還需要在其中添加新的網(wǎng)頁文件，可以在站點(diǎn)地圖中新建一個頁面文件。,更改頁面標(biāo)題,在站點(diǎn)地圖中可對頁面標(biāo)題進(jìn)行更改，以方便絕對站點(diǎn)的管理。,頁面設(shè)置,當(dāng)站點(diǎn)建立好之后，就可以進(jìn)行具體的網(wǎng)頁編輯操作了，但在編輯網(wǎng)頁之前，還需要對頁面進(jìn)行一些簡單的屬性設(shè)置以方便以后的工作。,上機(jī)實(shí)戰(zhàn),本課上機(jī)實(shí)戰(zhàn)將練習(xí)創(chuàng)建一個名為“國畫欣賞”的站點(diǎn)，將其中的本地站點(diǎn)保存在“D:guohua”文件夾下，遠(yuǎn)程站點(diǎn)保存在“E:guohua”文件夾下。然后為“國畫欣賞”網(wǎng)站建立一個存放圖片的文件夾“pic”，并新建名為“index.html”、“ghzs.html”、“jrmh.html”、“ghds.html”、“flxs.html”、“ghlt.html”和“l(fā)xwm.html”的網(wǎng)頁文件，最后設(shè)置“index.html”的頁面屬性。,課堂講解 上機(jī)實(shí)戰(zhàn),第3課 為網(wǎng)頁添加文本,課堂講解,插入文本 格式化文本 項(xiàng)目列表的應(yīng)用 標(biāo)尺和網(wǎng)格,插入文本,插入普通文本 插入特殊字符 在字符之間添加空格 插入其他文本,插入普通文本,將插入點(diǎn)定位在文檔編輯區(qū)中，直接輸入文本即可。 在Word等文本編輯軟件中編輯好文本之后，將其復(fù)制到剪貼板上，然后在Dreamweaver 8中將插入點(diǎn)定位到文檔編輯區(qū)中，粘貼剪貼板中的文本即可。,插入特殊字符,在Dreamweaver 8中編輯文本時，往往會遇到一些無法通過鍵盤直接輸入的特殊字符，如版權(quán)符號、注冊商標(biāo)符號等，這時可通過Dreamweaver 8插入特殊字符的功能進(jìn)行插入。,在字符之間添加空格,Dreamweaver 8中的文檔格式都是以HTML編碼形式存在的，而HTML編碼中只允許字符之間包含一個空格，所以在Dreamweaver 8中無論按多少次空格鍵都只會輸入一個空格。,插入其他文本,插入水平線 添加水平線 修改水平線 插入日期,添加水平線,在文檔編輯區(qū)將插入點(diǎn)定位到所需位置，選擇插入HTML水平線菜單命令或單擊“插入”欄中的“HTML”選項(xiàng)卡在其中單擊 按鈕即可添加水平線。,修改水平線,初始繪制的水平線的格式往往不能滿足實(shí)際需要，此時可通過屬性面板對其進(jìn)行修改。,插入日期,在制作網(wǎng)頁時，有時需要插入當(dāng)前的日期，Dreamweaver 8提供了快速插入日期和時間的功能。,格式化文本,設(shè)置字體外觀 設(shè)置字體大小 設(shè)置顏色 設(shè)置字體樣式 設(shè)置對齊方式 設(shè)置標(biāo)題格式 設(shè)置樣式,設(shè)置字體外觀,用戶也可對屬性面板的“字體”下拉列表框中的字體列表重新編輯。,設(shè)置字體大小,在屬性面板的“大小”下拉列表框中選擇相應(yīng)的選項(xiàng)，并選擇其后的“單位”下拉列表框中相應(yīng)的單位選項(xiàng)，即可設(shè)置所選文本的字體大小。 其中字體的度量單位有像素（px）、厘米（cm）等，可根據(jù)具體情況進(jìn)行選擇，但一般都以像素為單位。,設(shè)置顏色,單擊屬性面板中的 按鈕，在彈出的顏色列表框中選擇相應(yīng)的選項(xiàng)可設(shè)置所選文本的字體顏色，在其后的文本框中直接輸入顏色的英文名（如Red、Green等）或以“#”開頭的十六進(jìn)制顏色代碼（如#ff0000、00ff00）設(shè)置所選文本的顏色。,設(shè)置字體樣式,粗體 根據(jù)在“首選參數(shù)”對話框的“常規(guī)”選項(xiàng)中設(shè)置的樣式參數(shù)選擇，將或標(biāo)簽應(yīng)用于選定的文本，即對所選文本加粗。單擊按鈕即可設(shè)置“加粗”設(shè)置，再次單擊按鈕可取消“加粗”設(shè)置。 斜體 根據(jù)在“首選參數(shù)”對話框的“常規(guī)”選項(xiàng)中設(shè)置的樣式參數(shù)選擇，將或標(biāo)簽應(yīng)用于選定的文本，即對所選文本進(jìn)行傾斜設(shè)置。選中按鈕即可將所選的文本應(yīng)用“傾斜”。再次單擊按鈕可取消“傾斜”設(shè)置。,設(shè)置對齊方式,通過屬性面板中的“左對齊”按鈕、“居中對齊”按鈕、“右對齊”按鈕和“兩端對齊”按鈕可設(shè)置文本的對齊方式。,設(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)題號越小，字體越大。,設(shè)置樣式,屬性面板中的“樣式”下拉列表框可用于顯示當(dāng)前應(yīng)用于所選文本的樣式。,項(xiàng)目列表的應(yīng)用,有序列表 無序列表 定義列表 為現(xiàn)有文本創(chuàng)建列表 創(chuàng)建嵌套列表 設(shè)置項(xiàng)目列表屬性,有序列表,有序列表又稱為編號列表，是有一定排列順序的列表，一般前面有數(shù)字前導(dǎo)字符，其中前導(dǎo)字符可以是阿拉伯?dāng)?shù)字、英文字母或羅馬數(shù)字等。,無序列表,無序列表又稱為項(xiàng)目列表，是一系列無順序級別關(guān)系的項(xiàng)目文本組成的列表，一般前面是用項(xiàng)目符號作為前導(dǎo)字符。,定義列表,定義列表不使用項(xiàng)目符號或數(shù)字這樣的前導(dǎo)字符，通常用在詞匯表或說明書中。,為現(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)格,網(wǎng)格與標(biāo)尺都是定位工具，但在網(wǎng)頁布局中使用網(wǎng)格更方便。文檔編輯區(qū)中顯示了網(wǎng)格后，就可以對網(wǎng)頁元素進(jìn)行準(zhǔn)確的定位了。,上機(jī)實(shí)戰(zhàn),在本課的上機(jī)實(shí)戰(zhàn)中，將在已有基本框架（相關(guān)知識將在后面幾課詳細(xì)講解）的“國畫欣賞”網(wǎng)站的首頁頁面中添加文本、項(xiàng)目列表，并對它們進(jìn)行設(shè)置，如縮進(jìn)、加粗、傾斜、大小、顏色等。,課堂講解 上機(jī)實(shí)戰(zhàn),第4課 為網(wǎng)頁添加圖像,課堂講解,網(wǎng)頁圖像的格式及來源 插入圖像 設(shè)置圖像屬性 圖像高級設(shè)置,網(wǎng)頁圖像的格式及來源,GIF格式 JPEG格式 PNG格式 網(wǎng)頁圖像來源,GIF格式,GIF全稱為“Graphics Interchange Format”，意為可交換圖像格式，它是第一個支持網(wǎng)頁的圖像格式，在PC機(jī)和蘋果機(jī)上都能被正確識別。它最多支持256種顏色，可以使圖像變得容量相當(dāng)小。GIF圖像可以在網(wǎng)頁中以透明方式顯示，還可以包含動態(tài)信息，即GIF動畫。,JPEG格式,JPEG全稱為“Joint Photographic Experts Group”，意為聯(lián)合圖像專家組，它可以高效地壓縮圖片，丟失人眼不易察覺的部分圖像，使文件容量在變小的同時基本不失真，通常用來顯示顏色豐富的精美圖像。,PNG格式,PNG全稱為“Portable Network Graphics”，意為便攜網(wǎng)絡(luò)圖像，它是逐漸流行的網(wǎng)絡(luò)圖像格式。PNG格式既融合了GIF能透明顯示的特點(diǎn)，又具有JPEG處理精美圖像的優(yōu)勢，且可以包含圖層等信息，常常用于制作網(wǎng)頁效果圖。,網(wǎng)頁圖像來源,網(wǎng)頁圖像的素材有很多來源，如可以使用圖形處理軟件（如Photoshop、Fireworks和FreeHand等軟件）制作；可以購買網(wǎng)頁素材光盤；可以從網(wǎng)絡(luò)上下載等。,插入圖像,直接插入 占位符插入 圖像的放大顯示,直接插入,選擇插入圖像菜單命令。 單擊插入欄的“常用”選項(xiàng)卡中的按鈕。 按【Ctrl+Alt+I】鍵。,占位符插入,制作網(wǎng)頁時還未選定需插入的圖像，但確定了圖像大小的時候，可以使用占位符來代替圖像的方式插入到文檔中。 將圖像確定后雙擊占位符，在打開的對話框中設(shè)置后插入即可。,設(shè)置圖像屬性,在網(wǎng)頁中插入圖像后可通過屬性面板對其屬性進(jìn)行修改等設(shè)置。,圖像命名 圖像大小 編輯圖片 源文件設(shè)置,文本說明 圖像與文本的對齊 圖像邊距 圖像邊框,圖像命名,為了在使用Dreamweaver行為（如交換圖像）或腳本撰寫語言（如JavaScript或VBScript）時可以引用該圖像，可在屬性面板的“圖像”文本框中為圖像命名。,圖像大小,在Dreamweaver 8中插入圖像后系統(tǒng)會自動將圖像的原始大小顯示在“寬”和“高”文本框（以像素為單位）中。,編輯圖片,在網(wǎng)頁中選擇圖像之后，單擊屬性面板中的按鈕，打開圖像處理軟件，對圖像進(jìn)行處理。如果安裝了Fireworks，那么Fireworks將被默認(rèn)為圖像處理軟件。如果沒有安裝，用戶也可自己設(shè)置使用其他軟件中處理圖像。,源文件設(shè)置,在屬性面板的“源文件”文本框中顯示了圖像的保存路徑，如果要重新插入一幅新圖像，可以在選取圖像后的屬性面板中的“源文件”文本框中重新輸入要插入圖像的地址，或單擊右側(cè)后的 按鈕，在打開的“選擇圖像源文件”對話框中重新選擇需要的圖像。,文本說明,在選取圖像后的屬性面板的“替換”下拉列表框中可以輸入圖像的文本說明。,圖像與文本的對齊,選取圖像后，在屬性面板的“對齊”下拉列表框中可設(shè)置處于同一行上的圖像與文本的對齊方式。,圖像邊距,選取圖像在屬性面板的“垂直邊距”和“水平邊距”文本框中可以設(shè)置圖像與頁面上方和左側(cè)之間的距離，也可以設(shè)置圖像與其他網(wǎng)頁元素之間的距離。,圖像邊框,選取圖像后，在屬性面板的“邊框”文本框中可以設(shè)置圖像邊框的寬度，單位為像素，“0”表示無邊框。,圖像高級設(shè)置,鼠標(biāo)經(jīng)過圖像設(shè)置,鼠標(biāo)經(jīng)過圖像設(shè)置,鼠標(biāo)經(jīng)過圖像是一種在瀏覽器中查看網(wǎng)頁時，鼠標(biāo)光標(biāo)經(jīng)過該圖像時，圖像發(fā)生變化的動態(tài)圖像。,上機(jī)實(shí)戰(zhàn),本課上機(jī)實(shí)戰(zhàn)主要練習(xí)在網(wǎng)頁中插入圖像并對其進(jìn)行屬性設(shè)置。在練習(xí)過程中，將用到課堂講解中所學(xué)的插入圖像的方法、圖像屬性設(shè)置的方法、熱點(diǎn)鏈接的設(shè)置及鼠標(biāo)經(jīng)過圖像的創(chuàng)建方法等知識。,課堂講解 上機(jī)實(shí)戰(zhàn),第5課 創(chuàng)建超級鏈接,課堂講解,超級鏈接概念 超級鏈接分類 創(chuàng)建文本超級鏈接 創(chuàng)建錨鏈接 創(chuàng)建空鏈接 創(chuàng)建電子郵件超級鏈接 創(chuàng)建圖像超級鏈接 創(chuàng)建導(dǎo)航條,超級鏈接概念,超級鏈接是指頁面對象之間的鏈接關(guān)系，它網(wǎng)頁的靈魂，能合理、協(xié)調(diào)地把網(wǎng)站中的各個元素、頁面通過超級鏈接構(gòu)成了一個有機(jī)整體，使瀏覽者能快速地訪問到想要訪問的頁面。,超級鏈接分類,絕對超級鏈接 文檔相對路徑 站點(diǎn)根目錄相對路徑,絕對超級鏈接,絕對超級鏈接就是形如“http:/www.china/zh_cn”的超級鏈接地址，它給出了超級鏈接目標(biāo)端點(diǎn)完整的URL地址，包括使用的協(xié)議“http:/”。一般用于創(chuàng)建站外具有固定地址的超級鏈接。,文檔相對路徑,使用文檔相對路徑不需要給出完整的URL地址，可省去URL地址的協(xié)議，只需保留不同的部分。如pic/logo.gif，這是本地站點(diǎn)超級鏈接中最常用的鏈接形式。由于相對超級鏈接的文件之間相互關(guān)系并沒有發(fā)生變化，因此使用文檔相對路徑創(chuàng)建的超級鏈接在上傳時可以不用更新各個超級鏈接。,站點(diǎn)根目錄相對路徑,站點(diǎn)根目錄相對路徑是形如“/help/help.html”的超級鏈接地址，它基于站點(diǎn)根目錄，在同一個站點(diǎn)中網(wǎng)頁的超級鏈接也可采用這種方法。,創(chuàng)建文本超級鏈接,文本超級鏈接是最常見的超級鏈接，通過使用鼠標(biāo)點(diǎn)擊文本即可從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁。,創(chuàng)建錨鏈接,創(chuàng)建命名錨記 鏈接命名錨記,創(chuàng)建命名錨記,在制作網(wǎng)頁時，為了達(dá)到跳轉(zhuǎn)到網(wǎng)頁固定位置的目的，可以使用錨鏈接。通過對網(wǎng)頁中指定位置的命名，利用超級鏈接打開目標(biāo)網(wǎng)頁時可直接跳轉(zhuǎn)到相應(yīng)的命名位置上。,鏈接命名錨記,創(chuàng)建好錨記之后，必須創(chuàng)建對應(yīng)的超級鏈接源端點(diǎn)。,創(chuàng)建空鏈接,要想對文本設(shè)置行為，首先必須為文本建立空超級鏈接（空超級鏈接是一個未指派目標(biāo)的超級鏈接），這樣行為才會有效。 為文本建立空超級鏈接時，只要先在文檔窗口中選中需要建立空超級鏈接的文本，然后在屬性面板的“鏈接”文本框中輸入一個“#”符號即可。建立空超級鏈接的目的只是為了應(yīng)用行為，其他情況下不必建立。,創(chuàng)建電子郵件超級鏈接,電子郵件在網(wǎng)絡(luò)應(yīng)用中十分廣泛，在網(wǎng)頁中建立電子郵件超級鏈接可方便網(wǎng)頁瀏覽者與設(shè)計者之間的聯(lián)系。,創(chuàng)建圖像超級鏈接,為一般圖像創(chuàng)建超級鏈接 創(chuàng)建圖像熱點(diǎn)超級鏈接,為一般圖像創(chuàng)建超級鏈接,創(chuàng)建圖像熱點(diǎn)超級鏈接,要在一幅比較大的圖片中添加許多超級鏈接時，應(yīng)該將圖片化整為零，分割成較小的圖片，然后分別為這些小圖像上建立超級鏈接來達(dá)到目的，但這時整幅圖片就不能對齊，利用Dreamweaver 8的圖像熱點(diǎn)超級鏈接功能就能避免這個問題。,創(chuàng)建導(dǎo)航條,插入導(dǎo)航條 編輯導(dǎo)航條,插入導(dǎo)航條,導(dǎo)航條一般由圖像或圖像組組成，這些圖像的顯示內(nèi)容隨用戶的操作不同而進(jìn)行相應(yīng)的變化。導(dǎo)航條為訪問者瀏覽不同網(wǎng)頁提供了一條捷徑。,編輯導(dǎo)航條,上機(jī)實(shí)戰(zhàn),本課上機(jī)實(shí)戰(zhàn)制作過程可分為左側(cè)導(dǎo)航圖像超級鏈接的創(chuàng)建、主要內(nèi)容區(qū)文本和圖像超級鏈接的創(chuàng)建、公司Logo下方的圖像熱點(diǎn)超級鏈接的創(chuàng)建及底部版權(quán)信息區(qū)電子郵件超級鏈接的創(chuàng)建4部分進(jìn)行。,課堂講解 上機(jī)實(shí)戰(zhàn),第6課 在網(wǎng)頁中應(yīng)用表格,課堂講解,插入表格 輸入表格內(nèi)容 表格嵌套 選擇表格 合并及拆分單元格 插入或刪除行或列 設(shè)置表格、單元格屬性和表格模板 表格內(nèi)容的移動和排序 表格數(shù)據(jù)的導(dǎo)出,插入表格,在網(wǎng)頁制作中，對頁面進(jìn)行布局是非常重要的，表格就是頁面布局中常用的方式。Dreamweaver 8不僅支持在表格中有序地排列數(shù)據(jù)，還可用表格對網(wǎng)頁中的文本、圖像及其他元素進(jìn)行定位。,輸入表格內(nèi)容,手動添加表格內(nèi)容 從其他文檔導(dǎo)入表格式數(shù)據(jù),手動添加表格內(nèi)容,將表格插入到文檔后即可向表格添加文本或圖像等內(nèi)容。向表格添加內(nèi)容的方法很簡單，只需將插入點(diǎn)定位到要輸入內(nèi)容的單元格中，再輸入文本或插入圖像即可。,從其他文檔導(dǎo)入表格式數(shù)據(jù),Dreamweaver 8可以將創(chuàng)建在另一個應(yīng)用程序（如寫字板文件）中的數(shù)據(jù)導(dǎo)入到網(wǎng)頁中并設(shè)置為表格的格式，而且各數(shù)據(jù)之間不可以制表符、逗號、冒號、分號或其他分隔符分隔開來。,表格嵌套,嵌套表格是表格布局中一個十分重要的環(huán)節(jié)，它是指在一個表格的單元格中再插入一個表格，嵌套表格的寬度受所在單元格的寬度限制，其編輯方法與表格相同。,選擇表格,選擇整個表格 選擇整行或整列 選擇單元格,選擇整個表格,選擇整行或整列,將鼠標(biāo)光標(biāo)移到要選擇行或列的左側(cè)或上方，當(dāng)需要選擇的行或列邊框線呈紅色時單擊鼠標(biāo)即可。,選擇單元格,單元格的選擇分為選擇單個單元格和選擇多個單元格區(qū)域。,合并及拆分單元格,合并單元格 拆分單元格,合并單元格,合并單元格操作只能針對連續(xù)的單元格使用。,拆分單元格,表格中每一行中的單元格列數(shù)可能不等，這時就可根據(jù)需要使用拆分命令把一個單元格變?yōu)閹讉€單元格。,插入或刪除行或列,插入單行或單列 插入多行或多列 刪除行或列,插入單行或單列,插入多行或多列,刪除行或列,將插入點(diǎn)定位到要刪除行或列的任意一個單元格中，然后選擇修改表格刪除行菜單命令或選擇修改表格刪除列菜單命令。 選擇表格要刪除的行或列，然后選擇編輯清除菜單命令或按【Delete】鍵。,設(shè)置表格、單元格屬性和表格模板,設(shè)置表格屬性 設(shè)置單元格屬性 套用表格模板,設(shè)置表格屬性,“表格”屬性面板中顯示了插入表格的所有特性，通過修改面板中的參數(shù)可快速地編輯表格外觀。,設(shè)置單元格屬性,在編輯網(wǎng)頁時除可以設(shè)置整個表格的屬性外，還可以單獨(dú)設(shè)置表格中某行、列或單元格的屬性。,套用表格模板,在Dreamweaver 8中提供了多個表格模板供用戶選擇使用，還可以通過設(shè)置模板的參數(shù)來調(diào)整表格的外觀。,表格內(nèi)容的移動和排序,表格整列內(nèi)容的移動 表格的排序,表格整列內(nèi)容的移動,表格的排序,表格一般用來處理數(shù)據(jù)，在處理數(shù)據(jù)的同時還需要對表格中的各項(xiàng)進(jìn)行排序。,表格數(shù)據(jù)的導(dǎo)出,因?yàn)檎Z言原因，導(dǎo)出的文件只能用寫字板打開才能正確顯示其中的數(shù)據(jù)，在其他程序中打開會亂碼。,上機(jī)實(shí)戰(zhàn),本課上機(jī)實(shí)戰(zhàn)練習(xí)“項(xiàng)目介紹”頁面的制作，主要用到表格的創(chuàng)建、表格內(nèi)容的添加和表格屬性設(shè)置等知識。本節(jié)將在已有基本框架的頁面基礎(chǔ)上進(jìn)行制作。,