Web頁面制作基礎

上傳人：5*** IP屬地：湖北上傳時間：2023-01-15 格式：PPT 頁數(shù)：222 大?。?.37MB 積分：28 舉報 版權申訴

已閱讀5頁，還剩217頁未讀，繼續(xù)免費閱讀

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

文檔簡介

ASP動態(tài)網(wǎng)頁制作教程第3章Web頁面制作基礎

本章介紹Web頁面制作基礎，主要內(nèi)容包括HTML標記語言概述、常用的HTML標記、CSS樣式表以及最新的HTML5新增的結果元素等。通過本章的學習，讀者應了解什么是HTML和CSS樣式表，并能掌握關于文本、超鏈接、表格、表單等常用的HTML標記以及如何定義和引用CSS樣式表，并且能夠應用HTML5新增的主體元素開發(fā)Web頁面。主要內(nèi)容

HTML標記語言3.1設置文字風格3.2制作表格3.5多媒體效果3.4

建立超鏈接3.3

上機指導

3.10

小結3.9CSS3.8

構建框架3.7建立表單3.63.1HTML標記語言

在Internet上瀏覽的大部分網(wǎng)頁都是用HTML語言編寫的。HTML語言是制作網(wǎng)頁的基礎，可以說Web動態(tài)編程都是在HTML的基礎上進行的。

3.1.1什么是HTML

超文本標記語言（HypertextMarkupLanguage，HTML）是Web頁面的描述性語言，是在標準通用化標記語言（StandardGeneralizedMarkupLanguage，SGML）的基礎上建立起來的。

根據(jù)其語法規(guī)則建立起來的文本可以運行在不同的操作系統(tǒng)平臺和瀏覽器上，是所有網(wǎng)頁制作技術的核心與基礎。無論是在Web上發(fā)布信息，還是編寫可供交互的程序，都離不開HTML語言。

3.1.2HTML文件結構使用HTML語言編寫的超文本文件稱為HTML文件。可以在Windows下的文本編輯器中手工直接編寫HTML文件，也可以使用FrontPage、Dreamweaver等可視化編輯軟件編寫HTML文件。

HTML通過在文本中嵌入各種標記，使普通文本具有超文本的功能。

HTML文件的基本結構如下。

頭部信息

</HEAD><BODY>

主體內(nèi)容

</BODY></HTML>

<HTML>…</HTML>：

HTML文件的開始和結束，其中包含<HEAD>和<BODY>標記的內(nèi)容。

<HEAD>…</HEAD>：HTML文件的頭部標記，用于包含文件的基本信息。

<BODY>…</BODY>：HTML文件的主體標記，在頭部標記</HEAD>之后。它定義了HTML文件顯示的主要內(nèi)容和顯示格式。這里需要注意的是，<HEAD>與<BODY>標記是兩個獨立的部分，不能互相嵌套。

圖3-1運行HTML文件

3.1.3HTML頭部標記與主體標記任何HTML文件都包含在<HTML>和</HTML>標記之中。一個標準的HTML文件分為頭部和主體兩大部分。其中，頭部標記為<HEAD>，主體標記為<BODY>。

1．頭部標記<HEAD><HEAD>標記是頁面的第二層標記，用于提供與Web頁面有關的各種信息。

【例3-1】在<HEAD>標記內(nèi)設置頁面信息。

圖3-2頭部標記<HEAD>

2．主體標記<BODY>

在<BODY>和</BODY>中放置的是頁面展示的所有內(nèi)容。作為網(wǎng)頁的主體部分，<BODY>標記有很多的內(nèi)置屬性，通過這些屬性可以設定網(wǎng)頁的總體風格。例如，定義頁面的背景圖案、背景顏色、文字顏色、超文本鏈接顏色等。

（1）Background屬性光煥發(fā)（2）Bglolor屬性（3）Bgproperties屬性（4）Text屬性（5）Link屬性

