第1篇基础篇

第1章 Dreamweaver与CSS基础

Dreamweaver是一款所见即所得的网页编辑软件，它是第一款针对专业网页设计师的视觉化网页制作软件，利用它可以轻而易举地制作出跨平台限制、跨浏览器限制且充满动感的网页。

在Dreamweaver中设计制作网页时，需要使用CSS样式对页面进行控制和修饰，在网页中应用CSS样式表有4种方式，内联即样式、嵌入样式、链接外部样式和导入样式，用户可以根据所设计网页的不同要求进行选择。

实例001 建站第一步——创建本地静态站点

在Dreamweaver中创建本地站点非常简便、快捷。不管制作什么类型、什么风格的网站页面都要从构建站点开始，首先要理清网站结构的脉络，然后才能在创建的静态站点中设计制作网页。

●源文件无

●视频光盘\视频\第1章\实例1.swf

●知识点创建站点

●学习时间 5分钟

实例分析

本实例主要通过执行“站点→新建站点”菜单命令，然后在弹出的“站点设置对象”对话框中设置站点的名称以及确定该站点根目录的位置，实例1设置完成后的效果如图1-1所示。

图1-1 最终效果

知识点链接

在创建本地静态站点时，唯一用到的菜单命令就是“站点→新建站点”命令，通过该命令弹出“站点设置对象”对话框，在该对话框中进行相应的设置即可。

制作步骤

01 执行“站点→新建站点”菜单命令，弹出“站点设置对象”对话框，在“站点名称”文本框中输入站点的名称，如图1-2所示。单击“本地站点文件夹”文本框后的“浏览”按钮，弹出“选择根文件夹”对话框，浏览到本地站点的位置，如图1-3所示。

图1-2 “站点设置对象”对话框

图1-3 “选择根文件夹”对话框

02 单击“选择”按钮，确定本地站点根目录位置，此时“站点设置对象”对话框如图1-4所示。单击“保存”按钮，完成本地站点的创建。这时Dreamweaver将自动打开“文件”面板，在该面板中显示了刚刚创建的静态站点，如图1-5所示。

图1-4 “站点设置对象”对话框

图1-5 “文件”面板

Q 在Dreamweaver中，新建站点有几种方式？

A 两种。一种是通过执行“站点→新建站点”菜单命令来新建站点；另一种是执行“站点→管理站点”菜单命令，在弹出的“管理站点”对话框中单击“新建”按钮，同样可以弹出“站点设置对象”对话框，在该对话框中设置以及新建站点。

Q 为什么要创建本地静态站点？

A 在大多数情况下，都是在本地站点中对网页进行编辑制作，然后再通过FTP上传到远程服务器上，因此在制作网页之前应创建本地静态站点。

实例002 设置远程服务器——创建企业网站站点

在创建站点时，可以先将该站点的远程服务器信息设置好，这样的话可以制作好一部分网站页面，就上传一部分页面，便于随时在网络中查看页面的效果。

●源文件无

●视频光盘\视频\第1章\实例2.swf

●知识点设置服务器信息

●学习时间 10分钟

实例分析

本实例主要通过执行“站点→新建站点”菜单命令，在弹出的“站点设置对象”对话框中设置站点的名称以及确定该站点根目录的位置，然后再切换到“服务器”选项的设置界面中，对服务器信息进行设置，实例2设置完成后的效果如图1-6所示。

图1-6 最终效果

知识点链接

本实例的关键在于服务器信息的设置，在设置信息时要确保FTP地址、用户名和密码全部正确，才能连接上Web服务器。

01 执行“站点→新建站点”菜单命令，弹出“站点设置对象”对话框，在“站点名称”对话框中输入站点的名称，单击“本地站点文件夹”后的“浏览”按钮，弹出“选择根文件夹”对话框，浏览到站点的根文件夹，如图1-7所示。单击“选择”按钮，选定站点根文件夹，如图1-8所示。

图1-7 “选择根文件夹”对话框

图1-8 “站点设置对象”对话框

