网页设计与网站建设

• 花匠小妙招
• 2024-12-03 13:42

《网页设计与网站建设》课程教学大纲

一、课程基本信息

（一）课程代码及课程名称

1.课程代码:08197780

2.课程名称（中/英文）:网页设计与网站建设/Web design and website construction

（二）课程类别及课程性质

专业任选课

（三）学时及学分:

总学时数:48；总学分数:3。

其中，讲授学时:32 ，实践（实验）学时:16。

（四）适用专业及开设学期

适用专业:计算机软件工程专业

开设学期:第5学期

（五）先修课程与后续课程

先修课程:《高级语言程序设计 》、《网页技术基础》

后续课程:《网页端应用设计与开发项目实践》、《移动端应用设计与开发项目实践》

二、课程简介

本课程介绍网页设计与网站建设的基本知识。通过本课程的学习，掌握HTML、CSS和Javascript脚本语言的基本语法，熟练使用网页常用编辑工具Dreamweaver CS6，熟悉这些基础知识在网站建设与开发中的整合应用。要求在学习本课程之后能独立进行网站前端设计、网站应用开发和网站维护。课程要重视实用性，前期讲解基本知识体系，侧重于构建版式版面，后期覆盖最新的HTML5+CSS3的相关知识，重点研究响应式跨平台网站的前端设计。

三、教学目的与基本要求

（一）该课程教学目的与专业培养要求对应关系矩阵

培养要求

课程名称

培养

要求1

培养

要求2

培养

要求3

培养

要求4

培养

要求5

培养

要求6

培养

要求7

培养

要求8

……

……

数据库原理

●

●

◎

说明:表格要清晰展示该课程与每项培养要求达成的关联度情况，关联度强的用“●”标识，关联度中等的用“◎”标识，关联度弱的用“○”标识；每门课程与4-8项（底线为总培养要求的50%）培养要求相关联。

（二）教学目的

通过本课程的学习，要求掌握HTML语言、CSS层叠样式表和Javascript语言使用，熟练使用网页常用编辑工具，掌握HTML5的画布及视频标签的使用，掌握CSS3的新增特性，能够利用各种设计软件制作出较为完整的网页，并能够结合交互设计理论和方法进行动态网页设计，要求学生在学习本课程之后能独立进行网站建立、网站应用开发和网站维护。

通过本课程的学习，应使学生达到:

第一、掌握网站建设的基本流程。

第二、掌握前端设计HTML、CSS、Javascript等技术。

第三、掌握HTML5+CSS3的相关知识，研究响应式跨平台网站的前端设计。

（三）教学要求:

第一、掌握HTML基本语法；理解表单的使用，能利用HTML和常用网页编辑工具来编写网页和建立网站；了解层叠样式表。

第二、从零开始学DreamweaverCS6、创建表格与Div的布局、制作网页框架、使用CSS修饰美化网页、使用CSS和Div布局网页、运用行为制作交互网页。

第三、掌握服务器端脚本和客户端脚本语言的概念， Javascript基本语法；熟悉脚本语言中的部分重要对象，了解如何将脚本语言和网页结合。

第四、掌握HTML5中画布元素的绘图步骤:创建、寻找、获取、绘制。能用画布元素结合Javascript绘制简单图形。

第五、掌握CSS3的新增属性使用，掌握CSS3中transform、transition、animation的基本用法。

第六、掌握Web服务器的安装和配置；理解静态网页与动态网页的概念和执行过程；了解网站的发布方法。

四、教学内容

第一章 HTML入门（共3学时）

（一）本章教学目的和要求

通过本章学习，掌握HTML基本语法、页面布局与文字标签、超链接标签与图片标签、表格标签、表单标签等

（二）本章教学重点与难点

重点: 1. 超链接里的绝对地址和相对地址

2. 页面布局与文本标签

难点:1.页面布局如何兼容不同的浏览器

2. 表单

（三）教学内容

第一节 HTML的基本语法（1学时）

一、HTML的基本构成

二、HTML元素

三、HTML常用标签

第二节 页面布局与标签（1学时）

一、标题和换行

二、段落和水平线段

三、文字和文字样式

四、多媒体标签:图像、声音、视频

五、超链接

第三节 表格与表单（1学时）

一、表格的基本结构

二、表格的属性设置

三、表单

第二章 网页设计软件DreamweaverCS6（共3学时）

（一）本章教学目的和要求

