《網(wǎng)頁設(shè)計》課件-4.2任務(wù)一美化關(guān)于我們頁面導(dǎo)航_第1頁
《網(wǎng)頁設(shè)計》課件-4.2任務(wù)一美化關(guān)于我們頁面導(dǎo)航_第2頁
《網(wǎng)頁設(shè)計》課件-4.2任務(wù)一美化關(guān)于我們頁面導(dǎo)航_第3頁
《網(wǎng)頁設(shè)計》課件-4.2任務(wù)一美化關(guān)于我們頁面導(dǎo)航_第4頁
《網(wǎng)頁設(shè)計》課件-4.2任務(wù)一美化關(guān)于我們頁面導(dǎo)航_第5頁
已閱讀5頁，還剩13頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

SAMPLE4.2任務(wù)一美化“關(guān)于我們”頁面導(dǎo)航項目四使用CSS樣式美化頁面——簡單快捷規(guī)范制作頁面本任務(wù)中將學(xué)習(xí)使用div+css的方式布局“關(guān)于我們”頁面導(dǎo)航，通過案例的制作掌握基本布局頁面的方法，完成頁面效果如圖4-17所示。圖4-17任務(wù)描述——了解頁面導(dǎo)航的結(jié)構(gòu)1技術(shù)引進(jìn)——了解id選擇符234

任務(wù)實施——美化關(guān)于我們頁面導(dǎo)航

