第5章 基本图文网页的制作 《网页设计与制作》课件.ppt

第5章 基本图文网页的制作 【本章导读】 本章介绍如何制作基本的图文网页：主要内容包括如何新建网页并设置其属性；如何制作文本网页和图像网页；如何创建多种类型的超链接等。 【本章要点】 新建网页 设置网页属性 制作文本、图像页面 创建不同类型的超链接 5.1新建网页 5.2设置页面属性 5.3制作文本页面 5.4制作图像页面 5.5创建链接 本章小结 5.1 新 建 网 页 5.1.1 网页与首页的区别 用户在浏览器上输入网址后，即打开一个页面，很多人认为在浏览器上的页面是Home Page，其实如果根据严格定义划分，我们所看到的只不过是某一个网页而已。 所谓的Home Page，是指由网址进入时看到的第一个页面，称为“首页”。在首页上通常会将所有的信息清楚的整理在这个页面上，其目的就是为了让浏览者在使用这个网页时可以快速链接到所需的资料，由首页所延伸下去的页面就是一个个的子页面了。 5.1.2 常规文档 在Dreamweaver 8编辑窗口中选择菜单命令【文件】新建】，此时将打开【新建文档】的对话框，如图5-1所示。 【新建文档】包括了2个选项卡：【常规】和【模板】。【常规】中提供常用的网页类型以供选择；【模板】中显示的是设计者自己制作的模板。 首先选择【常规】选项卡，此时左侧【类别】列表框中列出了常见的文件类型，主要包括了7种类型： （1）基本页：基本页包含了创建静态网页所涉及的一些文件类型，如HTML、HTML模板、库项目、CSS、JavaScript、XML等； （2）动态页：动态页包含了创建动态网页相关的文件安类型，包括ASP JavaScript、ASP VBScript、ASP.NET C#、ASP.NET VB、ColdFusion、ColdFusion组件、JSP、PHP等各种动态网页相关文件类型，如图5-2所示； （3）模板页：该项提供了各种模板相关文件类型，具体如图5-3所示； （4）其他：在该项中提供了各种编程脚本、源代码相关文件类型，在这里用户完全可以在Dreamweaver 8中编写各种程序代码，如图5-4所示； （5）CSS样式表：该项提供已经建好的CSS样式或样式表，这样就可以一次性设定好网页中涉及的所有样式，大大减少了用户的工作量，如图5-5所示； （6）框架集：该项提供的各种框架如图5-6所示； （7）页面设计：在左侧的列表中，与页面设计相关的有3项，分别为“页面设计（CSS）”、“入门页面”、“页面设计（有辅助功能的）”，它们预设了外观网页，制作者只需修改内容就可以轻松创建出网页来。每选中一项页面设计，就有不同的页面子类可以预览，如图5-7所示。 5.1.3 模板文件 选择模板选项卡如图5-8所示。当在左侧选中一个站点的名称时，将在中部出现该站点已经创建好的模板文件，同时将在右侧出现模板的预览图像。由于此时还没有和创建任何模板，所以没有任何模板文件。 5.1.4 创建文件 在选项卡上选择【基本页】，然后在中间的基本列表中选择HTML，单击【创建】按钮后将打开一个网页编辑窗口，如图5-9所示。 5.1.5 保存网页 创建新的网页后，需要将其保存在站点管理器中。点击菜单命令【文件》保存】，此时将打开【另存为】对话框，如图5-10所示。 5.2 设置页面属性 5.2.1 外观 选择【修改》页面属性】命令，弹出【页面属性】对话框，在【分类】选项区中选择【外观】选项，如图5-11所示。 在【外观】页面属性中可以进行如下设置： 在【页面字体】下拉列表中设置文本的字体； 在【大小】下拉列表中设置网页文本中文本的字号； 在【背景颜色】文本框中设置网页的背景颜色； 单击【背景图像】文本框右边的【浏览按钮】，会弹出【选择图像文件】对话框，在对话框中选择一个图像作为网页的背景图像； 在【重复】下拉列表中可以指定背景图像在页面上的显示方式； 左边框、右边框，上边框、下边框用来指定页面四周边距大小的。 5.2.2 链接 在【页面属性】对话框中的【分类】选项区中，选择【链接】选项，如图5-12所示。 在【链接】页面属性可以进行如下设置： 在【链接字体】下拉列表中设置页面超链接文本的字体； 在【大小】下拉列表中设置超链接文本的大小； 在【链接颜色】文本框中设置页面超链接的颜色； 在【变换图像链接】文本框中设置页面里变换图像后的超链接文本的颜色； 在【已访问链接】文本框中可以设置网页中访问过的超链接的颜色； 在【活动链接】文本框中设置网页里激活的超链接的颜色； 在【下划线样式】下拉列表中可以自定义网页里鼠标上滚时采用某种下划线。 5.2.3 标题 在【页面属性】对话框中的【分类】选项区中，选择【标题】选项，如图5-13所示。 在【标题】页面属性中可以进行如下设置： 在【标题字体】下拉列表中设置标题文字的字