《Web應用開發(fā)》課件-階段一 我的第一個網(wǎng)頁

我的第一個網(wǎng)頁項目1任務目標

了解網(wǎng)頁的基礎知識

1認識HTML語言2制作一個網(wǎng)頁31.1什么是網(wǎng)頁1.2網(wǎng)頁類型網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁兩種類型。1．靜態(tài)網(wǎng)頁在網(wǎng)站設計中，使用純HTML格式的網(wǎng)頁通常稱為靜態(tài)網(wǎng)頁，它運行于客戶端。2．動態(tài)網(wǎng)頁動態(tài)網(wǎng)頁是指使用ASP、PHP、JSP、ASP.NET等程序生成的網(wǎng)頁，動態(tài)網(wǎng)頁會根據(jù)編寫的程序訪問連接的數(shù)據(jù)庫，可以與瀏覽者進行交互，也稱為交互式網(wǎng)頁。1.3網(wǎng)頁基本元素網(wǎng)頁包括文本、圖像、音頻、視頻、動畫和超鏈接等基本元素。1．文本文本是網(wǎng)頁傳遞信息的主要載體。文本傳輸速度快，而且網(wǎng)頁中的文本可以設置其大小、顏色、段落、樣式等屬性，風格獨特的網(wǎng)頁文本設置會給瀏覽者賞心悅目的感覺。2．圖像圖像給人的視覺效果要比文字強烈得多，在網(wǎng)頁中靈活運用圖像可以起到點綴的效果。網(wǎng)頁上的圖像文件大部分是JPEG格式或GIF格式，因為它們除了具有壓縮比例高的特點外，還具有跨平臺特性。1.3網(wǎng)頁基本元素圖像在網(wǎng)頁中的應用主要有以下幾種形式。圖像標題：在網(wǎng)頁中一般都有標題，起到導航的作用，應用圖像標題可以使網(wǎng)頁更加美觀。網(wǎng)頁背景：圖像的另一個重要應用是作為網(wǎng)頁背景，特別是一些個人網(wǎng)站，應用圖像背景比較多。網(wǎng)頁主圖：在網(wǎng)頁上，除了用小的圖片美化網(wǎng)頁外，有時還會用一些大的圖片來突出網(wǎng)頁主題，特別是網(wǎng)站主頁中用主圖的比較多。超鏈接：有時可以用圖片取代文字作為超鏈接按鈕，使網(wǎng)頁更加美觀。1.3網(wǎng)頁基本元素3．動畫動畫是網(wǎng)頁最活躍的元素，有創(chuàng)意的動畫是吸引瀏覽者的有效方法。網(wǎng)頁中的動畫不宜太多，否則會使瀏覽者眼花繚亂。在網(wǎng)頁中加入的動畫一般是GIF格式或者SWF格式的動畫。4．音頻和視頻通過音頻進行人機交流逐步成為網(wǎng)頁交互的重要手段。瀏覽網(wǎng)頁時，一些網(wǎng)頁設置了背景音樂，伴隨著優(yōu)美的樂曲，瀏覽者在網(wǎng)上沖浪會更加愜意。在網(wǎng)頁中加入視頻，會使網(wǎng)頁具有較強的吸引力。常見的網(wǎng)絡視頻有視頻短片、遠程教學、視頻聊天、視頻點播和DV播放等。1.3網(wǎng)頁基本元素5．超鏈接超鏈接是最為有趣的網(wǎng)頁元素。在網(wǎng)頁中單擊超鏈接對象，可實現(xiàn)在不同頁面之間跳轉(zhuǎn)、訪問其他網(wǎng)站、下載文件等操作。當鼠標移至超鏈接對象上時，鼠標會變成小手形狀，單擊即可跳轉(zhuǎn)到相應地址（URL）的網(wǎng)頁。站內(nèi)鏈接：在一個網(wǎng)站的各個網(wǎng)頁之間，或者網(wǎng)站的子網(wǎng)站之間創(chuàng)建的超鏈接，瀏覽者可以迅速找到自己需要的信息。站外鏈接：在制作的網(wǎng)站上放置一些與網(wǎng)站主題有關(guān)的對外鏈接，不但可以把好的網(wǎng)站介紹給瀏覽者，而且能使瀏覽者樂意再度光臨該網(wǎng)站。如果對外鏈接信息很多，可以進行分類。1.4網(wǎng)頁的構(gòu)成網(wǎng)頁是由一些基本版塊組成的，主要包括Logo圖標、導航條、Banner、內(nèi)容版塊、版尾版塊等，如下圖所示。1.5網(wǎng)站建設的一般流程1．網(wǎng)站策劃網(wǎng)站策劃是網(wǎng)站建設的第一階段，總的目的是根據(jù)調(diào)查分析，明確建設網(wǎng)站的目的與內(nèi)容。網(wǎng)站策劃包含確定要策劃的網(wǎng)站所屬行業(yè)、明確網(wǎng)站的主題、用戶定位與用戶需求分析、確定網(wǎng)站的配色方案、規(guī)劃網(wǎng)站結(jié)構(gòu)等。其中，規(guī)劃網(wǎng)站結(jié)構(gòu)可以用樹狀結(jié)構(gòu)把每個頁面的內(nèi)容大綱列出來，要考慮每個頁面之間的鏈接關(guān)系，這是評價一個網(wǎng)站優(yōu)劣的重要標志。1.5網(wǎng)站建設的一般流程2．收集網(wǎng)站的素材和內(nèi)容網(wǎng)站建設過程中常常需要大量的素材，包括文字、圖片、音頻、視頻和動畫等。素材可以從圖書、報刊、移動磁盤以及多媒體上收集，也可以自己制作或從網(wǎng)上搜集。3．設計制作網(wǎng)站網(wǎng)站的主題和風格明確后，就應該圍繞網(wǎng)站主題制作網(wǎng)頁內(nèi)容、設計題材欄目等。網(wǎng)站是由多個網(wǎng)頁組成的，設計制作網(wǎng)頁是一個復雜而細致的過程，一定要按照先大后小、先簡單后復雜的次序來進行制作。1.5網(wǎng)站建設的一般流程4．網(wǎng)站測試與發(fā)布在網(wǎng)站發(fā)布之前，通常要檢查網(wǎng)頁在不同版本瀏覽器中的顯示情況，尤其是制作大型的或訪問量高的網(wǎng)站，這個步驟十分重要。由于各種版本瀏覽器支持HTML語言的版本不同，所以要讓網(wǎng)頁能夠在大多數(shù)瀏覽器中正常顯示，需要仔細地檢查，必要時可以對網(wǎng)站的特殊效果做舍棄處理。網(wǎng)站的發(fā)布是指將制作的網(wǎng)站上傳到指定的主機服務器上。在網(wǎng)站測試無誤后，就可以通過Dreamweaver或FTP軟件發(fā)布網(wǎng)站了。1.5網(wǎng)站建設的一般流程5．網(wǎng)站推廣與維護網(wǎng)站推廣的目的在于讓盡可能多的潛在用戶了解并訪問網(wǎng)站。網(wǎng)站推廣需要借助一定的網(wǎng)絡工具和資源，常用的網(wǎng)站推廣工具和資料包括搜索引擎、分類目錄、電子郵件、網(wǎng)站鏈接、分類廣告、電子書、免費軟件、網(wǎng)絡廣告媒體、傳統(tǒng)推廣渠道等。網(wǎng)站發(fā)布完成后，還要進行管理和維護，就像一棟房子或者一部汽車，如果長期擱置無人維護，必然變成朽木或者廢鐵。網(wǎng)站也是一樣，只有不斷地更新、管理和維護，才能留住已有的瀏覽者并且吸引新的瀏覽者。補充

