網(wǎng)頁制作與網(wǎng)站建設初學者必看教程(免費下載).ppt

第1章網(wǎng)頁設計與制作基礎 2 知識技能要點 互聯(lián)網(wǎng) Web瀏覽器網(wǎng)頁的類型網(wǎng)頁設計的基本流程 3 1 1互聯(lián)網(wǎng)技術 隨著Internet Intranet的不斷普及和發(fā)展 越來越多的公司 企業(yè)和個人正在開始建設自己的Web站點 編寫Web網(wǎng)頁 以一種新的方式向外界發(fā)布信息 供人們?nèi)g覽 閱讀和應用 因此 網(wǎng)頁制作已經(jīng)受到越來越多的專業(yè)人員的重視 4 網(wǎng)頁 網(wǎng)頁是指通過Internet向全球提供信息的一些文檔文件 包括個人信息 商業(yè) 娛樂等內(nèi)容 5 6 7 網(wǎng)頁是在瀏覽因特網(wǎng)時看到的一個個的畫面 文字 圖片和動畫等網(wǎng)站則是指存放在網(wǎng)絡服務器上的完整信息的集合體 它包含一個或多個網(wǎng)頁 這些頁以超鏈接方式連接在一起 形成一個整體 描述一組完整的信息 首頁 主頁 構成網(wǎng)站的第一頁 8 網(wǎng)頁是利用超文本標記語言HTML HyperTextMarkupLanguge 編寫的 存放在Internet Intranet上的Web服務器中 供訪問者使用瀏覽器來閱讀 利用HTML語言編寫出來的網(wǎng)頁又稱為超文本 即網(wǎng)頁中包含有文本 圖形 聲音 圖像和超鏈接 HyperLink 等多媒體信息 通常我們看到的網(wǎng)頁 都是以htm或html后綴結(jié)尾的文件 稱HTML文件 9 第26次中國互聯(lián)網(wǎng)發(fā)展狀況統(tǒng)計報告 2010 7 15 2006 12 2010 6中國網(wǎng)站規(guī)模變化 10 1 1 2互聯(lián)網(wǎng)的應用技術 現(xiàn)在的網(wǎng)絡資源及各種業(yè)務 應用日趨豐富 電子政務 遠程教育 遠程醫(yī)療 移動短信 在線數(shù)字內(nèi)容等網(wǎng)上各類業(yè)務日新月異 電子商務交易額快速增長 信息交流更加便捷高效 11 Internet提供的服務 WWW服務 網(wǎng)上沖浪 電子郵件服務 Email 網(wǎng)上傳呼 OICQ QQ 文件傳輸 FTP BBS 12 萬維網(wǎng) WWW WWW是WorldWideWeb 環(huán)球信息網(wǎng) 的縮寫 簡稱為Web 中文名字為 萬維網(wǎng) 通過萬維網(wǎng) 人們可以使用很簡單的方法 就可以很迅速方便地取得豐富的信息資料 是當前Internet上最受歡迎 最為流行 最新的信息檢索服務系統(tǒng) 13 蒂姆 伯納斯 李 TimBerners Lee 于1990年創(chuàng)建了WorldWideWeb WWW Web最初的構想和研發(fā)的目的是為了滿足在世界各個大學 不同研究所工作的科學家信息共享的需求 WWW的基本概念是把所有個人計算機 計算機網(wǎng)絡和超文本整合成一個功效強大并且易于使用的全球信息系統(tǒng) 14 互聯(lián)網(wǎng)之父 15 1 2瀏覽器 16 瀏覽器 瀏覽器是獲取WWW服務的基礎 它的基本功能就是對網(wǎng)頁進行顯示 目前使用最廣泛的瀏覽器是微軟公司推出的InternetExplorer瀏覽器 還有火狐瀏覽器Firefox等等 17 18 瀏覽器之戰(zhàn) 19 1 2 3網(wǎng)頁制作工具 1 記事本 20 步驟如下 單擊 開始 按鈕 選擇 程序 附件 記事本 在 記事本 的窗口中輸入HTML代碼 輸入代碼結(jié)束后 選擇 文件 菜單中的 保存 或 另存為 命令 則彈出圖1 1所示的另存為對話框 在 文件名 框中鍵入Web頁的名稱 注意文件名必須以 html或 htm為擴展名 如果需要 應在 保存在 列表框中定位到特定的目錄 單擊 保存 按鈕 即創(chuàng)建了一個Web頁 見圖1 2 進入到你的文件架 單擊 進行測試 你的HTML的網(wǎng)頁就完成了 21 另存為 對話框 22 單擊ie圖標 進行測試 23 例 網(wǎng)站制作文本內(nèi)容 24 運行效果如圖 25 26 一個典型的HTML文本的基本結(jié)構形式如下 網(wǎng)頁標題網(wǎng)頁的主要內(nèi)容 文件頭 文件主體 28 HTML標簽 HTMLTag 都是由一對 括起來的 成對出現(xiàn) 表示標記的開始和結(jié)束 例如 HTML語言正是通過這些標簽來設置網(wǎng)頁的結(jié)構 網(wǎng)頁元素的位置和類別 網(wǎng)頁元素的顯示效果等 29 標記符屬性 屬性是用來描述對象特征的特性 例如 一個人的身高 體重就是人這個對象的屬性 在HTML中 所有的屬性都放置在開始標記符里 多個屬性之間用空格分開 如 30 關于顏色 顏色值是一個關鍵字或一個RGB格式的數(shù)字 aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow 31 在HTML中對于顏色的定義可以用6位十六進制數(shù) 電腦屏幕的色彩是由rgb 紅 綠 藍 三種色光所合成的 通過調(diào)整這三個基色就可以調(diào)配出其它的顏色 每2位數(shù)代表一種顏色的濃度 三種顏色的順序為紅 綠 藍 00代表顏色濃度最小 FF代表顏色濃度最大 000000代表純黑 FFFFFF代表純白 32 d 圖中所示是部分顏色的RGB代碼 例 為頁面設置背景色 33 2 網(wǎng)頁編輯器 用FrontPage或者Dreamweaver工具FrontPage和Dreamweaver是最著名的網(wǎng)頁編輯工具 FrontPage是微軟的Office中的一件組件 是入門時很容易掌握的工具 34 2 網(wǎng)頁編輯器 Dreamweaver是Macromedia公司出品的網(wǎng)頁三劍客其中的一個軟件 是專業(yè)網(wǎng)頁制作軟件 35 Dreamweaver 36 美化網(wǎng)頁的基本工具 PhotoshopPhotoshop是由Adobe公司開發(fā)的圖形處理軟件 它是目前公認的PC機上最好的通用平面美術設計軟件 它功能完善 性能穩(wěn)定 使用方便 所以在幾乎所有的廣告 出版 軟件公司 Photoshop都是首選的平面制作工具 37 FireworksFireworks是由Macromedia公司開發(fā)的圖形處理工具 第一套專門為制作網(wǎng)頁圖形而設計的軟件 同時也是專業(yè)的網(wǎng)頁圖形設計及制作的解決方案 38 FlashFlash是美國Macromedia公司開發(fā)Flash是交互式矢量圖和Web動畫的標準 使用Flash可創(chuàng)作出既漂亮又可改變尺寸的導航界面以及其它奇特的效果 它易學 易用 可以做出有很多動畫的網(wǎng)站 39 40 1 2 4網(wǎng)頁的基本構成元素 一個構思奇妙 制作精美的網(wǎng)頁會使整個網(wǎng)站形象地位得到提高 網(wǎng)頁制作是一個可簡單 可復雜的過程 制作一個優(yōu)秀的網(wǎng)頁不僅需要有藝術的修養(yǎng) 懂得必要的網(wǎng)絡語言 還要對圖形圖像 音頻 視頻制作 傳輸技術等有很深刻的理解 41 設計頁面時經(jīng)常使用的一些元素 文字圖形菜單按鈕 鏈接 表單 數(shù)據(jù)交換 背景表格顏色多媒體元素頁面布局 42 1 文字 標題 字號 字型 文字是網(wǎng)頁發(fā)布信息所用的主要形式 在網(wǎng)頁中可以通過字體 顏色 底紋 邊框等來設置文本的屬性 43 1 文字 標題 字號 字型 在網(wǎng)頁制作中 文字都可以很方便地設置成各種字體和大小 文字不要太大 也不要使用過多的字體 中文文字使用宋體 9像素或者12像素左右即可 因為過大的字在顯示器顯示時 線條不夠平滑 另外 顏色也不要使用太多 以免讓人看起來眼花繚亂 Web本身對文本和字體的格式化能力并不強 在Web頁面中 可以指定文本尺寸 如果需要使用某種特殊字體 可以把這些字畫在圖片上 然后將圖片插入到頁面中 44 45 2 圖形 圖形 網(wǎng)頁上經(jīng)常使用的圖片格式 Jpg Gif 可以使用Photoshop Firework等圖像處理工具制作完成 46 GIF在顏色數(shù)很少 256 的情況下 產(chǎn)生的文件很小 JPG最主要的優(yōu)點是能支持上百萬種顏色 從而可以用來表現(xiàn)照片PNG可移值網(wǎng)絡圖形 Macromedia公司的Fireworks的默認存盤格式就是PNG 它集合了GIF和JPG格式的優(yōu)點 47 3 交互功能 交互功能 菜單按鈕 鏈接 表單 數(shù)據(jù)交換 幫助瀏覽者在Web內(nèi)導航 48 4 多媒體元素 多媒體元素 包括聲音 動畫 視頻片斷 背景音樂等 例如 動畫可以使用flash等工具制作完成 49 1 3網(wǎng)站的設計 建設 50 1 3 2網(wǎng)站類型的劃分 網(wǎng)站有很多種類型 如門戶型網(wǎng)站 電子商務網(wǎng)站 個人網(wǎng)站等等 如果依據(jù)傳達信息內(nèi)容的特點來進行類型的劃分 可以分為以下6種形式 51 1 信息查詢類 像新浪 網(wǎng)易 搜狐等門戶網(wǎng)站 這類站點將為訪問者提供大量的信息 而且訪問量較大 52 2 大眾媒體類 具代表性的就屬各大門戶網(wǎng)站的新聞版塊 傳統(tǒng)媒體在網(wǎng)絡空間的拓展 報刊雜志的電子版 53 3 宣傳窗口類 宣傳窗口類型的網(wǎng)頁具有內(nèi)容專一 形式多樣的特點 尤其是企業(yè)的網(wǎng)頁 具有企業(yè)形象傳達的作用 可以看作CI設計的延伸 個人網(wǎng)站也成為這種類型的重要組成部分 因此格外受到重視 54 4 電子商務類 電子商務的出現(xiàn)使單向的信息傳送變成了雙向的交互服務 從真正意義上實現(xiàn)了網(wǎng)絡的交互性 55 5 交流平臺類 各種論壇 BBS 聊天室 56 6 網(wǎng)絡社區(qū)類 即虛擬網(wǎng)上生活 從網(wǎng)上交流發(fā)展到網(wǎng)絡社區(qū) 網(wǎng)絡已成為人們生活 存在的新空間 在網(wǎng)絡社區(qū)可以充分的消遣 放松 獲得深入交往并享有充分自由的理想場所 57 1 3 3網(wǎng)站設計的基本流程 1 整體規(guī)劃例如 網(wǎng)站主題 風格 頁面元素 邏輯結(jié)構等 2 資料收集例如 收集與主題相關的文字圖片資料 一些優(yōu)秀的頁面風格 下載一些你喜歡的交互頁面 開放的源代碼等 58 如 59 60 如 61 1 3 3網(wǎng)站設計的基本流程 3 頁面設計根據(jù)事先規(guī)劃的結(jié)構 利用平面圖片的形式設計你想要的最終效果 62 4 網(wǎng)頁測試5 網(wǎng)頁上傳6 網(wǎng)站推廣與維護 63 1 4 1Web站點主頁的基本成分 頁面標題 說明網(wǎng)站的性質(zhì)與內(nèi)容 網(wǎng)站標識LOGO都是被精心設計的 Logo的作用很多 最重要的就是表達網(wǎng)站的理念 便于人們識別 廣泛用于站點的連接 宣傳等 一個絕妙的Logo不但會使首頁驀然生輝 而且會成為整個網(wǎng)站的形象大使 頁眉 用來放置最希望瀏覽者看到的內(nèi)容 導航欄 欄目索引 內(nèi)容頁腳 聯(lián)系方式 版權信息等 64 d 站標 導航欄 標題 65 d 頁腳信息區(qū) 66 d 67 1 4 2版式布局 整體布局合理化 有序化 整體化字體的大小 型號 字間距 行間距 以及配色等表現(xiàn)功能 網(wǎng)頁的版式設計有創(chuàng)造性 藝術性將文字 圖形圖像 色彩 動畫 視頻圖像等網(wǎng)頁的傳達要素 根據(jù)特定的內(nèi)容和主題 在網(wǎng)頁所限定的范圍中 運用造型元素和形式原理進行視覺的關聯(lián)與配置 從而將設計意圖以視覺形式表現(xiàn)出來 68 69 70 用表格排版 71 72 73 由于人們習慣于將視線從左到右 從上到下移動 因而視區(qū)中的不同位置注目程度不同 74 網(wǎng)頁中最常見的構圖布局 75 層次分明 76 這個網(wǎng)站用了寬大的邊框分隔內(nèi)容和背景 在背景處布置了大面積的圖案 頁面的寬度符合閱讀習慣 而擴展出來的背景又在視覺上飽滿了屏幕尺寸 77 http www washington edu 2020 4 14 78 2020 4 14 79 SGIsilicongraphics inc 2020 4 14 80 網(wǎng)站內(nèi)不同頁面的設計風格要有所統(tǒng)一 有些是色彩和布局都統(tǒng)一 有些則是布局統(tǒng)一 色彩跳躍 2020 4 14 81 色彩和布局都統(tǒng)一 2020 4 14 82 布局不同而色調(diào)一致 2020 4 14 83 布局相同 色彩跳躍 2020 4 14 84 2020 4 14 85 2020 4 14 86 87 推薦學習網(wǎng)站之網(wǎng)頁素材 網(wǎng)頁制作大寶庫 88 推薦學習網(wǎng)站之網(wǎng)頁特效 網(wǎng)頁特效集 89 推薦學習網(wǎng)站之技術文章 太平洋學院 90 本章重點內(nèi)容小結(jié) 網(wǎng)頁 網(wǎng)站萬維網(wǎng) 瀏覽器網(wǎng)頁制作工具 包括網(wǎng)頁制作語言HTML 網(wǎng)頁中的基本元素網(wǎng)頁中顏色的定義網(wǎng)站建設流程網(wǎng)頁版式布局 91 1 5練習題課本P15 1 接入Internet的計算機必須共同遵守 A CPI IP協(xié)議B PCT