DreamweaverMX简体中文版入门教程(二).docVIP

Dreamweaver MX简体中文版入门教程（二）目录：(点击相应目录)七、创建基于表格的页面布局八、CSS样式表的应用创建基于表格的页面布局接上次课：1、 先创根文件夹（以你的名字命名）,在根文件夹下建立image子文件夹，用于装站点用到的图片。2、 将本次课用到的图片复制到image子文件夹中。3、 建立站点。具体步骤请参考上次课的教案。创建并保存新页面：在 Dreamweaver 中，选择文件新建。在新建文档对话框的常规选项卡上，从类别列表中选择基本页，从基本页列表中选择HTML，然后单击创建。选择文件另存为。在另存为对话框中，浏览至定义为站点的本地根文件夹并打开该文件夹。在文件名文本框中输入 index.html，然后单击保存。文件名即出现在应用程序窗口顶部的标题栏中。选择文件保存来保存该页面。插入第一个表格：思考：为什么要设置边框为零？表格插入后，设置表格相应属性，并将表格居中注意：设置表格居中时，最好将面板隐藏起来，这样编辑窗口显得更开阔，有利与网页的布局将光标放入表格内，并插入图片：插入图片后的效果为：CTRL + S 保存，按F12预览看看效果将光标放于表格最后（在表格后单击即可），此时，你可以切换到“代码视图”你将发现光标的位置为：插入第二个表格：表格插入后，设置表格白色背景，并将表格居中小技巧：在选择表格，行，方格时，先将光标放于相应方格内，再点击相应标签即可设置第一个方格属性：插入第三个表格：把光标放在如上图的位置，然后插入表格如图：点击上图所示里层表格标签，选中里层表格，然后设置如下属性：将光标放于下图所示的方格内，然后设置以下属性：将光标放于上图所示位置，并插入表格：插入表格后的效果图为：设置表格的内容居中：将光标放于下图位置，并插入图片：插入图片后的效果为：将光标放于下一行，如上图所示位置，并插入图片，输入文字：其他内容也依次输入：接下来，将光标放于下图位置：设置相应属性：水平为：左对齐，垂直为：顶端。此时的光标位置如上图，然后插入表格：将光标放于下图位置，并设置居中：输入如下文字，并设置相应属性将光标放于下图位置，并设置相应属性：将文字复制-粘贴到该方格中：接下来，用控制换行，将光标放于标题之前，也就是在“广西师范学院概况”前面：切换到代码视图（注意观察此时光标的位置）：输入：切换到设计视图，你发现有什么变化吗？按 CTRL + S 保存网页，然后按 F12 预览效果图：这就做出了自己的第一个网页！通过这节课，你总结一下，用表格来控制网页的布局是不是很容易？其实，在网络上的所有网页都是用表格来布局的，只不过有点复杂而已！这就需要同学们在以后的过程中，多制作网页，多模仿别人的作品，积累自己的经验和提高自己的动手能力！CSS样式表的应用要想做出精美的网页一定要用到CSS。层叠样式表 (CSS) 是一系列格式规则，它们控制网页内容的外观。CSS 样式使您可以控制许多仅使用 HTML 无法控制的属性。本文的目的，是想通过一篇文章，掌握CSS最基本最重要的应用。第一部分:要实现的目标:把一个网页的文字变成好看的12象素(px)大小。实现方法:通过“重定义HTML”标签，定义td(td是单元格的标签)的字体大小为12象素(px)。因为整个网页内容放在表格中的，也是放在单元格中的，所以，可能通过重定义单元格样式，改变所有放在单元格里的内容。当然，重定义表格标签table，也可以实现同样的效果。简明步骤:打开样式面板在类型中选择“重定义HTML”标签选择要重定义的标签，例如td给所选标签(例如td)定义CSS一个定义了标签的网页就做好了。新建一个空白网页，保存为mycss，并插入一个表格，如图所示：插入表格后，在表格后，在表格内输入以下内容：打开样式面板。打开后如图：在弹出窗口中，按如下说明选择：在“类型”中，选择“重定义HTML”标签，选择“仅对该文档”：选择td标签。Td标签代表单元格。选择分类中的“类型”。设置字体:选择字体，如果没有需要的字体，可以编辑字体列表大小:设置字体大小，好看的中文字大小有12象素(px)和9点数(pt)两种，两者效果差不多。行高:行高是一行文字与另一行文字之间的距离，为了方便阅读，行高设置大点吧。可以设置在15像素到25像素之间。实例中使用20像素。修饰:对于普通文本，选择无。对于链接，可以选择下划线，上划线加下划线，无等几种。颜色:黑色最适合阅读，其次就是灰色，白色。链接默认的蓝色，颜色太深，如果整个页面都是链接，使用蓝色根本起不到分辨的作用，并且十分难看。建议页面不要使用默认的蓝色!选择字体如下图：按“确定”按钮后，一个应用了CSS的网页就做好了。对比这两个文字，你发现什么了？为什么会得出这样的结果？原因是：刚才我们重新定义了td标签，也就是方格的标签。因为上图的文字是放在方格里面的也就是td里面，所以就显示出标签所定义的样式。CTRL + S 保存。到这里，理解什么是CSS层叠样式表了吗？好了，现在我们将在刚才做好的index.htm 主页中加入CSS 层叠样式表：切换到的index.htm ：添加CSS 层叠样式表，方法同上。明白了CSS 层叠样式表的功能了吧？如果发现刚才的样式表不好看，可以进一步编辑：接下来，我们为网页添加边框：将样式表应用到网页中：首先点击选择图片，然后如下图操作：在代码视图中，我们看到选中的表格（table）的代码是用黑色显示的：将光标放于一下位置，并按空格键：接下来，选中 class 属性：选中刚才的样式表：切换到设计视图，发现有什么变化？如果还不够明显，按CTRL+S 保存网页，然后按 F12 预览效果更好。再为其他表格添加边框：接下来，将样式表应用到表格：上述操作选好后，如图：切换到代码视图：选择的表格代码是黑色显示的。将光标放在标签 table 后面，并按 空格键 ：接下来，双击选择 class 属性：选择需要的样式表：切换到设计视图，发现有什么变化？接下来，为一个小表格制作样式表：切换到代码视图：黑色显示部分为刚才选择的表格。将光标放在标签 table 后面，并按 空格键：接下来，双击选择 class 属性：然后：CTRL + S 保存，按 F12 预览。效果图：在上面的预览图中，我们可以看到刚刚弄好的 you 样式表