网页制作第二讲.

2021/5/29
13
网络技术应用
网络技术应用〔选修3）
课后思考：
我们这节课我们学习了制作 网页的一些技巧，大家课后要继 续熟悉它。
下节课我们继续学习如何制作 网页。
2021/5/29
2
网络技术应用
知识回顾
开发网站的基本过程
2021/5/29
3
网络技术应用
知识讲授
❖ 在网页中插入基本元素 ❖ 1.向网页中添加文字 ❖ “格式〞菜单|字体” ❖ 在输入文字时，一般情况下让系统自动换行，
若强制换行，可按回车键〔会空出一行〕或按 Shift + Enter〔没有空行的强制换行）。
❖ ②选中字，单击右键，选择【超链接】命令， 在“编辑超链接〞对话框中单击【书签】按钮， 呈现 “在文档中选择位置〞对话框，选择已定 义好的书签后，单击【确定】按钮即可。
2021/5/29
8
网络技术应用
知识讲授
❖ 3.插入超链接 ❖ 说明：其实可以将超链接链指向任意文件，
如图片或音乐文件，方法和上面类似；另外， 也可以给图片添加超链接，只需先选中图片， 然后添加超链接即可。
❖ 注意：在保存网页时，如果图片来自于网
站根目录之外，则会出现 “保存嵌入式文
件〞对话框，在对话框中单击【更改文件
夹】按钮可以选择图片要保存到的位置，
直接单击【确定】按钮即可将其保存到网
站根目录下。一般保存到images文件夹
下。
2021/5/29
5
网络技术应用
知识讲授
❖ 3.插入超链接
❖ 1)链接到另一个网页
2021/5/29
10
网络技术应用
保存及预览
❖主页文件通常命名为“index.htm”。

上一页 返 回
2.5 网页中的字体
2.5.1 文字在网页设计中的作用
在平面设计的构成要素中有两大基本元素，一个是图形，另 一个就是文字。只通过图形来传递信息常常不能达到最佳的 效果，须借助文字才能进行最有效的说明。在网页中也是如 此。
具体来说，文字在网页中的作用可以体现为以下几点，例如 在优秀设计作品中体现出的文字的特性。
开头，这在传统媒体版式设计中称之为“下坠式”。 （2）引文的强调。 在进行网页文字编排时，常常会碰到提纲挈领性的文字，即
引文（也称为眉头）。
上一页Байду номын сангаас下一页
2.5 网页中的字体
（3）个别文字的强调。 如果将个别文字作为页面的诉求重点，则可以通过加粗、加
框、加下划线、加指示性符号、倾斜字体等手段有意识地强 化文字的视觉效果，使其在页面整体中显得出众而夺目。 4. 文字的颜色 在网页设计中，设计者可以为文字、文字链接、已访问链接 和当前活动链接选用各种颜色。 颜色的运用除了能够起到强调整体文字中特殊部分的作用之 外，对于整个文案的情感表达也会产生影响。
上一页 下一页
2.6 网页中表格的运用
2. 表格运用的注意点 表格的嵌套并不是表格处理最困难的地方，无论多复杂的版
面，悉心琢磨一番总能找到解决的办法。 因此，在设计页面表格的时候，应该做到以下几点。 （1）整个页面不要都套在一个表格里，尽量拆分成多个表
格。 （2）单一表格的结构尽量整齐。 （3）表格嵌套层次尽量要少。
上一页 下一页
2.5 网页中的字体
拉丁字母依据其基本结构可以分为3种类型。 （1）饰线体（Serif）：此类字体在笔画末端带有装饰性部
分，笔画精细对比明显，与中文的宋体具有近似形态特征， 饰线体在阅读时具有较好的易读性，适合于长篇幅文本段落。 （2）无饰线体（Sans Serif）：笔画的粗细对比不明显， 笔画末端没有装饰性部分，字体形态与中文的黑体相类似。 （3）装饰体（Decorative，也称Display）：即通常所 说的“花”体，由于此类字体拘泥于形式的装饰意味，阅读 时较为费力，易读性较差，只适合于标题或较短文本，类似 于中文的美术体和手写体。

