網(wǎng)頁設計與制作 課件（向隅） 項目5、6 使用div+CSS布局網(wǎng)頁、使用表單_第1頁
網(wǎng)頁設計與制作 課件（向隅） 項目5、6 使用div+CSS布局網(wǎng)頁、使用表單_第2頁
網(wǎng)頁設計與制作 課件（向隅） 項目5、6 使用div+CSS布局網(wǎng)頁、使用表單_第3頁
網(wǎng)頁設計與制作 課件（向隅） 項目5、6 使用div+CSS布局網(wǎng)頁、使用表單_第4頁
網(wǎng)頁設計與制作 課件（向隅） 項目5、6 使用div+CSS布局網(wǎng)頁、使用表單_第5頁
已閱讀5頁，還剩51頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

任務5-1布局概述

任務5-2布局常用屬性

任務5-3布局類型任務5-1布局概述網(wǎng)頁布局是指網(wǎng)頁上的各種元素，如文字、圖片、視頻、按鈕等的展示和組織方式。網(wǎng)頁布局的目的是使頁面的內容更易于理解和瀏覽，同時增強網(wǎng)站的視覺吸引力。div?+?CSS是Web的一種標準，也是一種網(wǎng)頁的布局方法。div?+?CSS布局是采用<div>標簽配合CSS實現(xiàn)對網(wǎng)頁標簽定位的一種布局方法。此種定位方式不同于傳統(tǒng)的表格(table)布局定位方式，它可真正實現(xiàn)網(wǎng)頁內容與表現(xiàn)相分離的效果。這里div為division的縮寫，意思為劃分，也可以稱為層或區(qū)塊。通過合理的網(wǎng)頁布局設計，可以讓頁面內容更加有序、整潔，并且使用戶更容易找到自己需要的信息。div?+?CSS布局的主要優(yōu)點如下：(1)網(wǎng)頁和表現(xiàn)內容分離，便于站點重構頁面。(2)結構清晰，對搜索引擎更加友好。(3)便于Web項目開發(fā)分工協(xié)作。1.?div標簽<div>標簽常用于對塊進行標記，以便通過樣式表來對<div>標簽標記塊進行格式化。<div>標簽可以把文檔分割為獨立的、不同的部分。如果用id或class來標記<div>標簽，那么該標簽的作用會變得更加明顯。1)?<div>標簽的基本語法<div>標簽的基本語法格式如下： <div

id="id選擇符">文字或圖像</div>或 <divclass="類選擇符">文字或圖像</div>2)?<div>標簽的常用屬性<div>標簽的常用屬性如下：(1)?position屬性：表示層的定位方式。(2)?left和top屬性：定義層的位置，與之并列的還有right和bottom屬性，這4個屬性用來設置層的位置。(3)?width和height屬性：定義層的寬度和高度。(4)?float屬性：定義層的浮動方式。(5)?clear屬性：定義清除屬性，表示層是否允許在某個元素的周圍有浮動元素，即是否去掉某個位置的浮動元素。(6)?z-index屬性：設置區(qū)域的上下層關系，相當于三維空間的z坐標，z-index屬性值越大，其位置就越高。表5-1為<div>標簽的屬性及說明。2.?span標簽<span>標簽與<div>標簽一樣也是一個容器元素，被廣泛運用在網(wǎng)頁制作中。<span>標簽用來組合文檔中的行內元素。<span>元素是一個內聯(lián)元素，它包圍的元素不會自動換行。<span>標簽沒有固定的格式表現(xiàn)，當對它應用樣式時，它才會產(chǎn)生視覺上的變化。<span>標簽的基本語法如下：<span

