靜態(tài)網(wǎng)頁設(shè)計2_第1頁
靜態(tài)網(wǎng)頁設(shè)計2_第2頁
靜態(tài)網(wǎng)頁設(shè)計2_第3頁
靜態(tài)網(wǎng)頁設(shè)計2_第4頁
靜態(tài)網(wǎng)頁設(shè)計2_第5頁
已閱讀5頁，還剩47頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

課前提問a標(biāo)記的常用屬性有哪些hreftargetnametitleimg標(biāo)記的常用屬性有哪些srcwidthheightalttitle作業(yè)（第一次）用DW制作一個個人求職的網(wǎng)頁，要求用表格布局，網(wǎng)頁中必須包含圖像、文本、列表、鏈接及表格等基本元素，制作完成后，把該網(wǎng)頁的源代碼抄寫兩遍交上來或者直接用編寫代碼的方式制作該網(wǎng)頁，再在作業(yè)本上抄寫兩遍下次上課前必須交，否則扣10分(10/30)媒體元素插入標(biāo)記<embed/><object></object>插入flash的兩種方法方法一：執(zhí)行菜單命令：“插入－媒體－flash”，在代碼視圖中可看到插入flash元素是通過同時插入object標(biāo)記和embed標(biāo)記實現(xiàn)的，以確保在IE5和Firefox中都獲得應(yīng)有的效果方法二：執(zhí)行菜單命令：“插入－媒體－插件”，此方法在代碼視圖中僅插入了embed元素。由于IE6和Firefox都能正常顯示效果，而代碼更簡潔，所以推薦用這種方式在圖像上添加透明flash首先可以將一張需要放置透明flash的圖片作為單元格的背景導(dǎo)入，然后在此單元格內(nèi)插入一個透明flash文件，可以調(diào)整此flash元素的大小與單元格相一致，選中該flash文件，點擊屬性面板里的“參數(shù)”按鈕，新建一個參數(shù)“wmode”值設(shè)置為“transparent”。

插入視頻或音頻文件插入視頻可分別使用ActiveX按鈕或插件按鈕實現(xiàn)<objectwidth="280"height="216"><paramname="autostart"value="false"/><embedsrc="2.mpg"width="280"height="216"autostart="false"></embed></object>ActiveX方式<embed

src=“2.mpg”width=“276”height=“218”autostart=“false”></embed>插件方式流媒體簡介流媒體實際指的是一種新的媒體傳送方式，而非一種新的媒體,流式傳輸方式將整個多媒體文件經(jīng)過特殊的壓縮方式分成一個個壓縮包，由視頻服務(wù)器向用戶計算機連續(xù)、實時傳送。在采用流式傳輸方式的系統(tǒng)中，用戶不必像采用下載方式那樣等到整個文件全部下載完畢常見的流媒體文件格式real公司：rm\rmvb\ra

apple公司：quicktime\mov

microsoft公司：asf\wmv\wma

