《网页设计方案》PPT课件.ppt
第5章 网页设计,计算中心公共计算机教学部2008年3月,主要内容,网页与网站的概念 整体规划 网页制作语言 网页制作工具 用FrontPage制作网页 网站的发布,网页与网站的基本概念,网页：一般含有文字、表格、图像、声音、动画、视频，以及实现信息跳转的超链接；网页通常用HTML标识，网页中的图像、声音、动画等都是以独立文件形式存在，通过在网页中设置形成引用关系。网站：存放在网上某个服务器中的信息服务系统，网页间按一定的方式链接而成的整体构成网站。,整体规划,确定网页的整体风格 网站标志设计、色彩、版面布局、浏览方式、交互性、文字和价值等 网页的组织结构 主要有层次型、线型、网状型布局设计 常见的有T型布局、国字型布局、匡字型布局、封面型等,网页制作语言,超文本标记语言HTML（Hyper Text Makeup Language）是一种用来创作万维网页面的描述语言超文本：指文本中直接嵌入的链接点 HTML使用标记方式来定义文档的格式、组成和链接关系，如字形、字体、标题和超文本链接等,HTML的标记,HTML标记说明网页中的内容及其相关信息是如何显示的标记总是用三角括号括起大多数标记成对出现，如：网页制作，用成对标记对所“夹”内容的显示进行控制结束标记比开始标记多“/”,HTML文档的结构,网页文档的开始 头部标记 第一次编写网页 标题标记 主体标记网页制作,HTML的排版标记,/,例1 文本标志的综合实例,文本标志的综合实例最大的标题使用h3的标题最小的标题,黑体字文本 斜体字文本下加一划线文本size取值“5”、color取值“green”时的文本,浏览器显示效果（例1）,HTML的排版标记,例2 图像标志的综合示例,图像标志的综合示例,友情链接与我联系,浏览器显示效果（例2）,HTML的排版标记,例3 列表示例,无序号列表 apples bananas,有序号列表 oranges peaches grapes,浏览器显示效果（例3）,HTML的排版标记,HTML的排版标记,例4 表格和表单综合实例,留言薄留言人主 题:,教育 娱乐 旅游 展览留言内容:,例4 表格和表单综合实例,您的职业是律师企业工作人员IT从业人员教师,    ,浏览器显示效果（例4）,网页制作工具,直接用HTML编写制作网页很不方便花大量的时间测试 反复地运行浏览器测试和修改HTML文档掌握大量的HTML语言语法规则 利用可视化网页设计工具 Frontpage2000 Dreamweaver Flash InterDev,层状结构 层状结构类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。,线性结构 线性结构用于组织本身是线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。通常情况下，网站文件的结构是层状结构和线性结构相结合的。,网状结构 网状结构类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。,主 页,页面1,页面2,页面3,页面4,页面5,页面7,页面8,一级标题,二级标题,网状结构,页面6,超文本,这些链接点一般用下划线或不同颜色的文字短语作标记，又称为超文本链接点当鼠标指针移到这些标记上，鼠标指针形状转换为手形，单击鼠标器左键，立即转到与当前阅读的文档相关的内容上,
