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

合集下载

Dreamweaver学习教程看完基本掌握

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

∙准备好一本教材。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Dreamweaver网页制作课件教案第1章网页制作基础知识

所谓动态网页，是指服务器会针对不同的使用者以及不同的要求执行不同的程序，从而提供不同的服务，一般与数据库有关。这种网页通常在服务器端以扩展名asp、 jsp或是aspx 等储存。动态网页的页面自动生成，无须手工维护和更新HTML文档；不同的时间、不同的人访问同一网址时会产生不同的页面。
动态网页与静态网页的最大不同就是Web服务器和用户之间的动态交互，这也是 Internet强大生命力的体现。
1.2 网站建设的基本步骤
确定网站的主题和目标用户规划网站的栏目与版块组织站点结构收集整理建站资源网页版面布局与设计测试网站发布与推广网站
பைடு நூலகம்
第1章网页制作基础知识
本章重点
本章和网页制作的基本步骤，然后简要介绍设计制作网页的常用工具，重点介绍Adobe公司最新推出的Dreamweaver CS5，它涵盖了网页制作与站点管理，是使用最多的网页制作工具之一。
学习目的
通过本章的学习，您可以：
网页与网站网站建设的基本步骤
1.1 网页与网站
网页是网络上的基本文档，网页中包含文字、图片、声音、动画、影像以及链接等元素，通过对这些元素的有机组合，就构成了包含各种信息的网页。简单地说，通过浏览器在WWW上所看到的每一个超文本文件都是一个网页，而通过超链接连接在一起的若干个网页的集合即构成网站。
通常我们看到的网页，都是以.htm、.html、.shtml等为后缀的文件。在网站设计中，这种纯粹HTML格式的网页通常被称为静态网页。静态网页的内容是固定的，当用户浏览网页内容时，服务器仅仅是将已有的静态HTML文档传送给浏览器供用户阅读。若网站维护者要更新网页的内容，就必须手工更新所有的HTML文档。

第1章网页制作基础

