網(wǎng)站規(guī)劃建設與管理維護（第三版） 課件 單元 4 構(gòu)建CSS3樣式與網(wǎng)頁布局_第1頁
網(wǎng)站規(guī)劃建設與管理維護（第三版） 課件 單元 4 構(gòu)建CSS3樣式與網(wǎng)頁布局_第2頁
網(wǎng)站規(guī)劃建設與管理維護（第三版） 課件 單元 4 構(gòu)建CSS3樣式與網(wǎng)頁布局_第3頁
網(wǎng)站規(guī)劃建設與管理維護（第三版） 課件 單元 4 構(gòu)建CSS3樣式與網(wǎng)頁布局_第4頁
網(wǎng)站規(guī)劃建設與管理維護（第三版） 課件 單元 4 構(gòu)建CSS3樣式與網(wǎng)頁布局_第5頁
已閱讀5頁，還剩37頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

單元4構(gòu)建CSS3樣式與網(wǎng)頁布局網(wǎng)站規(guī)劃建設與管理維護（第三版）單元4

構(gòu)建CSS3樣式與網(wǎng)頁布局學習目標1了解CSS3的基本語法與格式掌握CSS3在網(wǎng)頁布局中的應用熟悉CSS3各種屬性的設置學習一絲不茍的工作態(tài)度單元內(nèi)容及任務說明

任務1體驗CSS3樣式應用

CSS（cascadingstylesheet，層疊樣式表）是一組格式設置規(guī)則，用于控制Web頁面的外觀，目前最新版本為CSS3。CSS是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設計語言。相對于傳統(tǒng)HTML的格式表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力，并能夠進行初步交互設計，是目前基于文本展示最優(yōu)秀的表現(xiàn)設計語言任務2設置CSS樣式任務3應用CSS+Div布局技術(shù)

創(chuàng)建CSS文件；HTML文件鏈接CSS文件

在Dreamweaver中依次選擇“文件”|“新建”命令，在彈出的“新建文檔”對話框中選擇“新建文檔”|“文檔類型：CSS”，單擊“創(chuàng)建”按鈕，創(chuàng)建CSS文件，輸入以下內(nèi)容后保存為css01.css：body{background-color:#F00}任務實施-體驗CSS外部樣式表確定網(wǎng)站建設的目的確定網(wǎng)站建設的目的網(wǎng)站結(jié)構(gòu)總體策劃010203

任務1了解網(wǎng)站整體規(guī)劃CSS的語法構(gòu)建選擇器應用CSS樣式到網(wǎng)頁中任務實施-體驗CSS外部樣式表

相關(guān)知識CSS的語法結(jié)構(gòu)選擇器應用CSS樣式到網(wǎng)頁中010203

相關(guān)知識相關(guān)知識任務實施-CSS樣式應用確定網(wǎng)站建設的目的確定網(wǎng)站建設的目的網(wǎng)站結(jié)構(gòu)總體策劃010203任務2設置CSS樣式使用CSS創(chuàng)建個性化鼠標使用CSS3濾鏡設置CSS樣式的過渡屬性任務實施-CSS樣式應用

任務實施-CSS樣式應用

任務實施-CSS樣式應用

相關(guān)知識新建CSS樣式編輯CSS樣式設置CSS樣式的類型屬性設置CSS樣式的背景屬性設置CSS樣式的區(qū)塊屬性0102030504相關(guān)知識設置CSS樣式的方框?qū)傩栽O置CSS樣式的邊框?qū)傩栽O置CSS樣式的列表屬性設置CSS樣式的定位屬性設置CSS樣式的寬展屬性060708100912設置CSS樣式的過渡屬性11CSS和CSS3的異同

相關(guān)知識

相關(guān)知識相關(guān)知識相關(guān)知識相關(guān)知識相關(guān)知識相關(guān)知識任務實

施班級簡歷網(wǎng)頁布局

確定網(wǎng)站建設的目的確定網(wǎng)站建設的目的0102任務3應用CSS+Div布局技術(shù)基于浮動的固定布局班級簡介網(wǎng)頁布局任務實施-班級簡歷網(wǎng)頁布局任務實施-班級簡歷網(wǎng)頁布局任務實施-班級簡歷網(wǎng)頁布局

相關(guān)知識CSS盒模型讓布局居中流體布局和彈性布局010203

