《网页设计与制作(HTML+CSS)》教学大纲

合集下载

《网页设计与制作》教案

《网页设计与制作》教案

《网页设计与制作》教案第一章:网页设计基础1.1 教学目标让学生了解网页设计的基本概念和原则让学生掌握网页设计的流程和方法1.2 教学内容网页设计的概念和定义网页设计的原则和要素网页设计的流程和方法1.3 教学方法讲授法:讲解网页设计的概念和原则实践法:学生动手实践设计简单的网页1.4 教学评价学生能回答出网页设计的概念和定义学生能理解并运用网页设计的原则和要素学生能独立完成简单的网页设计第二章:HTML与CSS基础2.1 教学目标让学生了解HTML和CSS的基本概念和作用让学生掌握HTML和CSS的基本语法和用法2.2 教学内容HTML的基本概念和语法CSS的基本概念和语法HTML和CSS的综合应用2.3 教学方法讲授法:讲解HTML和CSS的基本概念和语法实践法:学生动手实践编写HTML和CSS代码2.4 教学评价学生能回答出HTML和CSS的基本概念和作用学生能理解并运用HTML和CSS的基本语法和用法学生能独立完成简单的HTML和CSS代码编写第三章:网页布局与排版3.1 教学目标让学生了解网页布局和排版的基本原则和方法让学生掌握使用HTML和CSS进行网页布局和排版的技术3.2 教学内容网页布局的基本原则和方法网页排版的基本原则和方法使用HTML和CSS进行网页布局和排版的技术3.3 教学方法讲授法:讲解网页布局和排版的基本原则和方法实践法:学生动手实践进行网页布局和排版3.4 教学评价学生能回答出网页布局和排版的基本原则和方法学生能理解并运用HTML和CSS进行网页布局和排版的技术学生能独立完成具有良好布局和排版的网页设计第四章:网页动画与交互4.1 教学目标让学生了解网页动画和交互的基本概念和原理让学生掌握使用HTML和CSS实现网页动画和交互的技术4.2 教学内容网页动画的基本概念和原理网页交互的基本概念和原理使用HTML和CSS实现网页动画和交互的技术4.3 教学方法讲授法:讲解网页动画和交互的基本概念和原理实践法:学生动手实践实现网页动画和交互4.4 教学评价学生能回答出网页动画和交互的基本概念和原理学生能理解并运用HTML和CSS实现网页动画和交互的技术学生能独立完成具有动画和交互功能的网页设计第五章:网页优化与推广5.1 教学目标让学生了解网页优化和推广的基本概念和方法让学生掌握使用SEO和网络营销技术进行网页优化和推广的技巧5.2 教学内容网页优化的基本概念和方法网页推广的基本概念和方法使用SEO和网络营销技术进行网页优化和推广的技巧5.3 教学方法讲授法:讲解网页优化和推广的基本概念和方法实践法:学生动手实践进行网页优化和推广5.4 教学评价学生能回答出网页优化和推广的基本概念和方法学生能理解并运用SEO和网络营销技术进行网页优化和推广的技巧学生能独立完成具有优化和推广功能的网页设计第六章:网页图像处理与多媒体应用6.1 教学目标让学生了解网页图像处理的基本概念和工具让学生掌握网页图像处理和多媒体应用的技术6.2 教学内容网页图像处理的基本概念和工具(如Photoshop、Fireworks等)多媒体元素在网页中的应用(如音频、视频等)图像和多媒体的HTML和CSS标记6.3 教学方法讲授法:讲解网页图像处理的基本概念和工具实践法:学生动手实践进行网页图像处理和多媒体应用6.4 教学评价学生能回答出网页图像处理的基本概念和工具学生能理解并运用网页图像处理和多媒体应用的技术学生能独立完成具有图像和多媒体应用的网页设计第七章:网页编程技术7.1 教学目标让学生了解网页编程的基本概念和语言让学生掌握常用的网页编程技术和框架7.2 教学内容网页编程的基本概念和语言(如JavaScript、jQuery等)常用的网页编程技术和框架(如Bootstrap、React等)编程实践和项目案例7.3 教学方法讲授法:讲解网页编程的基本概念和语言实践法:学生动手实践进行网页编程和技术应用7.4 教学评价学生能回答出网页编程的基本概念和语言学生能理解并运用常用的网页编程技术和框架学生能独立完成编程实践和项目案例第八章:移动网页设计与制作8.1 教学目标让学生了解移动网页设计的基本概念和原则让学生掌握移动网页设计与制作的技术和工具8.2 教学内容移动网页设计的基本概念和原则移动网页设计与制作的技术和工具(如Responsive Design、Adobe Edge Mobile等)移动网页设计的实践和案例分析8.3 教学方法讲授法:讲解移动网页设计的基本概念和原则实践法:学生动手实践进行移动网页设计与制作8.4 教学评价学生能回答出移动网页设计的基本概念和原则学生能理解并运用移动网页设计与制作的技术和工具学生能独立完成移动网页设计与制作的项目案例第九章:网页项目实战与团队协作9.1 教学目标让学生了解网页项目实战的基本流程和方法让学生掌握团队协作的基本技巧和工具9.2 教学内容网页项目实战的基本流程和方法团队协作的基本技巧和工具(如Git、Project Management Software等)项目案例分析和实战演练9.3 教学方法讲授法:讲解网页项目实战的基本流程和方法实践法:学生分组进行项目实战和团队协作9.4 教学评价学生能回答出网页项目实战的基本流程和方法学生能理解并运用团队协作的基本技巧和工具学生能独立完成项目实战和团队协作的任务第十章:网页设计与制作的未来趋势10.1 教学目标让学生了解网页设计与制作的未来趋势和发展方向让学生掌握前沿技术和创新思维的方法10.2 教学内容网页设计与制作的未来趋势和发展方向(如VR/AR、等)前沿技术和创新思维的方法(如Blockchn、Design Thinking等)创新项目和案例分析10.3 教学方法讲授法:讲解网页设计与制作的未来趋势和发展方向实践法:学生进行创新项目和思维训练10.4 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一:网页设计的概念和原则重点关注学生对网页设计的基本理解,以及如何运用设计原则进行网页创作。

