【网页设计】
【Webpage Design】
一、基本信息
课程代码:【2050101】
课程学分:【4】
面向专业:【传播专业】
课程性质:【院级必修课,“理实一体化”】
开课院系:信息技术学院 数字媒体技术系
使用教材:主教材【网页制作综合技术教程温谦赵伟等编著人民邮电出版社第1版2009.5】
辅助教材【CSS网页设计标准教程温谦人民邮电出版社2009.5 第1版】
参考教材【CSS设计彻底研究温谦编著人民邮电出版社第1版2010.7】
注:如课程需学生阅读参考文献或查阅网上资料,应列出参考文献【文献名作者刊物名页次】,所用搜索引擎及检索关键词。
先修课程:【计算机导论2050048(2)】
二、课程简介(必填项)
本课程是传播专业的一门专业课程,总学时为64学时,该课程是一门集技术应用和实践操作为一体的综合性课程. 通过本课程的学习,使学生掌握网站建设基础知识,包括XHTML语言的使用、网页设计工具Dreamweaver、photoshop (或Fireworks)、Flash的使用方法和综合应用技巧,可以使学生对于网页设计制作和网站开发的相关知识有一个全面的了解,并通过大量的实践,培养学生的实际应用技能,使学生具备运用主流技术建立静态网站的能力。
三、选课建议(必填项)
该课程适合传播专业的学生在第6学期进行,学习基础:修完计算机基础相关课程
四、课程与培养学生能力的关联性(必填项)
自主学习 | 表达沟通 | 专业能力 | 尽责抗压 | 协同创新 | 服务关爱 | 信息应用 | 国际视野 | ||||
讲故事 | 视觉化表达 | 使用新工具 | 基于用户体验与营销 | 人文素养 | |||||||
| | | | | |
此处简要写明学生通过本课程的学习所要达到的业务目标,包括知识目标、能力目标和情感目标。
通过本课程的学习,使学生知道相关企业网页设计基本开发流程;掌握网页设计的基本知识、相关原理; 掌握网页设计与制作的应用技术、HTTP、WWW、URL、网页、网站等基本概念,掌握Xhtml标记语言的基本结构和使用方法、Css样式语言的结构和使用方法;运用Dreamweaver、Flash、Photoshop等网页设计软件进行网页制作、图形处理、动画设计,独立完成静态网站建设;通过综合案例的制作培养学生协同创新能力、通过各种渠道获取相关信息自主学习的能力。
六、课程内容(必填项)
此处分章或分单元、模块列出教学的知识点和能力要求。用布鲁姆认知能力的6种层次:“知道”、“理解”、“运用”、“分析”、“综合”、“评价”来表达对学生学习要求上的差异。必要时用文字说明教学的难点所在。
第1章 网页设计基础知识
通过本章学习,使学生知道网站、网页、主页、HTTP、WWW、URL等的基本概念、常见的网页制作软件、网站的设计流程、网页布局的步骤、常见的网页布局以及技术;理解服务器、客户端、浏览器的概念和作用;知道建立网页标准的目的和优点、网页标准的基本组成、网页的基本元素、网站的目录结构。理解常见的网页的色彩搭配原则以及方案、常用浏览器及版本。运用网页设计相关软件创建简单的页面。
本章重点和难点是网页标准的基本组成、网站的内容、目录结构、网页的色彩搭配原则
第2章 用html设置文本和图像
通过本章学习,使学生知道文本排版、文字列表、html标记与html属性、html标记和属性的局限性、特殊文字符号;理解使用图像、设置图片的尺寸、设置图像的替换文本、dreamweaver设置文本和图像、dreamweaver代码视图提高效率等;能运用基本标记制作一个简单的网页。
本章重点和难点是常用html标记与html属性的应用。
第3章 超链接
通过本章学习,使学生知道网页中超链接的概念,理解文字超链接、页面内部链接、图片超链接、电子邮件链接、链接页面的目标窗口、创建热点区域、框架之间的链接、网站的组织结构与维护;能运用不同的链接方法,实现网站中不同需求的链接。
本章重点和难点是网页中文字、图片的各种超链接方法,能熟练灵活地设置文字和图片的各种超链接。
第4章 使用表格与表单
通过本章学习,使学生知道网页中表格的作用、表单的作用、表格相关的各HTML标记;理解使用表格、使用表单、Dreamweaver中的模板;能运用表格和表单等基本标记建立一个简单的网站。
本章重点和难点是掌握用表格进行网页布局、表单的应用。
第5章 图像处理与优化导出(*)
通过本章学习,使学生知道图像文件类型、Fireworks的主要功能;掌握Fireworks的基本操作方法、能够运用Fireworks处理网页中所用的素材、进行网页布局;掌握图像的优化和导出方法,运用“图像预览”命令优化导出图像、使用“切片”导出页面设计图为网页,并在Dreamweaver中编辑。
本章重点和难点是运用Fireworks处理网页中所用的素材、进行网页布局、切图导出。
第6章 在网页中使用Flash
通过本章学习,使学生知道Dreamweaver中如何添加内置的Flash对象;知道Flash软件、在Flash中绘制图形 、Flash动画基本原理;掌握Flash软件的基本操作方法;理解并掌握在flash中创建形状补间动画、动画补间、引导线动画、遮罩动画;能够运用Flash制作网页中的Banner、导航等,并掌握网页中Flash动画的插入方法。
本章重点和难点是运用Flash制作网页中的Banner、导航。
第7章 (x)html与css概述
通过本章学习,使学生知道HTML与XHTMr的核心原理L 、(X)HTML标记和属性、(X)HTML与CSS的关系;理解并掌握构造CSS规则、基本CSS选择器;掌握HTML中使用CSS的基本方法
本章重点和难点是掌握构造CSS规则、基本CSS选择器,HTML中使用CSS。
第8章 css样式设置实践
通过本章学习,使学生理解并掌握手工编写页面、构造页面框架代码编写、标题的设置;掌握使用Dreamweaver进行CSS设置、CSS控制图片、设置整体页面;理解复合选择器、CSS的继承特性;能运用CSS样式控制网页中文本和图片的样式。
本章重点和难点是用代码手工编写页面的方法,复合选择器的相关概念和使用方法。
第9章 用css设置文本和图像
通过本章学习,使学生掌握使用CSS设置字体、加粗、装饰、水平位置、段落间距、文字与背景色等文本样式;理解并掌握用CSS设置图片边框、图片的位置、大小等图像样式;理解并掌握用CSS设置背景的颜色、背景图平铺、位置等样式;能运用CSS样式实现图文混排。
本章重点和难点是用CSS样式进行版面编排、能够用CSS制作不同的列表样式。
第10章 用css设置链接与导航菜单
通过本章学习,使学生知道超链接样式的多样性;理解并掌握鼠标指针的控制常用技术、项目列表的样式控制技术、超链接特效技术;能运用CSS样式制作简单的导航菜单。
本章重点和难点是CSS设置不同特效的超链接样式、用CSS控制鼠标指针、项目列表的不同样式。
第11章 css盒子模型
通过本章学习,使学生知道“盒子”与“模型”的相关概念、盒子之间的关系;理解并掌握盒子在标准流中的定位原则、 盒子模型概念的案例、DIV在标准流中的定位方法。
本章重点和难点是“盒子”与“模型”的相关概念、盒子之间的关系、盒子在标准流中的定位原则。
第12章 盒子的浮动与定位
通过本章学习,使学生知道盒子模型、树结构、盒子的基本结构等基本概念;理解并掌握盒子的边框的设置方法、盒子的浮动技术、盒子的相对定位与绝对定位技术、z-index空间位置的控制方法;理解并掌握盒子的display、float、position、z-index等属性在网页布局中的应用。
本章重点和难点是盒子的浮动与清除、盒子的定位、z-index空间位置、。
第13章 css+div布局方法剖析(*)
通过本章学习,使学生知道CSS排版观念、固定宽度且居中的版式、左中右版式、块的背景色问题;理解并掌握div排版与传统的表格方式排版技术;能够用DIV+CSS布局法,完成简单的网页布局。
本章重点和难点是DIV+CSS布局中的固定宽度且居中的版式、左中右版式、块的背景色等控制方法,
第14章 行为的应用(JavaScript)(*)
通过本章学习,使学生知道web标准中行为的作用和功能;理解行为的构成和含义、基本的行为操作、JavaScript在网页中的使用方法;理解并掌握Dreamweaver中添加行为的方法、JavaScript表单验证方法;能运用javaScript脚本语言创建简单的网页动画效果、验证表单。
本章重点和难点是JavaScript在网页中的使用方法、网页动画效果的制作。
第15章 综合网站设计与制作
通过本章学习,使学生知道不同浏览器的特点;理解并掌握div+css布局兼容性问题调试的基本方法、dreamweaver创建网站的基本方法;理解并掌握制作综合性网站的完整流程;综合运用相关软件设计并制作网页布局的原型线框图、商业网站的布局制作方法、网站的发布预览方法。
本章重点和难点是网站开发的完整流程、Photoshop的基本切图技巧、商业化网站的制作规划、不同浏览器的兼容性、标准化企业网站的制作过程、网站发布过程。
七、课内实验名称及基本要求(适用于课内实验)
列出课程实验的名称、学时数、实验类型(演示型、验证型、设计型、综合型)及每个实验的内容简述。
序号 | 实验名称 | 主要内容 | 实验 时数 | 实验类型 | 备注 |
1 | table与表单的应用 | 学会使用表格进行简单网页布局、能用表单制作各种信息采集页面、能正确运用常用标记。用表格布局法制作一个简单的个人网站。 | 4 | 验证型 | PC机1台;Dreamweaver CS3、photoshop cs3、flash cs3 |
2 | 多媒体元素在网页中的应用 | 掌握用相关平面软件设计制作网页,并完成效果图的切图、导出;掌握flash 动画的基本制作方法、掌握用flash为网页设计并制作Banner、导航等、掌握flash动画在网页中的插入方法。 | 4 | 设计型 | PC机1台;Dreamweaver CS3、photoshop cs3(Fireworks)、flash cs3 |
3 | 综合主题网站的制作 | 以标准化布局的商业网页为案例,全面提升多个软件综合应用能力,完成一个网页从设计到完成制作的全过程,包括构思分析、页面排版、布局、美化、发布等。 | 8 | 综合型 | PC机1台;Dreamweaver CS3、photoshop cs3、flash cs3 |
总评构成(1+X) | (1) | (X1、X2、X3……) |
评价方式 | 课堂展示 现场评估(答辩) | x1:小制作1(10%) x2:小制作2(20%) x3:课堂展示、课后作业(30%) |
1与X两项所占比例% | 40 | 60 |
“1”一般为总结性评价,“X”为过程性评价,“X”的次数一般不少于3次,无论是“1”、还是“X”,都可以是纸笔测试,也可以是表现性评价。与能力本位相适应的课程评价方式,较少采用纸笔测试,较多采用表现性评价。
常用的评价方式有:课堂展示、口头报告、论文、日志、反思、调查报告、个人项目报告、小组项目报告、实验报告、读书报告、作品(选集)、口试、课堂小测验、期终闭卷考、期终开卷考、工作现场评估、自我评估、同辈评估等等。
本大纲只对“1”的考核方式以及比例进行规定,对“X”不予规定,由任课教师自行决定X的内容、次数及比例,同一门课程由多个教师共同授课的、由课程组共同讨论决定X的内容、次数及比例。
撰写:石潇 系主任审核:矫桂娥
注:教学大纲电子版公布在本学院课程网站上,并发送到教务处存档。