（6）Alink屬性（7）Vlink屬性（8）Topmargin屬性（9）Leftmargin屬性

【例3-2】通過<BODY>標記定義頁面顯示風格。

圖3-3主體標記<BODY>3.2設置文字風格

文字是網(wǎng)頁的基礎部分，突出的文字內(nèi)容、合理的文字排版能夠確切地傳達出頁面的主要信息。本節(jié)介紹字體標記<FONT>、標題字標記<H>、段落標記<P>、換行標記<BR>以及注釋標記和<COMMENT>。

3.2.1定義文字字體

1．字體標記<FONT><FONT>標記可以設定文字的字體、大小和顏色。<FONT>標記的屬性包括FACE（字體）、SIZE（字號）和COLOR（顏色）。

（1）FACE屬性（2）SIZE屬性（3）COLOR屬性

【例3-3】使用<FONT>標記定義文字。

2．標題字標記<H>

標題文字是指以某幾種固定的字號顯示文字。標題標記由<H1>到<H6>，分別表示1級至6級標題，每級標題文字的字體大小依次遞減。每個標題標記所標識的文字將獨占一行且上下留一空白行。

【例3-4】使用標題字標記<H>。

圖3-4字體標記<FONT>

圖3-5使用標題字標記<H>

3.2.2文字的排版一個清晰、排版整齊的Web頁面更能反映其所包含的內(nèi)容，讓讀者一目了然。使用文字的排版標記可以使文字按照定義的規(guī)則顯示。下面介紹常用的段落標記<P>和換行標記<BR>。

1．段落標記<P>

段落是指一段格式統(tǒng)一的文本。使用段落標記<P>，將在段落之間間隔一空白行。語法：

<PALIGN="對齊方式">…</P>

【例3-5】使用<P>標記對文字進行排版。

2．換行標記<BR><BR>標記相當于一個換行符，它可以使內(nèi)容換行顯示。與<P>標記不同，使用<BR>標記后兩行之間是沒有明顯間隔的；而使用<P>標記是開始一個新的段落，段落與段落之間間隔一空白行。

【例3-6】換行顯示文字。

圖3-6使用<P>標記對文字進行排版

圖3-7換行顯示文字

3.2.3注釋標記在頁面中可以使用注釋語句來標注一行源代碼或一段源代碼的用途，這樣便于源代碼編寫者對代碼的檢查與維護，還可以使用注釋語句添加版權說明等。值得注意的是，注釋語句不會顯示在瀏覽器窗口中。在HTML文件中，使用注釋標記和<COMMENT>來書寫注釋語句。

語法：

<!>

或者

上述兩種表示方法的功能是一樣的，都可以為頁面添加注釋語句。

【例3-7】添加注釋。

圖3-8添加注釋3.3建立超鏈接

超鏈接是網(wǎng)頁中最重要的元素之一。一個網(wǎng)站是由多個頁面組成的，頁面之間根據(jù)鏈接確定相互的導航關系。單擊網(wǎng)頁上的鏈接文字或者圖像后，就可以跳轉到另一個網(wǎng)頁。每一個網(wǎng)頁都有唯一的地址，稱作統(tǒng)一資源定位符（UniformResourceLocator，URL）。

3.3.1鏈接標記<A>

在網(wǎng)頁中使用<A>標記建立超鏈接。鏈接標記<A>的屬性如下。（1）href屬性（2）target屬性表3-1 target屬性的取值屬

性

值描述_parent在上一級窗口中打開。一般使用框架頁時使用_blank在新窗口中打開_self在當前窗口中打開_top在瀏覽器的整個窗口中打開，忽略任何框架

（3）title屬性（4）name屬性

3.3.2建立內(nèi)部鏈接內(nèi)部鏈接指的是在同一個網(wǎng)站內(nèi)部，不同的HTML頁面之間的鏈接關系。即鏈接指向的是站點文件夾之內(nèi)的文件。

語法：

