項目五 布局網(wǎng)頁_第1頁
項目五 布局網(wǎng)頁_第2頁
項目五 布局網(wǎng)頁_第3頁
項目五 布局網(wǎng)頁_第4頁
項目五 布局網(wǎng)頁_第5頁
已閱讀5頁，還剩35頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

Dreamweaver網(wǎng)頁設(shè)計立體化教程（微課版）（DreamweaverCC2020）項目五布局網(wǎng)頁目錄Contents任務(wù)一使用div+CSS樣式盒子模型布局“佳美馨裝飾——公司榮譽”任務(wù)二使用響應(yīng)式布局制作“佳美飾馨裝”首頁實訓(xùn)一制作“中國皮影——皮影的地方特色”網(wǎng)頁實訓(xùn)二制作“中國皮影”首頁本任務(wù)將制作“佳美馨裝飾——公司榮譽”網(wǎng)頁，要完成此任務(wù)，需要使用CSS來控制網(wǎng)頁中各網(wǎng)頁元素的樣式，以及使用div+CSS盒子模型來布局網(wǎng)頁。一、任務(wù)描述（一）任務(wù)背景（1）掌握定義CSS樣式的方法。（2）掌握使用div+CSS盒子模型布局網(wǎng)頁的方法。（二）任務(wù)目標(biāo)二、相關(guān)知識（一）認(rèn)識CSS樣式1．CSS語法規(guī)則CSS語法規(guī)則由選擇器和聲明兩部分組成。選擇器用于標(biāo)識要設(shè)置格式的網(wǎng)頁元素的術(shù)語（如標(biāo)簽、類名或ID等），聲明則用于定義樣式屬性。右圖所示的代碼中，body為選擇器，用于選擇<body>標(biāo)簽，{}中的內(nèi)容為聲明塊。圖中代碼表示<body></body>標(biāo)簽內(nèi)的所有內(nèi)容的“外邊距”為“0”，“內(nèi)邊距”為“0”，“字號”為“12px”，“字體”為“宋體”，“行高”為“18px”，“背景顏色”為“#F00”。CSS語法規(guī)則二、相關(guān)知識（一）認(rèn)識CSS樣式2．CSS樣式的類型根據(jù)選擇器的不同，可以將CSS樣式分為多種類型，其中較為常用的有以下6種。標(biāo)簽CSS樣式類CSS樣式IDCSS樣式群組CSS樣式后代CSS樣式<a>標(biāo)簽的偽類選擇器二、相關(guān)知識（一）認(rèn)識CSS樣式3．CSS樣式的書寫位置CSS樣式按照書寫位置的不同可以分為外部樣式、內(nèi)部樣式和行內(nèi)樣式3種。外部樣式是將CSS樣式書寫在后綴名為.css的文件中，然后在網(wǎng)頁文件中使用鏈接或?qū)氲姆绞揭胪獠緾SS文件。外部樣式使用環(huán)境內(nèi)部樣式內(nèi)部樣式是在網(wǎng)頁文件的<style>標(biāo)簽中寫入CSS代碼。行內(nèi)樣式是為標(biāo)簽增加“style”屬性，然后在屬性值中寫入CSS代碼。二、相關(guān)知識（二）“CSS設(shè)計器”面板CSS樣式的使用離不開“CSS設(shè)計器”面板，因此在學(xué)習(xí)CSS樣式之前，有必要先了解“CSS設(shè)計器”面板的用法。選擇【窗口】/【CSS設(shè)計器】菜單命令或按【Shift+F11】組合鍵打開“CSS設(shè)計器”面板，如圖5-7所示，在其中可以進(jìn)行添加CSS源、添加CSS選擇器等操作。“CSS設(shè)計器”面板二、相關(guān)知識（二）“CSS設(shè)計器”面板1．添加CSS源“添加CSS源”按鈕創(chuàng)建新的CSS文件使用現(xiàn)有的CSS文件二、相關(guān)知識（二）“CSS設(shè)計器”面板2．添加CSS選擇器添加CSS選擇器在“源”欄中選擇某個CSS源，然后在“選擇器”欄中單擊“添加選擇器”按鈕，在出現(xiàn)的文本框中輸入所需的選擇器，然后按【Enter】鍵添加CSS選擇器二、相關(guān)知識（三）CSS樣式的屬性在“CSS設(shè)計器”面板的“屬性”欄中單擊“布局”按鈕，則可在“屬性”欄中顯示關(guān)于布局的屬性及屬性值1．布局屬性“布局屬性”列表框二、相關(guān)知識（三）CSS樣式的屬性在“CSS設(shè)計器”面板的“屬性”欄中單擊“文本”按鈕，則可在“屬性”欄中顯示關(guān)于文本的屬性及屬性值。2．文本屬性“文本屬性”列表框二、相關(guān)知識（三）CSS樣式的屬性在“CSS設(shè)計器”面板的“屬性”欄中單擊“邊框”按鈕，則可在“屬性”欄中顯示關(guān)于邊框的屬性及屬性值。3．邊框?qū)傩浴斑吙驅(qū)傩浴绷斜砜蚨⑾嚓P(guān)知識（三）CSS樣式的屬性在“CSS設(shè)計器”面板的“屬性”欄中單擊“背景”按鈕，則可在“屬性”欄中顯示關(guān)于背景的屬性及屬性值。4．背景屬性“背景屬性”列表框二、相關(guān)知識（四）應(yīng)用CSS樣式在網(wǎng)頁中應(yīng)用CSS樣式的方式主要有以下3種。通過標(biāo)簽選擇器將定義的CSS樣式應(yīng)用到對應(yīng)的標(biāo)簽上。標(biāo)簽類ID通過ID選擇器將定義的CSS樣式應(yīng)用到設(shè)置了對應(yīng)“ID”屬性的標(biāo)簽上，通常情況下一個網(wǎng)頁中的“ID”屬性不能重復(fù)。通過類選擇器將定義的CSS樣式應(yīng)用到設(shè)置了對應(yīng)“Class”屬性的標(biāo)簽上，在設(shè)置“Class”屬性時可以寫入多個類。二、相關(guān)知識（五）認(rèn)識div+CSS盒子模型div+CSS盒子模型是將每個div當(dāng)做一個可以裝東西的盒子，盒子里面的內(nèi)容到盒子的邊框之間的距離為填充（padding），盒子本身有邊框（border），盒子邊框外與其他盒子之間的距離為邊界（margin）。每個邊框或邊界，又可分為上、下、左、右4個屬性值，如margin-bottom表示盒子的下邊界屬性。1．div+CSS盒子模型div+CSS盒子模型二、相關(guān)知識（五）認(rèn)識div+CSS盒子模型下圖所示為一個標(biāo)準(zhǔn)的div+CSS盒子模型布局結(jié)構(gòu)，左側(cè)為代碼，右側(cè)為效果圖。其中最外層的右斜線區(qū)域為margin區(qū)域，深色邊框為border區(qū)域，左斜線區(qū)域為padding區(qū)域，內(nèi)部的圖片區(qū)域為content區(qū)域。1．div+CSS盒子模型div+CSS盒子模型布局二、相關(guān)知識（五）認(rèn)識div+CSS盒子模型使用div+CSS盒子模型布局網(wǎng)頁的優(yōu)點主要體現(xiàn)在以下4個方面。2．div+CSS盒子模型的優(yōu)點網(wǎng)頁加載速度更快修改效率更高搜索引擎更容易檢索站點更容易被訪問二、相關(guān)知識（六）利用div+CSS盒子模型布局網(wǎng)頁將插入點定位到在“文檔”窗口中要插入<div>標(biāo)簽的位置，然后選擇【插入】/【HTML】/【Div】菜單命令或者在“插入”面板的HTML類別中單擊“Div”按鈕，在打開的“插入Div”對話框中設(shè)置插入、Class或ID參數(shù)，單擊“確定”按鈕。1．插入<div>標(biāo)簽“插入Div”對話框三、任務(wù)實施下面在“佳美馨裝飾——公司榮譽”網(wǎng)頁中創(chuàng)建并應(yīng)用標(biāo)簽CSS樣式，具體操作如下。（一）創(chuàng)建并應(yīng)用標(biāo)簽CSS樣式創(chuàng)建“body”標(biāo)簽CSS樣式創(chuàng)建“h1”標(biāo)簽CSS樣式設(shè)置“h1”標(biāo)簽CSS樣式的邊框?qū)傩匀?、任?wù)實施（一）創(chuàng)建并應(yīng)用標(biāo)簽CSS樣式創(chuàng)建“p”標(biāo)簽CSS樣式應(yīng)用標(biāo)簽CSS樣式三、任務(wù)實施下面在“佳美馨裝飾——公司榮譽”網(wǎng)頁中創(chuàng)建并應(yīng)用IDCSS樣式，具體操作如下。（二）創(chuàng)建并應(yīng)用IDCSS樣式創(chuàng)建“#logo1”IDCSS樣式創(chuàng)建“#logo2”IDCSS樣式三、任務(wù)實施（二）創(chuàng)建并應(yīng)用IDCSS樣式應(yīng)用“l(fā)ogo1”IDCSS樣式應(yīng)用“l(fā)ogo2”IDCSS樣式三、任務(wù)實施下面在“佳美馨裝飾——公司榮譽”網(wǎng)頁中創(chuàng)建并應(yīng)用類CSS樣式，具體操作如下。（三）創(chuàng)建并應(yīng)用類CSS樣式創(chuàng)建“.mian”類樣式創(chuàng)建“.top”類樣式創(chuàng)建“.navigate”類樣式三、任務(wù)實施（三）創(chuàng)建并應(yīng)用類CSS樣式應(yīng)用“main”類樣式應(yīng)用“top”類樣式應(yīng)用“right”類樣式三、任務(wù)實施下面在“佳美馨裝飾——公司榮譽”網(wǎng)頁中創(chuàng)建并應(yīng)用后代CSS樣式，具體操作如下。（四）創(chuàng)建并應(yīng)用后代CSS樣式創(chuàng)建“.imgsimg”后代CSS樣式應(yīng)用“.imgsimg”后代CSS樣式目錄Contents任務(wù)一使用div+CSS樣式盒子模型布局“佳美馨裝飾——公司榮譽”任務(wù)二使用響應(yīng)式布局制作“佳美飾馨裝”首頁實訓(xùn)一制作“中國皮影——皮影的地方特色”網(wǎng)頁實訓(xùn)二制作“中國皮影”首頁移動設(shè)備屏幕的分辨率有很多種，其寬度通常比計算機顯示器的要小很多，因此普通的網(wǎng)頁在移動設(shè)備上會被縮放得很小，不利于用戶瀏覽。為了解決這個問題，本任務(wù)需要使用響應(yīng)式布局來制作“佳美馨裝飾”首頁，以根據(jù)屏幕寬度自動調(diào)整網(wǎng)頁的布局，這樣通過一套網(wǎng)站代碼就能使該網(wǎng)頁在不同寬度屏幕上都能正常顯示。一、任務(wù)描述（一）任務(wù)背景（1）了解響應(yīng)式布局的基本知識。（2）掌握設(shè)置視口的方法。（3）掌握添加媒體查詢的方法。（二）任務(wù)目標(biāo)二、相關(guān)知識（一）認(rèn)識響應(yīng)式布局響應(yīng)式布局是伊森馬科特（EthanMarcotte）在2010年5月提出的一個概念，指一個網(wǎng)站能夠兼容多個終端設(shè)備，而不用為每個終端制作一個特定的版本。響應(yīng)式布局可以為不同終端的用戶提供更舒適的界面和更好的用戶體驗，隨著各種移動設(shè)備的普及，響應(yīng)式布局的使用也越來越普遍，它具有的優(yōu)點有：響應(yīng)式布局針對不同設(shè)備，靈活性強；響應(yīng)式布局能快速解決多設(shè)備顯示自適應(yīng)問題。二、相關(guān)知識（二）設(shè)置視口大多數(shù)移動端的瀏覽器會自動縮放網(wǎng)頁，以使網(wǎng)頁的寬度符合屏幕的寬度。要實現(xiàn)響應(yīng)式布局，首先需要設(shè)置視口（viewport），讓瀏覽器將設(shè)備的寬度作為視圖寬度并禁止初始縮放。設(shè)置視口的方法為：在<head>標(biāo)簽中加入一個<meta>標(biāo)簽，并在其中輸入如下內(nèi)容<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">二、相關(guān)知識（三）添加媒體查詢1．媒體查詢的語法結(jié)構(gòu)@mediascreenand(min-width:最小寬度)and(max-width:最大寬度){CSS樣式}當(dāng)屏幕的寬度處于設(shè)置的最小寬度和最大寬度之間時，將使用對應(yīng)的CSS樣式，而當(dāng)最小寬度為0時，可以省略最小寬度部分，即：@mediascreenand(max-width:最大寬度){CSS樣式}二、相關(guān)知識（三）添加媒體查詢2．添加媒體查詢媒體查詢添加在CSS樣式中，可以直接在<style>標(biāo)簽或CSS文件中直接寫入，也可以通過“CSS設(shè)計器”面板或者標(biāo)尺欄添加。通過“CSS設(shè)計器”面板添加媒體查詢通過標(biāo)尺欄添加媒體查詢?nèi)⑷蝿?wù)實施下面為“佳美馨裝飾”首頁設(shè)置視口，并添加@media(max-width:900px)媒體查詢，具體操作如下。（一）設(shè)置視口并添加媒體查詢設(shè)置視口添加媒體查詢?nèi)⑷蝿?wù)實施下面在“佳美馨裝飾”首頁中添加CSS樣式，并預(yù)覽效果，具體操作如下。（二）添加CSS樣式并預(yù)覽效果媒體查詢代碼輸入全局CSS樣式代碼三、任務(wù)實施（二）添加CSS樣式并預(yù)覽效果調(diào)整頁面寬度輸入CSS樣式代碼調(diào)整頁面寬度使其小于900px目錄Contents任務(wù)一使用div+CSS樣式盒子模型布局“佳美馨裝飾——公司榮譽”任務(wù)二使用響應(yīng)式布局制作“佳美飾馨裝”首頁實訓(xùn)一制作“中國皮影——皮影的地方特色”網(wǎng)頁實訓(xùn)二制作“中國皮影”首頁本實訓(xùn)要求使用div+CSS盒子模型布局“中國皮影——皮影的地方特色”網(wǎng)頁，完成后的效果如圖所示。實訓(xùn)要求實訓(xùn)一?制作“中國皮影——皮影的地方特色”網(wǎng)頁本實訓(xùn)需要使用div+CSS來進(jìn)行布局，要使用這種方式進(jìn)行網(wǎng)頁布局，需要先將網(wǎng)頁中的各部分內(nèi)容分別放置在多個<div>標(biāo)簽中，然后通過CSS樣式來控制這些<div>標(biāo)簽的大小、位置、邊距等屬性。實訓(xùn)思路“皮影的地方特色”網(wǎng)頁效果實訓(xùn)一?制作“中國皮影——皮影的地方特色”網(wǎng)頁步驟提示要完成本實訓(xùn)，應(yīng)首先在網(wǎng)頁中創(chuàng)建多個<div>標(biāo)簽，并將網(wǎng)頁元素分別放置在這些<div>標(biāo)簽中，然后創(chuàng)建并應(yīng)用所需的CSS樣式。其步驟如圖所示。①創(chuàng)建<div>標(biāo)簽②創(chuàng)建CSS樣式③應(yīng)用CSS樣式目錄Contents任務(wù)一使用div+CSS樣式盒子模型布局“佳美馨裝飾——公司榮譽”任務(wù)二使用響應(yīng)式布局制作“佳美飾馨裝”首頁實訓(xùn)一制作“中國皮影——皮影的地方特色”

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論