02 单击“站点设置对象”对话框左侧的“服务器”选项，切换到“服务器”选项设置界面，如图1-9所示。单击“添加新服务器”按钮，弹出“添加新服务器”窗口，对远程服务器的相关信息进行设置，如图1-10所示。

图1-9 “服务器”选项设置界面

图1-10 设置服务器信息

03 单击“测试”按钮，弹出“文件活动”对话框，显示正在与设置的远程服务器进行连接，如图1-11所示。连接成功后，弹出提示对话框，提示“Dreamweaver已成功连接到您的Web服务器”，如图1-12所示。

图1-11 “文件活动”对话框

图1-12 与远程服务器连接成功

04 单击“添加新服务器”窗口上的“高级”选项卡，切换到“高级”选项卡的设置，在“服务器模型”下拉列表中选择“PHP MySQL”选项，如图1-13所示。单击“保存”按钮，完成“添加新服务器”窗口的设置，如图1-14所示。

图1-13 设置“服务器模型”

图1-14 完成远程服务器设置

05 单击“保存”按钮，完成企业网站站点的创建，“文件”面板将自动切换为刚建立的站点，如图1-15所示。单击“文件”面板上的“连接到远程服务器”按钮，即可连接到该站点所设置的远程服务器上，如图1-16所示。

图1-15 “文件”面板

图1-16 连接到远程服务器

Q 在创建站点时需不需要设置“服务器”选项卡中的相关选项？

A 如果用户需要使用Dreamweaver连接远程服务器，用来将站点中的文件通过Dreamweaver上传到远程服务器，则需要对“服务器”选项卡中的选项进行设置；否则，不需要设置。

Q 在创建远程站点的过程中，对于“服务器模型”需不需要进行设置？

A 可以设置也可以不设置，这两者没有太大的关系。如果已经确定了网站的形式，则可以进行设置，例如在实例2中，该企业网站已经确定使用PHP MySQL形式进行开发，则可以设置“服务器模型”为PHP MySQL。

实例003 远程交互站点——创建Business Catalyst站点

Business Catalyst是Dreamweaver CS6新增的一项功能，它可以提供一个专业的在线远程服务器站点，从而使设计者能够获得一个专业的在线平台。

●源文件无

●视频光盘\视频\第1章\实例3.swf

●知识点新建Business Catalyst站点

●学习时间 15分钟

实例分析

在Dreamweaver CS6中，创建Business Catalyst站点与创建本地静态站点一样，非常方便、快捷，创建完的Business Catalyst站点的效果如图1-17所示。下面我们将向大家介绍一下如何创建Business Catalyst站点。

图1-17 最终效果

知识点链接

通过执行“站点→新建Business Catalyst站点”菜单命令，在弹出的对话框中进行设置，即可创建Business Catalyst站点，其优势在于可以为网页设计者提供一个专业的在线远程服务器站点，从而能够获得一个专业的在线平台。

制作步骤

01 执行“站点→新建Business Catalyst站点”菜单命令，Dreamweaver CS6会自动连接Business Catalyst平台服务器，如图1-18所示。弹出“登录”窗口，需要使用所注册的Adobe ID登录，如图1-19所示。

图1-18 连接Business Catalyst平台服务器

图1-19 登录窗口

02 输入Adobe ID和密码，单击“登录”按钮，登录到Business Catalyst服务器，显示创建Business Catalyst站点的相关选项，如图1-20所示。在“Site Name”文本框中输入Business Catalyst站点的名称，在URL文本框中输入Business Catalyst站点的URL名称，如图1-21所示。

图1-20 business Catalyst站点设置选项

图1-21 设置business Catalyst站点

03 单击“Create Free Temporary Site”按钮，即可创建一个免费的临时Business Catalyst站点。如果所设置的URL名称已经被占用，则会给出相应的提示，并自动分配一个没有被占用的URL，如图1-22所示。单击“Create Free Temporary Site”按钮，弹出“选择站点的本地根文件夹”对话框，浏览到Business Catalyst站点的本地根文件夹，如图1-23所示。

图1-22 自动分配URL名称

图1-23 “选择站点的本地根文件夹”对话框

