hi,小慕
移动Web开发
第8次开课
开课时间: 2025年10月01日 ~ 2026年01月10日
学时安排: 4
距离开课还有 82 天 已有 3 人参加
立即参加
课程详情
课程评价(963)
spContent=本课程是移动互联应用技术专业的一门专业核心课程,该课程始终贯彻“工学结合、项目导向”课程教学模式,以“实用、够用、必需”为原则,培养学生的实际应用能力,取得了良好的教学效果。
本课程是移动互联应用技术专业的一门专业核心课程,该课程始终贯彻“工学结合、项目导向”课程教学模式,以“实用、够用、必需”为原则,培养学生的实际应用能力,取得了良好的教学效果。
—— 课程团队
课程概述

由于移动端的应用越来越普及,因此,作为构成移动端应用的基本载体网站与网页的设计与制作非常重要,通过本课程的学习,使学生掌握使用和HBuilderX建立网站并规划电脑端网站、响应式网站和移动端网站。

通过本课程的学习,使学生掌握多种类型网站的设计技巧与注意事项,能比较熟练地规划个人网站、企业网站、门户网站、娱乐网站、游戏网站、教学网站等各种不同主题的不同风格效果。促进学生创新意识和综合职业能力的形成:

1)让学生在学习设计不同主题的网站风格时作一些调查,在此基础上培养自己的创新意识和创新能力,审美能力等。

2)让学生通过做课程设计或毕业设计,培养自己的创新能力。

3)让学生掌握自我解决问题的能力、遇到问题和同学、教师的沟通能力。

4)让学生掌握项目开发的流程以及按计划实施的能力。

授课目标

通过本课程的学习,学生能了解WWW、HTTP、HTML5、CSS3的定义、概念和作用; 了解服务器、客户端、浏览器的概念和作用,熟悉web项目规划和需求分析的基本方法,具备Web网页设计、制作及站点管理的基本知识和基本技能,学生能够独立制作中小型的网站。熟练掌握HTML5语言中的各种文本格式、字符格式、段落设置、列表、标记的使用方法;熟练CSS3样式表制作方法和技巧;熟悉PC端网站、移动端网页、响应式网页的排版技巧,根据前端设计师的任职要求,参照计算机程序员职业标准和网站开发和网页制作的职业资格标准,改革课程体系和教学内容。课程内容突出职业能力培养,体现基于职业岗位分析和能力为导向的课程设计理念,以真实工作任务或社会产品为载体组织教学内容,在真实工作情境中采用新的教学方法和手段进行实施。


1.知识目标

(1)   掌握HTML5与CSS3基础知识及最新技术。

(2)   掌握常见HTML5跨平台开发工具。

(3)   掌握SEO、BSU等高级实用技术。

(4)   掌握基本C端网站、移动端网页、响应式网页的排版技巧。


2.能力目标

(1)   具有分析问题、解决问题的能力。

(2)   具有建立实验假设、探索查阅知识的能力。

(3)   能够运用系统性思维分析和解决问题。

(4)   具有学习的热情和兴趣,能进行自主学习和自我评价,具有良好的变通能力、一定的创造性思维和批判性思维。

(5)   具备扎实的HTML5与CSS3开发基础。

(6)   能够独立进行整体操作规划及规范编写。

(7)   能负责地完成任务,具有严格的时间观念以及时间管理意识,能了解本专业职业成长过程,并能做好个人的职业规划。

(8)   遵纪守法,爱岗敬业,具有良好的职业道德和职业形象。


3.素质目标

(1)   具有较强的专业学习、执行和创新能力。

(2)   具有自觉的规范意识、团队协作意识和协作能力。

(3)   能运用各种交流手段进行良好地表达和交流。

(4)   具有使用英语进行阅读和交流的能力。

(5)   具有较强的环境适应、人际交往和组织管理能力。