<ahref="鏈接文件的路徑">鏈接內(nèi)容</a>

其中，鏈接文件的路徑使用的是相對文件路徑，鏈接內(nèi)容可以是文字或者圖像等。

【例3-8】建立內(nèi)部鏈接。

圖3-9建立內(nèi)部鏈接

3.3.3建立外部鏈接外部鏈接指的是跳轉到當前網(wǎng)站外部，與其他網(wǎng)站中的頁面或者其他元素之間的鏈接關系。這種鏈接在一般情況下需要書寫絕對的鏈接地址。

建立外部鏈接時，通常使用URL來定位萬維網(wǎng)信息。這種方式可以簡潔、明了、準確地描述信息所在的地點。下面看一下通過“http://”和“mailto:”如何實現(xiàn)鏈接到外部網(wǎng)站和向外部網(wǎng)站發(fā)送郵件的。

1．“http://”鏈接到外部網(wǎng)站語法：

<ahref="http://">鏈接內(nèi)容</a>http://后面寫網(wǎng)站地址。

2．“mailto:”發(fā)送郵件在HTML頁面中可以建立E-mail鏈接，當瀏覽者單擊E-mail鏈接后，系統(tǒng)會啟動默認的電子郵件軟件進行E-mail的發(fā)送。

語法：

<AHREF="MAILTO:A@B.C">發(fā)送E-mail</A><AHREF="MAILTO:A@B.C?SUBJECT=CONTENT">發(fā)送E-mail</A>

<AHREF="MAILTO:A@B.C?CC=A@B.C">發(fā)送E-mail</A><AHREF="MAILTO:A@B.C?BCC=A@B.C">發(fā)送E-mail</A>表3-2 參數(shù)說明參數(shù)描述A@B.C代表郵件地址SUBJECT電子郵件主題CC抄送收件人BCC暗送收件人

【例3-9】發(fā)送E-mail。

圖3-10建立發(fā)送E-mail的超鏈接

圖3-11單擊“給作者的信1”鏈接的結果

圖3-12單擊“給作者的信2”鏈接的結果3.4多媒體效果在網(wǎng)頁中使用多媒體，不但可以使網(wǎng)頁更美觀，還可以增加網(wǎng)站的訪問量。多媒體是指利用計算機技術，把多種媒體綜合在一起，使之建立起邏輯上的聯(lián)系，并能對其進行各種處理的一種方法。

多種媒體主要包括文字、聲音、圖像、動畫等各種形式。本節(jié)介紹如何在網(wǎng)頁中插入圖片，播放音樂、視頻和Flash動畫，播放背景音樂以及實現(xiàn)文字或圖片的滾動效果。

3.4.1插入圖片在純文本的HTML頁面中加入圖片，可以給原來單調(diào)乏味的頁面添加生氣。HTML語言中使用<IMG>標記插入圖片，這個標記沒有終止標記。<IMG>標記的常用屬性如下。

（1）src屬性（2）width、height屬性（3）hspace、vspace屬性（4）border屬性（5）align屬性（6）alt屬性（7）lowsrc屬性

【例3-10】在網(wǎng)頁中插入圖片。

圖3-13在網(wǎng)頁中插入圖片

3.4.2播放音樂、視頻和Flash動畫在HTML文件中，使用<EMBED>標記可以直接嵌入多媒體文件，如播放音樂、視頻和Flash動畫。<EMBED>標記的屬性如表3-3所示。表3-3 <EMBED>標記的屬性屬性描述src多媒體文件路徑width播放多媒體文件區(qū)域的寬度heigth播放多媒體文件區(qū)域的高度hidden控制播放面板的顯示和隱藏，取值為“True”代表隱藏面板，取值為“No”代表顯示面板autostart控制多媒體內(nèi)容是否自動播放，取值為“True”代表自動播放，取值為“False”代表不自動播放loop控制多媒體內(nèi)容是否循環(huán)播放，取值為“True”代表無限次循環(huán)播放，取值為“No”代表僅播放一次

