用html、CSS制作课程表

htmlcssjs课程设计报告一、教学目标本课程旨在让学生掌握HTML、CSS和JavaScript的基本知识，培养学生运用前端技术进行网页设计和开发的能力。

具体目标如下：1.知识目标：–掌握HTML的基本结构与标签使用；–理解CSS的基本语法与样式应用；–了解JavaScript的基本语法与操作。

2.技能目标：–能够使用HTML编写简单的网页结构；–能够使用CSS为网页添加样式；–能够使用JavaScript实现简单的交互功能。

3.情感态度价值观目标：–培养学生对前端技术的兴趣和热情；–培养学生团队协作和自主学习能力；–培养学生追求创新和卓越的品质。

二、教学内容本课程的教学内容分为三个部分：HTML、CSS和JavaScript。

1.HTML部分：–介绍HTML的基本结构；–学习常用的HTML标签及其功能；–掌握HTML文档的排版与布局。

2.CSS部分：–学习CSS的基本语法与选择器；–掌握CSS的盒模型与布局；–学习CSS的颜色、字体、边框等样式属性。

3.JavaScript部分：–学习JavaScript的基本语法和数据类型；–掌握JavaScript的运算符、表达式和逻辑控制；–学习JavaScript的函数和事件处理。

三、教学方法本课程采用多种教学方法相结合，以激发学生的学习兴趣和主动性：1.讲授法：讲解基本概念、语法和原理，为学生提供系统的知识结构；2.案例分析法：分析实际案例，让学生学会运用所学知识解决实际问题；3.实验法：让学生动手实践，加深对知识的理解和记忆；4.讨论法：分组讨论，培养学生的团队协作和沟通能力。

四、教学资源为实现课程目标，我们将采用以下教学资源：1.教材：《HTML、CSS、JavaScript设计与实现》；2.参考书：《精通CSS》、《JavaScript高级程序设计》；3.多媒体资料：PPT、视频教程、在线案例；4.实验设备：计算机、网络环境。

通过以上教学资源的支持，为学生提供丰富的学习体验，帮助他们更好地掌握HTML、CSS和JavaScript知识，提升前端开发能力。

一体化课教案课 程 HTML5+CSS3网页设计与制作 授课教师课 题 第二阶段 使用CSS3设置网页格式分课题任务10 为网页添加CSS样式表授课对象 ××专业××班授课时间 ×年×月×日 课时 4教学目标1、能够叙述CSS的概念。

2、能够使用外部样式法为D清单网页添加CSS样式表。

3、能够使用CSS标签选择符选择目标标签，使用正确的语法格式编写样式代码。

4、能够使用CSS设置文字的大小、颜色和加粗效果。

教学重点1、外部样式法2、CSS标签选择符的应用教学难点 1、选择合适的CSS标签选择符2、使用正确的语法格式编写样式代码任务描述本次任务要求在上一阶段的D清单网页内容基础上，使用外部样式法为网页添加CSS样式表，并使用CSS样式设置整个页面通用的文字大小样式效果。

任务分析要使用外部样式法为D清单页面添加CSS样式表，并设置整个页面通用的文字大小样式，需要：1、学习CSS3的基本语法；2、学习引入CSS样式的方法，正确使用外部样式法引入CSS样式表；3、分析D清单页面中文字大小样式，正确使用CSS设置D清单页面文字大小样式。

教学场地与教具教学场地：机房 教具：计算机安全注意事项及相关备注 1、提醒学生注意用电安全。

2、提醒学生不要将食品饮料带入机房。

审阅签名： 年 月 日‐ 1 ‐环节学生活动教师活动分配 备注说明 组织教学一、提前5分钟按照固定座位就坐。

二、不带食品饮料进入教室（机房）。

三、开机，配置好IP 地址，确保红蜘蛛软件运行并链接教师机，同时能够访问英特网。

四、注意电脑接电用电安全。

