spContent=CSS3交互、HTML5、JavaScript,建立一个网站要懂这么多技术吗?不用焦虑,加入网页设计与制作课程,通过工作流程+项目+任务驱动的学习模式,你每次敲打键盘形成的代码,就会像变魔术似的成为一个个漂亮的网页!理想要靠行动实现,我们开始吧~
CSS3交互、HTML5、JavaScript,建立一个网站要懂这么多技术吗?不用焦虑,加入网页设计与制作课程,通过工作流程+项目+任务驱动的学习模式,你每次敲打键盘形成的代码,就会像变魔术似的成为一个个漂亮的网页!理想要靠行动实现,我们开始吧~
—— 课程团队
课程概述
1. 为什么要学习这门课程?
在信息技术时代,网络信息的搜集、处理及发布是基本技能,而网页设计与制作是信息发布的基础,了解和掌握HTML、CSS及JavaScript的相关知识和技术非常必要。
2. 这门课程讲些什么?
网页设计与制作课程以培养学生的实践应用能力为主线,通过网站建设项目,学生在完成网站策划、网页制作、网站测试与发布的任务中,掌握Web前端设计的相关规范、HTML超文本标记语言、CSS样式、JavaScript脚本等基本知识和操作技术,通过任务实践提升综合应用能力,为从事Web前端设计工作打下基础。
3. 学习这门课可以获得什么?
通过课程的学习,你将了解Web前端设计技术的发展现状和趋势,理解Web前端设计规范;掌握HTML5、CSS3和JavaScript的基本知识;掌握Web前端设计基本技能,能够应用HTML5、CSS3和JavaScript合理地设计和制作网页;能遵守网络信息发布与传播的基本规范和相关法律法规,能顺利地与教师和同学进行交流和讨论。
4. 这门课有什么特色?
课程基于OBE理念,采用工作流程+项目+任务驱动的教学模式,按照基础知识、操作技能、应用提高三个层次组织教学(如图所示)。
l 基于网页设计与制作的过程,确定网站主题——收集处理素材——搭建框架结构——填充页面内容-——定义网页样式——实现交互功能——测试发布网站,以建设项目网站为工作任务,通过任务实践提升实践应用能力。
l 基于工作过程的理念解构课程内容,分解项目案例,提取典型任务,设计教学单元;再拆分为若干个教学任务,设定每个教学任务的学习目标、知识点和技能点;再整合、序化教学内容,构建课程框架及内容体系。
l 教学内容分层分模块分层次,按照Web基础知识、HTML、CSS、JavaScript四个模块,基础知识、操作技能、应用提高三个层次进行课程体系和教学内容的组织。

