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

《网页设计与制作 第5章 基本图文网页的制作.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作 第5章 基本图文网页的制作.ppt（89页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第5章章 基本图文网页的制作基本图文网页的制作l【本章导读本章导读】l本章介绍如何制作基本的图文网页：主要内容包括如何新建网页并设置其属性；如何制作文本网页和图像网页；如何创建多种类型的超链接等。l【本章要点本章要点】l新建网页l设置网页属性l制作文本、图像页面l创建不同类型的超链接l5.1新建网页l5.2设置页面属性l5.3制作文本页面l5.4制作图像页面l5.5创建链接l本章小结5.1 新新 建建 网网 页页l5.1.1 网页与首页的区别l用户在浏览器上输入网址后，即打开一个页面，很多人认为在浏览器上的页面是Home Page，其实如果根据严格定义划分，我们所看到的只不过是某一个网页而已

2、。l所谓的Home Page，是指由网址进入时看到的第一个页面，称为“首页”。在首页上通常会将所有的信息清楚的整理在这个页面上，其目的就是为了让浏览者在使用这个网页时可以快速链接到所需的资料，由首页所延伸下去的页面就是一个个的子页面了。l5.1.2 常规文档l在Dreamweaver 8编辑窗口中选择菜单命令【文件】新建】，此时将打开【新建文档】的对话框，如图5-1所示。l【新建文档】包括了2个选项卡：【常规】和【模板】。【常规】中提供常用的网页类型以供选择；【模板】中显示的是设计者自己制作的模板。l首先选择【常规】选项卡，此时左侧【类别】列表框中列出了常见的文件类型，主要包括了7种类型：l（

3、1）基本页：基本页包含了创建静态网页所涉及的一些文件类型，如HTML、HTML模板、库项目、CSS、JavaScript、XML等；l（2）动态页：动态页包含了创建动态网页相关的文件安类型，包括ASP JavaScript、ASP VBScript、ASP.NET C#、ASP.NET VB、ColdFusion、ColdFusion组件、JSP、PHP等各种动态网页相关文件类型，如图5-2所示；l（3）模板页：该项提供了各种模板相关文件类型，具体如图5-3所示；l（4）其他：在该项中提供了各种编程脚本、源代码相关文件类型，在这里用户完全可以在Dreamweaver 8中编写各种程序代码，如图

4、5-4所示；l（5）CSS样式表：该项提供已经建好的CSS样式或样式表，这样就可以一次性设定好网页中涉及的所有样式，大大减少了用户的工作量，如图5-5所示；l（6）框架集：该项提供的各种框架如图5-6所示；l（7）页面设计：在左侧的列表中，与页面设计相关的有3项，分别为“页面设计（CSS）”、“入门页面”、“页面设计（有辅助功能的）”，它们预设了外观网页，制作者只需修改内容就可以轻松创建出网页来。每选中一项页面设计，就有不同的页面子类可以预览，如图5-7所示。l5.1.3 模板文件l选择模板选项卡如图5-8所示。当在左侧选中一个站点的名称时，将在中部出现该站点已经创建好的模板文件，同时将在右侧

5、出现模板的预览图像。由于此时还没有和创建任何模板，所以没有任何模板文件。l5.1.4 创建文件l在选项卡上选择【基本页】，然后在中间的基本列表中选择HTML，单击【创建】按钮后将打开一个网页编辑窗口，如图5-9所示。l5.1.5 保存网页l创建新的网页后，需要将其保存在站点管理器中。点击菜单命令【文件保存】，此时将打开【另存为】对话框，如图5-10所示。5.2 设置页面属性设置页面属性l5.2.1 外观l选择【修改页面属性】命令，弹出【页面属性】对话框，在【分类】选项区中选择【外观】选项，如图5-11所示。l在【外观】页面属性中可以进行如下设置：l在【页面字体】下拉列表中设置文本的字体；l在【