id="指定樣式名稱">文本</span>3.使用div+CSS布局的流程為了提高網(wǎng)頁制作的效率，布局時通常要遵循一定的布局流程，使用div+CSS布局的具體流程如下：(1)確定頁面的版心寬度。版心是指瀏覽器內顯示內容的有效面積，顯示內容在瀏覽器窗口中一般是居中顯示的。瀏覽器顯示內容的最大面積是由顯示器的分辨率決定的。目前顯示器的分辨率大多在1024?×?768px(像素)以上，可設置版心寬度1000px。在設計網(wǎng)站時應盡量適配主流的屏幕分辨率。常見網(wǎng)頁的寬度值為960px、980px、1000px和1200px等。(2)分析頁面中的模塊。在運用CSS布局之前，首先要對頁面有一個整體的規(guī)劃，用筆畫出頁面的草圖，頁面中包括的模塊及模塊間的關系。(3)控制網(wǎng)頁的各個模塊。當分析完頁面的布局后，就可以運用盒子模型的原理，通過div?+?CSS布局來控制網(wǎng)頁的各個模塊了。初學者在制作網(wǎng)頁時，一定要養(yǎng)成分析頁面布局的習慣，這樣可以提高網(wǎng)頁制作的效率。任務5-2布局常用屬性div?+?CSS布局通常有3種方式，分別是靜態(tài)布局、浮動布局和定位布局。1.靜態(tài)布局靜態(tài)布局，其特點是將網(wǎng)頁中各種布局標簽按照其在HTML代碼中的順序從上而下依次顯示。塊級元素生成的是一個矩形框，它按照在文檔中出現(xiàn)的位置正常定位顯示，沒有偏移量。在靜態(tài)布局的網(wǎng)頁中，用戶無須設置網(wǎng)頁各種布局標簽的邊距屬性。例如，一個典型的HTML文檔，其<body>標簽中的內容通常由頭部(header)、導航欄(nav)、內容(content)和頁尾(footer)4個部分組成，使用<div>標簽建立這4個部分所在的層，代碼如下：<divclass="header1">網(wǎng)頁的頭部標簽，通常包括網(wǎng)頁的Logo、Banner和搜索框等</div><divclass="nav1">網(wǎng)頁的導航條標簽，完成站點導航的超鏈接。</div><divclass="content1">網(wǎng)頁的內容標簽，主要包括網(wǎng)站的各種版塊欄目</div><divclass="footer1">網(wǎng)頁的頁尾標簽，主要包含網(wǎng)頁的版權信息及友好鏈接等內容</div>4個部分及<body>的樣式代碼如下：靜態(tài)布局的顯示效果如圖5-6所示。靜態(tài)布局的優(yōu)點是結構簡單，與各瀏覽器兼容性好，缺點是無法實現(xiàn)左右分欄的樣式效果。2.浮動布局浮動布局的作用是，定義網(wǎng)頁布局標簽脫離網(wǎng)頁的流動布局結構后顯示的方向。在網(wǎng)頁設計中，浮動布局可應用于多個方面，如實現(xiàn)文本環(huán)繞圖像或實現(xiàn)浮動的塊狀標簽布局。它是目前最主要的布局方法。為元素設置浮動，可以使頁面元素變得整齊有序。1)認識浮動浮動是指設置了浮動屬性的元素會脫離標準文檔流的控制，移動到其父元素中指定位置的過程。定義浮動的基本語法格式如下：選擇器{float:屬性值;}float常用的屬性值有3個，如表5-2所示。2)清除浮動運用clear屬性清除浮動。其基本語法格式為：選擇器{clear:屬性值;}clear的常用屬性值有3個，如表5-3所示。運用clear屬性只能清除元素左右兩側浮動的影響。然而在制作網(wǎng)頁時，經(jīng)常會遇到一些特殊的浮動影響。3.定位布局在CSS中，使用定位屬性可以實現(xiàn)網(wǎng)頁中元素的精確定位。元素的定位屬性主要包括定位模式和邊偏移兩部分。1)定位模式position屬性用于定義元素的定位模式，其基本語法格式如下：選擇器{position:屬性值；}position的常用屬性值如表5-4所示。2)邊偏移通過邊偏移屬性top、bottom、left或right來精確定義定位元素的位置，其取值為不同單位的數(shù)值或百分比，如表5-5所示。任務5-3布局類型使用div+CSS可以進行多種類型的布局，常見的布局類型有單列布局、雙列布局、三列布局3種類型。本任務將對這3種布局進行詳細講解。1.單列布局單列布局是網(wǎng)頁布局的基礎，所有復雜的布局都是在此基礎上演變而來的。如圖5-9是一個單列布局頁面的結構示意圖。從圖5-9中可以看出，單列布局頁面從上到下分別為頭部(header)、導航欄(nav)、焦點圖(banner)、內容(content)和頁尾(footer)，每個部分獨占一行，且寬度與版心相等。圖5-10是一個典型的單列布局網(wǎng)頁。2.雙列布局雙列布局和單列布局類似，只是網(wǎng)頁內容被分為了左右兩部分。圖5-11是一個雙列布局頁面的結構示意圖。3.三列布局對于一些大型網(wǎng)站，特別是電子商務類網(wǎng)站，由于內容分類較多，通常需要采用三列布局的頁面布局方式，如圖5-12當當網(wǎng)的內容部分就是左、中、右布局。三列布局方式只是將主體內容分成了左、中、右三部分。圖5-13是一個三列布局頁面的結構示意圖。4.全新的HTML5結構元素在使用div?+?CSS布局時，需要通過為div命名的方式來區(qū)分網(wǎng)頁中不同的模塊。在HTML5中布局方式有了新的變化，HTML5中增加了新的結構標簽。圖5-14給出了HTML5中新增的結構元素。1)?header標簽HTML5中的<header>標簽是一種具有引導和導航作用的結構元素，該元素可以包含所有通常放在頁面頭部的內容。<header>標簽基本語法格式如下：在HTML網(wǎng)頁中，并不限制<header>標簽的個數(shù)，一個網(wǎng)頁中可以使用多個<header>標簽，也可以為每一個內容塊添加<header>標簽。2)?nav標簽<nav>標簽用于定義導航鏈接，是HTML5新增的標簽，該標簽可以將具有導航性質的鏈接歸納在一個區(qū)域中，使頁面元素的語義更加明確。<nav>標簽的基本語法格式如下：3)?footer標簽<footer>標簽用于定義一個頁面或者區(qū)域的底部，它可以包含所有通常放在頁面底部的內容。與<header>標簽一樣，在一個頁面中也可以包含多個<footer>標簽。4)?article標簽<article>標簽代表文檔、頁面或者應用程序中與上下文不相關的獨立部分，該標簽經(jīng)常被用于定義一篇日志、一條新聞或用戶評論等。5)?section標簽<section>標簽用于對網(wǎng)站或應用程序中頁面上的內容進行分塊，一個<section>標簽通常由內容和標題組成。需要注意的是：(1)不要將<section>標簽用作設置樣式的頁面容器，那是div的特性。(2)如果<article>標簽、<aside>標簽或<nav>標簽更符合使用條件，那么就不要使用<section>標簽。(3)沒有標題的內容區(qū)塊不要使用<section>標簽定義。6)?aside標簽<aside>標簽用來定義當前頁面或者文章的附屬信息部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航欄等其他類似的有別于主要內容的部分。<aside>標簽的用法主要分為兩種：(1)被包含在<article>標簽內作為主要內容的附屬信息。(2)在<article>標簽之外使用，作為頁面或站點全局的附屬信息部分。任務6-1認識表單元素

