網(wǎng)設(shè)計(jì)與制作代碼介紹_第1頁(yè)
網(wǎng)設(shè)計(jì)與制作代碼介紹_第2頁(yè)
網(wǎng)設(shè)計(jì)與制作代碼介紹_第3頁(yè)
網(wǎng)設(shè)計(jì)與制作代碼介紹_第4頁(yè)
網(wǎng)設(shè)計(jì)與制作代碼介紹_第5頁(yè)
已閱讀5頁(yè)，還剩3頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

1、網(wǎng)頁(yè)設(shè)計(jì)與制作一、HTM逗本語(yǔ)言:1 .HTM小本語(yǔ)法：（如圖）HTML基本語(yǔ)言:<.hbnl><.title>網(wǎng)頁(yè)的標(biāo)題<body>網(wǎng)貢正文</dodv>f<html>.</html>:表示HTML文檔的開始和結(jié)束<head>,</head>:表示HTM戊檔的頭部。最常用的標(biāo)記是<title>,</title>,<title>標(biāo)記中的內(nèi)容對(duì)應(yīng)瀏覽窗口標(biāo)題的信息。<body>,</dody>：<body>標(biāo)記之內(nèi)的內(nèi)容對(duì)應(yīng)的是瀏

2、覽器中的內(nèi)容。2 .<body>標(biāo)記的使用：（如圖）body顏色"Ba匚kgisind="圖像文件的名字及路徑"Text="顏色0L網(wǎng)頁(yè)正文</dody>Bgcolor="顏色"：設(shè)置頁(yè)面背景色。Background="圖像文件的名字及路徑"：設(shè)置背景文件。Text="顏色"：設(shè)置頁(yè)面文字默認(rèn)顏色。標(biāo)記屬性用來(lái)對(duì)標(biāo)記之間的內(nèi)容修飾，標(biāo)記其屬性必須放到“<>”中，各屬性間必須用空格隔開。色彩的表示方法有兩各種：1.RGB模式，用16進(jìn)制白紅（Red）、綠（Gre

3、en）、藍(lán)（Blue）的值來(lái)表示，格式為“#RRGGBB字符包括數(shù)字09和字母AF,如紅色為“#FF0000”2.用英文單詞表示彩色，如紅色“red”。二、常用的HTMIB記及其屬性制作網(wǎng)頁(yè)：1.頁(yè)面屬性、排版標(biāo)志.標(biāo)題標(biāo)記：格式：<h#>.<h#>,其中“#”的取值范國(guó)為1（字體最大）6（字體最?。┳饔茫涸O(shè)置文檔的各級(jí)標(biāo)題。常見屬性：align,用于定義標(biāo)題的對(duì)齊方式，默認(rèn)為左對(duì)齊，.以下標(biāo)記都出現(xiàn)在<body>中出現(xiàn)，標(biāo)記必須以成對(duì)出現(xiàn)，如<body>.</dody>.標(biāo)題標(biāo)記屬性：（如表）值表小的對(duì)方試示例left左對(duì)齊<

4、h1align="left">文字內(nèi)容<h1>right右對(duì)齊<h1align="right">文子內(nèi)谷<h1>center居中對(duì)齊<h1align="center">文字內(nèi)容<h1>,版面格式標(biāo)記.分段與換行：（如表）標(biāo)記名稱格式作用段落標(biāo)記<p>.</p>或者<p>使標(biāo)記后面的內(nèi)容另起一段。常用屬性：align,用于定義段落的對(duì)齊方式，與標(biāo)題標(biāo)記類似換行標(biāo)記.<br>使標(biāo)記后面的文字內(nèi)容換行顯示.文本對(duì)齊標(biāo)記可以在&l

5、t;p>標(biāo)記中使用align屬性指定文本對(duì)齊方式。另外，居中對(duì)齊可以通過(guò)居中對(duì)齊方式進(jìn)行設(shè)置。格式：<center><center>作用：使標(biāo)記間的內(nèi)容以居中對(duì)齊方式顯示。 .水平線標(biāo)記格式：<hr>作用：在文檔中插入水平線。常用水平線標(biāo)記屬性：（如表）屬性名稱屬性含義示例align定義水平線的對(duì)齊方式，默認(rèn)為“center”右對(duì)齊水平線:<hralign="right">color定義水平線的顏色綠色水平線：<hrcolor="green">noshade定義水平線為無(wú)陰影無(wú)陰影水平線：