6、大小】下拉列表中设置网页文本中文本的字号；l在【背景颜色】文本框中设置网页的背景颜色；l单击【背景图像】文本框右边的【浏览按钮】，会弹出【选择图像文件】对话框，在对话框中选择一个图像作为网页的背景图像；l在【重复】下拉列表中可以指定背景图像在页面上的显示方式；l左边框、右边框，上边框、下边框用来指定页面四周边距大小的。l5.2.2 链接l在【页面属性】对话框中的【分类】选项区中，选择【链接】选项，如图5-12所示。l在【链接】页面属性可以进行如下设置：l在【链接字体】下拉列表中设置页面超链接文本的字体；l在【大小】下拉列表中设置超链接文本的大小；l在【链接颜色】文本框中设置页面超链接的颜色；l

7、在【变换图像链接】文本框中设置页面里变换图像后的超链接文本的颜色；l在【已访问链接】文本框中可以设置网页中访问过的超链接的颜色；l在【活动链接】文本框中设置网页里激活的超链接的颜色；l在【下划线样式】下拉列表中可以自定义网页里鼠标上滚时采用某种下划线。l5.2.3 标题l在【页面属性】对话框中的【分类】选项区中，选择【标题】选项，如图5-13所示。l在【标题】页面属性中可以进行如下设置：l在【标题字体】下拉列表中设置标题文字的字体；l在【标题1】下拉列表中设置一级标题字的字号和颜色；l在【标题2】下拉列表中设置二级标题字的字号和颜色；l在【标题3】下拉列表中设置三级标题字的字号和颜色；l在【标

8、题4】下拉列表中设置四级标题字的字号和颜色；l在【标题5】下拉列表中设置五级标题字的字号和颜色；l在【标题6】下拉列表中设置六级标题字的字号和颜色。l5.2.4 标题/编码l在【页面属性】对话框中的【分类】选项区中，选择【标题/编码】选项，如图5-14所示。l在【标题/编码】页面属性中可以进行如下设置：l在【标题】文本框中输入网页的标题；l在【文档类型(DTD)】下拉列表中指定文档类型的定义；l在【编码】下拉列表中设置网页的文字编码，通常选择【简体中文（GB2313）】设置为中文；l【Unicode标准化表单】仅在选择UTF-8作为文档编码时启用；l【包括Unicode签名（BOM）】可在文档

9、中包括字节顺序标记（BOM）。l5.2.5 跟踪图像l在【页面属性】对话框中的【分类】选项区中，选择【跟踪图像】选项，如图5-15所示：5.3 制作文本页面制作文本页面l5.3.1 插入文本l文本与图像是构成网页的重要元素，下面介绍如何制作文本与图像页面，以及如何为文本与图像设置超链接。在网页中插入文本可以通过直接键入、复制和粘贴或者导入这几种方式，还可以通过在文本的字符与行之间插入额外空格的方式。l在网页编辑窗口中使用鼠标单击需要输入文本的区域，出现闪动的光标，提示输入文本的位置，然后选择适当的输入法即可直接插入文本，如图5-16所示。l5.3.2 从外部导入文本l除了在网页中直接输入文本以

10、外，在Dreamweaver 8中还可以用从外部导入文本的方式将Excel表格和Word文档导入到网页中。具体步骤如下：l（1）单击【文件】导入】Word文档】菜单项，如图5-17所示。l（2）打开【导入Word文档】对话框，在【查找范围】中选择文件的位置，如图5-18所示，在此对话框中选中要导入的Word文档。l（3）单击【打开】按钮，就可以将Word文档导入到网页中。l5.3.3 设置文本属性l选中需要设置属性的文本，单击【窗口】属性】菜单项，打开【属性面板】，如图5-19所示。属性面板中各参数含义为：格式：设置文本的段落格式，有7个选项供选择。样式：设置文本的样式，通过定义CSS样式来实

11、现。CSS：单击此按钮显示文本是否应用了CSS样式表。l5.3.4 插入特殊字符插入特殊字符l特殊字符主要包括版权符号、商标符号以及换行符号等。在网页中经常需要插入特殊字符。下面以插入换行符为例，介绍如何插入特殊字符。l（1）单击【插入】栏左边的三角形按钮，在弹出的下拉菜单中单击【文本】菜单项，如图5-20所示。l（2）单击第一个选项即可完成所需的操作。l5.3.5 插入水平线插入水平线l在页面上插入一条或者多条水平线以可视的方式分离文本和对象，对于组织信息非常有用，在Dreamweaver 8中插入水平线的方法有2种：lA.单击【插入HTML水平线】菜单项。lB.在【插入】栏的【HTML】类

