Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)任務(wù)5完成首頁(yè)內(nèi)容區(qū)制作2

1、Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目教程機(jī)械工業(yè)出版社任務(wù)5完成首頁(yè)內(nèi)容區(qū)制作2（建議2學(xué)時(shí)）任務(wù)實(shí)施任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 #index_top在#main的上部，包括左側(cè)的“flash”及登錄區(qū)；右側(cè)的新聞列表區(qū)。其結(jié)構(gòu)如圖所示 ：任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 （1）創(chuàng)建#index_top內(nèi)的布局 1）插入#pic。插入Div標(biāo)簽，插入位置在#index_top結(jié)束標(biāo)簽前，名稱為“#pic”，如圖所示: 任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 2）插入#hot_news。插入Div標(biāo)簽，插入位置在#index_top結(jié)束標(biāo)簽前，名稱為“#h

2、ot_news”，如圖所示:任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 3）插入#login。插入Div標(biāo)簽，插入位置在#pic結(jié)束標(biāo)簽前，名稱為“#login”，如圖所示:任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 4）插入#news_top。插入Div標(biāo)簽，插入位置在#hot_news結(jié)束標(biāo)簽前，名稱為“#news_top”，如圖所示: 任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 5）插入#news_list。插入Div標(biāo)簽，插入位置在#hot_news結(jié)束標(biāo)簽前，名稱為“#news_list”，如圖所示:任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 （2）設(shè)置#index_

3、top內(nèi)div的CSS樣式 1）設(shè)置#pic的CSS樣式。 創(chuàng)建#pic的CSS樣式。單擊CSS樣式面板下方的“新建CSS規(guī)則”按鈕，在彈出的“新建CSS規(guī)則”對(duì)話框中做如圖所示的設(shè)置，設(shè)置完成后單擊“確定”按鈕。 在方框樣式中，設(shè)置它的寬度為269px，左浮動(dòng) 任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 2）設(shè)置#hot_news的CSS樣式。 創(chuàng)建#hot_news的CSS樣式。單擊CSS樣式面板下方的“新建CSS規(guī)則”按鈕，在彈出的“新建CSS規(guī)則”對(duì)話框中做如圖所示的設(shè)置，設(shè)置完成后單擊“確定”按鈕。任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 在背景樣式中，設(shè)置它的背景圖片為h

4、ot_bg.gif（在默認(rèn)的網(wǎng)站圖片文件 夾images中），背景圖片不重復(fù) 在方框樣式中，設(shè)置它的寬度為358px、高度為255px，右浮動(dòng)任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 3）設(shè)置#login的CSS樣式。 創(chuàng)建#login的CSS樣式。單擊CSS樣式面板下方的“新建CSS規(guī)則”按鈕，在彈出的“新建CSS規(guī)則”對(duì)話框中做如圖所示的設(shè)置，設(shè)置完成后單擊“確定”按鈕 在方框樣式中，設(shè)置它的上邊距為6px 任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 4）設(shè)置#news_top的CSS樣式。 創(chuàng)建#news_top的CSS樣式。單擊CSS樣式面板下方的“新建CSS規(guī)則”按鈕，在彈

5、出的“新建CSS規(guī)則”對(duì)話框中做如圖所示的設(shè)置，設(shè)置完成后單擊“確定”按鈕。 在方框樣式中，設(shè)置它的下填充為8px 在邊框樣式中，設(shè)置它的下邊框線樣式（border-bottom）為點(diǎn)狀線（dotted），線粗細(xì)1px，邊框線顏色為#ccc 任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 5）設(shè)置#news_list的CSS樣式。 創(chuàng)建#news_list的CSS樣式。單擊CSS樣式面板下方的“新建CSS規(guī)則”按鈕，在彈出的“新建CSS規(guī)則”對(duì)話框中做如圖所示的設(shè)置，設(shè)置完成后單擊“確定”按鈕。 在方框樣式中，設(shè)置它的上填充為6px， 任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 上述操作在

