DW入门培训教程1

Dreamweaver网页设计工具入门指南Chapter 1: Introduction to DreamweaverDreamweaver is a powerful web design tool developed by Adobe. It provides web designers and developers with a comprehensive set of features and functionalities to create dynamic and visually appealing websites. This chapter will introduce the basics of Dreamweaver and how to get started with the software.1.1 Installing DreamweaverTo begin using Dreamweaver, you first need to install the software on your computer. Visit the Adobe website and download the installer file for your operating system. Follow the on-screen instructions to complete the installation process.1.2 Interface OverviewUpon launching Dreamweaver, you will be greeted with a user-friendly interface. The main components of the interface include the Document window, the Toolbar, and various panels that can be customized based on your needs. Familiarize yourself with these components to effectively navigate through the software.Chapter 2: Creating a WebpageIn this chapter, we will explore how to create a webpage using Dreamweaver. Whether you are starting from scratch or working withan existing template, Dreamweaver provides a variety of tools to help you build your website.2.1 HTML BasicsBefore diving into Dreamweaver, it is important to have a basic understanding of HTML. HTML stands for Hypertext Markup Language, which serves as the backbone of webpages. Learn the basic structure of an HTML document, including tags, attributes, and elements.2.2 Design View vs. Code ViewDreamweaver offers two distinct views for designing webpages: Design view and Code view. Design view allows you to visually create and layout elements, while Code view provides a more precise control over the HTML code. Understanding the differences between these views will enhance your overall web design experience.Chapter 3: Working with CSSChapter 3 will focus on Cascading Style Sheets (CSS), a powerful tool that enhances the appearance and layout of webpages. Dreamweaver offers comprehensive CSS editing capabilities, making it easier for designers to manage and style their websites.3.1 CSS BasicsBefore applying CSS in Dreamweaver, it is essential to understand the fundamental concepts of CSS. Learn about selectors, properties, and values in order to style HTML elements effectively.3.2 CSS DesignerDreamweaver's CSS Designer allows designers to visually create and edit CSS rules. This powerful tool streamlines the process of applying styles and managing CSS properties. Familiarize yourself with the CSS Designer to enhance your workflow.Chapter 4: Responsive Design with DreamweaverIn today's mobile-driven world, it is crucial to create websites that are responsive and accessible across various screen sizes. Dreamweaver provides features and tools to facilitate the creation of responsive web designs.4.1 Media QueriesMedia queries allow websites to adapt to different screen sizes by applying specific CSS rules based on the device's characteristics. Learn how to use Dreamweaver's built-in media query feature to create responsive designs.4.2 Fluid Grid LayoutsFluid grid layouts provide a flexible and grid-based structure for designing responsive webpages. Dreamweaver simplifies the creationof fluid grid layouts by offering pre-built templates and a visual interface for easy customization.Chapter 5: Website Management and PublishingOnce you have created your webpage, Dreamweaver offers features to help you manage and publish your website effectively. This chapter will cover the process of testing, previewing, and publishing your site.5.1 Testing and PreviewingDreamweaver allows you to test your webpage across different browsers and devices to ensure compatibility. In addition, you can preview your site in real-time to see how changes affect its appearance and functionality.5.2 Publishing Your WebsiteDreamweaver provides seamless integration with web hosting services, allowing you to publish your website with ease. Learn how to configure the FTP settings and upload your files directly from within the software.In conclusion, Dreamweaver is a comprehensive web design tool that empowers designers and developers to create visually stunning and functional websites. This article has provided an overview of the software, including installation, interface, webpage creation, CSS editing, responsive design, and website management. By masteringDreamweaver, you can unleash your creativity and design websites that captivate your audience.。

Dreamweaver（3０课时）第一讲基本界面、基本工具的使用Dreamweaver是制作网页的工具，我们平时上网看到的各个网站的网页都是用Dreamweaver编辑的，然后再加入一些动态语句。

这些网页都是由Html语言编写生成，而我们在使用Dreamweaver编辑网页的同时，这个软件就已经自动生成这种语言了。

首先，我们先来说说最简单的Html语言。

Html语言Html语言有自己特有的格式：<html><head><title>标题</title></head><body>正文内容</body></html>。

