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

下載本文檔

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

文檔簡介

任務(wù)5-1布局概述

任務(wù)5-2布局常用屬性

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

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

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

任務(wù)6-2運用表單元素設(shè)計注冊表

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

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

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

溫馨提示

  • 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

提交評論