網(wǎng)頁(yè)設(shè)計(jì)課件第2天

1、網(wǎng)頁(yè)設(shè)計(jì)第2天課件滾動(dòng)條設(shè)計(jì)設(shè)計(jì)要素div標(biāo)簽style的3個(gè)屬性style=”width:400px; height:300px; overflow:auto;”示例，略HTML表格設(shè)計(jì)表格主要用布局設(shè)計(jì)是一組標(biāo)簽協(xié)同工作 or 主要應(yīng)用于各類表單設(shè)計(jì)頁(yè)面布局用工具自動(dòng)生成第1個(gè)表格操作如下光標(biāo)停在標(biāo)簽的某個(gè)地方插入，表格，格式選無(wú)用可視化工具，對(duì)表格的寬與高進(jìn)行修改自動(dòng)生成的代碼 0,0 0,1 0,2 0,3 1,0 1,1 1,2 1,3 2,0 2,1 2,2 2,3 表格的屬性row，行序號(hào)表格行號(hào)從0開始col,或column，列序號(hào)表格的列號(hào)從0開始關(guān)于表格的標(biāo)簽一個(gè)表格由一組

2、不同標(biāo)簽協(xié)同工作標(biāo)簽標(biāo)簽標(biāo)簽標(biāo)簽，表格標(biāo)簽是屬于表格的根標(biāo)簽，表示一個(gè)表格的開始標(biāo)簽，行標(biāo)簽是表格中的某一行的標(biāo)簽一個(gè)表格標(biāo)簽內(nèi)部，可以N多個(gè)標(biāo)簽也就是一個(gè)表格內(nèi)，可以有N多行標(biāo)簽，格子標(biāo)簽一個(gè)標(biāo)簽中，可以有N多格子標(biāo)簽也就是一行中，可以有N多列格子，每個(gè)格子是一個(gè)標(biāo)簽表格中的所有實(shí)質(zhì)性的內(nèi)容全部在標(biāo)簽內(nèi)格子標(biāo)簽只能存在于標(biāo)簽內(nèi)，如果在其他地方，則為錯(cuò)誤設(shè)計(jì)順序?yàn)?個(gè)-N多1個(gè)中有N多table/tr/td格子標(biāo)簽可以嵌套子表格，或其他標(biāo)簽并且只能在標(biāo)簽中嵌套，不能在或標(biāo)簽加入其他標(biāo)簽手工編寫表格規(guī)則點(diǎn)，或要素點(diǎn)table/tr/tdborder=”邊框?qū)挾取眞idth=”格子寬度”bgcol

3、or=”背景色”任何一列的格子寬度只有最寬的那個(gè)格子有效示例代碼如下體會(huì)手工編寫表格 0,0 0,1 0,2 0,3 1,0 1,1 1,2 1,3 2,0 2,1 2,2 2,3 表格的行單元格合并，水平方向，列單元格合并可以用可視化方法執(zhí)行合并操作生成的代如下 0,0 0,1 0,2 0,3 1,0 1,1-1,2-1,3 colspan,=列單元格子個(gè)數(shù)col=column，列span=space number，空間個(gè)數(shù)，也就是格子個(gè)數(shù)表格的垂直方向的行格子合并垂直方向格子合并語(yǔ)法。示例如下 0,0 0,1 1,1 0,2-1,2-2,2 0,3 關(guān)于格子標(biāo)簽有2個(gè)標(biāo)簽名稱格子標(biāo)簽格子標(biāo)

4、簽是普通格子標(biāo)簽是標(biāo)題行格子標(biāo)簽也就是在標(biāo)簽基礎(chǔ)上，字體加粗，文本居中示例如下體會(huì)格子td-th標(biāo)簽 0,0 0,1 0,2 0,3 1,0 1,1 1,2 1,3 2,0 2,1 2,2 2,3 表格內(nèi)部可以加入子標(biāo)簽子標(biāo)簽可以是任何標(biāo)簽，包括table標(biāo)簽如果是table，必須是一組標(biāo)簽table/tr/td表格內(nèi)部加入子標(biāo)簽，只能加在標(biāo)簽內(nèi)部如果加在其他標(biāo)簽，如table,tr標(biāo)簽直接內(nèi)部，則產(chǎn)生無(wú)法預(yù)測(cè)的顯示方式示例如下體會(huì)格子td-th標(biāo)簽 0,0 0,1 0,3 1,0 1,1 在1,1格式內(nèi)部加入div 1,2 1,3 2,0 2,1 2,2 2,3 關(guān)于網(wǎng)頁(yè)中標(biāo)簽的ID屬性id

5、,identity,標(biāo)識(shí)表示一個(gè)變量在某一個(gè)范圍是惟一的網(wǎng)頁(yè)的任何一個(gè)標(biāo)簽都可以有id屬性語(yǔ)法。標(biāo)簽A中的內(nèi)容網(wǎng)頁(yè)中標(biāo)簽的id屬性有索引的作用但這個(gè)索引是非惟一索引網(wǎng)頁(yè)的任何一個(gè)標(biāo)簽可相同，或不同的id屬性面試題問(wèn)：為標(biāo)簽要有id屬性答：標(biāo)簽有了id屬性后，可以快速定位到此標(biāo)簽如果有重復(fù)的時(shí)候，則相同id屬性中第1個(gè)標(biāo)簽CSS的概念CSSCascade Style Sheet 級(jí)聯(lián)樣式表（單）cascade,級(jí)聯(lián)表示標(biāo)簽之間有關(guān)聯(lián)關(guān)系style,樣式，格式，風(fēng)格sheet,表（單）表示多個(gè)CSS完整含意用于修飾網(wǎng)頁(yè)標(biāo)簽元素的工具，包括文本內(nèi)容的前景、背景、字體大小、加粗等格式段塊大小、背景、邊

