Dreamweaver CS5自学教程-第一课：网页设计基础
Dreamweaver学习教程 看完基本掌握
第一课基础知识部分一、学习前的准备工作∙准备好一个笔记本（没有准备此物者就不用参加）。
∙准备好一本教材。
∙测试和熟悉所有的软硬件环境。
∙有一个良好的心态和坚持下去的决心，网页设计不难但要设计出优秀的网页也不容易。
二、学习方法和要求∙记录老师讲的每一个知识点，特别是自己没有听懂的内容。
∙每次学习完成以后写好总结，分别总结自己没搞懂的和掌握的两方面的内容（不需要写一些如以后认真啊，很好玩啊之类的废话）。
∙老师会检查你们的学习笔记。
∙网页制作并不是一门单纯的技术，是一门集美术、设计、编程与一体的综合性技能。
所以你在学习之余还要自学PS、Flash等等之类的课程。
∙英语基础不好的同学还要花一定的时间去记忆一些关键的英语单词。
三、文件和目录∙计算机基础课程里面讲述的文件目录和文件的概念。
∙所有出现在网页中的素材和文件以及目录请使用英文名，不要使用中文名。
∙文件的扩展名的意义，你可以随意改变文件名，但不能随便改变文件的扩展名。
∙记住网页文件的扩展名。
o每一个网站都必须有的首页文件名：文件名---Default或Index 扩展名---asp或htm或html或aspxo在DM的文件标签中，利用文件名前面的图标来区别目录和文件的类型。
如下图oo首页与其他页面之间的连接关系如下图o四、网站的制作基本步骤∙在本机建立自己的工作目录（A---在有还原系统的机房上机每次都应该做这个步骤）。
∙打开DM，执行“站点”--“新建”，建立自己的站点，并且保证能够用正确的用户名和密码与远程网站联通（A）。
∙下载远程网站上的文件到本地进行编辑，然后将编辑好的文件保存(注意文件被修改以后的状态标记--有星号)，再上传到网站进行浏览测试。
o建议：测试的时候请在桌面建立一个测试的快捷方式，避免多次输入测试的URL地址而浪费时间，也可以直接在测试窗口中单击右键进行刷新。
提醒：不要直接在文件上双击测试，当你网页中有执行代码的时候就无法正常显示）。
Dreamweaver网页制作课件教案第1章 网页制作基础知识
动态网页与静态网页的最大不同就是Web服务器和用户之间的动态交互，这也是 Internet强大生命力的体现。
1.2 网站建设的基本步骤
确定网站的主题和目标用户 规划网站的栏目与版块 组织站点结构 收集整理建站资源 网页版面布局与设计 测试网站 发布与推广网站
பைடு நூலகம்
第1章 网页制作基础知识
本章重点
本章和网页制作的基本步骤，然后简要介绍设计制作网页的常用工 具，重点介绍Adobe公司最新推出的Dreamweaver CS5，它涵盖了 网页制作与站点管理，是使用最多的网页制作工具之一。
学习目的
通过本章的学习，您可以：
网页与网站 网站建设的基本步骤
1.1 网页与网站
网页是网络上的基本文档，网页中包含文字、图片、声音、动画、影像以及 链接等元素，通过对这些元素的有机组合，就构成了包含各种信息的网页。简单 地说，通过浏览器在WWW上所看到的每一个超文本文件都是一个网页，而通过 超链接连接在一起的若干个网页的集合即构成网站。
通常我们看到的网页，都是以.htm、.html、.shtml等为后缀的文件。在网站设计 中，这种纯粹HTML格式的网页通常被称为静态网页。静态网页的内容是固定的， 当用户浏览网页内容时，服务器仅仅是将已有的静态HTML文档传送给浏览器供用 户阅读。若网站维护者要更新网页的内容，就必须手工更新所有的HTML文档。
第1章 网页制作基础
第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 段落标记<P> 1.4.3 通用块标记<DIV> 1.4.4 行内标记<SPAN> 1.4.5 元数据标记<META>
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Dreamweaver CS5网页制作教程笔记
该教程使用Dreamweaver CS5作为开发工具，结合老师的网站开发经验，为大家讲解网页制作的每个环节。
希望通过本套课程的学习，大家能灵活运用Dreaweav er完成网站的开发。
课程分为12课共118节视频讲解，并随光盘附带课程素材、板书及相关软件。
第一课：网页设计基础
1-1 网站的概述
1-2 初识Dreamweaver
1-3 Dreamweaver CS5的用户界面
插入面板显示方式的调整切换
网页显示比例大小尺寸占用数据空间1-4 网页文件的基本操作
1、创建网页文件
2、网页文件的保存保存快捷键 Ctrl+S 网页保存的名字必须是字母或数字
修改后没有保存的文件名带* 注：网站首页文件的命名一般用“index.html”，首页的文档命名如下
3、网页预览
主要浏览器预览的快捷键是F12
浏览器可以通过以上方式添加
1-5 设置网页外观属性
1、页面属性的设置
网页空白区域单击后，点击“页面属性”，对相关要素进行设置3、添加字体
1-6 创建站点
1、站点也叫做根目录，是是一个文件夹，是网站的网页和所有素材存储的地方。
2、创建站点:站点的名称用中文，站点的文件夹名称用英文。
3、新建网页保存:新建的网页保存命名必须用英文
1-7 设置默认图像文件夹
1、在站点根目录创建图片素材存储的文件夹
文件夹的命名一定不能用中文，最好使用“images”命名2、设置images文件夹为网站图片储存的默认文件夹
3、网页中插入图片时，点击保存确定，电脑中任何储存位置的图片素材都会被自动复制保存到站点根目录下的images文件夹中。
1-8 站点的管理
1、双击打开所要编辑的网页
2、新建网页的另一种方法：点击站点，右击新建文件，单击命名新建的网页文件。
用同样的方式可以新建文件夹。
网页文件在不同文件夹之间移动时，需要更新网页的链接才能保证网页中的链接有效。
子文件夹中创建新网页的方式与上边的
创建方式相同。
3、不同站点之间的切换
4、站点的复制或删除
1-9 补充（Dreamweaver CS5的安装）。