1、多媒体网页设计教程,第5章 可视化网页设计,杭州师范大学 多媒体网页设计课程组,多媒体网页设计教程,基本概念,网页是一种可以在WWW上传输，并被浏览器认识和翻译成页面显示出来的文件,又称为HTML（超文本标记语言）文件，。网站是一群相关网页的集合，也就是说，设计者制作了几个网页，并且经过组织规划，让网页彼此相连，让浏览者可以看到网站中所有的网页。 主页整个网站的入口,它通常作为一个站点的目录或索引，就像是一份报纸的头版，会把最热门、最重要的信息写在上面，让读者能快速找到自己感兴趣的内容。 超链接网站中各个网页有机的联系.,多媒体网页设计教程,网页制作工具,网页是由HTML（超文本标记语言）编写
2、的，可以通过文本编辑器来制作HTML页面，保存后使用浏览器打开刚编辑的HTML文件以检查所写的代码是否正确，并且检查是否符合预先设想的效果，这个过程不但要求对HTML语言非常了解而且十分烦琐。 目前有许多可视化网页制作工具，使用这些工具可以在不用编写代码或者只编写少量的代码情况下，创建出漂亮、专业的网页。目前流行的有Microsoft公司开发的FrontPage，Macromedia公司开发的Dreamweaver。,多媒体网页设计教程,建立网站的基本流程,确认网站的方向 收集、整理资料 网站的架构与规划 选择网页制作软件进行网页内容设计和编写程序 宣传网站 将制作好的网站上传到Web服务器上
3、,多媒体网页设计教程,Frontpage2003,Frontpage是微软公司推出的Web站点开发与维护的工具。它是一个Web开发环境，功能强大、易学好用。 Frontpage2003是Office2003组件之一。,多媒体网页设计教程,网页视图,设计视图 拆分视图 代码视图 预览视图,多媒体网页设计教程,实例制作-制作旅游网站,“走遍中国”：包括文字、图片、视频、flash动画、栏目导航。 “秀丽河山”：网页对图片发表评论。 “名胜古迹”：欣赏我国大好河山的图片库。 “感受中国”：感想。,多媒体网页设计教程,绘制草图,“走遍中国”,“名胜古迹”,多媒体网页设计教程,绘制草图,“秀丽山河”,“
4、感受中国”,多媒体网页设计教程,网站操作,如何创建新站点? 如何关闭站点? 如何打开已有站点? 站点的命名,多媒体网页设计教程,使用FrontPage2003创建网站,正确安装FrontPage2003 后，系统默认用户的网站文件夹在“C:Documents and Settings用户名My DocumentsMy Web Sites”下。 网站文件夹下还有两个文件夹“images” 文件夹是用来保存网站中的图片文件的，在制作网页之前先要把用到的图片都保存到这里。“_private” 文件夹是系统用来做缓存的文件夹，用户不要随意删除这些文件夹。,多媒体网页设计教程,使用FrontPage20
5、03创建网站,由于系统默认网站文件夹在系统分区下，用户还可以自己选择在本地硬盘的其他分区下创建网站文件夹。 启动FrontPage2003后，单击“文件”“新建”，在窗口右侧出现任务窗格“新建”对话框， 选择“由一个网页组成的网站”选项，在弹出的“网站模板”窗口中选择“空白网站”，在“指定新网站的位置”选择或创建网站文件夹。,多媒体网页设计教程,修改网站属性,打开“工具”菜单的“网站设置”选项，可以修改网站的属性。例如可以更改网站的名称，默认的网页编码格式等。,多媒体网页设计教程,网页操作,创建网页 方法一:文件夹列表新建网页 . 方法二:通过”文件夹视图”或”导航视图”创建网页.方法三:”文
6、件”菜单中”新建”,通过”任务窗格”创建网页.,多媒体网页设计教程,网页操作,2、设置网页属性 标题 背景 页面边距 背景音乐3、保存网页 “文件夹”视图方式下创建的网页,系统自动保存. “文件”菜单中”新建”,通过”任务窗格”,则需要人工保存. 4、打开、关闭网页,多媒体网页设计教程,制作网页前的准备,根据设计草图,收集整理准备添加在网页中的素材，如图片、文字等资源，若觉得现成的图片不适合网页的需求，可以使用图像处理软件自己制作,然后将图片拷贝在站点文件夹中的“images”文件夹里。,多媒体网页设计教程,插入网页元素,插入文本 插入图片 来源：外部文件、剪贴画、绘制自选图形 图片属性设置：
7、大小、边框、环绕方式 插入艺术字、文本框 插入项目符号和编号 插入flash动画 插入视频 插入Web组件(字幕、交互按钮、计数器）,多媒体网页设计教程,范例网页,多媒体网页设计教程,网页布局,页面布局是网页的骨架 布局的常见方式有多种 使用表格布局 使用框架网页 使用图层,多媒体网页设计教程,网页布局,确定了网页的主题和内容后，就要对网页的结构和整体进行布局规划。表格是实现网页布局的主要工具，通过表格内单元格有规律的排列，可以将图片、文本、表单、Web组件等内容安置在固定的地方，通过单元格的合并、拆分、着色、间距调整，将形成错落有致的渲染效果。 目前大多数的网页，都是使用表格进行布局的。,多
8、媒体网页设计教程,网页布局,多媒体网页设计教程,网页布局,多媒体网页设计教程,网页布局,使用 FrontPage 中的框架网页网站模板可以创建框架网页。,比如：使用“横幅和目录”框架网页模板创建的框架网页实际上在浏览器中同时显示四个网页。,框架网页 横幅框架 目录框架 主框架,多媒体网页设计教程,网页布局,框架网页 创建框架网页 创建初始页面 保存框架网页 设置框架属性 编辑初始页面 隐藏边框、滚动条 框架命名 框架拆分、删除、大小调整 嵌入式框架 注：拆分可用ctrl+鼠标左键拖动框架边缘,总结：由于框架很难被搜索引擎加上书签或索引，而且访问时需要浏览器的支持等原因，框架布局被应用得很少，但
9、是对于某些 Intranet 网站和基于 Web 的工具，框架可以使导航变得更加容易。,多媒体网页设计教程,超链接,网页的强大之处就在它的超链接，在浏览器中通过点击网页中的超链接，可以很方便地打开另外一个网页，或者是图片、文件、邮件地址。 超链接的组成：链接的载体和链接的目标地址。,多媒体网页设计教程,超链接的载体,链接的载体就是在网页中文字和图片，凡是包含链接的文字和图片都称为超链接。用浏览器观看一个超链接的时候，它通常采用与普通文本不同的颜色显示，而且加上了下划线，此外，将鼠标移到一个超链接上方时，鼠标指针会变成一个手掌形状。,多媒体网页设计教程,超链接的目标地址,链接的目标地址指的是单击
10、超链接后所显示的内容，它可能是进入这个网站的另一个网页，或进入另一个站点，另一个网页，也可能是下载文件，甚至是打开电子邮箱。 在加入超链接之前，必须先设计好链接的载体和目标地址，是以文字来建立链接，还是以图片来建立链接？而这个链接又要连到哪里去，怎样做才能符合浏览者的需求？这些都是必须考虑的地方。,多媒体网页设计教程,创建超级链接,链接到文件 书签 电子邮件 图片热区,多媒体网页设计教程,超链接属性,多媒体网页设计教程,表单的作用,一个站点在设计过程中，除了内容丰富、布局合理、颜色协调、具有时代感和创新性之外，还有一点是非常重要的，那就是网站的交互性。网站的交互性一般是通过表单程序来实现的，网
11、页浏览者将信息通过表单发送到Web服务器端，web服务器接收做出相应的回应，最终将反馈信息返回到个人的浏览器。 FrontPage 2003拥有强大的表单制作功能，可以轻松地制作出完善的表单页面。,多媒体网页设计教程,表单的构成,表单由表单域组成，表单域的构成如下: 文本框 ：提供输入单行的文本 选项按钮 ：提供单选或者多选 复选按纽 ：提供选择并列的选项,多媒体网页设计教程,表单,表单是实现网页互动的元素。与客户端或服务器端脚本结合使用，可以实现互动性。,多媒体网页设计教程,表单组件（1）,多媒体网页设计教程,表单组件（2）,多媒体网页设计教程,保存表单的内容,表单制作完成后，表单的交互功能还需要进一步的设置，收集表单的数据。注意：表单需要Web 服务器提供必要的技术支持，Web 服务器安装配置FrontPage Server Extensions、Microsoft SharePoint Team Services或脚本程序。,多媒体网页设计教程,网站发布,网站制作完成后，将自己的成果发布到Internet上，实现信息共享。FrontPage2003提供网站发布的工具。,多媒体网页设计教程,上机实验-个人网站制作,秀我风采,