课程大纲
单元1 HTML5静态网站开发概述
课时目标:1.了解开发工具HBuilderX以及相关使用技巧2.掌握网站文件及文件夹的存储路径3.了解网页的命名规则4.掌握HTML5标签的组成结构5.了解并掌握HTML5代码注释的使用
任务1-1 常用HTML5开发环境的搭建
任务1-2 完成第一个HTML5页面
单元2 HTML5中常用标签的使用
课时目标:1.以<marquee>标签为例了解标签属性2.掌握HTML5中常用的文字类标签及其属性的使用3.掌握HTML5中常用的图像类标签及其属性的使用4.掌握HTML5中常用的多媒体类标签及其属性的使用
任务2-1 使用<marquee>标签制作滚动字幕
任务2-2 使用<a>标签实现超链接
任务2-3 使用<a>标签实现锚点链接
任务2-4 使用文本类标签实现文本的显示
任务2-5使用文本格式类属性实现文本的特殊显示效果
任务2-6 使用转义字符显示特殊符号
任务2-7 使用图像类标签显示图像及图像映射
任务2-8 <iframe>标签的使用
任务2-9 多媒体标签的使用
任务2-10 表单的简单应用
任务2-11 表单格式验证
单元3 CSS基本应用
课时目标:1.理解层叠样式表CSS的基本概念及相关使用技巧2.掌握CSS的语法,熟悉常用CSS属性的含义3.掌握常用的文本样式和图片样式的设置以及图片背景的使用4.理解定位的概念,掌握常用的定位方法
任务3-1 使用CSS设置body样式
任务3-2 CSS元素选择器的使用
任务3-3 内联式、嵌入式、外部式样式的使用
任务3-4 测试样式优先级
任务3-5 创建盒子模型
任务3-6 CSS中float属性的使用
任务3-7 常用文本样式属性的使用
任务3-8常用图片样式属性的使用
任务3-9 position的4种定位方式的使用
任务3-10 Chrome浏览器调试基本技巧
单元4 CSS3高级应用
课时目标:1.了解CSS3的特色应用2.掌握CSS3特色模块的使用方法3.掌握CSS3文本、图片等元素的特色用法
任务4-1 Font Awesome图标的使用
任务4-2 CSS3图片背景的使用
任务4-3 制作搜索框
任务4-4 制作无间隙滚动文字和图片
任务4-5 制作轮播文字和图片
任务4-6 制作多种文字特效
任务4-7 制作图片遮罩和悬停特效
单元5 页面局部布局
课时目标:1. 掌握常用的页面制作方法2. 掌握常用的页面布局方法
任务5-1 图文混排与文字溢出
任务5-2 中英文混合标题
任务5-3 阅读更多内容
任务5-4 制作文字选项卡与图片选项卡
任务5-5 制作内容折叠与菜单折叠
任务5-6 制作导航条
任务5-7 制作文字列表、图文混排列表和缩略图列表
任务5-8 制作登录界面
任务5-9 制作评论区
单元6 页面整体布局
课时目标:1. 掌握常用的页面制作方法2. 掌握常用的页面布局方法(包括弹性布局)3. 掌握表格的基础知识,包括标签常用属性及其描述4. 掌握表格的使用方法,会使用表格制作网页中的相关对象
任务6-1 960网格系统在网页制作中的使用
任务6-2 clearfix和clear的使用
任务6-3 常用经典布局
任务6-4 常用弹性布局
任务6-5 表格基本知识
任务6-6 使用表格制作个人简历
任务6-7 使用表格制作QQ邮箱
任务6-8 使用基于lib-flexible库的rem单位制作自适应网站
单元7 Bootstrap5框架简介
课时目标:1.掌握Bootstrap5安装使用2.了解并掌握栅格化布局3.学会使用响应式导航栏4.学会使用响应式轮播图5.学会使用文字和图片排版6.掌握完整的响应式网站开发流程
任务7-1 Bootstrap5基础知识
任务7-2 制作栅格化布局页面
任务7-3 制作响应式导航栏
任务7-4 制作响应式轮播图
任务7-5 制作响应式文字和图片
任务7-6 制作完整的响应式网站
单元8 HTML5综合案例
课时目标:1.掌握网页开发的基本流程2.结合案例巩固网页制作的知识
任务8-1 静态网页开发的基本流程
任务8-2 期末大作业
展开全部
预备知识