任務6-2運用表單元素設計注冊表

任務6-3使用行為任務6-1認識表單元素1.表單的概念表單是用于實現(xiàn)瀏覽者與網(wǎng)頁制作者之間信息交互的一種網(wǎng)頁對象，在Internet中表單被廣泛應用于各種信息的搜集與反饋，如圖6-1所示就是一個嵌入了內容的個人注冊表單。2.表單的構成在HTML中，一個完整的表單通常由表單控件、提示信息和表單域3個部分組成。(1)表單控件：具體的表單功能項，如按鈕、單選按鈕、復選框、文本輸入框等。(2)提示信息：表單中包含的說明性文字，提示用戶進行相關操作。(3)表單域：相當于一個窗口，用來容納所有的表單控件和提示信息。在Dw的編輯窗口中表單域顯示為一個虛線框，其他的表單對象必須放入這個框內才起作用，如圖6-2所示。在Dw中，若看不到創(chuàng)建的表單域即標記表單域的虛線框，則可選擇菜單命令“查看”→“可視化助理”→“不可見元素”，使虛線框可見，如圖6-3所示。3.創(chuàng)建表單在HTML中，用<form></form>標簽創(chuàng)建一個表單，<form></form>中的所有內容都會被提交給服務器。創(chuàng)建表單的基本語法格式如下：<formaction="url地址"method="提交方式"name="表單名">表單控件</form>標簽中的內容解釋如下：(1)?action屬性：用于指定接收并處理表單數(shù)據(jù)的服務器程序的url地址。(2)?method屬性：用于設置表單數(shù)據(jù)的提交方式，其取值可為get或post。(3)?name：用于指定表單的名稱。4.表單的使用方法1)創(chuàng)建表單創(chuàng)建表單的基本步驟如下：(1)確定需要收集的信息，根據(jù)信息特點設計表單。(2)在表單中插入不同的表單控件元素。(3)設置表單域的屬性。(4)設置通過表單所收集的信息的處理方式。(5)設置確認網(wǎng)頁，確認已經(jīng)接收到用戶填寫的信息，并請用戶核對是否正確。表單只是收集瀏覽者輸入的信息，其數(shù)據(jù)的接收、傳遞、處理以及反饋工作是由通用網(wǎng)關接口(CommonGatewayInterface，CGI)程序來完成的。如果要在網(wǎng)頁中添加表單，就必須編寫相應的CGI程序。2)添加表單控件在DreamweaverCC中要插入表單，使用“插入”面板中的“表單”欄即可完成，如圖6-4是“插入”面板的“表單”工具欄。3)表單對象的屬性設置DreamweaverCC表單對象包括文本域、按鈕、圖像域、復選框、單選鈕、列表、菜單、文件域及隱藏域等。(1)“表單”控件。在添加表單之后，文檔中將以虛線框表示表單區(qū)域。表單對象只能插入在虛線框內。為了更合理地安排表單元素，可以使用表格來布局表單元素?！氨韱巍笨丶膶傩钥梢酝ㄟ^表單“屬性”面板進行設置，如圖6-5所示。在插入表單后，需要在表單(虛線框)內添加表單元素，如文本域、單選按鈕、復選框以及彈出菜單等。利用“插入”面板的“表單”欄可以方便地插入表單中的各個元素。(2)“文本字段”控件。“文本字段”控件的屬性可以通過“屬性”面板進行設置，如圖6-6所示。(3)“密碼”控件?！懊艽a”控件的屬性可以通過其“密碼”控件的“屬性”面板進行設置，如圖6-7所示?！懊艽a”控件的“屬性”面板中的設置選項意義與“文本框”控件的設置選項意義相同。(4)“單選框”控件?！皢芜x框”控件的屬性可以通過其“屬性”面板進行設置，如圖6-8所示。單選項的文本內容可直接在選中該單選項時修改。(5)“單選按鈕組”控件。“單選按鈕組”控件的屬性可以通過其“單選按鈕組”對話框進行設置，如圖6-9所示。(6)“復選框”控件。復選框允許在一組選項中選擇多個選項，用戶可以選擇任意多個合適的選項，一次只能建立一個。復選框對每個單獨的響應進行“關閉”或“打開”的狀態(tài)切換。“復選框”控件的屬性面板如圖6-10所示。(7)“復選框組”控件?！皬瓦x框組”控件一次可以建立多個復選框。單擊“復選框組”控件按鈕，彈出如圖6-11所示的“復選框組”對話框，用戶可以添加、刪除或修改標簽及其值，操作方式與“單選按鈕組”對話框的操作方法相同。(8)“選擇”控件。彈出(下拉)菜單和“列表值”按鈕都列出了一組用戶可以從中選擇的值。彈出菜單和“列表值”按鈕是有區(qū)別的。彈出菜單只允許單項選擇，而“列表值”按鈕則可選取多項。要插入列表/菜單，可將光標定位后，單擊“插入”面板中的“選擇”控件按鈕?！斑x擇”控件的屬性可以通過其“屬性”面板進行設置，如圖6-12所示。設置“選擇”控件的屬性，可以在選中“選擇”控件之后，在“選擇”控件下面的文本域中輸入“選擇”控件的名稱。要設置選擇項的內容，可以通過單擊“列表值”按鈕添加選擇的項目。單擊“列表值”按鈕，彈出修改“列表值”對話框，如圖6-13所示。(9)“提交”按鈕控件?！疤峤弧卑粹o控件用于提交表單的標準任務，也可以執(zhí)行自定義功能。要插入“表單”按鈕，將光標定位后，單擊“插入”面板中的“提交”按鈕，創(chuàng)建默認名為“submit”且文本顯示為“提交”的按鈕。“提交”按鈕控件的屬性可以通過其“屬性”面板進行設置，如圖6-14所示。(10)“重置”按鈕控件?！爸刂谩卑粹o控件用于重置表單的標準任務，也可以執(zhí)行自定義功能。要插入表單的“重置”按鈕，可將光標定位后，單擊“插入”面板中的“重置”按鈕，創(chuàng)建默認名為“reset”且文本顯示為“重置”的按鈕?！爸刂谩卑粹o控件的屬性可以通過其“屬性”面板進行設置，如圖6-15所示。(11)“文本區(qū)域”控件。“文本區(qū)域”控件用于創(chuàng)建一個可以輸入多行多列的文本。顯示時的行和列可以指定。要插入表單的“文本區(qū)域”，將光標定位后，單擊“插入”面板中的“文本區(qū)域”，創(chuàng)建文本區(qū)域。“文本區(qū)域”控件的屬性可以通過其“屬性”面板進行設置，如圖6-16所示。4)表單應用舉例下面制作一個用戶登錄網(wǎng)頁，效果如圖6-17所示。(1)分析：為了控制頁面的顯示效果，使頁面更美觀，可以使用表格控制表單項，此時需在網(wǎng)頁文檔中插入以下內容：①插入1個表單域。②在表單域中插入1個3行3列的表格。③在表格中插入1個文本域。④在表格中插入1個密碼域。⑤在表格中插入1個提交按鈕。(2)具體操作步驟如下：①創(chuàng)建并打開網(wǎng)頁文檔。②在Dw設計視圖窗口單擊“插入”面板中的“表單域”按鈕創(chuàng)建表單域。③在表單域中插入1個3行3列的表格，表格的ID設置為“table01”，“寬”設置為“450像素”，“邊框粗細”設置為“0”，“單元格邊框”設置為“5”，“單元格間距”設置為“0”。標題選中“頂部”，在“標題”文本框中輸入“輸入您的會員賬號與密碼”，如圖6-18所示。④單擊“確定”按鈕，效果如圖6-19所示。⑤選中表格的第1列，在“屬性”面板中設置“水平”為“右對齊”，設置“寬”為28%，如圖6-20所示。⑥在表格的第1行第1列中輸入文字“e-mail或賬號：”，第2行第1列輸入文字“登錄密碼：”。⑦選中表格的第2列，將其寬度設置為48%。⑧選中表格的第2行第3列，設置“水平”為“左對齊”，并輸入文字“忘記密碼？”，效果如圖6-21所示。⑨在表格的第1行第2個單元格中插入“文本”控件，并去掉文本框前的文字。⑩在表格的第2行第2個單元格中插入“密碼”控件，并去掉文本框前的文字。?選擇表格的第3行第2列，設置對齊方式為“居中對齊”。插入“提交按鈕”控件，并將其值修改為“立即登錄”，如圖6-22所示。?運行，即在瀏覽器中渲染，其效果如圖6-17所示。任務6-2運用表單元素設計注冊表1.任務分析為了控制頁面的顯示效果，使頁面更加美觀，可以使用表格控制表單項，此時需在網(wǎng)頁文檔中插入以下內容：(1)插入1個表單域。(2)在表單域中插入一個14行2列的表格，寬度為350像素，第1列寬為25%。(3)在表格中插入3個“文本”控件(用戶名、擴展信息和回答)。(4)在表格中插入2個“密碼”控件(密碼和確認密碼)。(5)在表格中插入1個“e-mail郵件”控件。(6)在表格中插入1個“選擇”控件。(7)在表格中插入1個“單選按鈕組”控件。(8)在表格中插入1個“復選按鈕組”控件。(9)在表格中插入1個“日歷”控件。(10)在表格中插入1個“文本區(qū)域”控件。(11)在表格中分別插入1個“提交”按鈕控件和“重置”按鈕控件。2.任務實施(1)創(chuàng)建并打開網(wǎng)頁文檔。(2)在Dw設計視圖窗口單擊“插入”面板中的“表單”按鈕創(chuàng)建表單域。(3)在表單域中插入一個14行2列的表格，表格的“ID”設置為“table02”，“寬”設置為“350像素”，“邊框粗細”設置為“0”，“單元格邊距”設置為“5”，“單元格間距”設置為“0”。標題選中“頂部”，在“標題”文本框中輸入“注冊表單”，如圖6-23所示。(4)單擊“確定”按鈕，效果如圖6-24所示。(5)選中表格的第1列，在“屬性”面板中設置“寬度”為25%。(6)選中表格的第1行，單擊“修改”→“表格”→“合并單元格”菜單項，合并第1行單元格，并輸入文字“基本信息(*為必填)”且左對齊。(7)在表格的第1列其他單元格中填入相應的文字，如圖6-25所示。(8)鼠標放在“用戶名”右邊的單元格內，在“插入”面板的“表單”欄中選擇“文本”選項，去掉其相應的文字。同樣方法，在“擴展信息”和“回答”右邊單元格內添加“文本”并去掉文字。(9)鼠標放在“密碼”右邊的單元格內，在“插入”面板的“表單”欄中選擇“密碼”選項，去掉其相應的文字。同樣方法，在“確認密碼”右邊單元格內添加“密碼”選項。(10)鼠標放在“e-mail”右邊的單元格內，在“插入”面板的“表單”欄中選擇“@電子郵件”，去掉相應的文字，效果如圖6-26所示。(11)鼠標放在“安全提問”右邊的單元格內，在“插入”面板的“表單”欄中選擇“選擇”選項，去掉其相應的文字。單擊屬性面板的“