新手試煉——制作個人作品網(wǎng)站頁面任務(wù)一1任務(wù)描述——了解頁面導(dǎo)航的結(jié)構(gòu)任務(wù)描述——了解頁面導(dǎo)航的結(jié)構(gòu)“關(guān)于我們”頁面導(dǎo)航中依次插入5個“DIV”，并使用CSS樣式分別設(shè)置每個div的Width和Height，設(shè)置完的頁面布局如圖4-18所示。圖4-182技術(shù)引進(jìn)——了解id選擇符本任務(wù)中主要使用CSS中的id樣式完成頁面導(dǎo)航的制作。在使用CSS頁面布局時，通常都是使用div來布局頁面，每個div都需要使用id樣式實現(xiàn)不同的效果。用戶在頁面中選擇想要插入div的位置后,單擊“插入”面板上的div選項，即可在頁面中插入一個div。用戶在源代碼中選擇想要出入div的位置后，單擊“插入”面板上的div選項，則會彈出“插入div”對話框，如圖4-19所示。了解id選擇符圖4-19用戶在該對話框中可以選擇插入位置、定義樣式和id名，還可以通過新建CSS規(guī)則對div進(jìn)行控制。提示：在dreamweavercc2018中可以明顯感覺到，dreamweaver已經(jīng)逐漸轉(zhuǎn)換成一款面向?qū)I(yè)人員的專業(yè)網(wǎng)頁制作工具，對網(wǎng)頁制作人員的要求也越來越高。id選擇符定義的是HTML頁面中某一個特定的元素，即一個網(wǎng)頁中只能有一個元素使用某一個id的屬性值。id選擇符的基本語法如下。了解id選擇符#id名稱{屬性：屬性值；}id名稱表示id選擇符的名稱，其具體名稱由CSS定義者自己命名。具體HTML代碼如下。<body><divid=”menu”><p> </p><p>網(wǎng)站首頁</p><p>關(guān)于我們</p><p>我們的服務(wù)</p><p>合作客戶</p><p>我們的作品</p><p>聯(lián)系我們</p></div><div>中間內(nèi)容</div></body>接下來了解CSS的具體代碼。了解id選擇符#menu{width:120px;height:100%;text-align:right;padding-right:20px;font-size:14px;font-weight:bold;line-height:50px;color:#FFF;background-color:#F60;position:absolute;top:0px;right:0px;}在正常情況下，id的屬性值在文檔中具有唯一性，只有具備id屬性的標(biāo)簽，才可以使用id選擇符定義樣式。同時idCSS樣式是網(wǎng)頁中唯一的特定針對id名稱的元素，盡量不要在一個網(wǎng)頁中設(shè)置多處id名稱相同的元素，idCSS樣式的命名必須以井號（#）開頭，并且可以包含任何字母和數(shù)字組合。提示：id選擇符在頁面的標(biāo)簽中只能使用一次；id選擇符比類選擇符具有更高的優(yōu)先級別，當(dāng)id選擇符與類選擇符發(fā)生沖突時，將會優(yōu)先使用id選擇符。03在站點名稱位置單擊右鍵，在彈出的快捷菜單中選擇“新建文件”命令，新建一個index.html文件，如圖2-18所示。練一練——使用id樣式控制頁面元素01執(zhí)行“文件>新建”命令，新建一個html文件，執(zhí)行“文件>保存”命令，將其保存為4-1.html。在“CSS設(shè)計器”中將“style/css.css”文件添加到html中，如圖4-20所示。02單擊“插入”面板上的Div選項，在頁面中插入一個div標(biāo)簽，并設(shè)置其ID為在box，如圖4-21所示。在css.css文件中創(chuàng)建一個id樣式，如圖4-22所示。03.應(yīng)用了樣式后頁面效果如圖4-23所示。刪除div中的文字，插入一個div，并命名為pic，單擊“插入”面板中的image選項，將images/2702.jpg插入到頁面中，效果如圖4-24所示。圖4-20圖4-21圖4-22圖4-23圖4-24練一練04.切換到css.css中，創(chuàng)建如圖4-25所示樣式。應(yīng)用樣式后的div效果如圖4-26所示。圖4-25圖4-263任務(wù)實施——美化關(guān)于我們頁面導(dǎo)航美化關(guān)于我們頁面導(dǎo)航01新建一個html文件，將其保存為about1.html。在“CSS設(shè)計器”中附加about.css文件，如圖4-27所示。單擊“插入”面板中的div選項，在頁面中插入一個div，將其id設(shè)置為top-bg。02切換到about.css文件中，創(chuàng)建如圖4-28所示樣式文件。圖4-27圖4-28圖4-29美化關(guān)于我們頁面導(dǎo)航03在top-bg中插入一個id為top的div，并在css.css文件中創(chuàng)建如圖4-29所示樣式。在top中插入一個id為top-Logo的div，并在css.css文件中創(chuàng)建如圖4-30所示樣式。圖4-2904在源代碼top-Logo中插入“源文件/項目四/Logo.png”圖片，如圖4-31所示。插入效果如圖4-32所示。圖4-31圖4-32圖4-30圖4-29美化關(guān)于我們頁面導(dǎo)航06在top-menu后面插入一個id為top-right的div，并在該div中插入如圖4-35所示圖像。切換到css.css文件中，為top-right創(chuàng)建如圖4-36所示樣式。圖4-35圖4-3607執(zhí)行“文件>保存”命令，將文件保存，完成頁面導(dǎo)航的搭建。05在top-Logo后插入一個id為top-menu的div,并在div中輸入如圖4-33所示文字。在css.css文件中創(chuàng)建如圖4-34所示樣式文件。圖4-34圖4-334新手試煉——制作個人作品網(wǎng)站頁面

通過前面案例的制作，讀者應(yīng)該掌握基本的頁面布局方法和制作。接下來通過一個小案例鞏固一下所學(xué)內(nèi)容。01打開一個素材文件。02定義樣式文件，將頁面的背景顏色指定為黃色。03定義樣式文件，將左側(cè)div背景顏色指定為黑色。04使用CSS控制頁面和div背景顏色，完成制作。PPT模板下載：/moban/行業(yè)PPT模板：/hangye/節(jié)日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優(yōu)秀PPT下載：/xiazai/PPT教程：/powerpoint/Word教程：/word/Excel教程：/

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論