《Web應用開發(fā)》課件-階段一 我的第一個網頁_第1頁
《Web應用開發(fā)》課件-階段一 我的第一個網頁_第2頁
《Web應用開發(fā)》課件-階段一 我的第一個網頁_第3頁
《Web應用開發(fā)》課件-階段一 我的第一個網頁_第4頁
《Web應用開發(fā)》課件-階段一 我的第一個網頁_第5頁
已閱讀5頁，還剩49頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

我的第一個網頁項目1任務目標

了解網頁的基礎知識

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

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

了解網頁的基礎知識

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

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

<head>

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

</head>

<body>

文檔主體

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

了解網頁的基礎知識

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

性

名功

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

簽功

能示

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

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

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

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

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

1：用阿拉伯數字1、2、3、…編號。

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

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

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

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

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

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

性

功

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

涵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制作網頁5．圖像標簽<img>標簽定義HTML頁面中的圖像，單標簽。使用<img>標簽在網頁中加入圖像的語法舉例：<imgsrc="image/tu.jpg"width="300"height="240"/>任務1.2使用HTML制作簡單的網頁3使用HTML制作網頁6．表格標簽表格由一行或多行組成，每行又由一個或多個單元格組成。HTML中一個表格通常是由<table>、<tr>、<td>3個標簽來定義的，這3個標簽分別表示表格、表格行、單元格。在對表格進行設置時，優(yōu)先順序為：單元格優(yōu)先于行，行優(yōu)先于表格。表格的基本結構：<table><caption>表格標題</caption><tr><td>單元格1</td><td>單元格2</td>

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

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

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

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

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

溫馨提示

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

評論

0/150

提交評論