色彩作為視覺信息，具有強烈的知覺力、辨別力、象征力和沖擊力。色彩無時無刻不在影響著人們的生活，不同的顏色有著不同的含義，給人各種豐富的感覺和聯(lián)想，如下所述。紅色：熱情、奔放、喜悅、莊嚴藍色：天空、清爽、神秘、知性綠色：植物、生命、生機紫色：浪漫、富貴黃色：高貴、富有、燦爛、活潑黑色：嚴肅、夜晚、沉著灰色：莊重、沉穩(wěn)白色：純潔、簡單、潔凈任務目標

了解網(wǎng)頁的基礎知識

1認識HTML語言2制作一個網(wǎng)頁32.1網(wǎng)頁常用程序設計語言1．網(wǎng)頁標簽語言HTMLHTML是HyperTextMarkupLanguage的縮寫，即超文本標簽語言。用HTML編寫的超文本文檔稱為HTML文檔，該文檔以.html或.htm為文件擴展名，它不需要編譯工具，可直接在瀏覽器中執(zhí)行。HTML是網(wǎng)頁技術(shù)的核心與基礎，不管是制作靜態(tài)網(wǎng)頁，還是編輯動態(tài)交互網(wǎng)頁，都離不開HTML語言。所以，要靈活地實現(xiàn)想要的網(wǎng)頁效果，必須了解HTML語言。2.1網(wǎng)頁常用程序設計語言2．層疊樣式表CSSCSS通過被稱為CSS樣式或樣式表，它是CascadingStyleSheets的縮寫，即層疊樣式表。CSS樣式主要用于設置HTML頁面的外觀，也就是定義網(wǎng)頁的編排、文本內(nèi)容顯示效果、圖片的外形以及特殊效果等。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁元素進行格式化。3．網(wǎng)頁腳本語言JavaScriptJavaScript是Web頁面中的一種腳本語言，通過JavaScript可以將靜態(tài)頁面轉(zhuǎn)變成支持用戶交互并響應事件的動態(tài)頁面。2.1網(wǎng)頁常用程序設計語言2．層疊樣式表CSSCSS通過被稱為CSS樣式或樣式表，它是CascadingStyleSheets的縮寫，即層疊樣式表。CSS樣式主要用于設置HTML頁面的外觀，也就是定義網(wǎng)頁的編排、文本內(nèi)容顯示效果、圖片的外形以及特殊效果等。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁元素進行格式化。3．網(wǎng)頁腳本語言JavaScriptJavaScript是Web頁面中的一種腳本語言，通過JavaScript可以將靜態(tài)頁面轉(zhuǎn)變成支持用戶交互并響應事件的動態(tài)頁面。2.2

