《Dreamweaver CC网页设计与制作教程》课件——第3章　文本和图像.pptVIP

第3章文本和图像3.1案例1：创建一个新文档并保存【案例目的】创建一个空白文档，录入相关文本内容，如图3-1所示。【核心知识】掌握文档的基本操作，新建文档和保存文档。学习在dreamweaverCC中录入文本和插入其他内容。3.1.1创建新文档1.创建新的空白文档或模板2.创建基于Dreamweaver附带的其中一个预设计页面布局（包括30多个基于CSS的页面布局）的文档3.创建基于某现有模板的文档4.还可以设置文档首选参数。例如，如果经常使用某种文档类型，可以将其设置为创建的新页面的默认文档类型。3.1.2添加文本和插入对象1．添加文本在文档中添加文本可以在当前光标位置直接添加，也可在层或表格中添加。2．插入对象除了文本以外，在文档中还可以插入层、图像、表格等其他各种对象，这些对象构成网页元素。（1）插入日期（2）插入特殊字符3.1.3保存文档在对文档内容编辑完成之后，要存储该文档，以便日后使用和维护。单击“文件”下拉菜单中的“保存”命令，或是直接按下Ctrl+S组合键。如果该文档尚未保存过，则会出现Windows标准的“另存为”对话框。选择路径并输入文件名，按下“保存”按钮即可。如果该文档已被保存过，则会直接存储文档，不会再出现对话框。3.2案例2：打开已有文档并修饰文档内容【案例目的】学习修饰文档内容，效果如图3-19所示。【核心知识】掌握文档的基本打开操作，学习在dreamweaver中修饰文档内容。3.2.1打开文档如果文档已经存在，可以启动Dreamweaver，单击“文件”菜单下的“打开”命令，弹出Windows标准的“打开”对话框，选择需要的文件，按下“打开”按扭。还可以在右侧浮动面板中，打开“文件”面板，选择所需文件名，直接双击，也可以打开文件。3.2.2文本格式化1.打开“格式”下拉菜单，有很多命令可以对文本进行格式化，包括HTML样式和CSS的使用。2.使用属性面板对文本进行格式化修饰。3.使用【代码】或者【拆分】窗口通过编写代码来进行文本格式化。4.使用CSS层叠样式格式化文本。3.2.3文档页面属性文档的页面属性可以对页面的外观字体、背景，链接字体、颜色，标题等进行更详细的设置。单击属性面板中右侧的【页面属性】按钮，或者选择“修改”下拉菜单中“页面属性”，都可以打开“页面属性”对话框。在页面属性对话框中根据不同的分类进行设置后，例如在上图中可以设置字体的样式、粗细和大小，文本颜色，背景颜色和图像，并可以设置其左右上下边距。3.3案例3：插入图像并设置其属性【案例目的】插入图像并设置图像属性，效果如图3-31所示。【核心知识】掌握插入图片的基本使用方法。3.3.1插入图像在DreamweaverCC中图像属于插入的对象之一，可以在“插入”下拉菜单中插入图像，也可以在插入面板中选择“常用”选项，在其中插入图像。3.3.2调整图像如果插入的图像在文档中需要调整，可以在其属性面板中可以输入需要的宽度和高度来调整，还可以通过拖动鼠标的方法调整其大小。选定图像，在“格式”下拉菜单中选择“对齐”可以设置其在文档中的对齐方式。3.4案例4：插入轮换图像【案例目的】插入轮换图像，当鼠标经过文本下方图片时，显示第二副替换图像，如图3-39所示。在第二副图像显示时按下单击鼠标，则前往所设置的baidu链接网页。【核心知识】掌握轮换图像的制作方法。3.5上机实训项目一：制作文本文档，插入文本和图片，设置其页面属性制作一个文本文档；综合使用“页面属性“对话框设置页面属性，如图3-42所示。项目二：创建影像地图为不同区域创建影像地图链接。如图3-47所示，当选定某个图像区域时，比如最右的企鹅，可以链接到相应的目的URL。**图3-1新文档制作效果图3-19制作效果图图3-31插入图片并调整图3-39“鼠标经过图像”应用图3-42制作文档效果*