Dreamweaver CS5 网页制作基础教程
第1章
网页制作基础
本章将介绍与网页设计与制作有关的基本知识以及Dreamweaver CS5的基本情况，以为后续内容的学习奠定基础。
学习目标
了解与网页有关的一些常用名词术语。了解HTML和CSS的一些基本知识。了解Dreamweaver CS5的工具栏和功能面板。掌握Dreamweaver CS5设置首选参数的方法。
1.2.3
CSS基础
CSS（Cascading Style Sheets，层叠样式表或级联样式表）作用主要是用于定义如何显示HTML元素。
1、CSS的保存方式
2、CSS的语法结构 CSS规则由两个主要的部分构成：选择器和声明。选择器 {声明1; 声明2; ... 声明N} h3 {color: red; font-size: 14px;} p {color: #ff0000;} p {color: #f00; } p {color: rgb(255,0,0);} p {color: rgb(100%,0%,0%);} p {font-family: "sans", "serif";} p {text-align: center; color: red;}
ver是美国Macromedia公司（1984年成立于美国芝加哥）于1997年发布的集网页制作和网站管理于一身的所见即所得式的网页编辑器。由Macromedia公司发布的Dreamweaver的最后版本是Dreamweaver 8。 2005年底，Macromedia公司被Adobe公司并购。 2007年7月，Adobe公司发布Dreamweaver CS3， 2008年9月发布Dreamweaver CS4，2010年4月发布Dreamweaver CS5，2011年4月发布 Dreamweaver CS5.5，约一年后又发布了 Dreamweaver CS6。

Dreamweaver cs5标准实例教程配套全册教学课件

2.2.3 “插入”面板
单击文档窗口右侧浮动面板组中的“插入”按钮，即可弹出以前熟悉的“插入”面板。
“插入”面板共有8类对象元素，包含一些最常用的项目：常用、布局、表单、数据、Spry、InContext Editing、文本和收藏夹。“插入”面板的初始视图为“常用” 面板，单击“插入”面板中“常用”面板右侧的倒三角形按钮，即可在弹出的下拉列表中选择需要的面板，从而在不同的面板之间进行切换。如图所示。
所谓动态网页，是指服务器会针对不同的使用者以及不同的要求执行不同的程序，从而提供不同的服务，一般与数据库有关。这种网页通常在服务器端以扩展名asp、 jsp或是aspx 等储存。动态网页的页面自动生成，无须手工维护和更新HTML文档；不同的时间、不同的人访问同一网址时会产生不同的页面。
动态网页与静态网页的最大不同就是Web服务器和用户之间的动态交互，这也是 Internet强大生命力的体现。
第1章网页制作基础知识
本章重点
本章和网页制作的基本步骤，然后简要介绍设计制作网页的常用工具，重点介绍Adobe公司最新推出的Dreamweaver CS5，它涵盖了网页制作与站点管理，是使用最多的网页制作工具之一。
学习目的
通过本章的学习，您可以：
网页与网站网站建设的基本步骤
1.1 网页与网站
网页是网络上的基本文档，网页中包含文字、图片、声音、动画、影像以及链接等元素，通过对这些元素的有机组合，就构成了包含各种信息的网页。简单地说，通过浏览器在WWW上所看到的每一个超文本文件都是一个网页，而通过超链接连接在一起的若干个网页的集合即构成网站。
通常我们看到的网页，都是以.htm、.html、.shtml等为后缀的文件。在网站设计中，这种纯粹HTML格式的网页通常被称为静态网页。静态网页的内容是固定的，当用户浏览网页内容时，服务器仅仅是将已有的静态HTML文档传送给浏览器供用户阅读。若网站维护者要更新网页的内容，就必须手工更新所有的HTML文档。

第1章初识Dreamweaver CS5

14
1.4 创建网页文档
• 在创建站点之后，用户即可使用Dreamweaver CS5创建网页文档，将其保存到站点中，并对网页文档进行浏览。
15
1.4.1 新建网页文档
• 用户可以通过两种方式创建网页文档，一种是通过【Dreamweaver 起始页】，而另一种则需要使用【新建文档】对话框。除此之外，Dreamweaver CS5还允许用户设置文档的默认属性。
16
1.4.2 设置页面属性
• 在创建网页文档后，用户还可针对该网页文档，设置页面的基本属性，对网页文档中的内容进行简单定义。在网页文档任意空白处右击鼠标，然后即可执行【页面属性】命令，打开【页面属性】对话框。
属性页面字体加粗倾斜大小文本颜色背景颜色背景图像 no-repeat 重 repeat 复 repeat-x repeat-y 左边距右边距上边距下边距
• 发布网站需要使用专门的网络操作系统。目前最常见的网络操作系统是微软公司开发的Windows NT系列操作系统，其不仅支持发布静态的网页文档，还支持发布多种类型的动态程序。 • 1．IIS Web发布系统简介 • 2．安装IIS系统 • 3．配置IIS服务
操作系统 Windows 2000 Windows 2003 Windows Vista Windows 7
作用设置网页文档中所有文本的默认字体样式，例如宋体、黑体、微软雅黑等。为网页文档中的文本默认加粗使网页文档中的文本默认倾斜设置网页文档中所有文本的默认尺寸，其单位可以为px（像素）、 pt（点）、in（英寸）、cm（厘米）等设置网页文档中所有文本的默认前景色设置网页文档中所有文本的默认背景色为网页文档添加背景图像设置网页文档的背景图像不重复显示设置网页文档的背景图像重复显示设置网页文档的背景图像仅在水平方向重复显示设置网页文档的背景图像仅在垂直方向重复显示设置网页文档中内容到浏览器左侧边框的距离设置网页文档中内容到浏览器右侧边框的距离设置网页文档中内容到浏览器顶部边框的距离设置网页文档中内容到浏览器底部边框的距离

网页设计与制作——Dreamweaver CS5标准教程第1章网页设计基础

色彩，网页设计元素和页面布局是网页创意设计的三个重要组成部分。
1.2.1色彩
1.2网页设计知识
1.认识色彩任何色彩都具有色相、明度和纯度三种属性。色相是色彩的名称，是一个色彩区别与另一个色彩
的主要因素。明度也称为亮度，表示了色彩的明暗程度，明度越
大，色彩越亮。纯度是指色彩的鲜艳程度或饱和度。色彩纯度越高
1.2网页设计知识
3. 利用图像配色
1.2.2网页设计元素
1. 网站标识网站logo，将网站logo置于页面比较醒目的位置，如左
上角。 2. 网站banner 网站banner一般位于页面的顶部，即可以表达和突出网
站创意和形象，也可以传达某种特定信息。网络banner通常是由GIF动画、JPEG图像或Flash动画完
Language，超文本标记语言） XHTML（eXtensible Hyper Text Markup
Language，可扩展的超文本标记语言）是 HTML的升级版本。
1.3网页标准化技术
1.3.2 CSS样式
CSS（Cascading Style Sheets，层叠样式表）是由W3C 指定和发布的，用于描述网页元素格式的一组规则，其作用是设置HTML和XHTML语言编写的结构化文档外观。
1.3网页标准化技术
网页由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior），相应的技术标准由3个部分组成：结构化标准语言，CSS样式表和脚本语言。
1.3网页标准化技术
1.3.1 结构化语言结构化语言HTML（Hyper Text Markup
名，表达为如下形式：协议名://服务器的IP地址或域名/路径/文件名 /s2012/shicha URL地址，或Web地址，或网址，它可以是本地磁盘

《DreamweaverCS5网页设计》课件

第2章目录
设置页面的标题和编码： 1. 选择“修改”→“页面属性”，或者在属性检查器中单击 “页面属性”。 2. 在“页面属性”对话框中，单击“标题/编码”类别，如图 2.1所示。 3. 在“标题”框中，指定页面标题。也可以使用文档工具栏来指定页面标题。 4. 从“编码”下拉列表框中选择文档中字符所用的编码。 5. 单击“确定”。
第1章目录
8／183
1.2 设置Dreamweaver站点
1.2.1 Dreamweaver工作流程规划和设置站点组织和管理站点文件设计网页布局向页面添加内容通过手动编码创建页面针对动态内容设置Web应用程序创建动态页测试和发布
第1章目录
9／183
1.2 设置Dreamweaver站点
第10章制作ASP动态网页
3／183
第1章 Dreamweaver CS5 使用基础
1.1 认识Dreamweaver CS5工作区 1.2 设置Dreamweaver站点 1.3 创建和管理站点文件
4／183
ቤተ መጻሕፍቲ ባይዱ
1.1 认识Dreamweaver CS5工作区
1.1.1 启动Dreamweaver CS5 启动Dreamweaver CS5：单击“开始”，指向“所有程序”，然后单击 “Adobe Dreamweaver CS5”。在“开始”菜单或任务栏中为这个软件添加一个快捷方式。 1.1.2 工作区布局概述工作区中主要包括以下元素。欢迎屏幕。应用程序栏。文档工具栏。标准工具栏。编码工具栏。样式呈现工具栏文档窗口属性检查器标签选择器面板组插入面板文件面板
第1章目录
13／183

DreamweaverCS5教程第1章

1.2 网页的相关概念
1.2.1 1.2.2 1.2.3 1.2.4 浏览器网页与HTML URL、域名与IP地址网站上传和下载
1.2.1 浏览器
浏览器是指将互联网上的文本文档（或其他类型的文件）翻译成网页，并让用户与这些文件交互的一种软件工具，主要用于查看网页的内容。互联网（Internet）又称为因特网，是一个把分布于世界各地的计算机用传输介质互相连接起来的网络。Internet主要提供的服务有万维网（WWW）、文件传输协议（FTP）、电子邮件（E-mail）及远程登录（Telnet）等。
1.2.2 网页与HTML
HTML（Hyper Text Marked Language）即超文本标记语言，是一种用来制作超文本文档的简单标记语言，也是制作网页的最基本的语言，它可以直接由浏览器执行。
1.2.3 URL、域名与IP地址
URL也就是网络地址，是在Internet上用来描述信息资源，并将Internet提供的服务统一编址的系统。域名类似于Internet上的门牌号，相对于IP地址而言，更便于使用者理解和记忆。 IP地址是给因特网上的每台计算机和其他设备分配的一个唯一的地址。在IE浏览器的地址栏中输入IP地址 “202.38.64.9”，按下回车键。
<BODY BACKGROUNE=”URI “BGCOLOR=”Color “> ............................................ </BODY>
1.4 HTML常用标记
1.4.1 链接标记< LINK > 1.4.2 段落标记 1.4.3 通用块标记<DIV> 1.4.4 行内标记 1.4.5 元数据标记<META>

Dreamweaver CS5教程

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、创建站点。

Dreamweaver CS5 网页设计与应用(第2版)第1章初识Dreamweaver

在“管理站点”对话框中删除站点的具体操作步骤如下。（1）在“管理站点”对话框左侧的站点列表中选择要删除的站点。（2）单击“删除”按钮即可删除选择的站点。
1.2.3 定义新站点
创建本地站点的步骤（1）选择“站点 > 管理站点”命令，启用“管理站点”对话框。（2）在对话框中单击“新建”按钮，在弹出的菜单中选择“站点”命令，弹出“站点设置对象未命名站点1”对话框。在对话框中，设计者通过 “基本”选项卡建立不同的站点，对于熟练的设计者而言，通常在对话框 “高级”选项卡的“本地信息”分类中，根据需要设置站点。
1.1 工作界面
Dreamweaver的工作区将多个文档集中到一个窗口中，不仅降低了系统资源的占用，还可以更加方便地操作文档。Dreamweaver CS5的工作窗口由5部分组成，分别是“插入”控制面板、“文档”工具栏、“文档” 窗口、控制面板组和“属性”控制面板。Dreamweaver的操作环境简洁明快，可大大提高设计效率。
1.3.2 编辑站点
有时用户需要修改站点的一些设置，此时需要编辑站点。例如，修改站点的默认图像文件夹的路径，其具体的操作步骤如下。
（1）选择“站点 > 管理站点”命令，启用“管理站点”对话框。（2）在对话框中，选择要编辑的站点名，单击“编辑”按钮，弹出“站点设置对象未命名站点1”对话框，选择“高级设置”选项卡，此时可根据需要进行修改，单击“确定”按钮完成设置，回到“管理站点”对话框。（3）如果不需要修改其他站点，可单击“完成”按钮关闭“管理站点”对话框。
开始页面
“首选参数”对话框
1.1.2 不同风格的界面
选择 “窗口 > 工作区布局”命令，弹出其子命令菜单，选择“经典”或“编码器”命令。选择其中一种界面风格，页面会发生相应的改变。

计算机：网页设计基础及DW CS5基础

三、超文本标记语言（HTML）基础 3、HTML的优点
（1）每一个HTML文档都不太大，它能够尽可能快地通过网络传输和显示，不需要加入字体或格式等其他控制信息。（2）HTML文档是独立于平台的，它对多平台兼容。（3）虽然HTML是一个标识性的语言，但是它比任何一种计算机语言都简单易学。而且制作时并不需要特殊的软件，只要一个字符编辑器就可以完成。
五、通过输入HTML代码制作简单的网页
一、认识网页与网站 2、网站
网站是一个复杂的系统，它不仅包括网页、 Web 应用程序，还包括与之相关的数据库及各类媒体文件，甚至还包括操作系统、Web 服务器软件以及承载网站运行的各类硬件设备等。
图1-1奥迪A8网站首页
二、网页的基本元素 1、文本
文本是网页中运用最为广泛的元素之一，是网页存在的基础。在网页设计中，我们可以通过设置字体、字号、颜色、背景等属性来改变文本的视觉效果。
三、超文本标记语言（HTML）基础 2、常用的HTML标签
（1）文本标签：包括标题标签、文字控制标签和换行标签。 c、换行标签 ：是一个单标签，也称空标签，不包含任何内容。在HTML文档中的任何位置只要使用了 标签，当用户通过浏览器浏览该文档时， 标签后面的内容将显示在下一行。例如：
二、网页的基本元素 5、视频
随着网络带宽的不断增加，在网页中使用的视频也越来越多。在网页中添加视频文件可以大大增加站点的可读性，视频的直观性可以给访问者带来很大的视觉冲击。视频和音频一样，都是由与文件类型相适应的插件来进行播放的。目前，网页上使用最为广泛的视频格式包括WMV 、RM 、 ASF 、MPEG 和AVI 。

Dreamweaver CS5 网页制作

框架页面
一般情况下都是一个浏览器窗口显示一个的Web页面，这一类页面简单、直观制作方便。但是当要求在一个窗口内容纳大量信息时，比如一个大型网站的首页，这种页面就很难胜任了。这时，我们就必须运用框架技术来解决问题。框架的作用就是把浏览器窗口划分为若干个区域，每个区域显示不同的网页。
可视化网页编辑工具
Web的特点和结构
3.Web技术经历了3个发展阶段第一代，提供对静态网页的管理和访问。第二代，提供对动态网页的访问和显示。第三代，除动态网页生成和访问之外，还提供基于Web的联机事务处理能力。 • 静态网页是从放置到服务器以后，直到发送给浏览器不会发生更改的网页，通常用HTML语言编写其代码，保存为.htm文件。 • 动态网页是在发送到浏览器之前由应用程序服务器修改的网页。动态网页的源文件可用HTML语言和VBScript或JavaScript等脚本语言编写，保存为.asp文件，也称为Web应用程序。
动态网页技术
(1) CGI技术
CGI ---Common Gateway Interface，公用网关接口。用来实现CGI应用程序的编程语言有许多种，如Visual Basic、C/C++、Perl等。当用户在浏览器端填好表单要求输入的资料，提出HTTP请求后，Web服务器端执行该表单所设定的CGI应用程序，处理访问者输入的信息并据此做出响应，将其运行结果传输到客户端的浏览器上。由于CGI程序不是整合在HTML文档中，因此须使用与 HTML不同的设计过程来设计一个应用程序，每一次修改程序都必须重新将CGI程序编译成可执行文件。使用CGI方式的缺点是效率低下。
WWW服务的常用术语
2. 网页 WWW服务器上的基本信息单位就是网页。网页是单个的 HTML文件，是作者公布信息的最小单位。 3. 网站网站是一个存放在WWW服务器上的完整信息的集合体，由一组相关联的网络文件组成，包含一个或多个网页。

1.3.1 Dreamweaver CS5的操作基础[共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所示。