Dreamweaver CS5自学教程-第一课：网页设计基础

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

∙准备好一本教材。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Dreamweaver CS5教程第一课：网页设计基础一、网页的概述1、网页与网站浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关的网页的集合就构成了一个网站2、浏览网页的工具－浏览器浏览器：用于打开显示网页的软件。

最常用的是Windows系统自带的IE浏览器。

还有火狐Firefox、360安全浏览器、遨游、腾讯、TT等等。

1）网址：用于定位某个网站某个页面的一串字符，通常是这种格式/nba.shtm12) 主页：访问网站时，默认打开的第一个页面就是主页也叫首页。

二、初识Dreamweaver1、制作网站的流程规划网站类型及主题－搜集资料－使用软件进行网页制作－测试及发布2、认识Dreamweaver是当前最流行、最方便的网页设计和网站开发工具软件。

Dreamweaver：梦想编辑者。

通过这个工具，实现编辑网页的梦。

Dream：梦想Weaver：织布者，织工早期的Macromedia公司推出的“网页三剑客”之一。

“网页三剑客”指的是Dreamweaver、Flash、Fireworks这三个软件，它们这三个集合起来，就像江湖中最厉害的剑客一样，成为了网站开发中专用利器。

它集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的可视化网页开发工具，前两年Macromedia公司被Adobe公司收购，DM CS5是最新推出的版本。

三、创建站点1、什么是站点Dreamweaver的站点是一种管理网站中所有相关联文件的工具，通过站点可以对网站的相关页面及各类素材进行统一管理，还可以使用站点管理实现将文件上传到网页服务器，测试网站简单的说就是一个文件夹，在这个文件夹里包含了网站中所有用到的文件，我们通过这个文件夹（站点），对我们的网站进行管理，有次序，一目了然。

2、创建站点。

第1章 Dreamweaver CS5网页设计基础133. 预览网页。

(1) 按+组合键保存文档。

(2)在文档工具栏中单击按钮，在弹出的下拉菜单中选择【预览在IExplore 】选项，即可在IE 中预览网页的设计效果，如图1-23所示。

1.3 Dreamweaver CS5网页设计基础Dreamweaver 与Flash 、Fireworks 合在一起被称为网页制作三剑客，这3款软件相辅相承，是制作网页的最佳选择。

Dreamweaver CS5是设计Web 站点和应用程序的专业工具，它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的标准网站和应用程序。

1.3.1 Dreamweaver CS5的操作基础工欲善其事，必先利其器，下面先认识一下Dreamweaver 的发展史及其工作界面。

一、 Dreamweaver 发展简介Dreamweaver 是集网页制作和网站管理于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

其先后经历了Dreamweaver 4.0、Dreamweaver MX 、Dreamweaver MX 2004、Dreamweaver 8.0、Dreamweaver CS3、Dreamweaver CS4和Dreamweaver CS5。

图1-32所示为Dreamweaver 4.0版本。

图1-32 Dreamweaver 4.0的操作界面二、 Dreamweaver CS5界面介绍(1) 起始界面启动Dreamweaver CS5，即可进入起始界面，如图1-33所示。