网页设计实训教案-郭雅林资料.docVIP

网页设计与制作 实训教案 郭雅林 2015年下期 PAGE \* MERGEFORMAT 11 实训概述： 本学期课程是依据上海交通大学出版社出版的《网页制作Dreamweaver CS5 实战基础》进行教学安排的，教材采用项目教学法，共包含有10个项目。网页制作是一门实践性很强的课程，除理论讲授外，还安排了7个实训项目共 32课时的上机实训。具体安排为： 序号实训内容课时实训1建立网站站点2实训2网页的布局6实训3利用CSS样式统一页面风格4实训4利用层与行为创建网页效果4实训5使用表单创建文件4实训6规划、设计创建一个网站12共32课时 实训要求： 1、禁止抄袭。 2、主题不限，欢迎同学标新立异。 3、尽量多地完成实训内容 4、尽量保持实训网页的一致性。 5、推荐个人独立完成实训内容，但不排斥小组合作。小组合作人数不得超过3人。 评价方案： 项目完成度60%+设计美观度30%+实训纪律10% 实训1、 建立网站站点 实训题目建立网站站点实训课时2课时实训目的1、理解站点的含义 2、掌握建立站点的基本方法 3、掌握管理站点文件的基本方法重点难点1、认识网站，了解其中的基本术语 2、掌握建立站点的基本方法实训准备1、计算机 2、Dreamweaver CS5实训地点4号机房实训内容浏览网站 LOGO 表单元素 图片元素 超级链接 视频元素 其它元素 画出网站基本规划图 2.1、网站名称 2.2、网站文件夹和子文件夹 2.2、网站项目规划 使用Dreamweaver CS5新建个人网站 3.1、打开Dreamweaver CS5，找到“站点”-“新建”菜单命令 3.2、在“基本”选项卡输入相关信息 3.3、在“高级”选项卡输入相关信息 a.站点名称 b.本地根文件夹 c.默认图像文件夹 d.HTTP地址 使用Dreamweaver CS5管理网站文件 4.1、文件和文件夹的管理 4.2、站点地图实训项目绘制网站规划图 依据网站规划图建立网站实训2、 网页的布局 实训题目网页的布局实训课时6课时目的要求1、了解几种见的网页布局形式 2、掌握创建网页布局的三种方法 3、要求作品有一定的美学水平重点难点1、使用表格进行页面布局 2、使用框架进行页面布局 3、使用AP Div进行页面布局实训准备1、计算机 2、Dreamweaver CS5实训地点4号机房实训内容网页布局的几种形式 “厂”字型布局 “同”字型布局 分栏结构型布局 “封面”型布局 使用表格进行页面布局 使用表格 在文档中插入表格 选择表格 设置表格属性 编辑表格 格式化表格 表格格式的设置 表格的排序 导入表格数据 导出表格数据 3. 使用框架进行页面布局 3.1、创建框架和框架集 3.2、构架的操作 3.3、查看和设置框架属性 4. 使用AP Div进行页面布局 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的属性 实训项目用表格为首页布局 用框架为首页布局 用AP Div为首页布局 实训3、 利用CSS样式统一页面风格 实训题目利用CSS样式统一页面风格实训课时4课时目的要求1、认识CSS层叠样式表 2、掌握利用CSS样式统一页面风格方法 3、认识和定义CSS规则重点难点1、了解CSS层叠样式表的定义 2、了解CSS层叠样式表的规则和分类 3、定义CSS层叠样式表规则实训准备1、计算机 2、Dreamweaver CS5实训地点4号机房实训内容认识CSS层叠样式表 CSS样式 CSS 规则 CSS分类 创建CSS层叠样式表 “CSS样式”面板 新建CSS样式 创建CSS文档 3. 使用CSS样式 3.1、定义CSS规则 3.2、套用CSS样式 附加样式表 3.5、删除已应用的样式 4. 使用样式增大行间距 5. 使用样式去除超链接的下画线实训项目用CSS样式设计网页风格 创建CSS样式文档实训4、 利用层与行为创建网页效果 实训题目利用层与行为创建网页效果实训课时4课时目的要求1、认识层和行为 2、能使用行为和层创建网页效果重点难点1、了解层的含义 2、了解行为的含义 3、使用行为和