DreamweaverCS5第二次課

1、網(wǎng)頁制作實例張露萍教育科學(xué)學(xué)院網(wǎng)頁制作1.建立站點（1）首先把我們即將用到的素材“心靈小站”文件夾復(fù)制到D盤。（2）單擊站點新建站點命令，彈出建立站點的向?qū)?，在彈出的對話框中輸入站點的名字“心靈小站”，單擊完成新建站點。網(wǎng)頁制作2.網(wǎng)頁布局（1）制作網(wǎng)頁上部網(wǎng)頁制作 Step1：插入一個7行1列、寬1000像素、“邊框粗細(xì)”、“單元格邊距”和“單元格間距”均為0的表格(稱為表格1)，對齊方式“居中對齊”。 Step2：將光標(biāo)放在第一行中，在插入面板中的“常用”選項中，單擊圖像圖標(biāo)，在彈出的對話框中找到心靈小站文件夾下的images文件夾，選擇“index_01.gif”圖像，單擊確定。 Ste

2、p3：將光標(biāo)放到第二行中，單擊“屬性檢查器”中的“拆分”按鈕，將設(shè)計視圖切換到拆分視圖，在文檔 窗口上方顯示代碼，這時我們找到光標(biāo)所在的位置，使用方向鍵往左移，將其移到標(biāo)簽中，然后按空格鍵，這時會彈出一個代碼列表，雙擊background代碼，出現(xiàn)瀏覽圖標(biāo)，然后在站點文件夾中找到“ index_03.gif”圖片，單擊確定。這時我們會看到圖片橫向鋪滿整個單元格。網(wǎng)頁制作 Step4：仍將光標(biāo)放置在第二行，選擇拆分圖標(biāo)，將其拆分為兩列，將插入點放在第2行第2個單元格，在插入面板中的“常用”選項中，單擊圖像圖標(biāo)，選擇“index_05.gif”圖像，單擊確定，并設(shè)置為“右對齊”。 Step5：將插

3、入點置于表格1第3行，在屬性檢查器中設(shè)置其高為5像素，然后單擊“文檔工具欄”中的“拆分”按鈕，在文檔窗口上方顯示代碼，將表格3對應(yīng)單元格中的空格符號“&nbsp”刪除，以使表格按照指定的高度顯示，回到“設(shè)計”視圖。網(wǎng)頁制作（2）制作網(wǎng)頁中部本例中的首頁中部主要是一些欄目精華，是由2個大表格中嵌套多個小表格組成的網(wǎng)頁制作 Step1：將插入點置于表格1的第4行，插入一個1行2列，寬1000像素，“邊框粗細(xì)”、“單元格邊距”和“單元格間距”均為0的表格，我們稱其為表格2， 并設(shè)置對齊方式為“居中對齊”。將光標(biāo)放在表格2的第一列中，設(shè)置其寬度為720像素，“垂直”設(shè)為“頂端”，將光標(biāo)放在表格

4、2的第二列中，“垂直”設(shè)為“頂端”。 Step2：在表格2的第一列中插入一個1行1列，寬714像素，“邊框粗細(xì)為1”、“單元格邊距”和“單元格間距”均為0的表格，我們稱其為表格3，然后單擊“文檔工具欄”中的“拆分”按鈕，在文檔窗口上方顯示代碼，在選中的代碼中，將光標(biāo)放置到border=1后，按空格鍵，這時會彈出一個代碼列表，雙擊bordercolor代碼，出現(xiàn)顏色選項，設(shè)置邊框顏色“#CCCCCC”，回到“設(shè)計”視圖，垂直設(shè)為“頂端”。網(wǎng)頁制作 Step3：在表格3的第一列中插入一個3行1列，寬714像素，“邊框粗細(xì)”、“單元格邊距”和“單元格間距”均為0的表格，我們稱其為表格4。 Step4

5、：將光標(biāo)放在表格4的第一行中，設(shè)置其背景圖片為“index_09.gif”操作方法和剛剛所講述的設(shè)置背景圖像的方法一樣。然后將光標(biāo)放置在第二行，選擇拆分圖標(biāo)，將單元格拆分為兩列。將光標(biāo)放在第一列中，設(shè)置寬度20；將光標(biāo)放在第二列中，插入圖像“t_11.gif”。 Step5：將光標(biāo)放在表格4的第2行中，插入一個1行6列，寬714像素，“邊框粗細(xì)”、“單元格邊距”和“單元格間距”均為0的表格，我們稱其為表格5，將每個單元格的寬設(shè)為119，高設(shè)為100，水平設(shè)為“居中對齊”。網(wǎng)頁制作 Step6：新建CSS樣式。格式CSS樣式新建（命名為“.line”）設(shè)置方框：寬86像素，高86像素；設(shè)置邊框：

