Dreamweaver第一次課學(xué)案

1、Dreamwever課的學(xué)案一、定義站點(diǎn)1 .創(chuàng)建站點(diǎn)單擊菜單欄中的【站點(diǎn)】【新建站點(diǎn)】命令。(1)單擊菜單欄中的【站點(diǎn)】【新建站點(diǎn)】命令，彈出“站點(diǎn)定義”對(duì)話框，在彈出的對(duì)話框中輸入站點(diǎn)的名字，在第二個(gè)號(hào)文本框中，會(huì)出現(xiàn)站點(diǎn)儲(chǔ)存的默認(rèn)位置，或者在下面的文本框中指定一個(gè)存儲(chǔ)位置，Dreamweaver將在其中存儲(chǔ)站點(diǎn)文件。(2)單擊保存按鈕，則通過(guò)向?qū)Ы⒘艘粋€(gè)本地站點(diǎn)。2 .添加網(wǎng)頁(yè)文件與站點(diǎn)文件夾新建的站點(diǎn)是空白的，其中沒(méi)有任何內(nèi)容。根據(jù)站點(diǎn)的規(guī)劃，需要向其中添加網(wǎng)頁(yè)文件或站點(diǎn)文件夾。網(wǎng)頁(yè)文件即上網(wǎng)時(shí)瀏覽的HTM戊件；站點(diǎn)文件夾則用于管理站點(diǎn)內(nèi)容，因?yàn)檎军c(diǎn)中會(huì)有很多文件，為了有效地管理文件

2、，可以將它們分門(mén)別類(lèi)地存放在文件夾中，如圖像文件夾可以專(zhuān)門(mén)用于存放圖像、動(dòng)畫(huà)等。在站點(diǎn)中添加網(wǎng)頁(yè)文件與文件夾的方法基本一致，操作步驟如下：在【文件】面板中，右鍵單擊“站點(diǎn)”根目錄，則彈出一個(gè)快捷菜單。選擇快捷菜單中的【新建文件】命令，則新建了一個(gè)網(wǎng)頁(yè)文件。同樣的方法，如果在彈出的快捷菜單中選擇【新建文件夾】命令，則可以在站點(diǎn)中添加一個(gè)文件夾。二、創(chuàng)建和保存網(wǎng)頁(yè)1.創(chuàng)建新文檔(1)創(chuàng)建空文檔?！疚募?【新建】，打開(kāi)【新建文檔】對(duì)話框。在【空白頁(yè)】類(lèi)別中從【頁(yè)面類(lèi)型】列表選擇【HTML,【布局】中選擇【無(wú)】，即可創(chuàng)建一個(gè)純HTM與白頁(yè)。創(chuàng)建應(yīng)用CSS布局的文檔。選擇【文件】/【新建】，在【新建文

3、檔】對(duì)話框的【空白頁(yè)】選項(xiàng)卡中從【頁(yè)面類(lèi)型】列表選擇要?jiǎng)?chuàng)建的頁(yè)面類(lèi)型。如果從【布局】列表中選擇一個(gè)預(yù)設(shè)的CSW局，將創(chuàng)建一個(gè)包含預(yù)設(shè)CSW局的頁(yè)面。從【頁(yè)面類(lèi)型】列表中選擇【HTMU、【HTML模板】等，右側(cè)的【布局】列表中顯示相應(yīng)的文檔布局類(lèi)型。預(yù)設(shè)的CSW局類(lèi)型有：固定：列的大小不會(huì)根據(jù)瀏覽器的大小或站點(diǎn)訪問(wèn)者的文本設(shè)置來(lái)調(diào)整。彈性：列寬是以相對(duì)于文本大小來(lái)決定的。如果訪問(wèn)者更改了文本設(shè)置，該列的寬帶將會(huì)進(jìn)行調(diào)整，但不會(huì)基于瀏覽器窗口的大小來(lái)更改列寬度。液態(tài)：列寬是以站點(diǎn)訪問(wèn)者的瀏覽器寬度的百分比來(lái)決定的。如果站點(diǎn)訪問(wèn)者將瀏覽器變寬或變窄，該列的寬度將會(huì)進(jìn)行調(diào)整，但不會(huì)基于站點(diǎn)訪問(wèn)者的文本

