当前位置:
文档之家› 第5章 网页制作软件 Dreamweaver CS5(实验教程)
第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 时代
单击“锐化”按钮 设置参数, 增加图像边缘的对 比度
5.3 网页制作基本操作
5.3.3 插入图像
4. 设置背景图像
设置方式 • 在“页面属性”对话框中,“外观(CSS)”和“外观 (HTML)”栏都有关于背景图像的设置。 • 用户在自定义CSS样式表中, 通过Background-image属性设 置。 背景图像样式 当背景图像没有浏览界面大时,背景图像将被复制平铺 • no-repeat(不重复):只在图像元素的开始处显示一次图像。 • repeat(重复):在图像元素的水平方向和垂直方向平铺图像。 当不指定平铺方式时,这是默认方式。 • repeat-x(横向重复):在水平方向进行图像的重复显示。 • repeat-y(垂直重复):在垂直方向进行图像的重复显示。
(1)水平线 (2)特殊符号 (3)标记列表
单击菜单栏“格式”|“列表”命令 ,通过其级联菜 单项完成操作 单击菜单栏“插入”|“HTML”|“水平线”命令
单击菜单栏“插入”|“HTML”|“特殊字符”命令, 通过其级联菜单项完成操作
“属性”面板HTML属性检查器中
也提供列表项设置
5.3 网页制作基本操作
微视频5-3 演示
5.3 网页制作基本操作
5.3.3 插入图像
3. 编辑图像
插入图像后选中该图像,“属性”面板还提供了对图像的编辑功能。
单击 “裁剪” 按钮删除图像 单击“重新取样”按钮 重新计算图像数 据量,以适应当前图像 大小
中选定区域以外的多余部分
ห้องสมุดไป่ตู้
单击“亮度和对比度”按钮 设置亮度、对比度参数
有.asp、.aspx、.php、.jsp等格式
a.html
静态网页文件后缀名 常见.htm或.html
b.html
c.html
d.html
e.php
ca.html
cb.html
cc.html
ea.html
站点文件夹:网站中所有相关文件必须存放在站点文件夹中。
5.2 Dreamweaver CS5站点管理
5.2.1 站点的创建和管理
1. 创建本地站点 站点:是一种管理网站中所有相关联文档的工具,是一种文档的组 织形式。 单击菜单栏“站点”|“新建站点”命令,打开“站点设置对象” 对话框
5.2 Dreamweaver CS5站点管理
5.2.1 站点的创建和管理
2. 管理站点 单击菜单栏“窗口”|“文件”命令,出现“文件”面板,其下拉 列表框中会出现当前站点名称。 单击下拉列表框,在下拉列表中会出现所有已经创建好的站点, 若选择“管理站点”选项,则打开“管理站点”对话框,或者直 接单击菜单栏“站点”|“管理站点”命令也可打开此对话框
单击菜单栏“文件”|“新 建”命令,打开“新建文 档”对话框
5.2 Dreamweaver CS5站点管理
5.2.2 文件的新建和管理
1. 创建文件
方式一:
选择合适对象后, 单击“创建”按钮
5.2 Dreamweaver CS5站点管理
5.2.2 文件的新建和管理
1. 创建文件
方式三:
也可以通过单击“文件”面板右上角按 钮,在弹出的“文件”菜单项中完成 文 件新建。若选择“新建文件夹”,则在 当前文件夹下新建下级文件夹
课件制作:周萱
5.1 Dreamweaver CS5概述 5.2 Dreamweaver CS5站点管理
第 5章 网页制作软件 Dreamweaver CS5
5.3 网页制作基本操作
5.4 网页布局
5.5 行为 5.6 典型习题
本章要点
• 自定义Dreamweaver CS5的工作界面与工作环境
打开“高级设置”对话框,单 击“物理路径”文本框右侧按 钮,设置好站点文件夹后,单 击“确定”按钮
5.3 网页制作基本操作
5.3.1 设置网页属性
单击工作界面下方“属性”面板 中的“页面属性”按钮,打开 “页面属性”对话框
5.3 网页制作基本操作
5.3.2 网页的文字处理
1. 添加文字
将光标置于网页中,直接输入文字内容。输入文本时,若文本要 换行有两种方式。 • 直接按<Enter>键 。上一行与下一行之间空出一行的距离,在 代码区对应的HTML标记是<p>,这是分段。 • 按<Shift>+<Enter>键进行强制换行,上一行与下一行之间很 紧密,对应的HTML标记是<br> 输入空格:按<Ctrl>+<Shift>+<Space>键,对应的HTML标记是 “ ” 。 从外部导入Word、Excel等文档。 • 例:要导入Word文档,单击菜单栏“文件”|“导入”|“Word 文档”命令,打开“导入Word文档”对话框,选择要导入的 文件,单击“打开”按钮,文本内容就被导入至网页中。
5.3 网页制作基本操作
5.3.2 网页的文字处理
3. 设置滚动字幕
• 在左侧列表中选择 “HTML标签”,在右侧 列表中选择“marquee”, 单击“插入”按钮,再 单击“关闭”按钮。 • 此时代码区生成代码 <marquee>hello</marqu ee>。 • 保存网页后预览,此 时设置滚动字幕用的是 marquee标签的默认属 性。
5.3 网页制作基本操作
5.3.2 网页的文字处理
3. 设置滚动字幕
• 在网页中选中字幕文 本,单击工作界面状 态栏“<marquee>”标 签 • 按<Ctrl>+<T>键打开 “快速标签编辑器” • 修改“<marquee>” 标签的属性
5.3 网页制作基本操作
5.3.2 网页的文字处理
4. 其他修饰
5.3 网页制作基本操作
5.3.3 插入图像
5. 插入图像占位符
在设计网页过程中,有时当要往网页中插入图像时却 没有合适的图像,这时可以先插入图像占位符代替图 像,为图像预留指定大小的空间,而不影响设计。
鼠标移至图像时,该图像切换为另一幅图像,鼠标 将光标置于网页中待插入图像位置,单击菜单栏“插入” |“图像对 从图像移走时,又恢复为原始图像 象” |“图像占位符”命令,打开“图像占位符”对话框 6. 插入鼠标经过图像
Dreamweaver CS4
Dreamweaver CS5 Dreamweaver CS5.5
Dreamweaver CS6
Dreamweaver CC ……
5.1 Dreamweaver CS5概述
5.1.2 Dreamweaver CS5工作界面与工作环境
Dreamweaver CS5工作区的操作界面主要包括菜单栏、工具 栏、状态栏、属性面板和浮动面板组等。
5.3 网页制作基本操作
5.3.4 建立超链接
3. 图像热点链接
图像热点——将图像划分成小块区域,为每个区域单独做超链接, 这样带有链接的区域就称为图像的热点。
5.3 网页制作基本操作
5.3.4 建立超链接
5.3 网页制作基本操作
5.3.2 网页的文字处理
2. 设置文本属性
文本属性设置包括设置文本字体、颜色、链接样式等。 (1)在“页面属性”对话框中设置文本
微视频5-1 演示
(2)在“属性”面板中设置文本 • CSS属性检查器:在“属性”面板中单击按钮 • HTML属性检查器:在“属性”面板中单击按钮
2. 设置图像属性
选中图像,拖动控制柄。
• 将光标分别定位至三个控制 柄处,可以分别对图像进行 水平拉伸、对角拉伸、垂直 拉伸 • 按住Shift键进行对角拉伸, 则是对图像等比例缩放。