12、别中单击【水平线】按钮，如图5-21所示。5.4 制作图像页面制作图像页面l5.4.1 插入图像l图像可以在Dreamweaver 8中的【设计】视图或者【代码】视图中被插入到文档里。在Dreamweaver 8的文档中添加图像时，可以设置或者修改图像属性并可直接在文档窗口中查看所作的修改，插入图像的具体步骤如下：l（1）用鼠标指针确定图像的插入点。l（2）单击【插入图像】菜单项，打开【选择图像源文件】对话框，如图5-22所示，在此对话框中选择需要插入的图像文件。l（3）单击【确定】按钮，如果图像文件在站点外面，就会弹出一个对话框，如图5-23所示。l（4）单击【确定】按钮，图像就能插入到网页

13、中并将其复制到站点的根目录下。l（5）打开【图像标签辅助功能属性】对话框，如图5-24所示，在此对话框的【替换文本】下拉列表框中可以替换替代图片的文字。l5.4.2 设置图像属性设置图像属性l选中插入的图像，可以在【属性】面板中查看该图像的属性，如图5-25所示。下面介绍下面介绍【属性属性】面板中各个参数的含义：面板中各个参数的含义：文本框：用于设置图像的名称，以便在应用行为、编辑脚本时引用，如制作交换图像、导航条时使用。宽和高：用于设置图像在当前文档中的大小。源文件：显示插入的图像所在的位置，通过它可以将当前的图像更换成其他图像。单击其右边的图标更换图像。替换：设置当鼠标放到图像时的提示文字

14、，如图5-26所示。l类：在类右边的下拉列表中存放的是图像样式，可以选择需要的样式应用于当前的图像，现在该下拉列表中没有任何东西，但在学习CSS样式后，它的作用就很明显的体现出来了。l链接：是将当前图像与其他位置的内容链接，实现页面的跳转。其下方的目标是对链接内容的打开方式的设定。l编辑：单击【编辑】按钮，启动Fireworks程序，在Fireworks窗口中对当前的图像进行编辑。编辑完毕后，单击Fireworks中的【完成】按钮，将保存所做的修改并应用到Dreamweaver 8的当前图像中，通过该功能可使图像快速得到修改。l使用Fireworks最优化：单击【使用Fireworks最优化】

15、图标，利用Fireworks对图像进行最优化处理。l剪裁：用于剪裁当前的图像。单击【剪裁】图标后，图像上出现剪裁的选取框，如图5-27所示。l中间亮的部分是需要保留的区域，四周较暗的部分是要裁掉的部分。用鼠标指针拖动四周的控制点调整剪裁范围，调整好后在图片上双击即可完成裁剪。l亮度与对比度：调整图像的明暗度与对比度，单击【亮度/对比度】图标，打开【亮度/对比度】对话框。在亮度项中拖动滑块即可调整图像的明暗度，滑块越向右图片越亮；在对比度项中拖动滑块即可调整图像的对比度，滑块越向右对比度越强，如图5-28所示。l锐化：通过锐化图像，可使图像的边缘更加清晰。单击【锐化】图标，打开【锐化】对话框，拖

16、动【锐化】滑块，可以调整图片的轮廓，滑块越向右图片的轮廓越明显，如图5-29所示。l垂直边距：设置图像距左侧和右侧内容的间距。l水平边距：设置图像左侧和右侧内容的间距。l低解析度源：有些版本中为“低品质原”，其功能是指定一个与当前图像画面内容一致，但图像质量低、文件小的图像作为当前图像的载入前图像。目的是使浏览器快速显示该图像。l边框：确定是否给图像加边框，没有值表示无边框，值越大边框越粗。l对齐：对齐的下拉列表中包括默认值、基线、顶端、居中、底部、文本上方、绝对居中、绝对底部、左对齐、右对齐这10种方式。l5.4.3 插入热点插入热点l热点主要是用来为图像文件设置链接，使其指向另一个文档。可