4、設(shè)置來(lái)更改列寬度。混合：用上述3個(gè)選項(xiàng)的任意組合來(lái)決定列類(lèi)型。如，兩列混合，左側(cè)欄布局具有可縮放至瀏覽器大小的液態(tài)主列，而右側(cè)的彈性列可縮放至站點(diǎn)訪問(wèn)者的文本設(shè)置的大小。【文檔類(lèi)型】彈出菜單中選擇文檔類(lèi)型，一般情況下使用默認(rèn)選項(xiàng)【XHTML1.0Transitional】。如果在【布局】列表中選擇了一種CSW局，則從【布局CSS位置】彈出菜單中為布局的css弋碼選擇一個(gè)位置。添加到文檔頭：將布局的CSS代碼添加到要?jiǎng)?chuàng)建的頁(yè)面頭中。新建文件：將布局的CSS代碼添加到新的外部CSS文件，并將新的樣式表附加到要?jiǎng)?chuàng)建的頁(yè)面中。鏈接到現(xiàn)有文件：指定當(dāng)前頁(yè)面使用的現(xiàn)有CSS文件。單擊【附加CS戒件】窗格上

5、方的【附加樣式表】圖標(biāo)并選擇一個(gè)現(xiàn)有的CSS羊式文件。2.保存網(wǎng)頁(yè)如果網(wǎng)頁(yè)編輯完成或已經(jīng)告一段落，需要保存，根據(jù)不同的需要，保存的方法也不同。打開(kāi)【文件】菜單，要保存當(dāng)前文檔選擇“保存”命令；如果當(dāng)前文檔已經(jīng)保存過(guò)，可選擇“另存為”命令；如果在編輯時(shí)已經(jīng)打開(kāi)了多個(gè)文檔，希望將所有的文檔進(jìn)行保存，則選擇“保存全部”命令。三、設(shè)置頁(yè)面屬性1 .設(shè)置背景屬性操作步驟：?jiǎn)螕粜薷囊豁?yè)面屬性命令菜單，打開(kāi)“頁(yè)面屬性”對(duì)話框。單擊背景下拉列表框，在彈出的色盤(pán)中，用吸管吸取一個(gè)顏色。在“頁(yè)面屬性”對(duì)話框中，單擊“應(yīng)用”按鈕，此時(shí)，對(duì)話框不會(huì)消失，可以看到“編輯區(qū)”的背景顏色發(fā)生改變，頁(yè)面背景顏色設(shè)置完畢。設(shè)置

6、背景圖像。在“頁(yè)面屬性”對(duì)話框中，在“背景圖像”文本框中輸入圖像的地址或單擊“瀏覽”按鈕，在本地硬盤(pán)瀏覽選擇要插入的圖片，單擊確定按鈕。然后單擊應(yīng)用按鈕，可以看到圖像自動(dòng)平鋪鋪滿整個(gè)網(wǎng)頁(yè)。2 .設(shè)置文字屬性操作步驟：在“頁(yè)面屬性”對(duì)話框中，在“文本顏色”框中選擇網(wǎng)頁(yè)普通文本的顏色，在“鏈接顏色”框、“已訪問(wèn)鏈接”框中設(shè)置不同的顏色。3 .設(shè)置頁(yè)面邊距“左邊距”、“右邊距”兩個(gè)屬性是針對(duì)IE瀏覽器，用于設(shè)置整個(gè)頁(yè)面距離瀏覽器左側(cè)邊緣的寬度以及整個(gè)頁(yè)面距離瀏覽器頂部邊緣的高度，以像素為單位。操作步驟：在“頁(yè)面屬性”對(duì)話框中，輸入像素值，單擊確定即可。四、文本1 .文本的輸入可以在文檔窗口中直接鍵入

7、文本，也可以復(fù)制、剪切并粘貼文本，還可以從其他文檔導(dǎo)入文本。如果要將其他文本格式粘貼到DW中，可以使用【粘貼】或【選擇性粘貼】命令?！具x擇性粘貼】允許用戶以不同的方式指定所粘貼文本的格式。如將文本從帶格式的Word文檔粘貼到DW文檔中時(shí)，如果想要去掉文本原有格式，可以使用【選擇性粘貼】命令選擇只粘貼文本的選項(xiàng)。在編輯窗口中輸入所需的文本。如需換行分段，可以按下Enter鍵；如需換行但不分段，可以按住Shift鍵的同日按下Enter鍵?？赏ㄟ^(guò)插入一一HTML特殊字符一一不換行命令，在文中插入多個(gè)空格，實(shí)現(xiàn)首行縮進(jìn)的效果；可以通過(guò)【插入】/【日期】，打開(kāi)【插入日期】對(duì)話框，選擇日期格式，實(shí)現(xiàn)日期的

