《電子商務(wù)網(wǎng)頁設(shè)計(jì)與制作》課件項(xiàng)目五

項(xiàng)目五Dreamweaver的基本操作能力目標(biāo)：(1)能夠進(jìn)行Dreamweaver的基本操作(2)能夠進(jìn)行網(wǎng)頁基本元素的添加(3)利用Dreamweaver進(jìn)行網(wǎng)頁布局(4)利用Dreamweaver創(chuàng)建站點(diǎn)和頁面知識(shí)目標(biāo)：(1)掌握DreamweaverCS6的界面與操作(2)掌握網(wǎng)頁的創(chuàng)建及保存的方法(3)掌握在網(wǎng)頁中添加文本、圖像及超鏈接等基本元素的方法(4)掌握表格的使用及網(wǎng)頁布局方法(5)掌握站點(diǎn)的建立與管理任務(wù)一添加網(wǎng)頁基本元素任務(wù)一添加網(wǎng)頁基本元素菜單欄：菜單欄中包含了Dreamweaver中大多數(shù)的命令，它是編輯和管理網(wǎng)頁文件的重要工具。菜單欄主要包括“文件”、“編輯”、“查看”、“插入”、“修改”、“格式”、“命令”、“站點(diǎn)”、“窗口”和“幫助”菜單。單擊菜單名稱，或按住[Alt]鍵的同時(shí)按鍵盤上各菜單英文名稱的首字母，都能打開相應(yīng)的下拉菜單，顯示其中的命令。文檔工具欄中包含一些按鈕，使用這些按鈕可以在文檔的不同視圖間快速進(jìn)行切換，文檔工具欄中還包含一些與查看文檔、在本地和遠(yuǎn)程站點(diǎn)間傳輸文檔有關(guān)的常用命令和選項(xiàng)?！皩傩浴泵姘逯饕糜诓榭春透乃x對象的各種屬性，每種對象都具有不同的屬性。任務(wù)一添加網(wǎng)頁基本元素文檔窗口用于顯示當(dāng)前創(chuàng)建和編輯的網(wǎng)頁文檔。Dreamweaver提供了4種查看文檔的方式：代碼視圖、拆分視圖、設(shè)計(jì)視圖和實(shí)時(shí)視圖。代碼視圖：用于編寫和編輯HTML、JavaScript、服務(wù)器語言代碼，以及任何其他類型代碼的手工編碼環(huán)境。拆分視圖：用于在一個(gè)窗口中同時(shí)看到同一文檔的代碼視圖和設(shè)計(jì)視圖。設(shè)計(jì)視圖：用于可視化頁面布局、可視化編輯和快速應(yīng)用程序開發(fā)的設(shè)計(jì)環(huán)境。在該視圖中，Dreamweaver顯示文檔的完全可編輯的可視化表示形式，類似于在瀏覽器中查看頁面時(shí)看到的內(nèi)容。實(shí)時(shí)視圖：與設(shè)計(jì)視圖類似，實(shí)時(shí)視圖更逼真地顯示文檔在瀏覽器中的表示形式。實(shí)時(shí)視圖不可編輯，不過可以在代碼視圖中進(jìn)行編輯，然后通過刷新實(shí)時(shí)視圖來查看所做的更改。任務(wù)一添加網(wǎng)頁基本元素DreamweaverCS6中添加文本的方式：一種是直接輸入，另一種是導(dǎo)入外部文檔數(shù)據(jù)。前者的操作相對簡單，只需要在文檔窗口中直接輸入文字或從其他程序中復(fù)制或剪切所需文本再粘貼到文檔窗口中即可；后者則需要通過菜單命令來完成。圖像的屬性：寬、高：圖像的寬度和高度，其默認(rèn)單位是“像素”，也可以用“點(diǎn)”、“英寸”或“毫米”作為單位。替換：圖像的替換文字。當(dāng)用戶的瀏覽器不能正常顯示圖像時(shí)，在圖像的位置會(huì)用這個(gè)替換文字代替圖像。鏈接：設(shè)置圖像鏈接的目標(biāo)頁面。地圖：用于制作圖像映射。原始；當(dāng)前圖像的低分辨率副本的路徑。任務(wù)一添加網(wǎng)頁基本元素超鏈接的相關(guān)內(nèi)容圖像熱點(diǎn)：圖像熱點(diǎn)鏈接可以將一幅圖像分割為若干個(gè)區(qū)域，并將這些區(qū)域設(shè)置成熟點(diǎn)區(qū)域（簡稱熱區(qū)），不同熱點(diǎn)區(qū)域可以鏈接到不同的頁面，當(dāng)瀏覽者單擊圖像上的不同熱點(diǎn)區(qū)域可以實(shí)現(xiàn)不同頁面的跳轉(zhuǎn)。絕對路徑：是包括服務(wù)器規(guī)范在內(nèi)的完全路徑，不管源文件在什么位置，通過絕對路徑都可以非常精準(zhǔn)地將目標(biāo)文檔找到，采用絕對路徑的好處是它同鏈接的源端點(diǎn)無關(guān)，只要網(wǎng)站的地址不變，無論文檔在站點(diǎn)中如何移動(dòng)，都可以正常實(shí)現(xiàn)跳轉(zhuǎn)而不會(huì)發(fā)生錯(cuò)誤。；采用絕對路徑的缺點(diǎn)在于這種方式的鏈接不利于測試。相對路徑：指向相對于原文檔同一服務(wù)器或者同一文件夾中的文件。相對路徑通常僅包含文件夾和文件名，甚至只有文件名。任務(wù)二使用表格和框架進(jìn)行布局表格創(chuàng)建對話框中個(gè)參數(shù)含義如下：（1）行數(shù)：在文本框中輸入新建表格的行數(shù)。（2）列：在文本框中輸入新建表格的列數(shù)。（3）表格寬度：用于設(shè)置表格的寬度，其中右側(cè)的下拉列表中包含百分比和像素。（4）邊框粗細(xì)：用于設(shè)置表格邊框的寬度，如果設(shè)置為0：在瀏覽時(shí)則看不到表的邊框。（5）單元格邊距：單元格內(nèi)容和單元格邊界之間的像素?cái)?shù)。（6）單元格間距：單元格之間的像素?cái)?shù)，（7）標(biāo)題：可以定義表頭樣式，4種樣式可以任選一種。（8）摘要：用于對表格進(jìn)行注釋。任務(wù)二使用表格和框架進(jìn)行布局table標(biāo)簽的使用：（1）<table>語法：建立一個(gè)最基本的表格，必須包含一組<table></table>標(biāo)記、一組<tr></tr>標(biāo)記以及一組<td></td>標(biāo)記，這也是最簡單的單元格表格。<table></table>標(biāo)記的作用是定義一個(gè)表格<tr></tr>標(biāo)記的作用是定義一行，而<td><td>標(biāo)記的作用是定義一個(gè)單元格。（2）<table>常用屬性：屬性名作用定義語法參數(shù)align對齊方式align=""Center、right、leftcolspan列合并colspan=""所需合并列數(shù)rowspan行合并rowspan=""所需合并行數(shù)width列寬width=""數(shù)值height行高h(yuǎn)eight=""數(shù)值任務(wù)二使用表格和框架進(jìn)行布局利用表格布局網(wǎng)頁的優(yōu)劣：（1）表格布局的特點(diǎn)：table布局是過去流行的網(wǎng)頁布局技術(shù)，能夠輕松地將整個(gè)頁面劃分成需要的各個(gè)塊，如若某個(gè)塊中的內(nèi)容需要再劃分，可以通過嵌套表格來實(shí)現(xiàn)。整體思路明了，易于操作，簡單易學(xué)，建站速度快。（2）表格布局的缺點(diǎn)：用表格設(shè)計(jì)的代碼相對復(fù)雜，維護(hù)和升級困難。如果需要更改版面布局，相當(dāng)于重新設(shè)計(jì)網(wǎng)頁。而且，當(dāng)頁面嵌套層次較多時(shí)，會(huì)降低瀏覽速度。任務(wù)二使用表格和框架進(jìn)行布局框架布局的特點(diǎn)框架技術(shù)可以將瀏覽器分割成多個(gè)小窗口，并且在每個(gè)小窗口中，可以顯示不同的網(wǎng)頁，這樣我們就可以很方便的在瀏覽器中瀏覽不同的網(wǎng)頁效果。當(dāng)瀏覽器分割成多個(gè)窗口后，各窗口就會(huì)扮演不同的角色，實(shí)現(xiàn)不同的功能?？蚣芑菊Z法<frameset><framesrc="URL"><framesrc="URL">…</frameset>框架分割方式垂直分割<framesetcols="100，200，*">水平分割<framesetrows="100，200，*">。任務(wù)二使用表格和框架進(jìn)行布局框架的各屬性含義（1）Frameborder：顯示或隱藏框架的邊界，與border一起使用。值為1（顯示）或0（隱藏），也可以是yes或no（2）Border：顯示或隱藏框架的邊，與frameborder一起使用。值為0或像素值（3）scrolling：顯示或隱藏框架的滾動(dòng)條，值為yes（顯示滾動(dòng)條）或no（隱藏滾動(dòng)條）或auto（根據(jù)框架內(nèi)容范圍自動(dòng)地顯示或隱藏滾動(dòng)條，默認(rèn)）（4）noresize：禁止用戶調(diào)整框架尺寸，如果不設(shè)置該屬性，那么用戶可以自由地調(diào)整框架尺寸（5）marginheight：設(shè)置框架內(nèi)容的上、下邊距的像素?cái)?shù)值（6）marginwidth：設(shè)置框架內(nèi)容的左、右邊距的像素?cái)?shù)值（7）bordercolor：設(shè)置框架邊界的顏色任務(wù)三使用DreamweaverCS6創(chuàng)建站點(diǎn)規(guī)劃和設(shè)計(jì)站點(diǎn)的主要內(nèi)容首先將內(nèi)容分類，將相關(guān)的頁面放在同一文件夾中，必要時(shí)可以使用文件夾，這種組織類型使站點(diǎn)結(jié)構(gòu)更容易維護(hù)和導(dǎo)航；其次確定圖像和聲音文件等項(xiàng)目的位置。例如，將所有圖像放在一個(gè)位置，這樣當(dāng)將圖像插入頁面時(shí)，就知道在何處可以找到它。網(wǎng)站的鏈接結(jié)構(gòu)頁面之間相互鏈接的拓?fù)浣Y(jié)構(gòu)。它建立在目錄結(jié)構(gòu)基礎(chǔ)之上，但可以跨越目錄。一般來說，建立網(wǎng)站的鏈接結(jié)構(gòu)有兩種基本形式。，樹狀鏈接結(jié)構(gòu)（一對一）、星狀鏈接結(jié)構(gòu)（一對多），在實(shí)際的網(wǎng)站設(shè)計(jì)中，總是將這兩種結(jié)構(gòu)混合起來使用。任務(wù)三使用DreamweaverCS6創(chuàng)建站點(diǎn)規(guī)劃和設(shè)計(jì)站點(diǎn)的主要內(nèi)容首先將內(nèi)容分類，將相關(guān)的頁面放在同一文件夾中，必要時(shí)可以使用文件夾，這種組織類型使站點(diǎn)結(jié)構(gòu)更容易維護(hù)和導(dǎo)航；其次確定圖像和聲音文件等項(xiàng)目的位置。例如，將所有圖像放在一個(gè)位置，這樣當(dāng)將圖像插入頁面時(shí)，就知道在何處可以找到它。網(wǎng)站的鏈接結(jié)構(gòu)頁面之間相互鏈接的拓?fù)浣Y(jié)構(gòu)。它建立在目錄結(jié)構(gòu)基礎(chǔ)之上，但可以跨越目錄。一般來說，建立網(wǎng)站的鏈接結(jié)構(gòu)有兩種基本形式。，樹狀鏈接結(jié)構(gòu)（一對一）、星狀鏈接結(jié)構(gòu)（一對多），在實(shí)際的網(wǎng)站設(shè)計(jì)中，總是將這兩種結(jié)構(gòu)混合起來使用。任務(wù)三使用DreamweaverCS6創(chuàng)建站點(diǎn)Dreamweaver站點(diǎn)的組成Dreamweaver站點(diǎn)由以下三部分組成，具體取決于環(huán)境和所開發(fā)的Web站點(diǎn)類型。（1）本地文件夾：工作目錄，稱為“本地站點(diǎn)”。（2）遠(yuǎn)程文件夾：稱為“遠(yuǎn)程站點(diǎn)”，可以是專供開發(fā)用的臨時(shí)定義的文件夾，也可以是使用運(yùn)行系統(tǒng)為其定義的站點(diǎn)。（3）動(dòng)態(tài)文件夾：測試服務(wù)器，是Dreamweaver處理動(dòng)態(tài)頁的過程。任務(wù)三使用DreamweaverCS6創(chuàng)建站點(diǎn)站點(diǎn)高級設(shè)置的屬性（1）本地信息：用于設(shè)置本地站點(diǎn)的基本信息。（2）設(shè)計(jì)備注：提供與文件相關(guān)聯(lián)的備注信息，單獨(dú)存儲(chǔ)在獨(dú)立文件中?？梢允褂迷摴δ軄碛涗浥c文檔關(guān)聯(lián)的其他文件信息。（3）遮蓋：用于設(shè)置“遮蓋”功能。該功能能夠?qū)崿F(xiàn)在執(zhí)行“獲取”或“上傳”等操作時(shí)，排除本地或服務(wù)器上的特定文件或文件夾的效果。（4）文件視圖列：主要用于設(shè)置在“文件”窗口中各文件需要顯示的信息。（5）模板，用于設(shè)置站點(diǎn)模板在執(zhí)行更新操作時(shí)是否重新設(shè)置模板文件中鏈接文檔的相對路徑。（6）Web字體：用于設(shè)置站點(diǎn)使用的特殊字體的存放路徑。任務(wù)三使用DreamweaverCS6創(chuàng)建站點(diǎn)站點(diǎn)的作用（1）可以使用Dreamweaver