Dreamweaver在网页制作中的常用技巧

尹桂萍

(东莞理工学校，广东 东莞 523000)

网络技术的迅猛发展，网络技术的应用已高度融入人们生活的各个部分，越来越多的企业部门越重视自家网站的建设，维护与推广使用。《网页制作》就是一门掌握网站的建设，管理与维护，结合操作性，创造性，综合性的计算机专业重点必修课程。为提高《网页制作》课程的教学质量，教师不断学习提升教学方法与教学方式如：任务驱动法，分组教学法，项目教学法，翻转课堂等灵活地引入到实验教学中，都取得相当不错的教学效果，从而提高学生的网页制作设计水平。

1 《网页制作》教学内容

在网页制作方面， Dreamweaver软件具有实用性与普及性强，入门简单的优点，成为中职学校计算机专业首选教学软件。无论是使用哪种教学方法，哪本教材，学生需要掌握的网页制作的学习内容都是一致的。作为教师更要明确《网页制作》教学重点内容是哪些，不能只在表面有趣的课堂教学方式而忽视了实在的教学内容。我总结出如下图1的《网页制作》教学重点内容：

图1《网页制作》教学重点内容

2 《网页制作》教学过程中的教学技巧

2.1站点合理管理，建立站点是网页制作的第一步，然而要建立一个好的站点不是一件容易的事。站点制作前必须规范地规划好站点结构，为以后的制作，维护和更新提供便利。DW可将某一本地文件夹作为根目录，定义成站点。

2.1.1将站点内容分门别类，将公用的所有图像，声音或者视频与相关页面放在同一文件夹内。而一些特定的文字与图片内容则建立相对应的文件夹。

2.1.2目录层次也不宜过深，一般不超过三层目录，以便于管理。

2.1.3站点目录下可以有index.html文件，就是站点的首页，这样方便快速找到直接进入网站的方法。

2.1.4目录中的所有文件夹与文件尽量不能有中文名字。

2.2 在DW的布局有三种方法：表格，框架，CSS+DIV。

2.2.1 对于中职学生初学DW，表格是简单易学，而且嵌套表格能使得图文混排更加整齐，是学生们最容易掌握入门创建网站页面布局的好方法。但学生最初使用嵌套表格时往往会出现表格错乱，表格宽度不一，不整齐的现象。这就是学生粗心大意，在原有表格里再创建嵌套表格时没有注意表格宽度的单位，直接按确定，而创建的表格宽度直接按照上一次的表格宽度创建，这就可能会使得嵌套的表格突出，使得表格错乱，不整齐。所以这里提醒学生们尽量使用百分比。嵌套的表格在原来的大表格里面，少于100百分比就行了，这样排列的整体表格布局不会错位，很整齐美观。如图2所示。

图2表格对话框

2.2.2 框架也是学生们喜欢使用的布局方法来创建网站页面布局。框架能很好的解决在制作每一张网页时都要重复相同的菜单栏，标题栏等，只需要在主框架独立更新分页内容。例如框架用在布局中的形式多是采用如下图3 框架集类型形式。此框架网页内共有三个框架，其中上方与左侧部分分别在两个独立的网页中，一般是网站的LOGO，用户注册，菜单导航等内容，这些内容在所有分页中几乎都是固定的不发生任何变化。而右侧部分就是主框架，就是访问者点击上方或左侧菜单所显示的网页具体内容。这样的布局很省力而且很有灵活性。但使用框架时经强调的是：当要保存网页文件时，开始第一次保存时可以点击：“文件——保存全部”，就会弹出一系列对话框让学生保存，例如上述的框架网页内共有三个框架，因此需要保存四次，其中包括一个框架集(index)和三个对应的框架页面(top，left，main) 如下图4框架面板，DW会以斜线框框出相对应要保存的框架，同学们认真看清确认保存就可以了。但有时不会一下子就出现全部框架要保存，只开始保存一两个关键的框架，另外的框架要在后面单击：“文件-框架集另存为”，逐一保存。学生们不管是一次性能保存全部，还是分批保存不同的框架网页，都要确认斜线框框出相对应每一个框架页面部分都要保存并命名好相关文件名。

图3框架集类型 图4框架面板

