DreamweaverCS5第二次課

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

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

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

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

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

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

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

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

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

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