網(wǎng)站設(shè)計(jì)講義

1、.1 網(wǎng)站設(shè)計(jì)開發(fā)網(wǎng)站設(shè)計(jì)開發(fā) 主講 王利民 07通信.2步驟：步驟：1、規(guī)劃項(xiàng)目和采集信息 2、網(wǎng)站規(guī)劃和設(shè)計(jì)網(wǎng)頁 3、上傳和維護(hù)網(wǎng)站階段 n WEB站點(diǎn)的定位n網(wǎng)站的性質(zhì)是指網(wǎng)站是教育等非贏利的網(wǎng)站還是贏利的商業(yè)網(wǎng)站等。n網(wǎng)站的分類：n教育網(wǎng)站n政府網(wǎng)站n商業(yè)網(wǎng)站n個(gè)人網(wǎng)站.4架構(gòu)：nB/SBrowser/ServerC/SCustom/Server.5 動(dòng)態(tài)網(wǎng)頁開發(fā)技術(shù)目前，最常用的三種動(dòng)態(tài)網(wǎng)頁語言有ASP(Active Server Pages),JSP(JavaServer Pages),PHP (Hypertext Preprocessor)。 nASP全名Active Serve

2、r Pages，是一個(gè)WEB服務(wù)器端的開發(fā)環(huán)境，利用它可以產(chǎn)生和執(zhí)行動(dòng)態(tài)的、互動(dòng)的、高性能的WEB服務(wù)應(yīng)用程序。ASP采用腳本語言VBScript（Java script）作為自己的開發(fā)語言。 nPHP是一種跨平臺(tái)的服務(wù)器端的嵌入式腳本語言。它大量地借用C,Java和Perl語言的語法, 并耦合PHP自己的特性,使WEB開發(fā)者能夠快速地寫出動(dòng)態(tài)產(chǎn)生頁面。它支持目前絕大多數(shù)數(shù)據(jù)庫。還有一點(diǎn)，PHP是完全免費(fèi)的，不用花錢，你可以從PHP官方站點(diǎn)(http: /)自由下載。而且你可以不受限制地獲得源碼，甚至可以從中加進(jìn)你自己需要的特色。 nnJSP是Sun公司推出的新一代網(wǎng)站開發(fā)語言，Sun公司借助

3、自己在Java上的不凡造詣，將Java從Java應(yīng)用程序和Java Applet之外，又有新的碩果，就是JSP，Java Server Page。JSP可以在Serverlet和JavaBean的支持下，完成功能強(qiáng)大的站點(diǎn)程序。 .9靜態(tài)網(wǎng)頁 靜態(tài)網(wǎng)頁是標(biāo)準(zhǔn)的HTML文件，其文件擴(kuò)展名是.htm或.html，它可以包含HTML標(biāo)記、文本、Java小程序及客戶端腳本，但這種網(wǎng)頁不包含任何服務(wù)器端腳本，在放置到Web服務(wù)器后便不再發(fā)生任何更改，所以稱之為靜態(tài)網(wǎng)頁。. 靜態(tài)網(wǎng)頁的處理流程n當(dāng)用戶單擊Web頁上的某個(gè)鏈接時(shí)，瀏覽器向Web服務(wù)器發(fā)送一個(gè)頁請求；nWeb服務(wù)器收到該請求，通過文件擴(kuò)展名.

4、htm或.html判斷出是HTML文件請求，并從磁盤或存儲(chǔ)器中獲取適當(dāng)?shù)腍TML文件；nWeb服務(wù)器將HTML文件發(fā)送到瀏覽器，由瀏覽器對該HTML文件進(jìn)行解釋，并將結(jié)果顯示在瀏覽器窗口中。.動(dòng)態(tài)網(wǎng)頁動(dòng)態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁之間的區(qū)別在于：n動(dòng)態(tài)網(wǎng)頁中的某些腳本只能在Web服務(wù)器上運(yùn)行，而靜態(tài)網(wǎng)頁中的任何腳本都不能在Web服務(wù)器上運(yùn)行；n動(dòng)態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁文件擴(kuò)展名不同，對于動(dòng)態(tài)網(wǎng)頁來說，其文件擴(kuò)展名不再是.htm或.html，而是與所使用的Web應(yīng)用開發(fā)技術(shù)有關(guān)，例如，使用JSP技術(shù)時(shí)文件擴(kuò)展名是.jsp等等。.12ASP+ Access 小型網(wǎng)站PHP+MySQL 中小型商業(yè)站點(diǎn)ASP.NET/