插入流媒體元素的方法網(wǎng)頁中插入流媒體也能向插入一般媒體一樣使用embed標(biāo)記，只是要在classId框中設(shè)置流媒體的類型插入RealPlayer流格式的視頻文件屬性面板中設(shè)置:ClassID為RealPlayer……。選中Embed復(fù)選框。Src為zhaodan.rm。單擊“參數(shù)…”按鈕，設(shè)置屬性。parm參數(shù)示例參數(shù)：console屬性：可以將各種不同的RealPlayer控制聚集在網(wǎng)頁上，這樣它們可以交互使用或是保持獨立，而且互相不影響演示1:8000/ec/youhua/kclx-1.htm容器標(biāo)記<div><span>div和spandiv和span是不含有任何語義的標(biāo)記，用來在其中放置任何網(wǎng)頁元素，就象一個容器一樣，當(dāng)把文字放入后，文字的格式外觀都不會發(fā)生任何改變，應(yīng)用容器標(biāo)記的主要作用是通過引入CSS屬性對容器內(nèi)元素內(nèi)容的表現(xiàn)進行設(shè)置。div和span的唯一區(qū)別是div是塊級元素，span是行內(nèi)元素。div和span<body><divstyle="background-color:#3399ff">塊狀區(qū)域1</div><divstyle="background-color:#99ccff">塊狀區(qū)域2</div><spanstyle="background-color:#ffccff">行間區(qū)域1</span><spanstyle="background-color:#993399">行間區(qū)域2</span></body><div>標(biāo)記是一個塊狀的容器，其默認的狀態(tài)就是占據(jù)整個一行。<span>標(biāo)記是一個行內(nèi)的容器，其默認狀態(tài)是行內(nèi)的一部分，占據(jù)行的長短由內(nèi)容的多少來決定需要注意的是div并不是層，以前說的層是指通過CSS設(shè)置成了絕對定位屬性的div元素，但實際上也可以對其他任何標(biāo)記的元素設(shè)置成絕對定位，此時其他標(biāo)記也成了層，因此層并不對應(yīng)于任何html標(biāo)記，所以DreamweaverCS3去掉了層這一概念，將這些設(shè)置成了絕對定位元素的標(biāo)記統(tǒng)稱為AP（AbsolutePosition）元素表格標(biāo)記<table>、<tr>、<td><th>、<tbody>、<caption>表格標(biāo)記表格的主要作用：網(wǎng)頁布局因為表格可以固定文本或圖像的顯示位置，還可以使用多重表格，并可以設(shè)置前景色和背景色網(wǎng)頁中的表格是由<table>標(biāo)記定義的，一個表格被分成許多行<tr>，每行又被分成許多個單元格<td>，因此<table>、<tr>、<td>是表格中三個最基本的標(biāo)記，必須一起出現(xiàn)。表格中的單元格能容納網(wǎng)頁中的任何元素，如圖像，文本，列表，表單，表格等。The elements that make up the basicstructure of a table下面這段代碼在瀏覽器中如何顯示<tableborder="1"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>表格標(biāo)記<table>的常見屬性table的屬性含義border表格邊框的寬度bordercolor表格邊框的顏色，若不設(shè)置，將顯示立體邊框效果bordercolordarkbordercolorlight設(shè)置邊框暗部分和明亮部分效果，IE才支持這兩個屬性bgcolor表格的背景色background表格的背景圖像cellspacing表格的間距cellpadding表格的填充width，heightalign表格的寬和高，可以使用象素或百分比做單位，align是水平對齊屬性設(shè)置表格邊框為20象素的效果<tableborder="20"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>設(shè)置表格邊框為0<tableborder="0"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>可見：設(shè)置表格邊框為0時，會使單元格邊框也變?yōu)?象素，而設(shè)置表格邊框為其他數(shù)值時，不會影響單元格邊框的寬再設(shè)置邊框顏色為青色<tableborder="20"bordercolor="#0099FF"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>Firefox效果IE效果再設(shè)置背景顏色為玫瑰色<tableborder="20"bgcolor="#9933CC"

bordercolor="#0099FF"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>設(shè)置間距為10，取消背景色<tableborder="20"

cellspacing="10"

bordercolor="#0099FF"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>總結(jié):間距cellspacing的作用再設(shè)置填充為10<tableborder="20"cellspacing="10"cellpadding="10"

