网页设计与制作案例教程—Dreamweaver cs6电子教案-第3章.pptx

网页设计与制作案例教程

电子教案

;本章学习目标;教学案例：“班级故事”网页插入文字;案例制作;案例制作;案例制作;案例制作;案例制作;案例制作;案例制作;案例制作;案例制作;步骤4：设置水平线。;步骤5：设置日期。;步骤5：设置日期。;步骤6：设置正文。;步骤6：设置正文。;步骤7：在浏览器中预览。;知识准备;2.?文本的撤销与重做

文本的撤销是指撤销上一次的操作，快捷键为【Ctrl+Z】；文本的重做则是撤销的反操作，快捷键为【Ctrl+Y】。

3.?查找与替换

在DreamweaverCS6中不仅可以查找、替换当前编辑网页的内容，还可以查找、替换整个网站的文本内容。单击菜单栏“编辑”→“查找和替换”，或者快捷键【Ctrl+P】，弹出“查找和替换”对话框。在“查找”文本框中输入要查找的内容，在“替换”文本框中输入要替换的文本;4.?编辑字体

在编辑区域输入文本之后，在文本“属性”面板中单击“CSS”，选择“字体”的下拉菜单，可以选择所要设置的字体;5.?编辑字体大小

在文本“属性”面板中单击“大小”后面的第一个下拉菜单;6.?编辑字体颜色

在文本“属性”面板中单击“CSS”，单击文本颜色按钮，弹出颜色选择器。;7.?设置其他属性

文本属性，除了可以设置文本的字体、大小和颜色外，还可以设置文本的其他属性。单击菜单栏“格式”→“样式”选项，弹出子菜单;二、网页段落格式化操作

1.?设置段落

DreamweaverCS6中的文本段落是自动换行的，就是如果输入的字体超过本行，将会自动进入下一行。若想直接换行，应按住【Shift+Enter】键。若想要直接换一个段落，应直接按【Enter】键。;3.?设置文本对齐

在制作网页文本的过程中，设置文本对齐也是一种常用的操作。单击菜单栏中“格式”→“对齐”命令。

DreamweaverCS6提供了四种对齐方式：“左对齐”“居中对齐”“右对齐”和“两端对齐”。;可以直接在“属性”面板内进行按钮操作，从左到右依次是“左对齐”“居中对齐”“右对齐”和“两端对齐”;4.?设置文本凸出和文本缩进

在制作网页文本时，有时需要用文本凸出或者文本缩进来调整文本的宽度。单击菜单栏中“格式”菜单项;5.?设置项目列表和编号列表

为文本增加列表，使网页看起来条理清晰。单击菜单栏中“格式”→“列表”的子菜单下，DreamweaverCS6提供了两种常用列表方式：“项目列表”“编号列表”;知识准备;2.?插入图像

步骤1：在DreamweaverCS6文档窗口中，将插入点放置在要插入显示图像的位置。

步骤2：单击菜单栏“插入”→“图像”菜单项，或者单击工具栏“插入”面板上“常用”项，选择“图像”按钮，则弹出“选择图像源文件”对话框。;3.?设置图像属性

DreamweaverCS6中对图像属性的设置就是对图像进行编辑。图像的编辑功能主要是调整图像大小、图像重新取样、裁剪、亮度/对比度、锐化等。

（1）调整图像大小

选择要调整的图像，图像底部、右侧及右下角会出现3个调整大小的控制点可以调整图像的高度和宽度。;如未出现调整大小控制点，则单击要调整大小的图像以外的部分重新选择，或在标签选择器中单击相应的标签以选择该图像。

调整图像的大小操作：

若要调整图像的宽度，则拖动右侧选择控制点。

若要调整图像的高度，则拖动底部选择控制点。

若要同时调整图像的宽度和高度，则拖动底角选择控制点。

若要在调整图像尺寸时保持图像的宽高比，则按住【Shift】键的同时拖动顶角的选择控制点。如果对图片大小有精准的尺寸要求，也可以在属性面板中直接输入图片尺寸;（2）图像裁剪

;步骤3：在边框内部双击或按【Enter】键裁剪所选区域。

步骤4：所选图像的边界框外的像素都将被裁剪，只保留边界框内的图像。

步骤5：预览图像。;修改图像中像素的亮度或对比度，将影响图像的高亮显示、阴影和中间色调。修正过暗或过亮的图像时通常使用“亮度/对比度”。

步骤1：选择所要调整亮度或对比度的图像，单击菜单栏“修改”→“图像”→“亮度/对比度”，或者单击图像属性面板中的“亮度和对比度”按钮。

;步骤2：弹出“亮度和对比度”对话框，拖动亮度和对比度滑动块调整设置

亮度和对比度滑动块调整值的范围从-100到100，最终的调整效果。;

（4）锐化图像

;步骤2：弹出“锐化”对话框，拖动滑块控件调整设置。

锐化滑动块调整值的范围从-100到100，最终的调整效果。;四、设置页面属性

;2.?“标题”页面属性及“标题/编码”页面属性

;5.?“跟踪图像”页面属性

;五、插入日期、水平线以及特殊字符

;2.?插入水平线

单击菜单栏“插入”→“HTML”→“水平线”，即可在编辑区插入一条水平线。单击插入的水平线，对水平线进行“宽度”“高度”“对