网页设计基础
分享
课程详情
课程评价
spContent=当今互联网时代,网页已经成为信息传递和交互的重要工具,我们通过网页发布公司信息,了解世界各地发生的新闻事件,学习和传递新知识新技术……我们使用网页记录旅游的足迹、成长的印记……网页真可谓无处不在。一个个图文并茂、融合技术和艺术的网页让我们的生活更加美好。
—— 课程团队
课程概述

我们将用12周的时间预计48学时带领大家学会使用Dreamweaver平台制作简单和复杂的网页页面,包括制作一级导航和多级导航、制作可切换面板和选项卡式面板等,掌握html和html5语言的基本语法、学会使用html5播放音频和视频文件,学会使用Photoshop制作和修改简单的网页图片素材等。

对学有余力者,我们提供了Html5的拓展学习内容,全面了解html5的新特性,并模拟手机页面查看网页效果,如何申请和使用云空间等知识。

《网页设计基础》课程面向网页前端工作岗位,通过大量的案例讲解和视频辅助学习,让大家快速掌握基于HTML+CSS+DIV的静态网页设计和网页美工设计的基本知识和基本技能。



授课目标

《网页设计基础》的培养目标为掌握 HTML、CSS基础知识,能使用dreamweaver 平台或sumblime开发软件独立完成静态网站的设计制作,初步认识HTML5基础知识,使用hmtl5进行音视频文件的播放,能够使用PhotoShop制作网页图片素材,进行图片的修改、合成和切片。

课程大纲

第一单元 网站及网页的创建

1.1 网站和网页知识概述

1.2 创建网站和网页

1.3 在网页中添加文字图片

1.4 CSS样式初探

1.5 设置文字和段落样式

 

第二单元 CSS+DIV布局简单页面

2.1 CSS样式、DIV层和命名规范

2.2 使用css+div制作一列布局页面

2.3 一列布局图文混排页面制作

2.4 在页面导航层中添加列表文字

2.5 html网页元素初探

 

第三单元 复杂页面设计与制作

3.1 外部样式的创建和引用

3.2 二列布局页面制作

3.3 三列布局页面制作

3.4 多列布局页面制作

 

第四单元 网页导航设计

4.1 文字和图片链接

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

4.3 列表导航制作和应用

 

第五单元 使用Spry框架制作复杂导航和可切换面板

5.1 横向多级导航制作

5.2 竖向多级导航制作

5.3 选项卡式面板制作

5.4多折叠面板制作

5.5 单折叠面板制作

 

第六单元 HTML基础

6.1 HTML基础

6.2 使用Sublime编辑器编写网页代码

 

第七单元 HTML5基础

7.1 HTML5概述

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

7.3 HTML5提升篇-学有余力者拓展学习

 

第八单元 使用Photoshop制作和处理网页图片

8.1 初识PS

8.2 使用PS制作图片素材

8.3 使用PS制作网页版本设计和切图

8.4 使用Photoshop进行网页版面设计

 


预备知识

零基础入门


证书要求

学习要求:

1、按时完成课堂测试和作业

2、积极参与课堂讨论

3、参与讨论区的讨论,并回答过同学们提出的问题

 

成绩评定包括如下部分:单元作业20%+单元测试30%+课堂讨论20%+期末测试30%。

其中:有6章内容提供了单元作业,完成单元作业后要参与互评,至少给5个同学作业打分。有6章内容提供了单元测试,每单元最多可测试3次,以最后一次成绩为准。要求参与学习的同学积极参与每单元的课堂交流讨论,这部分占分值20分。

 

总评成绩达到60分及以上的,可以获得本课程的合格证书。

总评成绩达到85分及以上的,可以获得本课程的优秀证书。





参考资料

参考教材


l  网页设计与制作案例教程,郭建东主编,科学出版社,2016

l  网页设计案例教程,郭建东主编,科学出版社,2012


常见问题

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

A : 网页设计基础是一门入门课程,只要会电脑基本文件操作的人员都可以来学习,不分专业

 

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

A:本网站提供案例图片素材资源下载,也可以从下面网址网站的下载专区下载:jx.gdgm.cn/skills/wv/30764673

 

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

A:可以,选择前四个单元的内容可作为一学分内容进行学习,学时为24学时,授课老师可以结合线下测试或线下成果评价完成课程内容教学。

 

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

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

 

Q:初学者用什么软件开发平台?

A:建议用Dreamweaver cs6版本,初步掌握CSS、HTML知识后可改用sublime或Dreamweaver CC 2017或2018版本。