HTML語(yǔ)言與網(wǎng)頁(yè)設(shè)計(jì)4.ppt

1、HTML語(yǔ)言與網(wǎng)頁(yè)設(shè)計(jì),頁(yè)面排版,學(xué)習(xí)目標(biāo),理解頁(yè)面版式設(shè)計(jì)的基本原則。 掌握構(gòu)造表格和設(shè)置表格屬性的方法。 熟練掌握應(yīng)用表格設(shè)計(jì)網(wǎng)頁(yè)布局的方法。 掌握使用框架設(shè)計(jì)網(wǎng)頁(yè)布局的方法。,Part 1,頁(yè)面版式基礎(chǔ),什么是頁(yè)面版式,設(shè)計(jì)頁(yè)面版式就是指采用一種合適的技術(shù)將網(wǎng)頁(yè)的內(nèi)容顯示在瀏覽器中。在網(wǎng)頁(yè)中可以使用多種方式進(jìn)行版式設(shè)計(jì)，以形成一個(gè)統(tǒng)一的站點(diǎn)風(fēng)格并獲得需要的效果。一般可以用表格和框架這兩種方式進(jìn)行頁(yè)面版式設(shè)計(jì)。,版式在網(wǎng)頁(yè)界面中的作用,網(wǎng)頁(yè)界面的版式設(shè)計(jì)，是指將文字、圖形圖像、色彩、動(dòng)畫(huà)、視頻多媒體等網(wǎng)頁(yè)對(duì)象的傳達(dá)要素，根據(jù)特定內(nèi)容和主題，在網(wǎng)頁(yè)限定范圍內(nèi)將設(shè)計(jì)意圖以視覺(jué)形式表現(xiàn)出來(lái)。,版

2、式在網(wǎng)頁(yè)界面中的作用,從網(wǎng)頁(yè)技術(shù)角度講，設(shè)計(jì)者通常是圍繞著頁(yè)面中的導(dǎo)航欄、圖像、動(dòng)畫(huà)、正文等內(nèi)容展開(kāi)頁(yè)面布局的。在頁(yè)面制作過(guò)程中要確定一個(gè)頁(yè)面的布局，應(yīng)該綜合考慮如何安置頁(yè)面中的各種內(nèi)容，比如標(biāo)題文字、導(dǎo)航欄、圖片、動(dòng)畫(huà)、超鏈接等。,版式在網(wǎng)頁(yè)界面中的作用,從審美角度出發(fā)，要求設(shè)計(jì)師運(yùn)用統(tǒng)一、對(duì)比、對(duì)稱、均衡等形式原理進(jìn)行設(shè)計(jì)，利用網(wǎng)頁(yè)中的元素構(gòu)造出和諧、流暢、自然的網(wǎng)頁(yè)界面。,版式的實(shí)用功能,主次分明、重點(diǎn)突出 應(yīng)能讓瀏覽者迅速找到網(wǎng)頁(yè)的主題，并對(duì)整個(gè)頁(yè)面有全面的掌握 導(dǎo)航清晰、便于瀏覽 網(wǎng)頁(yè)應(yīng)該具有一致風(fēng)格的導(dǎo)航系統(tǒng)，為用戶瀏覽提供方便 布局合理、邏輯性強(qiáng) 應(yīng)能使網(wǎng)頁(yè)中的各種視覺(jué)信息在頁(yè)面

3、中合理、有序地排列，既要體現(xiàn)出設(shè)計(jì)思想，又要符合一般的視覺(jué)原理和思維習(xí)慣,版式的審美功能,統(tǒng)一，是指設(shè)計(jì)作品的整體性、一致性。 分割，是指將頁(yè)面劃分為不同區(qū)域，以便妥善安排各種頁(yè)面組成元素。 對(duì)比，是指通過(guò)合理運(yùn)用矛盾和沖突，使設(shè)計(jì)更加富有生機(jī)和活力。,演示頁(yè)面版式示例,Page74,75,90,Part 2,使用表格設(shè)計(jì)頁(yè)面版式,表格的組成,表格標(biāo)記符table 表格標(biāo)題 caption 表格行 tr （table row） 表格數(shù)據(jù) td （table data） 表格表頭 th （table heading）,演示表格示例,表格的構(gòu)造,在 TH 或 TD 標(biāo)記符中使用 rowspan 屬