网页设计与制作-教学大纲

网页设计与制作-教学大纲

《网页设计与制作》教学大纲适用专业:计算机相关专业一、大纲说明(一)课程的性质和特点本课程使用的设计工具是 Dreamweaver 8,它是一个十分专业化、完全可视化的网页设计工具,无论对于专业还是业余的Web设计师,它都是一个完美的设计工具。

本课程还使用了Firework 8和Flash 8。

在页面修饰、图形处理方面,Firework 可以与任何一套专业级图形处理软件相媲美。

在页面交互性和可视化效果方面,Flash更是无人能及。

它是一个专业的矢量编辑和动画创作专业软件,专门用于制作Web页中的电影动画和交互动画。

Dreamweaver 、Firework、Flash在网页及Web应用的设计上配合的天衣无缝;同时又由于它们出自同一个公司,它们之间存在着许多相似的地方,只要熟悉其中之一,其他两个也就触类旁通,很适合本校学生学习和使用。

本课程是一门专业实践课,通过本课程的学习, 要求学生能够理解网页制作的基本概念和基本原理,能够掌握网页制作的方法与技巧,能够利用设计工具完成网页制作和网站管理, 能够了解最新的网页制作技术的应用。

(二)课程设置的目的“网页设计与制作”是为培养网站管理与开发的应用型人才所设置的专业课,它使学生能够了解和掌握网站与网页的建立过程和开发技巧。

二、教学内容及要求(一)理论教学内容及要求第一章网站与网页设计基础内容:网站的目录结构和链接结构,确定网站的整体风格和创意设计,关于网页的各种基础知识、网页的设计原则和网站的主题风格等内容。

要求:理解网页和网站的基本概念,了解网站的目录结构、网站的创意和布局等网页设计基本知识。

了解网站制作的流程。

第二章网站的建立与页面文档的创建内容:Dreamweaver 8的新特性, Dreamweaver 8工作界面,简单的页面操作,网页元素的运用,网页链接。

要求:通过本章的学习,用户应学会在创建站点之前如何对站点进行规划,如何创建本地站点,如何编辑管理站点,如何创建HTML文档,以及如何设置文档的属性。

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

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

《网页设计与制作》教学大纲一、说明1、课程的性质与内容《网页设计与制作》课程就是计算机应用技术、电子商务等专业的一门核心课程,也就是其她计算机专业的普及型课程。

内容主要涵盖了HTML语言的语法规则及文字、链接、列表、表格、表单、图像、多媒体、框架元素标记及属性,、JavaScript脚本编程语言、Dreamweaver、Fireworks、Flash、Photoshop等相关知识,全面介绍WEB站点设计的基本操作技术与使用技巧。

2、课程的任务与要求通过本课程的学习,要求学生掌握静态网页的制作方法、学会HTML语言、熟悉站点的上传与维护并能够独立解决网页编辑中遇到的一般问题,能熟练运用Dreamweaver进行网站的导入、规划、管理、发布的相关技术及网页制作的操作技能;能熟练掌握JAVASCRIPT脚本编程语言的基本语法知识,能实现网页的交互与特殊效果;能维护、管理与设计WEB应用程序;能独立设计小型WEB站点。

3、教学中应注意的问题在教学过程中要注重Dreamweaver、Firework或Photoshop与Flash软件的主要功能,其中Dreamweaver主要就是完成网页设计与网站管理;Firework或Photoshop主要进行图像的设计与编辑;Flash主要开发适应网络传输的流媒体电脑规划。

并且要培养学生综合使用这些软件的能力,注重学生动手能力的培养与上机试验。

教学过程中应该以Dreamweaver为主。

在讲授理论的同时加入具体的设计项目实验,力求达到实战的效果避免空洞的理论学习。

二、学时分配三、课程内容及要求模块一、初识网站与网页教学要求:1、使学生对网站及网页有一定的认识,激发学生学习网页设计的兴趣2、了解网页中的常用元素类型3、了解常用网站管理与制作软件4、了解网站建设流程5、理解HTML与CSS基本知识教学内容:1-1 认识网站与网页1-2 网页中的元素类型1-3 常用网站管理与制作软件1-4 网站建设流程1-5 HTML与CSS入门模块二、初识Dreamweaver 教学要求:1、熟悉Dreamweaver操作环境2、了解网站规划与管理3、掌握页面属性的设置教学内容:1-1 熟悉Dreamweaver操作环境1-2 网站规划与管理1-3 设置页面属性模块三、网页布局方法教学要求:1、掌握使用表格来布局来定位网页2、掌握使用使用框架布局网页教学内容:1-1 使用表格布局网页1-2 使用框架布局网页模块四、编辑网页元素教学要求:1、掌握文本输入与编辑2、掌握在网页使用图像3、掌握使用Flash动画4、了解使用其她媒体元素教学内容:1-1 文本输入与编辑1-2 使用图像1-3 使用Flash动画1-4 使用其她媒体元素模块五、使用超链接教学要求:1、掌握超链接的设置2、掌握如何管理超链接教学内容:1-1 设置超链接1-2 管理超链接模块六、HTML样式与CSS样式教学要求:1、掌握编辑基本HTML代码标记2、掌握创建与使用CSS样式表教学内容:1-1 编辑HTML代码1-2 创建与使用CSS样式表模块七、Dreamweaver高级应用教学要求:1、熟悉行为的使用2、掌握时间轴的基本应用3、掌握表单及其应用4、了解模板与库5、熟练掌握CSS样式的应用教学内容:1-1 使用行为1-2 时间轴的应用1-3 表单及其应用1-4 模板与库1-5 CSS样式的应用模块八、网站的优化教学要求:1、掌握网站的基本优化技巧2、掌握页面的美化与工具的使用3、掌握站点的整体优化教学内容:1-1 页面的美化1-3 站点的优化模块九、站点的发布教学要求:1、掌握发站点发布前的工作与程序2、掌握发布站点与站点的后续维护与更新教学内容:1-1 发布前的工作1-2 发布站点与站点的后续维护与更新。

