dreamweavercs5第一次课教案讲解.doc

第一讲 初识网页制作工具—— Dreamweaver cs5的基本功能及操作 授课题目：初识网页制作工具——Dreamweaver cs5的基本功能及操作 教学资源：多媒体、Internet 授课方式：讲授、操作 课时安排：2个课时 教学目标： 认识Dreamweaver的界面，了解各菜单面板的组成→页面属性命令菜单，打开“页面属性”对话框。单击背景下拉列表框，在弹出的色盘中，用吸管吸取一个颜色。 ②在“页面属性”对话框中，单击“应用”按钮，此时，对话框不会消失，可以看到“编辑区”的背景颜色发生改变，页面背景颜色设置完毕。 ③设置背景图像。在“页面属性”对话框中，在“背景图像”文本框中输入图像的地址或单击“浏览”按钮，在本地硬盘浏览选择要插入的图片，单击确定按钮。 ④然后单击应用按钮，可以看到图像自动平铺铺满整个网页。 2.设置文字属性 网页中用不同的文字颜色来标示不同的内容，可以帮助浏览者更为方便、快捷地浏览网站。 操作步骤： ①在“页面属性”对话框中，在“文本颜色”框中选择网页普通文本的颜色，在“链接颜色”框、“已访问链接”框中设置不同的颜色。 设置页面边距 “左边距”、“由边距”两个属性是针对IE浏览器，用于设置整个页面距离浏览器左侧边缘的宽度以及整个页面距离浏览器顶部边缘的高度，以像素为单位。 操作步骤： 在“页面属性”对话框中，输入像素值，单击确定即可。 六、文本（边操作边讲解） 文本在网页中具有举足轻重的地位。文本内容充实，可以吸引众多的浏览者；文本编辑处理得当，可以使浏览者在获得信息的同时感到赏心悦目，这对于提高站点的浏览次数极为重要。向网页中输入文本以后，可以进行文本的格式、对齐方式等的设置。 1.文本的输入 可以在文档窗口中直接键入文本，也可以复制、剪切并粘贴文本，还可以从其他文档导入文本。如果要将其他文本格式粘贴到DW中，可以使用【粘贴】或【选择性粘贴】命令。 【选择性粘贴】允许用户以不同的方式指定所粘贴文本的格式。如将文本从带格式的Word文档粘贴到DW文档中时，如果想要去掉文本原有格式，可以使用【选择性粘贴】命令选择只粘贴文本的选项。 在编辑窗口中输入所需的文本。如需换行分段，可以按下Enter键；如需换行但不分段，可以按住Shift键的同时按下Enter键。可通过插入——HTML——特殊字符——不换行命令，在文中插入多个空格，实现首行缩进的效果； 可以通过【插入】/【日期】，打开【插入日期】对话框，选择日期格式，实现日期的插入。 2.设置文本格式 在网页中输入文本以后，可以根据需要设置文本属性。选择要编辑的文本，在【属性】面板里可以设置文本的各种格式。 注意：选中文本，在【属性】面板中，对段落中的文本进行对齐、缩进、添加段落间距、项目列表和编号列表等格式化设置。 七、图像（边操作边讲解） 在网页中除了文本以外，应用最广泛的就是图像了，使用图像不但可以美化网页，还可以作为超链接的源端点，可谓一举两得。在Dreamweaver中，既可以使用动态图像，也可以使用静态图像，但无论使用哪种图像，首先要考虑文件的大小，例如，使用静态图像时最好使用GIF、JPG或PNG格式的图像，因为这些图像的体积相对较小。 1.插入图像　　在网页中插入图像时有两种情况：一种情况是图像已经规划在站点中；另一种情况是图像位于站点之外。如果在建站前期没有将图像规划在站点之内，插入图像时将弹出一个提示框，提示用户将图像复制到站点中。　　插入图像的操作比较简单，只要在编辑区中，将光标移至要插入图像的地方，单击菜单栏中的【插入】\【图像】命令，或者在【插入】工具栏的【常用】标签中单击图像选项即可。2．设置图像属性插入到网页中的图像可以通过【属性】面板设置其属性，如改变图像的大小、建立超链接、设置对齐方式等。要设置图像的属性，首先要选择网页中的图像，这时【属性】面板将显示图像的属性。 八、表格（边操作边讲解） 在Dreamweaver CS5中，表格除了可以使大量的信息资料有组织地排列起来以便管理外，还可以用于网页布局，即将网页中的元素放到表格的单元格中进行网页排版，因此它是控制页面整体布局的重要工具。 插入表格　　在网页中插入表格的操作步骤如下：　　（1）在网页中要插入表格的位置处定位光标。　　（2）在【插入】工具栏中选择【常用】标签，单击其中的表格选项，则弹出【表格】对话框。 （3）在对话框中进行选项设置。 ■【行数】和【列】：用于设置插入表格的行数和列数。　　 ■ 【表格宽度】：用于设置表格的宽度，选择“像素”为单位时，表格的宽度为固定像素的宽度；选择“百分比”为单位时，表格的宽度与浏览器窗口的宽度将保持相同