網(wǎng)頁設(shè)計與制作實訓(xùn)報告要求-文庫吧
2024-11-09 22:40 本頁面
【正文】 、網(wǎng)站建設(shè)的第一步是創(chuàng)建本地站點(diǎn)。創(chuàng)建的站點(diǎn)信息將顯示在“文件”面板中。如果需要對站點(diǎn)參數(shù)進(jìn)行修改，可以單擊“站點(diǎn)→管理站點(diǎn)”對站點(diǎn)進(jìn)行重新設(shè)置。三、網(wǎng)站主頁制作+CSS布局頁面使用Div+CSS實現(xiàn)頁面布局，具體操作如下：4）為AP Div元素設(shè)置CSS樣式。由于網(wǎng)站首頁和子頁面采取相同的布局風(fēng)格，因此樣式表采用外部鏈接樣式表。5）選中創(chuàng)建的AP元素“container”，在右側(cè)的“CSS樣式”面板中單擊鼠標(biāo)右鍵，選擇“新建”命令，打開“新建CSS規(guī)則”對話框，并作相應(yīng)設(shè)置，如圖所示。6）單擊確定按鈕，彈出“container的CSS規(guī)則定義”對話框，選擇分類列表框下的“背景”選項卡，設(shè)置文檔的“背景顏色”為FFF；在分類列表框中，切換到“區(qū)塊”選項卡，設(shè)置“文本對齊”屬性為左對齊；在分類列表框中，切換到“方框”選項卡，設(shè)置Ap Div的“寬”為960 px，“上邊界”為1 px，“下邊界”為0 px；“邊框”和“列表”選項卡的屬性保持默認(rèn)設(shè)置；切換到“定位”選項卡，單擊確定按鈕，完成對“container”元素樣式的定義。設(shè)置后的“CSS樣式”面板如圖所示。/* ==整體布局定義開始== */ Container { width:960px。/*定義頁面寬度*/ visibility:visible。/*設(shè)置可見度*/ margin:1px auto 0。/*設(shè)置外邊距*/ backgroundcolor: FFF。/*定義背景顏色*/ } 。頁面屬性是對標(biāo)簽屬性的設(shè)置。代碼如下所示： body{ fontsize:12px。/*定義字號*/ color:666。/*定義字體顏色*/ background:FFF。/*定義背景顏色*/ textalign:center。/*定義文本位置*/ margin:0。/*定義外邊距*/ padding:0。/*定義外邊距*/ border:0。/*定義邊框粗細(xì)*/ background: transparent。/*定義背景透明*/ } ，選擇“修改→頁面屬性”菜單命令，在打開的“頁面屬性”對話框中進(jìn)行相應(yīng)設(shè)置。在頂部的“top”元素中插入一幅圖像。如圖所示。網(wǎng)頁導(dǎo)航條是非常重要的網(wǎng)頁元素，網(wǎng)頁間的跳轉(zhuǎn)，需要通過導(dǎo)航條來完成。1）將光標(biāo)定位在“nav” Div元素中，在其內(nèi)部輸入列表項，并為列表項的各個單元設(shè)置超鏈接。設(shè)置情況如圖所示。2）添加CSS樣式。nav { height:30px。/*定義高度*/ width:100%。/*定義寬度*/ backgroundcolor:c00。/*定義背景顏色*/ overflow: hidden。/*定義溢出效果*/ } nav ul { fontsize:12px。/*定義字號*/ color:FFF。/*定義字體顏色*/ lineheight:30px。/*定義字體行高*/ whitespace:nowrap。/*定義區(qū)塊空格*/ margin:0 0 0 30px。/*定義外邊距*/ padding:0。/*定義內(nèi)邊距*/ } nav li { liststyletype:none。/*定義列表類型*/ display:inline。/*定義區(qū)塊顯示效果*/ } nav li a { textdecoration:none。/*定義字體修飾*/ fontfamily:Arial, Helvetica, sansserif。/*定義字體*/ color:FFF。/*定義字體顏色*/ padding:7px 10px。/*定義內(nèi)邊距*/ } nav li a:hover { color:ff0。/*定義字體顏色*/ backgroundcolor:red。/*定義背景顏色*/ 該樣式表使用列表項實現(xiàn)導(dǎo)航菜單功能。效果如圖所示。1）把光標(biāo)置于DIV元素“l(fā)eft”中，創(chuàng)建新的DIV元素 sideBarLefta1，并定義相關(guān)樣式2）在DIV元素“sideBarLefta1”的內(nèi)部插入推薦廠家標(biāo)志及說明文字等信息，定義相關(guān)樣式如圖所示。3），left { float:left。/*定義浮動位置 */ width:640px。/*定義寬度 */ height:832px。/*定義高度 */ }.sideBarLeftb1 { width:238px。/*定義寬度 */ height:240px。/*定義高度*/ border:ebcbb4 solid 1px。/*定義邊框的顏色、粗細(xì)、樣式*/ } 1）將光標(biāo)置于div元素“l(fā)eft”中，插入一個嵌套的div元素sideBarLefta2，2）將光標(biāo)置于DIV元素“banner”中，插入一個已經(jīng)準(zhǔn)備好的SWF元素。3）選中“banner”下面DIV元素，并定義類為“hot”，在4個小DIV元素中分別插入準(zhǔn)備好的廣告圖，效果如圖所示： sideBarLefta2 {float:left。/*定義浮動位置 */ width:390px。/*定義寬度 */ height:268px。/*定義高度*/ overflow: hidden。/*定義溢出效果*/ } banner { margintop:5px。/*定義頂端外邊距*/ border:999 solid 1px。/*定義邊框的顏色、粗細(xì)、樣式*/ width:390px。/*定義寬度 */ }.hot{ display:inline。/*定義區(qū)塊顯示效果*/ border:999 1px solid。/*定義邊框的顏色、粗細(xì)、樣式*/ width:91px。/*定義寬度 */ height:70px。/*定義高度*/ float:left。/*定義浮動位置 */ margin:2px。/*定義外邊距*/ } 1）將光標(biāo)置于DIV元素“right”中。如圖所示。2），，效果如圖所示。： right { float:left。/*定義浮動位置 */ width:320px。/*定義寬度 */ height:832px。/*定義高度 */ }.sideBarRightb3 { height:60px。/*定義高度*/ margintop:5px。/*定義頂端外邊距*/ border:ebcbb4 1px solid。/*定義邊框的顏色、粗細(xì)、樣式*/ }.sideBarRightb4 { height:93px。/*定義高度*/ margintop:5px。/*定義頂端外邊距*/border:ebcbb4 1px solid。/*定義邊框的顏色、粗細(xì)、樣式*/ marginbottom:5px。/*定義底端外邊距*/ }.sideBarRightb3,.sideBarRightb4 img { textalign:center。/*定義文本位置 */ padding:5px。/*定義內(nèi)邊距*/ }
環(huán)評公示相關(guān)推薦
鄂ICP備17016276號-1