网页设计实训教案-郭雅林

1、网页设计与制作实训教案郭雅林2015年下期实训概述：本学期课程是依据上海交通大学出版社出版的网页制作Dreamweaver CS5 实战基础进行教学安排的，教材采用项目教学法，共包含有10个项目。网页制作是一门实践性很强的课程，除理论讲授外，还安排了7个实训项目共 32课时的上机实训。具体安排为：序号实训内容课时实训1建立网站站点2实训2网页的布局6实训3利用CSS样式统一页面风格4实训4利用层与行为创建网页效果4实训5使用表单创建文件4实训6规划、设计创建一个网站12共32课时实训要求：1、禁止抄袭。2、主题不限，欢迎同学标新立异。3、尽量多地完成实训内容4、尽量保持实训网页的一致性。5、推

2、荐个人独立完成实训内容，但不排斥小组合作。小组合作人数不得超过3人。评价方案：项目完成度60%+设计美观度30%+实训纪律10%实训1、 建立网站站点实训题目建立网站站点实训课时2课时实训目的1、理解站点的含义2、掌握建立站点的基本方法3、掌握管理站点文件的基本方法重点难点1、认识网站，了解其中的基本术语2、掌握建立站点的基本方法实训准备1、计算机2、Dreamweaver CS5实训地点4号机房实训内容1. 浏览网站1.1、 LOGO1.2、 表单元素1.3、 图片元素1.4、 超级链接1.5、 视频元素1.6、 其它元素2. 画出网站基本规划图2.1、网站名称2.2、网站文件夹和子文件夹2

3、.2、网站项目规划3. 使用Dreamweaver CS5新建个人网站3.1、打开Dreamweaver CS5，找到“站点”-“新建”菜单命令3.2、在“基本”选项卡输入相关信息3.3、在“高级”选项卡输入相关信息 a.站点名称 b.本地根文件夹 c.默认图像文件夹 d.HTTP地址4. 使用Dreamweaver CS5管理网站文件4.1、文件和文件夹的管理4.2、站点地图实训项目1、 绘制网站规划图2、 依据网站规划图建立网站实训2、 网页的布局实训题目网页的布局实训课时6课时目的要求1、了解几种见的网页布局形式2、掌握创建网页布局的三种方法3、要求作品有一定的美学水平重点难点1、使用表

4、格进行页面布局2、使用框架进行页面布局3、使用AP Div进行页面布局实训准备1、计算机2、Dreamweaver CS5实训地点4号机房实训内容1. 网页布局的几种形式1.1、 “厂”字型布局1.2、 “同”字型布局1.3、 分栏结构型布局1.4、 “封面”型布局2. 使用表格进行页面布局2.1、 使用表格a、 在文档中插入表格b、 选择表格c、 设置表格属性d、 编辑表格2.2、 格式化表格a、 表格格式的设置b、 表格的排序2.3、 导入表格数据2.4、 导出表格数据3. 使用框架进行页面布局 3.1、创建框架和框架集 3.2、构架的操作 3.3、查看和设置框架属性4. 使用AP Div

5、进行页面布局 4.1、创建AP Div a、基本AP Div b、嵌套AP Div 4.2、AP Div的操作 a、选择AP Div b、调整AP Div大小 c、移动AP Div d、排列AP Div 4.3、设置AP Div的属性实训项目1、 用表格为首页布局2、 用框架为首页布局3、 用AP Div为首页布局实训3、 利用CSS样式统一页面风格实训题目利用CSS样式统一页面风格实训课时4课时目的要求1、认识CSS层叠样式表2、掌握利用CSS样式统一页面风格方法3、认识和定义CSS规则重点难点1、了解CSS层叠样式表的定义2、了解CSS层叠样式表的规则和分类3、定义CSS层叠样式表规则实训

6、准备1、计算机2、Dreamweaver CS5实训地点4号机房实训内容1. 认识CSS层叠样式表1.1、 CSS样式1.2、 CSS 规则1.3、 CSS分类2. 创建CSS层叠样式表2.1、 “CSS样式”面板2.2、 新建CSS样式2.3、 创建CSS文档 3. 使用CSS样式 3.1、定义CSS规则3.2、套用CSS样式3.4、 附加样式表 3.5、删除已应用的样式4. 使用样式增大行间距5. 使用样式去除超链接的下画线实训项目1、 用CSS样式设计网页风格2、 创建CSS样式文档实训4、 利用层与行为创建网页效果实训题目利用层与行为创建网页效果实训课时4课时目的要求1、认识层和行为2

7、、能使用行为和层创建网页效果重点难点1、了解层的含义2、了解行为的含义3、使用行为和层创建网页效果实训准备1、计算机2、Dreamweaver CS5实训地点4号机房实训内容1. 认识层1.1、 层的概念1.2、 行为的概念1.3、 层的堆叠2. 行为的操作2.1、 创建行为2.2、 应用行为2.3、 修改行为 3. 行为的设置 3.1、弹出消息3.2、打开浏览器窗口 3.3、播放声音 3.4、改变属性 3.5、预先载入图像 3.6、交换图像 3.7、转到URL 3.8、拖动AP元素实训项目1、 为网页添加背景音乐2、 创建弹出对话框3、 创建弹出窗口小广告实训5、使用表单创建文件实训题目使用

8、表单创建文件实训课时4课时目的要求1、认识表单的含义2、创建表单并设置其属性重点难点1、了解表单的含义2、了解表单的工作模式3、表单属性的设置实训准备1、计算机2、Dreamweaver CS5实训地点4号机房实训内容1. 认识表单1.1、 表单的概念1.2、 表单的工作模式2. 表单的操作2.1、 插入表单2.2、 使用文本域2.3、 使用隐藏域2.4、 使用复选框2.5、 使用单选按钮、单选按钮组2.6、 使用列表、菜单2.7、 使用跳转菜单2.8、 使用图像域2.9、 使用标准按钮3. Spry构件3.1、 制作Spry菜单栏3.2、 制作Spry选项卡式面板3.3、 制作Spry可折叠

9、面板3.4、 Spry工具效果实训项目1、 提交表单当中的信息并验证表单中的内容2、 创建弹留言簿3、 为网页创建Spry菜单实训6、规划、设计、创建一个网站实训题目规划、设计、创建一个网站实训课时12课时目的要求1、合理规划网站结构2、采集、加工、整理网站所需的素材3、网站要求至少有10张以上的页面，并要求有一定的美感重点难点1、规划网站结构2、采集、加工、整理素材3、对网站的总体风格的体现实训准备1、计算机2、Dreamweaver CS5，Photoshop CS5, Flash CS53、照相机或其它影音采集设备实训地点4号机房实训内容1. 规划网站结构1.1、 网站的目标分析1.2、 网站的风格设定1.3、 网站的结构图绘制2. 照相机的使用2.1