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

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