17、以在图像文件上制作多个热点。操作步骤如下：l（1）单击【属性】面板种的【矩形热点工具】按钮，如图5-30所示。l（2）拖动鼠标，在图像上绘制一个热点区域，如图5-31所示。l（3）在热点【属性】面板中设置链接地址。l（4）单击【属性】面板中的【链接】图标，打开【选择文件】对话框，选中要链接的文件，如图5-32所示。l（5）单击【确定】按钮，回到热点【属性】面板中。l（6）在【目标】下拉列表中单击_blank链接文档方式，如图5-33所示。（7）设置完成后即为图像添加了热点，在浏览器预览时，单击图像可以打开链接的文档。l5.4.4 插入图像占位符插入图像占位符l在制作网页的时候，经常会使用图像占

18、位符。通过插入一个图像占位符，将需要放置图像的位置和大小固定下来，排版完成后，再插入对应的图像。图像占位符不会在浏览器中出现，以最终插入的图像最为最终的显示效果。具体的操作步骤如下：l（1）在编辑页面中用鼠标选择需要插入图像占位符的位置。l（2）单击【插入】图像对象】图像占位符】菜单项，如图5-34所示。l（3）打开【图像占位符】对话框，输入占位符的名称，如图5-35所示。l（4）在【图像占位符】对话框中设置占位符的宽度和高度，并为其选择一种颜色加以区别。l在【图像占位符】对话框各种参数的含义如下：l名称：作为图像占位符的标签文本，可在应用行为、编写脚本时引用。名称必须以字母开头，并且只能包含

19、字母和数字。不使用空格和特殊字符。l宽度和高度：设置占位符的大小，也就是将来插入到占位符中的图像的大小。当然，如果图像比占位符大或小，则占位符的大小以图像的大小为准。l（5）单击【确定】按钮，即插入一个图像占位符，在编辑页面插入一个图像占位符的效果如图5-36所示。l（6）完成网页规划以后，用所设计的图像替换图像站位符，按F12键可以预览图片的效果。如图5-37所示。l5.4.5 插入鼠标经过图像插入鼠标经过图像l在网页中，鼠标经过图像时经常被用来制作动态效果。当鼠标移动到图像上时，该图像就变成另外一个图像。这样的效果被广泛的应用到按钮、导航条的制作中。具体操作步骤如下：l（1）将光标定位到一

20、个图的位置。l（2）单击【插入图像对象鼠标经过图像】菜单项，打开【插入鼠标经过菜单】对话框。l（3）单击【浏览】按钮，分别设置原始图像和鼠标经过的图像的路径。l（4）在【替换文本】文本框输入提示文字“风景图”，如图5-38所示。l在【插入鼠标经过图像】对话框中各个参数的含义如下：l原始图像：输入显示在当前窗口中的图像的路径，或单击【浏览】按钮在弹出的对话框中指定原始图像的路径。l鼠标经过图像：输入在浏览时鼠标经过原始图像后用来替换原图像的替换图象的路径，或单击【浏览】按钮指定路径。l预载鼠标经过图像：选取复选框，在加载页面时鼠标经过图像预先载入到浏览器的缓存中，以使用户将鼠标指针滑过图像时不发

21、生延迟。l替换文本：该项与前面介绍的图像的替换相同。l按下时，前往的URL：输入当前鼠标单击交换图像时要打开的文档路径。如果只需要交换图像，可以不设置该项；如果需要交换图像并跳转到某一个页面，就需要指定该项。l（5）单击【确定】按钮，就完成了插入鼠标经过图像的设置。l（6）保存文档后，按F12浏览制作的交换图像效果，在浏览器中预览的效果如图5-39所示。l5.4.6 插入导航条插入导航条l导航条实际上是由一幅图像或一套图像组成的，每幅图像分别链接到不同的目标文档上。浏览者在需要浏览的标题上单击，就可跳转相应的网页并查看相关的内容。在Dreamweaver 8中可以把导航条中的按钮设置为状态图像