网页设计与制作HTMLCSS教学大纲

网页设计与制作HTMLCSS教学大纲

《网页设计与制作(HTML+CSS)》课程教学大纲(课程英文名称)课程编号:2学分:5学分学时:64学时(其中:讲课学时:45 上机学时:19 )先修课程:计算机基础、计算机网络、计算机应用后续课程:UI设计javascript网页特效适用专业:信息及其计算机相关专业开课部门:计算机系一、课程的性质与目标《网页设计与制作(HTML+CSS)》是面向计算机相关专业的一门专业基础课,涉及计算机基础、互联网等内容,通过本课程的学习,学生能够了解网页web发展历史及其未来方向,熟悉网页设计流程、掌握网络中常见的网页布局效果、学会制作各种企业,门户,电商类网站。

二、课程的主要内容及基本要求第一章HTML与CSS网页设计概述(4学时)[知识点]➢Web的基础知识➢HTMLl简介➢CSS简介➢常用浏览器介绍➢Dreamweaver 工具使用➢利用Dreamweaver创建第一个页面[重点]➢HTML简介➢Dreamweaver工具使用[难点]➢Dreamweaver工具创建第一个页面[基本要求]➢了解HTML版本的发展历程➢掌握Dreamweaver工具的使用,能够使用Dreamweaver创建一个包含html结构和CSS样式的简单网页。

第二章 HTML入门(6学时)[知识点]➢HTML基本语法结构➢HTML 标记属性➢HTML 常用文本控制标记➢HTML 文本格式化标记➢HTML 图像标记➢HTML 相对路径和绝对路径➢HTML 图文混排技巧[重点]➢HTML基本语法结构➢HTML 常用文本控制标记➢HTML 图像标记➢HTML 相对路径和绝对路径[难点]➢HTML 标记属性的使用➢HTML 相对路径和绝对路径[基本要求]➢掌握HTML基本语法结构➢掌握HTML中常用的文本标记➢区分什么是相对路径和绝对路径➢掌握HTML图像标记的使用➢掌握图片混排常用技巧[阶段案例]使用HTML文本控制标记、HTML图像标记及相关标记的属性实现网页中常见的图文混排效果,如下图所示。

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

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

《网页设计与制作》课程教学大纲一、课程的性质和任务课程性质:《网页设计与制作》是现代汽车技术/计算机及应用专业的一门选修课程,是学习网页设计与制作的一门重要课程。

主要任务:向学生全面介绍与网页设计制作有关的知识,向学生阐明Web 基本工作机制,并使学生具有解决一般网页制作问题的能力。

与此同时,通过对Web页制作技术和制作工具的学习,使学生对于网页设计中所涉及的相关知识有一个全面的了解。

掌握通过HTML语言、FrontPage、Flash工具软件设计制作一个网站的方法与技巧。

基本要求:1、了解Internet的过去、现在和将来及有关WWW、HTTP、HTML、CSS的定义,概念和作用;2、了解图像的几种格式:GIF、JPEG、PNG和矢量图格式,它们各自的特点和差别;3、理解服务器、客户端、浏览器的概念和作用;4、深入理解HTML语言中的各种文本格式、字符格式、段落设置、列表、标记、表格、框架、表单的作用;5、理解客户端脚本程序的工作方式;6、熟练掌握使用绝对和相对URL,创建超链接,图象链接,图象映射的建立方法;7、会使用FrontPage2000、DreamWeaver等网页制作工具制作网页;二、课时分配课程教学总学时数为42学时,具体分配见课时分配表。

课时分配表三、本课程的教学内容第一章 HTML概述什么是HTML;什么是WEB;HTML的定义;基本的HTML语法;标记符的属性; WEB页的基本结构;HTML标记;首部标记;正文标记符;添加注释;显示特殊字符。

第二章页面背景与颜色控制页面背景;背景颜色;背景图案;字符和链接的颜色。

第三章文本格式字符格式;物理字符样式;逻辑字符样式;段落格式;分段与换行;段落对齐。

第四章列表格式有序列表;OL标记符和LI标记符;有序列表的嵌套;无序列表;定义无序列表;混合嵌套列表;定义列表;创建定义列表;使用定义列表缩排文档第五章使用图象WEB页图象格式;在网页中插入图象;IMG标记符及其基本属性;图象布局;使用GIF动画;创建GIF动画;注意事项;使用网页图象的要点。

网页设计与制作(HTML5 CSS3 JavaScript)教学大纲

网页设计与制作(HTML5 CSS3 JavaScript)教学大纲

