項(xiàng)目5、6 布局網(wǎng)頁、使用模板和庫_第1頁
項(xiàng)目5、6 布局網(wǎng)頁、使用模板和庫_第2頁
項(xiàng)目5、6 布局網(wǎng)頁、使用模板和庫_第3頁
項(xiàng)目5、6 布局網(wǎng)頁、使用模板和庫_第4頁
項(xiàng)目5、6 布局網(wǎng)頁、使用模板和庫_第5頁
已閱讀5頁，還剩67頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

Dreamweaver網(wǎng)頁設(shè)計(jì)立體化教程（微課版）（DreamweaverCC2020）項(xiàng)目五布局網(wǎng)頁目錄Contents任務(wù)一使用div+CSS樣式盒子模型布局“佳美馨裝飾——公司榮譽(yù)”任務(wù)二使用響應(yīng)式布局制作“佳美飾馨裝”首頁實(shí)訓(xùn)一制作“中國皮影——皮影的地方特色”網(wǎng)頁實(shí)訓(xùn)二制作“中國皮影”首頁本任務(wù)將制作“佳美馨裝飾——公司榮譽(yù)”網(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è)計(jì)器”面板CSS樣式的使用離不開“CSS設(shè)計(jì)器”面板，因此在學(xué)習(xí)CSS樣式之前，有必要先了解“CSS設(shè)計(jì)器”面板的用法。選擇【窗口】/【CSS設(shè)計(jì)器】菜單命令或按【Shift+F11】組合鍵打開“CSS設(shè)計(jì)器”面板，如圖5-7所示，在其中可以進(jìn)行添加CSS源、添加CSS選擇器等操作?！癈SS設(shè)計(jì)器”面板二、相關(guān)知識（二）“CSS設(shè)計(jì)器”面板1．添加CSS源“添加CSS源”按鈕創(chuàng)建新的CSS文件使用現(xiàn)有的CSS文件二、相關(guān)知識（二）“CSS設(shè)計(jì)器”面板2．添加CSS選擇器添加CSS選擇器在“源”欄中選擇某個CSS源，然后在“選擇器”欄中單擊“添加選擇器”按鈕，在出現(xiàn)的文本框中輸入所需的選擇器，然后按【Enter】鍵添加CSS選擇器二、相關(guān)知識（三）CSS樣式的屬性在“CSS設(shè)計(jì)器”面板的“屬性”欄中單擊“布局”按鈕，則可在“屬性”欄中顯示關(guān)于布局的屬性及屬性值1．布局屬性“布局屬性”列表框二、相關(guān)知識（三）CSS樣式的屬性在“CSS設(shè)計(jì)器”面板的“屬性”欄中單擊“文本”按鈕，則可在“屬性”欄中顯示關(guān)于文本的屬性及屬性值。2．文本屬性“文本屬性”列表框二、相關(guān)知識（三）CSS樣式的屬性在“CSS設(shè)計(jì)器”面板的“屬性”欄中單擊“邊框”按鈕，則可在“屬性”欄中顯示關(guān)于邊框的屬性及屬性值。3．邊框?qū)傩浴斑吙驅(qū)傩浴绷斜砜蚨⑾嚓P(guān)知識（三）CSS樣式的屬性在“CSS設(shè)計(jì)器”面板的“屬性”欄中單擊“背景”按鈕，則可在“屬性”欄中顯示關(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ū)域?yàn)閙argin區(qū)域，深色邊框?yàn)閎order區(qū)域，左斜線區(qū)域?yàn)閜adding區(qū)域，內(nèi)部的圖片區(qū)域?yàn)閏ontent區(qū)域。1．div+CSS盒子模型div+CSS盒子模型布局二、相關(guān)知識（五）認(rèn)識div+CSS盒子模型使用div+CSS盒子模型布局網(wǎng)頁的優(yōu)點(diǎn)主要體現(xiàn)在以下4個方面。2．div+CSS盒子模型的優(yōu)點(diǎn)網(wǎng)頁加載速度更快修改效率更高搜索引擎更容易檢索站點(diǎn)更容易被訪問二、相關(guān)知識（六）利用div+CSS盒子模型布局網(wǎng)頁將插入點(diǎn)定位到在“文檔”窗口中要插入<div>標(biāo)簽的位置，然后選擇【插入】/【HTML】/【Div】菜單命令或者在“插入”面板的HTML類別中單擊“Div”按鈕，在打開的“插入Div”對話框中設(shè)置插入、Class或ID參數(shù)，單擊“確定”按鈕。1．插入<div>標(biāo)簽“插入Div”對話框三、任務(wù)實(shí)施下面在“佳美馨裝飾——公司榮譽(yù)”網(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ù)實(shí)施（一）創(chuàng)建并應(yīng)用標(biāo)簽CSS樣式創(chuàng)建“p”標(biāo)簽CSS樣式應(yīng)用標(biāo)簽CSS樣式三、任務(wù)實(shí)施下面在“佳美馨裝飾——公司榮譽(yù)”網(wǎng)頁中創(chuàng)建并應(yīng)用IDCSS樣式，具體操作如下。（二）創(chuàng)建并應(yīng)用IDCSS樣式創(chuàng)建“#logo1”IDCSS樣式創(chuàng)建“#logo2”IDCSS樣式三、任務(wù)實(shí)施（二）創(chuàng)建并應(yīng)用IDCSS樣式應(yīng)用“l(fā)ogo1”IDCSS樣式應(yīng)用“l(fā)ogo2”IDCSS樣式三、任務(wù)實(shí)施下面在“佳美馨裝飾——公司榮譽(yù)”網(wǎng)頁中創(chuàng)建并應(yīng)用類CSS樣式，具體操作如下。（三）創(chuàng)建并應(yīng)用類CSS樣式創(chuàng)建“.mian”類樣式創(chuàng)建“.top”類樣式創(chuàng)建“.navigate”類樣式三、任務(wù)實(shí)施（三）創(chuàng)建并應(yīng)用類CSS樣式應(yīng)用“main”類樣式應(yīng)用“top”類樣式應(yīng)用“right”類樣式三、任務(wù)實(shí)施下面在“佳美馨裝飾——公司榮譽(yù)”網(wǎng)頁中創(chuàng)建并應(yīng)用后代CSS樣式，具體操作如下。（四）創(chuàng)建并應(yīng)用后代CSS樣式創(chuàng)建“.imgsimg”后代CSS樣式應(yīng)用“.imgsimg”后代CSS樣式目錄Contents任務(wù)一使用div+CSS樣式盒子模型布局“佳美馨裝飾——公司榮譽(yù)”任務(wù)二使用響應(yīng)式布局制作“佳美飾馨裝”首頁實(shí)訓(xùn)一制作“中國皮影——皮影的地方特色”網(wǎng)頁實(shí)訓(xùn)二制作“中國皮影”首頁移動設(shè)備屏幕的分辨率有很多種，其寬度通常比計(jì)算機(jī)顯示器的要小很多，因此普通的網(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)式布局可以為不同終端的用戶提供更舒適的界面和更好的用戶體驗(yàn)，隨著各種移動設(shè)備的普及，響應(yīng)式布局的使用也越來越普遍，它具有的優(yōu)點(diǎn)有：響應(yīng)式布局針對不同設(shè)備，靈活性強(qiáng)；響應(yīng)式布局能快速解決多設(shè)備顯示自適應(yīng)問題。二、相關(guān)知識（二）設(shè)置視口大多數(shù)移動端的瀏覽器會自動縮放網(wǎng)頁，以使網(wǎng)頁的寬度符合屏幕的寬度。要實(shí)現(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è)計(jì)器”面板或者標(biāo)尺欄添加。通過“CSS設(shè)計(jì)器”面板添加媒體查詢通過標(biāo)尺欄添加媒體查詢?nèi)⑷蝿?wù)實(shí)施下面為“佳美馨裝飾”首頁設(shè)置視口，并添加@media(max-width:900px)媒體查詢，具體操作如下。（一）設(shè)置視口并添加媒體查詢設(shè)置視口添加媒體查詢?nèi)⑷蝿?wù)實(shí)施下面在“佳美馨裝飾”首頁中添加CSS樣式，并預(yù)覽效果，具體操作如下。（二）添加CSS樣式并預(yù)覽效果媒體查詢代碼輸入全局CSS樣式代碼三、任務(wù)實(shí)施（二）添加CSS樣式并預(yù)覽效果調(diào)整頁面寬度輸入CSS樣式代碼調(diào)整頁面寬度使其小于900px目錄Contents任務(wù)一使用div+CSS樣式盒子模型布局“佳美馨裝飾——公司榮譽(yù)”任務(wù)二使用響應(yīng)式布局制作“佳美飾馨裝”首頁實(shí)訓(xùn)一制作“中國皮影——皮影的地方特色”網(wǎng)頁實(shí)訓(xùn)二制作“中國皮影”首頁本實(shí)訓(xùn)要求使用div+CSS盒子模型布局“中國皮影——皮影的地方特色”網(wǎng)頁，完成后的效果如圖所示。實(shí)訓(xùn)要求實(shí)訓(xùn)一?制作“中國皮影——皮影的地方特色”網(wǎng)頁本實(shí)訓(xùn)需要使用div+CSS來進(jìn)行布局，要使用這種方式進(jìn)行網(wǎng)頁布局，需要先將網(wǎng)頁中的各部分內(nèi)容分別放置在多個<div>標(biāo)簽中，然后通過CSS樣式來控制這些<div>標(biāo)簽的大小、位置、邊距等屬性。實(shí)訓(xùn)思路“皮影的地方特色”網(wǎng)頁效果實(shí)訓(xùn)一?制作“中國皮影——皮影的地方特色”網(wǎng)頁步驟提示要完成本實(shí)訓(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樣式盒子模型布局“佳美馨裝飾——公司榮譽(yù)”任務(wù)二使用響應(yīng)式布局制作“佳美飾馨裝”首頁實(shí)訓(xùn)一制作“中國皮影——皮影的地方特色”網(wǎng)頁實(shí)訓(xùn)二制作“中國皮影”首頁本實(shí)訓(xùn)要求使用響應(yīng)式布局來制作“中國皮影”首頁，使其能自動根據(jù)窗口寬度改變網(wǎng)頁的布局，完成后的效果如圖所示。實(shí)訓(xùn)要求實(shí)訓(xùn)二?制作“中國皮影”首頁本網(wǎng)頁需要使用響應(yīng)式布局來布局網(wǎng)頁，通過媒體查詢?yōu)椴煌瑢挾鹊钠聊辉O(shè)置不同的CSS樣式，以實(shí)現(xiàn)根據(jù)屏幕寬度自動調(diào)整網(wǎng)頁布局的目的。實(shí)訓(xùn)思路“中國皮影”首頁實(shí)訓(xùn)二?制作“中國皮影”首頁步驟提示完成本實(shí)訓(xùn)主要包括設(shè)置視口、添加媒體查詢，以及創(chuàng)建并應(yīng)用CSS樣式3步操作，其步驟如圖所示。①設(shè)置視口②添加媒體查詢③創(chuàng)建并應(yīng)用CSS樣式Dreamweaver網(wǎng)頁設(shè)計(jì)立體化教程（微課版）（DreamweaverCC2020）項(xiàng)目六使用模板和庫目錄Contents任務(wù)一使用模板制作“原木簡約風(fēng)三居室裝修案例”網(wǎng)頁任務(wù)二在“裝修方案精選”網(wǎng)頁中使用庫實(shí)訓(xùn)一使用模板制作“中國皮影——陜西皮影”網(wǎng)頁實(shí)訓(xùn)二使用庫項(xiàng)目制作“中國皮影——皮影文創(chuàng)產(chǎn)品”網(wǎng)頁在很多網(wǎng)站中會發(fā)現(xiàn)，網(wǎng)站的許多頁面都有很多相同的部分，如果重復(fù)制作這些內(nèi)容，不僅浪費(fèi)時間，增加網(wǎng)頁設(shè)計(jì)人員的工作量，而且后期維護(hù)也較為麻煩。這時，可將共同布局的部分創(chuàng)建為模板，以方便遇到相同的布局及元素時應(yīng)用，在制作本任務(wù)時，就需要通過該方法來完成。一、任務(wù)描述（一）任務(wù)背景（1）掌握創(chuàng)建模板和編輯模板的方法。（2）掌握應(yīng)用模板的方法。（二）任務(wù)目標(biāo)二、相關(guān)知識（一）認(rèn)識模板大部分網(wǎng)頁都會根據(jù)網(wǎng)站的性質(zhì)統(tǒng)一整個網(wǎng)頁格式，如將主頁以某種形式顯示，其他網(wǎng)頁文件則需要標(biāo)識要更換的內(nèi)容和固定不變的內(nèi)容，以便于管理重復(fù)網(wǎng)頁的框架，該種方式稱為“模板”。在網(wǎng)頁中使用模板可以一次性修改多個文件。使用模板的網(wǎng)頁，只要網(wǎng)頁中的模板未刪除，網(wǎng)頁將始終與模板處于鏈接狀態(tài)，即可通過修改模板，更改與模板關(guān)聯(lián)的其他網(wǎng)頁文件。二、相關(guān)知識（二）創(chuàng)建模板1．將現(xiàn)有網(wǎng)頁另存為模板創(chuàng)建模板網(wǎng)頁二、相關(guān)知識（二）創(chuàng)建模板2．新建模板網(wǎng)頁“新建文檔”對話框二、相關(guān)知識（三）編輯模板可編輯區(qū)域是指模板中允許編輯的區(qū)域，通過模板創(chuàng)建的網(wǎng)頁，只能修改可編輯區(qū)域中的內(nèi)容。如果模板中未創(chuàng)建可編輯區(qū)域，則通過該模板創(chuàng)建的網(wǎng)頁中的內(nèi)容將無法進(jìn)行修改。1．創(chuàng)建可編輯區(qū)域輸入可編輯區(qū)域的名稱二、相關(guān)知識（三）編輯模板可選區(qū)域可通過定義條件控制該區(qū)域的顯示或隱藏，如在模板創(chuàng)建的網(wǎng)頁中需要顯示某張圖像，而在其他網(wǎng)頁中卻不需要顯示該圖像時，就可以通過創(chuàng)建可選區(qū)域?qū)崿F(xiàn)。2．創(chuàng)建可選區(qū)域“新建可選區(qū)域”對話框二、相關(guān)知識（三）編輯模板在模板中創(chuàng)建重復(fù)區(qū)域，可以將其中的內(nèi)容重復(fù)顯示任意次數(shù)，重復(fù)區(qū)域中的內(nèi)容是不可編輯的，如果需要編輯，則可以在重復(fù)區(qū)域內(nèi)插入可編輯區(qū)域。3．創(chuàng)建重復(fù)區(qū)域“新建重復(fù)區(qū)域”對話框二、相關(guān)知識（三）編輯模板重復(fù)表格可以創(chuàng)建包含重復(fù)行的表格式可編輯區(qū)域，提高創(chuàng)建相同可編輯區(qū)域的效率。4．創(chuàng)建重復(fù)表格“插入重復(fù)表格”對話框二、相關(guān)知識（三）編輯模板可選區(qū)域通常是無法編輯的，要想編輯可選區(qū)域，則需要創(chuàng)建可編輯的可選區(qū)域。方法為：在模板文件中設(shè)置模板參數(shù)，將插入點(diǎn)定位到需創(chuàng)建可編輯可選區(qū)域的位置，然后選擇【插入】/【模板】/【可編輯的可選區(qū)域】菜單命令，打開“新建可選區(qū)域”對話框，設(shè)置好相關(guān)參數(shù)后，單擊“確定”按鈕，創(chuàng)建可編輯的可選區(qū)域。5．創(chuàng)建可編輯的可選區(qū)域二、相關(guān)知識（四）應(yīng)用模板在創(chuàng)建網(wǎng)站時，將共同的布局及元素創(chuàng)建為模板后，只需要將模板應(yīng)用到創(chuàng)建的網(wǎng)頁上，然后在可編輯區(qū)域修改為不同的網(wǎng)頁元素即可創(chuàng)建新的頁面，大大提高了網(wǎng)站的制作效率。應(yīng)用模板有以下3種方法。從模板新建文檔為網(wǎng)頁應(yīng)用模板在“資源”面板中應(yīng)用模板三、任務(wù)實(shí)施下面將“案例展示”網(wǎng)頁文件另存為模板，并在其中添加可編輯區(qū)域、可選區(qū)域和重復(fù)表格，具體操作如下。（一）創(chuàng)建“案例展示”模板“另存模板”對話框新建“標(biāo)題”可編輯區(qū)域三、任務(wù)實(shí)施（一）創(chuàng)建“案例展示”模板新建“說明文字”可編輯區(qū)域“插入重復(fù)表格”對話框創(chuàng)建“圖片展示區(qū)域”重復(fù)表格三、任務(wù)實(shí)施（一）創(chuàng)建“案例展示”模板插入圖片并輸入文本設(shè)置居中對齊三、任務(wù)實(shí)施下面將從“案例展示”模板創(chuàng)建“原木簡約風(fēng)三居室裝修案例”網(wǎng)頁，具體操作如下。（二）從模板創(chuàng)建“原木簡約風(fēng)三居室裝修案例”網(wǎng)頁從模板新建網(wǎng)頁修改“標(biāo)題”可編輯區(qū)域修改“案例說明”可編輯區(qū)域三、任務(wù)實(shí)施（二）從模板創(chuàng)建“原木簡約風(fēng)三居室裝修案例”網(wǎng)頁使重復(fù)表格增加一行修改重復(fù)表格中的圖片以及說明文本目錄Contents任務(wù)一使用模板制作“原木簡約風(fēng)三居室裝修案例”網(wǎng)頁任務(wù)二在“裝修方案精選”網(wǎng)頁中使用庫實(shí)訓(xùn)一使用模板制作“中國皮影——陜西皮影”網(wǎng)頁實(shí)訓(xùn)二使用庫項(xiàng)目制作“中國皮影——皮影文創(chuàng)產(chǎn)品”網(wǎng)頁庫是一種特殊的Dreamweaver文件（后綴名為.lbi），其中包含可放到網(wǎng)頁中的一組資源或資源副本。庫主要用于存放頁面元素，如圖像和文本等，這些元素能夠被重復(fù)使用或頻繁更新，統(tǒng)稱為庫項(xiàng)目。在制作本網(wǎng)頁時，應(yīng)先創(chuàng)建并編輯庫項(xiàng)目，然后在在網(wǎng)頁中的對應(yīng)位置插入庫項(xiàng)目。一、任務(wù)描述（一）任務(wù)背景（1）掌握創(chuàng)建庫項(xiàng)目和編輯庫項(xiàng)目的方法。（2）掌握插入庫項(xiàng)目的方法。（二）任務(wù)目標(biāo)二、相關(guān)知識（一）認(rèn)識“資源”面板“資源”面板是庫項(xiàng)目的載體。選擇【窗口】/【資源】菜單命令，打開“資源”面板，單擊左側(cè)的“庫”按鈕，面板中將顯示庫項(xiàng)目資源的相關(guān)內(nèi)容?！百Y源”面板二、相關(guān)知識（二）創(chuàng)建庫項(xiàng)目如果某些網(wǎng)頁中已經(jīng)包含了可以創(chuàng)建為庫項(xiàng)目的網(wǎng)頁元素，可以將其直接轉(zhuǎn)換為庫項(xiàng)目，并保存在“資源”面板中。1．將已有網(wǎng)頁元素創(chuàng)建為庫項(xiàng)目從已有網(wǎng)頁元素創(chuàng)建庫項(xiàng)目二、相關(guān)知識（二）創(chuàng)建庫項(xiàng)目不選擇任何網(wǎng)頁元素，單擊“資源”面板中的“新建庫項(xiàng)目”按鈕，可在“資源”面板中增加一個空白庫項(xiàng)目，修改其名稱后即可創(chuàng)建空白庫項(xiàng)目。2．創(chuàng)建空白庫項(xiàng)目二、相關(guān)知識（三）編輯庫項(xiàng)目創(chuàng)建的庫項(xiàng)目可隨時修改，只需在“資源”面板中選擇需要修改的庫項(xiàng)目選項(xiàng)，然后單擊下方的“編輯”按鈕，或雙擊庫項(xiàng)目選項(xiàng)，在打開的庫項(xiàng)目網(wǎng)頁中進(jìn)行修改，如圖所示，完成后保存并關(guān)閉網(wǎng)頁。編輯庫項(xiàng)目二、相關(guān)知識（四）插入庫項(xiàng)目創(chuàng)建好庫項(xiàng)目后，可在任意網(wǎng)頁中插入該庫項(xiàng)目，其方法為：將光標(biāo)插入點(diǎn)定位到要插入庫項(xiàng)目的位置，在“資源”面板中選擇要插入的庫項(xiàng)目，然后單擊“插入”按鈕，插入庫項(xiàng)目。三、任務(wù)實(shí)施下面為zxfa.html首頁中的內(nèi)容創(chuàng)建“裝修方案”庫項(xiàng)目，具體操作如下。（一）創(chuàng)建“裝修方案”庫項(xiàng)目選擇表格新建庫項(xiàng)目三、任務(wù)實(shí)施下面在“裝修方案精選”網(wǎng)頁中添加庫項(xiàng)目，具體操作如下。（二）在網(wǎng)頁中添加庫項(xiàng)目插入表格插入庫項(xiàng)目修改文本內(nèi)容通過插入庫項(xiàng)目添加其他裝修方案目錄Contents任務(wù)一使用模板制作“原木簡約風(fēng)三居室裝修案例”網(wǎng)頁任務(wù)二在“裝修方案精選”網(wǎng)頁

溫馨提示

  • 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

提交評論