一、严格遵守上下课时间，上课铃响前5分钟进入教室。

二、检查学生的仪容仪表，严禁带食品和饮料进入教室。

三、检查教室线路布置，提醒学生检查是否将电脑接入英特网。

四、提醒学生注意用电安全，清点人数。

课前5分钟营造上课环境，保证用电安全任务引入一、了解任务情境本次任务要求在上一阶段的D 清单网页内容基础上，使用外部样式法为网页添加CSS 样式表，并使用CSS 样式设置整个页面通用的文字大小样式效果。

《HTML5+CSS3 网站设计基础教程》课程教学大纲（课程英文名称）课程编号：201601210011学分：5 学分学时：76 学时（其中：讲课学时：47 学时上机学时：26 学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI 设计、 JavaScript 网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3 网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML 标记、CSS 样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页 web 发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。

二、课程设计理念与思路课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。

单纯的技能训练不是提高高等职业教育的理想课程。

以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。

课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。

教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。

三、教学条件要求开发工具：Dreamweaver CS6四、课程的主要内容及基本要求第一章初识 HTML5第二章HTML5 页面元素及属性第三章CSS3 入门第四章CSS3 选择器第五章CSS 盒子模型第六章浮动与定位第七章表单的应用第八章多媒体技术第九章CSS3 高级应用第十章实战开发—制作电商网站首页面…………………………………………………………………五、学时分配六、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。

用XML和CSS制作课程表首先，应该设计好自己想要的课程表的样子；第二步，打开Dreamwaver或者记事本。

新建一个XML 文件，保存为kechengbiao.xml；第三步，输入代码，制作出课程表框架；<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet type="text/css" href="kechengbiao.css"?><biao><ke><jieshu></jieshu><yi></yi><er></er><san></san><si></si><wu></wu></ke><ke><jieshu></jieshu> <yi></yi><er></er><san></san><si></si><wu></wu></ke><ke><jieshu></jieshu> <yi></yi><er></er><san></san><si></si><wu></wu></ke><ke><jieshu></jieshu> <yi></yi><er></er><san></san><si></si><wu></wu></ke><ke><jieshu></jieshu> <yi></yi><er></er><san></san><si></si><wu></wu></ke><ke><jieshu></jieshu> <yi></yi><er></er><san></san><si></si><wu></wu></ke></biao>第四步，再次新建一个XML文件或是记事本文件，保存为kechengbiao.css，输入以下代码：biao {display:block;width:1000px;background:blue(0,200,200);margin:15px 15px 15px 15px;padding15px 15px 15px 15px;border:medium solid double;list-style:none}ke {display:block;}jieshu,yi,er,san,si,wu{display:inline;width:150px;font-family:"宋体";font-size:12px;font-weight:normal;border:1px solid blue;margin:3px;vertical-align:top;text-align:left;text-style:italic;}第五步，用浏览器打开看看框架是否是自己想要的结果；第六步，根据自己的课程表，把内容填进去；<jieshu>时间</jieshu><yi>星期一</yi><er>星期二</er><san>星期三</san><si>星期四</si><wu>星期五</wu></ke><ke><jieshu>一二</jieshu><yi>语文</yi><er>数学</er><san>历史</san><si>英语</si><wu>政治</wu></ke><ke><jieshu>三四</jieshu> <yi>数学</yi><er>地理</er><san>语文</san><si>历史</si><wu>英语</wu></ke><ke><jieshu>五六</jieshu> <yi>生物</yi><er>物理</er><san>化学</san><si>体育</si><wu>语文</wu></ke><ke><jieshu>七八</jieshu><yi>物理</yi><er>化学</er><san>语文</san><si>数学</si><wu>生物</wu></ke><ke><jieshu>九十</jieshu><yi>生物</yi><er>历史</er><san>地理</san><si>政治</si><wu>化学</wu></ke>第七步，保存文件，用网页方式打开kechengbiao.xml,即可得到课程表，如下：。