網(wǎng)頁制作案例教程 陳建孝 陸錫聰 余曉春 江玉珍 第1章 網(wǎng)站與網(wǎng)頁概述新

網(wǎng)頁制作案例教程2023/11/11網(wǎng)頁制作案例教程第1章：網(wǎng)站與網(wǎng)頁概述第2章：HTML入門第3章：網(wǎng)頁根本編輯第4章：表格第5章：框架第6章：APDiv第7章：表單第8章：CSS和模板第9章：網(wǎng)頁圖形處理工具FireworksCS5第10章：圖像處理工具PhotoshopCS5第11章：動畫制作工具FlashCS5第12章：網(wǎng)站制作綜合應用2023/11/12學習目標：第1章網(wǎng)站與網(wǎng)頁概述了解Internet、Web、網(wǎng)站、網(wǎng)頁的根本概念了解網(wǎng)站、網(wǎng)頁與主頁之間的相互關(guān)系掌握網(wǎng)站建立及管理方法了解網(wǎng)站的開發(fā)設計應遵循的根本原那么了解網(wǎng)頁設計的常用工具軟件2023/11/131.1網(wǎng)站與網(wǎng)頁根底知識網(wǎng)站規(guī)劃與網(wǎng)頁制作是一項綜合性非常強的工作，需要設計者具備一定的Internet根底知識，理解Web的工作原理，對網(wǎng)頁的類型風格和網(wǎng)頁制作軟件有所認識，才能更好地開展開發(fā)設計工作。2023/11/141.1.1Internet與Web

Internet中文譯名因特網(wǎng)，又叫做國際互聯(lián)網(wǎng)。它是由使用公用語言互相通信的計算機連接而成的全球網(wǎng)絡。Internet是世界上覆蓋面最廣、規(guī)模最大、信息資源最豐富的計算機網(wǎng)絡。Internet提供了許多受群眾歡送的效勞，包括：WWW〔萬維網(wǎng)〕E-Mail〔電子郵件〕FTP〔文件傳輸〕Telnet〔遠程登錄〕UsenetNews〔電子公告牌效勞〕……2023/11/151.1.1Internet與Web

Web就是一種超文本信息系統(tǒng)。Web的一個主要的概念就是超文本鏈接，它使得文本不再像一本書一樣是固定的線性的，而是可以從一個位置跳到另外的位置，從而可獲取更多的相關(guān)信息。

2023/11/161.1.1Internet與Web

許多新聞網(wǎng)站，如搜狐、新浪等有大量的超文本鏈接2023/11/171.1.2Web的工作原理Web效勞器，就是那些對信息進行組織、存儲并將其發(fā)布到Internet中去，從而使得Internet中的其他計算機可以訪問這些信息的計算機。在Web中使用的通信協(xié)議是HTTP協(xié)議，通過HTTP協(xié)議實現(xiàn)客戶端〔瀏覽器〕的Web效勞器的信息交換。2023/11/181.1.2Web的工作原理當用戶通過瀏覽器向Web效勞器提出HTTP請求時，Web效勞器根據(jù)請求調(diào)出相應的網(wǎng)頁文件，類型有HTML、XML、ASP或JSP。對于靜態(tài)網(wǎng)頁HTML或XML，效勞器直接返回給客戶。對于動態(tài)網(wǎng)頁ASP或JSP，Web效勞器那么與數(shù)據(jù)庫效勞器建立連接,運行腳本程序，最后生成新的、包含動態(tài)數(shù)據(jù)的HTML或XML文檔返回客戶端瀏覽器。2023/11/191.1.2Web的工作原理圖1-1Web的工作原理XML為可擴展標記語言，它與HTML一樣都是標準通用標記語言。2023/11/1101.1.3網(wǎng)站、網(wǎng)頁與主頁網(wǎng)站(Website)，就是指在Internet上向全世界發(fā)布信息的站點。它是根據(jù)一定的規(guī)那么，使用HTML等工具制作的、建立在網(wǎng)絡效勞器上的一組相關(guān)網(wǎng)頁的集合。網(wǎng)頁(WebPage)，是網(wǎng)站提供信息效勞的主要形式。用于展示網(wǎng)站中特定的內(nèi)容，用網(wǎng)頁瀏覽器閱讀。網(wǎng)頁通用標準是HTML，即超文本標記語言〔HyperTextMarkupLanguage〕2023/11/1111.1.3網(wǎng)站、網(wǎng)頁與主頁在Internet中，每個網(wǎng)頁都具有唯一的地址，即“網(wǎng)址〞。網(wǎng)址由URL〔UniformResourceLocator，統(tǒng)一資源定位器〕指定其在Internet上的位置。主頁〔homepage〕，是網(wǎng)站中最重要的頁面，是整個網(wǎng)站的導航中心，它提供全面的網(wǎng)站信息鏈接，能夠使訪問者快速地了解網(wǎng)站的概貌。2023/11/1121.1.4靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁根據(jù)網(wǎng)頁制作的技術(shù)及網(wǎng)頁功能，網(wǎng)頁通常分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁是指純粹HTML格式的網(wǎng)頁，其URL以“.htm〞、“.html〞、“.shtml〞、“.xml〞等為后綴。如:

