前端开发设计课程教学大纲

1、前端开发设计课程教学大纲课程名称：Web前端开发设计英文名称：Web front-end development design课程编码：X3141701学 时 数：64其中实践学时数: 0 课外学时数：0学 分 数：4.0适用专业：视觉传达设计一、课程简介Web前端开发设计是视觉传达设计专业的专业课程。课程内容包括网页设计的基础知识和基本流程；网页制作软件的相关操作和网页设计的基本理论；表格、文本、图像、多媒体、链接、层、表单的创建；网页结构的搭建（HTML）和样式应用（CSS）；网页界面设计的创意方法与程序。通过Web前端开发设计课程的学习，使学生获得以用户为中心的设计思维，培养学生具备将技

2、术与艺术相结合的能力，并能够制作出具有良好用户体验的网页。二、课程目标与毕业要求关系表课程目标毕业要求（一）使学生掌握以用户为中心的设计思想；掌握网页设计的基本方法与网页的结构；掌握网页设计的配色；熟练掌握网页设计的基本程序；掌握网页设计的前期准备；熟练掌握网页设计的创造性思维及不同类型网站的设计手法。（一）支撑视觉传达设计专业毕业要求第1点，综合社会、媒介、科技、文化及环境等因素，洞察国内外设计理论前沿和研究动态，设计满足专业领域需求的项目，清晰表达设计思想，熟悉设计程序与方法，能够运用专业知识解决设计项目的策划、创意、组织及实施，并在设计各个环节中体现理性的思维方式与创新意识。（二）熟练掌

3、握Dreamweaver软件的基本操作；掌握标签、文本、超链接、列表、表格、表单的操作。掌握切图的方法；掌握CSS样式引入的三种样式；字体、文本、边框、列表、表格、图片、背景样式的设定；通过盒子模型来创建网页。（二）支撑视觉传达设计专业毕业要求第3点，能够跟随媒介与科技发展，掌握多种专业软件、信息手段，针对具体的设计对象与设计要求，分析所使用工具的优势及局限性，利用恰当的技术、资源，选用能满足特定需求的现代工具，并能够在多平台下综合运用。三、课程教学内容、基本要求、重点和难点 （一）以用户为中心的设计思想1. 教学内容以用户为中心的设计思想。2. 基本要求（1）了解：生活中的用户体验；（2）理

4、 解：用户需求层次分析；设计师的审美培养；（3）掌 握：互联网产品中的用户体验；（4）熟练掌握：专业的设计网站风格解析；网站的配色。3. 重点和难点（1）重 点：互联网产品中的用户体验；（2）难 点：网站的配色及常用网站类型色彩搭配。（二）网页界面设计1. 教学内容网页界面设计。2. 基本要求（1）了 解：草图的绘制；（2）理 解：确定网页的基本风格和规范；（3）掌 握：网页设计的程序；（4）熟 练：网页设计的基本方法；导航栏、主要内容、二级页面、banner设计。3. 重点和难点（1）重 点：导航栏、主要内容、二级页面、banner设计；（2）难 点：通过典型案例，剖析网页设计的程序与基本方

5、法。（三）dreamweawer基本标签1. 教学内容Dreamweaver基本标签。2. 基本要求（1）了 解：什么是HTML；（2）理 解：操作界面及工作区使用；标签的作用；（3）掌 握：HTML结构；站点的建立；（4）熟练掌握：head标签、title标签、meta标签、style标签、script标签、link标签、body标签、注释。 3. 重点和难点（1）重 点：标签的语法规范；相关标签的应用；（2）难 点：HTML结构；用HTML标记语言编写一个简单的网页。（四）文本与列表1. 教学内容文本与列表。2. 基本要求（1）了 解：网页中的文本类型；列表的作用；（2）理 解：水平线、空

6、格和特殊符号；（3）掌 握：标题、段落、文本标签；块元素与行内元素的特点；有序列表与无序列表；（4）熟练掌握：文本标签的多种样式设计；块元素与行内元素的区别。3. 重点和难点（1）重 点：粗体、斜体、上标、下标、下划线等文本标签的多种样式设计；（2）难 点：利用文本标签，列表标签，进行简单的页面设计。（五）表格、图片、超链接和表单1. 教学内容表格、图片、超链接和表单。2. 基本要求（1）了 解：表格的基本结构；（2）理 解：图片的格式；超链接的标签构成；form标签的作用；（3）掌 握：表格的行、列、合并；图片的标签、路径；内部链接、锚点链接；form标签属性；（4）熟练掌握：插入表格、图片

7、、建立链接、表单的方法。3. 重点和难点（1）重 点：插入表格、图片、建立链接、表单的方法；（2）难 点：利用表格、图片、超链接和表单标签，进行简单的页面设计。（六）CSS基础1. 教学内容CSS基础。2. 基本要求（1）了 解：CSS样式三种引入方式；（2）理 解：CSS选择器的类型；（3）掌 握：字体、文本、边框、列表、表格、图片、背景、超链接的样式类型；（4）熟练掌握：字体、文本、边框、列表、表格、图片、背景、超链接的标签运用；3. 重点和难点（1）重 点：字体、文本、边框、列表、表格、图片、背景、超链接的样式设计；（2）难 点：能运用相关标签设计出指定样式。（七）盒子模型1. 教学内容

8、盒子模型。2. 基本要求（1）了 解：盒子模型的作用；（2）理 解：width和height、border、padding、margin的界定；（3）掌 握：盒子模型相关标签的书写规范；（4）熟练掌握：运用盒子模型布局界面。3. 重点和难点（1）重 点：盒子模型相关标签书写规范及设定；（2）难 点：能运用盒子模型进行指定样式网页界面的布局。四、教学方式及学时分配序号主要内容主要教学方式学时分配辅导答疑比例一以用户为中心的设计思想讲授41：1二网页界面设计指导16三dreamweawer基本标签讲授4四文本与列表讲授4五表格、图片、超链接和表单讲授8六CSS基础讲授12七盒子模型及综合训练讲授1

9、6五、课程其他教学环节要求（一）资料收集：1.结合理论知识及相关的课题训练，关注公众号，收集优秀的网页设计案例；2.临摹优秀案例，理解网页布局，色彩搭配等知识。六、本课程与其他课程的联系（一）先修课程：计算机辅助设计（1）、综合构成基础、图形创意与思维、字体与版式设计、UI界面设计等。（二）后修课程：广告策划与表现、毕业设计等。七、建议教材及教学参考书目（一）教材：无。（二）参考书：1.形色:网页设计法则及实例指导 姜鹏著 人民邮电出版社 2017年 第一版；2.Web前端开发精品课HTML:CSS JavaScript基础教程 莫振杰著 人民邮电出版社 2017年 第一版； 3.形式感+:网页视觉设计创意拓展与快速表现 晋小彦著 清华大学出版社 2014年 第一