4.1_网站与网页设计1.ppt

1、第5章 网页设计,计算中心公共计算机教学部 2009年2月,主要内容,网页与网站的概念 整体规划 网页制作语言 网页制作工具 用FrontPage制作网页 网站的发布,网页与网站的基本概念,网页：一般含有文字、表格、图像、声音、动画、视频，以及实现信息跳转的超链接；网页通常用HTML标识，网页中的图像、声音、动画等都是以独立文件形式存在，通过在网页中设置形成引用关系。 网站：存放在网上某个服务器中的信息服务系统，网页间按一定的方式链接而成的整体构成网站。,整体规划,确定网页的整体风格 网站标志设计、色彩、版面布局、浏览方式、交互性、文字和价值等 网页的组织结构 主要有层次型、线型、网状型 布局

2、设计 常见的有T型布局、国字型布局、匡字型布局、封面型等,网页制作语言,超文本标记语言HTML（Hyper Text Makeup Language）是一种用来创作万维网页面的描述语言 超文本：指文本中直接嵌入的链接点 HTML使用标记方式来定义文档的格式、组成和链接关系，如字形、字体、标题和超文本链接等,HTML的标记,HTML标记说明网页中的内容及其相关信息是如何显示的 标记总是用三角括号括起 大多数标记成对出现，如：网页制作，用成对标记对所“夹”内容的显示进行控制 结束标记比开始标记多“/”,HTML文档的结构, 网页文档的开始 头部标记 第一次编写网页 标题标记 主体标记 网页制作 ,

3、HTML的排版标记, / ,例1 文本标志的综合实例, 文本标志的综合实例 最大的标题 使用h3的标题 最小的标题,黑体字文本 斜体字文本 下加一划线文本 size取值“5”、color取值“green”时的文本 ,浏览器显示效果（例1）,HTML的排版标记, ,例2 图像标志的综合示例, 图像标志的综合示例 ,友情链接 与我联系 ,浏览器显示效果（例2）,HTML的排版标记, ,例3 列表示例, 无序号列表 apples bananas ,有序号列表 oranges peaches grapes ,浏览器显示效果（例3）,HTML的排版标记, ,HTML的排版标记, ,例4 表格和表单综合实

4、例, 留言薄 留言人 主 题: ,教育 娱乐 旅游 展览 留言内容: ,例4 表格和表单综合实例, 您的职业是 律师 企业工作人员 IT从业人员 教师 ,      ,浏览器显示效果（例4）,网页制作工具,直接用HTML编写制作网页很不方便 花大量的时间测试 反复地运行浏览器测试和修改HTML文档 掌握大量的HTML语言语法规则 利用可视化网页设计工具 Frontpage2000 Dreamweaver Flash InterDev,层状结构 层状结构类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。,线性结构 线性结构用于组织本身是线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。通常情况下，网站文件的结构是层状结构和线性结构相结合的。,网状结构 网状结构类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。,主 页,页面1,页面2,页面3,页面4,页面5,页面7,页面8,一级标题,二级标题,网状结构,页面6,超文本,这些链接点一般用下划线或不同