(可视化设计.ppt

第5章 可视化网页设计 杭州师范大学 多媒体网页设计课程组 基本概念 网页 是一种可以在WWW上传输，并被浏览器认识和翻译成页面显示出来的文件,又称为HTML（超文本标记语言）文件，。 网站 是一群相关网页的集合，也就是说，设计者制作了几个网页，并且经过组织规划，让网页彼此相连，让浏览者可以看到网站中所有的网页。 主页 整个网站的入口,它通常作为一个站点的目录或索引，就像是一份报纸的头版，会把最热门、最重要的信息写在上面，让读者能快速找到自己感兴趣的内容。 超链接 网站中各个网页有机的联系. 网页制作工具 网页是由HTML（超文本标记语言）编写的，可以通过文本编辑器来制作HTML页面，保存后使用浏览器打开刚编辑的HTML文件以检查所写的代码是否正确，并且检查是否符合预先设想的效果，这个过程不但要求对HTML语言非常了解而且十分烦琐。 目前有许多可视化网页制作工具，使用这些工具可以在不用编写代码或者只编写少量的代码情况下，创建出漂亮、专业的网页。目前流行的有Microsoft公司开发的FrontPage，Macromedia公司开发的Dreamweaver。 建立网站的基本流程 确认网站的方向 收集、整理资料 网站的架构与规划 选择网页制作软件进行网页内容设计和编写程序 宣传网站 将制作好的网站上传到Web服务器上 Frontpage2003 Frontpage是微软公司推出的Web站点开发与维护的工具。它是一个Web开发环境，功能强大、易学好用。 Frontpage2003是Office2003组件之一。 网页视图 设计视图 拆分视图 代码视图 预览视图 实例制作制作旅游网站 绘制草图 绘制草图 网站操作 使用FrontPage2003创建网站 正确安装FrontPage2003 后，系统默认用户的网站文件夹在“C:\Documents and Settings\用户名\My Documents\My Web Sites”下。 网站文件夹下还有两个文件夹 “images” 文件夹是用来保存网站中的图片文件的，在制作网页之前先要把用到的图片都保存到这里。 “_private” 文件夹是系统用来做缓存的文件夹，用户不要随意删除这些文件夹。 使用FrontPage2003创建网站 由于系统默认网站文件夹在系统分区下，用户还可以自己选择在本地硬盘的其他分区下创建网站文件夹。 启动FrontPage2003后，单击“文件”→“新建”，在窗口右侧出现任务窗格“新建”对话框， 选择“由一个网页组成的网站…”选项，在弹出的“网站模板”窗口中选择“空白网站”，在“指定新网站的位置”选择或创建网站文件夹。 修改网站属性 打开“工具”菜单的“网站设置”选项，可以修改网站的属性。例如可以更改网站的名称，默认的网页编码格式等。 网页操作 创建网页 方法一:文件夹列表新建网页 . 方法二:通过”文件夹视图”或”导航视图”创建网页. 方法三:”文件”菜单中”新建”,通过”任务窗格”创建网页. 网页操作 2、设置网页属性 标题 背景 页面边距 背景音乐 3、保存网页 “文件夹”视图方式下创建的网页,系统自动保存. “文件”菜单中”新建”,通过”任务窗格”,则需要人工保存. 4、打开、关闭网页 制作网页前的准备 根据设计草图,收集整理准备添加在网页中的素材，如图片、文字等资源，若觉得现成的图片不适合网页的需求，可以使用图像处理软件自己制作,然后将图片拷贝在站点文件夹中的“images”文件夹里。 插入网页元素 插入文本 插入图片 来源：外部文件、剪贴画、绘制自选图形 图片属性设置：大小、边框、环绕方式 插入艺术字、文本框 插入项目符号和编号 插入flash动画 插入视频 插入Web组件(字幕、交互按钮、计数器） 范例网页 网页布局 页面布局是网页的骨架 布局的常见方式有多种 使用表格布局 使用框架网页 使用图层 网页布局 确定了网页的主题和内容后，就要对网页的结构和整体进行布局规划。表格是实现网页布局的主要工具，通过表格内单元格有规律的排列，可以将图片、文本、表单、Web组件等内容安置在固定的地方，通过单元格的合并、拆分、着色、间距调整，将形成错落有致的渲染效果。 目前大多数的网页，都是使用表格进行布局的。 网页布局 网页布局 网页布局 使用 FrontPage 中的框架网页网站模板可以创建框架网页。 网页布局 框架网页 创建框架网页 创建初始页面 保存框架网页 设置框架属性 编辑初始页面 隐藏边框、滚动条 框架命名 框架拆分、删除、大小调整 嵌入式框架 注：拆分可用ctrl+鼠标左键拖动框架边缘 超链接 网页的强大之处就在它的超链接，在浏览器中通过点击网页中的超链接，可以很方便地打开另外一个