湖北职院计科系

湖北职院计科系

下一页 上一页实验内容 1、练习文本和图片的基本操作

下一页 上一页实验目的 1、掌握文本的基本操作 2、掌握图片的基本操作

下一页 上一页实验重点 1、文本的基本操作

下一页 上一页实验难点 1、图片的基本操作

下一页 上一页实验项目1:文本的基本操作 1．编辑文本（1）换行 ①自动换行：在输入文字时，若某一行的长度超过了Dreamweaver窗口的显示范围，文字将自动换到下一行。 ②利用”Enter”键换行：在输入文字后按”Enter”键，文字成段，且上下段之间空一行。 ③利用”Shift+Enter”键换行：如果想要将文字手动换行，中间又不能出现空白行，可以按”Shift+Enter”键。

下一页 上一页（2）插入特殊的字符有时为了内容的需要，要在网页中插入一些键盘上没有的特殊字符，在Dreamweaver 8中，这些特殊字符可以通过”插入”→”HTML”→”特殊字符”命令来插入。（3）删除、移动和复制文本可以用工具按钮，也可以用菜单命令。 2．查找／替换文本的内容如果要在文档中查找或替找某个文字，选择”编辑”→ ”查找与替换”命令。

下一页 上一页 3．设置文本格式在Dreamweaver 4.0中设置文本格式可以通过属性面板，类似与Microsoft Word中对文本的属性设置，包括段落的格式、字体、字号、字的颜色、字体加粗／倾斜、对齐方式（左对齐／居中／右对齐）、文字所链接的路径或URL等。范例1：将文件“实战演练1.txt”的内容拷贝到新网页中，将“内容提要”作为标题，居中对齐，“本书采用”“首先”“本书适用于”作为三个段落的起首，首行缩进2个汉字；“目录”作为一个标题，居中对齐，其以下的内容每章/节/小节都要换行，居左对齐。然后，将所有的“数据库”一词替换为“DATABASE”。

下一页 上一页实验项目2:图片的基本操作主要操作： 1.插入图像单击“插入”菜单下的“图像”按钮，如图1所示：

下一页 上一页将弹出此对话框，如图2所示：在站点里面找到需要的图片，单击“确定”。

下一页 上一页 2、设置图像的属性选中图像后，在属性面板中就显示出了图像的属性，如3所示：

下一页 上一页 “图像”下的文本框用来设置图像的ID，一般情况下不填。 “宽”文本框用来设置图像的宽度，可填入数值，单位是像素。 “高”文本框用来设置图像的高度，可填入数值，单位是像素。 “源文件”用来设置这个图像的路径。 “链接”用来设置这个图像的超链接，“目标”用来设置超链接的打开方式，有关超链接的详细说明请参见后面章节的介绍。

下一页 上一页 “替代”文本框用来设置图像的替代文本，可输入一段文字，当图像无法显示时，将显示这段文字。 “垂直边框”文本框图用来设置图像上与其上方其他页面元素，及图像下与其正文其他页面元素的距离。 “水平边距”文本框是用来设置左侧与其左方其他页面元素，及图像右侧与其右方其他页面元素距离。 “边框”文本框图用来设置图像边框的宽度，可输入数值，单位是像素。默认图像边框宽度为“0”，也就是没有图像边框。 “低解析度源”用来设置这个图像还没显示品质代图像，当图像很大时，可以给图像设置一个较小的低品质替代图像。在图像还没显示出来之前，较小的低品质替代图像能迅速显示。

下一页 上一页单击图像属性检查器中的按钮，即把图像设置成浏览器左对齐；单击图像属性检查器中的按钮，即把图像设置成浏览器居中对齐；单击图像属性检查器中的按钮，即把图像设置成浏览器右对齐；单击图像属性检查器中的按钮，即把图像设置成浏览器两端对齐。

下一页 上一页 3、调整图像在网页中的相对位置范例2：用菜单和工具2种方法插入图片ji.jpg和daoying.jpg，同行并排，图片ji.jpg的高=200，宽=350，右对齐；daoying.jpg的高=200，宽=300，左对齐；然后用“裁剪”工具图片ji.jpg的光亮部分保留，去掉其左边不亮部分，再将其高=200，宽=350；将图片ji.jpg的亮度=20，对比度=25，锐化=5；图片shan.jpg,边框=2，垂直边距=150，水平边距=3。

下一页 上一页实验项目3：文本和图片的混合操作，如图5所示：图5 范例3原图

下一页 上一页范例3：要求：阿拉斯加（Alaska）: 格式:段落字体:华文彩云大小:36(px) 颜色:#000066 （Alaska）: 格式:段落字体 Times New Roman 大小:36(px) 颜色:#000066 水平线: 宽: 80% 高:5 对齐:居中对齐阴影:无

下一页 上一页 ********************************************************** 在寒冷的阿拉斯加，不但可以看到晶莹剔透的冰雕、完全用冰盖起来的ICE HOTEL，还可以看到美丽的极光。你能想象住在完全由冰盖起来的旅馆里是什么感觉吗？格式:段落字体默认大小:16(px) 颜色:#000000 *********************************************************** 冰雕: 格式:段落字体:方正舒体大小:36(px) 颜色: #FF6600 ICE HOTEL:格式:段落字体:方正舒体大小:36(px) 颜色: #FF3399 极光: 格式:段落字体:方正舒体大小:36(px) 颜色: #6699CC

下一页 上一页 *********************************************************** 极光是由于太阳风与极圈内的磁场产生反应而形成的光，它时而白色，时而是蓝色也有可能是五颜六色的。虽然阿拉斯加非常寒冷但是每年去那里的游客仍然络绎不绝，为的就是欣赏这难得一见的极光。格式:段落字体:方正舒体大小:18(px) 颜色: #0033CC 极光: 格式:段落字体: 华文彩云大小:36(px) 颜色: #00FF00 寒冷: 格式:段落字体:方正舒体大小:36(px) 颜色: #00FF00 难得一见: 格式:段落字体:方正舒体大小:36(px) 颜色: #00FF00

下一页 上一页 *********************************************************** 谁也不会想到在寒冷的阿拉斯加竟然会有天然的室外温泉，在零下几十度的气温下，能够泡在温暖的温泉里喝上一杯咖啡，我想也是一件非常惬意的事情吧！格式:段落字体:方正舒体大小:18(px) 颜色: #0033CC 温泉格式:段落字体: 华文彩云大小:36(px) 颜色: #FF9900 咖啡格式:段落字体: 华文彩云大小:36(px) 颜色: #FF9900 事情格式:段落字体: 华文彩云大小:36(px) 颜色: #FF9900

下一页 上一页图片处理:jiguang.jpg 宽:450 高:221 对齐:右对齐亮度=-1，对比度=1，锐化=0 Shan.jpg: 宽:300 高:198 对齐:左对齐亮度=1，对比度=2，锐化=2，边框=1 【小结】图文混排是常见的操作，而表格就是控制各元素的有力工具。

谢谢！

湖北职院计科系

湖北职院计科系

Presentation Transcript