第5部分網(wǎng)頁相關(guān)設(shè)計方案

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

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

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

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

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