可视化网页设计.ppt
多媒体网页设计教程,第5章 可视化网页设计,杭州师范大学 信息科学与工程学院,多媒体网页设计教程,内容概要,多媒体网页设计教程,复习:网站的创建与管理,FrontPage 网站包含特定于 FrontPage 的信息。与其他网站相同的是,它也包含网页、图形、文档以及多媒体 几乎包括您需要的所有类型的文件。新建站点(演示创建”走遍中国“站点)使用“文件夹”视图管理站点内的所有文件,多媒体网页设计教程,复习:网站管理功能与作用,添加、重命名、删除或移动文件(无需在 Microsoft Windows 资源管理器中执行这些操作)使用特殊报告改正问题,如无效超链接报告 发布网站,多媒体网页设计教程,复习:网页布局表格,表格是网页设计中使用最频繁、最重要的元素之一,通常使用表格来排列数据、布局版面。用表格布局网页,便于网页元素的编辑和插入,提高网页的有序性、条理性、规划性;没有用表格布局的页面,在向页面中添加网页元素的时候往往会出现定位错误;使用表格布局还具有随意性,可以根据自己的喜好,自由地将表格拆分、合并和定位。,多媒体网页设计教程,表格的应用实例一,多媒体网页设计教程,表格的应用实例二,多媒体网页设计教程,想一想,在制作网页当中除了用表格进行定位,进行布局之外,还有其他方法吗?“走遍中国”网站左边的导航栏都一样的,是否可以抽取共同项呢?,多媒体网页设计教程,网页布局框架,框架网页是一种网页,当在浏览器中显示时,框架网页中具有多个称为框架的区域。每个框架中都可以显示不同的网页。框架网页本身并不包含可见内容,它只是一个容器,用于指定要在框架中显示的其他网页及其显示方式。,多媒体网页设计教程,框架网页的用途,框架网页通常用于目录、文章或信息列表、或任何其他类型的网页(在一个框架中单击超链接并在另一个框架中显示相应网页)。作者使用框架网页是因为框架网页能够包含内置导航并显示一致的用户界面。,多媒体网页设计教程,框架网页范例,多媒体网页设计教程,框架网页的制作,使用 FrontPage 中的框架网页网站模板可以创建框架网页。,比如:使用“横幅和目录”框架网页模板创建的框架网页实际上在浏览器中同时显示四个网页。,框架网页横幅框架目录框架主框架,多媒体网页设计教程,框架网页的保存问题,保存的文件名各个区域的名称,多媒体网页设计教程,框架布局与表格布局的区别,框架是一种特殊的网页布局,之所以说特殊是因为它并不是真正意义上的网页布局工具。表格和布局表格是在现有的一个页面上将网页进行区块的划分,然后在这些区块中填入网页元素,而“框架”只给网页分区,而不提供实际内容,每个框架都可以显示独立内容的网页,也就是说有框架的网页可以根据框架数同时显示多个独立内容的网页。,多媒体网页设计教程,演示框架网页布局实例,“全球生物”框架网页布局,多媒体网页设计教程,Web组件的使用,(1)滚动字幕(2)交互式按钮(3)站点计数器(4)图片库,多媒体网页设计教程,滚动字幕,字幕实际上是滚动的文本,比如网站内的一些重要的通知信息往往以字幕方式显示,这样主要是为了引起访问者的注意。,多媒体网页设计教程,交互式按钮,交互式按钮,是FrontPage2003提供的动态按钮,当用户鼠标移动或单击按钮时,它会发生形状和颜色的变化。,多媒体网页设计教程,站点计数器,站点计数器,统计站点访问次数,基本上每个网站都有一个站点计数器。,注意:站点计数器需要服务器的支持才能正常显示。,多媒体网页设计教程,图片库,FrontPage2003中提供了自定义图片集的图片库功能,使用该功能可以创建包含特定布局排列图片集的网页。,多媒体网页设计教程,表单的作用,一个站点在设计过程中,除了内容丰富、布局合理、颜色协调、具有时代感和创新性之外,还有一点是非常重要的,那就是网站的交互性。网站的交互性一般是通过表单程序来实现的,网页浏览者将信息通过表单发送到Web服务器端,web服务器接收做出相应的回应,最终将反馈信息返回到个人的浏览器。FrontPage 2003拥有强大的表单制作功能,可以轻松地制作出完善的表单页面。,多媒体网页设计教程,表单,表单是实现网页互动的元素。与客户端或服务器端脚本结合使用,可以实现互动性。,多媒体网页设计教程,表单的构成,表单由表单域组成,表单域的构成如下:文本框:提供输入单行的文本 选项按钮:提供单选或者多选 复选按纽:提供选择并列的选项,多媒体网页设计教程,表单组件(1),多媒体网页设计教程,表单组件(2),多媒体网页设计教程,演示创建表单,通过范例(创建一个用户注册的表单),多媒体网页设计教程,保存表单的内容,表单制作完成后,表单的交互功能还需要进一步的设置,收集表单的数据。注意:表单需要Web 服务器提供必要的技术支持,Web 服务器安装配置FrontPage Server Extensions、Microsoft SharePoint Team Services或脚本程序。,多媒体网页设计教程,网站发布,网站制作完成后,将自己的成果发布到Internet上,实现信息共享。FrontPage2003提供网站发布的工具。,多媒体网页设计教程,上机作业,按照实验指导:第5章 5.4节 实验 1-3第5章 5.5节 实验 1、2第5章 5.6节 实验 1、2以“走遍中国”网站或者“秀我风采”网站制作一个简单的个人静态网站(主题可以自定义)-网站文件夹压缩提交到作业系统,多媒体网页设计教程,课后作业:,阅读网页制作与设计教程第5章,