武汉纺织大学传媒学院 cm.wtu.edu.cn

Presentation on theme: "武汉纺织大学传媒学院 cm.wtu.edu.cn"— Presentation transcript:

1 武汉纺织大学传媒学院 cm.wtu.edu.cn
第10节 Deamweaver 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/4/6 传媒学院

2 1、Deamweaver Adobe Dreamweaver，简称“DW”，中文名称”梦想编织者”
最初是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器 已被Adobe公司收购 上机实验的平台 很多网站开发者利用它开发真正的网站 2019/4/6 传媒学院

3 2、Dreamweaver的安装 比较简单，如果是绿色包，直接解压后就可以使用；即便是安装版也比较简单，大家课后在自己电脑上安装试试
第一次运行DW会弹出如下提示框，该提示框是提示被选定文件将会默认使用DW编辑，也就是双击这样的文件会弹出DW打开它们 这一步通常点默认的“确定” 2019/4/6 传媒学院

4 3、Dreamweaver的简单使用 1）Dreamweaver的打开，关闭操作 2）新建网页 双击Dreamweaver图标即可打开
通过菜单或DW右上角的关闭按钮关闭 2）新建网页 可以通过欢迎页面新建，也可以通过菜单新建，新建网页时，选择“页面类型”为“HTML”；“布局”为“<无>”。点击创建后将进入编辑界面 2019/4/6 传媒学院

5 3）保存网页 点击菜单的“文件－保存”，可以保存当前网页，注意一定要将页面保存到正确的位置，最好不要使用默认文件名，比如你现在编写的是网站的首页，可以给个名字home，如右 2019/4/6 传媒学院

6 4）DW的工作界面 2019/4/6 传媒学院

7 4、DW的设计视图 点击DW界面的设计可以切换到网页编辑的设计视图编辑界面 设计视图就好像word，编辑时所看到的效果就是网页最终的效果
实际制作中，很少使用，只能开发简单网页 2019/4/6 传媒学院

8 5、DW的代码视图 点击DW界面的代码可以切换到网页编辑的代码视图编辑界面
看到的是网页的HTML代码 代码视图就像用记事本写网页，不同之处在于：DW有提示功能，比如输入font标签关键字后，空一格会弹出该标签的属性名，以及事件名等 2019/4/6 传媒学院

9 DW的路径提示 使用src属性可以弹出选择提示框 href属性也可以弹出选择框 1）输入src="后会弹出浏览按钮
2）点击浏览，弹出选择对话框 3）选定后会自动生成代码 href属性也可以弹出选择框 选择链接所在网页 2019/4/6 传媒学院

10 DW的颜色码 使用color属性时会弹出颜色拾取框 bgcolor等属性有同样功能 输入color= "后弹出 可直接选择列出的颜色
点击该框右上角图标选更多颜色 完成后会自动生成color取值代码 bgcolor等属性有同样功能 2019/4/6 传媒学院

11 DW的字体选择 使用face属性可以选择字体 如果字体没有出现在列表可以添加 完成后会自动生成取值代码 点击编辑字体列表可以弹出窗口添加
2019/4/6 传媒学院

12 用DW新建一个网页，使用代码视图观察自动生成的网页框架代码，分析如下
2019/4/6 传媒学院

13 作业 利用dw的代码视图编写一个网页ch10-1.html，显示图片eiffel.jpg，要求图片放置在网页所在目录的pic目录下，可利用src属性弹出选择框生成src的取值；编写另外一个网页ch10-2.html（和ch10-1.html在同一个目录），在其中显示一段文字（武汉纺织大学），要求青色，隶书；在ch10-1.html中，增加一个链接到ch10-2.html，链接内容为：ch10-2，链接属性href可用href的弹出选择框生成href的取值；在ch10-2.html中增加一链接到ch10-1.html，以实现两个页面的互相链接，效果如下 2019/4/6 传媒学院