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

下載本文檔

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

文檔簡介

1、網(wǎng)頁設(shè)計第一章： html基本結(jié)構(gòu)主要內(nèi)容：學(xué)習(xí)網(wǎng)頁設(shè)計有什么用 網(wǎng)頁設(shè)計師的學(xué)習(xí)流程 本門課程主要學(xué)習(xí)哪些知識，解決什么問題，不能解決什么問題 html的基本結(jié)構(gòu)和常用標(biāo)記1. 導(dǎo)課網(wǎng)絡(luò)行業(yè)發(fā)展網(wǎng)絡(luò)賺錢網(wǎng)頁制作html css javascript asp php photoshop 網(wǎng)頁三劍客等等2. html的基本結(jié)構(gòu) <html> -根控制標(biāo)記<head> -頭控制標(biāo)記<title>標(biāo)題</title> -標(biāo)題標(biāo)記</head> -頭控制標(biāo)記（尾）<body>-網(wǎng)頁顯示區(qū)域</body></htm

2、l> -根控制標(biāo)記(尾)解釋：(1).<html></html>根控制標(biāo)記開頭和結(jié)尾成對出現(xiàn)，雙標(biāo)簽(2).<head></head>頭控制標(biāo)記(3).<title></title>設(shè)置瀏覽器的視窗標(biāo)題(4).<body></body>頁面可見內(nèi)容 3 HTML 控制標(biāo)記的格式(1).<標(biāo)記名稱>單一型,無設(shè)置值的。如：<br>(2).<標(biāo)記名稱屬性=”屬性值”>單一型，有設(shè)置值的。如：<hr width=”80%”>(3).<標(biāo)記名稱&g

3、t;</標(biāo)記名稱>對稱型，無設(shè)置值。如：<title></title>(4).<標(biāo)記名稱屬性=”屬性值”></標(biāo)記名稱>對稱型，有設(shè)置值。如：<body bgcolor=”red”></body><font size= ”7”></font>4. 最常用的控制標(biāo)記(1).跳行<br>格式：<br>無屬性設(shè)置(2).段落<p>格式：<p align=”排列方式”></p>屬性名稱屬性值說明align left 往左靠（默認(rèn)）cen

4、ter 往中靠right 往右靠(3).水平直線<hr>格式：<hr>屬性名稱屬性值說明size 像素絕對設(shè)置，以數(shù)字表示，屬性值越大，線越粗百分比相對設(shè)置，以%表示，屬性值越大，線越粗width 像素絕對設(shè)置，長度不會應(yīng)視窗的改變而改變百分比相對設(shè)置，長度會隨著視窗寬度而改變noshade 實體線 (4).向中對齊<center> (被廢棄的標(biāo)簽)格式：<center></center>(5).背景色與文字設(shè)置格式：<body bgcolor=”背景色” text=”文字顏色”>整體頁面的邊距，行距<body le

5、ftmargin=”像素” topmargin=”像素”>(6).標(biāo)題文字設(shè)置格式：<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>屬性名稱屬性值說明align left 靠左center 靠中right 靠右(7).特殊字符設(shè)置格式：< lt;> gt;& amp;“ quot;(8).在HTML 備注格式：<!->(9).實體字符控制標(biāo)記1.<b

6、></b> 粗2.<i></i> 斜3.<s></s> 刪4.<u></u> 下劃5.<tt></tt> 電報6.<sub></sub> 下標(biāo)7.<sup></sup> 上標(biāo)(10).語意字符控制1.<address></address> 地址2.<big></big> 大字3.<del></del> 刪除主講：李炎恢第4頁共4頁PHP100 視頻教程4.<

7、ins>.</ins> 修改5.<samll></small> 小字6.<strong></strong> 加強語氣(加粗)7.<em>.</em> 加強語氣(傾斜)(11).<font>字體控制(被廢棄的標(biāo)簽)格式：<font></font>屬性名稱屬性值說明size 0-7 字體大小color 英文或十六顏色face 字體字體(12).格式化格式：<pre></pre>讓書寫的文字格式化！(13).引用文本格式：<blockquote&

8、gt;.</blockquote>屬性名稱屬性值說明cite url 被引用的地址3.1 無序號條例式清單<ul>與<li>格式:<ul><li></li><li></li><li></li><li></li></ul>功能: <ul>無序條列清單的開始.</ul>表示結(jié)束.<li></li>表示一個項目.<li>的屬性屬性名稱屬性值說明type dise 實心圓(默認(rèn)值)circ