5、JSP+SQL Server、Oracle等.動(dòng)態(tài)網(wǎng)頁的處理流程n當(dāng)Web服務(wù)器接收到對靜態(tài)網(wǎng)頁的請求時(shí)，服務(wù)器將該頁發(fā)送到請求瀏覽器，而不進(jìn)行進(jìn)一步的處理。n當(dāng)Web服務(wù)器接收到對動(dòng)態(tài)網(wǎng)頁的請求時(shí)，它將做出不同的反應(yīng)：它將該頁傳遞給一個(gè)稱為應(yīng)用程序服務(wù)器的特殊軟件擴(kuò)展，然后由這個(gè)特殊軟件負(fù)責(zé)完成頁。n使用不同的Web開發(fā)技術(shù)創(chuàng)建動(dòng)態(tài)網(wǎng)頁時(shí)，所用的應(yīng)用程序服務(wù)器軟件也是各不相同的。n確定網(wǎng)頁的主題、內(nèi)容，名稱n組織規(guī)劃內(nèi)容：選擇網(wǎng)頁布局方式網(wǎng)站的欄目和版塊、設(shè)計(jì)LOGO網(wǎng)站的目錄結(jié)構(gòu) 網(wǎng)站的導(dǎo)航與鏈接 n搜集圖片素材n選擇網(wǎng)頁配色方案n選擇網(wǎng)頁制作工具n網(wǎng)站發(fā)布與宣傳n網(wǎng)站的維護(hù)與更新 網(wǎng)頁布

6、局網(wǎng)頁布局“國”字型 也可以稱為“同”字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是我們在網(wǎng)上見到的差不多最多的一種結(jié)構(gòu)類型。 .n拐角型：這種結(jié)構(gòu)與上一種其實(shí)只是形式上的區(qū)別，其實(shí)是很相近的，上面是標(biāo)題及廣告橫幅，接下來的左側(cè)是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。在這種類型中，一種很常見的類型是最上面是標(biāo)題及廣告，左側(cè)是導(dǎo)航鏈接。 . 網(wǎng)頁特效展示nHTML語言和客戶端腳本語句Javascript、V

7、BScript結(jié)合使用，實(shí)現(xiàn)網(wǎng)頁的各種動(dòng)態(tài)特效.20 基本的HTML知識(shí).21HTML 簡介提供鏈接到其他頁面或同一頁面的其他位置的文本可以用標(biāo)簽標(biāo)記頁面的不同部分以正確顯示語言HTML 可用于：可用于：控制頁面和內(nèi)容的外觀發(fā)布和檢索聯(lián)機(jī)文檔創(chuàng)建聯(lián)機(jī)表單插入諸如音頻剪輯和視頻剪輯等對象.22HTML 文檔示例學(xué)習(xí) HTML歡迎來到 HTML 世界HTML 代碼瀏覽器處理代碼并進(jìn)行顯示.23HTML 文檔結(jié)構(gòu)學(xué)習(xí) HTML 歡迎來到 HTML 世界HTML 網(wǎng)頁網(wǎng)頁頭部部分頭部部分主體部分主體部分標(biāo)簽標(biāo)記 HTML 文檔的開始和結(jié)束這部分包括標(biāo)題和其他說明信息。包括在 標(biāo)簽內(nèi)這部分包含文本、圖像

8、和鏈接。它包括在 標(biāo)簽內(nèi).24HTML 標(biāo)簽 2-2學(xué)習(xí) HTML 歡迎來到 HTML 世界標(biāo)簽標(biāo)識(shí) BODY 元素屬性屬性提供有關(guān)元素的附加信息值分配給屬性的內(nèi)容.25META 標(biāo)簽 2-1nMETA 標(biāo)簽是一個(gè)特殊的 HTML 標(biāo)簽，提供有關(guān)網(wǎng)頁的信息，如作者姓名、公司名稱和聯(lián)系信息等n許多搜索引擎都使用 META 標(biāo)簽信息n例如，要將 Graham Browne 指定為作者，則使用以下 META 標(biāo)簽： .26META 標(biāo)簽 2-2nhttp-equiv 屬性可用來代替 META 標(biāo)簽中的 name 屬性 表示有效期：格林尼治標(biāo)準(zhǔn)時(shí)間 2011 年 9 月 14 日，星期三 14:25:

9、27 一旦網(wǎng)頁過期，必須到服務(wù)器上重新傳輸。 屬性值：具體的過期時(shí)間屬性名稱：網(wǎng)頁過期 表示每隔2秒，自動(dòng)刷新網(wǎng)頁 .27HTML 基本元素n標(biāo)題 n段落n換行符n預(yù)先格式化n字符格式化n列表n水平線n字體n圖像n特殊字符n超級鏈接.28標(biāo)題動(dòng)物世界從大自然獲得靈感從大自然獲得靈感從大自然獲得靈感從大自然獲得靈感從大自然獲得靈感從大自然獲得靈感H1 到到 H6 標(biāo)簽用于指定不同級別的標(biāo)題標(biāo)簽用于指定不同級別的標(biāo)題.29段落標(biāo)簽詩詞學(xué)習(xí)我是第一段我是第二段左對齊顯示居中顯示右對齊顯示 標(biāo)簽用于標(biāo)記段落標(biāo)簽用于標(biāo)記段落.30換行符文本中 (break)標(biāo)簽，就會(huì)強(qiáng)制換行 ，一般不用。詩詞學(xué)習(xí)我是第

10、一行我是第二行 我是第一段我是第二段.31 標(biāo)簽詩詞學(xué)習(xí)詩詞學(xué)習(xí)靜夜思靜夜思 床前明月光床前明月光 疑是地上霜疑是地上霜 舉頭望明月舉頭望明月 低頭思故鄉(xiāng)低頭思故鄉(xiāng) HTML 標(biāo)簽用于顯示具有預(yù)先定義格式的文本（如 HTML 文檔中所示）該元素中的文本保留空格、換行符，文本為等寬字體。該元素中的文本保留空格、換行符，文本為等寬字體。32字符格式化標(biāo)簽學(xué)習(xí) HTML這很有趣這很有趣 -粗體足球是最令人喜愛的運(yùn)動(dòng)之一足球是最令人喜愛的運(yùn)動(dòng)之一。信息技術(shù)是發(fā)展的關(guān)鍵信息技術(shù)是發(fā)展的關(guān)鍵。 水的分子式是水的分子式是 H 2 O。 3 2 等于等于 9。 這類標(biāo)簽用于對文本應(yīng)用各種格式，如粗體、斜體、下

11、劃線、下標(biāo)、上標(biāo)等樣式表來取得更加豐富的效果樣式表來取得更加豐富的效果.33列表簡介n列表用于按邏輯方式對數(shù)據(jù)分組 玫瑰花向日葵蘭花蘋果桔子水仙芒果水果 蘋果 芒果 桔子花卉 水仙 蘭花 向日葵 玫瑰花.34列表類型：無序列表 星期中的每一天星期日星期一星期二星期三星期四星期五星期六無序列表也稱為“項(xiàng)目列表”.35星期中的每一天星期日星期一星期二星期三星期四星期五星期六 列表類型：有序列表 在有序列表中，列表項(xiàng)以自動(dòng)生成的順序顯示 .36使用水平線動(dòng)物世界老虎的夜間視覺 老虎的夜視能力優(yōu)于人類的夜視能力五倍以上 標(biāo)簽屬性 alignWidthSizeNoshade 標(biāo)簽用于在頁面上繪制水平線

12、（Horizontal Rule） .37使用字體和屬性動(dòng)物世界了解有關(guān)動(dòng)物的更多信息斑馬的特性沒有任何兩匹斑馬的斑紋是完全一樣的，因此每匹斑馬都是獨(dú)一無二的 可以按名稱或十六進(jìn)制值指定顏色可以為字體指定的大小范圍為從 1 到 7可以指定一列字體，各字體間用逗號(hào)分隔。瀏覽器以最先找到的字體顯示文本 元素及其相關(guān)屬性（如 SIZE、COLOR 和 FACE）可用于控制網(wǎng)頁上文本的顯示 .38插入圖像 2-1 標(biāo)簽用于在 HTML 文檔中插入圖像。 標(biāo)簽的兩個(gè)常用屬性是 SRC 和 ALIGN。SRC 屬性用于指定要插入的圖像位置。ALIGN 屬性用于指定圖像相對于文本的對齊方式。.39插入圖像