1．播放MP3音樂

在網(wǎng)頁中使用<EMBED>標記嵌入MP3音樂文件，并設置在網(wǎng)頁打開時自動播放MP3音樂，代碼如下。

<embedsrc="3-01.mp3"width="300"height="200"hidden="no"autostart="true"></embed>

2．播放MPEG電影和AVI視頻（1）播放MPEG電影動態(tài)圖像專家組（MovingPicturesExpertsGroup，MPEG）數(shù)字視頻格式是運動圖像壓縮算法的國際標準，采用了有損壓縮方法減少運動圖像中的冗余信息。

它在數(shù)字電視、動態(tài)圖像、因特網(wǎng)、實時多媒體監(jiān)控、移動多媒體通信、Internet/Intranet上的視頻服務與可視游戲、DVD上的交互多媒體等方面都有應用。

【例3-11】播放MPEG電影。

圖3-14播放MPEG電影

（2）播放AVI視頻

AVI（AudioVideoInterlaced）是一種不需要專門硬件參與就可以實現(xiàn)大量視頻壓縮的數(shù)字視頻壓縮格式，是文件音頻數(shù)據(jù)和視頻數(shù)據(jù)的混合，即音頻數(shù)據(jù)和視頻數(shù)據(jù)交錯存放在同一個文件中。

【例3-12】播放AVI視頻。

圖3-15播放AVI視頻

3．播放Flash動畫

Flash動畫是一種矢量動畫格式，是用Macromedia公司的Flash軟件編輯而成，具有體積小、兼容性好、直觀動感、互動性強大、支持MP3音樂等諸多優(yōu)點，是當今比較流行的Web頁面動畫格式。在任何一個版本的瀏覽器上只要安裝好插件，就可以觀看Flash動畫了。

【例3-13】播放Flash動畫。

圖3-16播放Flash動畫

3.4.3播放背景音樂在網(wǎng)頁中使用<BGSOUND>標記可以為頁面設置背景音樂。與使用<EMBED>標記不同，<BGSOUND>標記不但可以實現(xiàn)無限次循環(huán)播放音樂文件的功能，而且在網(wǎng)頁最小化的時候背景音樂將自動停止。它沒有顯示效果，是真正的背景音樂標記。

語法：

<bgsound

src="file_name"loop="loop_value">

通過<BGSOUND>標記可以嵌入多種格式的音樂文件，常用的是MIDI文件。

3.4.4滾動效果在HTML頁面中，可以實現(xiàn)文字或者圖片的滾動效果。例如，可以使一段文字從瀏覽器的右邊進入，橫穿屏幕，從瀏覽器的左邊退出等。在靜止的頁面中使用動態(tài)的效果，可以突出頁面中想要強調(diào)的內(nèi)容。在HTML語言中使用<MARQUEE>標記實現(xiàn)滾動效果。

語法：

<MARQUEE>標記的常用屬性如下。（1）direction屬性（2）behavior屬性（3）loop屬性

（4）scrollamount屬性（5）scrolldelay屬性（6）width屬性（7）height屬性（8）bgcolor屬性

【例3-14】實現(xiàn)文字滾動效果。

圖3-17實現(xiàn)文字滾動效果

HTML5頁面中的多媒體

在HTML5中，新增了兩個元素——video元素與audio元素。video元素專門用來播放網(wǎng)絡上的視頻或電影，而audio元素專門用來播放網(wǎng)絡上的音頻數(shù)據(jù)。使用這兩個元素，就不再需要使用其他任何插件了，只要使用支持HTML5的瀏覽器就可以了。

瀏覽器對兩個的支持情況

瀏覽器

支持情況

Chrome3.0及以上版本支持Firefox