选择多个文件时按下〈Ctrl〉键并单击要选择的文件
12
二、Dream weaver MX 基本操作 Dream weaver MX简介
Dream weaver是Macromedia公司的出品的一款 “所见即所得”的网页编辑工具。与FrontPage不 同，Dream weaver采用的是Mac机浮动面版的设计 风格，对于初学者来说可能会感到不适应。一旦 习惯了其操作方式后，就会发现Dream weaver的 直观性与高效性是FrontPage所无法比拟的。
作时，可以直接单击工具栏上的“保存”按钮，或从“文件” 菜单中选择“保存”，还可以直接按〈Ctrl〉+〈S〉键。在弹 出的“另存为”对话框的“文件名”中键入要保存网页的名称， 在“保存位置”选择保存的位置，然后单击“保存”按钮。如 图9-3所示。然后单击“保存”按钮。 2) 对保存网页进行更名、更改保存路径操作时，在“文件”菜 单中选择“保存”，在弹出的“另存为”对话框的“文件名” 中键入要更改的网页名称，在“保存位置”选择要更改的保存 3位) 一置次，保然存后多单个击网“页保时存，”在按“钮文。件” 菜单中选择“全部保存”，在弹出的 多个“另存为”对话框的“文件名” 中，依次键入要保存网页的名称，在 “保存位置”选择相应的保存位置， 然后单击“保存”按钮。
9
5、设置网页属性
设置网页属性，方法如下： 1) 选择要设置网页属性的网页（从“窗口”菜单中选择网页， 或者在“导航”视图中双击需要的网页），出现网页编辑工作 区。 2) 在“文件”菜单中指向“属性”（或者右键单击网页编辑 区，从快捷菜单中选“网页属性”），打开“页面属性”对话 框的“常规”选项卡，如图9-14所示。 3) 在“标题”栏中填入标题，如“ASP基础”。在IE浏览器 的标题中可以看到效果。在设计阶段控件脚本项的“平台”栏 中选择“服务器（ASP）”、在“服务器”栏选择“VBScript” 脚本语言、在“客户端”选择“JavaScritp”脚本语言。 4) 单击“背景”选项卡，选择“背景”、“文本”、“超链 接”等属性，如图9-15所示。 5) 单击“边距”选项卡，选中“指定上边距”和“指定左边 距”，值为0，如图9-16所示。

点击此处输入 相关文本内容
标题添加
点击此处输入相 关文本内容
电脑基础·实例·上机系列丛
点击此处输入 相关文本内容
清华大学出版社
中文版Dreamweaver +Flash+Photoshop网页制作三合一教程
学习目标
➢Dreamweaver 8是一款功能强大的网页编辑软 件，它以其直观的图形界面大大简化了网页 的设计和编辑。在具体学习使用 Dreamweaver之前，首先应该掌握对网页文 档操作的一些基础知识，如网页文档的创建、 打开、预览和保存以及页面属性的基本设置 等。另外，读者对于Dreamweaver 8的工作界 面也应该有所了解，而站点的定义和本地站 点的创建则需要熟练掌握，为以后的学习打 下一个良好的基础。
电脑基础·实例·上机系列丛
清华大学出版社
中文版Dreamweaver +Flash+Photoshop网页制作三合一教程
Dreamweaver 8的工作界面
➢ Dreamweaver 8的工作界面是由标题栏、菜单栏、插入 面板、工具栏、文档窗口、状态栏、“属性”面板和 面板组等组成。 ➢ 标题栏 ➢ 菜单栏 ➢ 插入面板 ➢ 工具栏 ➢ 文档窗口 ➢ 状态栏 ➢ “属性”面板 ➢ 面板组
电脑基础·实例·上机系列丛
清华大学出版社
中文版Dreamweaver +Flash+Photoshop网页制作三合一教程
Flash动画
➢Flash动画是近几年在网页中比较流行的 动画格式，由于Flash是矢量动画，一般 体积比较小，适合在互联网中传输，因 此在网页中的应用也屡见不鲜。在网页 中通过使用Flash动画可以使页面更具动 感和趣味性，从而带动浏览者浏览页面 的兴趣。