13、2-2動(dòng)物世界讓我們看看這些可愛的動(dòng)物底部對齊頂部對齊居中對齊 .40插入特殊字符 2-1n某些字符在 HTML 中具有特殊意義，如小于號(hào) ( 空格 ；.41插入特殊字符 2-2特殊字符特殊字符字符實(shí)體字符實(shí)體大于號(hào) () > > 小于號(hào) () << 引號(hào) (“) " " ® ® © © & 號(hào)& & .42創(chuàng)建超級鏈接動(dòng)物會(huì)彈琴的狗狗會(huì)彈琴的狗狗 單擊此處查看單擊此處查看.43絕對和相對路徑

14、名要鏈接到另一目錄 (C:example) 下的頁面，可編寫 或 要鏈接到同一目錄 (C:html) 下的頁面，可編寫 或 C:html 目錄目錄C:example目錄目錄Doc1.htmDoc3.htmDoc2.htmDoc4.htm絕對路徑名絕對路徑名相對路徑名相對路徑名.44鏈接到同一文檔的某個(gè)部分2-1n錨記標(biāo)簽用于使用戶“跳”到文檔的某個(gè)部分 nHTML 的 NAME 屬性用于創(chuàng)建錨標(biāo)記 n為達(dá)到這種跳轉(zhuǎn)效果，請?jiān)?HREF 參數(shù)中使用該標(biāo)記主題名稱主題名稱.45鏈接到同一文檔的各個(gè)部分2-2. . .獅子斑馬印度豹獅子獅子的吼聲從八公里之外就能聽到！雄獅（很容易從鬃毛識(shí)別出雌雄）的

15、重量達(dá) 250 公斤。而雌獅則要輕得多，只有 180 公斤。斑馬沒有任何兩匹斑馬的斑紋完全一樣，因此每匹斑馬都是獨(dú)一無二的。斑馬也稱為黑白條紋相間的馬.演示:錨鏈接例子.46鏈接到其他文檔的特定位置讓我們深入了解一些動(dòng)物獅子斑馬印度豹Animals.htm獅子獅子的吼聲從八公里之外就能聽到！雄獅（很容易從鬃毛識(shí)別出雌雄）的重量達(dá) 250 公斤。而雌獅則要輕得多，只有 180 公斤。Animaldetails.htm.47電子郵件鏈接n用戶可從網(wǎng)頁發(fā)送電子郵件海豚充分交流，密切配合據(jù)說，海豚的交流模式幾乎與人類的一樣復(fù)雜！請將您的疑問發(fā)送至 David Fernandez.表格行行列列列標(biāo)題在在

16、 HTML 文檔中，廣泛使用表格來存放網(wǎng)頁上的文本和圖像文檔中，廣泛使用表格來存放網(wǎng)頁上的文本和圖像單元格單元格表格標(biāo)題.使用表格 姓名 性別 分?jǐn)?shù) Robert M 80 .創(chuàng)建表格 代表表格的開始，border=2表示邊框尺寸為2表示行，這是表格的第一行，有三列數(shù)據(jù)，代表列 表格的第二行，有三列數(shù)據(jù)表格的第三行，也有三列數(shù)據(jù).學(xué)員檔案信息 姓名 性別 分?jǐn)?shù) Robert M 80 .表格的標(biāo)題表示表格標(biāo)題表示行或列標(biāo)題，粗體顯示 表格的第二行，有三列數(shù)據(jù)表格的第三行，有三列數(shù)據(jù). 學(xué)員檔案信息 姓名 性別 分?jǐn)?shù) Robert M 80 .表格的對齊方式整個(gè)表格居中姓名列默認(rèn)左對齊 性別列居

17、中 分?jǐn)?shù)列右對齊 .合并單元格(跨列)創(chuàng)建表格 第一學(xué)期第二學(xué)期 數(shù)學(xué) 科學(xué) 英語 數(shù)學(xué) 科學(xué) 英語 98 95 80 95 87 88. COLSPAN=“n” 屬性表示屬性表示跨多少列跨多少列 .合并單元格(跨行)創(chuàng)建表格 螺母 螺栓 錘子 第一季度一月250010001240 二月300025004000 .ROWSPAN=“n” 屬性表示屬性表示跨多少行跨多少行 . 學(xué)員檔案信息 姓名 性別 分?jǐn)?shù) Robert M 80 Mary F 18 表格的背景色和尺寸設(shè)置 表格的顏色設(shè)置：表格的背景色 行的背景色 列的背景色 顏色值可以采用 RGB（red/green/blue）紅綠藍(lán)十六進(jìn)制