8、插入。2 .設(shè)置文本格式選擇要編輯的文本，在【屬性】面板里可以設(shè)置文本的各種格式。注意：選中文本，在【屬性】面板中，對(duì)段落中的文本進(jìn)行對(duì)齊、縮進(jìn)、添加段落間距、項(xiàng)目列表和編號(hào)列表等格式化設(shè)置。五、圖像在Dreamweaver中，既可以使用動(dòng)態(tài)圖像，也可以使用靜態(tài)圖像，要考慮文件的大小，例如，使用靜態(tài)圖像時(shí)最好使用GIF、JPG或PNG格式的圖像，因?yàn)檫@些圖像的體積相對(duì)較小。1.插入圖像在網(wǎng)頁(yè)中插入圖像時(shí)有兩種情況：一種情況是圖像已經(jīng)規(guī)劃在站點(diǎn)中；另一種情況是圖像位于站點(diǎn)之外。如果在建站前期沒(méi)有將圖像規(guī)劃在站點(diǎn)之內(nèi)，插入圖像時(shí)將彈出一個(gè)提示框，提示用戶將圖像復(fù)制到站點(diǎn)中。只要在編輯區(qū)中，將光標(biāo)移

9、至要插入圖像的地方，單擊菜單欄中的【插入】【圖像】命令，或者在【插入】工具欄的【常用】標(biāo)簽中單擊圖像選項(xiàng)即可。2.設(shè)置圖像屬性通過(guò)【屬性】面板設(shè)置其屬性，如改變圖像的大小、建立超鏈接、設(shè)置對(duì)齊方式等。要設(shè)置圖像的屬性，首先要選擇網(wǎng)頁(yè)中的圖像，這時(shí)【屬性】面板將顯示圖像的屬性。六、表格1.插入表格在網(wǎng)頁(yè)中插入表格的操作步驟如下： 1)在網(wǎng)頁(yè)中要插入表格的位置處定位光標(biāo)。 2)在【插入】工具欄中選擇【常用】標(biāo)簽，單擊其中的表格選項(xiàng)，則彈出【表格】對(duì)話框。 3)在對(duì)話框中進(jìn)行選項(xiàng)設(shè)置。 【行數(shù)】和【列】：用于設(shè)置插入表格的行數(shù)和列數(shù)。 【表格寬度】：用于設(shè)置表格的寬度，選擇“像素”為單位時(shí)，表格的寬

10、度為固定像素的寬度；選擇“百分比”為單位時(shí)，表格的寬度與瀏覽器窗口的寬度將保持相同的百分比。 【邊框粗細(xì)】：用于設(shè)置表格的邊框?qū)挾取?【單元格邊距】：用于設(shè)置表格中單元格內(nèi)的元素距離單元格邊框的距離。 【單元格間距】：用于設(shè)置表格中單元格之間的間距。 【標(biāo)題】：用于設(shè)置表頭的位置，分別為無(wú)、左、頂部、兩者。 輔助功能中的【標(biāo)題】：用于設(shè)置表格標(biāo)題，該標(biāo)題在表格的外側(cè)。 【摘要】：用于描述表格的相關(guān)信息。 4)單擊確定按鈕，即可在網(wǎng)頁(yè)中插入表格，在網(wǎng)頁(yè)中插入表格后，可以向單元格中直接輸入文本或插入其它的對(duì)象，如圖像、動(dòng)畫(huà)等，還可以向表格中插入嵌套表格。當(dāng)然，用戶也可以從外部導(dǎo)入其它軟件編輯的表格

