1 / 89

第 5 章 基本图文网页的制作

第 5 章 基本图文网页的制作. 【 本章导读 】 本章介绍如何制作基本的图文网页：主要内容包括如何新建网页并设置其属性；如何制作文本网页和图像网页；如何创建多种类型的超链接等。 【 本章要点 】 新建网页 设置网页属性 制作文本、图像页面 创建不同类型的超链接. 5.1 新建网页 5.2 设置页面属性 5.3 制作文本页面 5.4 制作图像页面 5.5 创建链接 本章小结. 5.1 新 建 网 页. 5.1.1 网页与首页的区别

adonis
Download Presentation

第 5 章 基本图文网页的制作

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第5章 基本图文网页的制作 • 【本章导读】 • 本章介绍如何制作基本的图文网页：主要内容包括如何新建网页并设置其属性；如何制作文本网页和图像网页；如何创建多种类型的超链接等。 • 【本章要点】 • 新建网页 • 设置网页属性 • 制作文本、图像页面 • 创建不同类型的超链接

  2. 5.1新建网页 • 5.2设置页面属性 • 5.3制作文本页面 • 5.4制作图像页面 • 5.5创建链接 • 本章小结

  3. 5.1 新 建 网 页 • 5.1.1 网页与首页的区别 • 用户在浏览器上输入网址后，即打开一个页面，很多人认为在浏览器上的页面是Home Page，其实如果根据严格定义划分，我们所看到的只不过是某一个网页而已。 • 所谓的Home Page，是指由网址进入时看到的第一个页面，称为“首页”。在首页上通常会将所有的信息清楚的整理在这个页面上，其目的就是为了让浏览者在使用这个网页时可以快速链接到所需的资料，由首页所延伸下去的页面就是一个个的子页面了。

  4. 5.1.2 常规文档 • 在Dreamweaver 8编辑窗口中选择菜单命令【文件】新建】，此时将打开【新建文档】的对话框，如图5-1所示。

  5. 【新建文档】包括了2个选项卡：【常规】和【模板】。【常规】中提供常用的网页类型以供选择；【模板】中显示的是设计者自己制作的模板。【新建文档】包括了2个选项卡：【常规】和【模板】。【常规】中提供常用的网页类型以供选择；【模板】中显示的是设计者自己制作的模板。 • 首先选择【常规】选项卡，此时左侧【类别】列表框中列出了常见的文件类型，主要包括了7种类型： • （1）基本页：基本页包含了创建静态网页所涉及的一些文件类型，如HTML、HTML模板、库项目、CSS、JavaScript、XML等；

  6. （2）动态页：动态页包含了创建动态网页相关的文件安类型，包括ASP JavaScript、ASP VBScript、ASP.NET C#、ASP.NET VB、ColdFusion、ColdFusion组件、JSP、PHP等各种动态网页相关文件类型，如图5-2所示；

  7. （3）模板页：该项提供了各种模板相关文件类型，具体如图5-3所示；（3）模板页：该项提供了各种模板相关文件类型，具体如图5-3所示；

  8. （4）其他：在该项中提供了各种编程脚本、源代码相关文件类型，在这里用户完全可以在Dreamweaver 8中编写各种程序代码，如图5-4所示；

  9. （5）CSS样式表：该项提供已经建好的CSS样式或样式表，这样就可以一次性设定好网页中涉及的所有样式，大大减少了用户的工作量，如图5-5所示；（5）CSS样式表：该项提供已经建好的CSS样式或样式表，这样就可以一次性设定好网页中涉及的所有样式，大大减少了用户的工作量，如图5-5所示；

  10. （6）框架集：该项提供的各种框架如图5-6所示；（6）框架集：该项提供的各种框架如图5-6所示；

  11. （7）页面设计：在左侧的列表中，与页面设计相关的有3项，分别为“页面设计（CSS）”、“入门页面”、“页面设计（有辅助功能的）”，它们预设了外观网页，制作者只需修改内容就可以轻松创建出网页来。每选中一项页面设计，就有不同的页面子类可以预览，如图5-7所示。（7）页面设计：在左侧的列表中，与页面设计相关的有3项，分别为“页面设计（CSS）”、“入门页面”、“页面设计（有辅助功能的）”，它们预设了外观网页，制作者只需修改内容就可以轻松创建出网页来。每选中一项页面设计，就有不同的页面子类可以预览，如图5-7所示。

  12. 5.1.3 模板文件 • 选择模板选项卡如图5-8所示。当在左侧选中一个站点的名称时，将在中部出现该站点已经创建好的模板文件，同时将在右侧出现模板的预览图像。由于此时还没有和创建任何模板，所以没有任何模板文件。

  13. 5.1.4 创建文件 • 在选项卡上选择【基本页】，然后在中间的基本列表中选择HTML，单击【创建】按钮后将打开一个网页编辑窗口，如图5-9所示。

  14. 5.1.5 保存网页 • 创建新的网页后，需要将其保存在站点管理器中。点击菜单命令【文件》保存】，此时将打开【另存为】对话框，如图5-10所示。

  15. 5.2 设置页面属性 • 5.2.1 外观 • 选择【修改》页面属性】命令，弹出【页面属性】对话框，在【分类】选项区中选择【外观】选项，如图5-11所示。

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

  17. 5.2.2 链接 • 在【页面属性】对话框中的【分类】选项区中，选择【链接】选项，如图5-12所示。

  18. 在【链接】页面属性可以进行如下设置： • 在【链接字体】下拉列表中设置页面超链接文本的字体； • 在【大小】下拉列表中设置超链接文本的大小； • 在【链接颜色】文本框中设置页面超链接的颜色； • 在【变换图像链接】文本框中设置页面里变换图像后的超链接文本的颜色； • 在【已访问链接】文本框中可以设置网页中访问过的超链接的颜色； • 在【活动链接】文本框中设置网页里激活的超链接的颜色； • 在【下划线样式】下拉列表中可以自定义网页里鼠标上滚时采用某种下划线。

  19. 5.2.3 标题 • 在【页面属性】对话框中的【分类】选项区中，选择【标题】选项，如图5-13所示。 • 在【标题】页面属性中可以进行如下设置： • 在【标题字体】下拉列表中设置标题文字的字体； • 在【标题1】下拉列表中设置一级标题字的字号和颜色； • 在【标题2】下拉列表中设置二级标题字的字号和颜色； • 在【标题3】下拉列表中设置三级标题字的字号和颜色； • 在【标题4】下拉列表中设置四级标题字的字号和颜色； • 在【标题5】下拉列表中设置五级标题字的字号和颜色； • 在【标题6】下拉列表中设置六级标题字的字号和颜色。

  20. 5.2.4 标题/编码 • 在【页面属性】对话框中的【分类】选项区中，选择【标题/编码】选项，如图5-14所示。

  21. 在【标题/编码】页面属性中可以进行如下设置：在【标题/编码】页面属性中可以进行如下设置： • 在【标题】文本框中输入网页的标题； • 在【文档类型(DTD)】下拉列表中指定文档类型的定义； • 在【编码】下拉列表中设置网页的文字编码，通常选择【简体中文（GB2313）】设置为中文； • 【Unicode标准化表单】仅在选择UTF-8作为文档编码时启用； • 【包括Unicode签名（BOM）】可在文档中包括字节顺序标记（BOM）。

  22. 5.2.5 跟踪图像 • 在【页面属性】对话框中的【分类】选项区中，选择【跟踪图像】选项，如图5-15所示：

  23. 5.3 制作文本页面 • 5.3.1 插入文本 • 文本与图像是构成网页的重要元素，下面介绍如何制作文本与图像页面，以及如何为文本与图像设置超链接。在网页中插入文本可以通过直接键入、复制和粘贴或者导入这几种方式，还可以通过在文本的字符与行之间插入额外空格的方式。 • 在网页编辑窗口中使用鼠标单击需要输入文本的区域，出现闪动的光标，提示输入文本的位置，然后选择适当的输入法即可直接插入文本，如图5-16所示。

  24. 5.3.2 从外部导入文本 • 除了在网页中直接输入文本以外，在Dreamweaver 8中还可以用从外部导入文本的方式将Excel表格和Word文档导入到网页中。具体步骤如下： • （1）单击【文件】导入】Word文档】菜单项，如图5-17所示。

  25. （2）打开【导入Word文档】对话框，在【查找范围】中选择文件的位置，如图5-18所示，在此对话框中选中要导入的Word文档。（2）打开【导入Word文档】对话框，在【查找范围】中选择文件的位置，如图5-18所示，在此对话框中选中要导入的Word文档。

  26. （3）单击【打开】按钮，就可以将Word文档导入到网页中。（3）单击【打开】按钮，就可以将Word文档导入到网页中。 • 5.3.3 设置文本属性 • 选中需要设置属性的文本，单击【窗口】属性】菜单项，打开【属性面板】，如图5-19所示。 属性面板中各参数含义为： 格式：设置文本的段落格式，有7个选项供选择。 样式：设置文本的样式，通过定义CSS样式来实现。 CSS：单击此按钮显示文本是否应用了CSS样式表。

  27. 5.3.4 插入特殊字符 • 特殊字符主要包括版权符号、商标符号以及换行符号等。在网页中经常需要插入特殊字符。下面以插入换行符为例，介绍如何插入特殊字符。 • （1）单击【插入】栏左边的三角形按钮，在弹出的下拉菜单中单击【文本】菜单项，如图5-20所示。

  28. （2）单击第一个选项即可完成所需的操作。 • 5.3.5 插入水平线 • 在页面上插入一条或者多条水平线以可视的方式分离文本和对象，对于组织信息非常有用，在Dreamweaver 8中插入水平线的方法有2种： • A. 单击【插入》HTML》水平线】菜单项。 • B. 在【插入】栏的【HTML】类别中单击【水平线】按钮，如图5-21所示。

  29. 5.4 制作图像页面 • 5.4.1 插入图像 • 图像可以在Dreamweaver 8中的【设计】视图或者【代码】视图中被插入到文档里。在Dreamweaver 8的文档中添加图像时，可以设置或者修改图像属性并可直接在文档窗口中查看所作的修改，插入图像的具体步骤如下： • （1）用鼠标指针确定图像的插入点。 • （2）单击【插入》图像】菜单项，打开【选择图像源文件】对话框，如图5-22所示，在此对话框中选择需要插入的图像文件。

  30. （3）单击【确定】按钮，如果图像文件在站点外面，就会弹出一个对话框，如图5-23所示。（3）单击【确定】按钮，如果图像文件在站点外面，就会弹出一个对话框，如图5-23所示。

  31. （4）单击【确定】按钮，图像就能插入到网页中并将其复制到站点的根目录下。（4）单击【确定】按钮，图像就能插入到网页中并将其复制到站点的根目录下。 • （5）打开【图像标签辅助功能属性】对话框，如图5-24所示，在此对话框的【替换文本】下拉列表框中可以替换替代图片的文字。

  32. 5.4.2 设置图像属性 • 选中插入的图像，可以在【属性】面板中查看该图像的属性，如图5-25所示。 下面介绍【属性】面板中各个参数的含义： 文本框：用于设置图像的名称，以便在应用行为、编辑脚 本时引用，如制作交换图像、导航条时使用。 宽和高：用于设置图像在当前文档中的大小。 源文件：显示插入的图像所在的位置，通过它可以将当前 的图像更换成其他图像。单击其右边的图标更换图像。 替换：设置当鼠标放到图像时的提示文字，如图5-26所示。

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

  34. 中间亮的部分是需要保留的区域，四周较暗的部分是要裁掉的部分。用鼠标指针拖动四周的控制点调整剪裁范围，调整好后在图片上双击即可完成裁剪。中间亮的部分是需要保留的区域，四周较暗的部分是要裁掉的部分。用鼠标指针拖动四周的控制点调整剪裁范围，调整好后在图片上双击即可完成裁剪。 • 亮度与对比度：调整图像的明暗度与对比度，单击【亮度/对比度】图标，打开【亮度/对比度】对话框。在亮度项中拖动滑块即可调整图像的明暗度，滑块越向右图片越亮；在对比度项中拖动滑块即可调整图像的对比度，滑块越向右对比度越强，如图5-28所示。

  35. 锐化：通过锐化图像，可使图像的边缘更加清晰。单击【锐化】图标，打开【锐化】对话框，拖动【锐化】滑块，可以调整图片的轮廓，滑块越向右图片的轮廓越明显，如图5-29所示。锐化：通过锐化图像，可使图像的边缘更加清晰。单击【锐化】图标，打开【锐化】对话框，拖动【锐化】滑块，可以调整图片的轮廓，滑块越向右图片的轮廓越明显，如图5-29所示。

  36. 垂直边距：设置图像距左侧和右侧内容的间距。垂直边距：设置图像距左侧和右侧内容的间距。 • 水平边距：设置图像左侧和右侧内容的间距。 • 低解析度源：有些版本中为“低品质原”，其功能是指定一个与当前图像画面内容一致，但图像质量低、文件小的图像作为当前图像的载入前图像。目的是使浏览器快速显示该图像。 • 边框：确定是否给图像加边框，没有值表示无边框，值越大边框越粗。 • 对齐：对齐的下拉列表中包括默认值、基线、顶端、居中、底部、文本上方、绝对居中、绝对底部、左对齐、右对齐这10种方式。

  37. 5.4.3 插入热点 • 热点主要是用来为图像文件设置链接，使其指向另一个文档。可以在图像文件上制作多个热点。操作步骤如下： • （1）单击【属性】面板种的【矩形热点工具】按钮，如图5-30所示。

  38. （2）拖动鼠标，在图像上绘制一个热点区域，如图5-31所示。（2）拖动鼠标，在图像上绘制一个热点区域，如图5-31所示。

  39. （3）在热点【属性】面板中设置链接地址。 • （4）单击【属性】面板中的【链接】图标，打开【选择文件】对话框，选中要链接的文件，如图5-32所示。

  40. （5）单击【确定】按钮，回到热点【属性】面板中。（5）单击【确定】按钮，回到热点【属性】面板中。 • （6）在【目标】下拉列表中单击_blank链接文档方式，如图5-33所示。 （7）设置完成后即为图像添加了热点，在浏览器预览时，单击图像可以打开链接的文档。

  41. 5.4.4 插入图像占位符 • 在制作网页的时候，经常会使用图像占位符。通过插入一个图像占位符，将需要放置图像的位置和大小固定下来，排版完成后，再插入对应的图像。图像占位符不会在浏览器中出现，以最终插入的图像最为最终的显示效果。具体的操作步骤如下： • （1）在编辑页面中用鼠标选择需要插入图像占位符的位置。 • （2）单击【插入】图像对象】图像占位符】菜单项，如图5-34所示。

  42. （3）打开【图像占位符】对话框，输入占位符的名称，如图5-35所示。（3）打开【图像占位符】对话框，输入占位符的名称，如图5-35所示。

  43. （4）在【图像占位符】对话框中设置占位符的宽度和高度，并为其选择一种颜色加以区别。（4）在【图像占位符】对话框中设置占位符的宽度和高度，并为其选择一种颜色加以区别。 • 在【图像占位符】对话框各种参数的含义如下： • 名称：作为图像占位符的标签文本，可在应用行为、编写脚本时引用。名称必须以字母开头，并且只能包含字母和数字。不使用空格和特殊字符。 • 宽度和高度：设置占位符的大小，也就是将来插入到占位符中的图像的大小。当然，如果图像比占位符大或小，则占位符的大小以图像的大小为准。

More Related