4.1_網(wǎng)站與網(wǎng)頁(yè)設(shè)計(jì)1.ppt

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

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

3、HTML的排版標(biāo)記, / ,例1 文本標(biāo)志的綜合實(shí)例, 文本標(biāo)志的綜合實(shí)例 最大的標(biāo)題 使用h3的標(biāo)題 最小的標(biāo)題,黑體字文本 斜體字文本 下加一劃線文本 size取值“5”、color取值“green”時(shí)的文本 ,瀏覽器顯示效果（例1）,HTML的排版標(biāo)記, ,例2 圖像標(biāo)志的綜合示例, 圖像標(biāo)志的綜合示例 ,友情鏈接 與我聯(lián)系 ,瀏覽器顯示效果（例2）,HTML的排版標(biāo)記, ,例3 列表示例, 無(wú)序號(hào)列表 apples bananas ,有序號(hào)列表 oranges peaches grapes ,瀏覽器顯示效果（例3）,HTML的排版標(biāo)記, ,HTML的排版標(biāo)記, ,例4 表格和表單綜合實(shí)

4、例, 留言薄 留言人 主 題: ,教育 娛樂(lè) 旅游 展覽 留言內(nèi)容: ,例4 表格和表單綜合實(shí)例, 您的職業(yè)是 律師 企業(yè)工作人員 IT從業(yè)人員 教師 ,      ,瀏覽器顯示效果（例4）,網(wǎng)頁(yè)制作工具,直接用HTML編寫制作網(wǎng)頁(yè)很不方便 花大量的時(shí)間測(cè)試 反復(fù)地運(yùn)行瀏覽器測(cè)試和修改HTML文檔 掌握大量的HTML語(yǔ)言語(yǔ)法規(guī)則 利用可視化網(wǎng)頁(yè)設(shè)計(jì)工具 Frontpage2000 Dreamweaver Flash InterDev,層狀結(jié)構(gòu) 層狀結(jié)構(gòu)類似于目錄系統(tǒng)的樹型結(jié)構(gòu)，由網(wǎng)站文件的主頁(yè)開始，依次劃分為一級(jí)標(biāo)題、二級(jí)標(biāo)題等等，逐級(jí)細(xì)化，直至提供給瀏覽者具體信息。,線性結(jié)構(gòu) 線性結(jié)構(gòu)用于組織本身是線性順序形式存在的信息，可以引導(dǎo)瀏覽者按部就班地瀏覽整個(gè)網(wǎng)站文件。通常情況下，網(wǎng)站文件的結(jié)構(gòu)是層狀結(jié)構(gòu)和線性結(jié)構(gòu)相結(jié)合的。,網(wǎng)狀結(jié)構(gòu) 網(wǎng)狀結(jié)構(gòu)類似于Internet的組成結(jié)構(gòu)，各網(wǎng)頁(yè)之間形成網(wǎng)狀連接，允許用戶隨意瀏覽。,主 頁(yè),頁(yè)面1,頁(yè)面2,頁(yè)面3,頁(yè)面4,頁(yè)面5,頁(yè)面7,頁(yè)面8,一級(jí)標(biāo)題,二級(jí)標(biāo)題,網(wǎng)狀結(jié)構(gòu),頁(yè)面6,超文本,這些鏈接點(diǎn)一般用下劃線或不同