2.3 DW提供了多个Spry表单验证构件，为设计如：用户注册与登陆，问卷调查等交互信息等带来了大大的设计方便。例如设计用户登陆中，有一个再次确认密码与刚输入的密码是否一致，如果不一致，就会返回“两个值不匹配”来提醒用户密码不对的验证功能。操作时关键是如下图5选中使用Spry表单验证构件中的蓝色部分，出现如下图6的Spry构件属性面板，在验证参照对象下拉列表中选择刚设置好的Sprypassword1，并勾选onBlur复选项，这里主要是把SPRY验证的对象是sprypassword1的密码。

图5用户登陆

图6Spry确认属性面板

2.4 打开网站就能听到动人的歌曲，不止是一件赏心悦目的事情，而且更会增加网站的灵动性。

2.4.1 作为增加网页视听效果，但考虑到文件载入的速度，所以常用的音频文件主要有两种。一种是MID格式，MIDI格式文件可以被所有的浏览器支持，并不需要插件，文件非常小但音质较差，而且只播放。另一种是MP3格式，文件小，音质非常好，但要播放MP3，要必须下载插件或者辅助应用程序。

2.4.2 利用最普通基本的标签来添加背景音乐，在网站载入网页时就运行起动听的旋律，而且这个方法操作非常简单。将音频文件bgyy.mid复制到站点目录的other文件夹下，在代码窗口中的body标签后加入代码。常用参数是src是音频文件的路径，loop是表示音乐是否循环播放，-1表示无限循环，如果要设置播放次数，刚改为相应的数字就可以了。

2.4.3 利用的标签添加音乐。使用方法也跟标签差不多。例如将音频文件bgyy.mp3复制到站点目录的other文件夹下，在代码窗口中的body标签后加入代码。但标签功能相对强大，不但可以插入各种多媒体音频，而且可以设置多个参数如下图7，使得音频播放界面友好：如是否显示播放面板如图8，播放面板的外观，高度和宽度，对齐方式，还有音频或视频文件开始播放的时间，音量的大小等等。

图7标签参数 图8播放面板

2.5 DW将带有绝对位置的所有DIV标签称为AP元素。 AP元素是分配有绝对位置的页面元素，是网页中的一个矩形区域，可以包含文本、图像、表格甚至是嵌套AP 元素等，可以放置在HTML文档正文中的内容。由于AP 元素比表格更容易处理和操纵，可以通过AP元素属性面板对AP元素属性进行调整和修改，以及表格与AP元素的相互转换，实现设计网页的不同外观布局。AP 元素的使用有点抽象，学生虽然能学习操作，但往往是学习了而没有举一反三的知道该用在哪个场合。但AP 元素在结合行为后，往往能做出具有一定交互信息的网页效果，给予学生直观突出的学习效果。

2.5.1 例如制作栏目说明。把要显示说明的信息(文本或者图片)放在AP元素里，选取AP元素的“显示-隐藏”行为，当鼠标移入对象上(OnMouseOver)时，设置AP元素弹出显示这些有关的说明信息，但鼠标移出对象(OnMouseOut)时，信息就会隐藏，完成所有操作后，最后在AP元素面板中把AP元素隐藏起来，不影响版面美观。

2.5.2 在大型的电子商务网站或游戏网站中，经常会出现拖动AP元素的效果，例如拼图游戏或者直接将商品拖动到购物中车中去。利用的是表格和AP元素的互换，并结合行为“拖动AP元素”操作。但要注意的是：只有网页中的AP 元素不重叠，才能转换成表格，对于已经重叠放置的AP 元素，勾选“防止重叠”以后，仍然保持重叠状态，但当再移动AP 元素，AP 元素就不能够发生重叠现象。另外只有AP 元素参加转换成表格，而其他元素，如图像、表格等将保持原状。如制作一个4*4的拼图的步骤简单如下：

(1)制作一个4*4的表格，设置好单元格适当的宽度，能够放入一个个小拼图素材，并勾上面板中的“防止重叠” 。

(2)把表格转换成AP Div，并给每一个AP 元素编号。

(3)分别选择每个AP元素，使用行为面板中的拖动AP元素，并把触发事修改为“onMouseOver”。

3 结语

在网页制作的教与学上，Dreamweaver软件实用性与普通性强，入门简单，本文提出了多个制作网页过程中产生的问题及相应的解决方法与技巧，但制作网页要精通却要花时间去钻研。我们老师要不断学习，以此提高网页制作的教学质量，更好地传授给学生，增强学生的制作网站的实际动手操作能力，更适应企业单位的工作要求。