6、<hrnoshadecolor="green">size定義水平線的寬度，單位默認(rèn)為像素寬度為4像素的水平線:<hrsize="4">width定義水平線的長(zhǎng)度，單位為像素或百分比占貝囿寬度80%的水平線：<hr（相于貝向?qū)挾龋﹚idth="80%”> .字體標(biāo)記格式：<font>i</font>作用：設(shè)置標(biāo)記間文體的字體、大小、顏色等。常用字體標(biāo)記屬性：（如表）屬性名稱屬性含義示例face設(shè)置標(biāo)記間文本的字體<fontface="隸書”>文子內(nèi)谷</fon

7、t>size設(shè)置標(biāo)記間文本的大小，取值范圍為17<fontsize="2">文子內(nèi)谷</font>color設(shè)置標(biāo)記間文本的顏色<fontcolor="red">文字內(nèi)容</font>title設(shè)置鼠標(biāo)指向文本時(shí)，出現(xiàn)的提示信息<fonttitle="信息”>文子內(nèi)谷</font> .字體修飾標(biāo)記作用：設(shè)置標(biāo)記間文本的樣式，如粗體、斜體、下劃線等。字體修飾標(biāo)記（如表）功能格式粗體<b>.</b>或者<strong>.</str

8、ong>斜體<i>.</i>下劃線<u>.</u>上標(biāo)<sup>.</sup>下標(biāo)<sub>.<sub>刪除線<s>.</s>或者<strike>.</strike>大字體<big>.</big>小字體<small>.</small>.特殊字符作用：在頁(yè)面上顯示特殊符號(hào)。特殊字符（如表）字符名稱顯小結(jié)果&nbsp;空格&lt;<（小于號(hào)）&gt;>(±T

9、#)&quot;"（雙引號(hào)）&copy;?&reg;?&times;x（乘號(hào)）項(xiàng)目符號(hào)標(biāo)記<ul><第一項(xiàng)</li>O第二項(xiàng)O<Aa第三項(xiàng)</li></ul>作用：在HTML頁(yè)面中，合理地使用列表標(biāo)記，可以起提綱和格式排序文作用。列表分為無(wú)序列表和有序列表兩類無(wú)序列表的主要標(biāo)記為<ul>和<li>.作用：生成沒有編號(hào)的列表，每一個(gè)列表前使用<li>標(biāo)簽區(qū)分。（格式如右）<ul>標(biāo)記的主要屬性為type（如表）值代表disc實(shí)心加點(diǎn)（默認(rèn)）circ

10、le空心圓square實(shí)心小方塊。注意：項(xiàng)目符號(hào)標(biāo)記在網(wǎng)頁(yè)中的應(yīng)用比較廣泛，它能清楚地標(biāo)注文本的層次結(jié)構(gòu)，使用戶瀏覽網(wǎng)頁(yè)時(shí)能對(duì)該網(wǎng)頁(yè)的架構(gòu)一目了然。其中，項(xiàng)目符號(hào)標(biāo)記使用<Ul>-Y/ul>時(shí)，必須是成對(duì)出現(xiàn)的，并且其中，項(xiàng)目插入多對(duì)<li>-<li>列表項(xiàng)標(biāo)記組成完整的列表。例:<head>“山標(biāo)記的主要屬性為typeC/ti%)</head><body><ul><li>默認(rèn)的無(wú)序列表加,實(shí)心</ii></ul><ultype=1square">

11、<li無(wú)序歹"表squam加方塊</ul><山type="ciycfe，<li>無(wú)序列表circle加"空心圓“</li></ul></body>結(jié)果圖為:2.超鏈接標(biāo)記格式：<a>.</a>作用：把當(dāng)前位置的文本或圖像連接到其他的頁(yè)面、文本或圖像。常用超鏈接標(biāo)記屬性（如表）屬性名稱屬性含義示例href指定鏈接的目標(biāo)地址，可以是站內(nèi)的文件，也可以某個(gè)網(wǎng)站<ahref="a.html">.</a><ahref="