3.5以上版本支持Opera10.5及以上版本支持Safari3.2及以上版本支持3.5制作表格表格是網(wǎng)站常用的頁面元素，是網(wǎng)頁排版的最佳手段。在頁面中用表格來加強對文本位置的控制和顯示數(shù)據(jù)，直觀清晰。而且HTML的表格使用起來非常靈活，非常容易掌握。

3.5.1表格的基本結構表格是網(wǎng)頁排版的最佳手段，利用表格的豐富屬性可以設計出各種復雜的表格。在HTML中，表格主要由3個標記來構成：表格標記<TABLE>、行標記<TR>、單元格標記<TD>。

表格的基本結構如下。

3.5.2定義表格的標題和表頭在HTML語言中，可以通過<CAPTION>標記為表格添加標題，通過<TH>標記定義表格表頭。

（1）<CAPTION>標記定義表格標題。

語法：

【例3-15】定義表格的標題。

圖3-18定義表格的標題

（2）<TH>標記定義表格表頭。表頭是指表格的第一行。通過<TH>標記可以定義表格的表頭，其中的文字居中對齊并且加粗顯示。

語法：

通過定義表頭，可以很容易地將表格第一行文字與其他行文字形成顯著對比。

【例3-16】定義表格表頭。

圖3-19定義表格表頭

3.5.3設置表格的邊框和間隔

<TABLE>標記的border屬性用于設置表格的邊框大小，cellspacing屬性和cellpadding屬性用于設置表格內(nèi)元素的間隔。

（1）border屬性：定義表格邊框線的寬度，單位為像素。默認情況下，表格的邊框為0像素。

（2）cellspacing屬性：

設定表格的單元格與單元格之間的間距，以像素為單位。

（3）cellpadding屬性：設定表格的單元格內(nèi)容和邊框之間的距離，以像素為單位。

【例3-17】設置表格的邊框和間隔。

圖3-20設置表格的邊框和間隔

3.5.4定義表格尺寸和背景顏色

1．定義表格尺寸通過<TABLE>標記的width和height屬性可以設置整個表格的寬度和高度；通過<TD>標記的width和height屬性可以設置表格內(nèi)單元格的寬度和高度。單位為像素或者以百分比形式表現(xiàn)。

【例3-18】定義表格尺寸。

圖3-21定義表格尺寸

2．設置表格背景顏色通過<TABLE>標記的bgcolor屬性可以設置整個表格的背景顏色，通過<TR>標記的bgcolor屬性可以設置表格同一行的背景顏色，通過<TD>標記的bgcolor屬性可以設置一個單元格的背景顏色。

【例3-19】設置表格背景顏色。

圖3-22設置表格背景顏色

3.5.5設定表格的對齊方式通過<TABLE>標記的align屬性可以設定表格相對于頁面的水平對齊方式，通過<TR>標記的align屬性、valign屬性可以設定一行內(nèi)容的水平和垂直對齊方式，通過<TD>標記的align屬性、valign屬性可以設定單元格內(nèi)容的水平和垂直對齊方式。

【例3-20】設定表格的對齊方式。

圖3-23設定表格的對齊方式

3.5.6設置跨行、跨列的表格在設計網(wǎng)頁過程中，有時需要設置跨行、跨列的表格，即表格中的一個單元格占用多行或者多列。

（1）<TD>標記的rowspan屬性：設置單元格在水平方向上跨越的單元格個數(shù)。

（2）<TD>標記的colspan屬性：設置單元格在垂直方向上跨越的單元格個數(shù)。

【例3-21】設置跨行、跨列的表格。

圖3-24定義表格尺寸3.6建立表單表單是客戶端和服務器端之間重要的交互手段。利用表單可以收集客戶端提交的有關信息。例如注冊一個電子信箱時，用戶需要填寫網(wǎng)站提供的表單，其內(nèi)容包括用戶名、密碼、聯(lián)系方式等信息。

