DreamweaverCS5网页制作第2章　网页元素的添加.pptVIP

2.3 超链接的设置方法 2.3.4 实战演练：网站“诗词大观”的制作 操作步骤： 7)光标移到左侧第1个单元格中，选中“诗词大观-七言古诗”，在CSS属性面板的“目标规则”中选择“t1”。 选中文本“《江南春》”，在CSS属性面板的“目标规则”中选择“t2”。 选中“作者：（唐）杜牧”，在CSS属性面板的“目标规则”中选择“t3”。 选中文本2行诗词内容，在CSS属性面板的“目标规则”中选择“t4”。 光标移到右侧单元格中，在CSS属性面板的“目标规则”中选择“t2”。 分别“【注解】：”面和“【诗意】：”，在CSS属性面板的“目标规则”中选择“t4”。 宽和高：浏览器中为图像保留的宽度和高度，默认单位为像素。 源文件：指定图像的路径。 链接：指定图像的超链接。 替换：为图像添加注释。 编辑：单击其右侧的优化、裁剪、重新取样、亮度/对比度、锐化等按 钮对图像进行处理，也可以单击按钮打开指定的图像处理软件重新编辑 图像。 垂直边距：指定图像在垂直方向上与文本或其他网页元素的间距。 水平边距：指定图像在水平-方向上与文本或其他网页元素的间距。 目标：指定链接时的目标窗口或框架。 边框：指定图像边框的宽度 图像所处的段落在文档中的对齐方式。 对齐：指定当前图像与旁边的文本的混排方式。 低解析度源：指定当前图像的低分辨率副本的路径。 地图：用于制作图像热点链接。 2.2 图像的插入和设置 2.2 图像的插入和设置 2.2.3 技巧提示 1. 图像“属性”中的“对齐”与段落对齐方式的不同 2. 网页元素的定位 2.2 图像的插入和设置 2.2.4 实战演练：网页“球星风采”的制作 通过本案例的操作，你将学会：如何插入图像和设置图像属性、如何借助表格进行文本和图像的定位。 2.2 图像的插入和设置 2.2.4 实战演练：网页“球星风采”的制作 操作步骤： 1） 新建文件夹qiuxing，在该文件夹中新建子文件夹image，将所有的素材拷贝到image文件夹中。在Dreamweaver CS5中，单击菜单“站点”→“新建站点”命令，打开“站点设置对象”对话框进行站点定义，设站点名称为“球星风采”，站点文件夹定义为文件夹qiuxing。 2）新建网页，保存为fengcai.html，设网页的标题为“球星风采”。 在CSS属性面板中，设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，打开“新建CSS规则”对话框，在“选择器名称”中输入“t1”，单击“确定”按钮两次，回到文档窗口。在CSS属性面板中，设字体为隶书，字号为24，对齐方式为“居中对齐”。 在CSS属性面板中，设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，打开“新建CSS规则”对话框，在“选择器名称”中输入“t2”，单击“确定”按钮两次，回到文档窗口。在CSS属性面板中，设字号大小为12，文字颜色为#339966。 3）输入文本“球星风采”。选中文本，在属性面板的“目标规则”的下拉列表中选择“t1”，应用该样式。 2.2 图像的插入和设置 2.2.4 实战演练：网页“球星风采”的制作 操作步骤： 4）单击菜单“插入”→“表格”命令新建表格，在弹出的对话框中设定表格为6行2列，宽100%，边框粗细为0，间距为4，如图所示，单击“确定”按钮插入表格。 2.2 图像的插入和设置 2.2.4 实战演练：网页“球星风采”的制作 操作步骤： 鼠标单击表格边框选中表格，在“属性”面板中设定“对齐”为居中对齐，这样表格将在页面中居中对齐，如图所示。 2.2 图像的插入和设置 2.2.4 实战演练：网页“球星风采”的制作 操作步骤： 5）鼠标单击第1个单元格将光标移到该单元格中，单击菜单“插入”→“图像”，在打开的“选择图像源”对话框中找到image/meixi.jpg，单击“确定”按钮，则图像插入到单元格中。鼠标单击下一行对应的单元格，输入文字“梅西”。选中该文本，在属性面板的“目标规则”中选择“t2”样式。同理，在其他单元格中插入对应的图像和文字，如图所示。 2.2 图像的插入和设置 2.2.4 实战演练：网页“球星风采”的制作 操作步骤： 6）拖拽鼠标从第一个单元格到最后一个单元格，选中所有的单元格，在“属性”面板中设“背景颜色”为#EAFFF5 ，“水平”和“垂直”分别为居中对齐，如图所示。这样文字和图像在单元格中居中对齐，单元格的背景均变为浅绿色。按F12预览效果，调整浏览器窗口的大小观察内容有何变化。 2.3 超链接的设置方法 2.3.1案例制作：网站“诗词大观”首页 通过本案例的操作，你将学会：如何插入文本、图像和设置它们的属性、如何插入表格并借助表格进行文本和图像