bordercolor="#0099FF"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>總結(jié)：填充cellpadding的作用表格的rules屬性rules屬性：可實現(xiàn)只顯示表格的行邊框或列邊框，取值為rows時只顯示行邊框，取值為cols時只顯示列邊框，如：<tablerules="rows"width="200"border="1"cellpadding="0"cellspacing="2">單元格標(biāo)記<td>的常見屬性td的屬性含義bordercolor單元格邊框的顏色，該屬性僅IE支持bgcolor單元格的背景色background單元格的背景圖像align/valign單元格里的內(nèi)容的水平或垂直對齊方式colspan/rowspan合并同一列相鄰的幾個單元格/合并同一行的幾個單元格width，height單元格的寬和高，可以使用象素或百分比做單位注意：單元格td無border屬性，因此無法設(shè)置單元格邊框的寬度，單元格邊框?qū)挾戎荒苁?或0設(shè)置第一個單元格邊框為紅色<tableborder="20"align="center"cellpadding="10"cellspacing="10"bordercolor="#0099FF"> <tr> <tdbordercolor="#FF0000">row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>IE的顯示Firefox的顯示設(shè)置第一行單元格背景色為藍色<tr> <tdbgcolor="#99CCFF">row1,cell1</td> <tdbgcolor="#99CCFF">row1,cell2</td></tr>等價于：<tr

bgcolor="#99CCFF"> <td>row1,cell1</td> <td>row1,cell2</td></tr>

設(shè)置所有單元格背景色為藍色<tr> <tdbgcolor="#99CCFF">row1,cell1</td> <tdbgcolor="#99CCFF">row1,cell2</td></tr><tr> <tdbgcolor="#99CCFF">row1,cell1</td> <tdbgcolor="#99CCFF">row1,cell2</td></tr>等價于<tbody

bgcolor="#99CCFF"><tr>…</tr><tr>…</tr></tbody>再設(shè)置表格的背景色為紅色再設(shè)置表格的邊框border為0實現(xiàn)1象素邊框表格此時將表格的間距cellspacing設(shè)為1，即實現(xiàn)1象素邊框表格，其原理是通過把表格的背景色和（所有單元格的背景色）調(diào)整成不同的顏色，使間距看起來象一個邊框一樣所有單元格的背景色設(shè)為同一顏色后，我們也稱為表格的前景色用CSS屬性border-collapse做1象素邊框的表格在默認情況下表格邊框和單元格邊框是不疊加的，此時表格的邊框和單元格的邊框緊挨在一起，所以邊框的寬度為1＋1＝2象素，這是border-collapse屬性的默認值為separate，即不重疊時的情況。當(dāng)我們把border-collapse屬性值設(shè)為collapse（重疊）時，表格邊框和單元格邊框?qū)l(fā)生重疊，則邊框的寬度為1象素。border-collapse:collapse;<tableborder="1"bordercolor="#FF0000"style="border-collapse:collapse;">雙細線邊框表格的原理將表格的邊框顏色bordercolor屬性設(shè)置為某種顏色，則表格的暗邊框和亮邊框會變?yōu)橥环N顏色，表格的邊框立體效果消失，（在IE中單元格邊框的顏色也會跟著改變，而Firefox中單元格邊框顏色不會改變）此時表格的邊框和單元格的邊框都為1象素，只要間距cellspacing不設(shè)為0，則兩組邊框不會重合，顯示為雙細線邊框表格。雙細線邊框表格的實現(xiàn)<tableborder="1"cellpadding="10"cellspacing="2"bordercolor="#0099FF"> <tr

