第5章-可视化网页设计课件

第5章可视化网页设计杭州师范大学多媒体网页设计课程组多媒体网页设计教程》基本概念网页是一种可以在WWW上传输，并被浏览器认识和翻译成页面显示出来的文件,又称为HTML（超文本标记语言）文件，。

网站是一群相关网页的集合，也就是说，设计者制作了几个网页，并且经过组织规划，让网页彼此相连，让浏览者可以看到网站中所有的网页。主页整个网站的入口,它通常作为一个站点的目录或索引，就像是一份报纸的头版，会把最热门、最重要的信息写在上面，让读者能快速找到自己感兴趣的内容。超链接网站中各个网页有机的联系.多媒体网页设计教程》网页制作工具网页是由HTML（超文本标记语言）编写的，可以通过文本编辑器来制作HTML页面，保存后使用浏览器打开刚编辑的HTML文件以检查所写的代码是否正确，并且检查是否符合预先设想的效果，这个过程不但要求对HTML语言非常了解而且十分烦琐。目前有许多可视化网页制作工具，使用这些工具可以在不用编写代码或者只编写少量的代码情况下，创建出漂亮、专业的网页。目前流行的有Microsoft公司开发的FrontPage，Macromedia公司开发的Dreamweaver。多媒体网页设计教程》建立网站的基本流程确认网站的方向收集、整理资料网站的架构与规划选择网页制作软件进行网页内容设计和编写程序宣传网站将制作好的网站上传到Web服务器上多媒体网页设计教程》Frontpage2019Frontpage是微软公司推出的Web站点开发与维护的工具。它是一个Web开发环境，功能强大、易学好用。Frontpage2019是Office2019组件之一。状态栏任务窗格网页编辑区网页视图多媒体网页设计教程》网页视图设计视图拆分视图代码视图预览视图多媒体网页设计教程》实例制作制作旅游网站

“走遍中国”：包括文字、图片、视频、flash动画、栏目导航。“秀丽河山”：网页对图片发表评论。“名胜古迹”：欣赏我国大好河山的图片库。“感受中国”：感想。多媒体网页设计教程》绘制草图“走遍中国”“名胜古迹”多媒体网页设计教程》绘制草图“秀丽山河”“感受中国”多媒体网页设计教程》网站操作如何创建新站点?如何关闭站点?如何打开已有站点?站点的命名多媒体网页设计教程》使用FrontPage2019创建网站正确安装FrontPage2019后，系统默认用户的网站文件夹在“C:\DocumentsandSettings\用户名\MyDocuments\MyWebSites”下。网站文件夹下还有两个文件夹“images”文件夹是用来保存网站中的图片文件的，在制作网页之前先要把用到的图片都保存到这里。“_private”文件夹是系统用来做缓存的文件夹，用户不要随意删除这些文件夹。多媒体网页设计教程》使用FrontPage2019创建网站由于系统默认网站文件夹在系统分区下，用户还可以自己选择在本地硬盘的其他分区下创建网站文件夹。启动FrontPage2019后，单击“文件”→“新建”，在窗口右侧出现任务窗格“新建”对话框，选择“由一个网页组成的网站…”选项，在弹出的“网站模板”窗口中选择“空白网站”，在“指定新网站的位置”选择或创建网站文件夹。多媒体网页设计教程》修改网站属性打开“工具”菜单的“网站设置”选项，可以修改网站的属性。例如可以更改网站的名称，默认的网页编码格式等。多媒体网页设计教程》网页操作创建网页方法一:文件夹列表新建网页.

方法二:通过”文件夹视图”或”导航视图”创建网页.

