基础教程_Dreamweaver8

D r e a m w e a v e r8图文教程-CAL-FENGHAI.-(YICAI)-Company One1Dreamweaver8图文教程一、Dreamweaver8 的操作环境在首次启动Dreamweaver8时会出现一个“工作区设置”对话框，在对话框左侧是Dreamweaver8的设计视图，右侧是Dreamweave 8的代码视图。

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

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

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

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

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

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

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

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

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

文件：用来管理文件。

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

编辑：用来编辑文本。

例如剪切，复制，粘贴，查找，替换和参数设置等。

查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。

插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。

修改：具有对页面元素修改的功能，例如在表格中插入表格，拆分、合并单元格，对其对象等。

文本：用来对文本操作，例如设置文本格式等。

Dreamweaver 8 入门一、基本概念1、网络是通过一定形式连接起来，可以互相通信的一组计算机；（1）因特网：由无数局域网和广域网共同组成的全球都使用TCP/IP通信协议的一个计算机系统；（IP、域名区分定位计算机）（2）万维网：World wide web是因特网上超文本系统，超文本文件通过一个称为“网页浏览器”的程序从服务器上（或服务器的网站上）获取网页并在电脑屏幕上显示出来；URL：在万维网上每个WEB页都有一个特定的地址称为统一资源定位器；二、Dreamweaver 8 的概述：一个非常优秀的网站设计和开发平台，使用可视化的环境编辑动态或静态网页；1、认识界面：1）启动：HTML静态网页2）工具栏：常用、布局……3）编辑窗口：设计窗口：提供所见即所得的编辑界面，接近网页显示实际效果；代码和设计窗口：（拆分）部分代码和设计视图；代码：以代码形式显示和编辑网页元素；4）标签选择器：选择对象、窗口尺寸……5）属性检查器：可显示对象的各种属性……6）面板组：提供某类功能的组合；三、标尺与网格：定位网页中元素的位置；查看——标尺—显示、网格四、设置网页属性：1）网页标题：用文字表示网页的性质；2）背景图像：颜色：外观、链接……五、添加文字：布局方式：自由布局，利用层；利用表格：可以将网页分不同区域，使网页中整齐有序，能具有统一风格和区域划分的形式，从而实现各元素的准确定位；六、创建表格：1）常用工具——插入表格插入——表格2）参数：行数、列数：七、作业：制作百度、自由布局；布局（二）一、服务器：是一个管理资源并为用户提供服务的计算机的软件；客户端：它是运行客户本地计算机中的程序，它必须是服务器相对应才能发挥它的作用。

