第一课：网页设计基础
一 、网站的概述 1、 网页与网站
浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关的网页的集合就构成了一个网站。
举例：www.sohu.com (搜狐网) www.http://www.diyifanwen.net/(百度网) www.youku.com(优酷网)等等。 2、 浏览网页的工具-浏览器
浏览器：用于打开显示网页的软件。最常见的是Windows系统自带的IE浏览器。 还有火狐Firefox、360安全浏览器、遨游、腾讯TT等等。
1） 网址：用于定位某个网站某个页面的一串字符，通常是这种格式
http://sports.sohu.com/nba.shtml
2） 主页：访问网站时，默认打开的第一个页面就是主页也叫首页。 3、 认识网页的组成元素 网页标题 导航栏 LOGO 图片 视频 表单 文本 超级链接
二、初识Dreamweaver 1、制作网站的流程
规划网站类型及主题?搜集资料素材?使用软件进行网页制作?测试及发布
2、认识Dreamweaver
是当前最流行、最方便的网页设计和网站开发工具软件。
Dreamweaver：梦想编辑者。通过这个工具，实现编辑网页的梦。 Dream：梦想
weaver：织布者，织工
早期是Macromedia公司推出的“网页三剑客”之一。“网页三剑客”指的是Dreamweaver、Flash、Fireworks这三个软件，它们这三个集合起来，就像江湖中最厉害的剑客一样，成为了网站开发中的专用利器。它集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的可视化网页开发工具，前两年Macromedia公司被
Adobe公司收购，DM CS5是最新推出的版本。 【操作演示】启动Dreamweaver
实例：制作一个简单页面(两种方法对照)
三、Dreamweaver的用户界面
菜单栏 文档工具栏 插入面板 文档编辑窗口 浮动面板 状态栏 属性面板 提高：工作窗口的设置、保存、恢复 【操作演示】关闭Dreamweaver 四、网页文件的基本操作
基本网页的文件类型为HTML文档，保存的文件扩展名为 “.html”
1. 创建网页文档（HTML文档）
? 文件→新建→新建文档→常规→类别→基本页
2. 保存指定文件（编辑中的文件如果文件名后面带有“*”号，表示未保存）
? 文件→保存（或Ctrl+S) ? 文件→另存为 ? 文件→保存全部
注意：1、网页文件要用英文或数字进行命名，莫用中文。
2、基本网页的扩展名为.html
3. 打开已建的HTML文档
? 文件→打开
? 右击文件，选择Dreamweaver打开。 ? 拖动到Dreamweaver
4. 关闭文件
? 文件→关闭
还未保存的网页（*），关闭时会提示你是否保存。
其他操作：
1）多个编辑文件的切换选择
2）预览编辑中的网页 (快捷键F12)
五、设置网页外观属性
网页标题、页面默认字体、默认字体大小、背景颜色、背景图片、边距。 六、创建站点 1、什么是站点
Dreamweaver的站点是一种管理网站中所有相关联文件的工具。通过站点可以对网站的相关页面及各类素材进行统一管理，还可以以使用站点管理实现将文件上传到网页服务器，测试网站。
站点简单的说就是一个文件夹。在这个文件夹里包含了网站中所有用到的文件。我们通过这个文件夹（站点），对我们的网站进行管理，有次序，一目了然。 2、创建站点
《我的足球网》 站点根目录为 D：//jcwww
七、设置默认图像文件夹 八、管理站点
1、在“文件”面板中实现以下操作
? 选择编辑网页文件 ? 创建文件或文件夹
? 剪切、粘贴、复制、删除、重命名文件或文件夹
2、站点管理
? 编辑站点 ? 复制站点 ? 删除站点
第二课：制作网页的基本操作
一 、在网页中添加文本 1） 添加普通文本
方法： A、直接输入
（1）用鼠标单击网页编辑窗口中的空白区域，窗口中随即出现闪动的光标，标识输入文字的起始位置。
（2）选择适当的输入法输入文字 B、复制和粘贴 C、从其他文件导入
2） 添加空格
输入法切换到半角状态，按空格键只能输入一个空格。如果需要输入多个连续的空格可以通过以下几种方法来实现：
（1）菜单“插入记录”->HTML->特殊字符->不换行空格 （2）直接按“Ctrl+Shift+Space”组合键
（3）设置软件首选参数-允许连续空格
3）添加日期时间
在文档的最后一行插入形式如“Friday, 2006-07-14 9:47 AM”所示的日期，且要求每次保存网页时自动更新日期。具体操作过程如下： （1）切换到“常用”插入工具栏。
（2）按Enter键，添加一空行，将光标放置在空行与正文对齐的最左端。
（3）单击菜单【插入】→【日期】，或者单击“常用”插入栏的【日期】按钮，将弹出 “插入日期”对话框。
（4）在“插入日期”对话框中，“星期格式”下拉表框中选取“Thursday,”，“日期格式”选取“1974-03-07”，在“时间格式”下拉列表框选取“10:18PM”，选中“储存时自动更新”复选框，然后单击【确定】按钮，最后生成的日期效果为“Friday,2006-07-14 9:47 AM”的形式。
（5）保存插入的日期，且浏览网页。 4 ) 插入水平线
（1）将“插入”工具栏切换到“HTML”类型。 （2）将光标放置到标题最后一个字符的右边。
（3）单击HTML插入工具栏的“水平线”按钮，即可向网页中标题与正文之间插入一条水平线。
5）添加特殊字符
（1）通过菜单【插入】→【HTML】→【特殊字符】插入
先将光标放置到需要插入特殊字符的位置，然后展开菜单【插入】→【HTML】→【特殊字符】，在【特殊字符】的级联菜单中选择需要插入的特殊字符。 （2）通过“文本”插入工具栏插入
先在Dreamweaver cs5的“插入”工具栏中选择“文本”，显示“文本”插入工具栏。
将光标放置到需要插入特殊字符的位置，然后单击工具栏中的“文本”，单击所需插入的特殊字符即可插入到网页中。
二、编辑文本
1）网页中输入的文本可以像Word文档一样，进行编辑。
1. 拖动鼠标选中一个或多个文字、一行或多行文本，也可以选中网页中的全部文本。 2. 按BackSpace键或Delete键实现删除文本操作。 3. 实现复制、剪切、粘贴等操作。 4. 实现查找与替换操作。 5. 实现撤消或重做操作。 2）设置文本格式
字体(通用性问题)、大小、颜色、风格
注：
CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。
3）分段与换行
分段按Enter回车键（隔一行）、换行按Shift+Enter（不分段）
4）设置段落格式
a.对齐方式 b.列表编号
列表可以将文本段落用符号或序号标注起来，有两种类型：项目列表和编号列表。 设置项目列表的操作过程如下: （1）选择要添加列表的若干文本段落
（2）单击属性检查器中的“项目列表”按钮或“编号列表”按钮 c.缩进
5) 使用Html段落样式
三、在网页中添加图片 1）网页中常用的图片格式 使用图片的原则：在保证画质的前提下尽可能使图片的数据量小一些，这样有利用户快速的浏览我们的网页。 .GIF格式
特点：它的图片数据量小，可以带有动画信息，且可以透明背景显示，但最高只支持256种颜色。 用途：大量用于网站的图标Logo、广告条Banner及网页背景图像。但由于受到颜色的显示，不适合用于照片级的网页图像。 .JPEG格式
特点：可以高效地压缩图片的数据量。使图片文件变小的同时基本不丢失颜色画质。 用途：通常用于显示照片等颜色丰富的精美图像。 .PNG格式 特点：是一种逐步流行的网络图像格式。既融合了GIF能做成透明背景的特点，又具有JPEG处理精美图像的优点。
用途：常用于制作网页效果图。 2）如何获取网页图像
网上下载（我要素材网 www.51scw.net）、购买素材光盘、使用图像制作软件创作
3）插入图像
插入→图像
插入面板→常用→图像
直接将图像文件拖入编辑区
注意：
? 在插入图像前应先将网页文件已保存，从而使所插图像引用正确。 ? 图像插入网页后，应确定图像文件已存入站点，否则在下次打开网
页时，会出现看不到图像的情况。
技巧：图像的位置、替换文字
4）设置图像的基本属性
图像→设置的名称
宽、高→可缩小和放大图片的显示尺寸。 源文件→图片的路径和名称。 替代→图像的说明文字 边框→图片是否要加边框
四、图文混排
Dreamweaver_CS5课程版书
