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

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