HTML5開發(fā)工具及原理HTML5是超文本標記語言（HTML）的第五次重大修改，并制定了規(guī)范的標準，具有很好的兼容性。Web瀏覽器用來瀏覽HTML5文檔，HTML5文檔顯示原理可概括為：HTML5使用一組約定的標簽符號，對Web上的各種信息進行標記，瀏覽器會解釋這些標記符號并以它們指定的格式把相應的內(nèi)容顯示在屏幕上，而標記符號本身不會在屏幕上顯示出來。2.3網(wǎng)頁的HTML結(jié)構(gòu)下面是一個典型的HTML文檔結(jié)構(gòu)。<html>表示HTML文檔的開始

<head>

網(wǎng)頁的頭部信息，這部分主要定義了一些瀏覽器用于顯示文檔的參數(shù)，如<title>、<meta>等

</head>

<body>

文檔主體

</body></html>表示HTML文檔的結(jié)束2.3網(wǎng)頁的HTML結(jié)構(gòu)2.3網(wǎng)頁的HTML結(jié)構(gòu)書寫HTML代碼時應注意以下幾點：HTML標簽及屬性中字母不區(qū)分大小寫，如<html>與<HTML>對瀏覽器來說是完全相同的。標簽名與左尖括號之間不能留有空格，如<body>是錯誤的。屬性要寫在開始標簽的尖括號中，放在標簽名之后，并且與標簽名之間要有空格；多個屬性之間也要有空格；屬性值最好用單引號或雙引號括起來，且引號一定要是英文的引號，不能是中文的引號。結(jié)束標簽要書寫正確，不能忘掉斜杠。任務目標

了解網(wǎng)頁的基礎知識