提交表單信息的處理過程：單擊表單中的提交按鈕時，輸入在表單中的信息會上傳到服務器；然后由服務器上的相關應用程序進行處理；處理后或者將用戶提交的信息儲存在服務器端的數(shù)據(jù)庫中，或者將一些信息返回給客戶瀏覽器端。

3.6.1表單的結構表單是網(wǎng)頁上的一個特定區(qū)域，這個區(qū)域是由<FORM>、</FORM>標記定義的。其他的表單對象，都要插入到表單之中。單擊表單的提交按鈕時，提交的是表單范圍之內(nèi)的內(nèi)容。表單區(qū)域還攜帶表單的相關信息，如處理表單的腳本程序的位置、提交表單的方法等。

表單的結構如下：

<FORMNAME="form_name"METHOD="method"ACTION="URL"ENCTYPE="value"TARGET="target_win"”>…</FORM>

<FORM>標記的屬性如下。（1）name屬性（2）method屬性（3）action屬性（4）enctype屬性（5）target屬性

3.6.2在表單中插入控件表單相當于一個容器，只有在表單中添加表單元素，表單才具有實際意義。例如，在表單中插入文本框、單選框、按鈕、文本域、列表/菜單等。下面介紹表單控件對應的標記：<INPUT>標記、<TEXTAREA>標記、<SELECT>標記和<OPTION>標記。

1．輸入域標記<INPUT><INPUT>標記是表單中最常用的標記之一。語法：

TYPE屬性的取值如下。（1）文字域TEXT<INPUT>標記的TYPE屬性值為TEXT表示控件為文本框。在文本框中可以輸入任何類型的文本、數(shù)字、字母等字符串。輸入的內(nèi)容以單行顯示。

語法：

（2）密碼域PASSWORD

在表單中還有一種文本域的形式為密碼域，輸入到文本域中的文字均以星號或者圓點顯示。

語法：

（3）文件域FILE

文件域的外觀是一個文本框加一個瀏覽按鈕。用戶既可以直接在文本框中輸入上傳文件的路徑，也可以單擊瀏覽按鈕選擇要上傳的文件，然后通過表單將文件上傳到服務器上。例如，上傳附件、Office文檔、圖片等各種類型的文件，都要用到文件域。

語法：

（4）單選按鈕RADIO

單選按鈕要求在所給出的項目中只允許選擇一項。

語法：

（5）復選按鈕CHECKBOX

復選按鈕能夠進行項目的多項選擇。

語法：

（6）提交按鈕SUBMIT

單擊提交按鈕，可以實現(xiàn)表單內(nèi)容的提交。

語法：

其中，VALUE代表顯示在按鈕上面的文字，后面幾種類型中VALUE值意義都與此處相同。

（7）重置按鈕RESET

單擊重置按鈕，可以清除表單的內(nèi)容，恢復默認的表單內(nèi)容設定。

語法：

（8）普通按鈕BUTTON

普通按鈕一般是配合JavaScript腳本來進行表單的處理。

語法：

（9）隱藏域HIDDEN

隱藏域在頁面中對于用戶而言是不可見的，插入隱藏域的目的在于通過隱藏的方式收集或者發(fā)送信息。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時候，隱藏域的信息也被一起發(fā)送到相關頁面。

語法：

（10）圖像域IMAGE

圖像域是指設置圖片為表單的提交按鈕，即圖片具有按鈕的功能。

語法：

2．文字域標記<TEXTAREA>

文字域標記<TEXTAREA>用來制作多行的文字域，可以在其中輸入更多的文本。

語法：

文本內(nèi)容

</TEXTAREA></FORM>

文字域標記如下。①name?②rows?③cols?④value?

3．選擇域標記<SELECT>和OPTION>

通過選擇域標記<SELECT>和<OPTION>可以建立一個列表或者菜單。菜單節(jié)省空間，正常狀態(tài)下只能看到一個選項，單擊按鈕打開菜單后才能看到全部的選項。列表可以顯示一定數(shù)量的選項，如果超出了這個數(shù)量，會自動出現(xiàn)滾動條，瀏覽者可以通過拖動滾動條來查看各選項。

