基本網(wǎng)絡(luò)開(kāi)發(fā)技術(shù).ppt

基本網(wǎng)絡(luò)開(kāi)發(fā)技術(shù) 網(wǎng)站規(guī)劃設(shè)計(jì)HTMLJavaScript語(yǔ)言 網(wǎng)站規(guī)劃設(shè)計(jì)概述 網(wǎng)站規(guī)劃設(shè)計(jì)是指在網(wǎng)站建設(shè)前對(duì)市場(chǎng)進(jìn)行分析 確定網(wǎng)站的目的和功能 并根據(jù)需要對(duì)網(wǎng)站建設(shè)中的技術(shù) 內(nèi)容 費(fèi)用 測(cè)試 維護(hù)等做出規(guī)劃 編寫(xiě)網(wǎng)站設(shè)計(jì)的計(jì)劃書(shū)確定網(wǎng)站設(shè)計(jì)總體思想 即網(wǎng)站設(shè)計(jì)如何能實(shí)現(xiàn)網(wǎng)站規(guī)劃中提出的目標(biāo) 以及網(wǎng)站的風(fēng)格和特點(diǎn) 網(wǎng)頁(yè)的外觀與使用方面的特點(diǎn)確定網(wǎng)站提供的內(nèi)容網(wǎng)站交互設(shè)計(jì) 如信息反饋 意見(jiàn)調(diào)查等對(duì)網(wǎng)站的內(nèi)容進(jìn)行分類(lèi)設(shè)計(jì)網(wǎng)頁(yè)必有的內(nèi)容 如公司標(biāo)志 聯(lián)系方法和導(dǎo)航條等制作網(wǎng)頁(yè)的模板檢查網(wǎng)頁(yè)的鏈接根據(jù)需要修改不合適的地方正式發(fā)布網(wǎng)站 網(wǎng)站設(shè)計(jì)流程 網(wǎng)站規(guī)劃設(shè)計(jì) 確定網(wǎng)站的類(lèi)型 門(mén)戶網(wǎng)站搜索引擎電子商務(wù)網(wǎng)站數(shù)據(jù)中心主題信息網(wǎng)站團(tuán)體網(wǎng)站個(gè)人網(wǎng)站 網(wǎng)站規(guī)劃設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì)規(guī)劃 1 確定網(wǎng)頁(yè)的整體風(fēng)格 2 設(shè)計(jì)網(wǎng)頁(yè)框架 個(gè)人網(wǎng)頁(yè)框架草圖 網(wǎng)站規(guī)劃設(shè)計(jì) 網(wǎng)頁(yè)欄目規(guī)劃 網(wǎng)頁(yè)欄目規(guī)劃是確定不同網(wǎng)頁(yè)之間的邏輯關(guān)系 如先后關(guān)系 包含關(guān)系 并列關(guān)系等 多個(gè)網(wǎng)頁(yè)按照它們之間的邏輯關(guān)系組織在一起形成一個(gè)邏輯結(jié)構(gòu) 常見(jiàn)的邏輯結(jié)構(gòu) 層次型結(jié)構(gòu) 線性結(jié)構(gòu)和網(wǎng)狀型結(jié)構(gòu) 網(wǎng)站規(guī)劃設(shè)計(jì) 1 線性結(jié)構(gòu) 最簡(jiǎn)單 網(wǎng)頁(yè)按一定的先后順序鏈接起來(lái) 用戶沒(méi)有完成上一個(gè)網(wǎng)頁(yè)的訪問(wèn)就無(wú)法進(jìn)入下一個(gè)網(wǎng)頁(yè) 常用于需按步驟進(jìn)行的欄目 如 用戶注冊(cè) 下訂單 教程等 網(wǎng)站規(guī)劃設(shè)計(jì) 2 層次結(jié)構(gòu) 按照網(wǎng)頁(yè)之間的包含關(guān)系組織而成 其形狀像一個(gè)倒置的樹(shù) 簡(jiǎn)單直觀 內(nèi)容結(jié)構(gòu)清晰 便于理解 幾乎所有的網(wǎng)站都采用這種結(jié)構(gòu)來(lái)進(jìn)行總體欄目規(guī)劃 網(wǎng)站規(guī)劃設(shè)計(jì) 3 網(wǎng)狀結(jié)構(gòu) 是指多個(gè)網(wǎng)頁(yè)相互之間都超鏈接的一種結(jié)構(gòu) 這些網(wǎng)頁(yè)可以是層次結(jié)構(gòu)上的任意網(wǎng)頁(yè) 但因?yàn)閷?dǎo)航的需要或內(nèi)容上的相關(guān)而鏈接在一起 網(wǎng)站規(guī)劃設(shè)計(jì) 欄目規(guī)劃的任務(wù) 確定必需的欄目確定重點(diǎn)欄目建立層次型結(jié)構(gòu)設(shè)計(jì)每一個(gè)欄目 網(wǎng)站規(guī)劃設(shè)計(jì) 目錄結(jié)構(gòu)設(shè)計(jì) 不要將所有的文件都放在根目錄下根據(jù)欄目規(guī)劃來(lái)設(shè)計(jì)目錄結(jié)構(gòu)每個(gè)目錄下都建立獨(dú)立的images子目錄目錄的層次不要太深不要使用中文目錄名可執(zhí)行文件和不可執(zhí)行文件分開(kāi)放置數(shù)據(jù)庫(kù)文件單獨(dú)放置 網(wǎng)站規(guī)劃設(shè)計(jì) 網(wǎng)站的建設(shè)技術(shù) 靜態(tài)網(wǎng)頁(yè)技術(shù) HTML 動(dòng)態(tài)網(wǎng)頁(yè)技術(shù) Javascript Java JSP ASP PHP CGI等 網(wǎng)頁(yè)的基本元素 文本圖片和動(dòng)畫(huà)聲音和視頻超鏈接表格表單導(dǎo)航欄其它常見(jiàn)元素 網(wǎng)站規(guī)劃設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì)工具 1 網(wǎng)頁(yè)制作工具 文本編輯器FrontPageDreamweaverAdobePagemill 2 網(wǎng)頁(yè)圖形圖像處理工具 FireworksPhotoshopCorelDraw 3 網(wǎng)頁(yè)動(dòng)畫(huà)制作與特效工具 FlashUleadGifAnimator 網(wǎng)站規(guī)劃設(shè)計(jì) 網(wǎng)頁(yè)三劍客 Adobe公司的Dreamweaver Fireworks和Flash系列產(chǎn)品 素有網(wǎng)頁(yè) 三劍客 之稱(chēng) 它們是專(zhuān)門(mén)用于網(wǎng)頁(yè)制作和站點(diǎn)管理的軟件 其中Dreamweaver被大家稱(chēng)為 織夢(mèng)者 眾多專(zhuān)業(yè)網(wǎng)站和個(gè)人主頁(yè)都把它列為首選工具 Flash是 三劍客 中的 閃電 其以網(wǎng)上動(dòng)畫(huà)為特長(zhǎng) 它做出的動(dòng)畫(huà)效果真是精美致極 Fireworks是 三劍客 中的 火焰 它以處理頁(yè)面圖片為特長(zhǎng) 并可以輕松制作GIF動(dòng)畫(huà) 設(shè)計(jì)制作好的網(wǎng)站頁(yè)面文件 需要在Intenet上發(fā)布 才可以讓互聯(lián)網(wǎng)上的用戶訪問(wèn) 網(wǎng)站發(fā)布方法 1 個(gè)人服務(wù)器上發(fā)布 如果擁有一臺(tái)獨(dú)立固定的IP地址 可以將本機(jī)配置成Web服務(wù)器 即可發(fā)布網(wǎng)站 2 專(zhuān)用服務(wù)器上發(fā)布 可以向ISP或網(wǎng)絡(luò)公司申請(qǐng)專(zhuān)用服務(wù)器或虛擬主機(jī)空間來(lái)發(fā)布網(wǎng)站 網(wǎng)站發(fā)布 網(wǎng)站空間和域名申請(qǐng) 網(wǎng)站空間獲得的兩種方式 租用虛擬主機(jī) 申請(qǐng)免費(fèi)空間 選擇空間注意事項(xiàng) 空間大小 支持環(huán)境 ASP PHP CGI等 及數(shù)據(jù)庫(kù)情況 訪問(wèn)與鏈接速度 FTP上傳功能 服務(wù)商信譽(yù)度等 通過(guò)搜索引擎查找 免費(fèi)空間 或 免費(fèi)建站資源 有些服務(wù)商申請(qǐng)域名贈(zèng)送空間 有的收費(fèi)也十分低廉 如10元 月 選擇方式很多 網(wǎng)站發(fā)布 HTML概述 1 什么是HTML HTML HyperTextMarkuplanguage 超文本標(biāo)簽語(yǔ)言 一種用來(lái)專(zhuān)門(mén)制作超文本文檔的簡(jiǎn)單標(biāo)簽語(yǔ)言 Html文件包括文檔數(shù)據(jù)和顯示格式兩個(gè)部分 文檔數(shù)據(jù)顯示在WWW瀏覽器中的數(shù)據(jù)內(nèi)容 顯示格式規(guī)定了要顯示的內(nèi)容以何種方式呈現(xiàn)給用戶 HTML通過(guò)利用各種標(biāo)簽文檔的結(jié)構(gòu)以及標(biāo)識(shí)超級(jí)鏈接的信息 HTML文件是純文本文件 擴(kuò)展名 htm或html 可用任何文本編輯器來(lái)編輯 如記事本 可視化編輯軟件Frontpage Dreamweaver等 還可由Web服務(wù)器實(shí)時(shí)動(dòng)態(tài)生成 HTML概述 網(wǎng)頁(yè)文件命名 htm或 html無(wú)空格無(wú)特殊符號(hào) 例如 符號(hào) 只可以有下劃線 只可以為英文 數(shù)字區(qū)分大小寫(xiě)首頁(yè)文件名默認(rèn)為 index htm或index html 編輯器和瀏覽器 學(xué)習(xí)HTML歡迎來(lái)到HTML世界 HTML代碼 在編輯器中編寫(xiě)HTML代碼 瀏覽器顯示HTML文檔 頁(yè)面 HTML文檔結(jié)構(gòu) 學(xué)習(xí)HTML歡迎來(lái)到HTML世界 HTML網(wǎng)頁(yè) 頭部部分 主體部分 標(biāo)簽標(biāo)簽HTML文檔的開(kāi)始和結(jié)束 文檔標(biāo)簽 這部分包括標(biāo)題和其他說(shuō)明信息 包括在 標(biāo)簽內(nèi) 這部分包含文本 圖像和鏈接 它包括在 標(biāo)簽內(nèi) HTML基本標(biāo)簽 1 標(biāo)簽的語(yǔ)法 標(biāo)簽分為單標(biāo)簽和雙標(biāo)簽兩種類(lèi)型 單標(biāo)簽 只需單獨(dú)使用 語(yǔ)法 如表示換行 雙標(biāo)簽 由首標(biāo)簽和尾標(biāo)簽構(gòu)成 須成對(duì)使用 語(yǔ)法 文檔內(nèi)容標(biāo)簽 雙標(biāo)簽的首標(biāo)簽 內(nèi)可包含一些屬性 語(yǔ)法 如 2 常用標(biāo)簽及其屬性 文檔標(biāo)簽 HTML基本標(biāo)簽 排版標(biāo)簽 排版標(biāo)簽 詩(shī)詞學(xué)習(xí)我是第一段我是第二段左對(duì)齊顯示居中顯示右對(duì)齊顯示 標(biāo)簽用于標(biāo)簽段落 排版標(biāo)簽 只要在文本中放入標(biāo)簽 就會(huì)強(qiáng)制換行 詩(shī)詞學(xué)習(xí)我是第一行我是第二行我是第一段我是第二段 排版標(biāo)簽 動(dòng)物世界老虎的夜間視覺(jué)老虎的夜視能力優(yōu)于人類(lèi)的夜視能力五倍以上 標(biāo)簽用于在頁(yè)面上繪制水平線 排版標(biāo)簽 稱(chēng)為居中標(biāo)簽 作用 令文字 圖片 表格等顯示于中間 雖然很多標(biāo)簽已有align CENTER 的參數(shù) 但還是常用的標(biāo)簽之一 其簡(jiǎn)單易用 常用于文字上 排版標(biāo)簽 稱(chēng)為預(yù)設(shè)格式標(biāo)簽 作用 令文件按照原始碼的排列方式顯示 這標(biāo)簽允許保留原始碼中輸入的空白及Return 仔細(xì)看下列例子 除了運(yùn)用一大堆表格標(biāo)簽之外 只有采用該標(biāo)簽才能有此效果 排版標(biāo)簽 稱(chēng)為區(qū)隔標(biāo)簽 作用 設(shè)定文字 圖像 表格等的擺放位置 應(yīng)用于StyleSheet 式樣表 方面會(huì)更顯威力 它最終目的是給設(shè)計(jì)者另一種組織能力 有Class Style title ID等屬性 這里只介紹一個(gè)屬性設(shè)定 以為例 align center 可選值 center left right 決定文字 圖像 表格等居中 靠左或靠右 的作用和居中標(biāo)簽一樣 字體標(biāo)簽 字體標(biāo)簽包括 字體加粗標(biāo)簽 字體斜體效果 字體加線 上標(biāo)字 下標(biāo)字 字體變粗變大加寬 設(shè)定字形 大小 顏色 字體標(biāo)簽 兩者皆能產(chǎn)生字體加粗的效果 字體標(biāo)簽 這些標(biāo)簽于InternetExplorer都產(chǎn)生斜體效果 這些標(biāo)簽中只有較為特別 因它包括換行效果 所以不必在它前面加上標(biāo)簽 字體標(biāo)簽 可令每字母有相等寬度且每字母之間的距離稍為加寬 是加底線的標(biāo)簽 一些特別的瀏覽器并不支持 因顧慮到與鏈接混淆 加上刪除線的標(biāo)簽 令字體加大 令字體變細(xì) 為下標(biāo)字 則為上標(biāo)字 僅剩的數(shù)學(xué)標(biāo)簽 字體標(biāo)簽 這些是標(biāo)題標(biāo)簽 由至變粗變大加寬的程度逐漸減小 每個(gè)標(biāo)題標(biāo)簽所標(biāo)示的字句將獨(dú)占一行且上下留一空白行 字體標(biāo)簽 這兩個(gè)標(biāo)簽的參數(shù)設(shè)定是一樣的 都是設(shè)定文字的大小 字形及顏色 但各有用處 且看以下比較 a 可以用于文件的開(kāi)頭部分 即與之間的位置 將影響全文字句 是一個(gè)空標(biāo)簽 用以改變字體顯示的默認(rèn)值 b 是應(yīng)用于文件的內(nèi)文部分 即與之間的位置 只影響所標(biāo)示的字句 是一個(gè)雙標(biāo)簽 兩標(biāo)簽可同時(shí)存在 凡沒(méi)被所標(biāo)示的字句才直接受所影響 而本身亦受的影響 字體標(biāo)簽 字體標(biāo)簽 動(dòng)物世界了解有關(guān)動(dòng)物的更多信息斑馬的特性沒(méi)有任何兩匹斑馬的斑紋是完全一樣的 因此每匹斑馬都是獨(dú)一無(wú)二的 可以按名稱(chēng)或十六進(jìn)制值指定顏色 可以為字體指定的大小范圍為從1到7 可以指定一列字體 各字體間用逗號(hào)分隔 瀏覽器以最先找到的字體顯示文本 元素及其相關(guān)屬性 如SIZE COLOR和FACE 可用于控制網(wǎng)頁(yè)上文本的顯示 清單 列表 標(biāo)簽 清單標(biāo)簽 稱(chēng)為順序清單標(biāo)簽 則用以標(biāo)示清單項(xiàng)目 所謂順序清單就是在每一項(xiàng)前面加上1 2 3 等編號(hào) 又稱(chēng)編號(hào)清單 每個(gè)列表前必須加上標(biāo)簽 的參數(shù)設(shè)定 常用 例如 type i 設(shè)定編號(hào)樣式 其值有五種 請(qǐng)參考表 默認(rèn)type 1 start 4 設(shè)定開(kāi)始編號(hào) 不論設(shè)定了哪一編號(hào)樣式 其值只能是1 2 3 等整數(shù) 默認(rèn)start 1 清單標(biāo)簽 稱(chēng)為無(wú)序清單標(biāo)簽 所謂無(wú)序清單就是在每一項(xiàng)前面加上等符號(hào) 故又稱(chēng)符號(hào)清單 的參數(shù)設(shè)定 常用 例如type square 設(shè)定符號(hào)樣式 其值有三種 默認(rèn)為type disc 當(dāng)type disc 時(shí)的列項(xiàng)符號(hào)為實(shí)心圓點(diǎn) 當(dāng)type circle 時(shí)的列項(xiàng)符號(hào)為空心小方塊 當(dāng)type square 時(shí)的列項(xiàng)符號(hào)為實(shí)心小方塊 表格標(biāo)簽 表格標(biāo)簽 列 在HTML文檔中 廣泛使用表格來(lái)存放網(wǎng)頁(yè)上的文本和圖像 單元格 行 列標(biāo)題 表格標(biāo)簽 綜合應(yīng)用 創(chuàng)建表格 使用表格姓名性別分?jǐn)?shù)RobertM80 代表表格的開(kāi)始 border 2表示邊框尺寸為2 表示行 這是表格的第一行 有三列數(shù)據(jù) 代表列 表格的第二行 有三列數(shù)據(jù) 表格的第三行 也有三列數(shù)據(jù) 表格標(biāo)簽 綜合應(yīng)用 表格標(biāo)題 學(xué)員檔案信息姓名性別分?jǐn)?shù)RobertM80 表示表格標(biāo)題 表示行或列標(biāo)題 粗體顯示 表格的第二行 有三列數(shù)據(jù) 表格的第三行 有三列數(shù)據(jù) 表格標(biāo)簽 綜合應(yīng)用 表格對(duì)齊方式 學(xué)員檔案信息姓名性別分?jǐn)?shù)RobertM80 整個(gè)表格居中 姓名列默認(rèn)左對(duì)齊 性別列居中 分?jǐn)?shù)列右對(duì)齊 創(chuàng)建表格第一學(xué)期第二學(xué)期數(shù)學(xué)科學(xué)英語(yǔ)數(shù)學(xué)科學(xué)英語(yǔ)989580958788 COLSPAN n 屬性表示跨多少列 表格綜合應(yīng)用 合并單元格 跨列 創(chuàng)建表格螺母螺栓錘子第一季度一月250010001240二月300025004000 ROWSPAN n 屬性表示跨多少行 表格綜合應(yīng)用 合并單元格 跨行 表格綜合應(yīng)用 背景和尺寸設(shè)置 學(xué)員檔案信息姓名性別分?jǐn)?shù)RobertM80MaryF18 表格的顏色設(shè)置 表格的背景色行的背景色列的背景色顏色值可以采用RGB red green blue 紅綠藍(lán)十六進(jìn)制值表示 如紅色 FF0000 或是一些預(yù)定義色彩名稱(chēng) red blue yellow等 表單標(biāo)簽 表單的概念 表單在Web網(wǎng)頁(yè)中用來(lái)給訪問(wèn)者填寫(xiě)信息 從而能獲得用戶信息 使網(wǎng)頁(yè)具有交互能力 表單標(biāo)簽 稱(chēng)為表單標(biāo)簽 用以創(chuàng)建表單 是雙標(biāo)簽 表示其它表單標(biāo)簽需要在它的包圍中才有效 標(biāo)簽提供了用戶輸入數(shù)據(jù)的常用控件 通過(guò)參數(shù)Type來(lái)指定控件的類(lèi)型 Type可選值為T(mén)ext Radio Checkbox Password Submit Reset Image File Hidden Button 表單標(biāo)簽 輸入方式1 Text 單行文本框 表單標(biāo)簽 輸入方式2 Radio 單選按鈕 輸入方式3 Checkbox 復(fù)選框 表單標(biāo)簽 輸入方式4 Password 密碼框 輸入方式5 Submit 提交按鈕 Reset 清除按鈕 表單標(biāo)簽 輸入方式6 Image 提交圖片 輸入方式7 File 文件上傳 表單標(biāo)簽 輸入方式8 Button 按鈕控件 用來(lái)創(chuàng)建一個(gè)下拉列表框 每一選項(xiàng)皆由所標(biāo)示 表單標(biāo)簽 表單標(biāo)簽 是表單文字區(qū)塊標(biāo)簽 常用于創(chuàng)建一個(gè)多行文本框 表單標(biāo)簽 表單標(biāo)簽 綜合例子 2004年歐錦賽預(yù)測(cè) 最佳球員 RonaldoBeckhamZidane預(yù)測(cè)大賽亞軍巴西法國(guó)阿根廷預(yù)測(cè)誰(shuí)將成為2004年歐錦賽冠軍 閱讀代碼 請(qǐng)問(wèn)網(wǎng)頁(yè)中的顯示結(jié)果 稱(chēng)圖形標(biāo)簽 主要用以插入圖片于網(wǎng)頁(yè)中 圖形和鏈接標(biāo)簽 圖形和鏈接標(biāo)簽 創(chuàng)建超級(jí)鏈接 聰明的狗狗會(huì)彈琴的狗狗單擊此處查看 稱(chēng)鏈接標(biāo)簽 由與所圍的文字 圖片等等可以成為一個(gè)鏈接 要鏈接到另一目錄 C example 下的頁(yè)面 可編寫(xiě)或 要鏈接到同