6、框、對(duì)齊鼠標(biāo)的形狀。在網(wǎng)頁(yè)文件中引用CSS方法在Dreamweaver編輯窗口，右鍵，CSS將設(shè)計(jì)好的CSS綁定到某個(gè)標(biāo)簽中，可視化操作綁定只有類選擇符才有此能力操作效果如下體會(huì)網(wǎng)頁(yè)中的CSS設(shè)計(jì) 這是第1個(gè)div 這是第2個(gè)div 這是第3個(gè)divCSS的3個(gè)選擇符類選擇符，或class選擇符名稱是以”.”開頭ID選擇符名稱是以“#”開頭固定標(biāo)簽選擇符名稱是某個(gè)己存在標(biāo)簽的名稱整個(gè)css的基本語(yǔ)法語(yǔ)法css名稱 屬性1:值1; 屬性2:值2; 屬性n:值n;text/css,表示文本文件中的css文件css代碼可以直接當(dāng)前網(wǎng)頁(yè)中也可以寫在獨(dú)立的.css文件中兩者效果相同幾個(gè)常用的css屬性值

7、color:字體顏色background-color:背景色width:寬度height:高度text-align:文本對(duì)齊示例如下.myCss1 font-size: 36px;color: #00F;background-color: #CCF;text-align: right;height: 100px;width: 300px;關(guān)于id選擇符css名稱是以”開頭如果一個(gè)標(biāo)簽有ID選擇符，類選擇符同時(shí)有效時(shí)則id選擇符優(yōu)先示例如下.myCss1 font-size: 36px;color: #00F;background-color: #CCF;text-align: right;he

8、ight: 100px;width: 300px;#myCss2 color: #F00;background-color: #036;height: 50px;width: 200px;border: 2px dotted #3CF;.myCss3 color: #F39;background-color: #399;height: 150px;width: 400px;border: 2px dotted #CF6;體會(huì)網(wǎng)頁(yè)中的CSS設(shè)計(jì) 這是第1個(gè)div 這是第2個(gè)div 這是第3個(gè)div,css的ID選擇符優(yōu)先于類選擇符CSS的作用范圍常見(jiàn)的修飾范圍塊的寬、高、背景、前景邊框，bord

9、er文本（字體，回行，顏色）定位（position,相對(duì)，絕對(duì)，適應(yīng)）布局（div+CSS布局）示例如下關(guān)于字體相關(guān)設(shè)置字體，font可以用復(fù)合font屬性表示也可以用font獨(dú)立的其他屬性分別表示需要記住的屬性有font-size:字體大小color:字體的顏色line-height:字體行高關(guān)于背景相關(guān)設(shè)置背景色background-color背景圖片background-image:url(圖片文件名稱);background-repeat:有幾個(gè)選項(xiàng)，沒(méi)有重復(fù)等,no-repeat,repeat,repeat-x,repeat-y有x,y的移位功能如果背景圖片與背景色同時(shí)存時(shí)則背景圖片

10、優(yōu)先示例如下.myCss1 font-size: 36px;color: #00F;background-color: #CCF;background-image:url(meinu.jpg);background-repeat: no-repeat;text-align: right;height: 100px;width: 400px;關(guān)于邊框相關(guān)設(shè)置border,邊框也是一個(gè)復(fù)合css屬性，包括3個(gè)內(nèi)容邊框線的形狀邊框線的線寬邊框線的顏色有4個(gè)邊每個(gè)邊均可以獨(dú)立作用也可以四邊同時(shí)有效示例如下.myCss3 color: #F39;background-color: #399;height

11、: 350px;width: 400px;border-top-width: 4px;border-right-width: 4px;border-bottom-width: 4px;border-left-width: 4px;border-top-style: dashed;border-right-style: dashed;border-bottom-style: dashed;border-left-style: dashed;border-top-color: #CF6;border-right-color: #903;border-bottom-color: #36F;border-left-color: #69C;關(guān)于margin的作用margin,外邊距表示一個(gè)標(biāo)簽的4個(gè)外邊距表示本標(biāo)簽與父標(biāo)框之間的距離在設(shè)計(jì)時(shí)右外邊距，下外連距要通過(guò)標(biāo)簽的大小擺放觀察示例如下體會(huì)一個(gè)標(biāo)簽的margin屬性 這是內(nèi)部的第1個(gè)div 這是內(nèi)部的第2個(gè)div 關(guān)于padding的作用padding本標(biāo)簽內(nèi)部子標(biāo)簽的離自己的距離示例如下體會(huì)一個(gè)標(biāo)簽的padding屬性 這是內(nèi)部的第1個(gè)div 這是內(nèi)部的第2個(gè)div 關(guān)于display的作用用于控制標(biāo)簽的顯示方式，包括這個(gè)標(biāo)簽是否