《网页设计基础》课程编号:...课程名称:网页设计基础学分:3 学时48 (其中实验学时:16)先修课程:计算机基础B一、目的与任务本课程是本科文科各专业的一门必修的计算机基础课,是计算机基础教学中的重要环节。

本课程的主要任务是使学生掌握在信息社会中必要的计算机应用技能——网页设计与制作,培养学生的计算机文化意识。

课程将讲授HTML、CSS、JavaScript等基本技术,并通过大量实验使学生掌握网页设计与制作技能,为培养理论与实践相结合的、全面发展的计算机应用高级人才打下基础。

二、教学内容与学时分配理论教学部分(32学时)第1章HTML5基础(2学时)浏览器、服务器和URL创建网站的基本步骤HTML的概念和原理使用基本HTML标记符(<html> <head> <title> <body> <p>)创建简单网页第2章文本格式与超链接(4学时)段落格式字体格式列表格式创建超链接第3章CSS入门(4学时)CSS样式定义CSS的属性单位3种CSS样式表5种CSS选择器3种常见CSS属性第4章图像与多媒体(2学时)网页图像基础图像处理基本操作图像标记符img使用多媒体对象第5章表格与表单(2学时)创建表格表格的属性设置创建表单创建表单控件第6章CSS3进阶(6学时)CSS3高级选择器CSS3布局CSS3高级属性CSS3样式的优先级第7章JavaScript与前端开发(3学时)使用客户端脚本JavaScript编程*前端开发技术第8章网页设计基础(3学时)设计与认知网站设计的原则设计适于导航的网页设计网站导航设计版式第9章使用Dreamweaver(3学时)使用本地站点编辑网页使用CSS样式高级功能第10章综合项目实践(3学时)网站开发项目管理综合实例实验教学部分(16学时)实验0:确定网站主题(搜集资料)实验1:制作纯文本网站(2学时)实验2:添加CSS(2学时)实验3:加入图片与多媒体(2学时)实验4:表格与表单(2学时)实验5:CSS布局(2学时)实验6:综合项目实践(6学时)三、考核与成绩评定采用日常性考核(大作业)和期末终结性考核相结合的方式。

(完整版)《网页设计与制作》课程教学大纲.docx

(完整版)《网页设计与制作》课程教学大纲.docx

(完整版)《网页设计与制作》课程教学大纲.docx《网页设计与制作》课程教学大纲课程名称:网页设计与制作学分及学时: 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 页面开发的发展方向,兼顾各行各业的需求变化,力争面向社会,服务于企业“互联网+”战略。

网页设计与制作教学大纲

网页设计与制作教学大纲

《网页设计与制作》课程教学大纲一、说明(一)课程定义:《网页设计与制作》课程是网络与新媒体专业的一门核心课程,也是其他计算机专业的普及型课程。

内容主要涵盖了HTML语言的语法规则及文字、链接、列表、表格、表单、图像、多媒体、框架元素标记及属性,、JavaScript脚本编程语言、Dreamweaver、Fireworks、Flash、Photoshop 等相关知识,全面介绍WEB站点设计的基本操作技术和使用技巧。

(二)编写依据:本课程根据武汉体育学院体育科技学院人文社科系网络与新媒体专业人才培养方案编写。

(三)目的任务:通过本课程的学习,要求学生掌握静态网页的制作方法、学会HTML语言、熟悉站点的上传和维护并能够独立解决网页编辑中遇到的一般问题,能熟练运用Dreamweaver进行网站的导入、规划、管理、发布的相关技术及网页制作的操作技能;能熟练掌握JAVASCRIPT脚本编程语言的基本语法知识,能实现网页的交互和特殊效果;能维护、管理和设计WEB应用程序;能独立设计小型WEB站点。

(四)学时数与学分数:本课程教学总学时为72课时,4学分,理论48学时,实践/实验24学时。

具体学时分配参照下表。

(五)适用对象:网络与新媒体专业。

(六)课程编码:二、教学内容与学时分配三、教学内容与知识点第一章初识网站和网页第一节网站和网页知识点:网站和网页的概念。

第二节网页中的元素类型知识点:行元素、块元素。

第三节常用网站管理制作软件知识点: Dreamweaver、flash。

第四节网站建设流程知识点:网站建设流程。

第五节 Html与CSS入门知识点:html概念、css概念。

第二章初识Dreamweaver第一节熟悉Dreamweaver操作环境知识点:Dreamweaver操作环境。

第二节网站规划与管理知识点:网站规划原则、管理方法。

第三章网页布局方法第一节使用表格布局网页知识点:表格布局方法。

第二节使用框架布局网页知识点:框架布局网页方法。

(完整版)网页设计与制作教学大纲

(完整版)网页设计与制作教学大纲

《网页设计与制作》课程教学大纲课程编号:课程名称:网页设计与制作课程类型:专业基础课总学时:64 讲课学时:32 实验学时:32适用班级:一、课程性质、目的和任务:(加粗,以下同)1、目的本课程要求学生掌握基本的HTML语言。

学会使用Dreamweaver开发工具进行网页设计。

这是一门重在实践的科目,因此需要学生多上机、多进行实际操作,把老师所教授的各种网页制作、版面设计以及程序熟练制作或调试出来,并且能够在此基础上有所创造、有更进一步的发挥。

2、任务本课程的主要任务是介绍利用Dreamweaver开发工具进行网页设计,包括新建、编辑和设置一个Web站点;如何对页面属性进行基本的设置,如何设置、编辑CSS层叠式样式表;如何排版文字、表格和层;如何进行基本的图像处理;建立框架;模板和库的使用和编辑;网站的发布与维护等基本知识与应用。

目的是通过本课程的学习,培养学生的实际动手能力和计算机的操作能力,能够运用所学的知识进行网页设计。

