網(wǎng)頁制作第五章

第五章 在Dreamweaver中美化頁面教學目標掌握在頁面中創(chuàng)建和修改Flash文本和按鈕掌握在頁面中插入Flash影片的基本方法掌握創(chuàng)建層和設置層屬性的方法了解并掌握使用時間軸制作層動畫了解簡單的網(wǎng)頁特效的實現(xiàn)

范例網(wǎng)站的首頁制作步驟啟動FireworksMX2004，單擊“文件”菜單中的“新建”命令，打開“新建”對話框，新建一個寬770、高480的圖片，并在色板里輸入“#1A3783”后按回車。單擊右下角“層”面板中的“新建層”按鈕，選擇層面板下方的“新建位圖圖像”按鈕，再選擇“位圖”工具面板中的“油漆桶工具”，并在“顏色”工具面板中將填充顏色設置為#D6E3FF，如圖所示，然后填充該圖層。制作步驟用窗口左端的“位圖”工具面板中“選取框”工具拖出一個選區(qū)，再選擇工具，按住Shift鍵，從這個矩形的上邊線的中點開始，從左向右拖動，填加一個選區(qū)，如圖所示。制作步驟按“Ctrl+X”快捷鍵或單擊“編輯”菜單中的“剪切”命令，刪除選中的區(qū)域，再按“Ctrl+D”快捷鍵或單擊“選擇”命令菜單中的“取消選擇”命令取消選擇，效果如圖所示。制作步驟單擊“選擇”工具條上的“指針”工具按鈕，選擇“窗口”菜單中的“屬性”命令，就打開了屬性面板，單擊屬性面板右側“效果：”后面的“添加效果或選擇預設”按鈕，在彈出的下拉菜單中的“陰影和光暈”再在子菜單中選擇“投影”選項?；氐綀D層1，選擇左側“矢量”工具面板上的“文本”工具按鈕，在舞臺上輸入文字“CABLE”，將字體設置為“方正超粗黑”，字體大小選100，顏色為#000000，不透明度設為10。選擇“修改”菜單中的“變形”命令，在其了菜單中選擇“順時針旋轉90度”，然后選擇工具條上的“指針”工具按鈕，將旋轉后的文字層移至最左邊

制作步驟重復上述步驟，輸入文字“”（其中“yourname”是網(wǎng)站的地址，可根據(jù)具體情況而定），字體大小設為35，不透明度為20，順時針旋轉90度后，選擇工具條上的“指針”工具按鈕將它移至左邊制作步驟打開掃描好的產(chǎn)品圖片“chanpin01.jpg”，單擊“位圖”工具面板中的“魔術棒”工具按鈕，選中圖片中紅色區(qū)域，再單擊“選擇”主菜單中的“反選”命令，產(chǎn)品的邊緣部分可以用“多邊形套索”工具按鈕工具加工一下，完成后得到如圖所示的效果。制作步驟將選中的區(qū)域拷貝至新建的文件中，調整圖片寬度為200，設置圖層不透明度為15。導入掃描好的企業(yè)圖標文件“biao3.gif”，將其放到圖片左上角的適當位置，效果如圖所示。制作步驟選擇“文本”工具，輸入文字“沈陽電纜廠石家莊銷售處”，設置文字屬性如圖所示。選擇“Web”工具面板上的選擇“Web”工具面板上的工具，拉出幾條切片輔助線，按照切片輔助線分割的形狀，把整個圖片切分，效果如圖所示。這是因為背景圖片過大，會嚴重影響下載速度，誰也不希望自己精心做好的網(wǎng)頁，因為下載速度而被拒絕瀏覽。在上網(wǎng)瀏覽時只要仔細觀察就可以發(fā)現(xiàn)只要是稍大一點的圖片，都是經(jīng)過切片處理的。制作步驟完成后單擊“文件”菜單中的“導出”命令，把圖片導出為index.htm，這是因為我們現(xiàn)在做的是一個網(wǎng)站的首頁，保存類型選“HTML和圖像”制作步驟用Dreamweaver打開我們剛在Fireworks中生成的“index.htm”文件，單擊“修改”菜單中的“頁面屬性”命令，設置上邊距和左邊距為0，頁面標題為“:::沈陽電纜廠石家莊銷售處:::”。單擊“標簽選擇器”中的<table>標簽選中整個表格中的圖片，再將表格設置為水平居中，拖動選中2-6行第2、3列單元格，按“Delete”鍵刪除掉表格中的圖片，效果如圖所示，合并單元格，設置單元格背景色為“#1A3783”。制作步驟制作步驟在合并后的單元格內再插入一個3行1列的表格，表格寬度為100%，表格水平居中對齊。設置第一至第三行高度分別為250、50、30，單元格水平居中對齊。在第一行中插入產(chǎn)品變換FLASH，即單擊“插入”工具欄中“常用”選項卡中的“媒體”按鈕，打開“選擇文件”對話框，選擇“image