1、第5部分網頁相關設計方案主要內容主要內容n 網頁與網站的概念網頁與網站的概念n 整體規劃整體規劃n 用用FrontPage制作網頁制作網頁n 網站的發布網站的發布網頁與網站的基本概念n網頁網頁：一般含有文字、表格、圖像、聲音、動畫、視頻，以及實現信息跳轉的超鏈接；網頁通常用HTML標識，網頁中的圖像、聲音、動畫等都是以獨立文件形式存在，通過在網頁中設置形成引用關系。n網站網站：存放在網上某個服務器中的信息服務系統，網頁間按一定的方式鏈接而成的整體構成網站。整體規劃整體規劃n確定網頁的整體風格確定網頁的整體風格 網站標志設計、色彩、版面布局、瀏覽方式、交互性、文字和價值等 n網頁的組織結構網頁的

2、組織結構 主要有層次型、線型、網狀型n布局設計布局設計 常見的有T型布局、國字型布局、匡字型布局、封面型等網頁制作語言網頁制作語言n超文本標記語言HTML（Hyper Text Makeup Language）是一種用來創作萬維網頁面的描述語言n超文本超文本：指文本中直接嵌入的鏈接點 nHTML使用標記方式來定義文檔的格式、組成和鏈接關系，如字形、字體、標題和超文本鏈接等 HTML的標記的標記nHTML標記說明網頁中的內容及其相關信息是如何顯示的n標記總是用三角括號括起n大多數標記成對出現，如：網頁制作，用成對標記對所“夾”內容的顯示進行控制n結束標記比開始標記多“/”HTML文檔的結構文檔的

3、結構 網頁文檔的開始 頭部標記 第一次編寫網頁 標題標記 主體標記網頁制作HTML的排版標記nnnn/nn例1 文本標志的綜合實例文本標志的綜合實例最大的標題使用h3的標題最小的標題黑體字文本 斜體字文本下加一劃線文本size取值“5”、color取值“green”時的文本瀏覽器顯示效果（例1）HTML的排版標記nnn例2 圖像標志的綜合示例圖像標志的綜合示例友情鏈接與我聯系瀏覽器顯示效果（例2）HTML的排版標記nn例3 列表示例無序號列表 apples bananas有序號列表 oranges peaches grapes瀏覽器顯示效果（例3）HTML的排版標記nnnnHTML的排版標記n

4、nnn例4 表格和表單綜合實例留言薄留言人主 題: 教育 娛樂 旅游 展覽留言內容:例4 表格和表單綜合實例您的職業是律師企業工作人員IT從業人員教師&nbsp&nbsp&nbsp&nbsp瀏覽器顯示效果（例4）網頁制作工具網頁制作工具n直接用HTML編寫制作網頁很不方便q花大量的時間測試 q反復地運行瀏覽器測試和修改HTML文檔q掌握大量的HTML語言語法規則 n利用可視化網頁設計工具 qFrontpage2000 qDreamweaver qFlash qInterDev 層狀結構層狀結構 層狀結構類似于目錄系統的樹型結構，由網站文件的主頁開始，依層狀結構類

5、似于目錄系統的樹型結構，由網站文件的主頁開始，依次劃分為一級標題、二級標題等等，逐級細化，直至提供給瀏覽者次劃分為一級標題、二級標題等等，逐級細化，直至提供給瀏覽者具體信息。具體信息。 主 頁頁面1頁面2頁面3頁面4頁面5頁面6頁面7一級標題二級標題層狀結構 線性結構線性結構 線性結構用于組織本身是線性順序形式存在的信息，可以引導瀏覽線性結構用于組織本身是線性順序形式存在的信息，可以引導瀏覽者按部就班地瀏覽整個網站文件。通常情況下，網站文件的結構是層者按部就班地瀏覽整個網站文件。通常情況下，網站文件的結構是層狀結構和線性結構相結合的。狀結構和線性結構相結合的。主 頁頁面1頁面2頁面3線性結構 網狀結構網狀結構 網狀結構類似于網狀結構類似于Internet的組成結構，各網頁之間形成網狀連接，的組成結構，各網頁之間形成網狀連接，允許用戶隨意瀏覽。允許用戶隨意瀏覽。主 頁頁面1頁面2頁面3頁面4頁面5頁面7頁面8一級標題二級標題網狀結構頁面6超文本q這