二、教学基本要求:(分三级:掌握、理解、了解)1.掌握:要求学生能够全面掌握所学内容,并能够用其分析、应用与Dreamweaver网页设计相关的问题,能够举一反三。

2.理解:要求学生能够较好地理解与Dreamweaver网页设计相关的问题,并且能够进行简单分析和判断。

3.了解:要求学生能够一般地了解的所学内容。

三、教学内容及要求:第1章Dreamweaver基础教学内容:Dreamweaver 的历史和简介Dreamweaver 的安装过程Dreamweaver 的全新界面改进的设计与开发环境主菜单介绍对象控制面板介绍教学要求:掌握:Dreamweaver的基本特点、新增功能及界面组成。

基本操作,如安装、新建、打开、导入、保存、关闭等。

理解:新增功能、界面组成的优点。

了解:Dreamweaver可以为我们做些什么。

第2章网页设计语言基础教学内容:HTML及XHTML语言介绍常用的网页语法标记教学要求:理解:HTML及XHTML语言介绍,常用的网页语法标记第3章文本和图像处理教学内容:文本属性面板编辑文本和插入对象设置文本的格式编号与项目符号在网页中插入图像图像的应用教学要求:掌握:设置文本属性和格式;编号与项目符号的使用;插入、编辑和排版图像。

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

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

学习领域课程标准目录一、课程性质 (1)二、课程目标 (1)(一)典型工作任务 (1)(二)专业能力与知识目标 (2)三、课程内容安排、课程任务 (10)(一)课程结构、课程任务、课程内容 (10)(二)实践教学体系 (17)(三)认证培训 (18)四、教学方法、教学活动与作业 (18)(一)课程范型 (18)(二)问题中心课程 (18)(三)项目中心课程 (18)(四)证书培训中心课程 (20)(五)主要教学方法 (20)五、专业素质和职业素养教育 (21)六、课时安排 (21)(一)考核评价模式 (22)(二)考核评价类型与分值 (24)(三)考核评分点及评分标准 (25)七、教材及教参 (25)(一)教材 (25)(二)教参 (26)一、课程性质本课程是为本院计算机网络技术专业的学生所开设的一门专业技术课程,本课程的目的是让学生在已学完计算机基础、计算机网络等课程的基础上进一步掌握网页设计的基本技能。

为今后网站艺术设计、设计动态网页奠定基础。

对今后从事网页设计的学生,为深入掌握DIV+CSS 奠定基础。

职业面向:从事网页设计与制作、网页美工职业拓展:网站建设、搜索引擎优化二、课程目标通过本课程的学习,使学生具备手工编写HTML 代码的能力,能够使用Dreamweaver及photoshop工具设计一个完整的静态网站的能力并具有建立站点、管理站点、测试网站与发布网站的能力,具有良好的团队合作精神、获取知识能力、网页设计创意思维能力、色彩感悟能力等素质,达到职业技能鉴定网页制作(Dreamweaver 平台)中高级水平。

(一)典型工作任务根据“计算机网络技术专业培养方案”和职业岗位工作任务分析,确定《网页设计与制作》学习领域,如表1 所示。

表 1 学习领域设计表(二)专业能力与知识目标根据表1 学习领域设计表,确定专业能力与知识目标见如下表2 所示。

表 2 专业能力与知识目标(三)学习情境按照项目任务的编排方式,整合专业能力与知识目标对学习领域的教学内容进行序化,设计出如下图所示8 个网页设计与制作学习情境:(四)专业素质目标1.具有一定策划能力2.具有一定想象力3.色彩感悟能力4.结构布局能力(五)综合能力和职业素养培养目标1.团队协作精神2.自主学习能力3.沟通能力4.表达能力5.获取知识能力6.创新能力7.乐观精神8.敬业精神9.感悟能力10.知识应用能力11.自我发展能力12.责任感13.效率观念三、课程内容安排、课程任务(一)课程结构、课程任务、课程内容分析课程实施的内、外部环境如表3 所示,结合课程目标确定课程结构、课程任务、课程内容,课程分为八个学习情境,“东营培训网”网站制作项目分解到相应的教学单元,如表4 所示。

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

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

《网页设计及制作》教学大纲课程编号:14411400课程总学时:48周学时数:3学分:3课程类型:专业必修课开课(系)院:教育学院执笔人:朱玲审核人:刘梅一、课程简介《网页设计及制作》是一门综合性、应用性很强的课程,是教育技术学专业的一门专业必修课程。

通过学习本课程,能利用Dreamweaver 8来开发出有实用价值的网站来。

熟练掌握Dreamweaver 8的基本界面环境和HTML语法,了解当前常用数据库的基础知识,能利用数据库来为网站服务。

1 / 54本课程以《Dreamweaver 8中文版网页制作基础》作为教材,该教材采用项目教学法。

项目教学法”是通过实施一个完整的项目而进行的教学活动,其目的是在课堂教学中把理论及实践教学有机地结合起来,充分发掘学生的创造潜能,提高学生解决实际问题的综合能力。

这也充分体现了我校的培养应用型人才的路线。

二、教学目的及要求1、教学目的本课程开设的主要目的,是为了适应web技术的飞速发展,为学生今后在学习、工作中建立网站及网页制作打下基础。

通过本课程的学习,使学生了解如何规划并建立站点,掌握制作网页的基础知识,能熟练利用Dreamweaver 8提供的强大的功能制作出精美的网站。

2、教学要求在本课程的学习中,要求学生能够熟练使用Dreamweaver 8操作环境,掌握HTML的语法规则,并能够利用Dreamweaver 8的强大功能制做出精美的网页,同时能独立创建并管理网站。

