单元4 专题网站的设计制作

1、多媒体课件与专题网站的设计制作多媒体课件与专题网站的设计制作 现代传媒学院教育技术教研室专题学习网站的创建专题学习网站的创建现 代 教 育 技 术4.2 专题学习网站的创建专题学习网站的创建 1.主要内容 预备知识 动态网站与静态网站 优秀网站赏析 网页设计软件 网页设计语言 Dreamweaver工作环境 专题网站建设一般流程 框架网页制作现 代 教 育 技 术 2.教学方法： （1）自主学习 （2）分组讨论，合作学习（5个人一组） 3.教学资源： （1）教材 （2）教学课件现 代 教 育 技 术 4.目标要求：可以通过回答以下问题来检测能否达到学习效果。 （1）什么是专题学习网站？ （2）

2、专题学习网站的特点有什么？ （3）专题学习网站有哪些类型？ （4）专题学习网站由哪几部分构成？ （5）用Dreamweaver制作专题学习网站的简单流程现 代 教 育 技 术多媒体课件与专题网站的设计制作多媒体课件与专题网站的设计制作 现代传媒学院教育技术教研室专题学习网站的创建教学专题学习网站的创建教学PPT现 代 教 育 技 术动态网页与静态网页动态网页与静态网页 什么是动态网页？ 动态网页与静态网页的区别？ 动态网页与静态网页的请求过程现 代 教 育 技 术动态网页与静态网页动态网页与静态网页现 代 教 育 技 术优秀网站赏析优秀网站赏析公司类海尔集团 海尔集团 产品中心 海尔与奥运红太

3、阳集团 旅游类携程旅行网体育类中国体育资讯网 校园频道 考试频道购物网站当当购物网个人网站中国学生网 学生空间 日记 木叶之家现 代 教 育 技 术专题网站建设流程专题网站建设流程 确定网站主题 主题明确，忌“杂货铺” 个人特色，忌主题过大 健康合法 网站整体规划 树状结构现 代 教 育 技 术 收集资料和素材 文本 动画 自己拍摄制作 设计网页图像 网站标志、网站色彩、网站字体、网站宣传广告 网站首页 版面、色彩版面、色彩 图像、动画图像、动画 图标、图标、Banner 菜单菜单 版权说明版权说明网站建设一般流程网站建设一般流程现 代 教 育 技 术 制作网页 结构：先大后小 内容：先简单后

4、复杂 开发动态网站模块 搜索功能 留言板 新闻信息发布系统 在线购物网站建设一般流程网站建设一般流程现 代 教 育 技 术 申请域名 短、意义简单常用 稀有、不可替代 申请服务器空间 虚拟主机方式 独立服务器 发布与上传 FTP工具 Dreamweaver站点管理网站建设一般流程网站建设一般流程现 代 教 育 技 术后期更新与维护后期更新与维护 更新 网页 目录管理 外观及广告更新 网站推广 交换链接 注册搜索引擎 广告链现 代 教 育 技 术网页设计软件与语言网页设计软件与语言 软件 网页编辑排版软件Dreamweaver 网页图像制作软件Photoshop 网页动画制作软件FLASH 语言

5、 超文本标记语言HTML 网页脚本语言Javascript现 代 教 育 技 术Dreamweaver工作环境工作环境 起始页 工作窗口 三种视图 网页制作过程新建网页保存网页预览网页修改网页站点新建站点管理站点文件夹及文件现 代 教 育 技 术使用框架布局网页：使用框架布局网页： Why&When? 网页中固定的部分：导航栏、标题等 网页中经常更新的部分：正文 如何减少重复工作？ 案例演示现 代 教 育 技 术创建框架创建框架 两种方法 下拉菜单 下拉菜单中文件下拉菜单中文件新建新建框架集框架集 在右边选择框架结构在右边选择框架结构 插入面板 选择插入面板中选择插入面板中“框架框架”

6、 在弹出框架结构列表中选择在弹出框架结构列表中选择现 代 教 育 技 术添加内容添加内容 光标置于框架内 举例： 光标置于顶部框架内 插入表格 设置表格大小与背景图片相同 设置表格背景 插入嵌套表格 设置表格对齐方式为底部、左端 插入文本现 代 教 育 技 术保存框架保存框架 框架组文件及一组框架文件 文件保存全部 弹出“保存为”对话框 根据阴影框判断保存的对象 最好按照框架的位置来给文档命名现 代 教 育 技 术选择框架及框架组选择框架及框架组 选择一个框架 按下Alt，在欲选择的框架内单击鼠标左键 窗口其他框架，在框架面板中选择 选择框架组 鼠标指针经过框架边框，出现上下箭头；单击整个框架

7、组的边框 “框架”面板（打开方法：窗口其他框架）中单击框架组的边框现 代 教 育 技 术如何查看框架代码？如何查看框架代码？ 代码视图 选择框架组的同时，切换到代码视图 代码分析现 代 教 育 技 术框架属性框架属性 属性 框架名称：作为链接指向的目标（target=？） 源文件：框架中页面文件来源 边框 其中，“默认”项由浏览器端的设置决定 边框颜色现 代 教 育 技 术框架属性框架属性 不能调整大小 在浏览器中是否可以手动改变大小 边界高度 边界宽度 滚动 自动:根据内容是否能完全显示而自行调整现 代 教 育 技 术框架组属性框架组属性 框架组属性 边框、边框宽度、边框颜色 单位：行、列尺

8、寸的单位 像素（大小固定），浏览器优先分配像素（大小固定），浏览器优先分配 百分比：所选框架大小在整个框架组的百分比，比百分比：所选框架大小在整个框架组的百分比，比“像素像素”后后分配，比分配，比“相对相对”先分配先分配 相对，其余两种分配完毕的剩余空间相对，其余两种分配完毕的剩余空间现 代 教 育 技 术编辑框架编辑框架 拆分框架 光标置于框架内，选择插入面板框架 光标置于框架内，修改框架页拆分上框架 编辑并保存新框架 设置框架和框架组的滚动条现 代 教 育 技 术改变框架大小改变框架大小 改变框架尺寸 上下结构的框架组，行值 左右结构的框架组，列值 单位：像素、百分比、相对现 代 教 育 技 术与框架有关的链接与框架有关的链接 链接目标 页内链接如何实现的？ 普通文档中的链接目标？ 链接目标指向某一框架 查看框架名称 可在高级布局可在高级布局框架中查看框架中查看 在链接目标出选择框架名称