这就是最基本的格式了，其中<html>...</html>是该语言的基本格式，所有的内容都包含在它们之间，<head>...</head>部分是头的部分，主要是放置标题，而标题就放在<title>...</title>之间，<body>...</body>之间是编辑正文的地方，所有的内容都放在这里。

至于其中的一些语句，我们在这里就不再多提。

注意事项Dreamweaver中是有一个相对路径的概念的，我们做网页过程中用到的所有图片和所有的网页文件，还有声音、SWF等等的文件都要放在一个总的文件夹里，而这个文件夹就是我们所说的站点，Dreamweaver中可以建立一个站点，但是现在来讲是非常的抽象的，所以我们先用前面的办法代替，后面再来讲解有关站点的概念。

另外，我们在做网页文件的时候要记得，打开软件后，就先把我们要做的网页文件保存到事先建好的站点里，这样是为了避免你插入图片时出现错误。

最后，站点里的所有文件的名称都不能为汉语名，必须为英文名或者是数字命名的。

介绍软件界面打开Dreamweaver软件，我们会发现它的界面和我们前面学过的软件有些不同。

第一课基础知识部分一、学习前的准备工作∙准备好一个笔记本（没有准备此物者就不用参加）。

∙准备好一本教材。

∙测试和熟悉所有的软硬件环境。

∙有一个良好的心态和坚持下去的决心，网页设计不难但要设计出优秀的网页也不容易。

二、学习方法和要求∙记录老师讲的每一个知识点，特别是自己没有听懂的内容。

∙每次学习完成以后写好总结，分别总结自己没搞懂的和掌握的两方面的内容（不需要写一些如以后认真啊，很好玩啊之类的废话）。

∙老师会检查你们的学习笔记。

∙网页制作并不是一门单纯的技术，是一门集美术、设计、编程与一体的综合性技能。

所以你在学习之余还要自学PS、Flash等等之类的课程。

∙英语基础不好的同学还要花一定的时间去记忆一些关键的英语单词。

三、文件和目录∙计算机基础课程里面讲述的文件目录和文件的概念。

∙所有出现在网页中的素材和文件以及目录请使用英文名，不要使用中文名。

∙文件的扩展名的意义，你可以随意改变文件名，但不能随便改变文件的扩展名。

∙记住网页文件的扩展名。

o每一个网站都必须有的首页文件名：文件名---Default或Index 扩展名---asp或htm或html或aspxo在DM的文件标签中，利用文件名前面的图标来区别目录和文件的类型。

如下图oo首页与其他页面之间的连接关系如下图o四、网站的制作基本步骤∙在本机建立自己的工作目录（A---在有还原系统的机房上机每次都应该做这个步骤）。

∙打开DM，执行“站点”--“新建”，建立自己的站点，并且保证能够用正确的用户名和密码与远程网站联通（A）。

∙下载远程网站上的文件到本地进行编辑，然后将编辑好的文件保存(注意文件被修改以后的状态标记--有星号)，再上传到网站进行浏览测试。

o建议：测试的时候请在桌面建立一个测试的快捷方式，避免多次输入测试的URL地址而浪费时间，也可以直接在测试窗口中单击右键进行刷新。

提醒：不要直接在文件上双击测试，当你网页中有执行代码的时候就无法正常显示）。

Dreamweaver网页制作第1课 Dreamweaver初体验上课时间：2011，1，13一、网页的制作常识二、认识Dreamweaver的界面三、定义一个站点四、新建网页及网站内部文件夹一、网页的制作常识1、网站的内容2、网页的结构设计3、网页的形象设计二、认识Dreamweaver的界面1、主窗口介绍2、面板介绍三、定义一个站点需要先新建一个文件夹作为网站的根文件夹，或者说是网站的本地的家1、新建文件夹2、在Dreamweaver中打开站点管理3、打开新建。

