1、大學(xué)計算機基礎(chǔ),第六章 網(wǎng)頁制作基礎(chǔ),網(wǎng)絡(luò)的應(yīng)用，不僅使計算機世界發(fā)生了日新月異的變化，而且改變了人們工作、學(xué)習和生活的方式。說起上網(wǎng)，最熟悉的操作就是打開瀏覽器，在地址欄中輸入地址，然后就能看到要訪問信息，這些信息通常是圖片、文字、聲音、動畫、視頻或者超鏈接等多媒體信息，包含這些信息的頁面文件就叫做網(wǎng)頁。網(wǎng)頁的制作在過去可能是一件非常復(fù)雜的事情，但是現(xiàn)在利用網(wǎng)頁工具來制作，就能事半功倍。 本章主要網(wǎng)頁制作的基本概念、基本工具，并以FrontPage 2003為例來介紹設(shè)計和制作網(wǎng)頁的基本方法。,本章主要內(nèi)容,6.1基本概念介紹 6.2網(wǎng)頁制作工具介紹 6.3 FrontPage 2003的使

2、用,6.1基本概念介紹,6.1.1網(wǎng)頁 6.1.2網(wǎng)站,6.1.1網(wǎng)頁,網(wǎng)頁包含文字、圖片、聲音、動畫、視頻以及超級鏈接等元素，通過對這些元素的有機組合，就構(gòu)成了包含各種信息的網(wǎng)頁。 一般說來，網(wǎng)頁可以分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。 靜態(tài)網(wǎng)頁是指不使用數(shù)據(jù)庫而直接或間接制作成Html的網(wǎng)頁，這種網(wǎng)頁的內(nèi)容是固定的，修改和更新都必須要通過專用的網(wǎng)頁制作工具。 動態(tài)網(wǎng)頁是指采用動態(tài)網(wǎng)頁技術(shù)，將網(wǎng)站內(nèi)容存儲到數(shù)據(jù)庫，通過讀取數(shù)據(jù)庫來動態(tài)生成網(wǎng)頁。,6.1.2網(wǎng)站,網(wǎng)站是眾多網(wǎng)頁的集合，如果把網(wǎng)頁看成一頁紙，那么網(wǎng)站就是一本書。當然也有特殊的情況，有些網(wǎng)站就只有一個頁面。通常在瀏覽器地址欄中輸入網(wǎng)址后首先看

3、到的是該網(wǎng)站的首頁，通過單擊首頁上的鏈接可以訪問到其它的網(wǎng)頁，這樣反映一個中心或一個主題的多張網(wǎng)頁有序組合到一起，就稱為網(wǎng)站。,6.2網(wǎng)頁制作工具介紹,6.2.1超文本語言HTML概述 6.2.2Dreamweaver 6.3.3FrontPage,6.2.1超文本語言HTML概述,Html（Hyper Text Mark-up Language），即超文本標記語言，是用于創(chuàng)建從一個平臺移植到另一平臺的超文本文檔的一種簡單標記語言，經(jīng)常用來創(chuàng)建Web頁面。 Html文件的基本格式如下： 標題部分 正文部分 ,6.2.2Dreamweaver,Dreamweaver是Macromedia公司的產(chǎn)

4、品的一款“所見即所得”的網(wǎng)頁編輯工具，采用了多種先進技術(shù)，用戶不必編寫復(fù)雜的HTML源代碼。因此，Dreamweaver是一款可以滿足多層次需求、功能強大的可視化專業(yè)網(wǎng)頁制作工具。 目前常用的版本為 Dreamweaver 2004和Dreamweaver 8。,6.2.3FrontPage,Microsoft Office FrontPage 2003是Microsoft Office組件之一，利用它可以直接生成HTML代碼而不用手工輸入，是最簡單、最容易，卻又功能強大的網(wǎng)頁編輯工具。FrontPage采用典型的 Word 界面設(shè)計，制作網(wǎng)頁的過程就是加入網(wǎng)頁元素，并對它們格式和屬性進行定義