1認識HTML語言2制作一個網(wǎng)頁33使用HTML制作網(wǎng)頁1．文本與段落標簽（1）標題標簽<hn>…</hn>。用于設置網(wǎng)頁中各個層次的標題文字，被設置的文字將以黑體顯示，并自成段落。共分為6級，n取1～6之間的正整數(shù)。其中<h1>…</h1>表示最大的標題，<h6>…</h6>表示最小的標題。align屬性用于設置標題的對齊方式，其參數(shù)為left、center、right。語法格式舉例：<h3align="center">標題部分</h3>（2）段落標簽<p>…</p>?？蓪崿F(xiàn)分段，即在段落開始時用<p>，在段落結(jié)束時用</p>。align屬性用于設置段落對齊方式，其參數(shù)為left（默認）、center、right。語法格式舉例：<palign="center">段落內(nèi)容</p>3使用HTML制作網(wǎng)頁（3）換行標簽<br>?？墒刮臋n在該標簽處強制換行，這一點與<p>相同。但與<p>不同的是，換行后行與行之間不留空白行，頁面看起來比較緊湊。<br>屬于單標簽，沒有結(jié)束標簽。（4）水平線標簽<hr>?？梢栽陧撁嬷猩梢粭l水平線，用于分隔文檔或者修飾網(wǎng)頁。<hr>屬于單標簽，沒有結(jié)束標簽。語法格式舉例：<hralign="center"size="4"width="80%"color="red">3使用HTML制作網(wǎng)頁屬

性

名功

能size設置水平線的粗細，屬性值為整數(shù)，單位為像素width設置水平線的寬度，屬性值單位為像素或%，如width="300"align設置水平線的對齊方式，取值left、center、rightcolor設置水平線的顏色，默認值black3使用HTML制作網(wǎng)頁（5）文本的格式化標簽在HTML網(wǎng)頁中，為了讓文字富有變化，如粗體、下畫線效果等，HTML準備了專門的文本格式化標簽。標

簽功

能示

例<b>…</b>加粗文字HTML文本示例<i>…</i>斜體文字

HTML文本示例<strong>…</strong>用于強調(diào)，效果和<b>標簽相同HTML文本示例<em>…</em>用于強調(diào)，效果和<i>標簽相同

HTML文本示例<del>…</del>刪除線

HTML文本示例<ins>…</ins>增加下畫線

HTML文本示例_…下標X2^…上標X23使用HTML制作網(wǎng)頁（6）特殊字符。由于HTML文檔是ASCII文本，只支持ASCII字符。但是，還有一些有特殊用途的字符在HTML中無法直接顯示成原來的樣式，若要在瀏覽器中顯示這些字符就必須輸入特殊字符來代替。HTML5常見特殊字符實體代碼如下表所示。3使用HTML制作網(wǎng)頁2．列表標簽可以將網(wǎng)頁中相關(guān)的信息有條不紊地組織起來。列表標簽可分為：無序列表、有序列表、嵌套列表和自定義列表，下面介紹前兩種常用的列表。（1）無序列表標簽<ul>…</ul>。每一項需要用<li>標簽結(jié)合使用。<ul>的常用屬性只有一個type，用來設定列表項前面出現(xiàn)的符號，disc：列表項前面加上符號●。circle：列表項前面加上符號○。square：列表項前面加上符號■。3使用HTML制作網(wǎng)頁（2）有序列表標簽<ol>…</ol>。列表中每一項的前面會加上編號，編號會根據(jù)列表項的增刪自動調(diào)整。每一項需要與<li>標簽結(jié)合使用。start屬性用于設置編號的起始值，如start="3"，則列表編號從3開始。type屬性用來設定列表的編號形式,如：

1：用阿拉伯數(shù)字1、2、3、…編號。

a：用小寫英文字母a、b、c、…編號。

A：用大寫英文字母A、B、C、…編號。

i：用小寫羅馬字母ⅰ、ⅱ、ⅲ、…編號。

I：用大寫羅馬字母Ⅰ、Ⅱ、Ⅲ、…編號。3使用HTML制作網(wǎng)頁（3）<li>…</li>。<li>標簽定義列表項，屬性：

type：用來設定列表項的符號，如果<li>用在<ul>里，屬性取值為disc、circle或square；如果<li>用在<ol>里，則屬性取值為1、a、A、i或I。

