第5部分网页相关设计方案

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

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

3、结构 网页文档的开始 头部标记 第一次编写网页 标题标记 主体标记网页制作HTML的排版标记nnnn/nn例1 文本标志的综合实例文本标志的综合实例最大的标题使用h3的标题最小的标题黑体字文本 斜体字文本下加一划线文本size取值“5”、color取值“green”时的文本浏览器显示效果（例1）HTML的排版标记nnn例2 图像标志的综合示例图像标志的综合示例友情链接与我联系浏览器显示效果（例2）HTML的排版标记nn例3 列表示例无序号列表 apples bananas有序号列表 oranges peaches grapes浏览器显示效果（例3）HTML的排版标记nnnnHTML的排版标记n

4、nnn例4 表格和表单综合实例留言薄留言人主 题: 教育 娱乐 旅游 展览留言内容:例4 表格和表单综合实例您的职业是律师企业工作人员IT从业人员教师&nbsp&nbsp&nbsp&nbsp浏览器显示效果（例4）网页制作工具网页制作工具n直接用HTML编写制作网页很不方便q花大量的时间测试 q反复地运行浏览器测试和修改HTML文档q掌握大量的HTML语言语法规则 n利用可视化网页设计工具 qFrontpage2000 qDreamweaver qFlash qInterDev 层状结构层状结构 层状结构类似于目录系统的树型结构，由网站文件的主页开始，依层状结构类

5、似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。具体信息。 主 页页面1页面2页面3页面4页面5页面6页面7一级标题二级标题层状结构 线性结构线性结构 线性结构用于组织本身是线性顺序形式存在的信息，可以引导浏览线性结构用于组织本身是线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。通常情况下，网站文件的结构是层者按部就班地浏览整个网站文件。通常情况下，网站文件的结构是层状结构和线性结构相结合的。状结构和线性结构相结合的。主 页页面1页面2页面3线性结构 网状结构网状结构 网状结构类似于网状结构类似于Internet的组成结构，各网页之间形成网状连接，的组成结构，各网页之间形成网状连接，允许用户随意浏览。允许用户随意浏览。主 页页面1页面2页面3页面4页面5页面7页面8一级标题二级标题网状结构页面6超文本q这