4、起用缓存5、点击“确定”四、新建网页及网站内部文件夹1、在站点管理器里进行文件的管理2、新建文件和新建文件夹3、怎样实现文件的操作（包括文件的删除、修改、移动、复制等等）第2课一个图文并茂的网页上课时间：2011，7，21一、在网页中添加文字二、在网页中插入图片三、标题和背景一、在网页中添加文字步骤：1、在D盘上新建一个文件夹，命名为“DAZIRAN”，在此文件夹下建立站点2、单击“站点”菜单---“站点文件”，打开“站点窗口”，在“DAZIRAN”文件夹下新建网页，命名为“INDEX”3、将光标置于正文编辑区，输入文字4、选中要修饰的文字，对文字的字体、大小、颜色等进行设置二、在网页中插入图片步骤：1、选中LOGO单元格，单击对象面板上“插入图像”按钮2、选择图片，单击“选择”按钮(图片应保存在站点内的图片文件夹内)3、选中图片，在图片属性面板中进行调整三、标题和背景第3课我的第一个网站-----玩转超级链接上课时间：2012，1，22一、文本链接二、图像链接一、文本链接步骤：1、新建一个网页文件，插入图片，并配以简单的文字，作为目标网页2、选中要创建链接的文字，在文字的属性面板中单击“链接”栏右侧的“选择目标文件夹”3、打开“选择文件”对话框，选择要链接到的目标网页，单击“确定”二、图像链接1、简单的图像链接2、“会变脸”的图像步骤：(1)在“对象面板”中单击“插入鼠标经过的图像”按钮，弹出对话框(2)单击“原始图象”文本框右侧的“浏览”按钮，选择原始图象(3)单击“鼠标经过图像”的“浏览”按钮，选择图象(4)单击“点击时，转到URL”2、确定第4课完善我的网站------插入Flash动画和版权信息上课时间：2012，7，19一、插入Flash动画二、插入水平线和版权符三、创建电子邮件链接四、设置链接字体的颜色一、插入Flash动画步骤：1、打开“站点文件”，新建网页文件，命名为flash.htm2、双击flash.htm，打开网页，将光标置于页面底部，单击“对象面板”中的“flash”图标，找到所需文件3、单击“选择”按钮，将flash文件插入4、单击属性面板上的“播放”二、插入水平线和版权符步骤：a)定位，单击“对象面板”中的“插入水平线”按钮b)在“属性面板”中设置水平线的宽度，对齐方式c)换行，输入版权信息d)插入版权符三、创建电子邮件链接四、设置链接字体的颜色第5课精彩的主页上课时间：2013，1，21一、制作第一个表格二、制作嵌套表格一、制作第一个表格几种常见表格版式如下图：略步骤：1、启动Dreamweaver，自动产生一个文档2、单击“对象面板”中的“插入表格”图标，弹出“插入表格”对话框，，设置行与列单击“确定3、选中表格后，在“属性面板”中查看4、调整第一个单元格属性，宽度为125PX二、制作嵌套表格步骤：1、在第二个表格下插入一个2行2列的表格2、在第1行第1个单元格内插入一个表格6行1列3、在表格内输入文字第6课切换自如的网页------灵活运用层上课时间：2013，7，18一、什么是“层”二、插入“层”三、加添动作一、什么是“层”就像是含有文字或图像等元素的透明胶片，一张张按顺序叠放在一起，它可以控制页面元素的隐藏及显示顺序。

《中文版Dreamweaver CC 基础培训教程》配套教学教案2.3网页文档的基本操作2.3.1课堂案例——创建并保存zhuce.html网页2.3.2新建网页2.3.3保存文档2.3.4打开与关闭文档2.4设置页面属性2.4.1课堂案例 ------ 设置“djqsm.html”网页属性2.4.2设置“外观（CSS）”属性2.4.3设置“外观（HTML）”属性2.4.4设置“链接955）”属性2.4.5设置标题2.4.6设置标题/编码2.4.7跟踪图像2.5上机实训——创建“花火植物”站点2.5.1实训要求2.5.2实训分析2.5.3操作思路2.6课后练习1.练习1——自定义“我的工作区”2.练习2——创建并规划“珠宝”网站小结1、如何创建与管理站点？2、如何管理站点中的文件和文件夹？3、如何设置页面属性？练一练：练习1——自定义“我的工作区”根据工作使用习惯的不同，用户可自定义Dreamweaver CC的工作区，使其更加符合设计者的操作习惯。

本练习将自定义一个工作区，然后将其保存。

