网页设计制作.pptVIP

第2章 FrontPage网页设计制作 讲解提纲 2.1 FrontPage开发环境 2.2 用表格进行版面设计 2.3 在网页中添加表单 2.4 表单结果处理 2.5 动态网页制作 HTML语法将穿插讲解 2.1 FrontPage开发环境 特点 1)易学易用，与WORD，EXCEL,POWER POINT相似，所见即所得，不直接面对枯燥的HTML代码 2)强大的横板利向导功能：带有大量的模板和向导,按提示选择和确认，可完成主体结构的创作。 3)精心组织的图形界面。网页、文件夹、报表、导航、任务等丰富的视图力式，提供不同信息 4)直观形象的站点管理。可直观形象的创建站点的主页结构、组织站点的文件、输入输出主页或文件、测试修复超级链接等。 5)智能化管理。在导航视图中增删页而，网站中所有相关页面的导航条都会自动更新 2.1.1视图及组织模式 网页、文件夹、报表、导航、超链接和任务6个视图 视图及组织模式2 网页视图 网页在视图中相当于处于编辑状态,可建立或移动文件，左边的文件夹列表区和右边的页面编辑区。页面编辑区的左下角有3个选项卡：普通、html和预览 文件夹视图 管理网站的目录结构以及站点文件, 目录的添加与删除、各种文件的导入导出、网页的建立、移动和删除等。 导航视图 显示站点的漫游结构 视图及组织模式3 报表视图 检查和统计当前站点的许多项信息，如图形文件、未链接的文件、链接的文件、较旧的文什、较新的文件等 超链接视图 显示站点所有文件的超级链接情况，其他页面指向当前页或相反 任务视图 随时了解站点中哪些任务还没有完成，哪些具有更高的优先权等 2.1.2站点及网页 任何一个本地目录都可以被当作一个站点来处理。 新建一个“只有一个网贝的站点”，观察其代码。 自动产生一个index.htm的文件和_private和images文件夹， index.htm是别人访问网站时首先看到的页面， _private存放一些专用文件， images存放图片。 一般网站要有多个网页组成，互相以超链接导航 双击index.htm文件打开网页，单击编辑区下的“html”可查看源代码 Html文档一般有两部分组成：文档所要表达的内容信息和一系列html标记。标记（Tag）是用来描述各种功能元素的符号。 html /告诉浏览器这是一个html文档 head /记录一些重要信息，一般不显示 meta http-equiv=Content-Type content=text/html; charset=gb2312 meta http-equiv=Content-Language content=zh-cn title主页/title /网页标题 meta name=GENERATOR content=Microsoft FrontPage 4.0 meta name=ProgId content=FrontPage.Editor.Document /head body /文档主体，显示网页的内容 可定义颜色 /body /背景，超链接状态等 /html 2.1.3网页图片的基本知识 利用图片可增加网页的效果，增强可看性和吸引力 网页种常用的主要有三种： Gif格式（Graphics Interchange Format） CompuServe公司制定，256色，无损压缩，多张图片保存在一个文档里，可产生动画效果 JPEG图片格式 Joint Photographic Experts Group制定，能压缩真彩色，失真处理，支持24位真彩色。 PNG格式（Portable Graphics Network） 1996,World Wide Web Consortium(W3C)制定的Web标准图片格式，尺寸稍大，没普及 注意事项及相关代码 图片是网页呈现精彩，但尺寸太大影响网络速度，特别是拨号用户，故应注意 1 控制图片尺寸，在容许内尽量压缩 2 控制图片颜色数 16色 ，256色 3 谨慎使用，能少用就少用 可自己制作或从网上得到图片 代码格式 img border=0 src=bb03.jpg width=320 height=216 2.2 用表格进行版面设计 2.2.1 表格的建立与处理 以行列的方式呈现数据，表格单元中可以是文字、图像、表单以及任何其他FrontPage组件。可利用表格构造页面布局。 表格的结构：标题，行，列，标头，单元格，边框 表格代码 table border=2 width=100% height=44 cellpadding=3 cellspacing=4 tr td width=50% heig