value：此屬性僅當<li>用在<ol>里有效，屬性值為一個整數(shù)，用來設定當前項的編號，其后的項目編號將以此值為起始數(shù)目遞增，前面各項不受影響。3使用HTML制作網(wǎng)頁3．超鏈接標簽<a>..</a>超鏈接是從一個網(wǎng)頁轉(zhuǎn)到另一個網(wǎng)頁的途徑，它是網(wǎng)頁的重要組成部分。其最重要的屬性是href屬性，它指定鏈接的目標URL。定義的語法：<ahref="資源地址"target="目標窗口"title="鏈接提示文字">鏈接對象</a>其中href屬性定義要鏈接的目標地址；target屬性用于指定打開鏈接的目標窗口；title屬性指定指向鏈接時所提示的文字。3使用HTML制作網(wǎng)頁屬

性

功

能href鏈接所指的URL地址，即目標地址，屬性值可以使用絕對路徑或相對路徑target指定打開鏈接的目標窗口，取值_parent（在父窗口中打開）、_blank（在新窗口打開）、_self（在原窗口中打開，默認值）、_top（在瀏覽器的整個窗口中打開）title指定指向鏈接時所提示的文字3使用HTML制作網(wǎng)頁4．絕對路徑與相對路徑絕對路徑：提供文檔完整的URL地址，例如：相對路徑：以當前文件所在路徑為起點，進行相對文件的查找。任務1.2使用HTML制作簡單的網(wǎng)頁相對路徑名內(nèi)

涵h(huán)ref="index.html"index.htm是本地當前路徑下的文件href="web/index.html"index.htm是本地當前路徑下web子目標下的文件href="../index.html"index.htm是本地當前目錄的上一級子目錄下的文件href="../../index.html"index.htm是本地當前目標的上兩級子目錄下的文件3使用HTML制作網(wǎng)頁5．圖像標簽<img>標簽定義HTML頁面中的圖像，單標簽。使用<img>標簽在網(wǎng)頁中加入圖像的語法舉例：<imgsrc="image/tu.jpg"width="300"height="240"/>任務1.2使用HTML制作簡單的網(wǎng)頁3使用HTML制作網(wǎng)頁6．表格標簽表格由一行或多行組成，每行又由一個或多個單元格組成。HTML中一個表格通常是由<table>、<tr>、<td>3個標簽來定義的，這3個標簽分別表示表格、表格行、單元格。在對表格進行設置時，優(yōu)先順序為：單元格優(yōu)先于行，行優(yōu)先于表格。表格的基本結(jié)構(gòu)：<table><caption>表格標題</caption><tr><td>單元格1</td><td>單元格2</td>

</tr></table>3使用HTML制作網(wǎng)頁6．表格標簽（1）<table>標簽。它是一個容器標簽，用于定義一個表格。<table>常用屬性如下。width：設定表格的寬度，屬性值可以是相對的或絕對的。align：設定表格水平對齊方式，屬性值可以是left、center、right三者中之一。border：設定表格邊框的粗度，屬性值為整數(shù)、像素。cellpadding：設定邊距的大小，也就是單元格中內(nèi)容與單元格邊框之間留的空白大小，屬性值為整數(shù)，單位是像素。3使用HTML制作網(wǎng)頁cellspacing：設定單元格與單元格之間的距離，屬性值為整數(shù)，單位是像素。bgcolor：設定整個表格的背景顏色。background：設定表格的背景圖像，屬性值為圖像文件的相對路徑或絕對路徑。3使用HTML制作網(wǎng)頁（2）<tr>標簽。