04 单击“选择”按钮，确定站点的本地根文件夹，弹出“输入站点的密码”对话框，可以为所创建Business Catalyst站点设置密码，如图1-24所示。单击“确定”按钮，Dreamweaver CS6会自动将Business Catalyst站点中的文件与本地根文件夹进行同步，如图1-25所示。

图1-24 “输入站点的密码”对话框

图1-25 “文件活动”对话框

05 完成Business Catalyst站点与本地根文件夹的同步操作，在“文件”面板中可以看到所创建的Business Catalyst站点，如图1-26所示。在本地根文件夹中可以看到从Business Catalyst站点中下载的相关文件，如图1-27所示。

图1-26 创建的Business Catalyst站点

图1-27 本地根文件夹

06 打开浏览器，在地址栏中输入所创建的Business Catalyst站点的URL地址，可以看到所创建Business Catalyst站点的默认网站效果，如图1-28所示。

图1-28 Business Catalyst站点默认网站效果

Q 在“输入站点的密码”对话框中是否需要勾选“保存密码”复选框？

A 视情况而定，如果勾选“保存密码”复选框，则以后连接到该Business Catalyst站点时不需要再输入密码；如果没有选中该复选框，则每次连接到该Business Catalyst站点时都需要输入密码。

Q 如何编辑和修改已经创建好的Business Catalyst站点页面？

A 在Dreamweaver CS6中，新增了一个Business Catalyst面板，就是用来编辑和修改Business Catalyst站点页面的，通过该面板可以对所创建的Business Catalyst站点页面进行设置和创建相应的内容。

实例004 内联CSS样式——控制文本显示效果

内联样式是将CSS样式代码直接添加到HTML的标签中，即作为HTML标签的属性存在。它是所有CSS样式中控制网页最为简单、直观的方式，通过这种方法可以很方便地对某个元素单独定义样式。

●源文件光盘\源文件\第1章\实例4.html

●视频光盘\视频\第1章\实例4.swf

●知识点内联CSS样式

●学习时间 10分钟

实例分析

本实例通过内联CSS样式，也就是直接在HTML标签中使用style属性对页面中文本的显示效果进行控制，页面的最终效果如图1-29所示。

图1-29 最终效果

知识点链接

使用内联CSS样式的方法是直接在HTML标签中使用style属性，该属性的内容就是CSS的属性和值，其格式如下：

        <p style="font-family：宋体；font-size:12px; color:#CCCCCC; ">内联CSS样式</p>

制作步骤

01 执行“文件→打开”菜单命令，打开页面“光盘\源文件\第1章\实例4.html”，页面效果如图1-30所示。转换到代码视图，可以看到页面的代码，如图1-31所示。

图1-30 页面效果

图1-31 代码视图

02 在<p>标签中添加style属性设置，添加相应的内联CSS样式代码，如图1-32所示。执行“文件→保存”菜单命令，保存页面。在浏览器中预览该页面，效果如图1-33所示。

图1-32 添加内联CSS样式代码

图1-33 预览效果

Q 使用内联CSS样式有哪些规定？

A 内联CSS样式是由HTML文档中标签的style属性所支持，只需要将CSS代码使用“；”（分号）隔开并输入在style=""中，便可以完成对当前标签的样式定义，这是CSS样式定义的一种基本形式。

Q 内联CSS样式属于表现与内容分离的设计模式吗？

A 内联CSS样式仅仅是HTML标签对于style属性的支持所产生的一种CSS样式编写方式，并不符合表现与内容分离的设计模式。使用内联CSS样式与表格布局从代码结构上来说完全相同，但是仅利用了CSS对于元素的精确控制优势，并没有很好地实现表现与内容的分离，所以不属于表现与内容分离的设计模式。

实例005 内部CSS样式——控制页面整体效果

内部CSS样式就是将CSS样式代码嵌入到<head>与</head>标签之间，并且用<style>与<style>标签进行声明。这种写法虽然没有完全实现页面内容与CSS样式表现的完全分离，但可以将内容与HTML代码分离在两个部分进行统一的管理。

