1、第11章 网页制作,佛山科学技术学院信息中心 2008年9月,主要内容,11.1 HTML语言简介 11.2 普通网页的编辑 11.3 网页的布局设计和动态效果设置 11.4 网页的导航设计 11.5 网页的发布,11.1 HTML语言简介,11.1.1 一个简单的HTML文档,学习HTML语言的目的 有助于理解网页的构成（图片、动画、声音是分离的） 某些特殊的功能，需要直接修改HTML文本 某些批量性的工作，直接在HTML文本中比较容易实现 HTML编辑工具 最简单的工具：记事本 Notepad 早期在可视化工具未开发出来时，曾有专门的工具，如HTMLPad 也可在“所见即所得”的网页编辑工
2、具提供的HTML视图进行,HTML文本的构成 由标志和属性构成，“标志”说明元素的类型和性质，“属性”则指明具体的参数。如IMG是一个图片的标志，它有一个（至少一个）属性为SRC，指明要显示的图片的位置。 标志由尖括号包围，并且标志一般都要配对：起始标志，结束标志 最基本的一个HTML文本:Hello,World! ,Head and Body,一般的HTML文本由标志包围，其中有两个区：区和区，其中区的内容不在网页中显示，而区的内容则会显示在网页中。,一个完整的HTML文档,启动“记事本”程序，输入以下内容：Welcome Hello,World!保存文件时，先在“保存类型”框中选择“所有文
3、件”，在“文件名”框中输入hello.htm（不能省略扩展名），将它保存到磁盘上。然后启动IE浏览器，选菜单“文件”“打开”，打开磁盘上刚保存的hello.htm，就可以看到一个简单的网页。网页中显示了“Hello，World!”，浏览器的标题则为“Welcome”。,11.1.2 常用的HTML标志及其属性,浏览器标题，放在区 文字标题 Hello Michael 段落标志，换行标志 相当于在FrontPgae中按回车； 相当于Shift + 回车 关于颜色 颜色由RGB三原色组成，#RRGGBB六位数字，每一位数字是一个十六进制数；也可直接用英文的颜色名来表示 指定网页的背景色 指定网页文
4、本颜色,常用标志,超级链接标志 属性HREF 注意，同一个站点内的链接一般都用相对路径；链接到外部Internet上的目标，则用绝对路径，要给出一个完整的URL。 属性TARGET 属性TITLE 插入图片标志 属性SRC 属性ALT 设置字体 属性FACE 属性SIZE 属性COLOR,其他标志,表格标志 理解行标志 理解列标志 表单标志 框架集标志和框架 理解框架的组成，它包含多个网页文件 注释:其中的内容不显示在网页中，但并不表示不产生作用。嵌入多媒体元素：还可以加上hidden，使得嵌入的对象不显示。如：,11.2 普通网页的编辑,11.2.1 准备工作,创建网站文件夹 文件夹的结构见
5、下一页 将文件夹作为网站打开 使用菜单命令“文件”“打开网站”，在弹出的对话框中选择预先准备好的文件夹（如D:Myweb），按“打开”。 为了充分运用FrontPage的功能，免除很多不必要的错误，应该每次开始制作网页时，都先打开网站。,首页文件index.htm以及其他一些主要文件直接放在MyWeb目录下，所有的图片都放在images目录中，MyIdeas目录用来存放自己原创的内容(当然，也可以直接放在MyWeb文件夹中)，Collections目录用来存放自己从网上搜集的专题资料。如果内容较多，还可在MyIdeas目录下创建子目录，分别存放不同类型的素材。,Index.htm,200800
6、0101,11.2.2 创建和编辑网页,4种视图 设计视图：可以在默认的网页视图中设计和编辑网页。 代码视图：可以查看和编辑HTML标记。通过FrontPage中优化代码功能，可以创建清洁的HTML，并且更易于删除任何不需要的代码。 拆分视图：可以使用拆分屏幕格式审阅和编辑网页内容，这种格式使用能够同时访问代码视图和设计视图。 预览视图：可以预览网页在Web浏览器中的大体的显示情况。,加入文字和图片,加入文字和图片 加入文字时注意人工分行及段落问题 同时，对于文字一般不要设置过多的格式，也不要用特殊的字体。 图片的加入 主要要注意，加入了外部图片时，在保存网页时Frontpage会提示保存嵌入
7、式图片。应该将嵌入的外部图片保存到到MyWebImages文件夹中 一般提倡预先将图片搜集好，并复制到MyWebImages文件夹中，然后再从MyWebImages文件夹插入图片。,插入超级链接,插入超级链接 首先选定要加入超级链接的文字或图形，选择菜单“插入”“超链接” 超级链接的目标： 从WWW上查找一个网页作为目标 指定一个e-mail地址作为目标 从本地磁盘中指定一个网页作为目标 (相对路径) 书签(同一文件或不同文件) 实际上任何一个文件都可以作为超级链接的目标。文件的类型不同，浏览点击时打开的方式不同。有些由浏览器直接打开，有些由机器上的其他程序打开，有些则直接下载保存到磁盘。,网
8、页属性设置,网页的属性 包括网页的背景颜色、背景图片、背景声音、网页的标题、网页的页边距等。 选菜单“文件”“属性” ，在弹出的对话框中进行设置 标题设置 加入背景音乐 MID、WAV、RAM等格式的文件可以直接通过按“浏览”按钮进行选择。如果需要使用MP3或者WMA格式的文件，需要直接在“位置”框中输入路径及文件名。 加入背景颜色和背景图片 注意颜色的协调 背景图片通常是平铺的 保存网页 起一个合适的名字。并注意设置一下标题,11.3 网页的布局设计和动态效果设置,11.3.1 网页的布局设计,什么是布局 网页中各种元素（如文字、图片、动画等）如何在屏幕上以合理、美观的方式呈现。 HTML语
9、言并不直接支持分栏、图文环绕等复杂的排版格式，这些效果需要使用另外的途径和技术来实现。其中，表格是一种常用的技术。 普通表格 菜单“表格”“插入”“表格” 用于布局时，把表格的边框粗细设置为0,布局表格,布局表格 插入布局表格 在“设计视图”下，选菜单“表格”“布局表格和单元格”，在设计窗口右侧弹出“布局表格和单元格”任务窗格。在该任务窗格下面提供了多种表格布局模板，从中选择与所需要设计的表格近似的模板，表格就出现在设计窗口中了。然后可以在相应的单元格中放置文字和图片，这样就可以实现图文混排和定位，合理地编排网页的版面。 绘制表格 调整表格的行高和列宽 设置表格和单元格属性 如果网页的某些部分
10、需要有特殊的背景图片（或背景颜色），可以使用表格，并设置表格或者单元格的背景图片（或背景颜色）。,11.3.2 在网页中加入动态元素,滚动字幕 选菜单“插入”“Web组件”，在弹出的对话框的左边窗格中选择“动态效果”，在右边窗格中选择“字幕”。 通过修改HTML源代码实现图片的滚动和文字的上下滚动Hello,Kitty! Hello,Michael! Hello,World! 交互式按钮 选菜单“插入”“Web组件”，在弹出的对话框的左边窗格中选择“动态效果”，在右边窗格中选择“交互式按钮” 。 注意需要保存嵌入式文件到网站文件夹,横幅广告管理器和图片库,“横幅广告管理器 ” 首先要将“横幅广
11、告管理器 ”添加到菜单中 选菜单“工具”“自定义”，在“自定义”对话框中，单击“命令”选项卡，再在对话框的左边的“类别”框中单击“插入”，在右边的“命令”列表中，找到并单击“横幅广告管理器”，接着将它拖动到“插入”菜单中，。 准备好若干幅大小一致的图片 图片库 图片库是包含以特定布局排列的图片集的网页。FrontPage提供了四种不同的布局排列来组织图片：在页面上水平编排一组照片、在页面上以蒙太奇版式编排一组照片、以幻灯片版式编排一组照片、在页面上垂直编排一组照片。当图像较大时，FrontPage会自动创建图像的缩略图。当在浏览器中访问时，点击缩略图，可以看到大图。 菜单“插入”“Web 组件
12、”，然后在“组件类型”列表中，单击“图片库”，在“选择图片库选项”列表中单击所需布局 。,动态HTML效果,动态HTML效果 动态HTML效果可以使单个网页元素的显示方式以及网页元素对鼠标动作的响应产生动画效果。 首先选中要设置动态效果的网页元素。通常，动态效果的网页元素是以段落和单个图片为单位的，所以对于文字，只要将光标定位到段落中即可。 选菜单“视图”“工具栏”“DHTML效果”，出现“DHTML效果”工具栏 在“选择一种事件”下拉列表框中选择一种事件（文本和图片所具有的事件是不同的），接下来在“应用”下拉列表选择一种效果，最后对该效果的实现进行设置 触发效果的事件，总共有以下四种事件供选
13、择： 单击：表示当站点访问者单击网页元素时，将引发动画效果； 双击：表示当站点访问者双击网页元素时，将引发动画效果； 鼠标悬停：表示当访问者将鼠标指针置于网页元素上方时，将引发动画效果； 网页加载：表示当访问者载入或刷新网页时，引发动画效果。,行为,行为 Microsoft FrontPage 中的行为是一些脚本选项，可用来为网页中的文本或其他元素快速添加交互性或增强功能。行为由事件和操作组成，这些事件和操作在网站访问者与网页或网页元素进行交互时发生。 FrontPage 中的行为主要有：将用户重定向到其他网站、重定向使用特定浏览器的用户、创建下拉列表菜单、创建翻转图像、在新窗口中打开外部链接
14、、在状态栏中显示消息。 菜单“格式”“行为”，然后在“行为”任务窗格来自定义内置的FrontPage行为。 创建下拉列表菜单,网页切换效果,网页切换效果 所谓网页的过渡，是指浏览者进入起始网页，或者单击网页中的超级链接而打开一个新网页时网页出现或离开的形式。 使用菜单“格式”“网页过渡”，然后在弹出的对话框中进行设置。事件：指在何种情况下产生过渡效果，有下面四种情形： 进入网页：当访问者的浏览器显示该网页时，显示网页过渡效果。 离开网页：当访问者离开当前的网页进入另一网页时，显示网页过渡效果。 进入站点：假如前一幅网页来自其他不同的站点，则当访问者的浏览器显示该网页时，显示网页过渡效果。 离开
15、站点：假如将要显示的网页来自其他不同的站点，当访问者的浏览器离开当前网页时，显示网页过渡效果。 周期（秒）：指定过渡效果持续的时间。 过渡效果：共指定了20多种动画效果，选择其中一种进行设置。,加入多媒体元素,使用控件插入多媒体元素 选择菜单“插入”“Web组件”，然后在弹出的“插入Web组件”对话框中，在左边窗格中选择“高级控件”，在右边窗格选择“ActiveX控件”，然后按“下一步”按钮，在新的对话框的列表中选择需要的控件，按“完成”按钮，这时所选择的控件就插入到网页中。控件插入以后，可以双击该控件以设置其属性，也可以用鼠标右键单击控件并选择“ActiveX控件属性”，此时会显示“Acti
16、veX控件属性”对话框。对话框随控件的不同而不同。 插入音乐 Windows Media Player控件 Real Player G2 Control控件 插入视频 Windows Media Player控件 Real Player G2 Control控件 插入Flash “插入”“图片”“Flash影片”,11.4 网页的导航设计,11.4.1 导航的基本概念,导航的概念 对于一个网站而言，在制作了大量的网页之后，最重要的工作是如何将这些网页有条理、有层次地组织成一个整体（当然这个问题实际上在开始制作网页之前就应该有规划），使得访问者可以通过网站的首页访问到该网站中的所有内容。 整个网
17、站的首页一般是index.htm或者default.htm 树状结构 星状链接结构 混合结构,11.4.2 人工导航,星形链接 星形链接就是制作一个目录页，然后将本网站中的所有网页都链接到该目录页。 串行链接 串行链接就是在首页中提供一个链接让访问者访问第二页，然后在其他的内容网页中提供“上一页”、“下一页”链接，使得访问者浏览时有点像一页一页翻阅书籍一样。 共享链接 共享链接就是在每一个网页中都能方便地访问该网站的每一页。,11.4.3 框架,框架的组成 使用框架的网页，在浏览器中显示的一个页面实际由多个网页组成。例如，“横幅和目录”型的框架，浏览器显示的一个画面中，实际上包含了四个HTML
18、文件。 准备工作 在创建框架网页之前，一个比较好的方法是先做好规划和设计，并且把框架中要用到的单个网页编辑、保存起来。 创建和编辑框架集 创建一个新的框架集 设置初始网页 新建网页 设置超级链接 设置框架的属性,11.5 网页的发布,11.5 网页的发布,申请主页空间 要把网页正式发布到网络上的首要条件，就是要有一个存放网页的空间。在许多大学，学校会给每位学生提供免费的个人主页空间，或者也可以向一些ISP（Internet服务提供商）申请，不过，有些ISP是免费提供，另一些则要收费。 申请到主页空间后，提供主页空间的ISP一般会提供四项信息：主页的URL、主页空间所在的主机地址、用户的帐号以及密码。 上传网站 使用FTP软件，登录到主页空间所在的主机，就可以将自己制作的网站整个地上传了。需要注意的是，一定要将本地计算机上网站目录内的所有内容都上传，包括它下面的子目录。 测试网站 网站上传后，就可以在浏览器中输入ISP提供的URL，检验一下网页是否正常。即使在本地计算机上测试时一切正常，也还要进行仔细的测试。测试的简单方法就是在浏览器中点击超级链接，看网页是否像设计的那样正常显示。测试时最好还要用不同的计算机进行，不要仅仅在制作网页的那台计算机上测试。,习题,网页制作大作业,
