hi,小慕
网页设计基础
第13次开课
开课时间: 2024年02月26日 ~ 2024年06月26日
学时安排: 3-5小时每周
当前开课已结束 已有 1104 人参加
老师已关闭该学期,无法查看
课程详情
课程评价(710)
spContent=《网页设计基础》已被认定为国家级精品课程。本期内容全面更新为基于HTML5+CSS3的网页网页制作。该课程面向网页前端工作岗位,结合1+X前端考证组织教学内容。通过案例讲解、让大家快速掌握基于HTML5结构的图文混排页面、多列布局等页面制作,导航制作等,通过使用CSS3制作文字特效、设置圆角、边框及阴影、渐变背景、动画等,深入了解CSS3的应用。掌握HTML/HTML5+CSS/CSS3的基本语法,并利用Photoshop进行网页美工图片设计和版面设计等 ,另外提供优秀作品赏析,请加入我们的课堂学习吧。
《网页设计基础》已被认定为国家级精品课程。本期内容全面更新为基于HTML5+CSS3的网页网页制作。该课程面向网页前端工作岗位,结合1+X前端考证组织教学内容。通过案例讲解、让大家快速掌握基于HTML5结构的图文混排页面、多列布局等页面制作,导航制作等,通过使用CSS3制作文字特效、设置圆角、边框及阴影、渐变背景、动画等,深入了解CSS3的应用。掌握HTML/HTML5+CSS/CSS3的基本语法,并利用Photoshop进行网页美工图片设计和版面设计等 ,另外提供优秀作品赏析,请加入我们的课堂学习吧。
—— 课程团队
课程概述

我们将用13周的时间带领大家学会从简单到复杂的网页页面制作,包括制作各类图文混排页面、多列布局的复杂页面和各类导航等,掌握html/html5语言的基本语法、使用CSS布局和美化页面、使用CSS3制作特效文字、圆角边框和动画等,使用html5播放音频和视频文件,使用Photoshop制作导航、按钮、文字特效和修改简单的网页图片素材、进行网页的版面设计和图片切片等。最后我们将提供一个完整静态网站制作的视频讲解。

第14周进行期末测试。


授课目标

《网页设计基础》的培养目标为掌握 HTML/HTML5、CSS/CSS3基础知识,能使用Hbuilder平台或dreamweaver 开发软件独立完成静态网站的设计制作,初步认识HTML5基础知识,使用hmtl5进行音视频文件的播放;使用CSS布局和美化页面、使用CSS3制作特效文字、圆角边框和动画等;能够使用PhotoShop制作网页图片素材,进行图片的修改、合成和切片。

课程大纲

01  网站及网页的创建

1.1 网站和网页知识概述

1.2 创建网站和网页

1.3 网页中的文本和html元素

1.4 CSS样式基础

1.5 设置文字和段落样式

1.6开发平台软件下载和安装说明

01单元 源代码和图片素材下载

01单元 案例效果图和文字内容

01单元导学

01 单元作业

01 单元测试

02 CSS样式和一列布局页面制作

2.1 CSS样式-高级

2.2 使用css+div制作一列固定宽度布局页面

2.3 使用css+div制作一列自适应宽度布局页面

02 单元 案例效果图和文字素材

02 单元 源代码和素材下载

02单元导学

02 单元作业

02 单元测试

03 图文混排页面制作

3.1  图页中的图片

3.2 图文混排页面制作案例

3.3 图文混排页面案例2

03单元 项目效果图和文字素材

03 单元源代码和图片素材下载

03单元 课后仿真练习效果图

优秀作品赏析1:心灵驿站-作品展示和源代码下载

03单元导学

03单元测试

03 单元作业

04 二列布局页面制作

4.1 二列布局页面制作案例1

4.2 二列布局页面制作案例2

04单元 项目效果图和文字素材

04 单元源代码和图片素材下载

04单元 课后仿真练习效果图

优秀作品赏析2:沙画-作品展示和源代码下载

04单元导学

04 单元测试

04 单元作业

05 多列布局页面制作

5.1 三列布局页面制作

5.2 多列布局页面制作

05 单元 效果图和文字素材

05 单元源代码和图片素材下载

05单元 课后项目仿真练习效果图

优秀作品赏析3:古典音乐-作品展示和源代码下载

05单元导学

05单元作业

05单元测验

06  文字、图片链接及应用

6.1 文字和图片链接

6.2 文字链接导航制作和应用

06单元 项目效果图

06单元 源代码和图片素材下载

优秀作品赏析4:书法网-作品展示和源代码下载

06单元课后项目仿真练习效果图

06单元导学

06 单元测试

06 单元作业

