Dreamweaver网页制作.pptVIP

《Dreamweaver网页制作》 一、任务目标 二、任务引导 三、任务演示 四、任务相关知识点 四、任务相关知识点 四、任务相关知识点 四、任务相关知识点 四、任务相关知识点 四、任务相关知识点 五、任务分配 六、任务实施 六、任务实施 七、考核与评价 任务三：“双百论坛”主页图文添加 教学单元：主页制作 知识目标 了解Dreamweaver网页图文混排的原则与操作。 能力目标 掌握Dreamweaver网页图文添加及格式设置方法。 图像通常用来添加图形界面、具有视觉感染力的内容或交互式设计元素， Web页中通常使用的图像有三种，即GIF、JPEG和PNG。 “双百”论坛主页图文添加效果 1、插入图像 在设计窗口中，将插入点放置在您要显示图像的地方，然后单击菜单栏的“插入”→“图像”菜单弹出“选择图像源文件”对话框，如右图所示，选择要插入的图像，或直接在URL：文本框中输入图片的地址。单击“确定”按钮即可将图像插入在网页文档的相应位置中。 2、设置图像格式 单击选中图片后，属性面板自动转换为图像属性设置面板，如下图所示。通过它可对选中的图像进行尺寸调整、链接添加、对齐方式设置、设置边框、调整亮度等各项操作。 3、插入文本 使用Dreamweaver可以通过以下方式向 Web 页面添加文本：直接将文本键入页面，从其他文档复制和粘贴文本，或从其他应用程序拖放文本。 插入日期：在Dreamweaver中可以很方便的插入日期。在“文 档”窗口中，将插入点放在要插入日期的位置，单击“插入”菜单中的“日期”，在弹出的对话框中选择相应的日期格式，确定即可。 3、插入文本 插入水平线：在插入水平线时可以选择“插入”→“HTML”→“水平线”，即可以插入一根水平线。 插入特殊字符：选择“插入”→“HTML”→“特殊字符”，在其中选择需要插入的字符，即可插入字符。 4、创建列表 通过Dreamweaver，可方便地创建编号列表、项目列表、自定义列表三类。插入列表的步骤如下： 将插入点放在要添加列表的位置，单击“属性”检查器中的“项目列表”或“编号列表”按钮 ，或者单击“文本”菜单中“列表”。 指定列表项目的前导字符出现在“文档”窗口中。 键入列表项目文本，回车后创建其他列表项目。 4、设置文本格式 文本格式应用于一个字母或整个站点段落和文本块。使用“格式”菜单中的相关选项可以设置字体格式。也可以使用属性栏中的相关选项进行设置，如字体、样式、大小、颜色、倾斜、加粗、对齐方式等。 教 师 下发任务 学 生 小组讨论 角色分配 任务划分 任务实施 “双百论坛” 主页图文添加 教师巡回指导 1、主页图片插入及格式设置。 启动Dreamweaver，打开站点根目录下的index.html，将光标定位到banner区域（第一个单元格），单击菜单栏上的“插入” →“图像”，在弹出的对话框中选择banner.jpg，然后单击确定按钮将banner.jpg插入到banner区域。利用相同的方法分别在每个单元格里面插入准备好的 图像切片，注意导航条和footer脚注模块需要将相应图片切片设置为单元格的背景，以便在后期插入相应内容。单击选中已插入的图片，属性窗口会自动出现与图片相关的属性设置选项，如边框、尺寸、亮度等。 2、主页文本插入及格式设置。 在新闻公告及友情链接板块中插入合适的表格，参考下图分别输入相应的内容，并设置文本格式。 通过学生展示任务实施结果，最终从实施过程、实施结果、工作态度、创新精神、团队精神等五个方面进行考核。 教学模块一建站准备 教学模块一建站准备 教学模块一建站准备 教学模块一建站准备 教学模块一建站准备 教学模块一建站准备 教学模块一建站准备 教学模块一建站准备 教学模块一建站准备 教学模块一建站准备