22、、鼠标经过图像、按下图像和按下时鼠标经过图像四种状态。下面就以制作一个网页的导航条为例进行讲解。首先准备好素材图片，具体的操作步骤如下：l（1）根据需要在页面中插入一个1行4列的表格，并且设置单元格的宽度与素材图片相同，如图5-40所示。l（2）选中第一个单元格。l（3）单击【插入图像对象导航条】菜单命令，打开【插入导航条】对话框，如图5-41所示。l在【插入导航条】对话框中各种参数的含义如下：l导航条元件：该列表中显示添加的导航条项目。每个项目都对应一个具有一组状态图像的按钮，状态最多可达4个。l项目名称：输入导航条项目的名称，只能输入英文和数字，不能输入汉字。项目名称在【导航条元件】列表中

23、显示。单击右边的箭头按钮可排列项目在导航条中位置。l状态图像：用户未单击或尚未与此项目交互时所显示的图像。l鼠标经过图像：指鼠标经过图像时所显示的图像。项目的外观发生变化，以便让用户知道可与这个项目进行交互。l按下图像：指项目被单击后所显示的图像。l按下时鼠标经过图像：指在项目被单击后，鼠标按下时所显示的图像。l替换文本：与图像属性中的替代功能相同。l按下时，前往的URL：输入单击导航条时要跳转到的页面的路径，并在右边的下拉列表中选择文档打开的目标窗口。选择【主窗口】表示在同一个窗口中打开。如果是 框架页面，则要选择在那个框架页面中显示。l预先载入图像：与交换图像中的预载鼠标经过图像相同。l页

24、面载入时就显示“鼠标按下图像”：即在也面被浏览器载入时，就将图像显示为按下状态。l插入：在该栏中设置创建好的导航条在页面中放置的位置。l使用表格：选中复选框，则将创建的导航条的各项目放置于表格中，否则直接挨个排列。l（4）单击【浏览】按钮，打开【选择图像源文件】对话框，选择要插入的图片，如图5-42所示。l（5）单击【确定】按钮，用相同的方法为每种状态图像设置路径，如图5-43所示。l（6）单击【确定】按钮，在选中的单元格中插入一个导航条的按钮，如图5-44所示。（7）用同样的方法插入导航条的每一个按钮，如图5-45所示。l（8）完成后在浏览器中预览的效果如图5-46所示。按下时鼠标经过：鼠标

25、按下时：鼠标经过时：初始化时的效果：初始化时的效果：5.5 创创 建建 链链 接接l5.5.1 路径l每一个文件都有自己的存放位置和路径，路径分为绝对路径、相对路径和根路径3种：l（1）绝对路径：绝对路径为文件提供一个完整的路径，包括http和ftp这样的协议。在链接其他网站中的文件时，必须使用绝对路径。l（2）相对路径：相对路径用来制作网站的内部超链接，只要处于同一个网站，即使不在同一个目录下，相对路径同样适用。如果链接到同一目录下，只需输入要链接的文件名称即可。要链接下一级目录中的文件，只要先输入目录名，然后再输入“/”，最好输入文件名即可。要链接上一级目录中的文件，只要先输入“./”，再

26、输入目录名和文件名即可。l（3）根目录：根路径与相对路径同样适用于创建网站内部的超链接。但更多应用于以下两种情况中：当站点放置于几个服务器时；当在一个服务器上同时放置几个站点时。根目录以“/”开始，然后是根目录下的目录名，例如“/FlashSet/Rank.html”。l5.5.2 5.5.2 创建文字链接创建文字链接l在网页中可以选定相关的文字进行链接，具体的步骤如下：l（1）选中要创建链接的文本，选择【窗口属性】菜单项，打开【属性】面板，如图5-47所示l（2）在【属性】面板的“链接”文本框中输入“”，或者单击文本框右边的“浏览文件”图标，在弹出的对话框中选择链接的对象，如图5-48所示。

27、l在此对话框中选择要链接的对象，然后单击【确定】按钮进行链接，如图5-49所示。l（3）在目标下拉菜单中选择链接文件将以怎样的方式在浏览器中打开，其各项参数的含义如下：l_blank：将被链接的文档显示在一个新命名的框架或窗口内。l_parent：将被链接的文档显示在包含链接的框架的上一级框架或者窗口内。如果包含链接的框架不是被嵌套的话，这时被链接的文档将会占满整个窗口。l_self：将被链接的文档显示在和链接文档同一个框架或窗口内。l_top：将被链接的文档显示在整个浏览器窗口并取消所有的框架。l（4）保存好文档，按F12键进行浏览，效果如图5-50所示。l5.5.3 创建图像链接创建图像链