用來標識表格行，是單元格（<td>或<th>）的容器，使用時要放在<table>容器里。<tr>常用的屬性如下。align：設定這一行單元格中內(nèi)容的水平對齊方式，屬性值為left、center或right。bgcolor：用來設定這一行的背景顏色。valign：設定這一行單元格中內(nèi)容的垂直對齊方式，可取屬性值有：top（頂端對齊）、middle（中間對齊）、bottom（底端對齊）。3使用HTML制作網(wǎng)頁（3）<td>標簽。表示一個單元格。align：設定單元格中內(nèi)容的水平對齊方式，屬性值為left、center或right。background：設定單元格的背景圖像。bgcolor：設定單元格的背景顏色。colspan：在水平方向向右合并單元格，屬性值為跨列的數(shù)目height：設定單元格的高度，屬性值可以是像素數(shù)，也可以是占整個表格高度的百分比。3使用HTML制作網(wǎng)頁nowrap：加入nowrap一詞可以防止單元格中內(nèi)容寬度大于單元格寬度時自動換行。rowspan：在垂直方向向下合并單元格，屬性值為跨行的數(shù)目。valign：設定單元格中內(nèi)容的垂直對齊方式，屬性值為top、middle或bottom。width：設定單元格的寬度，屬性值可以是像素數(shù)，也可以是占整個表格寬度的百分比。

3使用HTML制作網(wǎng)頁7．表單標簽表單的作用是從訪問Web站點的用戶那里獲取信息。訪問者可以使用諸如文本框、列表框、復選框以及單選按鈕等表單對象輸入信息，然后單擊某個按鈕提交這些信息。（1）<form>標簽。<form>用來定義一個表單區(qū)域，它是一個容器標簽。3使用HTML制作網(wǎng)頁（2）文本框。文本框允許用戶輸入單行信息。文本框常用屬性如下：name：設定文本框的名稱，必須唯一標識，名稱字符串中不能包含空格或特殊字符，可以使用字母、數(shù)字、字符和下畫線“_”的任意組合。表單提交到服務器后需要使用指定的名稱來獲取文本框的值。

value：設定文本框的默認值，即用戶輸入前文本框里顯示的文本。size：設定文本框最多可顯示的字符數(shù)，也就是文本框的長度。maxlength：用來設定文本框中最多可輸入的字符數(shù)。通過此屬性可以將郵政編碼限制為6位數(shù)，將密碼限制為10個字符等。<inputtype="text"/>3使用HTML制作網(wǎng)頁（3）密碼框。密碼框用來輸入密碼，當用戶在密碼框中輸入密碼時，輸入內(nèi)容顯示為項目符號或星號，以保護它不被其他人看到。定義密碼框的語法為:<inputname="textfield"type="password"id="textfield"size="8"maxlength="8"/>密碼框的屬性設置與文本框相同。

3使用HTML制作網(wǎng)頁（4）單選按鈕。使用戶只能從一組選項中選擇一個選項，如性別的選擇。定義單選按鈕的語法為：<inputtype="radio"/>name：設定單選按鈕的名稱。同一組中的所有單選按鈕，name屬性必須設置相同的值。value：設定在單選按鈕被選中時發(fā)送給服務器的值。checked：確定在瀏覽器中載入表單時，該單選按鈕是否被選中。如果開始標簽里加入checked一詞，則初始被選中。3使用HTML制作網(wǎng)頁（5）復選框。使用戶從一組選項中選擇多個選項。定義復選框的語法為：<inputtype="checkbox">name：設定復選框的名稱，作用同文本框的name。同一組中的所有復選框的name屬性必須設置不同的值。value：設定在復選框被選中時發(fā)送給服務器的值。checked：確定在瀏覽器中載入表單時，該復選框是否被選中。如果開始標簽里加入checked一詞，初始被選中。3使用HTML制作網(wǎng)頁（6）下拉菜單?？墒乖L問者從一個列表中選擇一個項目。下拉列表在瀏覽器中顯示時僅有一個選項可見，若要顯示其他選項，須單擊下拉箭頭。定義下拉菜單的語法為：<selectname="from"><optionvalue="shandong">山東省</option><optionselected>濟南市</option></select>3使用HTML制作網(wǎng)頁（8）文件域。用戶可以選擇計算機中的文件并將其上傳到服務器。文件域的外觀與其他文本框類似，只是文件域還包含一個“瀏覽”按鈕。用戶可以手動輸入要上傳的文件的路徑，也可以使用【瀏覽】按鈕定位并選擇文件。若要上傳文件，<form>的method屬性必須設置為post，<form>必須加上enctype="mu