1、计算机应用基础

(1)计算机的基本概念知识;

(2)计算机基本操作能力;

(3)Internet基础知识;

(4)高级语言程序设计基础知识(任何语言均可);

(5)因特网与万维网运行基本原理;

2、PhotoShop基础应用

(1)版面设计知识;

(2)配色相关知识;

(3)平面图像处理基本技能;

参考资料

1.教材名称:HTML5+CSS3网页设计任务教程(第2版)(“十四五”职业教育国家规划教材)

ISBN:9787040606591

主编:汤佳、陈晓男

出版社:高等教育出版社

2. https://www.w3school.com.cn 

此站点是学习Web的重要参考网站,里面包含了课程中几乎所有的Web编程语言的使用,而且配有实例,能让学习者轻松理解相应概念及语法。同学学习课程中除Web安全的内容外,都可参考此网站。

3.https://www.runoob.com/

菜鸟教程提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的参考手册及用户笔记,在这里是学习也是分享。站内还设置了专门为了用于检验学习成果的测试/考试程序,让大家学有所用,再次巩固。

4.辅助学习教材:HTML5+CSS3网站设计基础教程

ISBN:9787115410641

作者:传智播客高教产品研发部

出版社:人民邮电出版社

5.辅助学习教材:HTML5+CSS3网页设计与制作

ISBN:9787115523242

作者:黑马程序员

出版社:人民邮电出版社

常见问题

Q : 如何才能学好网页设计?

A : 1、不能像高中一样仅仅只是在教材上用笔划划、读读背背,应该每天坚持练习敲代码实践,从实践的角度理解代码的含义。2、所有知识点需要知其然知其所以然,要对代码有充分的理解,要精确到每一行代码。3、完成有一个完整的项目,用来面试。4、学会交流和沟通,以及编程规范。5、课程结束后,依旧要坚持练习,直到就业。

Q : 开发工具是什么?

A : 本门课程主要用到的程序编辑器是HBuilderX和Google Chrome,可到对应官网下载。

Q : 没有学过编程,可以学习这门课程吗?

A : 可以的。Web前端开发技术3个核心的构成是:HTML、CSS、JavaScript。前两个部分的程序设计不涉及结构化、面向对象程序设计思想,JavaScript部分则涉及到这些,所以HTML和CSS相对而言容易掌握。而JavaScript部分,没有程序设计基础的同学,需要更多练习与实践才能够掌握。

Q : 本门课程怎么考核?

A : 采用项目化考核,人手一题,考核贯穿整个学期,可以充分结合自己的喜好来制作网站。特别强调的是,不会采用笔试,临时抱佛脚的应试是毫无意义的。

Q : 如何开始课程的学习呢?

A :  开始该课程的学习需要从两方面着手准备:

1、了解课程内容组织结构。该课程从内容组织上来看,包括:教学视频、教学课件、课程讨论与答疑、自测习题、单元测试、互评作业、期末考试等环节。其中课程讨论与答疑、单元测试、互评作业和期末考试四部分是课程成绩的构成部分。因此,同学准备开始学习时,可以按照这样的思路展开学习:观看教学视频、学习教学课件、参与课程讨论、完成自测习题、完成单元测试与互评作业,完成期末考试。

2、做好开课前的知识储备。该课程特点是涉及面宽,但每方面并未涉及太深。因此,同学要学好此课程,需要具备相应的先修知识。这些知识主要包含两方面,一方面是关于计算机的基础知识,如果学习过大学计算机基础类的课程,相信在这方面应该不会有太大问题;另一方面是关于计算机程序设计的基础知识,课程中涉及多种与编程有关的语言,因此需要对编程基础知识有所了解。如果以前学习过程序设计类课程,那在学习该课程时会轻松很多。

无锡科技职业学院
1 位授课老师
汤佳

汤佳

教授

推荐课程

彭凯平教积极心理学

大渔大师课

327人参加

彭凯平教情绪心理学

大渔大师课

93人参加
下载
下载

下载App