第1章 網(wǎng)頁設計概述-公選.ppt

1,網(wǎng)頁設計基礎教程,主講教師：蘇永紅,2020/6/9,2,授課時間：2011-2012學年第2學期學時數(shù)：32學時(上課20學時+上機12學時)總成績=考核成績考核方式：以課程設計形式每人做一個小型網(wǎng)站并提交課程設計報告。,2020/6/9,3,教材：網(wǎng)頁設計基礎教程，庫少平等編著，北京郵電大學出版社，2010版參考書：DreamweaverCS4+ASP動態(tài)網(wǎng)站開發(fā)從基礎到實踐，李睦芳編著，機械工業(yè)出版社，2010版,4,第1章網(wǎng)頁設計概述,2020/6/9,5,學習目標,理解Web服務器的基本概念區(qū)分靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁了解網(wǎng)頁制作的常用語言和常用工具理解網(wǎng)站相關知識理解網(wǎng)站開發(fā)的流程,2020/6/9,6,網(wǎng)頁(Web頁)瀏覽器中所看到的畫面,放置Web站點的計算機,HTML文件,主頁一個Web站點的首頁,2020/6/9,7,網(wǎng)頁的主要元素包括文本、圖像、超鏈接、表單等元素。,2020/6/9,8,1文本文本是最重要的信息載體與交流工具，網(wǎng)頁中的信息一般以文本為主。2圖像今天看到的豐富多彩的網(wǎng)頁，都是因為有了圖像，可見圖像在網(wǎng)頁中的重要性。在網(wǎng)頁中既可以通過圖像的形式表達主題，也可以通過圖像對網(wǎng)頁起一個裝飾作用。3超鏈接超鏈接是網(wǎng)站的靈魂，它是從一個網(wǎng)頁指向另一個目的端的鏈接。,2020/6/9,9,4.表單表單是用來收集站點訪問者信息的域集。站點訪問者填寫表單的方式是輸入文本、單擊單選按鈕與復選框，以及從下拉菜單中選擇選項。5表格表格是網(wǎng)頁排版的靈魂。使用表格排版是現(xiàn)在網(wǎng)頁的主要制作形式。通過表格可以精確地控制各網(wǎng)頁元素在網(wǎng)頁中的位置。6.多媒體及特殊效果多媒體元素包括聲音、動畫、視頻等。,2020/6/9,10,1.1Web服務器基本概念,1.1.1Web概述Web是英文WorldWideWeb的簡稱。Web是一個分布式的超媒體（hypermedia）信息系統(tǒng)，它將大量的信息分布于整個因特網(wǎng)上。Web的任務就是向人們提供多媒體網(wǎng)絡信息服務。,2020/6/9,11,1.1.1Web概述,超文本一種全局性的信息結構，它將文檔中的不同部分通過關鍵字建立鏈接，使信息得以用交互方式搜索。超媒體是超文本（hypertext）和多媒體在信息瀏覽環(huán)境下的結合。用戶不僅能從一個文本跳到另一個文本，而且可以激活一段聲音，顯示一個圖形，甚至可以播放一段動畫。,2020/6/9,12,1.1.1Web概述,Internet提供的服務：WWW服務（網(wǎng)上沖浪）電子郵件服務（Email）文件傳輸（FTP）網(wǎng)絡游戲即時信息傳遞（OICQ）WWW與瀏覽器：WWW是由遍布在Internet上的稱為Web服務器的計算機組成，它將不同的信息資源有機地組織到一起，通過瀏覽器進行瀏覽。,2020/6/9,13,1.1.2Web的工作方式,Web是以客戶服務器方式工作的。Web必須解決以下幾個問題：怎樣標志分布在整個Internet上的Web文件?用什么樣的協(xié)議來實現(xiàn)Web上的各種超鏈接?怎樣使不同作者創(chuàng)作的不同風格的Web文件都能在Internet上的各種計算機上顯示出來?,2020/6/9,14,1.1.2Web的工作方式,從技術層面看，Web技術核心有三點：統(tǒng)一資源定位符（URL），實現(xiàn)互聯(lián)網(wǎng)信息的定位統(tǒng)一標識；超文本傳輸（HTTP）協(xié)議，實現(xiàn)萬維網(wǎng)的信息傳輸；超文本標記語言（HTML），實現(xiàn)信息的表示與存儲。,2020/6/9,15,1.1.3URL,UniformResourceLocatorURL結構：方式：/主機名/地點/文件名例如:,2020/6/9,16,如：44域名地址通常分為4部分：機器名.單位名.單位類別.國家簡稱如：www表示服務器名稱，whut表示武漢理工大學，edu表示教育部門，cn表示中國。,2020/6/9,17,1.1.3URL,DNS采用分層次結構：主機名.機構名.頂層域名其中頂級域名分為類型名和區(qū)域名兩類。類型名用共14個，區(qū)域名用兩個字母表示世界各國和地區(qū)。,2020/6/9,18,1.1.3URL,URL結構：方式：/主機名/地點/文件名例如：,2020/6/9,19,1.2靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁概述,1.2.1靜態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁指客戶端的瀏覽器發(fā)送URL請求給WWW服務器，服務器查找需要的超文本文件，不加處理直接下載到客戶端，運行在客戶端的頁面是已經事先做好并存放在服務器中的網(wǎng)頁。在網(wǎng)站設計中，純粹HTML格式的網(wǎng)頁通常被稱為“靜態(tài)網(wǎng)頁”，靜態(tài)網(wǎng)頁的頁面文件通常是以.htm、.html、.xml、.shtml等為后綴的。在HTML格式的網(wǎng)頁上，也可以出現(xiàn)各種動態(tài)的效果，如.GIF格式的動畫、FLASH、滾動字母等，這些“動態(tài)效果”只是視覺上的，與下面將要介紹的動態(tài)網(wǎng)頁是不同的概念。,2020/6/9,20,1.2.1靜態(tài)網(wǎng)頁,靜態(tài)網(wǎng)頁的特點：(1)靜態(tài)網(wǎng)頁的每個頁面都有一個固定的URL，不含有“？”；(2)網(wǎng)頁內容一經發(fā)布到網(wǎng)站服務器上，無論是否有用戶訪問，每個靜態(tài)網(wǎng)頁的內容都是保存在服務器上的；(3)靜態(tài)網(wǎng)頁的內容相對穩(wěn)定，因此容易被搜索引擎檢索；(4)靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持，在網(wǎng)站制作和維護方面工作量較大，因此當網(wǎng)站信息量很大時，如果完全依靠靜態(tài)網(wǎng)頁，制作方式比較困難；(5)靜態(tài)網(wǎng)頁的交互性較差，在功能方面有較大的限制。,2020/6/9,21,1.2.2動態(tài)網(wǎng)頁,程序需要在服務器端運行，是動態(tài)網(wǎng)頁的重要標志，在服務器端運行的程序、網(wǎng)頁、組件，屬于動態(tài)網(wǎng)頁，它們會隨不同客戶、不同時間，返回不同的網(wǎng)頁。服務器端動態(tài)技術：則需要與客戶端共同參與，客戶通過瀏覽器發(fā)出頁面請求后，服務器根據(jù)URL攜帶的參數(shù)運行服務器端程序，產生的結果頁面再返回客戶端。,2020/6/9,22,1.2.2動態(tài)網(wǎng)頁,動態(tài)網(wǎng)頁的特點：(1)動態(tài)網(wǎng)頁以數(shù)據(jù)庫技術為基礎，可以大大降低網(wǎng)站維護的工作量；(2)采用動態(tài)網(wǎng)頁技術的網(wǎng)站可以實現(xiàn)更多的功能，如用戶注冊、用戶登錄、在線調查、用戶管理、訂單管理等等；(3)動態(tài)網(wǎng)頁實際上并不是獨立存在于服務器上的網(wǎng)頁文件，只有當用戶請求時服務器才返回一個完整的網(wǎng)頁；(4)動態(tài)網(wǎng)頁中的“？”對搜索引擎檢索存在一定的問題，搜索引擎一般不可能從一個網(wǎng)站的數(shù)據(jù)庫中訪問全部網(wǎng)頁。,2020/6/9,23,1.3常用的網(wǎng)頁設計語言,1.PHPPHP(PersonalHomePages)是一種服務器端的嵌入式HTML的腳本語言。2.JSPJSP(JavaServerPages)是基于Java的技術，用于創(chuàng)建可支持跨平臺及跨Web服務器的動態(tài)網(wǎng)頁。3.ASPASP(ActiveServerPages)是微軟公司提供的開發(fā)動態(tài)網(wǎng)頁的技術，具有開發(fā)簡單、功能強大等優(yōu)點。4.ASP.NETASP.NET是一種已經編譯的、基于.NET環(huán)境的語言。,2020/6/9,24,1.4常用的網(wǎng)頁設計工具,記事本