語法：

<FORM><SELECTNAME="name"SIZE="value"Multiple><optionvalue="value"Selected>選項1<optionvalue="value">選項2

<optionvalue="value">選項3…</SELECT></FORM>

選擇域標記<SELECT>和<OPTION>的屬性如下。

【例3-22】建立表單。

圖3-25建立表單3.7HTML5結構

1．新增的主體結構元素（1）article元素article元素代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內(nèi)容。它可以使一篇博客或報刊中的文章、一篇論壇帖子、一段用戶評論或獨立的插件，或其他任何獨立的內(nèi)容。除了內(nèi)容部分，一個article元素通常有它自己的標題（通常放在一個header元素里面），有時還有自己的腳注。

【例3-23】article元素實例。

圖3-25博客導航3.7HTML5結構

（2）Section元素Section元素代表文檔或應用程序中一般性的“段”或者“節(jié)”?！岸巍痹谶@里的上下文種，指的是對內(nèi)容按照主題的分組，通常還附帶標題。Section元素的作用是對頁面上的內(nèi)容進行分塊，或者說對文章進行分段，但是不要與article混淆，因為article是有著自己的完整的、獨立的內(nèi)容。

【例3-24】section元素實例。

圖3-27section元素3.7HTML5結構

（3）nav元素

nav元素用來構建導航。導航定義為一個頁面中（例如，一篇文章頂端的一個目錄，它可以鏈接到同一頁面的錨點）或一個站點內(nèi)的鏈接。但是，并不是鏈接的每一個集合都是一個nav，只需要將主要的、基本的鏈接組放進nav元素即可。

nav元素的內(nèi)容可能是鏈接的一個列表，標記為一個無序的列表，或者是一個有序的列表，這里需要注意的是nav元素是一個包裝器，它不會替代<ol>或<ul>元素，但是會包圍它。通過這種方式，不理解該元素的遺留的瀏覽器將會看到列表元素和列表項，并且它們行為正常。

【例3-26】nav元素實例。

圖3-29nav元素3.7HTML5結構

（4）aside元素aside元素表示由與aside元素周圍的內(nèi)容無關的內(nèi)容所組成的一個頁面的一節(jié)，也可以認為該內(nèi)容與aside周圍的內(nèi)容是分開獨立的。aside元素主要有以下兩種使用方法。①被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當前文章有關信息、名詞解釋，等等。

【例3-28】側邊欄的友情鏈接

。

圖3-29nav元素3.7HTML5結構

②在article元素之外使用，可以作為頁面或站點全局的附屬信息部分。最典型的形式就是側邊欄，其中的內(nèi)容可以是友情鏈接，博客中其他文章列表、廣告單元等。

【例3-27】aside元素實例。

圖3-29nav元素3.7HTML5結構

2．新增的非主體結構元素（1）header元素header元素是一種具有引導和導航作用的結構元素，通常用來放置整個頁面或頁面內(nèi)的一個內(nèi)容區(qū)塊的標題，但也可以包含其內(nèi)容，例如搜索表單或相關的logo圖片。

（2）hgroup元素

hgroup元素是將標題及其子標題進行分組的元素。hgroup元素通常會將h1~h6元素進行分組，例如一個內(nèi)容區(qū)塊的標題及其子標題算一組。通常，如果文章只有一個主標題，是不需要hgroup元素的

（3）footer元素footer元素可以作為其上層父級內(nèi)容區(qū)塊或是一個根區(qū)塊的腳注。footer通常包括其相關區(qū)塊的腳注信息，如作者、相關閱讀鏈接及版權信息等。（4）address元素address用于當前的<article>或文檔的作者的詳細聯(lián)系方式，但不是用于郵政地址的一個通用性元素。聯(lián)絡細節(jié)可以是Email地址、郵政地址或者任何其他形式。3.8構建框架

