请点击右上角按钮，选择“在Safari中打开”
再点击页面中的下载或打开
1. 为什么要学习这门课程？
在信息技术时代，网络信息的搜集、处理及发布是基本技能，而网页设计与制作是信息发布的基础，了解和掌握HTML、CSS及JavaScript的相关知识和技术非常必要。
2. 这门课程讲些什么？
Web前端设计基础课程以培养学生的实践应用能力为主线，通过网站建设项目，使学生在完成网站策划、网页制作、网站测试与发布的过程中，掌握Web前端设计的相关规范、HTML超文本标记语言、CSS样式等基本知识和操作技术，可为将来学习更多Web相关技术打下基础。
3. 学习这门课可以获得什么？
通过课程的学习，你将具备Web前端设计的基本技能。熟知Web前端设计的基础知识和操作技术，能读懂页面文件的源代码，能合理设计和制作网页，能发布和管理站点，能收集和处理网页相关素材，能遵守网络信息发布与传播的基本规范和相关法律法规，能顺利地与教师和同学进行交流和讨论。
4. 这门课有什么特色？
课程基于OBE理念，采用工作流程+项目+任务驱动的教学模式，按照基础知识、操作技能、应用提高三个层次组织教学（如图所示）。
l 基于网页设计与制作的过程，确定网站主题——收集处理素材——搭建框架结构——填充页面内容-——定义网页样式——实现交互功能——测试发布网站，以建设项目网站为工作任务，通过任务实践提升实践应用能力。
l 基于工作过程的理念解构课程内容，分解项目案例，提取典型任务，设计教学单元；再拆分为若干个教学任务，设定每个教学任务的学习目标、知识点和技能点；再整合、序化教学内容，构建课程框架及内容体系。
l 教学内容分层分模块（基础知识、操作技能、应用提高三个层次，基础知识、HTML、CSS、综合应用四个模块），不同水平的学生可依据需求选择不同阶段的内容开始学习。
通过课程的学习，学生应具备Web前端设计的基本技能。
熟知Web前端设计的基础知识和操作技术
能读懂页面文件的源代码
能合理设计和制作网页
能发布和管理站点
能收集和处理网页相关素材
能遵守网络信息发布与传播的基本规范和相关法律法规
能顺利地与教师和同学进行交流和讨论。
考核方式：分为静态（A）、动态（B）两部分。
静态（A）部分：
过程考核：单元测验（共8次，占30%）和互动讨论（共10次，占10%），考察理论知识掌握的情况。
阶段性考核：单元作业（共3次，占30%），考察实践操作的能力。
终结性考核：期末大作业（完善自建网站，占30%），考察运用所学知识解决问题的能力。
成绩评定：单元测验占30%，单元作业占30%，讨论占10%，期末大作业占30%。
评分标准采取百分制，总分60-84分为合格；85分及以上为优秀。
动态（B）部分：
过程考核：单元测验（占30%）和互动讨论（占10%），考察理论知识掌握的情况。
阶段性考核：单元作业（占30%），考察实践操作的能力。
终结性考核：期末大作业（完善自建动态网站，占30%），考察运用所学知识解决问题的能力。
成绩评定：单元测验占30%，单元作业占30%，讨论占10%，期末大作业占30%。
评分标准采取百分制，总分60-84分为合格；85分及以上为优秀。
总评成绩 ：静态（A）占60%、动态（B）占40%。
没有实验条件的同学，待“疫情结束”返校后补课，成绩计算方法根据情况调整。
第0单元 课程介绍及导学
2： 课程导学
1 ：课程介绍
第1单元 Web基础知识
任务4：了解网站建设流程
第1单元测试
任务1：初识网页和网站
任务3：理解Web相关概念
任务2：了解Web前端设计技术与工具
第1单元导学
第2单元 网站策划
第2单元测试
任务2：布局设计
第2单元作业 网站策划
第2单元导学
任务4：页面层次结构及目录设计
任务1：形象设计
任务3：导航及栏目设计
第3单元 网站首页文档创建
任务2： 理解HTML标记语法
任务3：理解HTML布局-div标记和span标记
第3单元测试
任务1：创建网站首页
任务4：理解HTML5布局标记
第3单元导学
第4单元 网站首页内容编辑
任务4：应用表格和表单
任务1：插入文本及列表
任务3：设置超链接和应用框架
第4单元测试
第4单元作业 网站内容编辑
任务2：插入图片和媒体
第4单元导学
第5单元 网站首页样式创建
任务2：网页应用CSS样式方法
第5单元测试
任务1：理解CSS语法
任务4：理解CSS层叠性和继承性
第5单元导学
任务3：理解CSS选择器
第6单元 网站首页样式设计
任务2：CSS背景和列表属性
任务4：CSS3效果应用
任务1：CSS字体和文本属性
任务3：CSS边框和表格属性
第6单元测试
第6单元导学
第7单元 网站首页元素定位
第7单元测试
任务4：定位布局
第7单元作业 网站样式设计及应用
任务3：浮动布局
第7单元 导学
任务2：流布局
任务1：CSS盒子模型
第8单元 网站页面制作完善
第8单元 导学
第8单元测试
任务4：了解JavaScript应用
任务3：HTML5画布、拖放及地理定位
任务2：移动端页面制作
任务1：二级菜单制作
期末大作业
《Web前端设计基础》课程 期末大作业
页面制作完善-视频
具备一定的计算机基础知识和操作能力。
主要参考网站：
w3school在线教程：https://www.w3school.com.cn/
菜鸟教程：https://www.runoob.com/
Q1. 为什么网站的首页文件名为index或default？
这是一种网站首页命名规范。在浏览器地址栏输入网址，即使不输入首页名称index，浏览器也能正确找到该文件并正确显示出来，因为Web服务器默认的首页文件名是index。通过设置，Web服务器常用的默认首页文件名有index、default等。
Q2. 为什么有时网页图片不可见或超链接页面找不到？
检查网页中图片的src属性、超链接中的href属性的URL书写是否正确，如果图片、页面文件不存在或不在此路径下，就会出现网页中的图片文件无法显示、点击超链接无法找到页面文件的现象。
Q3. 为什么制作好的网页在不同的计算机上浏览效果不一样呢？
这是因为各计算机的分辨率不同所致，可在计算机桌面单击鼠标右键，从选项菜单中选择“屏幕分辨率“操作来设置分辨率。
Q4. 为什么在进行网页制作时建议尽量使用相对路径呢？
绝对路径是指提供文档完整的路径，其中包括使用的协议。而相对路径是指相对于当前文件的路径，使用相对路径可以在整个目录方便地移动内容，且测试方法比较灵活，特别是本机测试时比较方便。
Q5. 为什么浏览网页时会出现乱码现象呢？
在编写网页时，如果未指定字符集就可能会出现乱码现象，可以在<head>区域中添加<meta charset="utf-8">来指定字符集，utf-8中已存储所有的文字。
副教授
由高教社联手网易推出，让每一个有提升愿望的用户能够学到中国知名高校的课程，并获得认证。
网上有害信息举报（涉未成年人）：网站 https://www.12377.cn 邮箱（涉未成年人） youdao_jubao@rd.netease.com
粤B2-20090191-26
| 京ICP备12020869号-2 |
京公网安备44010602000207
©2014-2025
浙公网安备 33010802012594号
