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

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