Dreamweaver_CS5网页制作项目四
Adobe Dreamweaver CS5网页制作教程第4章
4.4.2 设计各块的位置
当页面的内容已经确定后，就需要根据内容本身考虑整体的页面版型，例 如单栏、双栏或左中右等。这里考虑到导航条的易用性，采用常见的双栏 模式.
#container #banner
#content
#links
#links
#footer
4.4.3 使用CSS定位
整理好页面的框架后便可以利用CSS对各个块迚行定位，以实现对页面的整体规划 ，然后再往各个模块中添加内容。 首先对<body>标记不#container父块迚行设置，如下所示。 body{ margin:0px; font-size:13px; font-family:Arial; } #container{ position:realtive; width:100%; } 以上设置了页面文字的字号、字体以及父块的宽度，让其撑满整个浏览器.
4.1.2 使用ClASS创建多种风格
在上面介绍的CSS基本语法中，每一种HTML标签只能为其定义一种风格 ，这在实际中并丌能满足需求。比如需要对同一个HTML标签呈现丌同的 风格，有若干个丌同的HTML标签采用相同的样式规则。针对这种情况， 用户可以使用CLASS。 利用CLASS可以创建同一个HTML标签的多种风格，其语法为： 标签.类名{ 属性1:属性值; 属性2:属性值;属性3:属性值; ……} 提示：标签不类名中间必须使用“.”符号分隔。 引用方法是： < 标签 CLASS="类名">
4.4 CSS+Div布局的常用方法
4.4.1 使用Div对页面整体规划 4.4.2 设计各块的位置 4.4.3 使用CSS定位
第5章 网页制作软件 Dreamweaver CS5(实验教程)
5.2 Dreamweaver CS5站点管理
5.2.3 站点的发布（Windows 7旗舰版平台 ）
1. 安装Internet信息服务
单击“开始”菜单 “控制面板”命令，在窗体中选择“卸载程 2. Web服务器设置 序”，再单击窗体左侧“打开或关闭Windows功能”。 在弹出的“Windows 功能”对话框中，若“Internet信息服务”复 单击“开始”菜单 |“控制面板”命令，在窗体中选择“系统和安 3. IE浏览 选框已勾选，说明本机已安装该组件，否则选中此复选框，单击 全”，再单击窗体右侧“管理工具”，然后启动“ Internet信息服务 启动本机（ Web服务器）IE浏览器，在地址栏输入本机IP地址或 “确定”按钮，等待安装完成。 (IIS) 管理器”应用程序 localhost，进入网站的首页“index.html”
微视频5-2 演示
5.3 网页制作基本操作
5.3.2 网页的文字处理
3. 设置滚动字幕
滚动字幕是用来显示滚动文本的，如网站的最新通知等。字幕 可以水平滚动，也可以上下滚动。 在Dreamweaver CS5中利用<marquee>标签插入字幕 。
选中要做字幕的 文本 ，单击菜单 栏“插入”|“标 签”命令，打开 “标签选择器” 对话框
• 网站与网页的创建与管理
• 网页制作的基本操作
• CSS样式表的创建与使用 • 网页的各种布局方式 • 行为的应用
5.1 Dreamweaver CS5概述
5.1.1 Dreamweaver的发展
Dreamweaver 1.0 Dreamweaver CS3
Dreamweaver 2.0
Dreamweaver 2.01 Dreamweaver 3 Macromedia Dreamweaver 4 时代 Dreamweaver 5 Dreamweaver MX Dreamweaver MX 2004 Dreamweaver 8.0 Adobe 时代
DreamweaverCS5网页制作第4章 表单PPT课件
4.1 案例制作：个人信息调查表
4.1. 案例制作：个人信息调查表
操作步骤： 6）在表格的第4行年月日前，分别单击“插入”面板组“表单”选项下的“列表/菜单” 按钮 ，分别选中插入的列表菜单，在属性面板中将“类型”设为“列表”，列表名称分 别是year、month、day，单击属性面板的“列表值”按钮，在“列表值”对话框中添加 “项目标签”和“值”的内容，单击按钮 和按钮 可以添加或删除列表内容，最后 单击“确定”按钮，如图所示。
4.1 案例制作：个人信息调查表
4.1. 案例制作：个人信息调查表
操作步骤： 5）光标移到第3行文字右侧插入单选按钮组按钮 。在弹出的对话框中进行设定，如图46所示。插入的按钮组是垂直排列的。只需将光标移到单选按钮前面向前删除，则单选 按钮则排列成一行。选中单选按钮及文字，在属性面板的“目标规则”中选择“t2”。
4.2 新知解析
9. 文件域属性面板设置项目：
❖ “文件域名称”：指定该文件域对象的名称。 ❖ “字符宽度”：指定希望该域最多可显示的字符数。 ❖ “最多字符数”：指定域中最多可容纳的字符数。如果用户通过浏览来定位文件，则 文件名和路径可超过指定的“最多字符数”的值。但是，如果用户尝试键入文件名和路 径，则文件域仅允许键入“最多字符数”值所指定的字符数。
4.2 新知解析
8. 图像域属性面板设置项目：
❖ “图像区域”：为该按钮指定一个名称。 ❖ “源文件”：指定要为该按钮使用的图像。 ❖ “替代”：用于输入描述性文本，一旦图像在浏览器中载入失败，将显示这些文本。 ❖ “对齐”：设置对象的对齐属性。 ❖ “编辑图像”：启动默认的图像编辑器并打开该图像文件进行编辑。
4.3 实战演练：网络写作注册信息表
4.2 新知解析
11.4.3 使用Dreamweaver CS5制作页面[共5页]
![11.4.3 使用Dreamweaver CS5制作页面[共5页]](https://img.taocdn.com/s3/m/e6d13735524de518964b7de7.png)
规则”对话框，直接单击
图１１－３７ 新建文件 图１１－３８ 创建ＤＩＶ 图１１－３９ 设置方框样式
（4） 依次单击按钮确认设置，然后删除默认的文本，使用相同的方法创建一个名称为“top”的DIV，设置大小为“1000×404”像素，初学者为了便于查找和观看，可先为其设置一个背景颜色，这里设置将该标签背景设置为“＃FC9”，如图11－40所示。
（5） 将插入点定位到名称为all的DIV中，再次插入一个名称为“maid”的DIV，大小为“1000×499”像素，设置背景颜色为“＃”，效果如图11－41所示。
（6）使用相同的方法在底部创建一个名称为“
图１１－４０ 设置ｔｏｐ样式 图１１－４１ 设置ｍａｉｄ样式 图１１－４２ 设置ｂｏｔｔｉｏｎ样式）将插入点定位到名称为的DIV中，再次插入一个名称为“top＿tb”的DIV，大小为“1000×121”像素，设置背景颜色为白色。
在“top”中单击定位插入点，选择【插入】→【布局对象】→【Div标签】菜单命令，插入一个AP Div标签，选择该标签，在“属性”面板中设置大小为“606×121”像素，背景颜色为白色。
）选择创建的AP Div标签，然后在“CSS面板”中单击“编辑”按钮，在打开的面板中。
Dreamweaver-cs5-网页制作教程ppt全册
打开最近 编辑的文件
创建新的文件或 者Dreamweaver站点
教学网站与 资源连接
前往 ADOBE功能 介绍网站
是否禁用开始项
2021年2月4日星期四
5
官方的重要信息
教育学院
菜单栏 文 档 工 具 栏 文 档 窗 口
状 态 栏 属 性 面 板
2021年2月4日星期四
应用程序栏 工作区切换器 插 入 面 板 文 件 面 板
Dreamweaver-cs5-网页制作教程ppt全 册
第一节 认识Dreamweaver
Dreamweaver是由Macromedia公司推出的一款网 页制作软件，它具有可视化编辑界面，用户不必编写 复杂的HTML源代码就可以生成跨平台、跨浏览器的网 页，不仅适合于专业网页编辑人员的需要，同时也容 易被业余网友们所掌握。
状态栏：位于文档窗口底部，包括3个功能区：
标签面板（又称为：标签选择器，显示和控制文档当 前插入点位置的HTML源代码标签，可查看网页内容的 代码标签，也可以单击标签，选中该元素。）
标签选择器
选取工具
缩放工具
文档大小和估计 下载时间
手形工具 窗口大小
① 标签选择器 用来显示环绕当前选定内容的标签的层次结构。若单 击该层次结构Байду номын сангаас的任何标签，则选定该标签全部内容。 如单击状态栏的<body>标签，则选定文档中整个正 文。 ② 选取工具 用于启动和禁用手形工具。 ③ 手形工具 用于在文档窗口中单击并拖动文档。
下载指示器（估计下载时间，查看传输时间）。 注意： “8秒钟原则”：一般来说，大多数用户浏览网页时 等待一个页面的时间不会超过8秒。 所以要随时注意网页的大小 ，超过8秒，要及时优化。 Web页下载时间和大小的设计应遵从该原则。
DreamweaverCS5网页设计教程课程设计
Dreamweaver CS5网页设计教程课程设计一、教学目标本课程的主要目标是：1.了解网页设计的基本原理与规范。
2.掌握Dreamweaver CS5的使用方法和网页设计技巧。
3.能够独立完成基本网页设计与制作。
二、教学内容2.1 网页设计概述本章主要介绍网页设计的概念和原理，阐述网页设计的规范和流程。
包括以下内容：1.网页设计的概念和作用。
2.网页设计的规范和流程。
3.网页设计中常用的设计软件和工具介绍。
2.2 Dreamweaver CS5入门本章主要介绍Dreamweaver CS5的基本界面和功能，让学生熟悉Dreamweaver CS5的基本操作。
包括以下内容：1.Dreamweaver CS5的安装和界面介绍。
2.Dreamweaver CS5的基本功能介绍。
3.Dreamweaver CS5的基本操作。
2.3 网页设计基础本章主要介绍网页设计的基础知识和技巧，包括页面布局、图片处理、文字处理和颜色搭配等。
包括以下内容：1.页面布局的概念和方法。
2.图片处理和文字处理的技巧。
3.颜色搭配的原则和方法。
2.4 网页设计实战本章主要介绍如何使用Dreamweaver CS5实现网页设计，通过实战让学生熟练掌握Dreamweaver CS5的使用和网页设计的流程。
包括以下内容：1.Dreamweaver CS5实现网页设计的流程。
2.网页设计实战案例介绍和指导。
3.指导学生独立完成网页设计任务。
三、教学方法本课程采用教师授课和学生实践相结合的教学方法。
具体包括：1.教师讲课。
2.演示Dreamweaver CS5的使用。
3.学生模仿和操作。
4.学生独立完成网页设计任务。
四、考核方式本课程的考核方式主要采用网页设计实战任务和学生作业。
具体包括：1.网页设计实战任务：由教师给出网页设计题目，要求学生独立完成。
任务要求设计符合规范、美观大方的网页，并在规定时间内提交。
2.学生作业：要求学生根据教师课堂讲解和演示，完成与课程相关的作业。
《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
Dreamweaver CS5网页设计案例教程4
热点链接
4.1 实木地板网页
案例分析 设计理念 操作步骤
相关工具
4.1.1 案例分析
实木地板是天然木材经烘干、加工后形成的地面装饰材料。它
呈现出的天然原木纹理和色彩图案，给人以自然、柔和、富有亲和
力的质感，是卧室、客厅、书房等地面装修的理想材料。网页设计 要求突出产品特性，营造出温馨的氛围。
4.1.2 设计理念
片不能下载时，会在图片的位置上显示替代文字；当浏览者将鼠标指针指
向图像时也会显示替代文字。 （4）按F12键预览网页的效果。
2.鼠标经过图像链接
“鼠标经过图像”是一种常用的互动技术，当鼠标指针经过图像时， 图像会随之发生变化。一般，“鼠标经过图像”效果由两张大小相等的图 像组成，一张称为主图像，另一张称为次图像。主图像是首次载入网页时 显示的图像，次图像是当鼠标指针经过时更换的另一张图像。“鼠标经过 图像”经常应用于网页中的按钮上。
口腔护理网页效果图
4
4.2.4 相关工具
1.图像超链接
建立图像超链接的操作步骤如下。 （1）在文档窗口中选择图像。
（2）在“属性”面板中，单击“链接”选项右侧的“浏览文件”按
钮 ，为图像添加文档相对路径的链接。 （3）在“替代”文本框中可输入替代文字。设置替代文字后，当图
2.创建文本链接
创建文本链接的方法非常简单，主要是在链接文本的“属性”面板中 指定链接文件。指定链接文件的方法有3种。
直接输入要链接文件的路径和文件名
使用“浏览文件”按钮
使用指向文件图标
3.文本链接的状态
一个未被访问过的链接文字与一个被访问过的链接文字在形式上是 有所区别的，以提示用户链接文字所指示的网页是否被看过。设置文本 链接状态的具体操作步骤如下。 （1）选择“修改 > 页面属性”命令，弹出“页面属性”对话框。 （2）在对话框中设置文本的链接状态。选择“分类”列表框中的“链接” 选项，单击“链接颜色”选项右侧的图标 置链接文字的颜色。 ，打开调色板，选择一种颜色来设
Dreamweaver CS5.5中文版案例教程第4章
图像和文字都是组成网页的基本元素。与文字相比，使用图像更能够使HTML文档 便于理解，更直观和生动。同时，使用图像还可以丰富网页内容，使网页页面更 加美观，使得文档更加具有吸引力。所以，无论是个人网站还是商业网站，都需 要有优秀的图像效果作为基础，以达到更好的网页设计宣传目的。相信通过本章 的学习，读者一定能制作出漂亮的网页。
4.1 网页中常用的图像格式
图像是网页中最常用的对象之一，制作精美的图像可以大大增强网页的视觉效 果，令网页更加多姿多彩。在网页中恰当地使用图像，能够极大地吸引用户的 眼球。因此，合理利用图像，是网页设计的关键。 网页中常用的图像格式有3种，即GIF、JPEG和PNG。目前GIF和JPEG文件格 式的支持最好，大多数浏览器都可以查看这两种格式的文件。由于PNG文件具 有较大的灵活性且文件较小，所以它对于几乎任何类型的网页图像都是最合适 的。
4.4 制作多媒体页面
4.4.1 插入SWF动画
现在的网页设计中，除了可以放置一些静止的图片外，动态效 果也越来越多地被应用。Web页中的多媒体技术使因特网世界 变得更加绚丽多彩。本章主要介绍在用Dreamweaver设计网页 时如何使用音频、视频、动画、Java小程序及一些控件。
4.4 制作多媒体页面
4.2 制作图像页面
4.2.1 插入图像
4.2 制作图像页面
4.2.2 设置图像属性
图像的“属性”面板用于显示图像的当前属性，可以通过改变“属性”面板中 的各项设置改变图像的属性，在“设计”视图中选择一张图像，“属性”面板 显示常用的图像属性。单击“属性”面板右下角的扩展箭头，可以查看所有的 图像属性。如果要设置图像大小和边距，先选中相应的图像，如果此时“属性” 面板隐藏，可以通过选择“窗口”→“属性”菜单命令来打开“属性”面板， 如图4-8所示。
边做边学——Dreamweaver CS5网页设计案例教程04
超链接4.1.5【实战演练】——摩托车改装网页使用“属性”面板，为文字制作空链接效果，使用“电子邮件链接”按钮，制作电子邮件链效果，使用“属性”面板，为文字制作下载链接效果；使用“CSS样式”改变链接的显示效果。
（最终效果参看光盘中的“Ch04> 素材> 摩托车改装网页> index.html”，如图4-1所示。
）1．创建空链接1 选择“文件> 打开”命令，在弹出的“打开”对话框中选择光盘中的“Ch04 > 素材>摩托车改装网页> index.html”文件，单击“打开”按钮打开文件，如图4-2所示。
图4-1 图4-22 选中如图4-3所示的文字，在“属性”面板“链接”选项右侧的文本框中输入“#”，如图4-4所示，按Enter键，确认文字的输入，创建空链接，效果如图4-5所示。
图4-3 图4-4 图4-53 用相同的方法为其他文字创建空链接，效果如图4-6所示。
第4章超链接CHAPTER 4图4-62．创建下载链接1选中如图4-7所示的文字，单击“属性”面板“链接”选项右侧的“浏览文件”按钮，在弹出的“选择文件”对话框中选择“Ch04 > 素材 > 摩托车改装网页 > images ”中的“mtc.zip ”文件，如图4-8所示。
图4-7 图4-82单击“确定”按钮，创建下载链接，“属性”面板如图4-9所示，效果如图4-10所示。
图4-9 图4-103．创建电子邮件链接1选中如图4-11所示的文字，单击“插入”面板“常用”选项卡中的“电子邮件链接”按钮，在弹出的“电子邮件链接”对话框中进行设置，如图4-12所示。
图4-11 图4-122单击“确定”按钮，创建电子邮件链接，“属性”面板如图4-13所示，效果如图4-14所示。
边做边学——Dreamweaver CS5网页设计案例教程中等职业教育数字艺术类规划教材图4-13 图4-14 4．调整超链接的显示效果1 选择“窗口> CSS样式”命令，弹出“CSS样式”面板，单击面板中的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中进行设置，如图4-15所示，单击“确定”按钮，弹出“a:link,a:visited的CSS规则定义”对话框，在左侧的“分类”选项列表中选择“类型”选项，将右侧的“Color”选项设为黑色，勾选“Text-decoration”选项下的“none”，如图4-16所示，单击“确定”按钮，创建超链接样式，效果如图4-17所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
任务一 设置超链接（上） 任务二 设置超链接（下） 任务三 设置行为
任务一 设置超链接（上）
任务说明
超链接由源端点和目标端点两部分组成，其中设 置了链接的一端称为源端点，跳转到的页面或对 象称为目标端点。 网站是由一个个网页组成的，而连接这些网页的 桥梁就是超链接。超链接包括很多种，最常用的 是常规超链接，另外还有热点链接、电子邮件链 接等。
任务实施——为“欧妮雅”网站主页设置行为
在学习了设置行为的方法后，下面将应用行为为欧 妮雅网站首页“index.html”添加伴随窗口（具体 操作见视频4-3）。
预备知识
一、设置常规超链接
常规超链接包括内部超链接和外部超链接，内部超 链接是指目标端点位于站点内部的超链接；外部超 链接是指目标端点位于其他网站中，单击它可跳转 到其他网站的超链接。
1．内部超链接
内部超链接的设置非常灵活，在选中要设置超链接 的文本或图像后，可以在属性检查器上的“链接” 编辑框中直接输入要链接对象的相对路径；也可以 通过单击“链接”编辑框右侧的“浏览文件”按 钮 ，在弹出的“选择文件”对话框中选择链接对 象。
三、设置电子邮件链接
使用电子邮件链接可以非常方便地给网站管理者 发送邮件。很多网页下方的信息区都留有电子邮 件地址，单击该地址可打开“Outlook Express” 的“新邮件”窗口，这就是电子邮件链接。
任务实施——为“欧妮雅”网站主页设置超 链接
在学习了常用超链接的设置方法后，下面通过为 “欧妮雅”网站主页设置超链接，来进一步巩固 前面所学（具体操作见视频4-1）。
2．外部超链接
外部超链接的设置一般是在选中对象后，在属性 检查器上的“链接”编辑框中直接输入要链接网 页的网址。
二、设置热点链接
通过“设置常规超链接”的学习，相信读者已经 学会了为图片设置单个链接的方法；但是，很多 时候都需要为一张图片的不同部位设置不同的链 接。那么，如何为一张图片设置多个链接呢？这 就用到了我们本节要讲的热点链接。热点链接又 叫图像映射，就是使用热点工具将一张图片划分 成多个区域，并为这些区域分别设置链接。
二、设置命名锚记链接
命名锚记链接主要用于比较长的网页。其源端点 和目标端点位于同一个网页中，单击它可以从源 端点跳到目标端点。要设置命名锚记链接，应首 先插入命名锚记（相当于目标端点），然后创建 跳转到该命名锚记的链接。
任务实施——为“欧妮雅”网站子页设置链 接
下面将在已经制作好内容的文档“sub2.html”的 基础上，为网页设置链接（具体操作见视频4-2）。
二、应用行为
行为可以应用于HTML标签、图像、链接文本等 对象。如果要对某个对象应用行为，需要先选中 该对象，然后单击“行为”面板上的“添加行为” 按钮 ，在打开的行为列表中选择动作，并在打 开的窗口中设置效果，最后指定设定的动作在什 么情况下发生，也就是事件。
三、编辑行为
1．修改行为
修改行为的方法非常简单，只需双击“行为”面 板中相应的动作名称，比如要编辑前面的“设置 状态栏文本”行为，只要双击“事件”右侧对应 的动作名称“设置状态栏文本”，就会重新打开 “设置状态栏文本”对话框，修改后关闭对话框 即可。
任务三 设置行为
任务说明
使用行为可以制作浮动的广告，状态栏文本，以 及可以收缩、放大的图像等效果。下面就来学习 行为的应用。
预备知识
一、认识行为
要应用行为，首先需要打开“行为”面板。在 Dreamweaver CS5中，选择“窗口”>“行为” 菜单（或按【Shift+F4】组合键）可打开“行 为”面板。
任务二 设置超链接（下）
任务说明
除任务一中介绍的几种最常见的超链接外，我们还 可以为网页设置图片链接、下载链接和命名锚记链 接，下面分别介绍。
预备知识
一、设置图片链接和下载链接
所谓图片链接，就是在单击网页中的某个小图片时 在新窗口中打开一幅大图片；下载链接是指单击某 个超链接时会打开一个“文件下载”对话框（或自 动启动下载工具），通过在该对话框中单击“打开” 或“保存”按钮，可以打开或下载文件。
2．删除行为
如要删除某行为，只需选中该行为，然后单击 “行为”面板上方的“删除事件”按钮 或直接 按【Delete】键。也可用鼠标右键单击行为，在弹 出的快捷菜单中选择“删除行为”命令。
3．获取更多行为
单击“行为”面板上的“添加行为”按钮 ，在 弹出的菜单中选择“获取更多行为”命令，将打 开Adobe公司的官方网站，该网站提供网页行为 的下载。