9、le 空心圓square 實心方塊3.2 有序號條例式清單<ol>與<li>格式:<ol><li></li><li></li><li></li><li></li></ol>功能: <ol>有序條列清單的開始.</ol>表示結(jié)束.<li></li>表示一個項目.<ol>的屬性屬性名稱屬性值說明type 1 表示以1,2,3,4 來表示a 表示以a,b,c,d 來表示A 表示以A,B,C,D 來表

10、示i 表示以i,ii ,iii 來表示I 表示以I,II,III 來表示3.3 無序列表和有序列表的結(jié)合應(yīng)用格式:<ul><li>.<ol><li></li><li></li><li></li></ol></li><li>.<ol><li></li><li></li><li></li></ol></li></ul>3.4 敘述式清單(

11、定義列表)格式:<dl><dt></dt><dd></dd><dd></dd><dd></dd><dt></dt><dd></dd><dd></dd><dd></dd></dl>功能: <dl>敘述清單的開始<dt>表示一個項目<dd>表示一個項目下的更詳細的內(nèi)容第4 章表格1.表格的基本格式2.<table>標(biāo)簽下的常用屬性3.&l

12、t;table>標(biāo)簽下的邊框設(shè)置4.<tr><th><td>標(biāo)簽下的常用屬性5.拆分與合并單元格6.表格的結(jié)構(gòu)化、直列化、標(biāo)題7.表格的嵌套在網(wǎng)頁中表格是一種經(jīng)常使用到得設(shè)計結(jié)構(gòu)，就像表格的內(nèi)容中可以包含任何的數(shù)據(jù)，如文字、圖像、表單、超鏈接、表格等等，所有在HTML 中可以使用的數(shù)據(jù)，都可以被設(shè)置在表格中，所以有關(guān)表格設(shè)置的標(biāo)記與屬性頁特別多。4.1 表格的基本格式格式:<table><tr><th> </th><th> </th><th> </th>&l

13、t;/tr><tr><td> </td><td> </td><td> </td></tr></table>功能: <table></table>用來聲明表格開始與結(jié)束.<tr></tr>用來設(shè)置表格的行.<th></th>用來設(shè)置標(biāo)題欄位.<td></td>用來設(shè)置數(shù)據(jù)欄位.4.2 <table>標(biāo)簽下的屬性屬性名稱屬性值說明border 像素設(shè)置表格的邊線cellspaci

14、ng 像素絕對設(shè)置,存儲格框線寬度百分比相對設(shè)置,存儲格框線寬度cellpadding 像素絕對設(shè)置,數(shù)據(jù)與框線的距離百分比相對設(shè)置,數(shù)據(jù)與框線的距離width 像素絕對設(shè)置,像素表示表格寬度百分比相對設(shè)置,百分比表表格寬度height 像素絕對設(shè)置,像素表示表格寬度百分比絕對設(shè)置,百分比表表格寬度align left 表格往左靠(默認(rèn))center 表格往中靠right 表格網(wǎng)右靠bgcolor 英文/十六表格的背景顏色background URL 表格的背景圖片summary 字符串用來描述表格數(shù)據(jù)說明bordercolor 英文/十六邊框的顏色bordercolorlight 同上邊框的

15、亮色bordercolordark 同上邊框的暗色4.3 <table>標(biāo)簽下的邊框設(shè)置屬性名稱屬性值說明frame void 不要顯現(xiàn)表格的邊線above 只要顯現(xiàn)出表格的上邊線below 只顯現(xiàn)出表格的下邊線hsides 只顯示表格的上下邊線vsides 只顯現(xiàn)表格的左右邊線lhs 只顯現(xiàn)表格的左邊線rhs 只顯現(xiàn)表格的右邊線border/box 會顯現(xiàn)出表格的所有邊線rules rows 只顯示出橫行的格框線cols 只顯示出直行的格框線all 顯示全部格框線groups 表示列組合水平部分none 不顯示任何格框線4.4 <tr><th><td

