课件类：专题网站的设计与制作开发制作（一）

专题网站的设计与制作 开发制作 一 讲师 吴声乐 FrontPage软件介绍 FrontPage2003是一种网站创建和管理程序 可以帮助您创建功能强大的网站 菜单栏 工具栏 工作区 四种视图模式 FrontPage工作环境介绍 创建第一个网页 从菜单中选择文件新建 打开如下图的页面 创建第一个网页 选择空白网页 1 保存创建的新的网页 2 在网页中添加文本 例如 将进酒 3 在网页中创建标题 4 选择字体和颜色 5 保存修改后的网页 6 站点管理 创建一个新站点 FrontPage对站点的管理主要是管理计算机的文件夹 一个站点将包含一个主文件夹和若干子文件夹 image 站点用到的图片 private 个人信息 管理 建立网页 导入文件 新建 通过模版快速建立一个站点 通过模版快速建立一个站点定制新站点浏览个人站点模版 版面布局 布局 表格布局 这是FrontPage2003新增加的功能 可以选择FrontPage提供的布局表格模版 也可以自己设计布局表格表格是页面排版的主要手段重点是对自己的功能模块有好的设计 表格布局 插入表格选取表格 插入表格表格的选择修改表格属性使用单元格布局 比如可以在表格的第一行第一列插入logo 在第一行第二列插入banner等注意 最好不要将整个网页放在一个表格中 表格嵌套层次要尽量少 这是因为浏览器在读取网页html原代码时 是读完整个table才将它显示出来的 如果一个大表格中含有多个子表格 必须等大表格读完 才能将子表格一起显示出来 信息学竞赛专题网站首页表格布局 框架 框架是浏览器窗口中的一个区域 它可以显示与浏览器窗口的其余部分中所显示内容无关的HTML文档框架集是HTML文件 它定义一组框架的布局和属性 包括框架的数目 框架的大小和位置 以及在每个框架中初始显示的页面的URL 框架集文件本身不包含要在浏览器中显示的HTML内容 框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息 层 层的概念是div和CSS结合定位的抽象FrontPage中如何使用层格式层插入层 层的源码 新建网页1这是一个层这是第二个层这儿是正文 在网页中插入图片 网页中使用的图片一般有三种 gif jpeg png 插入图片 定义大小 添加文本 剪裁 加入DHTML效果 保存 超链接 根据超级链接的终点可分为内部链接在同一网站不同文档之间的连接外部链接不同网站之间的连接锚点链接指定位置的连接EMAIL链接电子邮件的连接根据超级链接的起点可分为文字链接图片链接热区链接进行热区超链接操作 单击网页上的图片 从图片工具栏中选择长方形热点 圆形热点 多边形热点 设置超链接地址 超链接的绝对路径 在HTML中 URL路径又分为两种形式 绝对路径和相对路径 绝对路径是将主机地址和主机上资源发布目录的路径和资源名称进行完整的描述 如 超链接的相对路径 相对路径则是相对于当前的网页所在目录或站点根目录的路径 如 URL的绝对路径必须以http 形式开始 例如 FrontPage管理超链接 HTML概述 HTML是一种描述性语言 解释执行 是一种标识语言 通过各种标识来表达不同信息 HTML语法 由标签 tag 和属性 attribute 组成 标签 所有标签都用括起来 大多数标签成对出现 不区分大小写 可以分成两类 一类是标识网页元素和元素样式 如 等一类是指向其他资源 如 等属性 对标签作用的内容进行详细控制 需要注意标签与属性及属性之间必须加一个空格 HTML概述 新建网页1我们举一个属性 值和换行的例子 HTML整体结构 Web页的开头 包含一些特定信息 如网页标题 样式定义以及脚本等Html文件的主题 包含文字 图形 图像 链接 动画和影视音效等 Body中常用标签 Text属性设定文字颜色Bgcolor属性设定背景色Link Alink Vlink超链接访问前 访问时 访问后的颜色Background属性设定背景图片 常用标签示例 新建网页1这是有关html标签的网页搜索超链接 排版标签 注释标签 标签用来划分文档段落标签 文字强制换行 没有结束标签标签 水平线标签Size属性指定水平线的高度Width属性指定水平线的宽度Align属性设定水平线的对齐方式Color属性指定水平线颜色Noshade属性指定没有阴影的水平线Title属性设定水平线的标题 排版标签 标签围堵标签 将标签中的内容按照原始版式显示出来标签用于文件分节 目的是为文件的不同部分应用不同的段落格式标签内容在浏览器中不作换行 表格标签 标签 申明表格 包括的属性 Border单元格边线的宽度 以像素为单位Cellpadding单元内容与边线之间的宽度Cellspacing设置表格的单元格之间的距离Cols设置表格的列数Width设置表格的宽度Height设置表格的高度Align表格的对齐方式Valign表格的垂直对齐属性Bgcolor设置背景Bordercolor设置表格的边界线颜色Background设置表格的背景颜色与标签表示表格的行 表示表格的单元格 表单标签 表单通常是配合CGI ASP JSP等语言编写的Web应用程序来进行信息的递交 标签 所有的表单元素都应该写在标签包含的范围内Action属性值为URL 指向处理表单的程序Method属性设定访问action属性设定URL的方法 比如GET或POSTName属性设定表单的名字 表单标签 标签Type属性 Text文本输入框Button按钮Radio单选框Checkbox复选框File文本输入框Submit和Reset提交和清除按钮Password密码文本输入框 输入的字符都以 显示Value属性 设定初始值Disabled属性 无法修改标签默认值 表单标签 标签 多行文本输入框Rows属性 设定输入框的最大行数Cols属性 设定输入框的最大列数Wrap属性 设定如何处理文本输入框的转行Off默认设置 即宽度不够也不转行Virtual宽度不够的情况下自动转行 发送按原来的输入发送Physical宽度不够即转行 转行符也将被发送 超链接标签 基本的属性是href和name属性Href 属性的值为一个有效的URL指向本地网页的链接 可以使用绝对路径和相对路径链接的目的地是互联网上的某个文件链接到指定的ftp站点打开默认邮件处理程序打开talnet终端程序 并自动链接所指地址Name属性 关于主题