三、教学内容及学时安排第一章Dreamweaver 8概论2 / 54[教学目的及要求]1.认识Dreamweaver 82.了解Dreamweaver 8的用途及新增功能3.熟悉Dreamweaver 8的工作界面4.熟悉Dreamweaver 8的一些简单的设置[重点及难点]1. Dreamweaver 8的工作界面2.自定义工作环境3.选择视图方式[教学时数] 3学时[教学方法及手段] 讲授法及多媒体教学相结合[主要内容]一、什么是Dreamweaver3 / 54二、新增功能三、Dreamweaver 8的工作界面(一)选择工作界面(二)界面组成四、自定义工作环境(一)显示/隐藏面板和工具栏(二)更改“插入”工具栏的外观(三)自由组合面板(四)调整文档窗口大小五、选择视图方式(一)代码视图(二)设计视图(三)代码和设计视图4 / 54[实验实践教学环节]实验项目:熟悉Dreamweaver8操作环境实验课时:2学时[课堂训练、作业思考题]1.如何使一个控制面板成为一个独立的面板?2.如何将文档窗口调整为640×480像素大小?第二章网页及网站的基本知识[教学目的及要求]1.了解网页的设计及布局原则2.明确网站的策划及创建原则3.知道网站的开发流程[重点及难点]5 / 541.网页的设计及布局原则2.网站的策划及创建原则3.网站的开发流程[教学时数] 3学时[教学方法及手段] 讲授法及多媒体教学相结合[主要内容]一、网页设计和布局原则(一)网页主题网页主题时应该遵循以下原则:(二)网页命名和标志(三)网页的色彩(四)网页的文字(五)网页中的表格(六)网页版面和布局6 / 54二、策划及创建原则(一)什么是网站(二)网站的目标定位(三)网站的风格(四)网站的CI形象(五)网站的栏目和板块(六)网站的目录结构三、网站的开发流程:[实验实践教学环节]无[课堂训练、作业思考题]1.简述网站开发需要经过的几个主要阶段。

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

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

《网页设计与制作》课程大纲《网页设计与制作》课程教学大纲适用专业:计算机网络技术学时:64学时一、编写说明(一)本课程的性质、目的和任务《网页设计与制作》是计算机网络技术专业的一门专业基础课。

通过本课程的学习,使学生能够掌握网页设计制作的基本知识和技巧,同时熟悉网站建设的基本知识,达到能独立构建简单网站或通过协作构建较复杂网站并设计相关网页的水平。

在完成基本知识教学的同时,还要通过实践环节,强化对学生动手能力的培养与训练。

(二)课程教学的基本要求通过本课程的学习,要求学生掌握HTML语言的文档结构和基本标签使用,能综合应用Dreamweaver CS6软件、HTML和CSS技术制作网页;掌握规划、开发、发布和管理静态网站的专业知识和技能;能独立构建简单网站或通过协作方式完成较复杂网站的建设,培养学生将理论知识应用于实践并解决实际问题的能力,为今后的进一步学习打下坚实基础。

(三)实践环节(四)本课程与其它课程的关系先修课程:计算机应用基础、图像处理软件PhotoShop后续课程:动态网站开发、中小型网站设计与开发等(五)教学时数分配表(六)考核方式与要求1.该课程是考查课2.考核形式:上机操作3.成绩的计算方法:①平时成绩:40%(主要评估学生的现实表现)②试卷成绩:60%(七)教材与主要参考书1.教材:《ADOBE DREAMWEAVER CS6标准培训教材》,ACAA专家委员会 DDC传媒编著,人民邮电出版社,2013年1月2.主要参考书:《中文版Dreamweaver CS6基础培训教程》,数字艺术教育研究室编著,人民邮电出版社,2014年6月二、课程各章教学内容纲要第1章Dreamweaver CS6基础知识1.教学基本要求(1)了解Dreamweaver CS6的工作界面及新功能2.具体教学内容(1)Dreamweaver CS6 简介△(2)Dreamweaver CS6 的工作界面(3)Dreamweaver CS6 的新功能第2章文本的处理与控制1.教学基本要求(1)理解HTML文件的基本结构(2)掌握文本的基本设置和项目列表的使用方法2.具体教学内容(1)设置网页标题(2)HTML文件的基本结构△(3)文本的基本设置(4)项目列表○(5)使用外部文本第3章建立超级链接1.教学基本要求(1)理解超级链接的概念(2)掌握为文本添加链接的方法,以及制作电子邮件链接,添加锚链接的方法2.具体教学内容(1)超级链接的概念△(2)为文本添加链接(3)检查链接△(4)制作电子邮件链接(5)下载链接△(6)添加锚链接第4章在网页中使用图像1.教学基本要求(1)掌握在Dreamweaver中插入图片以及处理图片的方法(2)掌握添加背景图像和使用Photoshop文件的方法2.具体教学内容(1)网络图形格式(2)在Dreamweaver中插入图片△(3)在Dreamweaver中处理图片(4)使用热区(5)制作鼠标指针经过图像(6)插入图像占位符△(7)添加背景图像○(8)使用Photoshop文件第5章在网页中使用多媒体1.教学基本要求(1)掌握在网页中使用Flash的方法(2)熟悉在网页中添加其他插件的方法2.具体教学内容△(1)在网页中使用Flash(2)在网页中添加其他插件第6章使用表格布局页面1.教学基本要求(1)理解页面布局及表格的相关知识(2)掌握表格的使用方法和表格式数据的处理方法2.具体教学内容(1)页面的布局(2)认识表格△(3)使用表格(4)格式化表格△(5)导入表格式数据△(6)导出表格式数据○(7)扩展表格模式和标准模式第7章使用AP Div布局页面1.教学基本要求(1)掌握AP Div的创建方法以及基本操作(2)掌握AP Div的属性设置方法和使用“AP 元素”面板的方法(3)熟悉AP Div的常见使用技巧2.具体教学内容(1)创建AP Div△(2)AP Div的操作△(3)设置AP Div的属性(4)使用“AP 元素”面板○(5)AP Div的使用技巧第8章使用层叠样式表1.教学基本要求(1)掌握层叠样式表(CSS)的创建和CSS样式的使用方法(2)掌握Div标签的应用方法2.具体教学内容(1)层叠样式表基础(2)在Dreamweaver中创建层叠样式表△○(3)使用CSS 样式(4)ID(5)标签(6)复合内容△(7)使用Div标签○(8)CSS布局块可视化第9章使用流体网格布局1.教学基本要求(1)掌握流体网格布局创建的方法和使用流体网格布局网页的方法(2)熟悉使用媒体查询重置样式的方法2.具体教学内容(1)流体网格布局简介△○(2)使用流体网格布局(3)使用媒体查询重置样式第10章使用模板和库1.教学基本要求(1)掌握模板的创建、编辑和管理方法以及软件自带模板的使用方法(2)熟悉库的创建与管理方法2.具体教学内容△(1)使用软件自身提供的模板△(2)创建自定义模板(3)创建模板的可编辑区域(4)使用可选区域(5)使用重复区域(6)应用模板(7)编辑和更新模板(8)在基于模板的文档中编辑内容(9)管理模板○(10)库项目第11章使用行为1.教学基本要求(1)熟悉行为的应用、修改和设置方法2.具体教学内容(1)什么是行为△(2)应用行为(3)修改行为○(4)设置行为第12章使用表单1.教学基本要求(1)掌握表单的使用方法(2)熟悉spry构件的相关知识2.具体教学内容(1)表单的工作模式(2)在页面中插入表单△○(3)插入表单对象并设置其属性○(4)Spry构件第13章网站的创建与管理1.教学基本要求(1)掌握网站的创建与管理方法2.具体教学内容○(1)规划网站(2)使用“资源”面板△(3)创建Dreamweaver本地站点△(4)管理站点信息(5)创建和管理文件注:△-表示重点○-表示难点编写人:审核人:。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