6、layout.css文檔中的代碼為：#pic float:left; width:269px;#login margin-top:6px;#hot_news Zfloat:right; width:358px; height:225px; padding:15px; background:url(./images/hot_bg.gif) 0 0 no-repeat;#news_top border-bottom:1px dotted #ccc; padding-bottom:8px;#news_list padding-top:6px;任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 （3）為#

7、index_top添加內(nèi)容 1）在#pic中內(nèi)容的添加。 光標(biāo)定位在#pic中，選擇“插入”“媒體”“SWF”，在彈出的“選擇SWF”對(duì)話框中找到“indexpic.swf”，單擊“確定”按鈕。 對(duì)于“對(duì)象標(biāo)簽輔助功能屬性”選擇“取消”即可，在index.html代碼中的#pic下出現(xiàn)一段JS代碼，即插入SFW文檔的代碼。 插入“登錄”圖片。光標(biāo)定位在#login中，選擇“插入”“圖像”，在“選擇圖像源文件”對(duì)話框中找到“btn_login.gif”，單擊“確定”按鈕。 重復(fù)步驟，插入圖片“btm_login1.gif”，也可直接在代碼窗口復(fù)制并修改代碼 。 login添加圖片任務(wù)實(shí)施雙擊添加

8、標(biāo)題文字Index_top制作 2）在hot_news中內(nèi)容的添加。 光標(biāo)定位在#hot_news中，輸入文字如圖所示: 光標(biāo)定位在#news_top中，輸入文字如圖所示。任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 光標(biāo)定位在#news_list中，選擇“插入”“文本”“項(xiàng)目列表”，輸入文字如圖所示。任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 選中列表文字，在下面屬性欄中為列表文字添加鏈接，如圖所示。 index.html中生成的代碼如圖所示: 復(fù)制并修改代碼，完成#news_list中的項(xiàng)目列表，如圖所示:任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 （4）CSS樣式美化 1）標(biāo)題

9、美化CSS樣式。 創(chuàng)建#mews_top hi CSS樣式。單擊CSS樣式面板下方的“新建CSS規(guī)則”按鈕，在彈出的“新建CSS規(guī)則”對(duì)話框中做如圖設(shè)置，設(shè)置完成后單擊“確定”按鈕。 在類型樣式中，設(shè)置它的字體（font-family）為雅黑（yahei），字號(hào)（font-size）為16px，行高2.2倍，顏色（color）為#444 任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 創(chuàng)建#news_top P CSS樣式。單擊CSS樣式面板下方的“新建CSS規(guī)則”按鈕，在彈出的“新建CSS規(guī)則”對(duì)話框中做如圖所示的設(shè)置，設(shè)置完成后單擊“確定”按鈕 在類型樣式中，設(shè)置它的顏色（color）為#

10、999 任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 應(yīng)用CSS樣式。返回index.html的設(shè)計(jì)窗口，選中#hot_news中的標(biāo)題文字，選擇“插入”“文本”“h2”，如圖所示: 也可以用手輸入代碼的方法添加標(biāo)題樣式。方法如下:返回index.html的代碼窗口，光標(biāo)定位在#hot_news中的標(biāo)題文字處，用手輸入代碼“h”（注意：代碼為英文半角小寫），此時(shí)系統(tǒng)給出提示，選中“h2”并按回車，或直接用手輸入“”，如圖所示: 在標(biāo)題文字結(jié)尾，用手輸入“/”，系統(tǒng)自動(dòng)給出結(jié)束符“”， 任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 2）項(xiàng)目列表美化CSS樣式 創(chuàng)建“# news_list u

11、l li”CSS樣式。單擊CSS樣式面板下方的“新建CSS規(guī)則”按鈕，在彈出的“新建CSS規(guī)則”對(duì)話框中做如圖所示的設(shè)置，設(shè)置完成后單擊“確定”按鈕 任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 在類型樣式中，設(shè)置它的行高為1.9。 在背景樣式中，設(shè)置它的背景圖片（backgroud-iamges）為“icon.gif”，設(shè)置背景不重復(fù)，設(shè)置背景位移x方向?yàn)?，y方向?yàn)?00px 。 在方框樣式中，設(shè)置它的左填充（padding-left）為20px layout.css代碼窗口顯示如下 任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 創(chuàng)建“# news_list ul li span”CS

