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

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