《网页设计与制作(HTML+CSS)》课程教学大纲
(课程英文名称)
课程编号:201409210011
学分:5学分
学时:64学时(其中:讲课学时:45 上机学时:19 )
先修课程:计算机基础、计算机网络、计算机应用
后续课程:UI设计javascript网页特效
适用专业:信息及其计算机相关专业
开课部门:计算机系
一、课程的性质与目标
《网页设计与制作(HTML+CSS)》是面向计算机相关专业的一门专业基础课,涉及计算机基础、互联网等内容,通过本课程的学习,学生能够了解网页web发展历史及其未来方向,熟悉网页设计流程、掌握网络中常见的网页布局效果、学会制作各种企业,门户,电商类网站。

二、课程的主要内容及基本要求
第一章HTML与CSS网页设计概述(4学时)
[知识点]
➢Web的基础知识
➢HTMLl简介
➢CSS简介
➢常用浏览器介绍
➢Dreamweaver 工具使用
➢利用Dreamweaver创建第一个页面
[重点]
➢HTML简介
➢Dreamweaver工具使用
[难点]
➢Dreamweaver工具创建第一个页面
[基本要求]
➢了解HTML版本的发展历程
➢掌握Dreamweaver工具的使用,能够使用Dreamweaver创建一个包含html结构和CSS样式的简单网页。

第二章 HTML入门(6学时)
[知识点]
➢HTML基本语法结构
➢HTML 标记属性
➢HTML 常用文本控制标记
➢HTML 文本格式化标记
➢HTML 图像标记
➢HTML 相对路径和绝对路径
➢HTML 图文混排技巧
[重点]
➢HTML基本语法结构
➢HTML 常用文本控制标记
➢HTML 图像标记
➢HTML 相对路径和绝对路径
[难点]
➢HTML 标记属性的使用
➢HTML 相对路径和绝对路径
[基本要求]
➢掌握HTML基本语法结构
➢掌握HTML中常用的文本标记
➢区分什么是相对路径和绝对路径
➢掌握HTML图像标记的使用
➢掌握图片混排常用技巧
[阶段案例]
使用HTML文本控制标记、HTML图像标记及相关标记的属性实现网页中
常见的图文混排效果,如下图所示。

第三章 CSS 入门(8学时)
[知识点]
➢CSS入门知识
➢CSS样式规则
➢CSS样式表书写位置
➢CSS基础选择器
➢CSS字体样式属性
➢CSS样式外观属性
➢CSS复合选择器
➢CSS层叠性和优先级
[重点]
➢CSS样式规则
➢CSS基础和复合选择器
➢CSS层叠性和优先级
[难点]
➢CSS复合选择器
➢CSS优先级
[基本要求]
➢理解CSS语法结构
➢了解CSS在网页中的重要性
➢熟悉CSS书写的位置
➢掌握CSS基础和复合选择器
➢掌握CSS层叠性和优先级
[阶段案例]
通过CSS文本样式属性控制网页中的文本,制作网页中常见的新闻页面,效果如下图所示。