28、接l在网页中选定某图片进行链接，具体的步骤如下：l（1）选中要创建链接的文本，选择【窗口属性】菜单项，打开【属性】面板，如图5-51所示。l（2）在【属性】面板的“链接”文本框中输入“”，或者单击文本框右边的“浏览文件”图标，在弹出的对话框中选择链接的对象，如图5-52所示。l在此对话框中选择要链接的对象，然后单击【确定】按钮进行链接，如图5-53所示。l（3）在目标下拉菜单中选择以_blank方式打开，并且定义图像的替换文字为“风景图片”，当图片因某种原因无法显示时，替代文字将会出现在图片的位置，并且当鼠标指向图像时，替代文字将起到说明性的作用，如图5-54所示。l（4）保存好文档，按F12

29、键进行浏览，效果如图5-55所示。l5.5.4 创建创建E-mail链接链接l在网页上创建电子邮件链接，可以让浏览者快速反馈自己的意见。当浏览者单击电子邮件链接时，可以立即打开浏览器默认的电子邮件处理程序，收件人的电子邮件地址被电子邮件超链接中指定的地址自动更新，无需浏览者输入。创建电子邮件链接的具体步骤如下：l（1）在编辑页面上选择需要制作电子邮件超链接的文字，如图5-56所示。l（2）在【属性】面板中的【链接】文本框中输入“mailto”，再输入邮件地址和主题：?subject=我的材料，如图5-57所示。l（3）完成电子邮件超链接的制作，预览网页并单击“企业邮箱”菜单，会自动启动Outl

30、ook,并创建邮件主题，如图5-58所示。l5.5.5 创建锚点链接创建锚点链接l锚点常用于长篇文章、技术文件等内容的网页，在网页中使用锚点来链接文章的每一个段落，以方便阅读。当用户单击某一个超链接时，可以转到相同网页的特定段落。创建锚点链接的步骤如下：l（1）将光标放置在正文“一、第一章”前面，选择【插入命名锚点】菜单，如图5-59所示。l（2）弹出【命名锚点】对话框，在“锚点名称”文本框输入名字top，如图5-60所示。l（3）单击【确定】按钮，插入锚点标记，如图5-61所示。l（4）选择标题栏中的“一、第一章”，打开【属性】面板，如图5-62所示。l（5）在【属性】面板中的“链接”文本框

31、中输入“top”，进行链接，如图5-63所示。l(6)重复上述步骤，插入其他的锚点，并进行相应的锚点链接，然后保存文档，按F12键在浏览器中预览，如图5-64所示。l5.5.6 创建图像热点链接创建图像热点链接l图文并茂是网页的一大特色，图像不仅能使网页生动、形象、美观，而且能使网页中的的内容更加丰富多彩，因此图像在网页中的作用是举足轻重的。同一个图像的不同部分可以链接到不同的文档，这就是热点链接。要使图像的特定部分成为超级链接，就要在图像中设定“热点”，然后再创建链接，这样当鼠标移动到图片热点区域的时候就会变成手的形状，当按下鼠标的时候，页面就跳转到或者打开设定的URL。具体的操作步骤如下：l（1）选择图像，打开【属性】面板，如图5-65所示。l（2）选择【属性】面板中的“矩形热点”工具，如图5-66所示。l（3）将光标移到图像中的贝壳部分，拖动鼠标绘制矩形热点，如图5-67所示。l（4）在【属性】面板中的“链接”文本框中输入链接的地址或名称，在“替换”文本中输入贝壳，如图5-68所示。l（5）保存文档，按F12键预览，效果如图5-69所示。本本 章章 小小 结结l本章详细介绍了网页设计中的文本处理和图像处理，作为网页的两大重要组成元素，只有详细了解和熟练运用文本和图像处理，才能在网页制作中做到高效、高质，全面提高网页的制作水平。