16、>標(biāo)簽下的常用屬性該屬性必須在border的屬性值不為0 的狀態(tài)下!屬性名稱屬性值說明width 像素絕對設(shè)置,以像素值設(shè)置寬百分比相對設(shè)置,以百分比設(shè)置寬height 像素絕對設(shè)置,以像素值設(shè)置高百分比相對設(shè)置,以百分比設(shè)置寬bgcolor 英文/十六數(shù)據(jù)欄的顏色設(shè)置align(水平方向) left 數(shù)據(jù)靠左center 數(shù)據(jù)靠中right 數(shù)據(jù)靠右valign(垂直方向) top 數(shù)據(jù)靠上middle 數(shù)據(jù)靠中bottom 數(shù)據(jù)靠下nowrap 無在單元格中換行4.5 拆分與合并單元格屬性名稱屬性值說明colspan 數(shù)字向兩邊擴展欄位rowspan 數(shù)字向下擴展欄位4.6 表格的結(jié)

17、構(gòu)化、直列化、標(biāo)題(1).結(jié)構(gòu)化格式：<table><thead></thead> -表頭區(qū)<tbody></tbody> -表體區(qū)<tfoot></tfoot> -表尾區(qū)</table>(2).直列化格式：<colgroup>.</colgroup>屬性名稱屬性值說明align left 靠左center 靠中right 靠右valign top 靠上middle 靠中bottom 靠下span 數(shù)字直列數(shù)目width 像素/百分比寬度個別直列設(shè)置格式:<col>

18、;功能完全和<colgroup>一樣.(3).表格的標(biāo)題：<table><caption>.</caption></table><caption>下的屬性值有:屬性名稱屬性值說明align top 標(biāo)題在表格上方bottom 標(biāo)題在表格下方4.7 嵌套表格的應(yīng)用: 看實例.第5 章圖像1.背景圖案的設(shè)置2.將圖片插入到網(wǎng)頁中去3.用圖像作為超鏈接4.使用工具建立地圖索引5.切片索引5.1 背景圖案的設(shè)置格式：<body background=”URL”>5.2 將圖片插入到網(wǎng)頁中去格式:<img src=

19、"URL">功能:將圖片插入到網(wǎng)頁中去,單一標(biāo)簽<img>下的屬性屬性名稱屬性值說明src URL 圖片的路徑圖片的注解屬性名稱屬性值說明alt 字符串給圖片做注解圖象大小的設(shè)置屬性名稱屬性值說明width 像素絕對設(shè)置,寬百分比相對設(shè)置,寬height 像素絕對設(shè)置,高百分比相對設(shè)置,高圖象邊框的設(shè)置屬性名稱屬性值說明border 數(shù)字圖象邊框文字圖象的排列屬性名稱屬性值說明align left 圖象靠左,文字靠右right 圖片靠右,文字靠左top 文字往上靠middle 文字靠中bottom 文字靠下空隙的設(shè)置屬性名稱屬性值說明vspace 像素垂直

20、上下兩端與物件的距離hspace 像素水平左右兩段與物件的距離5.3 用圖像作為超鏈接格式:<a href="URL"><img src="URL"></a>注意點:邊框的問題.5.4 地圖索引格式:<map name="圖象名稱" id="圖象名稱"><area shape="選取區(qū)塊的形狀" coords="坐標(biāo)" href="URL" alt="文字說明"></ma

21、p><img src="URL" USEMAP="#圖象名稱"><map>聲明整張圖使用地圖鏈接方式進行連接.name,id指此圖的名稱.<area>表示我們所要鏈接其中一點的區(qū)快shape表示我們所選擇的形狀,如:rect矩形circle圓poly多邊形coords 表示地圖的坐標(biāo)位置!5.5 切片索引使用photoshop來進行!用表格進行定位!第6 章超鏈接1.超鏈接的基本格式2.超鏈接的種類3.相對鏈接和絕對鏈接4.書簽的鏈接5.基準(zhǔn)參考點6.超鏈接事件7.為鏈接創(chuàng)建鍵盤快捷鍵8.為鏈接設(shè)置制表符次序超鏈

22、接也叫URL 中文翻譯為資源定址器.這個定址器的功能主要告訴瀏覽器根據(jù)URL的地址找到所需的資源。6.1 超鏈接的基本格式格式:scheme:/host:post/path/filenamescheme 指的是http,ftp,file,mailto,news,gopher,telnet 七種host 指的是IP 地址或計算機名稱post 指的是服務(wù)器端口path 指的是文件路徑filename 指的是文件名<a href=scheme:/host:post/path/filename ></a>6.2 超鏈接的種類一般常用的分為四種:1. http聲明<a href=2. file聲明<a hre

溫馨提示

  • 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

提交評論