网页设计与网站建设基础课件.ppt

7 0本章要求7 1认识FrontPage20007 2创建站点和网页7 4发布WEB页 通过本章的学习 应掌握 1 FrontPage2000的窗口组成和视图模式 2 创建网站和网页 插入和编辑图片 表格 多媒体信息等 3 创建框架网页和表单 4 通过设置个人服务器来发布WEB或预览WEB页 返回本章首页 7 1认识Frontpage2000 FrontPage2000的界面与Word十分相似 在窗口底部左侧有三个视图按钮 1 普通 视图就是正常的编辑环境 2 HTML 视图就是自动生成的HTML语句 可以修改HTML源文件 3 预览 视图可预览网页效果 FrontPage2000的视图 FrontPage2000有6种视图 利用它们可以编辑网页 管理站点文件夹 生成报表 管理站点的导航图 编辑站点中的网页间的链接以及实现任务管理 1 网页视图2 文件夹视图3 报表视图4 导航视图5 超链接视图6 任务视图 返回本章首页 7 2创建站点和网页 一 创建站点为了将网页发布到万维网的WEB服务器上让其他用户共浏览和使用 则需要先建立站点 再使用 导航 视图来管理网页的层次关系和链接关系 创建了新站点的同时 在 文件夹 视图或 文件夹列表 栏中会出现两个新文件夹 其中一个文件夹名是 images 该文件夹是为用户来保存当前网站中的图片文件 在制作网页之前可先把要用到的图片都保存到该文件夹中 另一个文件名是 private 该文件夹是用来保存象 vti cnf 之类的系统用来做缓存的文件夹 要使用过程中不要删除它们 二 创建新网页 创建网页主要包括文字处理 图片处理 表格处理及超链接设置等操作 是一个综合性的图文并排的文档处理模块 其中常规的文字处理如文字的插入 删除 格式编排 查找和替换 复制和移动 段落格式等操作与WORD2000完全相同 用户只需采用WORD2000相类似的方法就可在FrontPage2000中完成对文字的处理 本节重点介绍如何使用 表格 工具来对网页进行布局设置 插入和编辑图片 超链接设置以及使用框架创建网页的布局等内容 三 创建表格 使用创建表格不仅能够清晰地表现文字 图像 表单 而且能够提供导航工具和对WEB站点进行整体布局 它在网页设计过程 应用相当广泛 1 创建表格2 编辑表格3 设置表格的属性可以使用 表格属性 命令来重新指定表格的宽度 对齐方式 边框粗细及单元格的边距和空间等属性 4 文本与表格的相互转化 四 插入图片 1 网页的图片格式在网页中常用的图片格式有GIF和JPEG两种格式 要注意这两种格式的区别2 在网页中插入图片3 添加视频或背景音乐4 图片属性5 编辑图片 五 特殊效果 这里简单介绍如何使用 滚动字幕 功能为网页添加特殊效果 六 网页的属性设置 网页的属性包括网页的标题 位置 背景 页边距和语言等重要信息 1 常规属性设置 1 位置框 指定网页的URL 2 标题 给出网页的标题 3 背景音乐 指定浏览器在打开网页自动播放的音乐 2 背景属性设置 3 设置网页边距主要用于设置网页相对窗口的上边距和左边距 七 保存和预览网页 FrontPage2000没有自动保存功能 所以在一般情况下 用户需将网页保存在当前站点内 若要将网页保存在其他位置 则需采用 文件 菜单中的 另存为 命令来保存 具体保存方法与WORD2000相似 超链接是从一个Web页或文件到另一个Web页或文件的链接 当站点访问者单击超链接时 目标将显示在Web浏览器中 并根据目标的类型来打开或运行 超链接有很多种形式 我们在这里主要介绍以下三种 1 建立到Web页超链接 2 建立到电子邮件的超链接 3 使用书签建立超链接使用书签可以实现在同一个页面的不同部分进行跳转 创建超链接前需先要定义书签 然后就直接把超链接指向书签就可以了 八 创建超链接 九 框架的创建和应用 框架网页是一种特殊的HTML网页 可以将浏览器窗口分为几个区域 每个区域可以显示不同的网页 一组框架构成的网页称为框架页 每个框架页都可以采用相应的模板创建 1 创建框架网页2 设置框架网页的属性3 框架网页的保存可以保存框架所显示的网页和框架网页本身 值得注意的是 在保存时 必须根据系统提示来确定为那个框架保存网页 一般情况下 FrontPage2000将自动保存框架网页及每个框架中的网页 十 表单 表单是用来收集站点访问者信息的集合 如收集他们的订货 发货和付费方式等信息 1 表单域常见的表单域有以下几种 1 文本框 2 选项按钮 3 下拉框 4 复选框 5 按钮 6 密码域 7 滚动文本框2 创建表单 1 创建一张 请求 表单 2 创建一张 确认 表单 3 处理表单表单的最终目标是将用户信息发送到处理这些信息的目标对象中 要实现这一功能就需要将表单信息发送到WEB服务器中 发送方法有四种 第一种是直接发送到文件中 第二种是以电子邮件的形式发送 第三种是发送到数据库 第四种是发送到其他对象中 返回本章首页 7 3HTML制作WEB页一 基本的HTML语法在HTML中所有的标记符都用括起来 如换行标记符 一般情况下 标记符是不区分大小写的 大多数标记符是成对出现的 如 分别表示开始标记符和结束标记符 它们之间的区别是结束标记符有一斜线 当然有一些标记符是成单出现的 如或 对于许多标记符 还包括有一些属性 以便于对标记符作用的内容进行更详细的控制 所有的属性都放在开始标记符的尖括号里 属性和标记符间用空格分开 属性和属性值间用 来连接 二 HTML文件结构 1 HTML标记HTML标记符的一般形式为 标示HTML文件的起始和终止 2 HEAD标记符HEAD标记符的一般形式为 标示文件的标题区 用于命名文档 提供文档内容的信息 3 BODY标记符BODY标记符的一般形式为 标示文件的主体区 在与间标定的是实际的文档内容 显示在Web浏览器窗口的用户区内 标记符的属性和设置方法有 1 页面背景颜色 bgcolor 颜色值 2 页面背景图形 background 图形文件名 3 文本颜色 TEXT 颜色值 4 超链接 与Web页面中的链接有关 4 TITLE标记符TITLE标记符的一般形式为 标示HTML的标题 它是在标记符内成对出现的标记符 三 HTML文本格式 1 文本分段 1 标记符 2 br 3 hr 4 Hn n从1 6 5 center居中对齐标记符2 font标记符设定字体大小 颜色 字型的方法共有以下几种 1 设定文件主体文字颜色 标记 2 设定字体大小 颜色 字型 标记 3 设定字体大小 颜色 字型 标记 四 HTML列表格式 HTML提供许多种类的列表标记 作项目标识 而且各种列表可以互相嵌套 嵌套时各种列表标记不能交叉 1 无序列表的一般格式 列表项标记 2 有序列表的一般格式 列表项标记 3 目录列表的一般格式 列表项为 五 HTML超链接和图像格式 1 超文本链接 1 链接至另一文件或网址 其常用的格式是 第一个文件 2 链接至另一个段落先要用 给跳转到的目标位置定义书签 然后用 设置链接到所命名的书签处 2 设置图片常用标记设定图片 表示方法为 是图形文件名 IMG元素有ALIGN和ALT两个重要属性 ALIGN属性说明与文本按什么位置对齐 参数有TOP MIDDLE BOTTOM LEFT和RIGHT 六 HTML表格格式 表格由标记定义 每个表格开始是一个可选的标题 由CAPTIO