6、“樣式（style）”實線（solid），“寬度（width）”1像素，“顏色”#CCCCCC。 Step7：將光標(biāo)放在表格5的第1列，在插入面板中的常用工具欄中，選擇“插入Div標(biāo)簽”，選擇“類”“l(fā)ine”，插入圖像“p1.jpg”，使用此方法插入這6張圖像。 Step8：將光標(biāo)放在表格4的第3行中，插入一個1行6列，寬714像素，“邊框粗細(xì)”、“單元格邊距”和“單元格間距”均為0的表格，我們稱其為表格6，居中對齊，將每個單元格的寬設(shè)為119。 Step9：新建CSS樣式。格式CSS樣式新建（命名為“.list”）。設(shè)置類型：“大小” 12像素；“行高” 22像素；“顏色”為#666666

7、。網(wǎng)頁制作 Step10：將鼠標(biāo)放在表格6的第1列中，“水平”居中對齊，復(fù)制文字，選擇類“.list”，用此方法插入6段文字。 Step11：將鼠標(biāo)放在表格2的第2列中，插入一個1行1列，寬274像素，“邊框粗細(xì)為1”、“單元格邊距”和“單元格間距”均為0的表格，我們稱其為表格7，對齊設(shè)置為右對齊，并通過切換到拆分視圖設(shè)置邊框顏色bordercolor為“#CCCCCC”。 Step12：將光標(biāo)放在表格7中，設(shè)置水平垂直為頂端，插入一個2行1列，寬274像素，“邊框粗細(xì)”、“單元格邊距”和“單元格間距”均為0的表格-表格8，在表格8的第一行中，將圖片“index_09.gif”設(shè)置為背景圖像。

8、然后將該單元格拆分單元格為兩列。將光標(biāo)放在第一列中，設(shè)置寬度20；將光標(biāo)放在第二列中，插入圖像“t_13.gif”。網(wǎng)頁制作 Step13：將光標(biāo)放在表格8的第2行，插入文字，并為其設(shè)置項目符號，然后應(yīng)用類list。然后進(jìn)行預(yù)覽，如果其高度相差很多，就通過手動進(jìn)行調(diào)整。 Step14：將光標(biāo)放在表格1的第5行，插入一個1行3列，寬1000像素，“邊框粗細(xì)”、“單元格邊距”和“單元格間距”均為0的表格，稱為表格9，設(shè)置對齊為居中對齊，然后分別設(shè)三個單元格寬為440、280、280，垂直為“頂端”。 Step15：將鼠標(biāo)放在表格9的第1列中，插入一個1行1列，寬434像素，“邊框粗細(xì)”、“單元格邊

9、距”和“單元格間距”均為0的表格，稱為表格9，邊框設(shè)為1，邊框顏色“#CCCCCC”，垂直“頂端”。網(wǎng)頁制作 Step16：在表格9中插入一個2行1列，寬434像素，“邊框粗細(xì)”、“單元格邊距”和“單元格間距”均為0的表格，將光標(biāo)放在表格9的第1行，將圖片“index_09.gif”設(shè)置為背景圖片。然后將該單元格拆分為兩列。將光標(biāo)放在第一列中，設(shè)置寬度20；將光標(biāo)放在第二列中，插入圖像“t_15.gif”（這個模塊的制作過程與“本站公告”相同），略。 Step17：打開“text”文件夾中的“圖片滾動代碼.txt”文件,并選擇“”至“”這段代碼。將其粘貼在的后面就可以。這一步實現(xiàn)了對圖片大小，

10、滾動位置、滾動速度的控制。網(wǎng)頁制作 Step18：在表格1的第6行中插入一個1行1列，寬1000像素，“邊框粗細(xì)”、“單元格邊距”和“單元格間距”均為0的表格，稱為表格10。 Step19：.選擇表格10，將光標(biāo)放在表格中。此時查看代碼編輯區(qū)內(nèi)的光標(biāo)的位置。當(dāng)找到代碼編輯區(qū)的光標(biāo)后，按“回車”空行，在“圖片滾動代碼.txt”文件中選擇后半部分代碼，將其粘貼在光標(biāo)所在位置的代碼編輯區(qū)內(nèi)。 Step20：在文本編輯區(qū)內(nèi)，選擇剛才插入表格，發(fā)現(xiàn)表格里面有三張灰色的圖片，此時選擇第一張，并雙擊，打開一個對話框。在這個對話中選擇要插入的圖片。如在這里我們選擇pp6.jpg格式的圖片，然后選擇確定。第二、第三張插入圖片的方法一樣。網(wǎng)頁制作 （3）制作網(wǎng)頁下部相對網(wǎng)頁上部和中部來說，網(wǎng)頁下部的制作相當(dāng)簡單。網(wǎng)頁制作 Step1： 在表格1的最后一行插入一個1行2列，寬1000像素，“邊框粗細(xì)”、“單元格 邊距”和“單元格間距”均為0的表格，對齊方式“居中對齊。 Step2：將插入點放在第1個單元格，單擊“屬性”面板上“垂直”中選“底部”，插入圖像“ index_14.gif。 Step3：將插入點放在第2個單元格，插入圖像“index_13.gif”，并設(shè)置為“右對齊”。網(wǎng)頁制作3.插入背景音樂 Step1：將光標(biāo)放在表格11的第一列圖片的上方，單擊窗口行