单元4专题网站的设计制作分析报告.ppt

多媒体课件与专题网站的设计制作 现代传媒学院 教育技术教研室 4.2 专题学习网站的创建 1.主要内容 预备知识 动态网站与静态网站 优秀网站赏析 网页设计软件 网页设计语言 Dreamweaver工作环境 专题网站建设一般流程 框架网页制作 2.教学方法： （1）自主学习 （2）分组讨论，合作学习（5个人一组） 3.教学资源： （1）教材 （2）教学课件 4.目标要求：可以通过回答以下问题来检测能否达到学习效果。 （1）什么是专题学习网站？ （2）专题学习网站的特点有什么？ （3）专题学习网站有哪些类型？ （4）专题学习网站由哪几部分构成？ （5）用Dreamweaver制作专题学习网站的简单流程 多媒体课件与专题网站的设计制作 现代传媒学院 教育技术教研室 动态网页与静态网页 什么是动态网页？ 动态网页与静态网页的区别？ 动态网页与静态网页的请求过程 动态网页与静态网页 优秀网站赏析 公司类 海尔集团 海尔集团 产品中心 海尔与奥运 红太阳集团 / 旅游类 携程旅行网 体育类 中国体育资讯网/ 教育培训类 新东方教育集团 校园频道 考试频道 购物网站 当当购物网 个人网站 中国学生网 学生空间 日记 木叶之家 …… 专题网站建设流程 确定网站主题 主题明确，忌“杂货铺” 个人特色，忌主题过大 健康合法 网站整体规划 树状结构 网站建设一般流程 收集资料和素材 文本 动画 自己拍摄制作 设计网页图像 网站标志、网站色彩、网站字体、网站宣传广告 网站首页 版面、色彩 图像、动画 图标、Banner 菜单 版权说明 网站建设一般流程 制作网页 结构：先大后小 内容：先简单后复杂 开发动态网站模块 搜索功能 留言板 新闻信息发布系统 在线购物 网站建设一般流程 申请域名 短、意义简单常用 稀有、不可替代 申请服务器空间 虚拟主机方式 独立服务器 发布与上传 FTP工具 Dreamweaver站点管理 后期更新与维护 更新 网页 目录管理 外观及广告更新 网站推广 交换链接 注册搜索引擎 广告链 网页设计软件与语言 软件 网页编辑排版软件Dreamweaver 网页图像制作软件Photoshop 网页动画制作软件FLASH 语言 超文本标记语言HTML 网页脚本语言Javascript Dreamweaver工作环境 起始页 工作窗口 三种视图 网页制作过程 新建网页 保存网页 预览网页 修改网页 站点 新建站点 管理站点文件夹及文件 使用框架布局网页： WhyWhen? 网页中固定的部分：导航栏、标题等 网页中经常更新的部分：正文 如何减少重复工作？ 案例演示 创建框架 两种方法 下拉菜单 下拉菜单中文件——新建——框架集 在右边选择框架结构 插入面板 选择插入面板中“框架” 在弹出框架结构列表中选择 添加内容 光标置于框架内 举例： 光标置于顶部框架内 插入表格 设置表格大小与背景图片相同 设置表格背景 插入嵌套表格 设置表格对齐方式为底部、左端 插入文本 保存框架 框架组文件及一组框架文件 文件——保存全部 弹出“保存为”对话框 根据阴影框判断保存的对象 最好按照框架的位置来给文档命名 选择框架及框架组 选择一个框架 按下Alt，在欲选择的框架内单击鼠标左键 窗口——其他——框架，在框架面板中选择 选择框架组 鼠标指针经过框架边框，出现上下箭头；单击整个框架组的边框 “框架”面板（打开方法：窗口——其他——框架）中单击框架组的边框 如何查看框架代码？ 代码视图 选择框架组的同时，切换到代码视图 代码分析 框架属性 属性 框架名称：作为链接指向的目标（target=？） 源文件：框架中页面文件来源 边框 其中，“默认”项由浏览器端的设置决定 边框颜色 框架属性 不能调整大小 在浏览器中是否可以手动改变大小 边界高度 边界宽度 滚动 自动:根据内容是否能完全显示而自行调整 框架组属性 框架组属性 边框、边框宽度、边框颜色 单位：行、列尺寸的单位 像素（大小固定），浏览器优先分配 百分比：所选框架大小在整个框架组的百分比，比“像素”后分配，比“相对”先分配 相对，其余两种分配完毕的剩余空间 编辑框架 拆分框架 光标置于框架内，选择插入面板——框架 光标置于框架内，修改——框架页——拆分上框架 编辑并保存新框架 设置框架和框架组的滚动条 改变框架大小 改变框架尺寸 上下结构的框架组，行值 左右结构的框架组，列值 单位：像素、百分比、相对 与框架有关的链接 链接目标 页内链接如何实现的？ 普通文档中的链接目标？ 链接目标指向某一框架 查看框架名称 可在高级布局——框架中查看 在链接目标出选择框架名称 总结与作业 学完本课： 理解框架的用途 能够利用框架布局网页 熟练使用