相關(guān)知識本章小結(jié)自從CSS出現(xiàn)之后，HTML終于擺脫了雜亂無章的描述手法，開始將頁面內(nèi)容與樣式分離。CSS符合W3C標準，最大限度地保證網(wǎng)站不會因為網(wǎng)絡應用的升級而被淘汰。其極大優(yōu)勢表現(xiàn)在簡潔的代碼，對于一個大型網(wǎng)站來說，可以節(jié)省大量帶寬。相對于傳統(tǒng)的table，采用CSS+Div技術(shù)的網(wǎng)頁，對于搜索引擎的收錄更加友好。CSS的關(guān)鍵在于其與HTML技術(shù)及JavaScript等腳本語言的融合，實際上還有一種融合方式可供選擇，即XML+XSL+JavaScript，但是XSL（可擴展樣式表語言）相較于CSS過于復雜，不太容易上手。習題一、填空題1．外部樣式表獨立于HTML頁面，通常放置于網(wǎng)站內(nèi)某個位置，它實際上是一個擴展名為的文件。2．內(nèi)部樣式表、行內(nèi)樣式表和外部樣式表從低到高的優(yōu)先級別順序為：、、。3．寫出Text-align的四種屬性值：、、和。4．寫出Float的三種屬性值：、和。5．CSS布局技術(shù)依賴于三個基本概念：、和。二、單選題1．CSS的全稱是（）。A．CascadingSheetStyle B．CascadingSystemSheetC．CascadingStyleSheet D．CascadingStyleSystem2．下面不屬于CSS插入形式的是（）。A．索引樣式 B．行內(nèi)樣式 C．內(nèi)部樣式 D．鏈接外部樣式3．鏈接到外部樣式表應該使用的標記是（）。A．<link> B．<object> C．<style> D．<head>習題4．當對一條CSS定義進行單一選擇符的復合樣式聲明時，不同屬性應該用（）分隔。A．# B．， C．； D．：5．下面CSS寫法會產(chǎn)生錯誤的是（）。A．h3,h4&h5{color:red} B．body{font-size:12pt;text-indent:3em}C．a(chǎn){color:red} D．font.html{color:#191970}6．CSS中設置文字大小寫的字體屬性是：（）。A．font-style B．font-weightC．text-transform D．text-decoration7．使用CSS對文本進行修飾，若使文本閃爍，text-decoration的取值為（）。A．none B．underline C．overline D．blink習題8．Dreamweaver利用（）標簽構(gòu)建分層。A．<dir> B．<div> C．<dif> D．<dis>9．以下CSS長度單位中屬于相對長度單位的是（）。A．pt B．in C．em D．cm10．以下方法中不屬于CSS定義顏色方法的是（）。A．用十六進制數(shù)方式表示顏色值 B．用八進制數(shù)方式表示顏色值C．用RGB函數(shù)方式表示顏色值 D．用顏色名稱方式表示顏色值習題11．CSS中設置文本屬性的Text-indent設置的是（）。A．字間距 B．字母間距 C．文字對齊 D．文字縮行12．不同的選擇符定義相同的元素時，優(yōu)先級別的關(guān)系是（）。A．類選擇符最高，id選擇符其次，HTML標記選擇符最低B．類選擇符最高，HTML標記選擇符其次，id選擇符最低C．id選擇符最高，HTML標記選擇符其次，類選擇符最低D．id選擇符最高，類選擇符其次，HTML標記選擇符最低習題三、簡答題1．怎樣使一個Div層居中于瀏覽器中？寫出兩種代碼。2．簡單描述CSS盒模型的構(gòu)造。3．簡單描述如何選擇布局方案。習題四、上機練習題在D盤建立一個文件夾，以“學號+姓名”命名。把chapter4\上機練習\image文件夾復制到“學號+姓名”文件夾中，并將該文件夾定義為站點。（一）首頁制作——default.html1．在站點根目錄新建網(wǎng)頁default.html。2．在頁面中導入動畫文件kc.swf，要求布局水平居中。3．制作完成后的效果如圖4-63所示。（二）中文版網(wǎng)頁制作——index.html1．在站點根目錄中新建文件夾，將其命名為zhuwenj。在zhuwenj文件夾中新建網(wǎng)頁index.html。2．設計各布局方框，導入相關(guān)圖像和文字。3．導航中的“首頁”超鏈接到default.html網(wǎng)頁；“中文版”超鏈接到zhuwenj\index.html網(wǎng)頁；english超鏈接到zhuwenj\english.html網(wǎng)頁；“知識競賽”超鏈接到zhuwenj\jingsai.html網(wǎng)頁。習題（三）英文版網(wǎng)頁制作——english.html1．通過復制index.html，在zhuwenj文件夾中生成新網(wǎng)頁english.html。2．修改其中的中文文字，使之更換為英文文字。3．制作完成后的效果如圖4-65所示。習題（四）知識競賽網(wǎng)頁制作——jingsai.html1．在zhuwenj文件夾中新建網(wǎng)頁jingsai.html。2．插入一個表單，在表單中輸入圖4-66所示的文字和相關(guān)表單控件。3．單擊“提交答案”按鈕時，表單動作為發(fā)送到郵箱teacher@。4．制作完成后的效果如圖4-66所示。習題四、上機練習題在D盤建立一個站點根目錄文件夾，以“學號+姓名”命名。把chapter4\上機練習\images文件夾復制到“學號+姓名”文件夾中，并將該文件夾定義為站點。（一）主頁制作——index.html1．在站點根目錄新建網(wǎng)頁index.html。2．利用div完成界面布局，利用css控制各網(wǎng)頁元素。3．相冊中的圖像采取從左到右的滾動方式顯示圖片。4．制作完成后的效果如圖4-67所示。習題（二）二級子網(wǎng)頁制作——日志網(wǎng)頁log.html1．在站點根目錄新建網(wǎng)頁log.html。2．利用div完成界面布局，利用css控制各網(wǎng)頁元素且編寫格式風格一致的網(wǎng)頁，復制index.html文件中的css格式要求。3．制作完成后的效果如圖4-68所示。習題（三）三級網(wǎng)頁制作——大學軍訓militaryTraining.html1．在站點根目錄新建網(wǎng)頁militaryTraining.html。2．利用div完成界面布局，利用css控制各網(wǎng)頁元素且編寫格式風格一致的網(wǎng)頁，復制index.html文件中的css格式要求。3．制作完成后的效果如圖4-69所示。習題圖4-69大學軍訓網(wǎng)頁——militaryTraining.html（四）完成各網(wǎng)頁鏈接1．在主頁中鏈接二級網(wǎng)頁。在index.html中的“日志”鏈接到log.html。2．在二級網(wǎng)頁中鏈接三級

溫馨提示

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

評論

0/150

提交評論