bgcolor="#99CCFF"> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr></table>IE的顯示例2下面的表格是如何實現(xiàn)的用間距做的邊框，但并沒有把表格的邊框border設(shè)為0，而是設(shè)為1，白色。因此在紅色“邊框”的外面還有1象素白色的邊框，單元格外也有1象素的白色邊框單元格內(nèi)容的對齊屬性align/valignalign屬性可以讓單元格中的內(nèi)容是水平居中或左右對齊，默認是左對齊valign屬性是垂直對齊屬性，可以讓內(nèi)容在垂直方向?qū)R，默認是垂直居中對齊單元格的合并屬性（colspan、rowspan）單元格的合并屬性是td標(biāo)記特有的兩個屬性，分別是跨多列屬性colspan和跨多行屬性rowspan，它們用于合并列或合并單元格。如：<tdcolspan="3">單元格內(nèi)容</td>表示該單元格是由3列（3個并排的單元格）合并而成，它將使該行<tr>標(biāo)記中減少兩個<td>標(biāo)記。<tdrowspan="3">單元格內(nèi)容</td>表示該單元格由3行（3個上下排列的單元格）合并而成，它將使該行下的兩行，兩個<tr>標(biāo)記中分別減少一個<td>標(biāo)記。注意：colspan和rowspan屬性也可以在一個單元格<td>標(biāo)記中同時出現(xiàn)，如：<tdcolspan="3"rowspan="3"> </td> <!--同時合并了三行三列的9個單元格-->標(biāo)題單元格<th>標(biāo)記標(biāo)題單元格標(biāo)記<th>相當(dāng)于一個單元格內(nèi)字體以粗體居中顯示的<td>標(biāo)記表格標(biāo)題標(biāo)記<caption>標(biāo)題標(biāo)記<caption>的常用屬性有align、valign（valign表示標(biāo)題在表格的上部或下部，值為bottom|top）<tbody>……</tbody>標(biāo)記瀏覽器默認是將整個表格的代碼下載完再顯示整個表格，如果想讓瀏覽器分行下載，即下載一行顯示一行，可以在所有行標(biāo)記外加上<tbody>標(biāo)記，這個對表格中內(nèi)容很多時比較實用。有時如果要把所有單元格的背景色設(shè)置成同一種顏色，可以設(shè)置tbody的背景色，這樣就不必為每個單元格都添加一條bgcolor屬性，可節(jié)省很多代碼普通表格與布局表格的區(qū)別在布局模式下繪制的布局表格是特殊設(shè)置了的普通表格，布局表格將border、cellpadding、cellspacing三個屬性都設(shè)置為了0，因此我們看不到它的邊框，布局單元格將valign屬性設(shè)置為top，因此往布局單元格中插入內(nèi)容默認都是往單元格最頂端排列的。實驗：用普通標(biāo)格和布局表格分別進行1-3-1版式布局在Dreamweaver中選中表格的方法選擇整個表格：單擊表格左上角或右邊框或底邊框或狀態(tài)條中的<table>標(biāo)簽。選擇一行或一列單元格：將鼠標(biāo)指針置于一行的左邊框上，或置于一列的頂端邊框上，當(dāng)選定箭頭出現(xiàn)時單擊，或狀態(tài)條中的<tr>標(biāo)簽（推薦）。選擇連續(xù)的幾個單元格：在一個單元格中單擊并拖動鼠標(biāo)橫向或縱向移至另一單元格。選擇不連續(xù)的幾個單元格：按住Ctrl鍵，單擊欲選定的單元格、行或列。選擇單元格中的網(wǎng)頁元素：點擊單元格中的網(wǎng)頁元素。DW在表格中插入行或列的方法當(dāng)光標(biāo)位于表格內(nèi)時，按右鍵在彈出菜單中選擇“表格——插入行（或插入列）”可在表格的當(dāng)前行的上方插入一行，或當(dāng)前行的左邊插入一列，若要在表格的最右邊插入一列或最下方插入一行，可選擇“表格——插入行或列…”，在所選列之后或所選行之下插入列或行。插入行也可以在代碼視圖中復(fù)制一行的代碼“<tr>……</tr>”再粘貼幾次就插入幾行，插入列則在代碼視圖中不好進行。制作固定寬度的表格如果我們不定義表格中每個單元格的寬度，當(dāng)向單元格中插入網(wǎng)頁元素時，表格往往會變形，要制作固定寬度的表格，通常有兩種方法：①定義所有列的寬度，但不定義整個表格的寬度，整個表格的實際寬度為：所有列的寬度和+邊框?qū)挾群?間距和+填充和，這時候，只要單元格內(nèi)的內(nèi)容不超過的單元格的寬度時，表格不會變形。②定義整個表格的寬，如500像素、98%等，再留一列的寬度不定義，未定義的這一列的

溫馨提示

  • 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)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論