方法三:”文件”菜单中”新建”,通过”任务窗格”创建网页.多媒体网页设计教程》网页操作2、设置网页属性标题背景页面边距背景音乐3、保存网页“文件夹”视图方式下创建的网页,系统自动保存.“文件”菜单中”新建”,通过”任务窗格”,则需要人工保存.4、打开、关闭网页多媒体网页设计教程》制作网页前的准备根据设计草图,收集整理准备添加在网页中的素材，如图片、文字等资源，若觉得现成的图片不适合网页的需求，可以使用图像处理软件自己制作,然后将图片拷贝在站点文件夹中的“images”文件夹里。多媒体网页设计教程》插入网页元素插入文本 插入图片来源：外部文件、剪贴画、绘制自选图形图片属性设置：大小、边框、环绕方式插入艺术字、文本框插入项目符号和编号插入flash动画插入视频插入Web组件(字幕、交互按钮、计数器）多媒体网页设计教程》范例网页多媒体网页设计教程》网页布局页面布局是网页的骨架布局的常见方式有多种使用表格布局使用框架网页使用图层多媒体网页设计教程》网页布局确定了网页的主题和内容后，就要对网页的结构和整体进行布局规划。表格是实现网页布局的主要工具，通过表格内单元格有规律的排列，可以将图片、文本、表单、Web组件等内容安置在固定的地方，通过单元格的合并、拆分、着色、间距调整，将形成错落有致的渲染效果。目前大多数的网页，都是使用表格进行布局的。多媒体网页设计教程》网页布局多媒体网页设计教程》网页布局多媒体网页设计教程》网页布局使用FrontPage中的框架网页网站模板可以创建框架网页。比如：使用“横幅和目录”框架网页模板创建的框架网页实际上在浏览器中同时显示四个网页。框架网页横幅框架目录框架主框架多媒体网页设计教程》网页布局框架网页创建框架网页创建初始页面保存框架网页设置框架属性编辑初始页面隐藏边框、滚动条框架命名框架拆分、删除、大小调整嵌入式框架注：拆分可用ctrl+鼠标左键拖动框架边缘总结：由于框架很难被搜索引擎加上书签或索引，而且访问时需要浏览器的支持等原因，框架布局被应用得很少，但是对于某些Intranet网站和基于Web的工具，框架可以使导航变得更加容易。多媒体网页设计教程》超链接网页的强大之处就在它的超链接，在浏览器中通过点击网页中的超链接，可以很方便地打开另外一个网页，或者是图片、文件、邮件地址。超链接的组成：链接的载体和链接的目标地址。链接的载体链接的目标地址多媒体网页设计教程》超链接的载体链接的载体就是在网页中文字和图片，凡是包含链接的文字和图片都称为超链接。用浏览器观看一个超链接的时候，它通常采用与普通文本不同的颜色显示，而且加上了下划线，此外，将鼠标移到一个超链接上方时，鼠标指针会变成一个手掌形状。多媒体网页设计教程》超链接的目标地址链接的目标地址指的是单击超链接后所显示的内容，它可能是进入这个网站的另一个网页，或进入另一个站点，另一个网页，也可能是下载文件，甚至是打开电子邮箱。在加入超链接之前，必须先设计好链接的载体和目标地址，是以文字来建立链接，还是以图片来建立链接？而这个链接又要连到哪里去，怎样做才能符合浏览者的需求？这些都是必须考虑的地方。多媒体网页设计教程》创建超级链接链接到文件书签电子邮件图片热区多媒体网页设计教程》超链接属性多媒体网页设计教程》表单的作用

一个站点在设计过程中，除了内容丰富、布局合理、颜色协调、具有时代感和创新性之外，还有一点是非常重要的，那就是网站的交互性。网站的交互性一般是通过表单程序来实现的，网页浏览者将信息通过表单发送到Web服务器端，web服务器接收做出相应的回应，最终将反馈信息返回到个人的浏览器。

FrontPage2019拥有强大的表单制作功能，可以轻松地制作出完善的表单页面。多媒体网页设计教程》表单的构成表单由表单域组成，表单域的构成如下:文本框：提供输入单行的文本选项按钮：提供单选或者多选复选按纽：提供选择并列的选项

多媒体网页设计教程》表单表单是实现网页互动的元素。与客户端或服务器端脚本结合使用，可以实现互动性。多媒体网页设计教程》表单组件（1）多媒体网页设计教程》表单组件（2）多媒体网页设计教程》保存表单的内容表单制作完成后，表单的交互功能还需要进一步的设置，收集表单的数据。注意：表单需要Web服务器提供必要的技术支持，Web服务器安装配置