12、">.<a>target指定鏈接的目標(biāo)窗口，其值是一個(gè)窗口的名稱，也可以是_blank、_parent、_self、_top,默認(rèn)為_self<ahref="a.html"target="_blank".</a>title鼠標(biāo)指向鏈接時(shí)，所顯示的信息<ahref="a.html"title="信息".</a>target屬性target取值作用_blank在新窗口中打開_parent在上一級(jí)窗口中打開_self在當(dāng)前窗口中打開，此項(xiàng)為默認(rèn)值_top在瀏

13、覽器的整個(gè)窗口中打開，忽略任何框架絕對(duì)路徑與相對(duì)路徑：在網(wǎng)頁(yè)文檔中引用一個(gè)文件時(shí)，需要給出該文件的路徑，這個(gè)可以是網(wǎng)絡(luò)資源，也可以是本地計(jì)算機(jī)上的文件資源。HTML有兩種路徑：絕對(duì)路徑與相對(duì)路徑。1 .絕對(duì)路徑：從協(xié)議開始的URL地址或從驅(qū)動(dòng)名稱開始的本地文件路徑都稱為絕對(duì)路徑。如http:或d:11.html2 .相對(duì)路徑：從文件存儲(chǔ)位置開始的路徑叫相對(duì)路徑。在描述相對(duì)路徑時(shí)，需要注意：.如果源文件和引用的文件在同一級(jí)目錄里，直接寫引用文件名即可。“././”表示源文件所在目錄的上上級(jí)目錄，以此.“./”表示源文件所在目錄的上一級(jí),類推。.引用下級(jí)的文件，直接寫下級(jí)目錄文件的路徑即可。例如，

14、站點(diǎn)文件夾中有主頁(yè)文件index.html和圖像文件夾imagesjndex.html文件中使用了images文件夾中的01.jpg圖像文件,那么圖像01.jpg相對(duì)于index.html的相對(duì)路徑就是imges01.jpg3 .圖像標(biāo)記格式：<img>作用：在頁(yè)面中插入圖像或視頻文件，圖像格式可以是：GIF、JPG、PNG。常用圖像標(biāo)記屬性（如表）屬性名稱屬性含義示例src指定插入圖像名稱或路徑<imgsrc="a.gif">或者<imgsrc="imagesa.gif">alt替換文本，當(dāng)瀏覽器不能顯示圖像時(shí)、在鼠

15、標(biāo)指向圖像時(shí)、或圖像加載時(shí)間過(guò)長(zhǎng)時(shí)，所要顯示的文本使標(biāo)記后面的文字進(jìn)行換行顯示width指定圖像寬度，單位是像素<imgsrc="imagesa.gif"width="100"height="200">height指定圖像高度，單位是像素border指定圖像邊框，默認(rèn)為0hspace指7E圖像左右兩側(cè)與其他對(duì)象（如文本）之間的距離，單位為對(duì)象<imgsrc="imagesa.gif"hspace="30"vspace="20"vspace指定圖像上卜兩端與其

16、他對(duì)象（如文本）之間的距離，單位為像素align指定圖像與文本的對(duì)齊方式，取值有：top、middle>bottom>left、right。當(dāng)取值為left、right時(shí)，可以實(shí)現(xiàn)圖像文字左右繞排的效果<imgsrc="imagesa.jpg"align="left">4 .表格標(biāo)記表格的幾種標(biāo)記作用表格是最基本的網(wǎng)頁(yè)布局的技術(shù)表格的主要標(biāo)記（如表）標(biāo)記描述<table>.</table>表示整個(gè)表格的開始、結(jié)束<caption>.</caption>用來(lái)設(shè)置整個(gè)表格的名稱，表格中可

17、不用此標(biāo)記<tr>.</tr>代表表格中一行<td>.<td>代表單個(gè)普通的單元格，此標(biāo)記必須放在一對(duì)tr標(biāo)記內(nèi)<th>.</th>用于定義表頭單兀格，單兀格中的文字將以粗體顯示，此標(biāo)簽必須放在一對(duì)tr標(biāo)記內(nèi)，在表格中也可以不用此標(biāo)記格式（如圖）tableCuptku】表格標(biāo)題4Kutiontr7心第一列標(biāo)施/期用）第一標(biāo)題/frirMtdA第一行的第一個(gè)單元揩仃td）強(qiáng)第二行的第二個(gè)畢元搭。時(shí)/&table標(biāo)記的主要屬性（如表）屬性名稱屬性含義border表格邊框的寬度（以像素為單位）；若不設(shè)置此屬性，則邊框的寬