5、。只要你懂得使用 Word，就差不多等于已經(jīng)會使用 FrontPage。FrontPage 2003與早期的版本比較，有許多增強功能和新增的功能。 FrontPage 2003的確是最好的入門級網(wǎng)頁編輯工具。 目前常用的版本為 Frontpage2000 和 Frontpage 2003。,6.3 FrontPage 2003的使用,6.3.1視圖方式 6.3.2創(chuàng)建站點 6.3.3編輯網(wǎng)頁 6.3.4超鏈接 6.3.5表單制作 6.3.6特殊效果 6.3.7站點發(fā)布與維護,6.3.1視圖方式,FrontPage 2003有兩類視圖：網(wǎng)頁視圖和網(wǎng)站視圖。大多數(shù)情況下，處理單個頁面時，應(yīng)使用“網(wǎng)

6、頁視圖”；處理整個網(wǎng)站時，應(yīng)使用“網(wǎng)站視圖”。 1、網(wǎng)頁視圖 設(shè)計視圖：這是制作網(wǎng)頁的最基本方式，也是一種所見即所得的編輯方式。用戶可以像編輯Word一樣編輯編輯頁面，不需要考慮代碼，軟件自動將設(shè)計轉(zhuǎn)換為Html代碼。 拆分視圖：把工作區(qū)分成兩部分，一部分顯示代碼視圖，另一部分顯示設(shè)計視圖。 代碼視圖：顯示Html代碼，可以編輯或修改代碼。 預(yù)覽視圖：模擬網(wǎng)頁在瀏覽器中的顯示，用戶可以預(yù)覽網(wǎng)頁的實際效果。,2、網(wǎng)站視圖 文件夾視圖：在次視圖中，站點為一組文件和文件夾，并顯示了當前文件夾下保安的子文件夾和網(wǎng)頁文件的一些信息，如名稱、標題、笑答、類型、修改日期、修改者和注釋等。 遠程站點視圖：當要

7、發(fā)布站點時，就需要使用此視圖。它能將整個網(wǎng)站和單獨的文件和文件夾發(fā)布到任何位置，同時顯示本地網(wǎng)站和遠程網(wǎng)站中的文件。而且圖標和說明性文本會指示文件和文件夾的狀態(tài)，同步功能有助于確保不會意外地覆蓋任何文件或文件夾。 報表視圖：可統(tǒng)計當前站點的情況，并以表格的顯示出來。包括：,導(dǎo)航視圖：用于顯示網(wǎng)站的網(wǎng)頁層次結(jié)構(gòu)，用戶可清晰的看到各頁面之間的邏輯連接關(guān)系。在此視圖中，可以新建、修改、刪除的網(wǎng)頁結(jié)構(gòu)和邏輯關(guān)系。 超鏈接視圖：將當前站點顯示為一個連接文件的網(wǎng)絡(luò)，它們表示了站點中頁面之間的相互鏈接關(guān)系。雙擊其中的超鏈接，將自動進入與之對應(yīng)的網(wǎng)頁。 任務(wù)視圖：主要用來創(chuàng)建和管理任務(wù)，顯示了當前站點中創(chuàng)建的

8、所有未完成的和已完成的任務(wù)，幫助用戶了解工作情況。,6.3.2創(chuàng)建站點,所謂站點，就是多個相關(guān)的網(wǎng)頁通過各種鏈接關(guān)聯(lián)起來的集合，即站點是網(wǎng)頁的集合。在使用FrontPage開發(fā)網(wǎng)頁之前，應(yīng)建立一個本地站點，用來管理創(chuàng)建的網(wǎng)頁。 FrontPage的站點有兩種類型：基于磁盤的站點和基于服務(wù)器的站點。 單擊“文件”菜單中的“新建”命令，在工作區(qū)的右側(cè)將顯示新建任務(wù)的窗格，如圖6-3所示。其中有“新建網(wǎng)頁”、“新建網(wǎng)站”、“模板”3個選項組，選擇“新建網(wǎng)站”下的任一選項。 單擊“常用”工具欄上“新建普通網(wǎng)頁”按鈕后的下拉按鈕，在彈出的下拉菜單中選擇“站點”命令。,6.3.3編輯網(wǎng)頁,1、新建網(wǎng)頁 2、保存網(wǎng)頁 3、網(wǎng)頁布局 1)表格布局 2)框架布局 4、文字操作 5、圖形處理 6、表格處理,6.3.4超鏈接,1、超鏈接到同一網(wǎng)頁的不同位置 2、超鏈接到另一張網(wǎng)頁或地址 3、超鏈接到文件 4、超鏈接到郵箱 5、圖片上的熱點鏈接,6.3.5表單制作,1、新建表單 2、編輯表單 3、提交表單 6.3.6特殊效果 1、動態(tài)效果組件