制作網(wǎng)頁時，經(jīng)常使用框架進行頁面布局。本節(jié)介紹在網(wǎng)頁中如何構建框架以及在框架中如何實現(xiàn)超鏈接。

3.8.1框架的基本結構框架的作用是把瀏覽器窗口劃分成若干個區(qū)域，每個區(qū)域內(nèi)可以顯示不同的頁面，并且各個頁面之間不會受到任何影響?？蚣軆?nèi)每個頁面都有不同的名字，作為彼此互動的依據(jù)，所以框架技術普遍應用于頁面導航。

框架的基本結構如下。

<HTML><HEAD><TITLE>框架網(wǎng)頁的基本結構</TITLE>

</HEAD><FRAMESET><FRAME><FRAME>…</FRAMESET></HTML>

構建框架的主要標記如下。

3.8.2在網(wǎng)頁中構建框架

1．基本框架基本框架是由<FRAMESET>標記和<FRAME>標記組建的。

（1）框架集標記<FRAMESET>

框架集標記<FRAMESET>定義了框架的開始和結束。它還定義一組框架的結構，包括框架的數(shù)量、尺寸等。

<FRAMESET>標記的屬性如下。①cols屬性②rows屬性③framespacing屬性④bordercolor屬性⑤frameborder屬性

（2）框架標記<FRAME><FRAME>標記是用于定義每個框架的內(nèi)容。每個框架最終都要有一個顯示的頁面，通過裝載該頁面就可以顯示網(wǎng)頁的內(nèi)容了。

框架標記<FRAME>的屬性如下。①src屬性②

name屬性③

frameborder屬性④scrolling屬性⑤marginwidth屬性、marginheight屬性⑥

noresize屬性

（3）<noframes>標記某些版本的瀏覽器是不支持框架結構的，如果遇到這種情況，就可以使用<NOFRAMES>和</NOFRAMES>標記再聲明一對文件主體標記<BODY>和</BODY>，代表在無法接受框架結構時顯示的頁面內(nèi)容。

【例3-29】構建基本框架。

圖3-26構建基本框架

2．浮動框架浮動框架是一種特殊的框架結構，它是在瀏覽的窗口中嵌套另外的網(wǎng)頁文件。<IFRAME>為浮動框架標記。語法：

<IFRAME>標記的屬性如下。①src屬性②

name屬性③

align屬性④

width屬性?height屬性

⑤scrolling屬性⑥FRAMEBORDER屬性⑦marginwidth屬性、marginheight屬性

【例3-30】構建浮動框架。

圖3-27構建浮動框架

3.8.3在框架中應用超鏈接框架的一個主要用途是做為頁面導航，方便用戶查閱網(wǎng)頁，了解網(wǎng)站結構。在框架中建立超鏈接，把框架的名稱賦值給超鏈接<A>標記的TARGET屬性，則指定的鏈接頁面內(nèi)容將在相應名稱的框架中顯示。

【例3-31】在框架中應用超鏈接。

圖3-34在框架中應用超鏈接3.9CSS

層疊樣式表（CascadingStyleSheets，CSS）是W3C協(xié)會為彌補HTML在顯示屬性設定上的不足而制定的一套擴展樣式標準。CSS標準中重新定義了HTML中原來的文字顯示樣式，增加了一些新概念，如類、層等，可以對文字重疊、定位等。

所謂“層疊”，實際上就是將顯示樣式獨立于顯示的內(nèi)容，進行分類管理，如分為字體樣式、顏色樣式等，需要使用樣式的HTML文件進行套用。

3.9.1CSS的特點為了使讀者更好地了解CSS，下面介紹CSS的特點。

（1）將顯示格式和文檔結構分離。（2）對HTML語言處理樣式的最好補充。（3）體積更小加快

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

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

Web頁面制作基礎

文檔簡介

溫馨提示

最新文檔

評論

相關文檔