2023/11/1131.1.4靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁動態(tài)網(wǎng)頁中除了普通網(wǎng)頁中的元素外，還包括一些應用程序，這些應用程序使瀏覽器與Web效勞器之間發(fā)生交互行為，而且應用程序的執(zhí)行需要應用程序效勞器才能夠完成。動態(tài)網(wǎng)頁URL的后綴是以asp、.jsp、.php、.perl、.cgi等，且在動態(tài)網(wǎng)頁網(wǎng)址中有一個標志性的符號“？〞如:://mail.163/errorpage/err_163.htm?errorType=460&errorUsername=abcde@1632023/11/1141.2網(wǎng)站建立及管理建立自己的Web站點，必須先注冊域名和申請站點空間。1.2.1注冊域名

1．域名應簡明易記，便于輸入

2．域名要有一定的內(nèi)涵和意義2023/11/115CNNIC——中國互聯(lián)網(wǎng)絡信息中心

是我國域名注冊管理機構(gòu)和域名效勞器運行機構(gòu)。1.2.1注冊域名

圖1-2CNNIC網(wǎng)站2023/11/1161.2.2申請網(wǎng)站空間申請/建立網(wǎng)站空間方式：1．使用免費網(wǎng)站空間2．租用虛擬主機3．租用專用效勞器4．使用自己的效勞器2023/11/1171.2.2申請網(wǎng)站空間“中國萬網(wǎng)〞〔〕，你好萬維網(wǎng)〞〔〕等可實現(xiàn)虛擬主機租用。2023/11/1181.2.3上傳網(wǎng)站內(nèi)容網(wǎng)站上傳的實現(xiàn)方法有：1．使用IE瀏覽器上傳文件2．使用專業(yè)的FTP工具上傳文件3．使用Dreamweaver上傳文件2023/11/1191.2.4網(wǎng)站維護管理方法1.網(wǎng)站文件結(jié)構(gòu)的設置網(wǎng)站文件組織結(jié)構(gòu)上，通常采用以下2種方案：方案一：按文件類型分類圖1-5按文件類型分類的網(wǎng)站結(jié)構(gòu)

2023/11/1201.2.4網(wǎng)站維護管理方法方案二：按部門、業(yè)務或工程分類圖1-6按部門、業(yè)務或工程分類的網(wǎng)站結(jié)構(gòu)2023/11/1211.2.4網(wǎng)站維護管理方法2．網(wǎng)站文件管理原那么在進行網(wǎng)站開發(fā)之前建立適宜的網(wǎng)站文件結(jié)構(gòu)。網(wǎng)站的首頁文件通常是“index.html〞，它必須存放在網(wǎng)站的根目錄中。網(wǎng)站使用的所有文件都必須存放在站點的文件夾或者子文件夾中。相同路徑下的文件或文件夾不能同名。網(wǎng)站文件的刪除、重命名或者移動等操作應通過站點管理器來完成2023/11/1221.3網(wǎng)站的開發(fā)設計1.3.1網(wǎng)站類型確實定1．門戶網(wǎng)站2．商務網(wǎng)站3．個人網(wǎng)站4．辦公網(wǎng)站2023/11/1231.3.2網(wǎng)站整體風格的定位網(wǎng)站的風格主要指網(wǎng)站的色彩、版式等方面給瀏覽者的整體視覺感受。不同類型不同主題的網(wǎng)站，應有自己的獨特的風格。2023/11/1241.3.3網(wǎng)站標識與色彩設計1．網(wǎng)站標識網(wǎng)站標識也稱為網(wǎng)站Logo。其作用是加深訪問者對網(wǎng)站的印象，提高網(wǎng)站的知名度，并最終形成網(wǎng)站文化的標志。

