《网页设计与制作》课程教学大纲

《网页设计与制作》课程教学大纲课程名称：网页设计与制作学分及学时：4学分　总学时72学时，理论36学时适用专业：网络开课学期：第四学期开课部门：计算机与互联网学院先修课程：计算机文化基础计算机网络考核要求：考试使用及主要参考书：向知礼主编：《网页设计与制作》航空工业出版社2017年杨松主编：《网页设计案例教程》航空工业出版社2015年一·课程性质和任务：本课程全面地介绍网页制作技术的基本理论和实际应用。全书共10章，分为3大部分。前5章为第1部分，主要介绍网页制作的基本理论——HTML，同时穿插介绍Fireworks，Flash，Anfy等软件在网页制作过程中的应用；第6章～第8章为第2部分，主要介绍网页制作技术，包括CSS技术、客户端脚本技术(DHTML)以及XML技术；第9章～第10章为第3部分，主要介绍当前最流行的网页制作工具——Dreamweaver，通过应用实践能够从实际应用的角度进一步巩固所学知识。课程内容不但包括各种网页制作技术的基础理论，而且强调网页制作的具体应用，使读者既能打下坚实的理论基础，又能掌握实际的操作技能。二·课程教学目的与要求以Dreamweaver的使用为主线，介绍网页制作的相关技术。使学生理解网页制作的基本概念和理论,掌握站点的建立和网页的设计,能用HTML语言修改网页;掌握网页制作和站点的基本知识;掌握站点的创建和网页的编辑;掌握超链接、图像、CSS样式的使用;掌握表格、框架、表单、多媒体对象的使用;理解行为、模板、库、CSS布局的概念和使用;理解HTML语言、网站的测试与的发布；要求：教学过程中，须注重学生实践操作能力的培养，采取“面向实践、能力为先”的教学思路，教学内容应结合当前WEB技术的发展趋势，把握未来企业级WEB页面开发的发展方向，兼顾各行各业的需求变化，力争面向社会，服务于企业“互联网+”战略。三、课程学时分配章节教学内容理论教学学时实践教学学时其他（习、大作业）学时小计实验项目一网页设计与制作基础知识24 6项目二网站创建与管理4  4项目三创建简单图文网页4 6 10项目四为网页设置音视频和超链接2 2项目五 应用CSS设置网页样式24 6项目六构建网页布局46 10项目七在网页中应用表格24 6项目八模板和库的应用2 2项目九应用表单和行为2 2项目十测试和发布网站2  2项目十一 创建移动设备网页4610项目十二综合应用——制作酒店网站6612合计3636 72四·课程教学中应注意的问题理论课讲解WEB页面开发的原理及，并在多媒体教师机上进行演示操作；实验课在专业机房协助学生解决课上遗留问题，并安排学生进行实践操作巩固学习效果；考核方法：期终考试占40％，实验成绩20％，平时成绩和作业占40％。五·课程教学内容项目一  网页设计与制作基础知识学习目标案例一  指出当当网主页的构成元素——认识网页和网站案例说明相关知识一、网页、网站和主页二、网页的构成元素三、网页的本质案例实施案例二  了解网页设计与制作岗位职责——网页设计基础案例说明相关知识一、网页颜色的选择与搭配二、网页版式设计三、网页尺寸案例实施案例三  企业网站建设基本流程——网站建设基础案例说明相关知识一、Internet，IP地址和域名二、WWW，URL，HTTP和浏览器三、HTML与CSS简介四、网站管理与网页制作相关软件案例实施项目总结 项目二  网站创建与管理学习目标案例一  调整DreamweaverCC2017工作界面——初识DreamweaverCC2017案例说明相关知识一、启动DreamweaverCC二、认识DreamweaverCC工作界面案例实施案例二  设置企业网站栏目结构和目录结构案例说明相关知识一、设计网站栏目结构二、创建网站目录结构案例实施案例三  创建企业网站本地站点——站点基本操作案例说明相关知识一、使用Dreamweaver创建和打开本地站点二、使用Dreamweaver管理本地站点案例实施案例四  为企业网站制作欢迎页面——网页文档基本操作案例说明相关知识一、网页文档基本操作二、“文件”面板基本应用案例实施拓展知识一、网页文档和文件夹命名规则二、HTML的标签构成三、HTML网页文档的基本结构项目总结课堂实训——创建鲜花导购网站本地站点 项目三  创建简单图文网页学习目标案例一  为企业网站新闻显示网页设置页面基本信息——设置网页基本信息案例说明相关知识一、设置文档头信息二、设置网页页面属性案例实施案例二  为企业网站新闻显示网页设置文本内容——设置网页文本案例说明相关知识一、添加普通文本二、插入特殊符号三、添加空格四、添加与设置水平线五、创建列表案例实施拓展知识列表在HTML中的表示案例三  为企业网站新闻显示网页设置图像——设置网页图像案例说明相关知识一、插入与编辑图像二、插入鼠标经过图像案例实施拓展知识一、网页中可用的图像格式二、图像在HTML中的表示项目总结课堂实训——为鲜花导购网页设置文字和图像内容 项目四  为网页设置音视频和超链接学习目标案例一  制作音视频在线播放页面——在网页中插入HTML5音视频案例说明相关知识一、插入HTML5Audio二、插入HTML5Video三、插入并编辑插件案例实施拓展知识一、HTML5Audio和Video所支持的音频和视频格式二、为网页设置背景音乐案例二 为企业网站新闻显示网页设置超链接——设置超链接案例说明相关知识一、超链接的含义和分类二、设置常规超链接三、设置热点链接四、设置电子邮件链接五、设置文件下载链接六、设置图像链接案例实施项目总结课堂实训——为“鲜花导购网页”设置超链接 项目五  应用CSS设置网页样式学习目标案例一  为企业网站新闻显示网页设置整体样式——设置CSS样式（上）案例说明相关知识一、CSS样式表简介二、在页面中引入CSS样式表的几种方法三、CSS中选择器的类型四、设置布局样式五、设置文本和段落样式六、设置背景样式七、盒子模型的概念案例实施拓展知识一、选择器的集体声明、嵌套与优先级二、选择器的继承案例二  为企业网站新闻显示网页设置页头样式——设置CSS样式（中）案例说明相关知识一、设置边框样式二、流的概念案例实施案例三  为企业网站新闻显示网页设置正文样式——设置CSS样式（下）案例说明相关知识一、设置列表样式二、margin使用注意事项案例实施项目总结课堂实训——为“鲜花导购网页”设置CSS样式 项目六  构建网页布局学习目标案例一  构建企业网站新闻列表网页整体布局——浮动布局案例说明相关知识一、Div基础二、HTML5结构元素三、float和clear属性四、浮动布局的原理五、常用的浮动布局方法六、清除浮动对布局的不良影响七、浮动布局应用技巧案例实施一、构建HTML结构二、设置CSS样式案例二  制作企业网站新闻列表网页的页头部分案例说明案例实施一、构建HTML结构二、设置CSS样式案例三  制作企业网站新闻列表网页的新闻中心栏目案例说明案例实施一、构建HTML结构二、设置CSS样式案例四  制作企业网站新闻列表网页的集团要闻栏目案例说明案例实施一、构建HTML结构二、设置CSS样式项目总结课堂实训——制作博客网站首页 项目七  在网页中应用表格学习目标案例一  创建2018世界杯亚洲区预选赛40强分组表——构建和美化表格案例说明相关知识一、创建表格二、表格的HTML标签三、使用CSS设置表格和单元格属性案例实施一、构建HTML结构二、设置CSS样式案例二  制作化学实验分组表——编辑表格案例说明相关知识一、拆分与合并单元格二、在表格中添加或删除行与列三、使用CSS设置表格内边距和外边距四、使用CSS合并表格边框案例实施一、构建HTML结构二、设置CSS样式项目总结课堂实训——制作月历 项目八  模板和库的应用学习目标案例一  创建并应用模板制作新闻显示页面——模板基本操作案例说明相关知识一、创建模板二、编辑模板三、应用模板四、管理模板案例实施一、创建模板二、应用模板案例二  创建并应用库项目制作新闻显示页面——库的基本操作案例说明相关知识一、创建库项目二、应用库项目三、编辑库项目案例实施一、创建库项目二、应用库项目制作网页项目总结 项目九  应用表单和行为学习目标案例一  应用表单制作“欢乐购”注册页面——应用表单和表单对象案例说明相关知识一、表单基础知识二、插入表单三、插入表单元素案例实施一、构建HTML结构二、设置CSS样式案例二  应用行为为学校网页添加弹出框——应用行为案例说明相关知识一、认识行为二、“行为”面板三、应用行为四、编辑行为案例实施项目总结 项目十  测试和发布网站学习目标案例一  检查和测试企业网站——测试网站案例说明相关知识一、检查网页链接二、修复网页链接案例实施案例二  申请域名和虚拟空间——域名和虚拟空间案例说明相关知识一、域名二、虚拟空间案例实施案例三  发布企业网站——发布网站案例说明相关知识一、连接服务器二、上传网站三、下载网站四、使用扩展“文件”面板管理文件上传和取回案例实施项目总结 项目十一  创建移动设备网页学习目标案例  创建“不一样的北京”移动设备网页——使用jQueryMobile案例说明相关知识一、初识jQueryMobile二、创建jQueryMobile页面三、jQueryMobile页面结构四、使用jQueryMobile组件五、使用jQueryMobile主题案例实施一、新建文档二、制作主界面三、制作子页面项目总结 项目十二  综合应用——制作酒店网站案例一  站点规划和创建案例说明案例实施案例二  制作网站首页案例说明案例实施一、搭建页面整体框架二、制作网页头部三、制作“会员登录”模块四、制作“客房预订”模块五、制作“酒店新闻”模块六、制作网站信息区案例三  制作网站子页案例说明案例实施撰写人：审核人：学院院长：