18、度默認(rèn)為0,即不顯示邊框bordercolor表格邊框顏色background設(shè)置表格的背景圖像bgcolor設(shè)置表格的背景顏色width表格寬度；其值可用像素表示，也可用占窗口的百分比表示height表格高度；其值可用像素表示，也可用占窗口的百分比表示align表格在貝囿的水平位置；取值為：left、right、center;默認(rèn)為在對(duì)齊cellspacing單兀格之間的間距；其值可用像素來(lái)表示cellpadding單兀格內(nèi)容與單兀格邊界之間的距離；其值可用像素來(lái)表示tr標(biāo)記屬性屬性名稱屬性含義align行內(nèi)谷的水平對(duì)齊方式；取值為：left、right、center；默認(rèn)為左對(duì)齊valig

19、n仃內(nèi)谷的垂垂苴對(duì)齊方式；取值為：top、middlebottom;默認(rèn)為局中對(duì)齊height行高；其值可用像素或表格高度百分比表示title鼠標(biāo)指向該行時(shí)，顯示的指示信息bgcolor行的背景顏色bordercolor行的邊框顏色nowrap本行所有單兀格內(nèi)容小能自動(dòng)換行td和th標(biāo)記主要屬性屬性名稱屬性含義align單兀格內(nèi)谷的水平對(duì)齊方式；取值為：left、right、center；默認(rèn)為左對(duì)齊（右與懺標(biāo)簽的屬性沖突時(shí)，以單元格自身的設(shè)置為主valign單兀格內(nèi)谷的垂直對(duì)齊方式；取值為：top、middlebottom;默認(rèn)為垂直居中（若與tr標(biāo)簽的屬性沖突時(shí)，以單元格自身的設(shè)置為主）（

20、續(xù)表）屬性名稱屬性含義width單兀格的寬度，可用像素值或表格寬度的百分比來(lái)表示height單兀格的高度，可用像素值或表格高度的百分比來(lái)表示bgcolor單兀格的背景顏色bordercolor單元格的邊框顏色nowrap單兀格內(nèi)容小能自動(dòng)換行rowspan單元格所占的行數(shù)colspan單元格據(jù)占的列數(shù)合并單元格若需要建立不規(guī)則表格，就要用到<td>標(biāo)記的rowspan屬性和colspan屬性來(lái)合并單元格。如實(shí)現(xiàn)下圖到下圖的轉(zhuǎn)化。原始表格合并單元格后的表格進(jìn)行單元格合并時(shí)，需要遵循如下幾條原則：.整個(gè)表格中，每行的列數(shù)要相同。.若某個(gè)單元格中，設(shè)置了屬性colspan="2

21、",表示該單元格在橫向占據(jù)了兩個(gè)單元格的位置，所以，在當(dāng)前行<tr>中，就需要少寫一個(gè)<tr>標(biāo)簽（如B3單元格）.依此類推，若設(shè)置了屬性colspan="3",當(dāng)前行<tr>中，就需要少寫兩個(gè)<td>標(biāo)簽（如C2單元格）。.若某個(gè)單元格中，設(shè)置了屬性rowspan="2",表示該單元格在縱向占據(jù)了兩個(gè)單元格的位置，所以，在下一個(gè)<tr>中，該列處就需要少寫一個(gè)<td>標(biāo)簽（如A2單元格）。若設(shè)置了屬性rowspan="3"在下兩行<tr>中

22、，該列處都需要少一個(gè)<td>s標(biāo)簽，依此類推。合并后的表格代碼為：VtabA:bonier=Firr><tr><td">A2</td><td>A3</td><td>A4</td></tr><tr></td><tdcolspan="2</tr><tr><rdcolspan=3“>C2</td></tr></table>5框架標(biāo)記框架的主要標(biāo)記有：<frameset>和<frame>,分別表示整個(gè)框架和單個(gè)框架?？蚣芗瘶?biāo)記<frameset>的幾種常用屬性有cols、rows、frameborder.cols:創(chuàng)建縱向分割框架時(shí)，通過(guò)該屬性指定各框架的列寬，取值可以是“像素”和“”,分割左右窗口，用“*”表示剩余部分。rows:創(chuàng)建

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論