我们将用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 (寒暑假期间学校有可能关闭外网访问,正常开学后会开放)