讲解从零开始学DreamweaverCS6、创建表格与Div布局制作网页、使用CSS修饰美化网页、使用CSS和Div布局网页以及运用行为制作交互网页等内容，让学生学会网页排版设计操作。

（二）本章教学重点与难点

重点: 1. 使用Dreamweaver制作网页

2. 利用DIV+CSS布局网页

难点:1. 排版和设置网页样式

（三）教学内容

第一节 网页的布局（2学时）

一、DreamweaverCS6的安装和使用

二、网页的构成

三、利用表格布局

四、利用DIV+CSS布局网页

第二节 将Web页面切片（1学时）

一、Ps切片

二、Fw切片

第三章 CSS入门（共6学时）

（一）本章教学目的和要求

通过本章学习，熟悉CSS层叠样式表的使用，熟练应用CSS规则设计网页样式。

（二）本章教学重点与难点

重点: 1. CSS的语法规则

2. CSS选择器

难点:1. 网页中如何应用CSS

2. 如何解决CSS冲突

（三）教学内容

第一节 CSS语法规则（1学时）

一、CSS的优势

二、CSS的书写规则

第二节 CSS选择器（3学时）

一、元素选择器

二、类选择器

三、id选择器

四、特定元素、派生、多类选择器

第三节 应用CSS（2学时）

一、外部样式表

二、内部样式表

三、内联样式表

第四章 Javascript入门（共6学时）

（一）本章教学目的和要求

掌握服务器端脚本和客户端脚本语言的概念， Javascript基本语法；熟悉脚本语言中的部分重要对象，了解如何使用脚本语言和网页结合。

（二）本章教学重点与难点

重点: 1. Javascript的函数

2. Javascript程序的编辑和调试

3. 浏览器对象模型

4．文档对象模型

难点:1. Javascript对象化编程

2. 事件驱动及事件处理

（三）教学内容

第一节 Javascript概述及变成基础（1学时）

一、Javascript的起源、特点、作用和组成

二、Javascript程序的编辑和调试

三、Javascript的变量

四、Javascript函数及对象化编程

五、事件驱动及事件处理

第二节 浏览器对象模型（2学时）

一、体系结构

二、window对象、Document对象、Location对象、History对象、Navigator对象

第三节 文档对象模型（2学时）

一、HTML文档对象模型节点树

二、访问指定节点

三、处理元素属性

第四节 客户端动态网页编程（1学时）

一、动态修改文档内容

二、样式表编程

第五章 HTML5入门及画布（共6学时）

（一）本章教学目的和要求

通过本章学习，掌握HTML5中画布元素的绘图步骤:创建、寻找、获取、绘制。能用画布元素结合Javascript绘制简单图形。

（二）本章教学重点与难点

重点: 1.HTML5核心功能了解

2.HTML5画布的绘图步骤

3.绘制简单图形

难点:1. 结合Javascript绘制渐变、组合图形

（三）教学内容

第一节 HTML5画布基础（3学时）

一、绘图步骤

二、绘制直线、矩形、圆形、三角形、贝塞尔曲线

第二节 HTML5画布进阶（3学时）

一、保存与恢复

二、移动与旋转坐标空间

三、缩放图形

四、图形的组合

第六章 CSS3入门（共6学时）

（一）本章教学目的和要求

通过本章学习，掌握CSS3的新增属性使用，掌握CSS3中transform、transition、animation的基本用法。

（二）本章教学重点与难点

重点: 1.CSS3新增属性选择器

2.CSS3变形动画

3.CSS3过渡动画

难点:1.CSS3关键帧动画

（三）教学内容

第一节 CSS3新增属性（2学时）

一、属性选择器

二、多栏布局

三、多背景图片

四、字符串溢出

五、阴影与圆角

六、边框图片

第二节 CSS3动画（4学时）

一、形变动画

二、过渡动画

三、关键帧动画

第七章 动态网页开发与网站发布（共2学时）

（一）本章教学目的和要求

通过本章学习，掌握Web服务器的安装和配置；理解静态网页与动态网页的概念和执行过程；了解网站的发布方法。

（二）本章教学重点与难点

重点: 1. 网站的工作机制

2. 静态网页与动态网页的概念

难点:1. 服务器的安装和配置

2. 动态网页的执行过程

（三）教学内容

第一节 静态网页与动态网页（1学时）

一、动态网页的特点

二、静态网页和动态网页的执行过程

