网页设计与制作2009-2.pptVIP

“修改／页面属性” 表格 框架 表单 创建网页 表格应用 框架应用 表单应用 * * 王 移 芝 北京交通大学计算机与信息技术学院 明确制作网页的目的 确定网页的内容和风格 （有价值、高质量和有创意） 需求分析 页面设计（风格、标志） 素材整理（脚本） 制作素材（动画、图片等） 制作网页 构建网站 网页设计原则 网页设计 Web页面设计 Dreamweaver 8 应用 Dreamweaver窗口 创建站点 页面属性 网页布局 Dreamweaver 基本应用 Dreamweaver 特色应用 行为应用 网页制作 Dreamweaver 插入面板 浮动面板组 页面编辑区 属性面板 Dreamweaver 窗口 工作模式 创建本地工作文件夹 创建站点与本地文件夹关联 创建站点 Dreamweaver “站点/管理站点/新建┅/站点”命令 根据提示按“下一步”按钮 ┅┅ 直到完成 Dreamweaver 页面属性 Dreamweaver 页面布局 模板 图层 样式表（CSS） Dreamweaver 页面布局 编辑区 需要HTML基础 Dreamweaver的基本使用 网页是在网站上显示的基本页面 利用“页面属性”命令设置页面的整体格式 利用“属性”面板设置页面各个对象的格式 插入文本数据 普通文字输入或粘贴 特殊文字利用“插入/文本/字符”对象 导入外部数据（文件 / 导入 …… ） 插入多媒体数据 创建网页 Dreamweaver 页面对象 属性设置与插入文本 插入图像（JPEG、GIF、PNG） 插入Flash对象（动画、按钮、文本） 动画类型：swf （不能是fla、exe） 插入Fireworks对象（图像文件GIF 、 Fireworks HTML文件） 其它对象（avi、wav、mp3） 插入多媒体数据 示 例 表格应用 定位页面元素（如：页面分栏、文本和图像等） 创建表格（插入 / 表格） 利用“属性”面板设置表格对象格式 在已有的表格中，单击鼠标右键，通过“快 捷”菜单中的“表格”命令编辑表格。 Dreamweaver 当前插入点 示 例 框架应用 框架可以将浏览器窗口分割成不同的区域 创建框架（文件 / 新建文档 / 常规-框架集） 框架中的每一个区域都是一个独立的页面 整个框架由一个主文件控制 保存框架（主控文件和各个框架文件） 选中某个框架（按下Alt+单击区域） 添加或删除框架（拖拽边线） 在框架中打开文档（文件/在框架中打开） Dreamweaver 示 例 表单应用 Dreamweaver 用来收集站点访问者的信息（调查、反馈、登录） （输入的数据由表单处理程序接收处理：数据库） 创建表单（插入 / 表单 …… ） 表单应用 Dreamweaver 示 例 Dreamweaver的特色应用 模板（Template） 层（Layer） 行为（Behaviors） 层叠样式表（CSS） 超链接 模板应用 模板用来设计“固定”页面布局 主要特色：一次可以更新多个页面 创建模板（文件 / 新建文档 / 创建公共对象 - 创建 可编辑区域 - 保存为模板文件） 应用模板 创建新文件 / 窗口 / 打开资源面板 / 模板 / 拖拽模板文件到正文区 / 在可编辑区域创建页面对象 - 保存 - 预览 创建新文件 / 修改 / 模板 / 应用到模板页 / 选择模板 - 选定 注意：一旦更改模板内容，系统会自动更改所有应用 该模板的页面。 Dreamweaver 示 例 层 应 用 页面对象按顺序一张张叠放在一起，以垂直方向 组合起来形成页面的最终效果。 创建图层（插入 / 布局对象 / 层） 典型应用（在对象上叠放flash动画） Dreamweaver 示 例 行为应用 行为是一种事件和动作的合成物，每一个行为都 包括事件和动作，利用行为使网页具有交互功能。 窗口 / 行为对象 / 单击 “+”添加行为事件 ） 应用示例 弹出消息（将事件Click —— OnLoad） 图层与行为应用（行为—— 拖动层） 交互窗口（ JavaScript ） Dreamweaver 应用示例-1 制作滚动字幕： 打开“插入/标签”—— HTML标签/页元素/marquee 输入要滚动的文字marquee你好！/marquee 选择标签属性： marquee behavior(scroll、slide、alternate)