網站基礎知識10991

精品文檔 1歡迎下載 1 11 1網絡基礎知識網絡基礎知識 在學習網站規(guī)劃設計之前 應對計算機網絡的相關知識進行初步了解 如 Internt TCP IP WWW 等 1 1 11 1 1 計算機網絡簡介計算機網絡簡介 計算機網絡計算機網絡 是指將地理位置不同的具有獨立功能的多臺計算機及其外部設備 通過通信線路連接起來 在網絡 操作系統 網絡管理軟件及網絡通信協議的管理和協調下 實現資源共享和數據通信的計算機系統 1 計算機網絡的組成計算機網絡的組成 計算機網絡整體可以劃分為通信子網和資源子網通信子網和資源子網兩大部分 2 計算機網絡的分類計算機網絡的分類 1 局域網局域網 所謂局域網 local area netwok LAN 就是在局部地區(qū)范圍內的網絡 它所覆蓋的地理范圍較小 在幾米至 10 千米以內 局域網在計算機數量上沒有太多的限制 少的可以只有兩臺 多的可達幾百臺 局域網一般位于一個建 筑物或一個單位內 不存在尋徑問題 不包括網絡層的應用 2 城域網城域網 城域網 metropolitan area network MAN 一般是由位于一個城市的計算機互連而成的網絡 城域網的覆蓋范 圍通常在 10 千米至 100 千米 采用 IEEE 802 6 標準 MAN 與 LAN 相比擴展的距離更長 連接的計算機數量更多 在 地理范圍上可以說是 LAN 的延伸 一個 MAN 通常連接著多個 LAN 3 廣域網廣域網 廣域網 wide area Network WAN 也稱遠程網 通?？缃雍艽蟮奈锢矸秶?所覆蓋的范圍從幾十千米到幾千千 米 它能連接多個城市或國家 或橫跨幾個洲并能提供遠距離通信 形成國際性的遠程網絡 在廣域網內 用于通信 的傳輸設備和介質一般由電信部門提供 網絡則由多個部門聯合或由國家組建 網絡規(guī)模大 能實現較大范圍的資源 共享 國際互聯網 Internet 就是全球最大的廣域網 3 計算機網絡的功能 計算機網絡的功能主要表現在資源共享和數據通信兩個方面 1 資源共享 2 數據通信 1 1 21 1 2 InternetInternet 簡介簡介 Internet 是一個采用 TCP IP 傳輸控制協議 因特網互聯協議 把各個國家 各種機構的內部網絡連接起來的數 據通信網 起源于 20 世紀 70 年代的 ARPANET 阿帕網 Internet 提供了豐富的服務 主要包括以下內容 1 萬維網服務 2 電子郵件服務 3 文件傳輸服務 4 遠程登錄 精品文檔 2歡迎下載 1 1 31 1 3 TCP IPTCP IP 簡介簡介 計算機網絡中的計算機和網絡設備數量巨大 種類繁多 為了能夠正確而有序地進行數據交換 必須遵守一些事 先約定好的規(guī)則 這些規(guī)則就是協議協議 協議是一組控制數據通信的規(guī)則 這些規(guī)則明確規(guī)定了所交換的數據格式 時一組控制數據通信的規(guī)則 這些規(guī)則明確規(guī)定了所交換的數據格式 時 序 為進行數據交換而建立的規(guī)則 標準或約定的集合就稱為網絡協議序 為進行數據交換而建立的規(guī)則 標準或約定的集合就稱為網絡協議 通常所說的 TCP IPTCP IP 是一組協議的總稱 它包括眾多相互關聯的協議 其中網際協議 Internet protocol IP 是網絡層最重要的協議 傳輸控制協議傳輸控制協議 transmission control protocol TCP 是傳輸層中最主要的協議 TCP 是提供可靠服務 面向鏈接的協議 確保數據報可以完整地進行接收 IPIP 定義了數據按照數據報傳輸的格式和規(guī)則 將來自傳輸層的數據封裝成定義了數據按照數據報傳輸的格式和規(guī)則 將來自傳輸層的數據封裝成 IPIP 數據包 送往作為目的地的接收端 數據包 送往作為目的地的接收端 IPIP 最重要的作用就是將數據傳送到目的計算機上最重要的作用就是將數據傳送到目的計算機上 1 1 41 1 4 WWWWWW WWWWWW 是環(huán)球信息網是環(huán)球信息網 world wide Web 的縮寫 也可以簡稱為 Web 中文名字為 萬維網萬維網 1 21 2 網站相關概念網站相關概念 為了更好地學習網站規(guī)劃設計 必須了解網站的相關概念 如網站 網頁 URL 瀏覽器等 1 2 11 2 1 網站和網頁網站和網頁 1 1 網站網站 網站網站 website 是指根據一定的規(guī)則將相關網頁有機組合起來形成的集合 所有網頁都可以通過超鏈接相互訪 問 2 2 網頁網頁 網頁網頁是構成網站的基本元素 網頁實際上是一個文件 它存放在 Internet 上的某一臺計算機中 而這臺計算機 必須是與互聯網相連的 1 2 21 2 2 URLURL 統一資源定位符統一資源定位符 universal resource locator URL 也稱為網頁地址 是因特網上標準的資源地址 用于完 整地描述 Internet 上網頁和其他資源的地址的一種標識方法 URL 由 3 3 部分組成部分組成 格式如下 協議類型 主機域名或主機域名或 IPIP 地址地址 路徑路徑 文件名文件名 1 2 31 2 3 IPIP 地址和域名地址和域名 1 IP1 IP 地址地址 每個連接 Internet 的計算機 服務器以及其他網絡實體都有自己唯一的 IP 地址 使用 IP 地址區(qū)分 Internet 上 的每臺計算機和網絡設備 每個 IPIP 地址的長度為地址的長度為 3232 位 位 bitbit 分 分 4 4 段 每段段 每段 8 8 位 位 1 1 個字節(jié) 個字節(jié) 常用十進制數字表示 每段數字范圍為 常用十進制數字表示 每段數字范圍為 0 0 255255 段與段之間用 段與段之間用 分隔分隔 如 202 101 10 1 使用 IP 地址可以直接訪問該 IP 地址代表的網站 但是 對于普通用戶而言 IP 地址非常難以記憶 因此 在 Internet 上使用了一套和 IP 地址對應的域名系統 domain name system DNS 域名系統使用與主機位置 作用 行業(yè)有關的一組字符組成 既容易理解又方便記憶 域名與 IP 地址一一對應 精品文檔 3歡迎下載 TCP 是提供可靠服務 面向鏈接的協議 確保數據報可以完整地進行接收 IP 協議定義了數據按照數據報傳輸的 格式和規(guī)則 將來自傳輸層的數據封裝成 IP 數據包 送往作為目的地的接收端 最重要的作用就是將數據傳送到目 的計算機上 2 2 域名域名 在 Internet 上使用了一套和 IP 地址對應的域名系統 域名系統 domaindomain namename systemsystem DNSDNS 域名系統使用與主機位置 作用 行業(yè)有關的一組字符組成 既容易理解又方便記憶 域名與 IP 地址一一對應 域名的一般格式格式為 主機主機 網絡名稱網絡名稱 子域子域 一級域一級域 1 2 41 2 4 瀏覽器瀏覽器 瀏覽器瀏覽器是指可以顯示 Web 服務器的網頁文件內容 并讓用戶與這些文件交互的一種軟件 瀏覽器主要通過 HTTP 與 Web 服務器交互并獲取網頁 這些網頁由 URL 指定 瀏覽器屬于客戶端瀏覽程序 向 Web 服務器發(fā)送各種請求 并 對從服務器發(fā)來的超文本信息和各種多媒體數據格式進行解釋 顯示和播放 目前常見的瀏覽器有 IE Internet Explorer Firefox Netscape Navigator 等 1 2 51 2 5 ISPISP ISPISP Internet service provider 的意思是互聯網服務提供商互聯網服務提供商 是向廣大用戶綜合提供互聯網接入業(yè)務 信息 業(yè)務和增值業(yè)務的電信運營商 是經國家主管部門批準的正式運營企業(yè) 如中國電信等 一臺計算機要通過一臺計算機要通過 ISPISP 提供的接入服務 根據提供的接入服務 根據 ISPISP 提供的帳號接入提供的帳號接入 InternetInternet 才能訪問 才能訪問 InternetInternet 上的資源 上的資源 1 2 61 2 6 HTTPHTTP HTTPHTTP 英文英文 HypertextHypertext transfertransfer protocolprotocol 的縮寫的縮寫 中文譯為超文本傳輸協議 中文譯為超文本傳輸協議 它是一種詳細規(guī)定了瀏覽器和萬 維網服務器之間互相通信的規(guī)則 HTTP 是非常可靠的協議 它具有強大的自檢能力 所有用戶請求的文件到達客戶端 時 一定是準確無誤的 1 2 7Web1 2 7Web Web 本意是蜘蛛網和網的意思 對于普通用戶來說 Web 僅僅只是一種環(huán)境 互聯網的使用環(huán)境 氛圍 內容 等 而對于網站設計 制作者來說 它是一系列技術的復合總稱 包括網站的前臺布局 后臺程序 美工 數據庫開 發(fā)等 我們稱它為網頁 1 2 81 2 8 W3CW3C W3CW3C 英文 英文 WorldWorld WideWide WebWeb ConsortiumConsortium 的縮寫 中文譯為的縮寫 中文譯為 萬維網聯盟萬維網聯盟 萬維網聯盟是國際最著名的標準化組 織 W3C 最重要的工作是發(fā)展 Web 規(guī)范 自 1994 年成立以來 已經發(fā)布了 200 多項影響深遠的 Web 技術標準及實施指 南 如超文本標記語言 HTML 可擴展標記語言 XML 等 這些規(guī)范有效地促進了 Web 技術的兼容 對互聯網的發(fā) 展和應用起到了基礎性和根本性的支撐作用 WebWeb 標準并不是某一個標準 而是一系列標準的集合 主要包括結構 標準并不是某一個標準 而是一系列標準的集合 主要包括結構 StructureStructure 表現 表現 PresentationPresentation 和行 和行 為 為 BehaviorBehavior 三個方面 具體如下 三個方面 具體如下 1 1 結構標準 結構標準 結構用于對網頁元素進行整理和分類 主要包括結構用于對網頁元素進行整理和分類 主要包括 XMLXML 和和 XHTMLXHTML 兩個部分 兩個部分 具體區(qū)別如下 XML 英文 The Extensible Markup Language 的縮寫 是一種可擴展標記語言 XML 最初的目的是為了彌補 HTML 精品文檔 4歡迎下載 的不足 它具有強大的擴展性 可用于數據的轉換和描述 XHTML 英文 The Extensible HyperText Markup Language 的縮寫 是可擴展超文本標識語言 XHTML 是基于 XML 的標識語言 是在 HTML4 0 的基礎上 用 XML 的規(guī)則對其進行擴展建立起來的 它實現了 HTML 向 XML 的過渡 2 2 表現標準 表現標準 表現用于設置網頁元素的版式 顏色 大小等外觀樣式 主要指的是 CSSCSS 具體介紹如下 CSS 英文 Cascading Style Sheet 的縮寫 是層疊樣式表 CSS 標準建立的目的是以 CSS 為基礎進行網頁布局 控制網頁的表現 CSS 布局與 XHTML 結構語言相結合 可以實現表現與結構的分離 使網站的訪問及維護更加容易 3 3 行為標準 行為標準 行為是指網頁模型的定義及交互的編寫 主要包括行為是指網頁模型的定義及交互的編寫 主要包括 DOMDOM 和和 ECMAScriptECMAScript 兩個部分 具體區(qū)別如下 兩個部分 具體區(qū)別如下 DOM 英文 Document Object Model 的縮寫 是文檔對象模型 W3C 文檔對象模型 DOM 是中立于平臺和語言 的接口 它允許程序和腳本動態(tài)地訪問和更新文檔的內容 結構和樣式 ECMAScript 是 ECMA 英文 European Computer Manufacturers Association 的縮寫 國際以 JavaScript 為基礎 制定的標準腳本語言 JavaScript 是一種基于對象和事件驅動 并具有相對安全性的客戶端腳本語言 廣泛用于 Web 開發(fā) 常用來給 HTML 網頁添加動態(tài)功能 比如響應用戶的各種操作 1 2 91 2 9 HTMLHTML HTML 英文 Hyper Text Markup Language 的縮寫 中文譯為 超文本標記語言 主要是通過 HTML 標記對網頁 中的文本 圖片 聲音等內容進行描述 HTML 提供了許多標記 如段落標記 標題標記 超鏈接標記 圖片標記等 網頁中需要定義什么內容 就用相應的 HTML 標記描述即可 HTML 之所以稱為超文本標記語言 不僅是因為它通過標記描述網頁內容 同時也由于文本中包含了所謂的 超級 鏈接 點 通過超鏈接將網站與網頁以及各種網頁元素鏈接起來 構成了豐富多彩的 Web 頁面 超鏈接超鏈接是指 Web 頁面中從一個頁面跳轉到另一個頁面或從頁面的一個位置跳轉到另一位置的鏈接關系 鏈接的目 標通常是一個 Web 頁面 也可以是圖片 多媒體 電子郵件甚至一個程序 在 Web 頁中可以設置指向其他 Web 頁或其 自身特定位置的超鏈接 單擊被設置為超鏈接的文本或圖片就可以從一個 Web 頁跳轉到另一個 Web 頁 或從網頁的一 處跳轉到另一處 或者轉到不同的站點 1 2 101 2 10 CSSCSS CSS 通常稱為 CSS 樣式或樣式表 主要用于設置 HTML 頁面中的文本內容 字體 大小 對齊方式等 圖片的外 形 寬高 邊框樣式 邊距等 以及版面的布局等外觀顯示樣式 JavaScript 是 Web 頁面中的一種腳本語言 通過 JavaScript 可以將靜態(tài)頁面轉變成支持用戶交互并響應相應事 件的動態(tài)頁面 CSS 的全稱為 cascading style sheets 中文意思為 層疊樣式表 是能制作出各種樣式網頁的技術統稱 CSS 是一種定義樣式 如字體 顏色和位置 的語言 用于描述如何格式化和顯示網頁中的信息 CSS 樣式可直接存儲在 HTML 網頁中 也可存儲為獨立的樣式表文件 不管以哪種方式保存 樣式表都包含將樣式應用于特定類型元素的樣式 精品文檔 5歡迎下載 規(guī)則 在外部使用時 樣式規(guī)則放在外部樣式表文檔中 文件擴展名為 css 2 CSS 語法由 selector 選擇符 property 屬性 和 value 值 3 部分構成 語法格式如下 selector property value selector 通常是希望定義的 HTML 元素或標簽 property 是希望改變的屬性 每個屬性都有一個值 1 31 3 建站前的準備工作建站前的準備工作 1 3 11 3 1 申請網站空間申請網站空間 網站必須存放到 Web 服務器中 而且 Web 服務器必須接入 Internet 網站才能發(fā)布成功 把網站放到 Web 服務器 上又可以分為以下兩種情況 1 自建 Web 服務器 2 將網站上傳到專門的 Web 服務器上 1 3 21 3 2 申請域名申請域名 網站有了域名才能被訪問 在我國 工業(yè)和信息化部負責中國互聯網絡域名的管理工作 用戶可以通過域名注冊 服務商申請和購買域名 目前域名有英文域名和中文域名兩種 申請域名的一般步驟如下 1 準備域名 2 注冊域名 3 網站備案 1 41 4 網站規(guī)劃設計網站規(guī)劃設計 1 網站建設流程是指一個網站從提出建設到網站建設完成并投入運行的各個環(huán)節(jié) 也包括后期的維護等工作 網站的類型多種多樣 但無論哪種類型的網站 其建設過程大致相同 一般都經過 4 個階段 網站策劃 網站規(guī)劃與 設計 網站實現及網站維護 2 明確建站目的和類型 確定技術解決方案 網站內容及結構 網頁設計要求等 3 根據網站主體分類 政府網站 企業(yè)網站 教育科研機構網站 個人網站和非盈利機構網站等 根據網站提 供的服務分類 資訊類網站 交易類網站 互動游戲類網站 功能型網站 綜合類網站和辦公類網站等 4 網站的形象是通過許多方面來體現的 包括網站的定位 網站的主題和名稱 網站的布局 網站標志設計 色彩搭配 版面布局 瀏覽方式 交互方式等 5 公司統一標志 corporate identity CI 的意思是通過視覺來統一企業(yè)的形象 準確而有創(chuàng)意的 CI 設計 對網站的宣傳推廣有事半功倍的效果 6 網站的欄目規(guī)劃 網站的版塊設計 網站的目錄結構設計 網站的鏈接結構設計 7 建設網站前的市場分析 建設網站目的及功能定位 網站技術解決方案 網站內容及實現方式 網頁設計 網站測試方案 網站維護方案 網站推廣方案 網站開發(fā)的進度 網站建設費用預算 1 51 5 網頁設計網頁設計 精品文檔 6歡迎下載 1 在網頁設計中遵循一些普遍適用的設計準則 對于指導設計過程 培養(yǎng)良好的設計風格 體現設計者的意圖 并最終得到符合用戶需求的網頁作品有著指導作用 應該遵循以下原則 明確的網站定位 鮮明的設計主題 清晰的導航結構 統一的頁面風格 快捷的下載速度 良好的可兼容性 2 頁面尺寸需要從橫向和縱向兩個方向確定 通常以 屏 或 像素 為單位 用戶在瀏覽網頁時 瀏覽器窗 口中顯示的有效面積會受到顯示器尺寸以及分辨率設置的影響 分辨率越高 頁面尺寸越大 設計頁面空間時需要界 定網頁的尺寸大小 采用合適的尺寸才能保證用戶瀏覽網頁的有效面積 一般而言 分辨率在分辨率在 800 600800 600 像素的情況像素的情況 下頁面寬度控制在下頁面寬度控制在 778778 像素內 分辨率在像素內 分辨率在 1024 7681024 768 像素的情況下頁面寬度控制在像素的情況下頁面寬度控制在 10021002 像素內 像素內 這樣不會出現水平 滾動條 可以將頁面內容完整地顯示在一屏的寬度中 3 視覺流程是指人的視覺在接受外界信息時的流動過程 視覺流程的形成是由人類的視覺特性所決定的 受生 理結構限制 人眼只能產生一個視覺焦點 不能同時把視線停留在兩處或更多的地方 通過視線移動進行瀏覽和觀察 來感知外部世界 視覺流程可以分為直線視覺流程 曲線視覺流程 焦點視覺流程和反復視覺流程 4 種 4 常見的網頁空間結構包括有框架式分割和自由式分割兩種 框架式分割借助框架或表格界定的方形區(qū)域對頁 面空間進行分割 分割所得的版式結構有以下幾種 1 國字結構 2 上下結構 3 左右結構 4 上下左右 結構 具體實例讀者可參考教材中所舉例的網站說明 5 網站導航從本質上來說是一組將信息分類的超鏈接 通過首頁或主要頁面的超鏈接為瀏覽者提供以下功能 使瀏覽者迅速了解網站的整體結構 使瀏覽者明確當前所處位置 使瀏覽者能夠進入網站其他頁面 使瀏覽者可以隨 時回到首頁 如菜單導航 主要用于功能復雜 欄目眾多的網站 網站中需要導航的內容很多 用其他導航形式會顯 得冗長 而下拉式菜單便于用戶直接進入更深的層級 減少二次選擇 也節(jié)省了占用網頁的空間 參看教材圖 3 20 所示 6 色彩具有色相 純度 明度 3 個屬性 也稱為色彩的三要素 無彩色只有明度屬性 色相 也叫色調 是指 色彩的相貌或種類 是色彩最基本的特征 通常所說的紅 橙 黃 綠 青 藍 紫就是不同的色相 它們之間的差 別屬于色相的差別 純度 也叫濃度 飽和度 是指色彩的鮮艷程度 純凈程度 任何一種顏色加入黑 白 灰等無 彩色都會降低其飽和度 明度 也叫亮度 指色彩的深淺 明暗程度 明度越大 色彩越亮 7 信息設計是如何面向用戶合理組織頁面中的文字 圖片 動畫 表單等元素 以實現信息的高效傳播 需要 在信息設計上遵循一些基本的原則 信息設計的基本原則是 避免使用陳舊或不完整的信息 否則將影響網站的形象 良好的版面設計非常重要 避免使用過多的色彩 色彩應作為線索 用于標志不同類型的信息 避免使用過多的圖形 和動畫 保持一致性 1 61 6 網站測試網站測試 精品文檔 7歡迎下載 網站開發(fā)人員完成網站系統的設計開發(fā)工作之后 都必須保證網站系統的所有組成部分能夠正常工作 因此 網 站系統的測試工作十分重要 網站開發(fā)人員完成網站系統的設計開發(fā)工作之后 都必須保證網站系統的所有組成部分能夠正常工作 因此 網 站系統的測試工作十分重要 1 1 在不同瀏覽器中測試在不同瀏覽器中測試 網站系統的設計開發(fā)人員通過使用不同的瀏覽器 把設計和制作完成的網站系統從主頁開始 逐頁地進行檢查 以便保證所有的網頁在各種瀏覽器上都有不錯的顯示效果 而且沒有任何錯誤 有時候 在 Internet Explore 系列 瀏覽器 FireFox Opera 和 Maxthon 瀏覽器中顯示的效果可能并不一樣 但只要能夠做到兼顧顯示 不影響網頁內容 的表達 就可以認為通過了瀏覽器的測試 2 2 在不同分辨率設置環(huán)境下測試在不同分辨率設置環(huán)境下測試 鑒于當前用戶的習慣和計算機主流屏幕的大小 推薦使用 1024 768 像素的分辨率進行網頁設計 同時 現在寬 屏顯示器的市場份額也在提升 所以有的網站又提供了寬屏版 3 3 鏈接測試鏈接測試 發(fā)布網站之前 應該測試所有的超鏈接 如果網站包含斷開的超鏈接 即具有無效目標 URL 的超鏈接 則當網 站訪問者單擊該超鏈接時 瀏覽器會顯示一條錯誤消息 原因可能僅僅是 URL 輸入錯誤或 URL 指向的網頁已經從網站 中刪除了 如果目標是 WWW 上的另一網頁 則該網頁可能被移動或刪除了 因此超級鏈接的正確性測試是網站系統測 試的重要環(huán)節(jié) 1 71 7 網站發(fā)布前的準備工作網站發(fā)布前的準備工作 1 1 網站服務器的選擇網站服務器的選擇 前面已經介紹過 可以選擇虛擬主機或者自備服務器進行托管 根據網站的性質 規(guī)模和面向的區(qū)域選擇合 適的服務器 2 2 域名的申請及備案域名的申請及備案 當然 域名的申請工作在進行網站規(guī)劃時就已經進行了 這