模块4_课时1：DW初__如何使用DW实现图文混排.pptVIP

模块4_课时1：DW初 ——如何使用DW实现图文混排 课程目标 熟练通过表格对网页进行布局 熟练使用文本、超链接、图像和多媒体元素等制作完整网页 会使用表单提交页面 会使用css设计创建符合企业事业美观需求的网页 能够使用模版、内嵌框架技术对网站内网页进行整体把握 能够使用层进行简单的网页效果处理和网页布局 中国联通 在《DW初》中能够用切片工具对页面进行切分 利用Table完成对中国联通网页布局 主要内容 熟悉Dreamweaver CS3的工作界面 创建本地站点 插入对象及设置属性 文字 图片 链接 进行图文排版制作内容页 Dreamweaver界面 建立站点 绝对不要用中文！ 小写英文字母+下划线+数字 命名要易懂，成体系 首页以index命名 练习：建立“DW练习”站点 插入文字 字体规范 宋体使用12px或14px， 黑体或宋体加粗：11px或14px 中文使用宋体，英文用verdana，数字用arial 标题与字号 列表 换行 shift+enter 连续空格输入 ctrl+shift+space 插入链接 绝对路径和相对路径 ../images/good.jpg file:///C|/Documents/good.jpg 链接的目标：_blank _self _top _parent 空链接（指向本页）：# 锚点：#+锚点名称(演示) 注意事项 文件一定要在站点下移动（自动更新链接） 全部站内链接都采用相对路径 所有链接文件都必须在网站文件包内 插入图片 图片格式 GIF PNG JPG 图片说明alt=” ” 图片热区 图片无法显示？ 链接错误 中文命名 图片格式不正确 图文混排 图文环绕 图片：垂直边距、水平边距 插入水平线 案例 制作李玟演唱会页面 插入栏 文档选择栏 属性检查器 状态栏 面板组 3分钟完成 （训练师站在演讲台正中央，精神饱满，声音洪亮） 今天这节课，是“使用Dreamweaver制作网页”这个训练模块的第1个课时，课程主题是“如何使用DW实现图文混排”。 我们都知道PS是用来处理图像的，而DW是用来做什么的呢？对，是网页的制作软件，而且是目前业界排名第一的网页制作软件。 下面我们就来看看本课程要达到的教学目标。 要想做一个网站，首先要建立一个站点目录，用来管理所有的网站文件，需要注意的是网站包里所有的文件都不要使用中文命名，要用小写英文加下划线加数字的方式，最好用英文，或者是拼音，总之要能很清楚的通过名称看出文件的内容，另外网站首页一定要命名为index。一个大型的网站需要多少文件夹呢？来看看这张图，这是一个较大的网站站点，里面有存放FLASH的文件夹，还有存放模版的Templates文件夹，存放源文件的Work文件夹，还有二级页面单独设置了文件夹，这样就非常容易查找和管理。好，现在在DW里建立这个站点。（切换到DW，建立“DW练习”站点） 下面给各位老师3分钟的时间，马上把自己的站点建立好。（巡视老师建立站点） 本课程有6个教学目标，首先是要掌握表格布局制作网页的能力。其次是要能够熟练的插入文本，链接，图像，多媒体等元素，并能恰当的设置他们的属性。第三是要会插入表单，比如用户登录的用户名，密码等。第四个是要掌握使用CSS美化页面，CSS是一种代码，它能精确的修饰页面中的元素属性。第五是可以用模版和内嵌框架技术，让复杂的网站系统变得更加简单和易于修改。最后是要能够使用简单的层技术进行布局。 下面来看一下本次培训要完成的项目，首先是要能够使用PS里面的切片工具对页面进行规范的切图，其次是要能够使用表格对中国联通这个网站进行布局，完成HTML页面的制作。(按空格键，显示中国联通效果图) 这就是我们要完成的页面效果。（停顿2秒） 下面进入DW初的第一个章节，图文编辑。 本节有四个内容，首先是带领大家熟悉一下DW CS3的界面，然后我们一起来创建一个网站的站点，用来存放网页和素材文件，接着我会告诉大家如何在DW里插入文字，图片和链接，如何去设置他们的属性，最后是如何进行排版。 首先来认识一下DW软件的界面。(逐一按空格键显示)（打开DW软件,并边演示边讲解） 文字可以直接输入，而且可以在下面的属性面板里设置字体，大小，颜色等，但一般情况下，字体的属性是通过CSS设置，我们会在后面学到。在网站中不要用特殊字体，比如小篆，草书等，正文应该用宋体，标题可以用黑体，英文和数字可以使用这两个字体，字体的大小最好选用这些字号，显示效果是最好的。（停顿10秒，请老师记录） 下面我们来看看如何设置标题和列表，虽然DW的文本输入和WORD很像，但还是有一些不同，比如回车和空格。（切换到DW，并边讲边演示） 我们来学习绝对路径和相对路径，这个路径是网站的域名，是从整个互联网出发的，所以它是绝