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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

Dreamweaver網頁設計立體化教程（微課版）（DreamweaverCC2020）項目五布局網頁目錄Contents任務一使用div+CSS樣式盒子模型布局“佳美馨裝飾——公司榮譽”任務二使用響應式布局制作“佳美飾馨裝”首頁實訓一制作“中國皮影——皮影的地方特色”網頁實訓二制作“中國皮影”首頁本任務將制作“佳美馨裝飾——公司榮譽”網頁，要完成此任務，需要使用CSS來控制網頁中各網頁元素的樣式，以及使用div+CSS盒子模型來布局網頁。一、任務描述（一）任務背景（1）掌握定義CSS樣式的方法。（2）掌握使用div+CSS盒子模型布局網頁的方法。（二）任務目標二、相關知識（一）認識CSS樣式1．CSS語法規(guī)則CSS語法規(guī)則由選擇器和聲明兩部分組成。選擇器用于標識要設置格式的網頁元素的術語（如標簽、類名或ID等），聲明則用于定義樣式屬性。右圖所示的代碼中，body為選擇器，用于選擇<body>標簽，{}中的內容為聲明塊。圖中代碼表示<body></body>標簽內的所有內容的“外邊距”為“0”，“內邊距”為“0”，“字號”為“12px”，“字體”為“宋體”，“行高”為“18px”，“背景顏色”為“#F00”。CSS語法規(guī)則二、相關知識（一）認識CSS樣式2．CSS樣式的類型根據(jù)選擇器的不同，可以將CSS樣式分為多種類型，其中較為常用的有以下6種。標簽CSS樣式類CSS樣式IDCSS樣式群組CSS樣式后代CSS樣式<a>標簽的偽類選擇器二、相關知識（一）認識CSS樣式3．CSS樣式的書寫位置CSS樣式按照書寫位置的不同可以分為外部樣式、內部樣式和行內樣式3種。外部樣式是將CSS樣式書寫在后綴名為.css的文件中，然后在網頁文件中使用鏈接或導入的方式引入外部CSS文件。外部樣式使用環(huán)境內部樣式內部樣式是在網頁文件的<style>標簽中寫入CSS代碼。行內樣式是為標簽增加“style”屬性，然后在屬性值中寫入CSS代碼。二、相關知識（二）“CSS設計器”面板CSS樣式的使用離不開“CSS設計器”面板，因此在學習CSS樣式之前，有必要先了解“CSS設計器”面板的用法。選擇【窗口】/【CSS設計器】菜單命令或按【Shift+F11】組合鍵打開“CSS設計器”面板，如圖5-7所示，在其中可以進行添加CSS源、添加CSS選擇器等操作?！癈SS設計器”面板二、相關知識（二）“CSS設計器”面板1．添加CSS源“添加CSS源”按鈕創(chuàng)建新的CSS文件使用現(xiàn)有的CSS文件二、相關知識（二）“CSS設計器”面板2．添加CSS選擇器添加CSS選擇器在“源”欄中選擇某個CSS源，然后在“選擇器”欄中單擊“添加選擇器”按鈕，在出現(xiàn)的文本框中輸入所需的選擇器，然后按【Enter】鍵添加CSS選擇器二、相關知識（三）CSS樣式的屬性在“CSS設計器”面板的“屬性”欄中單擊“布局”按鈕，則可在“屬性”欄中顯示關于布局的屬性及屬性值1．布局屬性“布局屬性”列表框二、相關知識（三）CSS樣式的屬性在“CSS設計器”面板的“屬性”欄中單擊“文本”按鈕，則可在“屬性”欄中顯示關于文本的屬性及屬性值。2．文本屬性“文本屬性”列表框二、相關知識（三）CSS樣式的屬性在“CSS設計器”面板的“屬性”欄中單擊“邊框”按鈕，則可在“屬性”欄中顯示關于邊框的屬性及屬性值。3．邊框屬性“邊框屬性”列表框二、相關知識（三）CSS樣式的屬性在“CSS設計器”面板的“屬性”欄中單擊“背景”按鈕，則可在“屬性”欄中顯示關于背景的屬性及屬性值。4．背景屬性“背景屬性”列表框二、相關知識（四）應用CSS樣式在網頁中應用CSS樣式的方式主要有以下3種。通過標簽選擇器將定義的CSS樣式應用到對應的標簽上。標簽類ID通過ID選擇器將定義的CSS樣式應用到設置了對應“ID”屬性的標簽上，通常情況下一個網頁中的“ID”屬性不能重復。通過類選擇器將定義的CSS樣式應用到設置了對應“Class”屬性的標簽上，在設置“Class”屬性時可以寫入多個類。二、相關知識（五）認識div+CSS盒子模型div+CSS盒子模型是將每個div當做一個可以裝東西的盒子，盒子里面的內容到盒子的邊框之間的距離為填充（padding），盒子本身有邊框（border），盒子邊框外與其他盒子之間的距離為邊界（margin）。每個邊框或邊界，又可分為上、下、左、右4個屬性值，如margin-bottom表示盒子的下邊界屬性。1．div+CSS盒子模型div+CSS盒子模型二、相關知識（五）認識div+CSS盒子模型下圖所示為一個標準的div+CSS盒子模型布局結構，左側為代碼，右側為效果圖。其中最外層的右斜線區(qū)域為margin區(qū)域，深色邊框為border區(qū)域，左斜線區(qū)域為padding區(qū)域，內部的圖片區(qū)域為content區(qū)域。1．div+CSS盒子模型div+CSS盒子模型布局二、相關知識（五）認識div+CSS盒子模型使用div+CSS盒子模型布局網頁的優(yōu)點主要體現(xiàn)在以下4個方面。2．div+CSS盒子模型的優(yōu)點網頁加載速度更快修改效率更高搜索引擎更容易檢索站點更容易被訪問二、相關知識（六）利用div+CSS盒子模型布局網頁將插入點定位到在“文檔”窗口中要插入<div>標簽的位置，然后選擇【插入】/【HTML】/【Div】菜單命令或者在“插入”面板的HTML類別中單擊“Div”按鈕，在打開的“插入Div”對話框中設置插入、Class或ID參數(shù)，單擊“確定”按鈕。1．插入<div>標簽“插入Div”對話框三、任務實施下面在“佳美馨裝飾——公司榮譽”網頁中創(chuàng)建并應用標簽CSS樣式，具體操作如下。（一）創(chuàng)建并應用標簽CSS樣式創(chuàng)建“body”標簽CSS樣式創(chuàng)建“h1”標簽CSS樣式設置“h1”標簽CSS樣式的邊框屬性三、任務實施（一）創(chuàng)建并應用標簽CSS樣式創(chuàng)建“p”標簽CSS樣式應用標簽CSS樣式三、任務實施下面在“佳美馨裝飾——公司榮譽”網頁中創(chuàng)建并應用IDCSS樣式，具體操作如下。（二）創(chuàng)建并應用IDCSS樣式創(chuàng)建“#logo1”IDCSS樣式創(chuàng)建“#logo2”IDCSS樣式三、任務實施（二）創(chuàng)建并應用IDCSS樣式應用“l(fā)ogo1”IDCSS樣式應用“l(fā)ogo2”IDCSS樣式三、任務實施下面在“佳美馨裝飾——公司榮譽”網頁中創(chuàng)建并應用類CSS樣式，具體操作如下。（三）創(chuàng)建并應用類CSS樣式創(chuàng)建“.mian”類樣式創(chuàng)建“.top”類樣式創(chuàng)建“.navigate”類樣式三、任務實施（三）創(chuàng)建并應用類CSS樣式應用“main”類樣式應用“top”類樣式應用“right”類樣式三、任務實施下面在“佳美馨裝飾——公司榮譽”網頁中創(chuàng)建并應用后代CSS樣式，具體操作如下。（四）創(chuàng)建并應用后代CSS樣式創(chuàng)建“.imgsimg”后代CSS樣式應用“.imgsimg”后代CSS樣式目錄Contents任務一使用div+CSS樣式盒子模型布局“佳美馨裝飾——公司榮譽”任務二使用響應式布局制作“佳美飾馨裝”首頁實訓一制作“中國皮影——皮影的地方特色”網頁實訓二制作“中國皮影”首頁移動設備屏幕的分辨率有很多種，其寬度通常比計算機顯示器的要小很多，因此普通的網頁在移動設備上會被縮放得很小，不利于用戶瀏覽。為了解決這個問題，本任務需要使用響應式布局來制作“佳美馨裝飾”首頁，以根據(jù)屏幕寬度自動調整網頁的布局，這樣通過一套網站代碼就能使該網頁在不同寬度屏幕上都能正常顯示。一、任務描述（一）任務背景（1）了解響應式布局的基本知識。（2）掌握設置視口的方法。（3）掌握添加媒體查詢的方法。（二）任務目標二、相關知識（一）認識響應式布局響應式布局是伊森馬科特（EthanMarcotte）在2010年5月提出的一個概念，指一個網站能夠兼容多個終端設備，而不用為每個終端制作一個特定的版本。響應式布局可以為不同終端的用戶提供更舒適的界面和更好的用戶體驗，隨著各種移動設備的普及，響應式布局的使用也越來越普遍，它具有的優(yōu)點有：響應式布局針對不同設備，靈活性強；響應式布局能快速解決多設備顯示自適應問題。二、相關知識（二）設置視口大多數(shù)移動端的瀏覽器會自動縮放網頁，以使網頁的寬度符合屏幕的寬度。要實現(xiàn)響應式布局，首先需要設置視口（viewport），讓瀏覽器將設備的寬度作為視圖寬度并禁止初始縮放。設置視口的方法為：在<head>標簽中加入一個<meta>標簽，并在其中輸入如下內容<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">二、相關知識（三）添加媒體查詢1．媒體查詢的語法結構@mediascreenand(min-width:最小寬度)and(max-width:最大寬度){CSS樣式}當屏幕的寬度處于設置的最小寬度和最大寬度之間時，將使用對應的CSS樣式，而當最小寬度為0時，可以省略最小寬度部分，即：@mediascreenand(max-width:最大寬度){CSS樣式}二、相關知識（三）添加媒體查詢2．添加媒體查詢媒體查詢添加在CSS樣式中，可以直接在<style>標簽或CSS文件中直接寫入，也可以通過“CSS設計器”面板或者標尺欄添加。通過“CSS設計器”面板添加媒體查詢通過標尺欄添加媒體查詢三、任務實施下面為“佳美馨裝飾”首頁設置視口，并添加@media(max-width:900px)媒體查詢，具體操作如下。（一）設置視口并添加媒體查詢設置視口添加媒體查詢三、任務實施下面在“佳美馨裝飾”首頁中添加CSS樣式，并預覽效果，具體操作如下。（二）添加CSS樣式并預覽效果媒體查詢代碼輸入全局CSS樣式代碼三、任務實施（二）添加CSS樣式并預覽效果調整頁面寬度輸入CSS樣式代碼調整頁面寬度使其小于900px目錄Contents任務一使用div+CSS樣式盒子模型布局“佳美馨裝飾——公司榮譽”任務二使用響應式布局制作“佳美飾馨裝”首頁實訓一制作“中國皮影——皮影的地方特色”網頁實訓二制作“中國皮影”首頁本實訓要求使用div+CSS盒子模型布局“中國皮影——皮影的地方特色”網頁，完成后的效果如圖所示。實訓要求實訓一?制作“中國皮影——皮影的地方特色”網頁本實訓需要使用div+CSS來進行布局，要使用這種方式進行網頁布局，需要先將網頁中的各部分內容分別放置在多個<div>標簽中，然后通過CSS樣式來控制這些<div>標簽的大小、位置、邊距等屬性。實訓思路“皮影的地方特色”網頁效果實訓一?制作“中國皮影——皮影的地方特色”網頁步驟提示要完成本實訓，應首先在網頁中創(chuàng)建多個<div>標簽，并將網頁元素分別放置在這些<div>標簽中，然后創(chuàng)建并應用所需的CSS樣式。其步驟如圖所示。①創(chuàng)建<div>標簽②創(chuàng)建CSS樣式③應用CSS樣式目錄Contents任務一使用div+CSS樣式盒子模型布局“佳美馨裝飾——公司榮譽”任務二使用響應式布局制作“佳美飾馨裝”首頁實訓一制作“中國皮影——皮影的地方特色”網頁實訓二制作“中國皮影”首頁本實訓要求使用響應式布局來制作“中國皮影”首頁，使其能自動根據(jù)窗口寬度改變網頁的布局，完成后的效果如圖所示。實訓要求實訓二?制作“中國皮影”首頁本網頁需要使用響應式布局來布局網頁，通過媒體查詢?yōu)椴煌瑢挾鹊钠聊辉O置不同的CSS樣式，以實現(xiàn)根據(jù)屏幕寬度自動調整網頁布局的目的。實訓思路“中國皮影”首頁實訓二?制作“中國皮影”首頁步驟提示完成本實訓主要包括設置視口、添加媒體查詢，以及創(chuàng)建并應用CSS樣式3步操作，其步驟如圖所示。①設置視口②添加媒體查詢③創(chuàng)建并應用CSS樣式Dreamweaver網頁設計立體化教程（微課版）（DreamweaverCC2020）項目六使用模板和庫目錄Contents任務一使用模板制作“原木簡約風三居室裝修案例”網頁任務二在“裝修方案精選”網頁中使用庫實訓一使用模板制作“中國皮影——陜西皮影”網頁實訓二使用庫項目制作“中國皮影——皮影文創(chuàng)產品”網頁在很多網站中會發(fā)現(xiàn)，網站的許多頁面都有很多相同的部分，如果重復制作這些內容，不僅浪費時間，增加網頁設計人員的工作量，而且后期維護也較為麻煩。這時，可將共同布局的部分創(chuàng)建為模板，以方便遇到相同的布局及元素時應用，在制作本任務時，就需要通過該方法來完成。一、任務描述（一）任務背景（1）掌握創(chuàng)建模板和編輯模板的方法。（2）掌握應用模板的方法。（二）任務目標二、相關知識（一）認識模板大部分網頁都會根據(jù)網站的性質統(tǒng)一整個網頁格式，如將主頁以某種形式顯示，其他網頁文件則需要標識要更換的內容和固定不變的內容，以便于管理重復網頁的框架，該種方式稱為“模板”。在網頁中使用模板可以一次性修改多個文件。使用模板的網頁，只要網頁中的模板未刪除，網頁將始終與模板處于鏈接狀態(tài)，即可通過修改模板，更改與模板關聯(lián)的其他網頁文件。二、相關知識（二）創(chuàng)建模板1．將現(xiàn)有網頁另存為模板創(chuàng)建模板網頁二、相關知識（二）創(chuàng)建模板2．新建模板網頁“新建文檔”對話框二、相關知識（三）編輯模板可編輯區(qū)域是指模板中允許編輯的區(qū)域，通過模板創(chuàng)建的網頁，只能修改可編輯區(qū)域中的內容。如果模板中未創(chuàng)建可編輯區(qū)域，則通過該模板創(chuàng)建的網頁中的內容將無法進行修改。1．創(chuàng)建可編輯區(qū)域輸入可編輯區(qū)域的名稱二、相關知識（三）編輯模板可選區(qū)域可通過定義條件控制該區(qū)域的顯示或隱藏，如在模板創(chuàng)建的網頁中需要顯示某張圖像，而在其他網頁中卻不需要顯示該圖像時，就可以通過創(chuàng)建可選區(qū)域實現(xiàn)。2．創(chuàng)建可選區(qū)域“新建可選區(qū)域”對話框二、相關知識（三）編輯模板在模板中創(chuàng)建重復區(qū)域，可以將其中的內容重復顯示任意次數(shù)，重復區(qū)域中的內容是不可編輯的，如果需要編輯，則可以在重復區(qū)域內插入可編輯區(qū)域。3．創(chuàng)建重復區(qū)域“新建重復區(qū)域”對話框二、相關知識（三）編輯模板重復表格可以創(chuàng)建包含重復行的表格式可編輯區(qū)域，提高創(chuàng)建相同可編輯區(qū)域的效率。4．創(chuàng)建重復表格“插入重復表格”對話框二、相關知識（三）編輯模板可選區(qū)域通常是無法編輯的，要想編輯可選區(qū)域，則需要創(chuàng)建可編輯的可選區(qū)域。方法為：在模板文件中設置模板參數(shù)，將插入點定位到需創(chuàng)建可編輯可選區(qū)域的位置，然后選擇【插入】/【模板】/【可編輯的可選區(qū)域】菜單命令，打開“新建可選區(qū)域”對話框，設置好相關參數(shù)后，單擊“確定”按鈕，創(chuàng)建可編輯的可選區(qū)域。5．創(chuàng)建可編輯的可選區(qū)域二、相關知識（四）應用模板在創(chuàng)建網站時，將共同的布局及元素創(chuàng)建為模板后，只需要將模板應用到創(chuàng)建的網頁上，然后在可編輯區(qū)域修改為不同的網頁元素即可創(chuàng)建新的頁面，大大提高了網站的制作效率。應用模板有以下3種方法。從模板新建文檔為網頁應用模板在“資源”面板中應用模板三、任務實施下面將“案例展示”網頁文件另存為模板，并在其中添加可編輯區(qū)域、可選區(qū)域和重復表格，具體操作如下。（一）創(chuàng)建“案例展示”模板“另存模板”對話框新建“標題”可編輯區(qū)域三、任務實施（一）創(chuàng)建“案例展示”模板新建“說明文字”可編輯區(qū)域“插入重復表格”對話框創(chuàng)建“圖片展示區(qū)域”重復表格三、任務實施（一）創(chuàng)建“案例展示”模板插入圖片并輸入文本設置居中對齊三、任務實施下面將從“案例展示”模板創(chuàng)建“原木簡約風三居室裝修案例”網頁，具體操作如下。（二）從模板創(chuàng)建“原木簡約風三居室裝修案例”網頁從模板新建網頁修改“標題”可編輯區(qū)域修改“案例說明”可編輯區(qū)域三、任務實施（二）從模板創(chuàng)建“原木簡約風三居室裝修案例”網頁使重復表格增加一行修改重復表格中的圖片以及說明文本目錄Contents任務一使用模板制作“原木簡約風三居室裝修案例”網頁任務二在“裝修方案精選”網頁中使用庫實訓一使用模板制作“中國皮影——陜西皮影”網頁實訓二使用庫項目制作“中國皮影——皮影文創(chuàng)產品”網頁庫是一種特殊的Dreamweaver文件（后綴名為.lbi），其中包含可放到網頁中的一組資源或資源副本。庫主要用于存放頁面元素，如圖像和文本等，這些元素能夠被重復使用或頻繁更新，統(tǒng)稱為庫項目。在制作本網頁時，應先創(chuàng)建并編輯庫項目，然后在在網頁中的對應位置插入庫項目。一、任務描述（一）任務背景（1）掌握創(chuàng)建庫項目和編輯庫項目的方法。（2）掌握插入庫項目的方法。（二）任務目標二、相關知識（一）認識“資源”面板“資源”面板是庫項目的載體。選擇【窗口】/【資源】菜單命令，打開“資源”面板，單擊左側的“庫”按鈕，面板中將顯示庫項目資源的相關內容?！百Y源”面板二、相關知識（二）創(chuàng)建庫項目如果某些網頁中已經包含了可以創(chuàng)建為庫項目的網頁元素，可以將其直接轉換為庫項目，并保存在“資源”面板中。1．將已有網頁元素創(chuàng)建為庫項目從已有網頁元素創(chuàng)建庫項目二、相關知識（二）創(chuàng)建庫項目不選擇任何網頁元素，單擊“資源”面板中的“新建庫項目”按鈕，可在“資源”面板中增加一個空白庫項目，修改其名稱后即可創(chuàng)建空白庫項目。2．創(chuàng)建空白庫項目二、相關知識（三）編輯庫項目創(chuàng)建的庫項目可隨時修改，只需在“資源”面板中選擇需要修改的庫項目選項，然后單擊下方的“編輯”按鈕，或雙擊庫項目選項，在打開的庫項目網頁中進行修改，如圖所示，完成后保存并關閉網頁。編輯庫項目二、相關知識（四）插入庫項目創(chuàng)建好庫項目后，可在任意網頁中插入該庫項目，其方法為：將光標插入點定位到要插入庫項目的位置，在“資源”面板中選擇要插入的庫項目，然后單擊“插入”按鈕，插入庫項目。三、任務實施下面為zxfa.html首頁中的內容創(chuàng)建“裝修方案”庫項目，具體操作如下。（一）創(chuàng)建“裝修方案”庫項目選擇表格新建庫項目三、任務實施下面在“裝修方案精選”網頁中添加庫項目，具體操作如下。（二）在網頁中添加庫項目插入表格插入庫項目修改文本內容通過插入庫項目添加其他裝修方案目錄Contents任務一使用模板制作“原木簡約風三居室裝修案例”網頁任務二在“裝修方案精選”網頁

溫馨提示

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

評論

0/150

提交評論