11、，如Excel電子表格等。2.表格的編輯操作插入到網(wǎng)頁(yè)中的表格、單元格可以進(jìn)行各種編輯操作，如選擇、拆分與合并、復(fù)制、刪除等。 選中整個(gè)表格。將光標(biāo)指向表格邊框，當(dāng)光標(biāo)變成雙向箭頭形狀時(shí)單擊鼠標(biāo)，可以選擇整個(gè)表格。選中表格后，在表格的底邊框和右邊框?qū)⒊霈F(xiàn)三個(gè)小方塊。單擊狀態(tài)欄中的<table>標(biāo)簽，也可以選中整個(gè)表格。 選中表格的列。將光標(biāo)移至表格其中一列的上方，當(dāng)鼠標(biāo)指針變?yōu)橄蛴业暮谏〖^時(shí)，單擊鼠標(biāo)，可以選擇一列單元格。按住鼠標(biāo)左鍵左右拖曳，可以選擇連續(xù)的多列單元格。 選中表格的行。將光標(biāo)移至表格其中一行的左側(cè)，當(dāng)鼠標(biāo)指針變?yōu)橄蛴业暮谏〖^時(shí)，單擊鼠標(biāo)，可以選擇一行單元格。

12、按住鼠標(biāo)左鍵上下拖曳，可以選擇連續(xù)的多行單元格。Ctrl鍵的同時(shí)單擊鼠標(biāo),<td>標(biāo)簽，可以選擇光標(biāo)Shift鍵的同時(shí)單擊最后一另外，單擊狀態(tài)欄上的<tr>標(biāo)記，可以選擇光標(biāo)所在的一行單元格。 選中一個(gè)或多個(gè)單元格。將光標(biāo)定位在一個(gè)單元格中，按住即可選中鼠標(biāo)所在的單元格，或者多個(gè)其他的單元格，另外，單擊所在的單元格。將鼠標(biāo)移至要選定的第一個(gè)單元格中，然后按住個(gè)單元格，可以選擇二者之間的連續(xù)單元格。合并單元格的操作步驟如下：選擇表格中要合并的多個(gè)相鄰的單元格。單擊【屬性】面板中的合并按鈕，即可將所選單元格合并為一個(gè)單元格，原單元格中的內(nèi)容將組合為一組存放在合并后的單元格中

13、。拆分單元格的操作與合并單元格操作正好相反，它是將一個(gè)單元格拆分為幾個(gè)連續(xù)的單元格，其基本的操作步驟如下：將光標(biāo)定位在要拆分的單元格中。單擊【屬性】面板中的拆分按鈕，則彈出【拆分單元格】對(duì)話框。在話框中選擇要將單元格拆分成的行或列，并設(shè)置相應(yīng)的行數(shù)或列數(shù)。單擊確定按鈕，即可拆分單元格，原單元格中的內(nèi)容將保留在拆分后的左上角單元格中。插入或刪除行或列的操作步驟如下：選擇表格的行、列或單元格后，單擊鼠標(biāo)右鍵，則彈出快捷菜單。選擇【表格】子菜單中的相應(yīng)命令，可以插入或刪除行或列。 選擇【插入行】命令，可以在所選單元格的上方插入一行單元格。 選擇【插入列】命令，可以在所選單元格的左側(cè)插入一列單元格。

14、選擇【插入行或列】命令，則彈出【插入行或列】對(duì)話框。在對(duì)話框中進(jìn)行選項(xiàng)設(shè)置，即可插入多行或多列單元格。 選擇【刪除行】命令，可以刪除所選的一行單元格。 選擇【刪除列】命令，可以刪除所選的一列單元格。在表格中插入圖片、表格、文本將光標(biāo)移至要插入圖像的單元格中，單擊菜單欄中的【插入】【圖像】命令，或者在【插入】工具欄的【常用】標(biāo)簽中單擊插入圖像選項(xiàng)即可。將光標(biāo)移至要插入表格的單元格中，單擊菜單欄中的【插入】【表格】命令，或者在【插入】工具欄的【常用】標(biāo)簽中單擊插入表格選項(xiàng)即可。將光標(biāo)移至新插入表格的單元格中個(gè)，通過(guò)鍵盤(pán)直接在單元格中輸入文字，或通過(guò)其他文檔采用“復(fù)制一一粘貼”的方法將文字輸入到單元