4、性進(jìn)行行合并 在 TH 或 TD 標(biāo)記符中使用 colspan 屬性進(jìn)行列合并,演示表格的行列合并,邊框與分隔線,Frame屬性 Rules屬性 Border屬性,演示邊框與分隔線,表格對(duì)齊,表格的頁(yè)面對(duì)齊 表格內(nèi)容的對(duì)齊 水平對(duì)齊(align) 垂直對(duì)齊(valign),演示表格的對(duì)齊,表格對(duì)齊 內(nèi)容的水平對(duì)齊 內(nèi)容的垂直對(duì)齊,控制單元格空白,Cellspacing屬性 Cellpadding屬性,演示控制單元格空白,使用表格排版,頁(yè)面布局 劃分頁(yè)面區(qū)域 背景色的設(shè)置 嵌套表格 特殊排版效果表格細(xì)線的實(shí)現(xiàn),演示劃分頁(yè)面區(qū)域,強(qiáng)調(diào)：如果要將某網(wǎng)頁(yè)元素（例如一幅圖像）放到特定位置，首先應(yīng)想到使用

5、表格！,演示表格背景的設(shè)置,Bgcolor設(shè)置背景色 Background設(shè)置背景圖像,演示使用嵌套表格,復(fù)雜的網(wǎng)頁(yè)布局需要借助嵌套表格！,表格的應(yīng)用,綜合應(yīng)用表格的各種屬性，可以創(chuàng)建一些常用的網(wǎng)頁(yè)效果，例如：網(wǎng)頁(yè)細(xì)線。,演示表格細(xì)線1,演示表格細(xì)線2,演示表格布局實(shí)例,Part 3,使用框架設(shè)計(jì)頁(yè)面版式,什么是框架,在同一個(gè)瀏覽器窗口中同時(shí)顯示多個(gè)網(wǎng)頁(yè)的交互式結(jié)構(gòu)。 通過(guò)為超鏈接指定目標(biāo)框架，可以為框架之間建立起內(nèi)容的聯(lián)系，從而實(shí)現(xiàn)頁(yè)面導(dǎo)航的功能。,演示框架示例,框架結(jié)構(gòu),框架集 定義框架的結(jié)構(gòu) 框架 具體定義每個(gè)頁(yè)面 ,框架結(jié)構(gòu),框架集的定義 Rows 定義行結(jié)構(gòu)框架 Cols 定義列結(jié)構(gòu)

6、框架 Rows 和 cols 的取值： 像素?cái)?shù) % N*,演示定義框架結(jié)構(gòu),行結(jié)構(gòu) 列結(jié)構(gòu)1 列結(jié)構(gòu)2 嵌套框架,框架的初始化,在 frame 標(biāo)記符中使用 src 屬性可以指定框架中最初顯示的頁(yè)面。,演示指定框架頁(yè)面,超鏈接的目標(biāo)框架,所謂目標(biāo)框架，是指單擊框架網(wǎng)頁(yè)中的超鏈接時(shí)，對(duì)應(yīng)的目標(biāo)文件顯示在哪個(gè)框架中。,設(shè)置目標(biāo)框架,使用指定框架名稱 特殊的框架名稱 _blank 表示打開(kāi)新的窗口 _top 表示返回頂層窗口 在超鏈接標(biāo)記符 A 中指定 target 屬性，取值為具體的框架名稱。,演示指定目標(biāo)框架,控制框架的顯示效果,設(shè)置框架邊框。 設(shè)置框架滾動(dòng)條。 設(shè)置框架內(nèi)容與框架邊框之間的空白。,演示控制框架顯示效果,使用頁(yè)內(nèi)框架