Dreamweaver第1课
第1章 初识Dreamweaver CC课件PPT
1.7
第1章 认识 Dreamweaver CC
1.2 Dreamweaver CC的工作界面和基本操 作
1.2
第1章 认识 Dreamweaver CC
1.1 Dreamweaver CC概述
Dreamweaver CC是美国Adobe公司推出的集网页制作和站点管理于一身的网页制 作软件，也是第一个专门为网页设计师量身定制的可视化网页制作软件，利用它可以制 作出跨越平台限制和浏览器限制的、充满丰富动感的网页。以前，网页设计者在制作网 页时必须熟练掌握HTML语言和JavaScript，但是现在设计者使用Dreamweaver CC就 可以轻松制作出精美的网页，而且在制作过程中可以同步预览制作效果，使得网页设计 过程简单明了。
1.4
工作区设置对话
第1章 认识 Dreamweaver CC
1.2 Dreamweaver CC的 Nhomakorabea作界面和基本操 作
1.2.2 Dreamweaver CC的工作界面
1.5
第1章 认识 Dreamweaver CC
1.2 Dreamweaver CC的工作界面和基本操 作
1. 菜单栏 菜单栏中包含了Dreamweaver CC操作的所有命令。这些命令按照操作类别分为“文
件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“ 窗口”、“帮助”10个菜单。 2. 文档工具栏
文档工具栏中包含“代码”、“拆分”、“设计”、“实时视图”等视图显示方式， 相互之间可以快速切换，并且可以设置文档的标题。
Dreamweaver CC教案
《Dreamweaver网页设计与制作》项目一创建站点
《Dreamweaver网页设计与制作》项目二制作简单的文字页面
《Dreamweaver网页设计与制作》项目三制作图像页面
《Dreamweaver网页设计与制作》项目四使用表格布局网页
《Dreamweaver网页设计与制作》项目五运用CSS样式美化网页
《Dreamweaver网页设计与制作》项目六制作图像页面
《Dreamweaver网页设计与制作》项目七制作图像页面
《Dreamweaver网页设计与制作》项目八设置页面中的超链接
《Dreamweaver网页设计与制作》项目九使用框架布局页面
《Dreamweaver网页设计与制作》项目十使用浮动框架布局页面
《Dreamweaver网页设计与制作》项目十一 AP Div在网页中的应用
《Dreamweaver网页设计与制作》项目十二使用模板提高网页制作效率
《Dreamweaver网页设计与制作》项目十三库项目在网页中的应用
《Dreamweaver网页设计与制作》项目十四使用行为和JavaScript为网页添加特效。
DW简介
对象面板
对象面板主要功能相当于插入菜单，主要是向网页中插入一些对象， 如表格，框架，图象，层，Flash动画等，它通过一个下拉菜单，把
要插入的选项都包括在了其中。 每一个选项中都有若干个图标，只要在图表上单击一下，就可以插
入想要插入的对象了。
属性面板
属性面板会随着编辑的内容而变化，它里面包含了所要编辑的文字的所有内 容，包括字体，颜色，大小，连接，缩进等，它的右下角还有一个向下的小 三角箭头，单击它，会展开属性面板，它把一些不常用的属性也列出来。展 开后，箭头会变成向上，单击它，又会使属性面板复原。属性面板很多，还 有图象属性控制面板，层属性控制面板等对象的属性控制面板，用户只要选 择要编辑的对象，它就会自动变化，挺方便的。用户对所有由启动面板弹出 来的浮动面板在被打开后，可以重新组合，可以将经常用的面板单独地拉出 来，只需要将鼠标放到想要拉的按钮上面，然后按住左键拖动就可以了，同
PPT素材：/sucai/ PPT图表：/tubiao/ PPT教程： /powerpoint/ 范文下载：/fanwen/ 教案下载：/jiaoan/ PPT课件：/kejian/ 数学课件：/kejian/shu xue/ 美术课件：/kejian/me ishu/ 物理课件：/kejian/wul i/ 生物课件：/kejian/she ngwu/ 历史课件：/kejian/lish i/
引擎"Presto" 作为网页预览。
DW功能
PART ONE
网页制作
Dreamweaver是针对专业网页设计 师 特别发展的视觉化网页开发工具， 利用它可以轻而易举地制作出跨越 平台限制和跨越浏览器限制的充满 动感的网页。
网站管理
使用网站地图可以快速制作网站雏形、 设计、更新和重组网页。改变网页位置 或档案名称，Dreamweaver会自动更新 所有链接。使用支援文字、HTML码、 HTML属性标签和一般语法的搜寻及置 换功能使得复杂的网站 更新变得迅速又简单。
网页制作第一节教案
【第六章第一节网页制作】教案一、【教学目标】1、理解网页与网站的概念3、掌握页面文件与图片的保存二、【教学重点】三、【难点、关键】1．建站点的位置2．页面文件与图片的保存四、【教学方法】演示、任务驱动法五、【课时安排】3课时六、【教学环境】多媒体教育广播系统，Dreamweaver软件七、【教学过程】第1课时1．导入新课师：上节课已经讲了信息集成（也就是网站建设）的一般过程包括四个阶段，现在请同学们回顾一下。
生：学生作答。
师：同学们平时都有喜欢上网，那大家知道网站与网页的区别吗？概念：网页：通常我们在WWW上所能看到的每一个页面都称之为网页,它能够形象地比喻成一篇文章.网站：网站是多个网页的集合,即由多个网页通过彼此相连而构成的一个整体,能够形象地比喻成一本杂志或一本书.下面我们来学习如何用Dreamweaver这个软件制作网页。
2．新课讲述在制作个人网站之前，应先确定网站的主题。
2008奥运会即将来临，这是中国政治，经济等综合国力提升到另一台阶的盛事，我们中学生也得供献一分锦力本节课的主题是围绕“心系奥运”，资料（包括文字、图片、动画）等我已经为大家收集好，内容分类，网站的结构也规划好了，利用Dreamweaver这个工具来完成“心系奥运”这个网站的建设一、启动Dreamweaver，理解其工作界面“开始”-“程序”-“Macromedia Dreamweaver 8”Dreamweaver工作界面包括：菜单栏插入栏编辑窗口属性面板浮动面板组1．菜单栏（包括10个菜单项）符号所表示的含意黑色命令：表示该命令当前是可用的灰色命令：表示该命令当前是不可用的，需要满足一定的条件后才能使用。
带有复选标记√的命令：表示该命令是一种可选择命令，若前面出现√标记，表示该命令正在使用；若没有√标记时，表示该命令没有被使用。
带有三角形▼的命令：表示在该命令下还有下一级子菜单命令。
带有省略号的…的命令：表示选择命令后会弹出一个相关的对话框。
初中dreamweaver教案
初中dreamweaver教案课程目标：1. 让学生了解并掌握Dreamweaver的基本操作和功能。
2. 培养学生运用Dreamweaver制作网页的技能，提高学生的信息素养和审美能力。
3. 培养学生团队协作能力和创新精神，激发学生对网页设计与制作的兴趣。
教学内容：1. Dreamweaver的启动与界面认识2. 网页基本元素的操作与编辑3. 网页布局与设计4. 添加多媒体元素5. 网页代码的编辑与调试6. 网页的预览与发布教学重点与难点：1. 网页基本元素的操作与编辑2. 网页布局与设计3. 添加多媒体元素4. 网页代码的编辑与调试教学准备：1. 安装好Dreamweaver软件的计算机2. 教学PPT3. 网页素材教学过程：一、导入（5分钟）1. 向学生介绍Dreamweaver是一款优秀的网页设计与制作软件，广泛应用于网页制作领域。
2. 引导学生关注网页设计与制作在现实生活中的应用，激发学生的学习兴趣。
二、基本操作与编辑（15分钟）1. 讲解并演示Dreamweaver的启动与界面认识，让学生熟悉软件的操作环境。
2. 讲解并演示网页基本元素（如文本、图像、链接等）的操作与编辑方法。
3. 学生跟随老师一起操作，掌握基本元素的操作技能。
三、网页布局与设计（20分钟）1. 讲解并演示网页布局的方法，如表格布局、框架布局等。
2. 讲解并演示如何使用Dreamweaver的“设计”视图进行网页设计。
3. 学生跟随老师一起操作，学会网页布局与设计的基本方法。
四、添加多媒体元素（15分钟）1. 讲解并演示如何在网页中添加多媒体元素，如音频、视频、动画等。
2. 学生跟随老师一起操作，学会添加多媒体元素的方法。
五、网页代码的编辑与调试（10分钟）1. 讲解并演示如何使用Dreamweaver的“代码”视图进行网页代码的编辑。
2. 讲解并演示如何使用Dreamweaver的调试工具进行网页代码的调试。
3. 学生跟随老师一起操作，掌握网页代码的编辑与调试方法。
2024版Dreamweaver教学计划
04 表格与层布局应用
表格创建及属性设置
创建表格
通过Dreamweaver的表格工具可以快速创建表格， 设置行数列数、表格宽度、边框等属性。
单元格属性设置
可以设置单元格的背景色、字体样式、对齐方式 等属性，以实现丰富的表格效果。
表格嵌套
可以在一个表格中嵌套另一个表格，实现更复杂 的布局效果。
层布局原理及实现方法
C
AJAX在动态网页中的应用场景
如实时搜索、自动完成、无刷新评论等场景 的应用方法。
AJAX核心技术
包括XMLHttpRequest对象、JSON数据格 式、回调函数等核心技术。
B
AJAX优缺点分析
了解AJAX技术的优点如提高用户体验、减 少服务器负载等，以及缺点如安全性问题、 浏览器兼容性问题等。
06本输入框（Text Fields）
用于用户输入单行文本信息，如用户名、密码等。
密码输入框（Password Fields）
用于用户输入密码，输入内容会以星号或点的形式隐藏。
单选按钮（Radio Buttons）
提供一组选项，用户只能选择其中一个。
表单元素类型及功能介绍
CSS样式表创建和编辑方法
创建CSS样式表
可以通过新建文本文件并保存为.css格式来创建CSS样式表，也可以在HTML文件中使用<style>标签内嵌 CSS代码。
编辑CSS样式表
可以使用任何文本编辑器来编辑CSS样式表，也可以使用专业的CSS编辑器如Adobe Dreamweaver等。
CSS样式表在网页中应用实例
学会使用 Dreamweaver创建和 编辑网页，包括文本、 图像、链接等元素的添 加和编辑。
了解HTML、CSS、 JavaScript等网页开发 语言的基础知识，并能 够运用它们进行简单的 网页开发。
dreamweaver课件ppt
框架布局
03
介绍如何使用框架来布局网页，包括如何在框 架中嵌套其他元素，以及如何使用框架来实现
复杂的页面布局。
框架样式
02
介绍如何使用CSS来控制框架的外观，包括边 框、间距、背景色等。
框架数据
04
介绍如何使用框架来展示数据，包括如何在框 架中嵌入其他网页或网页元素，以及如何使用
Dreamweaver支持多种编程语言，包括HTML、CSS、 JavaScript等，并提供了丰富的插件和扩展，以帮助开发者 提高工作效率。
Dreamweaver的历史与发展
Dreamweaver自1997年首次发布以 来，已经经历了多个版本的更新和改 进。
目前，Dreamweaver已经成为一款功 能强大、易用性强的网页设计和开发 软件，被广泛应用于网页设计和开发 领域。
框架来实现数据的展示和交互。
04
网站开发与管理
网站的规划与设计
确定网站目标和定位
在规划阶段，需要明确网站的目的和定位，考虑网站的用户群体 、功能需求和内容构成。
网站布局与风格设计
根据目标用户的需求和喜好，进行网站的整体布局和风格设计，包 括色彩搭配、字体选择和页面元素布局。
网站导航与信息架构
设计易于理解和操作的导航系统，以及清晰的信息架构，以便用户 快速找到所需内容。
等，以及如何创建这些元素。
表单验证
讲解如何使用JavaScript进行表单 验证，包括验证用户输入的内容是 否符合要求，以及如何处理表单提 交等。
表单提交
介绍如何将表单数据提交到服务器 ，包括使用POST和GET方法进行提 交，以及如何处理表单提交的响应 等。
数据库的连接与操作
Dreamweaver网页设计 课程标准(电商网站方向)
《Dreamweaver网页设计》课程标准适用专业：电子商务专业学分数：7总学时数：108 理论课时：64 实践课时：44一、理论教学部分（一）课程的性质和任务1．课程性质：《Dreamweaver网页设计》本课程是计算机各专业的一门实践性很强的技术基础课，是一门必修的专业课。
主要学习如何利用Dreamweaver这个软件进行网页的设计与制作。
2．课程任务：本课程的主要任务是介绍利用Dreamweaver开发工具进行网页设计，包括新建、编辑和设置一个Web站点；如何对页面属性进行基本的设置，如何设置、编辑CSS层叠式样式表；如何排版文字、表格和层；如何进行基本的图像处理；建立框架；模板和库的使用和编辑；网站的发布与维护等基本知识与应用。
目的是通过本课程的学习，培养学生的实际动手能力和计算机的操作能力，能够运用所学的知识进行网页设计。
（二）教学内容和教学要求第一章 Dreamweaver基础（2学时）【教学内容】一、Dreamweaver 的历史和简介；二、Dreamweaver 8.0的安装过程；三、Dreamweaver 8.0 的全新界面；四、改进的设计与开发环境；五、主菜单介绍；六、对象控制面板介绍。
【教学目的与教学要求】掌握Dreamweaver的基本特点、新增功能及界面组成。
基本操作，如安装、新建、打开、导入、保存、关闭等；理解新增功能、界面组成的优点；了解Dreamweaver可以为我们做些什么。
第二章网页设计语言基础（7学时）【教学内容】一、HTML及XHTML语言介绍；二、常用的网页语法标记。
【教学目的与教学要求】理解HTML及XHTML语言介绍，常用的网页语法标记。
第三章文本和图像处理（4学时）【教学内容】一、文本属性面板介绍；二、编辑文本和插入对象；三；设置文本的格式；四、编号与项目符号；五、在网页中插入图像；六、图像的应用。
【教学目的与教学要求】掌握设置文本属性和格式，编号与项目符号的使用，插入、编辑和排版图像；理解如何进行图像调整。
我爱自学网DreamweaverCS6课程笔记
Adobe DreamweaverCS6课程笔记第一节、Dreamweaver CS6软件简介和安装1、DreamweaverCS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。
2、为了保让能够正常安装，在安装时，请断开网络。
第二节、DWCS6软件界面的简介一、软件界面组成1、菜单栏2、工作区3、属性栏4、浮动面板（文件、资源、CSS样式、行为等）二、界面的切换：为满足不同人群的需求。
三、界面的恢复：窗口——工作区——重置设计器四、插入面板的调用。
第三节、网页相关知识1、DreamweaverCS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。
2、什么是网页（网页的概念）在互联网上基于http协议传播信息的页面。
3、什么是网站反应同一主题的多个网页的集合。
4、网页内容的组成(网页元素)（1）文字（2）图片（jpg，gif，png）（3）动画（swf，gif）（4）多媒体（5）超链接（6）表单（7）网页特效（8）其它元素第四节、网页制作方法与站点建立1、网页的制作方法（1）代码法：html（2）软件制作：Dreamweaver 、frontpage（所见即所得）。
2、制作网站前准备工作：建立站点。
3、站点：用来存放网站中所有元素的文件夹，为了制作方便需要将这个文件夹和制作软件相链接。
4、站点的建立(链接)（1）站点——建立（2）文件面板（3）应用程序栏（窗口——应用程序栏）5、站点的分类（按照网站的位置）（1）本地站点（2）远程站点第五节、规划本地站点目录结构1、规划本地站点目录结构（1）images（图片）（2）swf（动画）（3）css（CSS样式）（4）script（存放网页特效）JS（5）other（其它）2、网站主页名称（1）（2）（3）（4）注：主页必须放在网站的根目录下面，同时名称也有特殊的要求。
第六、七节、网页中文字的输入1-21、网页的四个视图（1）设计视图（2）代码视图（3）拆分视图（4）实时视图2、网页中的文字（1）文字直接输入就可以了。
DW第一课
第一课 简介
1.1.2 Dreamweaver 8的工作界面
关于集成的 Dreamweaver 8 工作区（仅适用于 Windows） 在Windows系统中的集成 Dreamweaver 8中默认的工作 区布局是设计器工作区布局， 全部窗口和面板都被集成到一 个更大的应用程序窗口中，如 图1-1-1所示。
文件管理：显示文件管理下拉列表框。
在浏览器中预览/调试：允许用户选择一个浏览器预览或调试文档。 刷新设计视图：当用户在“代码”视图中进行更改后需刷新文档的 “设计”视图。在执行某些操作之前，用户在“代码”视图中所做 的更改不会自动显示在“设计”视图中。
视图选项：允许用户为“代码”视图和“设计”视图设置选项。
具栏，如图1-1-7所示。
第一课 简介
图1-1-7
除了视图按钮，以下选项出现在文档工具栏中。
服务器调试：显示一个报告，帮助用户调试当前 ColdFusion 页。 文档标题：能够显示在浏览器标题栏中的文字。
没有浏览器/检查错误：使用户可以检查跨浏览器兼容性。
第一课 简介
验证标记：验证当前文档或选定的标签。
图1-1-16
第一课 简介
框架按钮组的下拉框中共有13种预设框架，如图1-1-17所示。
图1-1-17
第一课 简介
使用插入栏的“表单”选项卡
插入栏中的“表单”选项卡包含用于创建表单和插入表单 元素的按钮（如图1-1-18所示），可以与Web站点的访问者进行
交互或从他们那里收集信息。
图1-1-18
第一课 简介
本章要点
☆Dreamweaver 8的功能 ☆ Dreamweaver 8的工作界面 ☆ Dreamweaver 8的基本应用 ☆网页的基本创建
第01课 初识Dreamweaver 8
动态网页
与静态网页相对应的，能与后台数据库进行交互，数据传递。也就是说， 网页 URL的后缀不是.htm、.html、.shtml、.xml等静态网页的常见形动态网 页制作格式，而是以.aspx、.asp、.jsp、.php、.perl、.cgi等形式为后缀，并 且在动态网页网址中有一个标志性的符号——“?”。动态网页可以用visual studio2008等来实现。
设计网页的原则 网页设计的一般步骤 网页制作的常用工具
设计网页的原则
整体规划 鲜明的主题 善用图像
及时更新 易记的网站名称 通用网页
醒目的导航
动画适量
网页设计的一般步骤
规划网站 收集整理资源
测试站点
发布站点作的常用工具
总之，动态网页是基本的html语法规范与Java、VB、VC等高级程序设计 语言、数据库编程等多种技术的融合，以期实现对网站内容和风格的高效、 动态和交互式的管理。因此，从这个意义上来讲，凡是结合了HTML以外的 高级程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网 页。
网页设计的相关知识
网页设计软件 Dreamweaver是目前使用最多的网页设 计软件。 图像处理软件 制作网页图像的软件种类繁多，大多数网页 设计人员选择的是Fireworks或Photoshop 动画制作软件 网页动画制作中最常用的软件非 Flash 莫属。
Dreamweaver 8的基本操作
按表现形式分类
按网页的表现形式可将网页分为静 态网页和动态网页。
静态网页
在网站设计中，纯粹HTML（标准通用标记语言下的一 个应用）格式的网页通常被称为“静态网页”，静态网页是 标准的HTML文件，它的文件扩展名是。htm、.html，可以 包含文本、图像、声音、FLASH动画、客户端脚本和ActiveX 控件及JAVA小程序等。静态网页是网站建设的基础，早期的 网站一般都是由静态网页制作的。静态网页是相对于动态网 页而言，是指没有后台数据库、不含程序和不可交互的网页。 静态网页相对更新起来比较麻烦，适用于一般更新较少的展 示型网站。容易误解的是静态页面都是htm这类页面，实际 上静态也不是完全静态，他也可以出现各种动态的效果，如 GIF格式的动画、FLASH、滚动字幕等。
dw网页课程设计报告
dw网页课程设计报告一、课程目标知识目标：1. 学生能够理解DW网页设计软件的基本功能与操作界面，掌握网页制作的基本流程。
2. 学生掌握HTML和CSS的基础知识，能够运用代码实现简单的网页布局与样式设计。
3. 学生了解网站结构、导航栏、图片轮播等网页元素的布局与设计方法。
技能目标：1. 学生能够使用DW软件进行网页设计与制作，实现个性化的网页效果。
2. 学生能够运用HTML和CSS知识编写代码，解决网页布局与样式问题。
3. 学生能够独立完成一个简单的网页作品，并在课堂上进行展示与交流。
情感态度价值观目标：1. 培养学生热爱互联网事业，关注网络技术的发展与应用。
2. 培养学生具备良好的审美观念，注重网页设计的实用性与美观性。
3. 培养学生合作意识，学会在团队中共同解决问题，提高沟通与表达能力。
课程性质：本课程以实践操作为主，结合理论知识，培养学生的网页设计能力。
学生特点：学生具备一定的计算机操作基础，对网页设计感兴趣，但HTML和CSS知识较为薄弱。
教学要求：教师应注重理论与实践相结合，引导学生主动探索，激发学生的学习兴趣。
在教学过程中，关注学生的个体差异，提供针对性的指导与帮助，确保每位学生都能达到课程目标。
通过课程学习，使学生能够独立完成简单的网页作品，提高其网页设计能力。
二、教学内容1. 网页设计基础知识：介绍网页设计的基本概念、网页类型及网页制作流程，使学生了解网页设计的基本框架。
- 教材章节：第一章 网页设计概述- 内容：网页设计的基本概念、网页类型、网页制作流程。
2. DW软件操作与界面认识：讲解DW软件的操作方法和功能，使学生熟悉DW软件的使用。
- 教材章节：第二章 Dreamweaver基础- 内容：DW软件界面、基本操作、功能介绍。
3. HTML与CSS基础知识：教授HTML和CSS的基础语法，使学生能够运用代码进行网页布局与样式设计。
- 教材章节：第三章 HTML与CSS基础- 内容：HTML标签、属性、CSS选择器、样式属性、盒模型。
网页设计Dreamweaver教案
网页设计Dreamweaver教案第一章：Dreamweaver简介1.1 课程目标了解Dreamweaver的发展历程和版本更新掌握Dreamweaver的基本功能和操作界面熟悉Dreamweaver在网页设计中的应用场景1.2 教学内容Dreamweaver的起源和发展历程Dreamweaver的版本更新及特点Dreamweaver的操作界面及功能介绍Dreamweaver在网页设计中的应用案例1.3 教学方法讲授与示范相结合，让学生了解Dreamweaver的发展历程和版本更新实践操作，让学生掌握Dreamweaver的基本功能和操作界面案例分析，让学生熟悉Dreamweaver在网页设计中的应用场景1.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例1.5 教学评估课后作业：让学生制作一个简单的网页，巩固所学内容课堂讨论：引导学生分享自己在网页设计中使用Dreamweaver的经验和心得第二章：创建和管理网页2.1 课程目标掌握Dreamweaver的网页创建和管理功能熟悉网页编辑区的基本操作了解网页、描述和关键词的设置方法2.2 教学内容Dreamweaver的网页创建和管理功能介绍网页编辑区的基本操作网页、描述和关键词的设置方法2.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver的网页创建和管理功能实践操作，让学生熟悉网页编辑区的基本操作案例演示，让学生了解网页、描述和关键词的设置方法2.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例2.5 教学评估课后作业：让学生创建一个简单的网页，并设置网页、描述和关键词课堂讨论：引导学生分享自己在网页设计中关于网页、描述和关键词设置的经验和心得第三章：编辑和排版文本3.1 课程目标掌握Dreamweaver中文本的编辑和排版功能熟悉字体、颜色、大小和样式的设置方法了解文本对齐、行间距和段落格式的设置方法3.2 教学内容Dreamweaver中文本的编辑和排版功能介绍字体、颜色、大小和样式的设置方法文本对齐、行间距和段落格式的设置方法3.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中文本的编辑和排版功能实践操作，让学生熟悉字体、颜色、大小和样式的设置方法案例演示，让学生了解文本对齐、行间距和段落格式的设置方法3.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例3.5 教学评估课后作业：让学生编辑和排版一个文本内容丰富的网页课堂讨论：引导学生分享自己在网页设计中关于文本编辑和排版的经验和心得第四章：添加图像和媒体元素4.1 课程目标掌握Dreamweaver中图像和媒体元素的操作功能熟悉图像和媒体元素的插入、编辑和格式设置方法了解图像和媒体元素在网页设计中的应用场景4.2 教学内容Dreamweaver中图像和媒体元素的操作功能介绍图像和媒体元素的插入、编辑和格式设置方法图像和媒体元素在网页设计中的应用场景4.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中图像和媒体元素的操作功能实践操作，让学生熟悉图像和媒体元素的插入、编辑和格式设置方法案例分析，让学生了解图像和媒体元素在网页设计中的应用场景4.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例4.5 教学评估课后作业：让学生添加图像和媒体元素到一个网页中，提升网页视觉效果课堂讨论：引导学生分享自己在网页设计中关于图像和媒体元素应用的经验和心得第五章：创建和应用超5.1 课程目标掌握Dreamweaver中超的创建和应用功能熟悉超的类型和创建方法了解超的目标设置和命名规则5.2 教学内容-第六章：表格和布局6.1 课程目标掌握Dreamweaver中表格的创建和编辑功能熟悉表格的布局和样式设置方法了解表格在网页设计中的应用场景6.2 教学内容Dreamweaver中表格的创建和编辑功能介绍表格的布局和样式设置方法表格在网页设计中的应用场景6.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中表格的创建和编辑功能实践操作，让学生熟悉表格的布局和样式设置方法案例分析，让学生了解表格在网页设计中的应用场景6.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例6.5 教学评估课后作业：让学生创建一个表格布局的网页，展示信息列表课堂讨论：引导学生分享自己在网页设计中关于表格布局的经验和心得第七章：表单和动画7.1 课程目标掌握Dreamweaver中表单的创建和编辑功能熟悉表单元素和属性的设置方法了解动画在网页设计中的应用场景和创建方法7.2 教学内容Dreamweaver中表单的创建和编辑功能介绍表单元素和属性的设置方法动画在网页设计中的应用场景和创建方法7.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中表单的创建和编辑功能实践操作，让学生熟悉表单元素和属性的设置方法案例分析，让学生了解动画在网页设计中的应用场景和创建方法7.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例7.5 教学评估课后作业：让学生创建一个包含表单和动画的网页，实现用户互动课堂讨论：引导学生分享自己在网页设计中关于表单和动画应用的经验和心得第八章：CSS样式和模板8.1 课程目标掌握Dreamweaver中CSS样式的创建和应用功能熟悉CSS选择器和属性的设置方法了解模板在网页设计中的应用场景和创建方法8.2 教学内容Dreamweaver中CSS样式的创建和应用功能介绍CSS选择器和属性的设置方法模板在网页设计中的应用场景和创建方法8.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中CSS样式的创建和应用功能实践操作，让学生熟悉CSS选择器和属性的设置方法案例分析，让学生了解模板在网页设计中的应用场景和创建方法8.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例8.5 教学评估课后作业：让学生创建一个CSS样式和模板应用的网页，提升网页美观度课堂讨论：引导学生分享自己在网页设计中关于CSS样式和模板应用的经验和心得第九章：网站发布和管理9.1 课程目标掌握Dreamweaver中网站的发布和管理功能熟悉FTP协议和网站方法了解网站维护和优化的基本方法9.2 教学内容Dreamweaver中网站的发布和管理功能介绍FTP协议和网站方法网站维护和优化的基本方法9.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中网站的发布和管理功能实践操作，让学生熟悉FTP协议和网站方法案例分析，让学生了解网站维护和优化的基本方法9.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例9.5 教学评估课后作业：让学生将所学网页发布到服务器，进行实际操作课堂讨论：引导学生分享自己在网站发布和管理中的经验和心得第十章：网页设计案例分析10.1 课程目标分析实际网页设计案例了解网页设计中的创新点和不足之处提高学生网页设计的能力和审美水平10.2 教学内容分析实际网页设计案例讨论网页设计中的创新点和不足之处提高学生网页设计的能力和审美水平10.3 教学方法讲授与示范相结合，让学生分析实际网页重点和难点解析1. 章节一和二：Dreamweaver简介和创建与管理网页重点解析：理解Dreamweaver的历史和发展，熟悉其操作界面和基本功能，以及如何有效地创建和管理网页。
《Dreamweaver网页设计》教案
《Dreamweaver网页设计》教案第一章：Dreamweaver简介1.1 课程目标：了解Dreamweaver的发展历程和功能特点掌握Dreamweaver的基本操作界面1.2 教学内容：Dreamweaver的历史和发展Dreamweaver的功能特点Dreamweaver的操作界面及基本操作1.3 教学方法：讲解与演示相结合学生实际操作练习1.4 教学资源：PowerPoint课件Dreamweaver软件1.5 教学评估：课堂问答学生操作练习情况第二章：网页制作基础2.1 课程目标：掌握HTML标签的使用学会使用Dreamweaver的代码视图2.2 教学内容：HTML标签的基本概念和使用方法Dreamweaver代码视图的操作方法常用的HTML标签及其功能2.3 教学方法：讲解与演示相结合学生实际操作练习2.4 教学资源：PowerPoint课件Dreamweaver软件2.5 教学评估：课堂问答学生操作练习情况第三章：图像和多媒体的使用3.1 课程目标：学会在网页中插入图像和多媒体文件了解图像和多媒体文件的基本属性设置3.2 教学内容：图像和多媒体文件在网页中的作用在Dreamweaver中插入图像和多媒体文件的方法图像和多媒体文件的基本属性设置3.3 教学方法：讲解与演示相结合学生实际操作练习3.4 教学资源：PowerPoint课件Dreamweaver软件图像和多媒体文件素材3.5 教学评估：课堂问答学生操作练习情况第四章：超的使用4.1 课程目标：学会创建和设置超了解超的类型及应用场景4.2 教学内容：超的概念和作用在Dreamweaver中创建和设置超的方法超的类型及应用场景4.3 教学方法：讲解与演示相结合学生实际操作练习4.4 教学资源：PowerPoint课件Dreamweaver软件超素材4.5 教学评估：课堂问答学生操作练习情况第五章：表格的使用5.1 课程目标：学会使用Dreamweaver创建和编辑表格了解表格的基本属性设置5.2 教学内容：表格在网页中的作用在Dreamweaver中创建和编辑表格的方法表格的基本属性设置5.3 教学方法：讲解与演示相结合学生实际操作练习5.4 教学资源：PowerPoint课件Dreamweaver软件表格素材5.5 教学评估：课堂问答学生操作练习情况第六章：CSS样式应用6.1 课程目标：掌握CSS样式的概念和作用学会在Dreamweaver中创建和应用CSS样式6.2 教学内容：CSS样式的基本概念Dreamweaver中的CSS面板操作创建和应用CSS样式的方法CSS选择器及属性设置6.3 教学方法：讲解与演示相结合学生实际操作练习6.4 教学资源：PowerPoint课件Dreamweaver软件CSS样式素材6.5 教学评估：课堂问答学生操作练习情况第七章：布局页面7.1 课程目标：学会使用Dreamweaver进行页面布局了解常用的页面布局方法7.2 教学内容：页面布局的基本概念使用Dreamweaver的布局工具进行页面布局常用的页面布局方法（如：固定布局、百分比布局、弹性布局等）7.3 教学方法：讲解与演示相结合学生实际操作练习7.4 教学资源：PowerPoint课件Dreamweaver软件页面布局素材7.5 教学评估：课堂问答学生操作练习情况第八章：表单的使用8.1 课程目标：学会在网页中创建和使用表单了解表单的基本属性设置8.2 教学内容：表单在网页中的作用在Dreamweaver中创建和编辑表单的方法表单的基本属性设置表单元素（如：文本框、复选框、单选按钮等）的使用8.3 教学方法：讲解与演示相结合学生实际操作练习8.4 教学资源：PowerPoint课件Dreamweaver软件表单素材8.5 教学评估：课堂问答学生操作练习情况第九章：Dreamweaver与服务器端编程9.1 课程目标：了解Dreamweaver与服务器端编程的关系学会在Dreamweaver中插入服务器端代码9.2 教学内容：服务器端编程语言（如：PHP、JavaScript等）的基本概念在Dreamweaver中插入服务器端代码的方法Dreamweaver与服务器端代码的交互方式9.3 教学方法：讲解与演示相结合学生实际操作练习9.4 教学资源：PowerPoint课件Dreamweaver软件服务器端代码素材9.5 教学评估：课堂问答学生操作练习情况第十章：综合案例实训10.1 课程目标：学会运用所学知识完成一个完整的网页设计项目提高实际操作能力和网页设计水平10.2 教学内容：网页设计项目的需求分析网页设计的基本流程综合运用所学知识完成网页设计项目10.3 教学方法：学生分组进行实际操作教师指导与解答疑问10.4 教学资源：Dreamweaver软件案例素材及设计工具10.5 教学评估：学生完成的项目成果展示重点和难点解析第一章：Dreamweaver简介1. Dreamweaver的功能特点2. Dreamweaver的操作界面及基本操作难点解析：Dreamweaver功能特点的深入理解，特别是与其它网页编辑器的区别。
DW课程第一课
网址：用于定位某个网站某个页面的一串字 符，通常是这种格式
主页：访问网站时，默认打开的第一个页面 就是主页也叫首页。 认识网页的组成元素：
文字（宋体）、图片、超链接
1.软件下载、安装 2.界面的认识 3.新建 4.打开 5.保存
1、认识Dreamweaver 是当前最流行、最方便的网页设计和网站开发工具 软件。 早期是Macromedia公司推出的“网页三剑客”之一。 “网页三剑客”指的是Dreamweaver、Flash、 Fireworks这三个软件. 2005年被Adobe公司收购. 推出Dreamweaver cs3--cc
设置网页外观属性
网页标题、页面默认字体、默认字体大小、 背景颜色、背景图片、边距。
什么是HTML？
超文本标记语言，用于编写网页。HTML是一切网页 实现的基础，在网络中浏览的网页都是一个个由 HTML标记构成的文件。
一个HTML文件包含了很多HTML标记，用来告诉浏览 器应该如何显示文本、图像以及网页的背景等 等……
如何获取网页图像 复制 另存为 截图
插入图像
插入记录→图像
插入面板→常用→图像
直接将图像文件拖入编辑区
快捷键：Ctrl+alt+i
撤销：ctrl+Z
注意：在插入图像前应先将网页文件已保存，
从而使所插图像引用正确。
设置图像的基本属性
图像→设置的名称 宽、高→可缩小和放大图片的显示尺寸。 边框→图片是否要加边框 源文件→图片的路径和名称。
注意：链接中使用完整的URL地址
http:// （是浏览网页网络协议，是超
文本传输协议的缩写，它用于传送WWW方式 的数据）www(WWW是环球信息网的缩写 ， 中文名字为“万维网”)
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1．Logo Logo是网站的标志，通过形象的logo可以让 浏览者记住网站的主体和品牌。
攀枝花学院
工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
2．Banner
Banner是指网站中的横幅广告，它的尺寸标准有 许多，如468×60像素（全尺寸Banner）、 392×60像素（全尺寸导航条Banner）、234×60 像素（半尺寸Banner）、125×125像素（方形按 钮）、120×90像素（按钮类型1）、120×60像 素（按钮类型2）、88×31像素（小按钮类型） 及120×240像素（垂直Banner）等。其中 468×60像素和88×31像素的Banner用得最多， 468×60的Banner像素应大致在15KB左右，最好 不要超过22KB，而88×31像素的Banner最好在 5KB左右，不要超过7KB。
3
网页制作的 原则和技巧
攀枝花学院
工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
a
1.1 网页制作基础知识
1.1.1 认识网页
1.1.2 认识网站
1.1.3 网页的类型 1.1.4 网页制作中的专业术语 Contents 1.1.5 网页页面的基本组成元素
攀枝花学院 工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
3．导航栏
导航栏的作用是引导浏览者进行网页浏览。根据导航栏放置 的位置可分为横排和竖排两种；根据表现形式，导航栏有图 像导航、文本导航和框架导航等。导航栏也可以是动态的， 如用脚本编写的导航栏或Flash导航栏。 导航栏的制作要点 可归纳为以下几点：
攀枝花学院
工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
1.2.5 发布站点 发布站点之前需在Internet上申请一个主页空间， 以指定网站或主页在Internet上的位置，然后将 网站的所有文件上传到服务器空间中。上传网 站通常使用FTP（远程文件传输）软件将其上传 到申请的网址目录下，使用FTP软件上传文件速 度较快，也可使用Dreamweaver中的发布站点命 令进行上传。
攀枝花学院 工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
1.1.1 认识网页
网页又称为 Web 页， 是通过浏览器展现在 浏览者眼前的一种网 络信息，浏览网页时， 在浏览器中看到的一 个个页面就是网页， 其中包括各种各样的 网页元素，如文本、 图像、表单、动画和 超级链接等。
攀枝花学院
工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
a
1.3 网页制作的原则和技巧
3.3.1
网页制作的基本原则 网页基本元素的标准及使用技巧 用色的技巧
3.3.2
3.3.3
攀枝花学院
工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
也称为首页，有时也称为形象页；内页是指
与主页相链接的其他页面，也称为网站的内
部页面。
攀枝花学院
工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
2．按表现形式分类 按网页的表现形式分类，可将网页分为静态 网页和动态网页两类。静态网页是指用 HTML语言编写的网页，其制作方法简单易 学，但缺乏灵活性。动态网页是指用ASP、 PHP及JSP等语言编写的网页，该类网页先在 Web服务器端执行，然后再将执行结果返回 给客户端的浏览器进行显示。其最大的特点 是可以动态生成网页内容，如根据客户端提 交的不同信息而动态地生成不同的网页内容。
a
第 1 课 认识网页及网页制作工具
攀枝花学院
工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
本章导读
HTML与HTML5
7
网页制作基础 知识
网页文件操作
6
内容 导读
5
4
认识Dreamweaver CS6
2
网站的一般开 发流程
Dreamweaver CS6的新功能 和改善功能
攀枝花学院 工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
1.2.2 规划站点 • 在创建站点之前需要对站点进行规划，站 点的形式有并列、层次和网状等，需根据 实际情况选择。 • 在规划站点时应按站点所包含的内容进行 频道的划分，如要制作一个综合性网站， 其包含的内容非常多，如军事、文学、社 会、时政、体育、情感等等，在各主频道 下面又有很多的小栏目，各小栏目下面又 包括许多的网页，设计网站时需要考虑到 各个网页的内容及版式等。
1.3.1 网页制作的基本原则
网页制作并不是简单的内容堆积，为了使网页达到一定的 效果，在制作过程中需遵守一些基本的原则。
• 整体规划：合理安排站点中的各项内容，制作网页之前需对整个站点 进行有条理的规划。 • 站名要有创意：名称对于网站来说非常重要。有创意的站名能给浏览 者留下较深的印象，利于网站的宣传和推广。给站点取名时应基于简 洁、好记以及与站点内容相适应的基础上，并且最好还能给人有耳目 一新的感觉。 • 鲜明的主题：网页中标题内容不能太长太复杂，需简单明了。主题内 容需要醒目抢眼，具有较强的针对性。 • 导航要明朗：主页导航条上的链接项目不宜太多，最好只限于几个主 要页面，通常用6~8个导航链接较为合适，大型网站可适当增加导航 链接数。 • 定期更新：定期更新页面内容或更改主页的样式，才能让浏览者对网 站保持一种新鲜感，保持较高的浏览率。
攀枝花学院
工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
1.2.6 更新和维护站点 站点上传到服务器后，并不是就一劳永逸了， 网站维护人员需要在每隔一段时间对站点中 的某些页面进行更新，保持网站内容的新鲜 感以吸引更多的浏览者，还应定期打开浏览 器检查页面元素显示是否正常、各种超级链 接是否正常等，防止网站出现浏览故障或链 接问题等影响访客的浏览。
攀枝花学院 工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
1.2.3 制作网页
• 完成站点规划后，便可具体到每一个页面的制作，在制作网页 时，首先要做的就是设计版面布局，就象传统的报刊杂志制作 一样，可将网页看作一张报纸进行排版布局。版面指的是在浏 览器中看到的完整的页面大小。因为不同的显示器分辨率不同， 所以同一个页面的大小可能出现800×600像素、1024×768像素 等不同尺寸。 • 布局网页就是以最适合浏览的方式将网页元素排放在页面的不 同位置。 • 版面布局完成后，就可以着手制作每一个页面了，通常可从首 页做起，制作过程中可以先使用表格或AP Div对页面进行整体 布局，然后将需要添加的内容分别添加到相应的单元格中，随 时预览效果并进行调整，直到整个页面完成并达到理想的效果， 然后使用相同的方法完成整个网站中其他页面的制作。
网站设计-Dreamweaver Flash Access VBscript、
1.1.3 网页的类型
1
按位置分类
2
按表现形式分类
攀枝花学院
工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
1．按位置分类 网页按其在网站中的位置可分为主页和内页。 主页一般指进入网站时看到的第一个页面，
• 图片导航可以随意设计，但是图片导航虽漂亮，占用的文件空 间较大，影响网页下载。 • 在导航栏目不多的情况下，通常是一排；如果导航栏目太多就 要考虑分两排甚至多排进行横向排列。 • 内容丰富的站点可以使用框架导航，这样不管进入哪个页面都 可以快速跳转到另一个栏目。
攀枝花学院 工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
网站设计-Dreamweaver Flash Access VBscript、
1.2.1 收集资料和素材 在着手制作网站前，需收集和整理与网站内 容相关的文字资料、图像和动画素材等。如 制作个人网站，则应收集个人简历、爱好等 方面的材料；如想制作影视网站就需收集大 量中外电影的信息及演员资料等；如制作学 校网站则需要学校提供文字材料，如学校简 介、招生对象说明以及与学校有关的图片等。 收集资料时应对各种资料进行分类保存，方 便制作网站时使用。
网站设计 网站设计-Dreamweaver -Dreamweaver Flash Flash Access Access VBs 曾富洪
攀枝花学院
工业设计专业
网站设计 网站设计-Dreamweaver -Dreamweaver Flash Flash Access Access VBscript VBscript、
攀枝花学院 工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
1.2.4 测试站点 在制作好网页后，不能马上就发布站点，还 需对站点进行测试。站点测试可根据浏览器
种类、客户端以及网站大小等要求进行测试，
通常是将站点移到一个模拟调试服务器上对
其进行测试或编辑。
攀枝花学院 工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
1.1.2 认识网站
由一个或多个网页组合起来，就网站、个人网站、专业网站 和职能网站等几种类型。
攀枝花学院
工业设计专业
攀枝花学院 工业设计专业
网站设计-Dreamweaver Flash Access VBscript、