18、值表示，如紅色#FF0000, 或是一些預(yù)定義色彩名稱：red ，blue，yellow等。表格的尺寸設(shè)置：例如：表示一個(gè)長為200像素，寬為100像素的表格。表示一個(gè)寬為窗口的20%，高為窗口的10%的表格。1880分?jǐn)?shù)FM性別MaryRobert姓名學(xué)員檔案信息學(xué)員檔案信息METHOD =“post或或get”表單ACTIONMETHOD指定提交后由服務(wù)器上哪個(gè)處理程序處理指定向服務(wù)器提交的方法:一般為post或get方法, post方法比較安全 ACTION = “URL” .表單輸入元素-1 Type此屬性指定元素的類型。元素類型可以有多種選擇：TEXT、PASSWORD、CHECKB

19、OX、RADIO、SUBMIT、RESET、FILE、HIDDEN 和 BUTTON。默認(rèn)選擇為 TEXT。Name此屬性指定控件的名稱。例如，如果表單中有幾個(gè)文本框，則可以用名稱 TEXT1、TEXT2 或選擇的任何名稱來標(biāo)識(shí)它們。Name 屬性的作用域是在 FORM 元素內(nèi)。Value此屬性是可選屬性，它指定控件的初始值。但是，如果 TYPE 為 RADIO，則必須指定一個(gè)值。Size此屬性指定控件的初始寬度。如果 TYPE 為 TEXT 或 PASSWORD，則控件的大小以字符為單位。對于其他輸入類型，寬度以像素為單位。 Maxlength 此屬性用于指定可在 TEXT 或 PASSWO

20、RD 元素中輸入的最大字符數(shù)。Checked此屬性是 Boolean 屬性，指定按鈕是否是打開的。當(dāng)輸入類型為 RADIO 或 CHECKBOX 時(shí)，使用此屬性。文本框、按鈕、單選按鈕、復(fù)選框等都是輸入元素。表單輸入元素-2 BUTTON（按鈕）（按鈕）Type 屬性：屬性：submit：提交按鈕reset：重置按鈕button：普通按鈕表單輸入元素-3身份證號(hào) TEXT（文本）（文本）密 碼： 請?zhí)顚懩墓ぷ鹘?jīng)歷表單輸入元素-4性別：男性女性 單選按鈕和復(fù)選框單選按鈕和復(fù)選框 你喜歡以下哪些明星： 酒井法子 鄭秀文 BonJovi表單輸入元素-6 下拉菜單 誰是 2008 年奧運(yùn)會(huì)冠軍？西班

21、牙中國巴西德國列表選項(xiàng).設(shè)置屬性 這個(gè)段落應(yīng)用了樣式這個(gè)段落按默認(rèn)樣式顯示什么是樣式？css指定顯示樣式樣式規(guī)則.常用的樣式屬性屬 性CSS名稱說說 明明顏色 color文本屬性font-size字體大小font-family字體text-align文本對齊邊框?qū)傩?用于表單元素) border-style邊框樣式border-width邊框?qū)挾?border-color邊框顏色 定位屬性(position)top頂部邊距（上邊距）left左邊距width寬度height高度z-indexz 軸索引號(hào)，用于層根據(jù)樣式代碼的位置，分為三類：q行內(nèi)樣式q內(nèi)嵌樣式q外部樣式樣式的分類 在最后一個(gè)聲明后面加上一個(gè)分號(hào)在最后一個(gè)聲明后面加上一個(gè)分號(hào) (;) 是一個(gè)好習(xí)慣是一個(gè)好習(xí)慣.鏈接外部樣式表使用LINK（鏈接）標(biāo)簽 ，語法：第一步：創(chuàng)建樣式表文件newstyle.css 第二步：把樣式文件和網(wǎng)頁關(guān)聯(lián)樣式文件：樣式文件：newstyle.css P.Onel.htmanother.htm 第三步：瀏覽查看各網(wǎng)頁.導(dǎo)入外部樣式表使