思考及作业练习2创建并规划“珠宝”网某珠宝公司需要制作一个电子商务网站，需要先对站点进行规划，首先是网站首页，然后按不同内容分成多个页面，最后在Dreamweaver CC中创建站点、文件和相关GOOD LUCK 首页 产品中心 关于我们 新闻资讯 联系我们登录我们0 zhubaoT 本地视图▼ G ◎分悭畲⑥a 大小I 类型文件夹。

□ |£j> 站点-zhub ：±0 Q... index. html CpZK gywm. html xwzx. html lxwm .... .......... " .. " .......... .... 1KB 1KB 1H ： 文件夹 360 se.. 文件夹 360 se.. 360 se.. 文件夹1KB 360 se..羁 1个^^目麒中一觊126 本地文件3.4课后练习1.练习1——制作学校简介网页2.练习2——制作代金券说明网页4.3.3操作思路4.4课后练习1.练习1——制作“订餐”网页2.练习2——制作“家居”网页1、掌握插入各种图像的方法。

Dreamweaver3 上手指南定义网站在正式开始制作网页之前，最好先定义一个新网站，这是为了更好地对站点文件进行管理。

【定义的方法】① 在站点窗口的下拉菜单选择 Define Sites；② 选择命令菜单 Site 中的 New Site 选项。

进行基本设置，回到站点窗口。

新建页面方法一：选择菜单上的 File > New File方法二：在本地目录的任意区域单击右键，选择 New File新建一页面后， 可以即时修改文件名， 后缀是 htm或 html； 一般网络服务器默认的网站首页名字是 index.htm。

双击新建的 index.htm，进入编辑窗口，开始制作属于你的第一个网页。

设置页面属性选择命令菜单中的 Modify > Page Properties，对话框中显示：①Title（页面标题）：就是我们在浏览网页时，在浏览器最左上角看到一行小字。

务必要养成为每一页都设 定一个标题的习惯，这既便于访问者的浏览，也有助于你在网页编辑的过程中区分不同的页面。

② Background（背景颜色）：默认为白色，后面“#FFFFFF”是以 16 进制形式显示的 RGB 色值。

DW3 的 调色板比 Frontpage 的丰富得多，而且还可以在屏幕上直接取色。

③ Text（文字颜色）：白底黑字是最常见的配色方案。

④ Left Margin 和 Top Margin：设置页边距，一般都设置为“0”以方便于网页的编辑。

一切设置完毕后，点击 OK 结束。

创建第一个网页“欢迎来到 ” ， 此时光标处于编辑窗口的最最左上角，输入你喜欢的任何文字，例如：并且在文字的前方加空格及回车，使文字接近于屏幕的中央。

【Tips】是不是觉得很奇怪，怎么总是不能插入空格？其实这是 DW3 的“特色”之一——不能连续插入半 角空格。

解决的办法是用全角空格代替。

最好，选取菜单 File > Save 保存页面，然后用浏览器打开该页面查看效果。

《Dreamweaver》目录第一节：DW软件介绍 -------------------------------------------------------- 第二节：学习Dreamweaver的作用和应用方向----------------------------------- 第三节：认识DW的界面------------------------------------------------------ 第四节：站点的建立和编辑--------------------------------------------------- 第五节：常用插入----------------------------------------------------------- 第六节：CSS样式 -----------------------------------------------------------1.作用 ----------------------------------------------------------------------------------------------------------------------------2.CSS样式的应用对象 -------------------------------------------------------------------------------------------------------3.CSS样式的分类 -------------------------------------------------------------------------------------------------------------4.如何将样式表加入网页？------------------------------------------------------------------------------------------------5.实验后总结优先级 ---------------------------------------------------------------------------------------------------------6.CSS规则简单说明 ----------------------------------------------------------------------------------------------------------7.块元素（block）的定义 --------------------------------------------------------------------------------------------------8.CSS规则详解—类型[块内字的规则] ------------------------------------------------------------------------------9.CSS规则详解—背景[块本身] ---------------------------------------------------------------------------------------10.CSS规则详解—区块[块内元素的对齐和排版] -----------------------------------------------------------------11.CSS规则详解—方框[块本身] [块内] [块间] -----------------------------------------------------------------12.CSS规则详解—边框[块本身] ---------------------------------------------------------------------------------------13.CSS规则详解—列表----------------------------------------------------------------------------------------------------14.CSS规则详解—定位----------------------------------------------------------------------------------------------------15.CSS规则详解—扩展[块内] ------------------------------------------------------------------------------------------ 第七节：CSS+DIV实例网页布局 -----------------------------------------------1.盒子模型----------------------------------------------------------------------------------------------------------------------2.当间距（边界距离）叠加的说明---------------------------------------------------------------------------------------3.CSS+DIV布局的精髓 -------------------------------------------------------------------------------------------------------4.CSS排版理念 ---------------------------------------------------------------------------------------------------------------- 第八节：行为---------------------------------------------------------------1.定义 ----------------------------------------------------------------------------------------------------------------------------2.行为的“埋设” ------------------------------------------------------------------------------------------------------------3.常用触发条件----------------------------------------------------------------------------------------------------------------4.常用事件演示----------------------------------------------------------------------------------------------------------------第一节：DW软件介绍Dream Weaver是一款网页排版软件，可以方便的进行网页布局。

