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

下載本文檔

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

文檔簡介

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

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

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

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

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

6、<hrnoshadecolor="green">size定義水平線的寬度，單位默認(rèn)為像素寬度為4像素的水平線:<hrsize="4">width定義水平線的長度，單位為像素或百分比占貝囿寬度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)指向文本時，出現(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>.特殊字符作用：在頁面上顯示特殊符號。特殊字符（如表）字符名稱顯小結(jié)果&nbsp;空格&lt;<（小于號）&gt;>(±T

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

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

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

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

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

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

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

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

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

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

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

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

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

22、，該列處都需要少一個<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>,分別表示整個框架和單個框架?？蚣芗瘶?biāo)記<frameset>的幾種常用屬性有cols、rows、frameborder.cols:創(chuàng)建縱向分割框架時，通過該屬性指定各框架的列寬，取值可以是“像素”和“”,分割左右窗口，用“*”表示剩余部分。rows:創(chuàng)建

溫馨提示

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

評論

0/150

提交評論