dreamweaver入门

网页入门篇 （一）
Dreamweaver的使用
设计开发网站什么最重要？
网页制作软件的使用？ 编程？ 美工？ 排版设计？
需求设定
设定需求：设定靶心
制作过程：发射 结果：接近或正中靶心
策划

调研阶段

访问相似类型的网站：谷歌 、 定位自己的特色 配色方案及 字体样式 布局 网站结构 导航组成 静态网页：DW， HTML 动态网页：PHP ，ASP

修改 －页面属性－ 外观（HTML）－背景颜色图像
页面元素的设置
图像

插入－图像：适当调整大小 ALT属性设置 鼠标经过图像
页面元素的设置
水平线

阴影、大小、颜色设置
声音


普通音频：插入－媒体－插件 背景音乐：窗口－行为－添加行为－播放声音 单击‘参数’各属性设为“True”
页面元素的设置
视频

普通视频：wmv（推荐）
插入－媒体－插件

Flash视频 ：flv
插入－媒体－FLV

Flashpaper：
SWF动画
插入－媒体－SWF
认识CSS样式


CSS即层叠样式表，它是Cascading Style Sheets的缩 写。在制作网页时需要整个网站的风格统一，所以需要 网页文本格式相同。若手动逐个设置页面的文本格式将 会非常麻烦且工作量很大，利用CSS样式即可解决这一 问题。定义了CSS样式后并应用该样式到各个网页中， 可以快速完成网页文本格式的统一，提高工作效率。 CSS样式可分为内部CSS和外部CSS。内部CSS样式只能 用于当前网页。外部CSS是作为一个单独的文件存在的， 通过创建扩展名为.css的样式表文件，可以将相同的样 式应用于多个网页中，大大减少了网页设计中的工作量。

第一部分：基础知识一、Dreamweaver 界面介绍二、文本的基本设置三、文本插入栏的使用四、建立超链接1．为文本添加链接和设置链接2．制作电子邮件链接3．下载链接五、插入图像⑴插入图片的两种方法（从设计视图和资源面板）、编辑图像⑵插入GIF透明图片⑶背景图像的设置⑷插入图像占位符⑸制作光标经过图像⑹插入图片（使用热区）⑺制作导航条六、插入Flash对象第二部分：网页布局表格⑴插入表格⑵表格标记<table></table> <tr></tr> <td></td>⑶选择表格①选择整个表格●把光标移到表格的左上角、上边框或下边框之外的附近区域●在表格中单击任意一个位置，然后单击该表格对应的<table>标记。

●在表格中单击任意一个位置，按下两次“Ctrl+A”②选择表格的行③选择表格的列④选择单元格⑷设置表格属性及格式化表格通过属性检查器来选择⑸编辑表格①在表格内移动②剪切、复制和粘贴表格③合并和拆分单元格执行菜单：命令 排序表格举例：制作一个文学页面一、使用表格布局页面1．插入1行1列的表格，如下图所示：2．设置表格边框颜色。

在标签选择器中单击<table>标签，然后在属性面板中设置边框颜色设置为“#999900”，并在“垂直”下拉列表中选择“顶端”。

如下图所示：3．插入4行1列的嵌套表格二。

将光标定位在表格一中，然后执行插入表格命令，如下图所示：在“属性”面板中将第二行和第四行的“背景颜色”设置为“#999900”。

4．插入1行2列嵌套表格三。

将表格二适当拉大后，在第三行单元格单击，在其“属性”面板“垂直”下拉列表中选择“顶端”选项。

然后执行插入表格，如下图所示：5.插入4行2列嵌套表格四。

将表格三适当拉大后，在左侧单元格中单元，然后执行插入表格，如下图所示：得到如下图所示的效果：5．插入2行1列嵌套表格五。

步骤6：单击【下一步】按钮，进入图示 对话框。此处选择不启用存回和取出功 能。

步骤7：单击【下一步】按钮，进入图所 示的信息摘要对话框。该对话框列出了 前面所设置的内容，如果需要再次进行 修改，只需单击【上一步】按钮至相应 对话框修改设置即可。如果没有问题， 则单击【完成】按钮完成站点的创建。

以选项卡显示插入栏
（2）文档工具栏



文档工具栏，如图所示，包含了进行常用操作 的按钮和菜单。 如果文档工具栏关闭了，可执行【查看】→ 【工具栏】→【文档】命令将其打开。 Dreamweaver有三种视图形式：代码、拆分和 设计，利用文档工具栏可方便地进行三种视图 形式的切换。
文档工具栏
代码视图：当前文档窗口中只显示HTML代码。 拆分视图：当前文档窗口将分为上下两个视图，及代码视图

1.3 建立站点
站点就是一个文件夹，在这个文件夹中包含了网站中 所有用到的文件，我们通过这个文件夹（站点）对网站进 行管理。 1.3.1 建立本地站点 先在电脑上创建一个文件夹，用来放置站点中的所有对 象，然后执行“站点\新建站点”命令，对站点进行相关 设置。 任务：创建站点“我的足球网”，站点目录为D：//zqw

步骤4：单击【下一步】按钮，进入图所 示的对话框。选择“编辑我的计算机上 的本地副本，完成后再上传到服务器 （推荐）”，单击文件夹图标选择 C:\dwtt文件夹作为站点根目录。

步骤5：单击【下一步】按钮，进入图示 的对话框，可以在此选择连接服务器的 方式。这里选择通过本地/网络进行连接。
注意：

如果看不到某个面板，而且已在【窗口】 菜单中选择了它，还是无法看见，那么 用户可以选择【窗口】→【排列面板】 命令，把所有打开的面板都恢复到默认 的位置。

Dreamweaver网页设计从零开始Chapter 1：认识DreamweaverDreamweaver是一款由Adobe公司开发的专业网页设计软件。

它集成了丰富的功能和工具，为用户提供了一种简便而高效的方式来创建和编辑网页。

Dreamweaver支持多种开发语言，包括HTML、CSS、JavaScript和PHP等，使得用户可以灵活地设计和开发网页。

Chapter 2：Dreamweaver的基本设置在开始使用Dreamweaver之前，我们需要进行一些基本的设置。

首先，我们可以选择合适的界面布局，例如工作区布局、代码布局或设计布局，以便于我们更好地编写和编辑代码。

其次，我们可以根据自己的需求设置代码提示和自动补全功能，提高工作效率。

Chapter 3：创建网页模板在设计网页时，使用模板可以让我们更加方便地保持风格的一致性。

Dreamweaver提供了创建网页模板的功能。

我们可以先设计一个主模板，包含网页的共同元素，例如页眉、页脚和导航栏等。

然后，我们可以基于这个主模板创建其他页面，只需要修改页面中的内容，而不必每次都从头开始设计。

Chapter 4：网页布局设计网页的布局设计是网页设计中的重要一环。

Dreamweaver提供了多种布局工具和功能，例如网格系统和响应式布局。

网格系统可以帮助我们将网页划分为几个等分，有助于页面元素的排列和对齐。

而响应式布局可以根据不同的设备屏幕大小自动调整网页的布局，保证用户在不同设备上都能有良好的浏览体验。

Chapter 5：网页元素的设计与编辑在Dreamweaver中，我们可以方便地设计和编辑网页的元素。

例如，我们可以使用图像编辑工具对图片进行裁剪、调整大小和优化处理，以便网页加载更快。

我们还可以使用CSS样式对文字、链接和按钮等元素进行美化。

此外，Dreamweaver还提供了预设的网页元素模板，可以快速插入常用元素，如表格、表单和轮播图等。

Chapter 6：添加动态效果动态效果能够增加网页的互动性和视觉效果。