期待已久的Dreamweaver软件教程终于和大家见面啦!老师一贯的细致全面讲解风格,注重每个专业术语的概念介绍和软件实操相结合,帮助大家全面理解掌握Dreamweaver的使用,以及HTML/CSS样式/JavaScript/jQuery以及网页交互效果的添加。
本套课程基于Dreamweaver CC2015版本进行讲解,从软件的基本工具命令到新增功能逐一介绍并结合实际案例进行演示,几乎每个小节结束后,老师都会针对本小节知识点布置对应作业供大家独立思考操作练习,并且在第二节课开始对作业进行分析,以便大家检查作业完成是否正确。
本课程适用于网页设计零基础学员,在实际工作中,网页前端设计是基于设计稿完成之后的一个职位,需要会基本的Photoshop操作,尤其切片工具、文件格式等知识点在网页前端使用频率非常高,因此建议大家先学会《Photoshop CS6零基础入门教程》。课程细致全面,学习模式专业系统,是套不可错过的入门教程。
(一)了解什么是行为?如何利用Dreamweaver CC 行为实现交换图像效果、添加弹出信息、打开浏览器窗口、动态改变DIV中文本内容、设置关闭页面链接等。
1/变换图像效果 2/ 添加弹窗效果 3/折叠标签效果
(二)了解jQuery Accordion构件,通过插入accordion构件实现用户操作的交互式行为,并且利用CSS样式定义accordion样式,实现元素抖动及元素渐隐的效果等。
4/元素抖动效果 5/元素渐隐效果
第一章 开发环境认识和本地站点创建
|
介绍Internet、网站、网页的概念,以及一个完整的网站通常需要新建HTML文件、DIV“圈地”、CSS定义样式、Javascript、jQuery制作交互动画。 |
网站开发软件Dreamweaver基本介绍,包括工作区、切换和拆分视图、处理面板、选择工作区布局、调整工具栏、个性化首选项、创建自定义的快捷键、站点目录知识、“属性”检查器、“CSS设计器等。 |
一个完整的网站制作流程通常会包括:设计稿、切图素材、构建布局搭建DIV、搭建CSS和JS效果等步骤,课程中会以实例的形式进行演示讲解。 |
第二章 HTML/XHTLM和HTML5
|
初步认识HTML,简单介绍HTML基础结构。 |
讲解常用的HTML标签,包括基本标签、格式标签、文本标签、超链接标签、图像标签、表格标签等的基本编写格式及用法。 |
讲解和介绍HTML/XHTML/HTML5在功能和书写上的区别,如何新建HTML5文档以及标签书写规范。 |
介绍HTML5新增标签,并通过一个简单的天猫页面实例介绍标签在实际网页设计中的用法。 |
第三章 CSS基础
|
讲解CSS的基本概念,HTML格式化与CSS格式化的比较和CSS的基本语法。 |
CSS内联样式表、内嵌样式表、外部样式表以及样式表的优先等级 |
包括如何创建标签CSS样式、类CSS样式、IDCSS样式以及复合CSS样式 |
讲解包括CSS的层叠理论、继承理论、后代理论和特征理论,解释了css样式规则起作用的原理。 |
第四章 网页的整体设置
|
讲解为网页添加关键词、网页说明以及设置网页字体及视口的方法和实例演示。 |
讲解使用“页面属性”设置网页的背景图像及默认边距,设置跟踪图像,设置超链接文本的相关属性及为网页添加标题文字等。 |
讲解设置网页定时跳转、通过CSS样式控制网页元素的布局、站点的切换导入及管理、设置设计窗口的大小以及软件标尺及网格的显示隐藏方法。 |
第五章 DIV+CSS基础布局
|
讲解什么是DIV,盒子模型的概念,以及Dreamweaver CC新增CSS设计器的用法,盒子模型中边距的设置,填充设置、边框设置及背景颜色、背景图像设置等。 |
包括元素宽度、高度的定位,相对定位和绝对定位,固定定位和浮动定位的概念讲解及实例演示。 |
讲解HTML代码元素中块元素、内联元素的概念,两者之间的区别及联系。 |
通过几个实操案例加深盒子模型、元素定位及块元素、内联元素的理解,熟悉CSS设计器的使用。 |
第六章 网页文本控制
|
讲解如何使用css定义文字的颜色、大小、粗细等属性,如何设置管理网页字体。 |
通过几个实例演示文本导入、创建语义结构以及创建文本缩进效果等。 |
讲解如何制作无序项目列表、有序编号列表、定义列表以及设置列表属性,并制作简单的项目列表案例。 |
讲解插入水平线、特殊字符、系统日期的方法,以及设置文本滚动效果。 |
第七章 图像和多媒体的应用
|
在Dreamweaver中插入图片的各种方法,插入非web类型文件,如何在DW使用Photoshop“智能对象”,利用CSS的类调整图像属性,利用属性检查器优化图像。 |
讲解背景图像属性设置,包括图像的渐变色、图像位置、尺寸、定位区域、平铺方式及实例演示。 |
在网页中插入web动画、视频、音乐的不同种方法。 |
第八章 表格和表单的使用
|
介绍构成表格的基本标签、表格的样式设置,使用CSS美化表格的方法,如何导入外部表格以及表格的排序。 |
表单的介绍、插入表单的方式,设置表单的属性,表单文本的三种类型,通过实例演示制作邮件、url表单、TEL表单以及时间和日期相关表单等。 |
主要讲解表单中单选按钮、复选按钮,提交按钮、重置按钮以及普通按钮。表单中复选框的设置、选择域设置等。 |
第九章 超链接基础知识
|
超链接标签属性及代码编写方法,超链接中的内部链接和外部链接,相对链接和绝对链接等。 |
创建文字链接的各种方法,创建按钮超链接的方法及使用CSS定义按钮样式、鼠标指针设置及页面检查。 |
讲解创建内部和外部链接、空链接、热点链接、基于图像的链接以及建立电子邮件链接等。 |
第十章 DIV+CSS布局综合应用
|
讲解CSS布局设置,以及如何设置一列宽、两列宽、三列宽等布局方式。 |
通过126邮箱的页面讲解CSS样式设置网页页面的布局方式,包括页面导航栏设置,左侧栏设置等。 |
126邮箱页面综合案例讲解包括文字样式、按钮、布局、表单等相关知识。 |
第十一章 模板的使用
|
讲解如何创建新模板、在模板中定义可选区域、可编辑区域,创建基于模板的网页页面以及编辑和更新模板等操作。 |
通过实例讲解模板的使用及理解模板及基于模板页面之间的联系。 |
讲解如何创建库项目,在页面中插入库,以及编辑、更新和分离库的操作方法。 |
通过实例讲解库项目的使用方法,正确使用库项目以提高工作效率等。 |
第十二章 为网页添加交互
|
了解什么是行为,如何利用Dreamweaver行为实现交换图像效果、添加弹出信息、打开浏览器窗口、动态改变DIV中文本内容、设置关闭页面链接等。 |
了解使用jQuery Accordion构件,通过插入accordion构件实现用户操作的交互式行为,利用CSS样式定义accordion样式。实例演示jQuery实现元素抖动及元素渐隐的效果等。 |
第十三章 网站建设规范及知识拓展
|
包括主要网页主要元素命名规范,页面结构、导航、功能的ID命名规范,网站公用相关命名,电子贸易相关命名以及文件夹命名规范等。 |
HTML5代码编写规范以及HTML4兼容布局,标签的基本编写规范,以及推荐使用的标签缩进规范、图片alt规范、标签语义规范以及注释规范。代码设计时相关设置推荐等方面知识拓展。 |