第二节 网页设计与网站开发流程（1学时）

一、ASP.NET与服务器配置

二、网站发布前的准备

三、网站发布常见问题

五、教学时数分配

《动态网页开发与网站建设》课程教学时数分配表

总学时:48 学分:3

章次

章标题名称

学时小计

讲授

学时

实验

学时

实践

学时

讨论、习题课等学时

第一章

HTML入门

5

3

2

第二章

网页设计软件DW

5

3

2

第三章

CSS入门

8

6

2

第四章

Javascript入门

8

6

2

第五章

HTML5入门及画布

8

6

2

第六章

CSS3入门

8

6

2

第七章

动态网页开发与网站发布

6

2

4

六、实验内容与学时分配

《动态网页开发与网站建设》课程实验教学一览表

序号

项目名称

内容提要

学时

实验类型（演示、验证、综合、设计等）

是否为

开放实验

1

HTML标记符的使用

文本标记、超链接、表格等

2

验证

否

2

用DW编写简单网页

DW建站点流程

2

验证

否

3

网页布局与CSS层叠样式表的使用

利用DIV+CSS布局并美化网页

2

设计

是

4

Javascript 基础

表单验证和简单动态效果

2

验证

否

5

HTML5画布绘制同心圆

Canvas绘制直线、三角形、矩形和圆形

2

验证

否

6

利用CSS3动画实现图片翻转

变形动画、过渡动画、关键帧动画

2

验证

否

7

设计开发应用网站

布局合理、页面美观、风格统一

4

设计

是

七、本课程的实践环节

本课程实践环节是为了更好的巩固课堂上所学到的语言，总共16学时，包括理论教学中的HTML，CSS，JS、HTML5中画布功能以及CSS3中动画实现。最终以实验报告来进行考核。

八、主要的教学方法与教学手段

1.课程与教学方法、教学手段对应关系矩阵

课程名称

对应的教学方式方法

讲授法

启发式

讨论法

案例法

项目教学

实验室

实验

技能训练

研究与设计

小组教学

个别教学

课程作业

课外阅读及自学锻炼

……

数据库原理

√

√

√

√

说明:每门课程应使用多种教学方式方法，在相应的教学方式方法中打“√”。

2.主要采用的几种教学方法和手段

本课程是以理论加实践学习相关知识，在理论上主要采用课堂讲授法，同时为了巩固知识点结合课堂练习和课程作业。并要求学生在进行实验室上机操作时除了课堂内容还要学习课外内容。

九、考核与成绩评定

1. 该课程与评价方法对应关系矩阵

课程名称

对应的评价方法

课堂表现

实验报告

项目作业或报告

课程作业或报告

口试

口头报告

上机操作

实践操作

期中考核

期末考核

数据库原理

√

√

√

说明:每门课程应使用多种评价方式，注重过程评价，实现平时成绩、期中成绩与期末成绩相结合，在相应的评价方法中打“√”。

2.具体考核与成绩评定办法

根据教学目的和要求，本课程采用课程设计形式考核。按照平时，实验报告，期末作品成绩3:3:4进行最终成绩评定。

十、推荐教材及参考书

（一）推荐教材

《HTML5+CSS3从入门到精通》，李东博主编，清华大学出版社，2013年。

（二）参考书

1. 《网页设计与制作-Dreamweaver CS5标准教程》，修毅主编，人民邮电出版社，2013年。

2. 《HTML、CSS和Javascript入门经典》，Julie Meloni编，陈宗斌译，人民邮电出版社，2015年第2版。

3. 《ASP.NET从入门到精通》，明日科技主编，清华大学出版社，2012年第3版。

十一、其他需要说明的问题

相关知识

花店网站网页设计 花店网站网页设计模板，花店网站网页设计，专业花艺展示平台模板
花店营销网站建设，花店的网页设计图
网站建设、 网页设计、UI设计、手机站制作APP及微信开发
网站开发网页
花店品牌网页设计网站开发
花店网站网页设计，创新与用户体验的完美结合，花店网站网页设计，创新与用户体验的完美融合
花店网站设计模板，鲜花html网页设计
鲜花网页设计 鲜花网站策划书 花店花艺类网页网站界面设计制作
html+css网页设计玫瑰花主题网站
基于HTML5的个人网页的网站设计与实现 毕业设计

网址: 网页设计与网站建设 https://m.huajiangbk.com/newsview844777.html