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

表单应用 Dreamweaver 示 例 Dreamweaver的特色应用 模板（Template） 层（Layer） 行为（Behaviors） 层叠样式表（CSS） 超链接 模板应用 模板用来设计“固定”页面布局 主要特色：一次可以更新多个页面 创建模板（文件 / 新建文档 / 创建公共对象 - 创建 可编辑区域 - 保存为模板文件） 应用模板 创建新文件 / 窗口 / 打开资源面板 / 模板 / 拖拽模板文件到正文区 / 在可编辑区域创建页面对象 - 保存 - 预览 创建新文件 / 修改 / 模板 / 应用到模板页 / 选择模板 - 选定 Dreamweaver 注意：一旦更改模板内容，系统会自动更改所有应用 该模板的页面。 示 例 层 应 用 页面对象按顺序一张张叠放在一起，以垂直方向 组合起来形成页面的最终效果。 创建图层（插入 / 布局对象 / 层） 典型应用（在对象上叠放flash动画） Dreamweaver 示 例 行为应用 行为是一种事件和动作的合成物，每一个行为都 包括事件和动作，利用行为使网页具有交互功能。 窗口 / 行为对象 / 单击 “+”添加行为事件 ） 应用示例 弹出消息（将事件Click —— OnLoad） 图层与行为应用（行为—— 拖动层） 交互窗口（ JavaScript ） Dreamweaver 应用示例-1 制作滚动字幕： 打开“插入/标签”—— HTML标签/页元素/marquee 输入要滚动的文字marquee你好！/marquee 选择标签属性： marquee behavior(scroll、slide、alternate) 行为（滚动、幻灯片、交替） Dreamweaver 应用示例-2 制作弹出式菜单： 打开“行为”面板—— 选择“显示弹出式菜单” 输入弹出式菜单项目 设置超级链接 Dreamweaver 示 例 超 链 接 从一个连接点到另一个连接点 链接点：文字、图片等网页中的任意对象。 链接目标：书签、网站、图片、电子邮件、一个文件 、一个函数或者是一个程序等。 链接与被链接文档之间的路径 绝对路径 / 文档相对路径 / 根相对路径 Dreamweaver 设置超链接示例 链接目标是一个文件 javascript:alert(欢迎学习网页制作) 链接目标是一个函数 CSS应用（层叠样式表） 利用CSS可以使制作网页更方便，但需要对 HTML有一定的了解。 创建CSS 直接编写代码（利用CSS属性面板） 文本 / CSS样式 / 新建 – 定义 …… 引用CSS 页面属性 / 样式 / 管理样式 – 附加 …… Dreamweaver 实验作业：制作班级网站（每组4~6人） 作业要求：⑴ 提交电子版实验作品 ⑵ 提交打印稿实验报告 ⑶ 截止日期12月15日 小组实验作业 小组实验作业要求： 网站至少由6个独立的页面组成，每个页面的 内容和风格自定。 将所有网页作品的电子版直接交给辅导老师； 写出制作网页的实验报告，报告以Word文件 格式编排，在实验报告中要有实验环境的描述、 网页页面图、制作过程中遇到的主要问题、如 何解决的、及实验体会。 打印实验报告的封面要有作者签名。 * 王 移 芝 北京交通大学计算机与信息技术学院 明确制作网页的目的 确定网页的内容和风格 （有价值、高质量和有创意） 需求分析 页面设计（风格、标志） 素材整理（脚本） 制作素材（动画、图片等） 制作网页 构建网站 网页设计原则 网页设计 Web页面设计 Dreamweaver 8 应用 Dreamweaver窗口 创建站点 页面属性 网页布局 Dreamweaver 基本应用 Dreamweaver 特色应用 行为应用 网页制作 Dreamweaver 插入面板 浮动面板组 页面编辑区 属性面板 Dreamweaver 窗口 工作模式 创建本地工作文件夹 创建站点与本地文件夹关联 创建站点 Dreamweaver “站点/管理站点/新建┅/站点”命令 站点：更好的管理与规范网站中的各个文件 “修改／页面属性” Dreamweaver 页面属性 特点：统一规范页面中的各个元素 表格 框架 表单 Dreamweaver 页面布局 模板 图层 样式表（CSS） Dreamweaver 页面布局 编辑区 需要HTML基础 D