Dreamweaver 使用入门一、DW是什么？1、DW是编辑网页的一个工具2、为什么要用dw.（1）实现网页的可视化编辑；（2）提高效率。

您可以快速创建Web 页面而无需编写任何代码。

DW功能很强大，但是我们目前只需要通过它修改并简单设计网页即可。

二、如何利用DW编辑网页？在这之前我们需要具备有一定的网页基础知识。

1、网页基础：HTML语言什么是HTML？HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言(Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言(markup language)HTML 使用标记标签来描述网页HTML 标签HTML 标记标签通常被称为HTML 标签(HTML tag)。

HTML 标签是由尖括号包围的关键词，比如<html>HTML 标签通常是成对出现的，比如<b> 和</b>标签对中的第一个标签是开始标签，第二个标签是结束标签；开始和结束标签也被称为开放标签和闭合标签；还有一种标签是不成对出现的，比如<br>、<hr>HTML 文档= 网页HTML 文档也被称为网页HTML 文档包含HTML 标签和纯文本Web 浏览器的作用是读取HTML 文档，并以网页的形式显示出它们。

浏览器不会显示HTML 标签，而是使用标签来解释页面的内容：示例：<html> <!--网页文件开始标识。

--><head><title>这是一个网页标题</title></head><body> <!--网页主体部分开始标识--><h1>My First Heading</h1> <!--标题--><p>My first paragraph.</p> <!--段落--></body><!--网页主体部分关闭标识--></html> <!--网页文件关闭标识。

在开始学习之前，我们先要了解一些和网页有关的基础知识和基本常识。

比如，互联网、网站、网页、HTML、URL、HTTP、TCP/IP、FTP等等。

如果你已经了解，就偷偷懒^_^，不太清楚吗，请参考高夫老师的教程《Dreamweaver 2004 入门教程》的相关章节。

第一节初识Dreamweaver8第一天的内容可能让你觉得枯燥乏味，不过，“工欲善其事，必先利其器”，让我们一起来了解Dreamweaver8的操作环境，完成站点的创建。

一、Dreamweaver8 的操作环境在首次启动Dreamweaver8时会出现一个“工作区设置”对话框，在对话框左侧是Dreamweaver8的设计视图，右侧是Dreamweave 8的代码视图。

Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。

我们选择面向设计者的设计视图布局。

在Dreamweave 8 中首先将显示一个起始页，可以勾选这个窗口下面的“不在显示此对话框”来隐藏它。

在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3个方便实用的项目，建议大家保留。

新建或打开一个文档，进入Dreamweaver8的标准工作界面。

Dreamweaver8的标准工作界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。

1、标题显示栏启动Macromedia Dreamweave 8后，标题栏将显示文字Macromedia Dreamweave 8.0，新建或打开一个文档后，在后面还会显示该文档所在的位置和文件名称。

2、菜单栏Dreamweave 8的菜单共有10个，即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。

其中，编辑菜单里提供了对Dreamweaver菜单中[首选参数]的访问。

文件：用来管理文件。

例如新建，打开，保存，另存为，导入，输出打印等。

编辑：用来编辑文本。