网页：含有文字、图像文件等通过浏览器来阅读，网页合体称为网站，一个网站的开始页为首页.index.html网站：指因特网上，根据一定的规则，使用HTML等工具制作用于展示特定的内容的相关网页的集合；二、表格布局：布局表格：在布局模式下绘制网页的表格的范围；布局单元格：在布局模式下绘制所须的行或列的范围；三、框架网页制作：1）框架：可以把浏览器窗口分为几个子窗口，每个窗口都可以显示一个独立的文档；2）框架的组成：由两个主要部分构成：框架体和单个框架；3）框架集：查看——可视化助理——框架边框布局——框架4）框架显示的参数：_Blank：打开一个新的窗口，并链接在新窗口中_parent：框架的上一层窗口中显示_self：同一个框架内显示网页_top：清除框架，原窗口显示链接的网页；Mainframe：在主框架中显示网页；向网页中添加内容文字与图像一、网页的构成：1、站标：网站标志，作用：使人联想企业的形象；2、导航条：链接到网站内主要页面的超链接组合，引导浏览者轻松找到网页的各个页面；3、广告条：4、标题栏：网页内部各版块的标题栏，即内容的概括、内容分类清晰明了；5、按钮：被点击后，出现相应的操作；二、建站流程：1、网站需求分析：1）确定网站主要内容，性质、受众；2）规划网站的主要栏目；3）收集网页所用素材；2、设计和制作网站页面：设计：PS制作网页效果图；3、空间和域名申请：访问网站须上传到服务器，拥有专属的空间或域名；4、测试和发布网站：本地用IIS测试；用FTP或DW上传；5、网站的推广；三、创建文本：1）如何换段：敲回车；换行不换段：shift+敲回车；2）文本面板：（1）字体标签：添加字体：（2）设置缩进：（3）文本颜色：（4）字符样式：粗体、斜体……（5）对齐、列表……3）特殊符号的输入：空格、换行符；水平线；插入——HTML——四、插入图像的基本操作：1、在站点的image文件夹下：所有图像文件保存在一个文件内；2、图像格式：GIF无损压缩格式，支持256色，可设透明和动画；JPG JPEG 有损压缩格式；颜色真色彩；PNG 无损压缩格式，支持透明显示功能；3、插入图像占位符：作用：制作网页时，图像没有制作完成时，可插入一个图像占位符；操作：插入——图像占位符参数：尺寸、名称、颜色、替换文本：用鼠标指向对象时的说明文字；4、插入互动图像：作用：浏览网页时，当鼠标移至某一个图像时，图像会发生变化，移开鼠标时，图像恢复原状；操作：图像在Image文件夹下；大小一致；常用——鼠标经过图像；5、图像属性参数：名称、大小、源文件：图像所在目录及名称；热点工具：在图像之上建立一个区域，当鼠标点击时可以链接到目标网页；编辑：编辑图像，Fireworks进行操作，锐化、亮度……Css样式的应用一、网页服务器：1）它是负责提供网页计算机通过HTTP通信协议传给用户；2）它是提供网页服务的服务器；二、什么是Css样式：是指有关联的样式表，能够定义网页的文本、背景、边框等样式，作用：便于统一网站的风格，实际上含有多个文本属性和网页属性的集合；三、Css样式面板：shift+F111）附加样式表：可应用已保存的Css样式到当前文本；2）新建Css样式：3）编辑Css样式，修改已建立的Css样式；4）删除Css样式：5）套用Css样式：选择要应用样式的字——在列表中右击——套用；选择要应有样式的字——在属性栏中的样式选择——样式；四、新建Css样式：1）类型：类：应用文本范围或文本块的自定义；.开头命名；标签：重新定义特定的标签的外观；高级：为具体某个标签组合或有包含特定ID属性的标签定义格式；A:link：新打开网页进，链接所呈现的状态；A:hover：鼠标移上链接时显示的状态；A:visite：链接被访问过的所显示状态；A:activeL链接被激活时显示的状态；2）定义在：仅对该文档有效：对当前文档进行操作；五、应用：选择已定义的样式——套用：1）类型：字体、大小、样式、……2）背景：网页或网页元素的背景颜色；背景图像：重复……作业：在文档的背景上显示图片，此图片随窗口大小变化，并且始终居中；操作：标签：body；——背景：图片；重复：不重复；附件：固定；水平或垂直：居中；3）定义区块：可以标签和属性间的间距和对齐设置；4）边框：可以定义元素周围的边框设置；5）列表：项目符号大小和类型；6）定位：使用图层参数选择定义层的标签；7）扩展属性：设置过滤器和鼠标指针形状；光标：指针位于所控对象时改变指针的图像；过滤器：所控制对象应用特殊效果；向网页中添加其他内容1、使用Flash影片、按钮……使Flash背景透明的参数设置：Wmode值：transparent2、添加声音：1）关于音频的文件格式：Midi或mid ：乐器数字接口；wav ：品质高的声音；mp3：运动图像专家音频模式；2）操作：媒体——插件：如何音乐与打开网页不同步播放：插放声音参数：Loop trueAutostart true3、添加视频：不同方式或不同格式将视频添加网页上；4、行为的使用：1）行为：是DW预置的脚本语言，每个行为包括一个动作和一个事件，任何动作的都需要一个事件来激活。