第四章盒子模型(6学时)
[知识点]
➢盒子模型理论知识
➢CSS盒子模型属性
➢元素类型的分类
➢元素类型的相互转换
➢盒子外边距合并问题
[重点]
➢盒子模型属性
➢元素类型分类
➢元素类型相互转换
[难点]
➢盒子模型复合属性
➢盒子模型总的宽度和高度
➢元素类型及其转换
[基本要求]
➢理解盒子模型
➢掌握盒子模型属性
➢掌握盒子模型中复合属性的写法
➢掌握元素类型及其转换方法
[阶段案例]
综合运用盒子模型的相关属性,制作网页中常见的盒子效果,如下图所示。

第五章列表与超链接(4学时)
[知识点]
➢有序列表
➢无序列表
➢自定义列表
➢CSS控制列表样式
➢超链接
➢锚点链接
➢CSS控制链接样式
[重点]
➢无序列表
➢自定义列表
➢CSS控制列表样式
[难点]
➢CSS控制列表样式
[基本要求]
➢掌握列表的三种分类
➢熟悉列表的嵌套
➢熟练掌握CSS控制列表样式
➢掌握链接标记的使用
➢掌握结构与样式相分离的写法
[阶段案例]
使用列表与超链接标记组织页面,并通过CSS控制列表与超链接的样式实现网页中常见的新闻列表效果,如下图所示。

新闻列表效果展示鼠标以上链接文本效果
第六章表格与表单(4学时)
[知识点]
➢表格标记
➢表格结构
➢CSS控制表格
➢表单标签
➢表单控件
➢CSS控制表单
[重点]
➢表格标签
➢CSS控制表格和表单
➢表单标签
[难点]
➢表单标签
➢CSS控制表单
[基本要求]
➢掌握表格标记的使用
➢了解表格结构
➢掌握表单标记的使用
➢掌握CSS控制表单标记
[阶段案例]
使用表格与表单组织页面,并通过CSS控制表格与表单的显示样式,制作网页中常见的注册界面,效果如下图所示。

第七章浮动与定位(8学时)
[知识点]
➢元素的浮动
➢清除浮动
➢Overflow属性
➢元素的定位
➢z-index属性
[重点]
➢元素浮动
➢元素定位
[难点]
➢清除浮动
➢元素定位的分类
[基本要求]
➢掌握元素浮动
➢熟悉清除浮动的方法
➢掌握元素定位及其分类
➢熟悉z-index设置层的叠放次序
[阶段案例]
综合运用元素的浮动与定位,制作传智播客设计学院首页banner,效果如下图所示。

第八章 CSS高级技巧(6学时)
[知识点]
➢CSS精灵技术
➢CSS滑动门技术
➢margin负值的应用
[重点]
➢CSS精灵技术
➢CSS滑动门技术
➢margin负值的应用
[难点]
➢CSS精灵原理分析
➢CSS滑动门原理分析与切图
➢运用margin负值综合运用
[基本要求]
➢掌握精灵图的制作
➢掌握利用CSS对精灵图片进行背景设置
➢掌握常见滑动门布局
➢掌握利用margin负值进行布局技巧
[案例实战1]
使用CSS精灵,制作精品课程模块,效果如下图所示。

[案例实战2]
使用CSS滑动门,制作梯形网站导航,效果如下图所示。

[案例实战3]
应用margin的负值,制作压线效果,如下图所示。

第九章 CSS布局与浏览器兼容性(6学时)
[知识点]
➢常见CSS网页布局
➢通栏布局
➢CSS hack 分类
➢IE条件注释
➢常见IE6 BUG
➢盒子外边距合并
[重点]
➢通栏布局
➢CSS hack
➢常见IE6 BUG
[难点]
➢CSS hack
[基本要求]
➢熟悉网页常见的布局
➢掌握网页通栏布局技巧
➢掌握 CSS hack
➢熟悉 IE6 下常见的BUG
第十章实战开发(上)—传智播客设计学院首页面(6学时)
[知识点]
➢建立站点
➢页面分析
➢首页切图
➢制作头部
➢制作banner
➢制作主体
➢制作底部版权
[重点]
➢制作页面首页
[难点]
➢制作页面首页
[基本要求]
➢了解一个网站制作流程
➢熟悉根据效果图分析页面布局
➢掌握切图技巧
➢掌握首页布局
[实战开发]
综合运用HTML与CSS的基础知识,制作传智播客设计学院首页,效果如下图所示。

第十一章实战开发(下)—传智播客设计学院子页面(6学时)
[知识点]
➢利用Dreamweaver制作模板文件
➢使用模板文件
➢引用模板文件
➢利用模板文件制作列表文件
[重点]
➢利用Dreamweaver制作模板文件
➢利用模板文件生成列表页面
[难点]
➢利用Dreamweaver制作模板文件
[基本要求]
➢掌握利用Dreamweaver制作模板文件
➢熟悉模板文件引用
➢掌握利用模板文件生成其他页面
[实战开发]
综合运用HTML与CSS的基础知识,制作关于我们页面、课程介绍页面、课程介绍详情页面,效果图分别如下。

关于我们页面效果图
课程介绍页面效果图
课程介绍详情页面效果图
三、学时分配
四、考核模式与成绩评定办法
本课程为考试课程,期末考试采用百分制的闭卷考试模式。

学生的考试成绩由平时成绩(30%)和期末考试(70%)组成,其中,平时成绩包括出勤(5%)、作业(5%)、实验和上机成绩(20%)。

五、选用教材和主要参考书
本大纲是根据教材《网页设计与制作(HTML+CSS)》所设计的。

六、大纲说明
本课程的授课模式为:课堂授课+上机,其中,课堂主要采用多媒体的方式进行授课,并且会通过测试题阶段测试学生的掌握程度;上机主要是编写程序,。

相关文档
最新文档