授课目标
本课程为专业必修课程。通过本课程的学习,学生能够达到以下目标:
(1)知识:学生能够陈述并解释关于Web前端设计相关规范、HTML超文本标记语言、CSS层叠样式表、JavaScript客户端脚本语言等方面的基本知识;能够简要陈述并解释Web前端设计技术的发展现状和趋势。
(2)应用:能够应用HTML5、CSS3和JavaScript合理地设计和制作网页。
(3)整合:学生能够结合其他专业知识,综合运用Web前端设计的知识和操作技术创建网站;能够发布和管理网站。
(4)情感:学生能够参与协作学习,具有团队合作意识,能够撰写网站策划报告,进行成果展示和有效沟通与交流。
(5)价值:学生能够在电子商务专业实践中理解并遵守职业道德和规范,履行责任;能够在网页制作及发布的实践中理解并遵守网络信息发布与传播的基本规范和相关法律法规。
(6)学习:学生能够利用MOOC、微课等线上学习课程和资源,开展自主学习,提升自主学习能力。
成绩 要求
考核方式: 线上MOOC学习 + 课堂表现 + 期末考核
(1)线上MOOC
(2)课堂表现
过程考核:课堂表现(占10%),考核出勤情况及学生自主学习情况。
(3)期末考核
终结性考核:期末考核(占40%),考察运用所学知识解决问题的能力。
成绩评定:线上MOOC学习 50% + 课堂表现10% + 期末考核40%
课程大纲
任务1:了解Web基础知识
课时目标:1. 知识目标:(1)初步了解Web前端设计技术HTML、CSS、JavaScript,Web前端设计工具文本编辑器、网页制作工具。(2)能够解释网页、网站、IP地址、域名、域名系统、URL、相对地址、绝对地址等的含义。(3)能够描述网络图片、网络动画、网络音视频的作用,网站建设的流程。(4)能够区分相对地址和绝对地址,并能正确引用URL地址。(5)能够选择网络图片、网络动画、网络音视频的格式。2.能力目标:能够查看源文件、收集整理网络信息。
1.1 初识网页和网站
1.2 了解Web前端设计技术与工具
1.3 理解Web相关概念
1.4 了解网站建设流程
任务2: 策划网站
课时目标:1. 知识目标:(1)能够知悉网站的标志、色彩、字体及宣传标语的设计规范。(2)能够知悉导航设计、栏目设计的作用及设计原则、目录结构设计的原则。(3)能够选择网页布局的形式、网站页面层次结构的形式。2.能力目标:(1)能够根据网站选题和内容对网站进行形象设计、布局设计、导航及栏目设计、层次结构及目录设计,以突出网站主题。(2)能够收集和处理网站制作中所需要的各类网络素材。
2.1 设计网站形象
2.2 设计页面布局
2.3 设计网站导航及栏目
2.4 设计页面层次及目录结构
任务3:创建网站首页文档
课时目标:1. 知识目标:(1)能够描述网站首页相关规范。(2)能够解释标记、元素、属性、转义字符串等的含义。(3)能够知晓HTML文档的结构及HTML标记的语法。(4)能够运用HTML布局工具div标记及HTML5结构标记。2. 能力目标:(1)能够编写HTML源文件。(2)能够设计网页布局。
3.1 创建网站首页
3.2 理解HTML标记语法
3.3 理解HTML布局div标记
3.4 理解HTML5结构元素
任务4: 编辑网站首页内容(2周)
课时目标:1. 知识目标:(1)能够解释超链接、图像热区等的含义。(2)能够描述文本、列表、图像、超链接、媒体、表格、表单、框架等标记的作用。(3)能够运用文本、列表、图像、超链接、媒体、表格、表单、框架等常用标记。(4)能够描述超链接的形式及状态,超链接对SEO优化的重要作用。2. 能力目标:能够设计网页布局及编辑网页内容。
4.1 插入文本及列表
4.2 插入图像和媒体
4.3 设置超链接和应用框架
4.4 应用表格和表单
任务5: 创建网站首页样式
课时目标:1. 知识目标:(1)能够解释CSS外部样式表、层叠性、继承性等的含义。(2)能够表征CSS样式的基本语法、基本选择器及复合选择器。(3)能够描述链接外部CSS样式、嵌入CSS样式、导入CSS样式和行内样式四种网页中应用样式方法的操作要点。(4) 能够分析链接外部CSS样式和导入CSS样式的区别、CSS选择器的优先级。2. 能力目标:能够创建并应用样式表文件。
5.1 理解CSS语法
5.2 网页应用CSS样式
5.3 理解CSS选择器
5.4 理解CSS层叠性和继承性
任务6:设计网站首页样式(2周)
课时目标:1. 知识目标:(1)了解CSS3的模块化发展。(2) 能够描述CSS字体、文本、颜色与背景、列表、边框、表格、转换、过渡、多列等属性的作用。(3)能够设置CSS字体、文本、颜色与背景、列表、边框、表格、转换、过渡、多列等属性。2. 能力目标:能够设计并应用样式表文件。
6.1 设置CSS字体和文本属性
6.2 设置CSS背景和列表属性
6.3 设置CSS边框和表格属性
6.4 应用CSS3效果
任务7:定位网站首页元素(2周)
课时目标:1. 知识目标:(1)能够释义盒子模型结构及其构成要素的作用。(2)能够描述流布局、浮动布局、相对定位布局、绝对定位布局的要点。(3)能够分析流布局、浮动布局、相对定位布局、绝对定位布局的区别。(4)能够进行流布局、浮动布局、相对定位布局、绝对定位布局的设置。2. 能力目标:能够对网页中的元素进行精确定位。
7.1 理解CSS盒子模型
7.2 应用流布局
7.3 应用浮动布局
7.4 应用定位布局
HTML+CSS综合应用(2周)
课时目标:1. 知识目标:(1)能够描述各种移动端页面布局方法的特点及布局设计要点。(2)能够设计及制作简单的移动端页面。2. 能力目标:能够对网页元素进行精确定位。
任务8:应用JavaScript(2周)
课时目标:1. 知识目标:(1)能够解释对象、类、实例、事件及事件驱动等的含义。(2)能够表征JavaScript、jQuery基本语法。(3)能够描述文档对象模型DOM节点树的构建及节点类型的划分。(4)能够描述浏览器对象模型BOM各对象的层次关系。(5)能够在网页中应用JavaScript脚本语言。(6)能够对DOM对象进行相关操作。2. 能力目标:能够使用JavaScript、jQuery为网页添加动态效果。
8.1 JavaScript概述
8.2 了解JavaScript应用
8.3 了解jQuery应用
任务9:JavaScript——了解HTML5高级应用
课时目标:1. 知识目标:理解Canvas画布、路径、拖放等相关概念;理解Canvas画布、拖放操作、地理定位的基本语法;掌握绘制图形图像、拖放页面元素、设置地理定位的步骤及要点。2. 能力目标:能够使用Canvas画布绘制各种图形、图像、文字及填充效果等;能够使用HTML5的高级功能解决简单的实际应用问题。
9.1 了解HTML5画布
9.2 了解HTML5拖放、地理定位功能
综合应用——完善网站
课时目标:1. 知识目标:(1)能够知悉Web前端设计规范。(2)能够运用HTML5、CSS3和JavaScript的基本知识。2. 能力目标:能够应用HTML5、CSS3和JavaScript合理地设计和制作网页。
展开全部
预备知识
参考资料
参考资料:
《HTML+CSS+JavaScript网页设计》,夏魁良、王丽红编著,清华大学出版社,2019年第1版。
《Web前端开发技术——HTML5、CSS3、JavaScript(第3版)》,储久良著,清华大学出版社,2018年第3版。
《HTML + CSS + JavaScript网页设计从入门到精通》,胡晓霞著,清华大学出版社,2017年第1版。
《HTML5 + CSS + JavaScript网页设计与制作》,彭进香等主编,清华大学出版社,2019年第1版。
《网页设计与制作教程》,周建锋、朱凤山、张晓君、史英杰编著,清华大学出版社,2015年第1版。
主要参考网站:
常见问题
Q1. 为什么网站的首页文件名为index或default?
这是一种网站首页命名规范。在浏览器地址栏输入网址,即使不输入首页名称index,浏览器也能正确找到该文件并正确显示出来,因为Web服务器默认的首页文件名是index。通过设置,Web服务器常用的默认首页文件名有index、default等。
Q2. 为什么有时网页图片不可见或超链接页面找不到?
检查网页中图片的src属性、超链接中的href属性的URL书写是否正确,如果图片、页面文件不存在或不在此路径下,就会出现网页中的图片文件无法显示、点击超链接无法找到页面文件的现象。
Q3. 为什么制作好的网页在不同的计算机上浏览效果不一样呢?
这是因为各计算机的分辨率不同所致,可在计算机桌面单击鼠标右键,从选项菜单中选择“屏幕分辨率“操作来设置分辨率。
Q4. 为什么在进行网页制作时建议尽量使用相对路径呢?
绝对路径是指提供文档完整的路径,其中包括使用的协议。而相对路径是指相对于当前文件的路径,使用相对路径可以在整个目录方便地移动内容,且测试方法比较灵活,特别是本机测试时比较方便。
Q5. 为什么浏览网页时会出现乱码现象呢?
在编写网页时,如果未指定字符集就可能会出现乱码现象,可以在<head>区域中添加<meta charset="utf-8">来指定字符集,utf-8中已存储所有的文字。