第1章网页设计基础1.1 认识网页1.2 网页设计的基本原则1.3 Dreamweaver 8简介1.4 Dreamweaver 8的参数设置【知识要点】→1．认识网页。

→2．网页设计的基本原则。

→3．Dreamweaver 8简介。

→4．Dreamweaver 8的参数设置。

【技能目标】→1．了解网页的基础知识。

→2．了解网页设计的基本原则。

→3．认识Dreamweaver 8的主界面。

→4．了解首选参数的设置。

1.1 认识网页1.1.1 什么是网页网页一般分为静态网页和动态网页。

静态网页是标准的HTML文件，扩展名为.html 或.htm。

动态网页在许多方面与静态网页是一致的。

根据采用Web应用技术的不同，动态网页文件的扩展名也不同。

在文件中使用ASP（Active Server Pages）技术时，扩展名是.asp，使用JSP（Java Server Pages）技术时，文件扩展名为.jsp 。

搜狐网页中国银行静态首页中国农业银行动态首页1.1.2 网页与网站的关系一个完整的网站是由多个网页构成的，这些网页是分别独立的，这些独立的网页通过超链接联系起来。

网站可以看做是许多网页的家，浏览者可以通过浏览器访问网站的地址后，读取这个网站内的网页。

网页是网站的基本信息单位，一个网站通常由众多的网页有机地组织起来，用来为网站用户提供各种各样的信息和服务，好比一栋大楼里的一个个房间。

1.1.3 常用的网页制作工具网页的设计制作一般分为三个阶段：一是设计，二是布局，三是动画的添加，复杂的还涉及脚本程序。

从设计角度来说，常用的应用软件有Photoshop、Fireworks等专业的图形图像设计软件。

1.1.4 网络基本术语1．域名2．HTTP协议3．FTP协议4．超级链接5．站点1.1.5 认识HTMLHTML全名是Hyper Text Markup Language，即超文本标记语言，是用来描述Internet服务器上超文本文件的语言。

第1章Dreamweaver 8操作基础Dreamweaver 8是专业级的网页编辑工具，利用它可以非常轻松地开发动态网页，用户只需了解基本的知识和操作技巧，就可以制作出比较复杂的动态页面。

本章重点介绍Dreamweaver 8的基本概念和操作方法，为后面的学习打下基础。

本章技术要点：* 了解Dreamweaver 8功能* 熟悉Dreamweaver 8页面* 掌握Dreamweaver 8基本操作1.1 Dreamweaver功能简介1. 操作方便快捷2. 能生成高效网页源代码3. 提供强大的动态网站功能4. 提供强大的扩展功能1.2 Dreamweaver 8操作环境1.2.1 标题栏1.2.2 菜单栏1.2.3 工具栏1.2.4 状态栏1.2.5 属性面板1.2.6 浮动面板1.3 Dreamweaver 8基本操作Dreamweaver 8支持目前流行的各种网页技术，使用它提供的工具和面板能轻松地设计各种网页。

1.3.1 输入文本和版式设计文本是网页的基本元素，在Dreamweaver 8文档编辑窗口的“设计”视图下可以自由输入文本也可以将其他窗口中的文本复制到文档编辑窗口中。

下面重点介绍特殊文本的输入方法。

1. 输入特殊字符2. 输入空格3. 输入日期目前，图像和多媒体在网页中的应用越来越多。

在网页中加入合适的图像和动画，能给浏览者留下深刻的印象。

插入图像和多媒体的方法基本相同，下面列出常用的两种方法。

* 选择“插入”|“图像对象”或者“插入”|“媒体”子菜单中选择相应的命令，即可插入所需要的对象。

* 在“插入”工具栏的“常用”选项中，单击“图像”按钮或者“媒体”按钮，在弹出的下拉菜单中选择相应的选项即可插入所需要的对象。

在插入的过程中，可能需要多个操作步骤，要求用户确定相关属性和指定对象源文件，因此在插入图像和多媒体之前应先制作好对象。

在Dreamweaver 8中，插入的图像包括4种对象。