第5章网页设计..ppt

第5章 网页设计 计算中心公共计算机教学部 2008年3月 主要内容 网页与网站的概念 整体规划 网页制作语言 网页制作工具 用FrontPage制作网页 网站的发布 网页与网站的基本概念 网页：一般含有文字、表格、图像、声音、动画、视频，以及实现信息跳转的超链接；网页通常用HTML标识，网页中的图像、声音、动画等都是以独立文件形式存在，通过在网页中设置形成引用关系。 网站：存放在网上某个服务器中的信息服务系统，网页间按一定的方式链接而成的整体构成网站。 整体规划 确定网页的整体风格 网站标志设计、色彩、版面布局、浏览方式、交互性、文字和价值等 网页的组织结构 主要有层次型、线型、网状型 布局设计 常见的有T型布局、国字型布局、匡字型布局、封面型等 网页制作语言 超文本标记语言HTML（Hyper Text Makeup Language）是一种用来创作万维网页面的描述语言 超文本：指文本中直接嵌入的链接点 HTML使用标记方式来定义文档的格式、组成和链接关系，如字形、字体、标题和超文本链接等 HTML的标记 HTML标记说明网页中的内容及其相关信息是如何显示的 标记总是用三角括号括起 大多数标记成对出现，如：b网页制作/b，用成对标记对所“夹”内容的显示进行控制 结束标记比开始标记多“/” HTML文档的结构 html ‘网页文档的开始 head ‘头部标记 title第一次编写网页/title ‘标题标记 /head body ‘主体标记 网页制作 /body /html HTML的排版标记 P BR CENTER B/I/U H1/H1……H6/H6 FONT 例1 文本标志的综合实例 html head title文本标志的综合实例/title /head body text=blue CENTER h1最大的标题/h1 h3使用h3的标题/h3 h6最小的标题/h6 浏览器显示效果（例1） HTML的排版标记 HR IMG src= A href= 例2 图像标志的综合示例 html head title图像标志的综合示例/title /head body p align=centerimg src=flower.jpg alt=网页制作/p hr width=600 size=2 color=#0000FF center 浏览器显示效果（例2） HTML的排版标记 OL UL 例3 列表示例 HTML BODY 无序号列表BR UL LI apples LI bananas /UL 浏览器显示效果（例3） HTML的排版标记 TABLE TR TD TH HTML的排版标记 FORM INPUT SELECT TEXTAREA 例4 表格和表单综合实例 html body bgcolor= 00ddff center h3留言薄/h3 form name=frm1 method=post table cellspacing=2 cellpadding=2 border=1 tr td留言人/td tdinput type=text name=from size=30 maxlength=30 /td /tr tr td主 题:/td tdselect name=title 例4 表格和表单综合实例 tr td align=center colspan=2 您的职业是BR INPUT type=radio id=rdo1 name=rdoJob value=律师checked律师 INPUT type=“radio” id=rdo2 name=rdoJob value=“企业工作人员”企业工作人员 INPUT type=radio id=rdo3 name=rdoJob value=IT工作人员IT从业人员 INPUT type=radio id=rdo4 name=rdoJob value=教师教师 /td/tr 浏览器显示效果（例4） 网页制作工具 直接用HTML编写制作网页很不方便 花大量的时间测试 反复地运行浏览器测试和修改HTML文档 掌握大量的HTML语言语法规则 利用可视化网页设计工具 Frontpage2000 Dreamweaver Flash InterDev 层状结构 层状结构类似于目录系