网页设计与制作教学大纲...doc

Four short words sum up what has lifted most successful individuals above the crowd: a little bit more.-author-date网页设计与制作教学大纲.马鞍山师范高等专科学校网页制作与设计教学大纲学 时： 72 学时课程类别： 专业必修课适用专业：软件技术一、课程的性质与任务课程的性质：本课程是一门专业基础课，要求学生掌握HTML、css和dreamweaver制作网页的知识和技术，同时为后续课程的学习奠定基础。课程的任务：通过本课程的学习，使学生了解网站开发的流程，掌握HTML和CSS技术实现网页的构建和美化，并用dreamweaver CS5工具实现网页的制作。前导课程：计算机应用基础后续课程：Javascript、 Java Web组件编程等二、教学基本要求本课程以计算机应用基础课程为基础，通过本课程的学习，应使学生掌握网页制作的基本方法，掌握HTML、CSS等网页基础编程知识，并使用主流工具Dreamweaver CS5进行网页制作。三、教学条件多媒体教室，安装Adobe Dreamweaver CS5的一体化实训室四、教学内容及学时安排（一）优秀网页赏析教学时数：4教学目标： 1.理解网站相关的概念。2.了解网页的基本组成元素3.理解网站的主题定位，风格和网站布局。4.制作第一个简单的静态网页教学重点难点： 1. 理解网站的定位和风格2、学习模仿网页的色彩搭配2. 分析网站的布局3. 能模仿制作一个简单网页。教学方法：案例演示、理论讲解 教学案例：海尔集团网站（企业类）、携程旅游网（旅游类）、中国大众体育网（体育类）、新东方教育（教育类）、往届优秀毕业设计答辩系统、一个简单的静态网页 理论教学内容：1. 不同行业网站赏析 2. 网页与网站的概念和术语。 3. 网页组成元素。 4. 网站的策划与设计原则。 5. 网站的开发流程6. 应用HTML、CSS制作第一个简单静态网页实践教学内容：1.第一个静态网页 实验目的：锻炼学生学会使用记事本编辑静态网页，使学生熟悉HTML标记语言和认识HTML语言的结构；提升学生学习兴趣和自信。 实验要求：要求学生会使用HTML搭建网页架构；在合适位置插入CSS代码并体会使用HTML制作网页的方法。实验内容：按给定的要求和步骤实现一个静态网页的制作（二）用HTML设置文本和图像教学时数：4教学目标： 1进一步熟悉HTML文档结构2掌握文本排版标记3掌握文字列表的标记和属性4. 掌握图像插入标记和属性教学重点难点： 1HTML文档结构2掌握文本排版标记3掌握文字列表的标记和属性4. 掌握图像插入标记和属性教学方法：案例演示、理论讲解理论教学内容：1.文本排版(<p>标记、<br>标记、标题标记)2.设置文字列表(<ol>和<ul>标记)3.HTML标记与HTML属性4.插入和使用网页图像(<img>标记和width、alt等属性5Dreamweaver CS5中设置文本何图像的方法实践教学内容：1.用HTML制作一个图文并茂的网页。实验目的：熟悉HTML文件结构；掌握HTML中文字、列表、图像标记的使用要求按照规定格式使用合适标记和属性进行排版，实现给定的效果图中显示效果实验内容：用HTML语言编写一个图文并茂网页（三）超链接网页教学时数：4教学目标： 1掌握html中设置基本文字和图片超链接2掌握html中设置其他超链接3. 掌握dreamweaver中建立和编辑超链接的方法4. 理解相对路径和绝对路径教学重点难点： 1.掌握html中建立超链接的标记2.理解相对路径和绝对路径3.掌握dreamweaver建立超链接的方法4.理解相对路径和绝对路径教学方法：案例演示、理论讲解 教学案例：短信平台系统页面 理论教学内容：1.设置基本文字超链接2.设置图片超链接3.设置电子邮件链接4.创建热点链接6.利用dreamweaver方便实现网页间的链接实践教学内容：1.教务系统子页面实验目的：理解并运用HTML编辑超链接的标记和属性，会在dreamweaver中快速建立超链接的方法实验要求：建立几个相关页面，并按要求建立页面间和页面内的超链接实验内容：按要求建立教务系统子页面，并设置页面间的链接 （四）表格网页教学时数：4教学目标： 1掌握html中表格的建立2掌握html中table的常用属性 3、掌握dreamweaver中表格的插入和编辑4. 掌握数据表格的建立和基本美化教学重点难点： 1.表格的基本结构2.表格的属性设置3.数据表格的编辑和美化教学方法：案例驱动法 理论教学内容：1html中表格的基本结构2表格的合并和拆分3dreamweaver中表格的插入和编辑4数据表格的建立和基本美化 实践教学内容：1. 短信平台系统页面 实验目的：掌握的插入和编辑。 实验要求：按要求插入和编辑表格 实验内容：按要求实现短信平台系统页面（五）表单网页教学时数：4教学目标： 1.掌握HTML中表单元素的建立2.掌握表单元素的插入和属性的设置教学重点难点： 1.理解表单域2.各种表单元素的插入和属性设置教学方法：案例演示、理论讲解。教学案例：教务系统页面 理论教学内容：1.在html中插入表单域2.在表单域中插入及编辑文本域和文本区域3.在表单域中插入及编辑单选按钮、单选按钮组和复选框4.在表单域中插入及编辑列表/菜单、按钮和图像域等5.Dreamweaver cs5中插入和编辑表单的方法 实践教学内容：1. 短信平台注册和登录页面 实验目的：掌握如何创建表单网页；了解各个表单对象属性的设置；熟练掌握各个表单对象不同的使用范围。 实验要求：要求学生能利用表单来创建网页；掌握设定表单的内容和表单对象；掌握设置各个表单对象的属性值等内容。实验内容：教务系统注册和登录页面的实现(六)框架页面教学时数：4教学目标： 1.掌握HTML中创建框架的方法。2.掌握dreamweaver中创建和保存框架的方法3.掌握设置框架集属性和框架属性的操作方法4.掌握框架中设置导航超级链接的操作方法教学重点难点： 1.HTML中创建框架的标记和属性2.dreamweaver中框架的建立和操作3.框架中设置导航超级链接的操作方法教学方法：案例演示、理论讲解 教学案例：教务系统页面理论教学内容：1.HTML中创建和设置框架的标记和属性2.在dreamweaver中快速创建框架3.设置框架集属性和框架属性4.编辑框架内容5.框架中设置导航超级链接实践教学内容：1. 短信平台系统后台页面 实验目的：为了让学生掌握如何创建框架；设定框架的内容和样式；框架间的链接等。 实验要求：要求学生能利用框架来进行布局网页，设定框架内容和样式；设置框架的内容；保存框架。 实验内容：按要求实现短信平台系统后台页面（七）CSS基础教学时数：4教学目标： 1.掌握CSS的构造规则2.掌握基本的CSS选择器3.掌握HTML中使用CSS的方法4.掌握dreamweaver中编辑css的方法教学重点难点：1.掌握CSS选择器；2.掌握HTML中使用CSS的方法教学方法：案例教学法理论教学内容：1.CSS的引入2.CSS构造规则3.基本CSS选择器4.HTML中使用css的方法5.dreamweaver中使用css的方法实践教学内容：1.网上购物管理系统的美化实验目的：体验css的作用；熟悉css的构造规则；掌握基本的css选择器，掌握dreamweaver中编辑css的方法实验要求：能按照给定的效果图和要求，运用css技术进行基本的美化实验内容：按照给定的要求，对网上购物管理系统进行美化 （八）CSS对文字的设置教学时数：4教学目标：1进一步理解CSS的概念2掌握用CSS编辑文字3掌握用CSS对段落精细排版教学重点难点： 利用CSS对文字和段落排版的控制教学方法：案例教学法理论教学内容：1.了解网页中常用的长度单位2.利用CSS掌控文字的字体、粗细、大小、加线、英文字母大小写转换3.利用CSS掌控段落的首行缩进、字符间距、段落行距、位置控制实践教学内容：1.利用CSS对网上商城系统的段落和文字进行美化实验目的：掌握CSS美化段落和文字的方法实验要求：使用CSS样式美化给定网页中的文字和段落实验内容：按照给定的要求对网上商城系统的段落和文字进行美化。（九）CSS对背景的设置教学时数：4教学目标：1掌握背景颜色的设置方法 2掌握背景图片的设置教学重点难点： 利用CSS对网页中背景图片、背景颜色进行设置教学方法：讲授与演示相结合理论教学内容：1网页中颜色的设置方法2网页及文字、背景颜色的设置3背景图片的设置实践教学内容：1.利用CSS美化网上商城系统网页背景实验目的：掌握CSS美化网页背景的方法实验要求：使用CSS美化网页背景实验内容：对网上商城系统按要求使用CSS对背景进行美化。（十）CSS盒子模型教学总时数：4教学目标：1.理解css盒子模型2掌握边框的设置方法 3掌握方框的设置教学重点难点： 1.理解css盒子模型2掌握边框的设置方法 教学方法：案例教学法理论教学内容：1css盒子模型介绍2. css设置填充3. css设置边距4应用CSS中方框和边框样式到不同元素实践教学内容：1.利用CSS美化教务系统中表格和表单元素实验目的：掌握CSS方框和边框样式美化表单元素和DIV的方法实验要求：对给定的网页文件按要求使用CSS边框和方框样式美化表单元素和DIV元素实验内容：对教务系统表格和表单页面按要求使用CSS进行美化。（十一）CSS+DIV实现网页布局教学总时数：8教学目标：1理解div元素的特点2掌握css设置div元素的方法 3掌握常用的网页布局教学重点难点： 1.理解div元素的特点2能利用padding和margin属性对div进行控制3.掌握常用的布局方法4.掌握float属性的使用教学方法：案例教学法理论教学内容：1插入和编辑div元素2单行单列结构3二列式布局4. 三列式布局实践教学内容：1.分别对教务系统和短信系统的页面进行重新布局实验目的：掌握CSS+DIV对网页进行布局的方法实验要求：对效果图给定的网页结构按要求使用CSS+DIV进行布局实验内容：对给定系统的页面按要求使用CSS+DIV对网页实现不同的布局。（十二）运用dreamweaver CS5制作网页教学时数：6教学目标： 1掌握站点的创建和管理2. 进一步熟悉运用dreamweaver工具制作网页的方法3. 进一步掌握dreamweaver中插入和编辑不同元素的方法4. 熟悉网站的测试和发布流程教学重点难点： 1.掌握站点的创建和管理2.进一步熟悉dreamweaver中插入和编辑元素的方法。教学方法：案例教学法理论教学内容： 1.站点的创建和管理2. dreamweaver中插入各种网页元素3. dreamweaver中编辑各种网页元素4. dreamweaver中使用css的方法5. 网站的测试和发布 实践教学内容：1. “习近平出访”新闻专题网站实验目的：掌握dreamweaver工具制作网页的方法实验要求：熟练掌握dreamweaver工具的使用实验内容：按指定要求实现新闻网站的制作（十三）网页设计与制作综合案例教学时数：6教学目标： 1进一步掌握网页制作的整体流程2. 引导学生对网站的内容和色彩美工的把握3. 巩固网页制作的知识教学重点难点： 1对网页制作的流程能有整体的认识和体验2. 要求学生具有一定的网站内容的策划和色彩美工的把握3. 熟练应用已学知识制作网页教学方法：案例教学法理论教学内容：1.不同类型的专业网站的欣赏和分析2. 网页制作的整体流程3.马鞍山志业软件工作日志网站的制作 实践教学内容：1. 设计并制作专题网站实验目的：掌握网页设计与制作的方法实验要求：掌握网站的策划和制作实验内容：按给定要求选定主体实现网站的整体设计和页面的制作（十四）综合实训教学时数：12教学目标：掌握网页制作的方法和技术，提高实际动手能力教学重点难点：实训过程的指导、跟踪和把控 理论教学内容：无 实践教学内容：学生选择网站主题，按照网站制作的流程和给定规范，从规划到设计、到制作、到美化、到测试，直至最后评审五、各教学环节学时分配 序号教学内容学时分配1优秀网页赏析42用HTML设置文本和图像43超链接网页44表格网页45表单网页46框架页面47CSS基础48CSS对文字的设置49CSS对背景的设置410CSS盒子模型411CSS+DIV实现网页布局812运用dreamweaver CS5制作网页613网页设计与制作综合案例614综合实训12合计72六、考核方式及评分办法采用平时成绩+实训成绩的方式，包括：平时的考勤和作业：占40%，综合实训项目：占60%七、教材与参考书建议教材（实验指导书）：1Dreamweaver CS5网页设计教程,杨子燕编著,人民邮电出版社,2013年建议参考书：1完全手册HTML+CSS+Javascript实用详解,叶青编著,电子工业出版社,2011年2 HTML+CSS网页设计与布局从入门到精通,人民邮电出版社, 温谦等编著，2011年出版八、说明 无-