12、S樣式。單擊CSS樣式面板下方的“新建CSS規(guī)則”按鈕，在彈出的“新建CSS規(guī)則”對(duì)話框中做如圖所示的設(shè)置，設(shè)置完成后單擊“確定”按鈕 任務(wù)實(shí)施雙擊添加標(biāo)題文字Index_top制作 在類型樣式中，設(shè)置它的顏色（color）為#579f11 在方框樣式中，設(shè)置它的浮動(dòng)（float）為右浮動(dòng)（right） 返回index.html代碼窗口，為#news_list列表項(xiàng)添加日期 復(fù)制代碼，為各列表項(xiàng)添加日期,最終效果如圖所示: 任務(wù)實(shí)施雙擊添加標(biāo)題文字#Index_pic制作 （1）添加產(chǎn)品圖片 1）光標(biāo)定位在#pic中，選擇“插入”“常用”“圖像”，在彈出的“選擇圖像源文件”對(duì)話框中找到“./i

13、mages/1.jpg”，單擊“確定”按鈕 。 2）在“圖像標(biāo)簽輔助功能屬性”對(duì)話框中，替換文本為“產(chǎn)品說(shuō)明”，此項(xiàng)功能在網(wǎng)頁(yè)瀏覽過(guò)程中可以幫助閱讀顯示內(nèi)容。 3）為圖片添加鏈接。選中圖片，在下方的屬性面板中添加空鏈接。 4）選中圖片，為其插入“項(xiàng)目列表” 。 5）光標(biāo)定位在圖片后，按鍵，為其添加一個(gè)換行，輸入圖片的說(shuō)明文字為“iphone 4” 。 6）重復(fù)步驟1）至5），為#index_pic插入其他圖片。更簡(jiǎn)單的方法是通過(guò)復(fù)制代碼，修改相應(yīng)的參數(shù)來(lái)完成其他圖片的插入。任務(wù)實(shí)施雙擊添加標(biāo)題文字#Index_pic制作 （2）創(chuàng)建#index_pic的內(nèi)部CSS樣式 1）設(shè)置#index_p

14、ic標(biāo)題CSS樣式。 創(chuàng)建#index_pic h2 CSS樣式。單擊CSS樣式面板下方的“新建CSS規(guī)則”按鈕，在彈出的“新建CSS規(guī)則”對(duì)話框中做如圖所示的設(shè)置，設(shè)置完成后單擊“確定”按鈕。任務(wù)實(shí)施雙擊添加標(biāo)題文字#Index_pic制作 在背景樣式中，設(shè)置它的背景圖片（back-ground）為“box_tit_bg.gif” 。 在方框樣式中，設(shè)置它的高度（height）為28px。 在邊框樣式中，設(shè)置它的邊框線樣式（style）為實(shí)線（solid），線粗細(xì)（width）為1px，顏色為#dbdbdb。 在空位樣式中，設(shè)置它的超出部分隱藏 。 創(chuàng)建#index_pic h2 spanC

15、SS樣式。單擊CSS樣式面板下方的“新建CSS規(guī)則”按鈕，在彈出的“新建CSS規(guī)則”對(duì)話框中做如圖所示的設(shè)置，設(shè)置完成后單擊“確定”按鈕。 任務(wù)實(shí)施雙擊添加標(biāo)題文字#Index_pic制作 在背景的樣式中，設(shè)置它的背景圖片（back-ground）為“rmcp.gif”及不重復(fù)，圖片X的偏移量為12px，圖片Y的編移量為6px 。 在區(qū)塊樣式中，設(shè)置它的顯示（Display）為區(qū)塊（block）。 在方框樣式中，設(shè)置它的高度（height）為25px 。 任務(wù)實(shí)施雙擊添加標(biāo)題文字#Index_pic制作 2）設(shè)置#index_pic列表CSS樣式。設(shè)置#index_pic列表CSS樣式的操作方法與上面的操作類似，這里直接用手寫代碼的方法完成CSS樣式設(shè)置。 返回到layout.css，輸入狀態(tài)為英文半角，輸入“#index_pic ul”+“空格”，系統(tǒng)出現(xiàn)提示，