”按鈕，為該列表添加列表值，如圖6-27所示。(12)鼠標放在“性別”右邊的單元格內，在“插入”面板的“表單”欄中選擇“單選按鈕組”選項，彈出“單選按鈕組”對話框，分別將標簽文本修改為“男”和“女”，布局為“換行符”，并單擊“確定”按鈕。同時在代碼視圖中刪除“男”和“女”間的<br/>標簽，如圖6-28所示。(13)鼠標放在“生日”右邊的單元格內，在“插入”面板的“表單”欄中選擇“日歷”選項，插入日期控件，用于用戶選擇日期。(14)鼠標放在“愛好”右邊的單元格內，在“插入”面板的“表單”欄中選擇“復選按鈕組”選項，彈出“復選按鈕組”對話框，單擊

添加標簽至4個且分別將標簽文本修改為“音樂”“籃球”“足球”和“徒步”，布局為“換行符”，并單擊“確定”按鈕。同時在代碼視圖中刪除“<br/>標簽，如圖6-29所示。(15)鼠標放在“自我介紹”右邊的單元格內，在“插入”面板的“表單”欄中選擇“文本區(qū)域”選項，在“屬性”面板中設置“Rows”為6，“Cols”為30，即6行30列的列表框。(16

溫馨提示

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

評論

0/150

提交評論