15、格中。3.設(shè)置表格的屬性選擇要設(shè)置屬性的表格區(qū)域（可以是整個(gè)表格、一行或一列或一個(gè)單元格）后，在【屬性】面板中設(shè)置其相應(yīng)的屬性。七、應(yīng)用多媒體1 .在網(wǎng)頁(yè)中添加聲音在網(wǎng)頁(yè)中添加聲音有兩種方式：“添加音頻”、“添加背景音樂(lè)”(1)插入音頻在網(wǎng)頁(yè)中插入音頻時(shí)，一般采用rm或mp3格式的音頻，系統(tǒng)會(huì)生成默認(rèn)的播放器。在編輯區(qū)，將光標(biāo)移到要插音頻的位置上單擊“插入一一媒體一一插件”命令菜單，在彈出的“選擇文件”對(duì)話框中，選擇要插入的音頻，單擊確定。在相應(yīng)的位置出現(xiàn)插入的插件，在屬性檢查器中可以對(duì)其進(jìn)行設(shè)置。(2)添加背景音樂(lè)單擊窗口一一行為菜單，打開(kāi)行為面板，單擊按鈕，在下拉菜單中選擇“播放聲音”，在

16、彈出的播放聲音對(duì)話框中單擊瀏覽，選擇需要的音頻，單擊確定。選中插件，在屬性檢查器中單擊參數(shù)，在彈出的對(duì)話框中可以看到四個(gè)參數(shù)，其中LOOP是指循環(huán)播放，"autostart”是指自動(dòng)播放，"hidden”是指隱藏插件，將各個(gè)參數(shù)的值改為true,單擊確定。2 .插入視頻在編輯區(qū)，將光標(biāo)移到要插視頻的位置上單擊“插入一一媒體一一插件”命令菜單，在彈出的“選擇文件”對(duì)話框中，選擇要插入的視頻頻，單擊確定。3 .插入FlashFlash動(dòng)畫(huà)中的元素都是矢量的，可以隨意放大，都不會(huì)降低畫(huà)面質(zhì)量，此外Flash動(dòng)畫(huà)文件小，適合在網(wǎng)絡(luò)上使用，F(xiàn)lash動(dòng)畫(huà)的擴(kuò)展名為“.swf”。在編輯

17、區(qū)，將光標(biāo)移到要插Flash的位置上單擊“插入一一媒體一一swf”選項(xiàng)，選擇要插入的文件，單擊確定，在屬性檢查器中可以設(shè)置動(dòng)畫(huà)的寬、高等屬性。八、定義csS羊式(1)創(chuàng)建CSS羊式類(lèi)樣式：又稱(chēng)自定義樣式，它是唯一可作為class屬性應(yīng)用于文檔中任何對(duì)象的CSS羊式類(lèi)型，主要用于定義一些特殊的樣式。標(biāo)簽樣式：用來(lái)重定義HTML標(biāo)簽的樣式，例如：一旦定義了<body>樣式，則網(wǎng)頁(yè)將自動(dòng)按照定義的body樣式更新。高級(jí)樣式：主要用于定義鏈接文本的樣式，也可用來(lái)重定義特定標(biāo)簽組合的樣子。(2)設(shè)置CSS羊式屬性設(shè)置背景屬性：對(duì)網(wǎng)頁(yè)中的任何元素設(shè)置背景屬性設(shè)置區(qū)塊屬性：定義文字的排列方式設(shè)置方框?qū)傩裕憾x網(wǎng)頁(yè)元素的大小和其在頁(yè)面上的放置方式。設(shè)置邊框?qū)傩裕憾x元素周?chē)倪吙蛟O(shè)置列表屬性：定義列表樣式設(shè)置定位屬性：定義元素在頁(yè)面中的位置設(shè)置擴(kuò)展屬性：設(shè)置一些附加屬性(3)本網(wǎng)站的CSS羊式Body(標(biāo)簽)設(shè)置類(lèi)型：“大小”12像素；“行高”20像素設(shè)置方框：“邊界”0Line(類(lèi))(類(lèi)的命名以“：'開(kāi)頭)設(shè)置方框：“寬”86像素；“高”86像素設(shè)置邊框：“樣式(Style)”一一實(shí)線(Solid);“寬度”1;“顏色"#CCCCCCList(類(lèi))設(shè)置類(lèi)型：“大小”12像素；“行高”22像素；“顏色”#666666九、超鏈接(