spContent=你想学习网页设计吗?本课程教你如何进行软件界面设计(UI设计)。学习完本课程后,你能熟练使用HTML、CSS、 JavaScript等客户端技术完成静态网页设计;你能学习到一定的美术基础知识;你能了解HTML5、AJAX、jQuery等网页设计新技术;你能熟练掌握PhotoShop、Flash、Dreamweaver等常用工具的使用。
你想学习网页设计吗?本课程教你如何进行软件界面设计(UI设计)。学习完本课程后,你能熟练使用HTML、CSS、 JavaScript等客户端技术完成静态网页设计;你能学习到一定的美术基础知识;你能了解HTML5、AJAX、jQuery等网页设计新技术;你能熟练掌握PhotoShop、Flash、Dreamweaver等常用工具的使用。
—— 课程团队
课程概述
《网页设计客户端技术》课程是软件技术(软件开发方向)专业的专业基础课程。本课程旨在培养学生进行软件界面设计(UI设计师)的能力。要求学生能熟练使用HTML、CSS、 JavaScript等客户端技术完成静态网页设计;具有一定的美术基础知识;了解HTML5、AJAX、jQuery等网页设计新技术;基本掌握PhotoShop、Flash、Dreamwaver等常用工具的使用。 本课程主要分为6个模块,模块1:HTML超文本标记语言,认识HTML、HTML标签及其属性,认识和掌握HTML文档的结构,学会使用表格、层和框架及框架集来完成页面布局,学会表单的 设计;模块2:CSS级联样式表,认识和掌握CSS选择器,学会使用字体、文本和背景属性美化网页,使用边框、边距等属性;模块3:JavaScript 脚本语言,JavaScript程序输入输出 ,分支和循环结构,异常验证和JavaScript对象;模块4:网页设计相关软件介绍,模块5:美工基础知识,学习对颜色的认识和色彩的搭配;模块6:新技术介绍。为了实现分层教学 ,本课程分为2个部分,第一部分:必修部分,学习内容为前3个模块,第二部分:选修部分,学习内容为后3个模块。也可根据课程的实际课时对学习内容做适当调整。
授课目标
找到适合自己的学习方法:阅读教材、查阅网络相关资源、动手操作、理解记忆、背诵等,学中做、做中学;
锻炼自己的学习能力:多留意你看过的网站,如网易、新浪、银行网站、学校网站等不同类型的网站,思考他们是如何设计的;
提高自己的操作水平:通过课程的学习要达到能正确地编写网页设计代码,能设计一些简单布局的网站,如设计一个个人网站、学习网站等。
课程大纲
模块1:HTML超文本标记语言
课时目标:模块1:HTML超文本标记语言,认识HTML、HTML标签及其属性,认识和掌握HTML文档的结构,学会使用表格、层和框架及框架集来完成页面布局,学会表单的 设计。
任务1 认识HTML
任务2 认识HTML标签的属性
任务3 使用定义文档结构、文字与段落等标签设计网页
任务4 使用层、表格布局等标签设计网页
任务5 使用项目符号和列表、超链接等标签设计网页
任务6 使用表单标签设计网页
任务7 使用框架集、框架等标签设计网页
任务8 使用图像、图像映射及其他标签设计网页
模块2:CSS级联样式表
课时目标:模块2:CSS级联样式表,认识和掌握CSS选择器,学会使用字体、文本和背景属性美化网页,使用边框、边距等属性。
任务1 认识CSS
任务2 认识CSS的选择器
任务3 使用字体、文本、背景属性美化网页
任务4 使用边框、边距属性美化网页
任务5 使用表格、列表及定位属性美化网页
模块3:JavaScript 脚本语言
课时目标:模块3:JavaScript 脚本语言,JavaScript程序输入输出 ,分支和循环结构,异常验证和JavaScript对象。
任务1 认识JavaScript
任务2 掌握JavaScript的语法
任务3 使用JavaScript分支结构编程
任务4 使用JavaScript循环结构编程
任务5 了解JavaScript的异常、验证及内置对象
任务6 了解JavaScript JSON数据格式
模块4:相关软件介绍
课时目标:模块4:网页设计相关软件介绍
任务1 软件的安装及使用入门
任务2 使用Flash软件制作导航及简单动画
任务3使用Dreamweaver软件设计静态网页
模块5:美工基础知识
课时目标:模块5:美工基础知识,学习对颜色的认识和色彩的搭配。
任务1 认识颜色
任务2 网页色彩搭配
任务3 使用PhotoShop处理图像
模块6:新技术介绍
课时目标:模块6:新技术介绍。
任务1 认识HTML5
任务2 介绍XHTML
任务3 了解CSS3
展开全部
预备知识
参考资料
教材:《网页设计实战教程(HTML+CSS+JavaScript) 》清华大学出版社出版,陈翠娥主编,2018年8月出版
w3shool学习网站:(https://www.w3shool.com)