●源文件光盘\源文件\第1章\实例5.html

●视频光盘\视频\第1章\实例5.swf

●知识点内部CSS样式

●学习时间 10分钟

实例分析

本实例主要通过对“页面属性”对话框中的相关属性进行设置来控制页面的整体属性，并且通过设置该对话框生成的代码全部显示在<head>与</head>标签之间，页面的最终效果如图1-34所示。

图1-34 最终效果

知识点链接

“页面属性”对话框通过对页面的字体、字体大小、字体颜色、背景颜色以及背景图像等属性进行设置来控制页面的效果，但是不能设置行高属性。

制作步骤

01 执行“文件→打开”菜单命令，打开页面“光盘\源文件\第1章\实例5.html”，页面效果如图1-35所示。转换到代码视图，在页面头部的<head>与</head>标签之间可以看到该页面的内部CSS样式，如图1-36所示。

图1-35 页面效果

图1-36 代码视图

02 单击“属性”面板上的“页面属性”按钮，弹出“页面属性”对话框，设置如图1-37所示。设置完成后，单击“确定”按钮，可以看到页面的效果，如图1-38所示。

图1-37 页面效果

图1-38 代码视图

03 切换到代码视图，可以看到通过“页面属性”面板设置所生成的相关内部CSS样式，如图1-39所示。在内部的CSS样式代码中定义一个名为．font的类CSS样式，如图1-40所示。

图1-39 CSS样式代码

图1-40 类CSS样式代码

04 返回到设计视图中，选中相应的文字，在“属性”面板上的“类”下拉列表中应用刚定义的类CSS样式font，如图1-41所示。转换到代码视图，可以看到在<p>标签中添加的相应代码，如图1-42所示。

图1-41 应用该样式

图1-42 代码视图

05 执行“文件→保存”命令，保存页面。在浏览器中预览该页面，效果如图1-43所示。

图1-43 预览效果

Q 在制作网页时使用内部CSS样式有哪些优势？

A 在内部CSS样式中，所有的CSS代码都编写在<style>与</style>标签之间，这样既方便了后期对页面的维护，也极大地减少了代码的数量。

Q 内部CSS样式的局限性在哪里？

A 内部CSS样式只适合于单一页面设置单独的CSS样式，如果一个网站拥有很多页面，并且对于不同页面中的<p>标签都希望采用同样的CSS样式设置时，这种方式便显得有点麻烦了。

实例006 外部CSS样式——链接外部CSS样式表文件

外部样式表是CSS样式表中较为理想的一种形式，能够实现代码的最大化使用及网站文件的最优化配置。

将CSS样式表代码单独编写在一个独立文件之中，由网页进行调用，并且多个不同的网页可以调用同一个外部样式表文件。

●源文件光盘\源文件\第1章\实例6.html

●视频光盘\视频\第1章\实例6.swf

●知识点外部CSS样式表

●学习时间 10分钟

实例分析

本实例所制作的页面大部分是由图像组成的，且使用了外部CSS样式表对整个页面的排版进行控制，使得页面修改起来更加方便，页面的最终效果如图1-44所示。

图1-44 最终效果

知识点链接

外部CSS样式是指在外部定义CSS样式并形成以．css为扩展名的文件，然后在页面中通过<link>标签将外部的CSS样式文件链接到页面中，而且该语句必须放在页面的<head>与</head>标签之间。

制作步骤

01 执行“文件→打开”菜单命令，打开页面“光盘\源文件\第1章\实例6.html”，页面效果如图1-45所示。执行“文件→新建”菜单命令，弹出“新建文档”对话框，在“页面类型”列表中选择CSS选项，如图1-46所示。

图1-45 页面效果

图1-46 “新建文档”对话框

02 单击“确定”按钮，创建一个外部CSS样式文件，将该文件保存为“光盘\源文件\第1章\style\1-6.css”。返回到“实例6.html”页面中，打开“CSS样式”面板，单击“附加样式表”按钮，如图1-47所示。弹出“链接外部样式表”对话框，单击“浏览”按钮，选择需要链接的外部CSS样式文件，如图1-48所示。