《网站设计与开发》教学大纲
Website Design and Development
课程编码：12A40050 学分：2 课程类别：专业任选课
计划学时：40 其中讲课：24 实验或实践：0 上机：16
适用专业：编辑专业、广电专业
推荐教材：刘瑞新，张兵义，《网页设计与制作教程（HTML+CSS+JavaScript）》，机械工业出版社，2013.4
参考书目：1.郑娅峰，张永强，《网页设计与开发——HTML、CSS、JavaScript实例教程（第2版）》（21世纪高等学校规划教材?计算机应用），清华大学出版社，2011.9
2．叶青，《HTML+CSS+JavaScript实用详解》，电子工业出版社，2008
3．本书编委会，《HTML/CSS/JavaScript标准教程：实例版(第3版)》电子工业出版社，2011
4．赵峰，《网页设计与制作——HTML5+CSS+JavaScript（第2版）》，清华大学出版社，2013
课程的教学目的与任务
本课程的教学目的是培养学生掌握网页设计与规划的技能，并轻松地创建出具个性化的个人和商业网站。教学的主要任务是讲授网页制作各种方法和技巧，课程内容由浅入深、详细地介绍了HTML、CSS及JavaScript网页制作的相关知识。授课以电脑商城购物网站的设计与制作为讲解主线，围绕商城栏目的设计，详细全面系统地介绍了网页制作、设计、规划的基本知识，以及网站设计、开发的完整流程。
课程的基本要求
1、掌握HTML基础知识。
2、掌握使用CSS进行网页设计和布局的技术。
3、初步了解JSP、ASP等技术。
各章节授课内容、教学方法及学时分配建议（含课内实验）
第一章 HTML基础 建议学时：8
[教学目的与要求]掌握HTML文档结构、代码规范和网页文件创建过程；掌握文字、段落、超链接、图像、表格和列表等标记的用法；
[教学重点与难点] HTML常用标记
[授 课 方 法]以课堂讲授为主，上机实验、课堂讨论和课下自学为辅（其中上机2学时）。
[授 课 内 容]
一、HTML简介
二、HTML编写规范
三、网页文件的创建过程
四、文字与段落排版
五、超链接
六、图像
七、表格
八、列表
上机实验1：使用表格和图像标签制作如图所示的网页
第二章 表单 建议学时：4
[教学目的与要求]了解表单工作原理、掌握表单标记的基本格式
[教学重点与难点]常用表单标记
[授 课 方 法]以课堂讲授为主，上机实验、课堂讨论和课下自学为辅（其中上机2学时）。
[授 课 内 容]
一、表单的工作原理
二、表单标签
三、表单元素
四、表单的高级用法
上机实验2：利用HTML基本标签模仿制作“济南大学”主页
第三章 CSS基础 建议学时：4
[教学目的与要求]掌握CSS代码规范、掌握CSS与HTML文档的结合方法
[教学重点与难点] CSS与HTML文档四种结合方式
[授 课 方 法]以课堂讲授为主，上机实验、课堂讨论和课下自学为辅（其中上机2学时）。
[授 课 内 容]
一、CSS概述
二、CSS与HTML文档的结合方法
三、样式表语法
四、多重样式表的层叠
五、CSS的属性单位
上机实验3：使用CSS创建页面
第四章 用CSS设置文本和图像 建议学时：8
[教学目的与要求]掌握网页排版基本格式、掌握页面布局规划
[教学重点与难点] CSS图文混排常用样式
[授 课 方 法]以课堂讲授为主，上机实验、课堂讨论和课下自学为辅（其中上机4学时）。
[授 课 内 容]
一、设置文字的样式
二、设置段落的样式
三、设置图片样式
四、设置背景
五、图文混排
六、用CSS设置文本和图像综合案例
上机实验4：使用CSS设置文本
上机实验5：使用CSS创建图文混排的页面
第五章 Div+CSS布局方法 建议学时：8
[教学目的与要求]掌握Div标签的基本用法。
[教学重点与难点] CSS盒模型概念及CSS定位
[授 课 方 法]以课堂讲授为主，上机实验、课堂讨论和课下自学为辅（其中上机4学时）。
[授 课 内 容]
一、Div布局理念
二、CSS盒模型
三、CSS的定位
四、浮动与清除浮动
五、CSS常用布局样式
六、Div+CSS布局综合案例
上机实验6：Div+CSS布局方法
上机实验7：Div+CSS综合布局
第六章 用CSS设置超链接和导航菜单 建议学时：4
[教学目的与要求]掌握超链接、列表和导航菜单的基本特点和应用场合
[教学重点与难点] CSS设置超链接和列表样式
[授 课 方 法]以课堂讲授为主，上机实验、课堂讨论和课下自学为辅（其中上机2学时）。
[授 课 内 容]
一、CSS设置超链接
二、用CSS设置列表
三、创建导航菜单
四、用CSS设置超链接与导航菜单综合案例
上机实验8：制作导航菜单
第七章 用Javascript脚本语言 建议学时：4
[教学目的与要求]了解JavaScript语言应用
[教学重点与难点]什么是JavaScript语言
[授 课 方 法]以课堂讲授为主，课堂讨论和课下自学为辅。
[授 课 内 容]
一、JavaScript简介
二、在网页中插入JavaScript的方法及定义
撰稿人：奚越 审核人：许美慧
实 验 教 学 大 纲
课 程 名 称： 网站设计与开发
开课实验室： 计算机基础软件实验室
执 笔 人： 奚越
审 定 人： 许美慧
修（制）订日期： 2016年3月
一、本课程实验教学目的与要求：
本大纲是为《网站设计与开发》课程所开的实验大纲，实验内容包括网页制作、设计、规划的基本知识，以及网站设计、开发的完整流程，涵盖了网页制作各种方法和技巧，使学生掌握网页设计与制作的技能，并轻松地创建出具个性化的个人和商业网站。
|
二、实验项目与主要内容：
|
序号
| 实验项目名称
| 学时
| 主要内容
| 实验类型
| 每组人数
|
一
| 使用表格和图像标签制作网页
| 2
| 练习超文本的基本结构；练习超文本常用标记；练习表格标记并能利用其进行网页排版；
| 验证
| 1
|
二
| 利用HTML基本标签制作网页
| 2
| 使用HTML常用标记制作一个完整页面；
| 综合
| 1
|
三
| 使用CSS创建网页
| 2
| 练习嵌入式样式表并调试出正确效果；练习链接式样式表语法；
| 演示
| 1
|
四
| 使用CSS设置文本
| 2
| 练习文本和段落的样式属性；练习边框属性；用CSS设计一个页面效果；
| 设计
| 1
|
五
| 使用CSS创建图文混排的网页
| 2
| 练习CSS图片属性；综合制作一个图文混排页面；
| 综合
| 1
|
六
| Div+CSS布局方法
| 2
| 练习盒模型的用法；通过Div+CSS对网页进行布局；
| 验证
| 1
|
七
| Div+CSS综合布局
| 2
| 练习Div+CSS对网页进行布局，并自行设计制作一个完整的网页；
| 设计
| 1
|
八
| 制作导航菜单
| 2
| 通过超链接制作纵向导航菜单；通过列表制作纵向导航菜单；通过列表制作横向导航菜单；
| 验证
| 1
|
三、基本设备与器材配置
|
序号
| 仪器名称
| 现有数量
| 序号
| 仪器名称
| 现有数量
|
1
| 计算机
| 200
| 7
|
|
|
2
|
|
| 8
|
|
|
3
|
|
| 9
|
|
|
4
|
|
| 10
|
|
|
5
|
|
| 11
|
|
|
6
|
|
| 12
|
|
|
四、实验说明：
|
课程总学分（学分）
| 2
| 实验学时数（学时）
| 16
| 实验项目数（个）
| 8
|
|
课程性质
| 通识必修□ 通识选修□ 专业必修□ 专业选修√ 集中实践环节□
|
实验类别
| 课程内实验√ 独立设课实验□ 集中综合实验□
|
考核方式
| 日常考核□ 操作技能考核□ 卷面考核□ 提交实验结果√ 面试□
|
适用专业：编辑专业、广电专业
|
实验教材及参考书：
《网页设计与制作教程（HTML+CSS+JavaScript）》，刘瑞新，张兵义，机械工业出版社，2013.4
|
所属实验室意见：
实验室主任： 年 月
|
院（系）意见：
主管领导签章： 年 月
|
| | | | | | | | | | | | |
*由学校出版、印刷的实验教材（或指导书），统一写作“济南大学出版”。