07 列表导航的制作与应用

7.1 竖向列表导航制作

7.2 横向列表导航制作

07 单元源代码和图片素材下载

07单元 项目效果图和文字素材

优秀作品赏析5:瓷之都-作品展示和源代码下载

07课后项目仿真练习效果图

07单元导学

07单元测试

07 单元作业

08 CSS3文本和边框效果设计

8.1 CSS3文本效果设计

8.2 CSS3边框与阴影设计

8.3综合应用实例

08单元 效果图

08单元 源代码和图片素材下载

优秀作品赏析6:中华五岳-作品展示和源代码下载

08单元项目仿真练习

08单元导学

08 单元作业

08单元测试

09 CSS3变换及动画制作

9.1CSS3的transform变换

9.2 CSS3动画效果设计

9.3 CSS3背景色渐变效果设计

09单元 项目效果图和文字素材

09单元 源代码和图片素材下载

09单元 项目仿真练习

优秀作品赏析7:口琴-作品展示和源代码下载

09单元导学

09单元测验

09单元作业

10  HTML5表单制作

10.2 表单应用案例及样式设计

10单元 案例效果图

10 单元 源代码和图片素材下载

优秀作品赏析8:中国传统乐器-作品展示和源代码下载

10单元导学

10.1  HTML5表单元素

10 单元测试

10单元作业

11  HTML5基础

11.1 HTML5语法基础

11.2 使用 HTML5播放音频视频文件

11.3 HTML5一些新增元素

优秀作品赏析9:让心去旅行-作品展示和源代码下载

11单元导学

11单元源代码及图片素材下载

视频制作和格式转换软件下载

11单元测试

11 单元作业

12 使用PS制作网页素材

12.1 初识PS

12.2 使用PS制作图片素材

12.3 导航和banner图片设计

12.4 网页版面设计

12单元 项目效果图

12单元 源代码和图片素材下载

优秀作品赏析10:中国戏曲-作品展示和源代码下载

12单元导学

Photoshop开发软件下载

12 单元测试

12单元作业

13 网站整体设计

13.1 网站的制作流程

13.2 使用Photoshop切图

13.3 诗词曲赋主页和导航制作

13.4 唐诗、宋词、元曲、汉赋内容页制作

13.5 网站测试

13 网站视频介绍和源代码下载

13单元 网页效果图

13单元 文字素材

13单元导学

展开全部
预备知识

可以是零基础入门,但建议学习者跟着视频进行案例实践操作,并完成仿真页面制作


参考资料

参考教材和参考网站

       

1.HTML5+CSS3网页设计与制作案例教程(第二版)(十四五国家级规划教材),郭建东主编,科学出版社,2024年第8次印刷

 

2.省级精品在线开放《网页设计基础》:jx.gdgm.cn/skills/wv/30764673





常见问题

Q: 哪些同学可以来学习这门课?

A : 网页设计基础是一门零基础入门课程,只要会电脑基本文件操作的人员都可以来学习,不分专业。但课程还是有点难度,需要学习者花点时间、静下心来学习,并且要做做仿真练习,或跟随教师做案例练习。


Q: 案例中的图片素材和源代码可以下载吗?

A:本网站提供案例图片素材和源代码资源下载


Q:课程可以作为一个学分的选修课学习吗?

A:可以,选择01-07单元的内容可作为选修课内容进行学习,授课老师可以结合线下测试或线下成果评价完成课程内容教学。


Q:学习软件在哪里下载?

A: 可以从本网站第一单元的软件开发平台下载栏目进入下载,或 可以从下面网址网站的下载专区下载:jx.gdgm.cn/skills/wv/30764673



Q:去哪里可以看到更多的优秀作品或其他拓展学习资源?

A:可以去广东省省级精品在线开放课程《网页设计基础》课程平台中进行拓展学习,更多优秀作品和学习资源可复制下面链接地址到浏览器地址栏进入:

jx.gdgm.cn/skills/wv/30764673



Q:是否有混合式教学配套相关资源?

A:有的,请进入: umooc.gdgm.cn/meol/jpk/course/layout/newpage/index.jsp?courseId=10654   (寒暑假期间学校有可能关闭外网访问,正常开学后会开放)



广东工贸职业技术学院
3 位授课老师
郭建东

郭建东

教授

黄培泉

黄培泉

讲师

张淑芬

张淑芬

助讲

推荐课程

人工智能:模型与算法

吴飞

17259人参加

人工智能实践:Tensorflow笔记

曹健

36045人参加

武忠祥·高等数学·解忧铺

武忠祥

1066357人参加

【26考研】考研数学实战通关秘籍

武忠祥

524人参加
下载
下载

下载App