圖1-7搜狐網(wǎng)Logo圖1-8新浪網(wǎng)logo圖1-9太平洋網(wǎng)Logo圖1-10百度系列Logo2023/11/1251.3.3網(wǎng)站標識與色彩設計2．網(wǎng)站色彩設計網(wǎng)站標準色彩要用于網(wǎng)站的標志，標題，主菜單和主色塊，給人以整體統(tǒng)一的感覺。要注意色彩的合理搭配。一般來說，一個網(wǎng)站的標準色彩不超過3種2023/11/1261.3.4網(wǎng)站導航與布局設計1．網(wǎng)站導航設計2．版面布局設計2023/11/1271.4網(wǎng)頁制作的主要工具軟件1.4.1網(wǎng)頁設計軟件——DreamweaverDreamweaver是一款“所見即所得〞的網(wǎng)頁編輯工具，其用戶界面非常友好易用，為網(wǎng)頁設計者帶來了很大的便利。Dreamweaver不僅提供了強大的網(wǎng)頁編輯功能，而且提供了善的站點管理機制，是一個集網(wǎng)頁創(chuàng)作和站點管理兩大利器于一身的創(chuàng)作工具。2023/11/1281.4網(wǎng)頁制作的主要工具軟件1.4.2動畫設計軟件——FlashFlash是一款優(yōu)秀的網(wǎng)頁動畫制作軟件，主要應用于網(wǎng)頁設計和多媒體創(chuàng)作等領域。Flash可以很方便地將音樂、聲效、圖畫以及動畫隨心所欲地結(jié)合起來。Flash生成的SWF作品文件“體積〞小得出奇，并且可以以插件的形式直接插入到網(wǎng)頁中，是目前網(wǎng)絡中最常用的動畫格式。2023/11/1291.4網(wǎng)頁制作的主要工具軟件1.4.3網(wǎng)頁圖形處理軟件——FireworksFireworks是一款真正的網(wǎng)頁圖形圖像處理軟件，它與Dreamweaver結(jié)合很緊密。Fireworks可用于設計動態(tài)按鈕等網(wǎng)頁元素，甚至可直接設計精美的網(wǎng)站首頁。2023/11/1301.4網(wǎng)頁制作的主要工具軟件1.4.3圖像處理軟件——PhotoshopPhotoshop是一款專業(yè)的圖像處理軟件，功能強大，為美工設計人員提供了廣闊的創(chuàng)意空間，Photoshop廣泛應用于網(wǎng)頁圖像編輯、桌面出版、廣告設計、婚紗攝影等各行各業(yè)，成為許多涉及圖像處理的行業(yè)的事實標準。2023/11/131

小結(jié)本章介紹網(wǎng)站與網(wǎng)頁的相關(guān)概念和根底知識，重點講解網(wǎng)站建立的方法和管理技術(shù)，分析網(wǎng)站設計要那么及建站前的準備工作。設計者需要具備一定的網(wǎng)絡根底知識、掌握各種多媒體處理技術(shù)，才能沉著地應對開發(fā)過程中遇到的各種問題。2023/11/132作業(yè)與實驗

作業(yè)：1．人們可以使用連接到Internet的計算機查看Internet上的網(wǎng)頁，請你按自己的理解描述在瀏覽網(wǎng)頁的過程中，信息傳遞的方式和過程。2．例說明網(wǎng)站的主題分類和選擇主題的原那么。3．申請網(wǎng)站空間有哪幾種方式？簡述建立一個網(wǎng)站的過程。2023/11/133作業(yè)與實驗

實驗題：1.翻開搜狐網(wǎng)主頁(://sohu)，了解搜狐網(wǎng)的主要版塊和欄目，說說該網(wǎng)站屬于哪種網(wǎng)站類型、具有什么特點。2023/11/134本章結(jié)束2023/11/135在線教務輔導網(wǎng)：

更多課程配套課件資源請訪問在線教務輔導網(wǎng)2023/11/1362023/11/1372023/11/1382023/11/1392023/11/1402