网页制作第二讲.
合集下载
2.1网页的制作ppt课件
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）：即通常所 说的“花”体，由于此类字体拘泥于形式的装饰意味，阅读 时较为费力，易读性较差，只适合于标题或较短文本，类似 于中文的美术体和手写体。
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）：即通常所 说的“花”体，由于此类字体拘泥于形式的装饰意味，阅读 时较为费力，易读性较差，只适合于标题或较短文本，类似 于中文的美术体和手写体。
第二讲 网页制作PPT课件
选择多个文件时按下〈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所示。
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所示。
网页制作教程第02课PPT课件
点击此处输入 相关文本内容
标题添加
点击此处输入相 关文本内容
电脑基础·实例·上机系列丛
点击此处输入 相关文本内容
清华大学出版社
中文版Dreamweaver +Flash+Photoshop网页制作三合一教程
学习目标
➢Dreamweaver 8是一款功能强大的网页编辑软 件，它以其直观的图形界面大大简化了网页 的设计和编辑。在具体学习使用 Dreamweaver之前，首先应该掌握对网页文 档操作的一些基础知识，如网页文档的创建、 打开、预览和保存以及页面属性的基本设置 等。另外，读者对于Dreamweaver 8的工作界 面也应该有所了解，而站点的定义和本地站 点的创建则需要熟练掌握，为以后的学习打 下一个良好的基础。
电脑基础·实例·上机系列丛
清华大学出版社
中文版Dreamweaver +Flash+Photoshop网页制作三合一教程
Dreamweaver 8的工作界面
➢ Dreamweaver 8的工作界面是由标题栏、菜单栏、插入 面板、工具栏、文档窗口、状态栏、“属性”面板和 面板组等组成。 ➢ 标题栏 ➢ 菜单栏 ➢ 插入面板 ➢ 工具栏 ➢ 文档窗口 ➢ 状态栏 ➢ “属性”面板 ➢ 面板组
电脑基础·实例·上机系列丛
清华大学出版社
中文版Dreamweaver +Flash+Photoshop网页制作三合一教程
Flash动画
➢Flash动画是近几年在网页中比较流行的 动画格式，由于Flash是矢量动画，一般 体积比较小，适合在互联网中传输，因 此在网页中的应用也屡见不鲜。在网页 中通过使用Flash动画可以使页面更具动 感和趣味性，从而带动浏览者浏览页面 的兴趣。
网页制作课件ch2
中 选择“透明度与色 域”，也可以选择 “编辑”->“首选 项”->“透明度与色 域”，这样打开了 “首选项”对话框 的“透明度与色域” 选项。
11
第2章 初步认识Photoshop CS2
2.4 设置Photoshop CS2常用预置参数选项
2.4.5 “Plug-Ins与暂存盘”选项
2
第2章 初步认识Photoshop CS2
2.1 认识Photoshop CS2的工作区
2.1.1 关于集成的 Photoshop CS2 工作区
菜单栏
选项栏
工具栏
调板
图像文件窗口
图像状态栏
3
第2章 初步认识Photoshop CS2
2.1 认识Photoshop CS2的工作区
2.1.2 存储 Photoshop CS2.0 工作区
5
第2章 初步认识Photoshop CS2
2.3 认识Photoshop CS2的调板
“导航器调板”是用来显示图像文件窗口中，图像所处的位 置和比例状态。 “信息”调板用于显示鼠标所指向位置的RGB值、CMYK的 色彩系数、鼠标坐标以及物体大小、文档大小等相关信息。 “直方图”调板用于显示当前图像的直方图，直方图是灰度 级的函数，它表示图象中具有每种灰度级的象素的个数，反 映图像中每种灰度出现的频率。 “颜色”调板可以将颜色进行混合，然后再进行选择。 “色板”调板可以让我们很快的选取前景色或背景色，还可 以将经常用到的颜色保存在这里，以便随时使用。 “样式”调板是用来快速定义图形的各式属性的，并将预设 的效果应用到图像中。
第2章 初步认识 Photoshop CS2
1
第2章 初步认识Photoshop CS2
11
第2章 初步认识Photoshop CS2
2.4 设置Photoshop CS2常用预置参数选项
2.4.5 “Plug-Ins与暂存盘”选项
2
第2章 初步认识Photoshop CS2
2.1 认识Photoshop CS2的工作区
2.1.1 关于集成的 Photoshop CS2 工作区
菜单栏
选项栏
工具栏
调板
图像文件窗口
图像状态栏
3
第2章 初步认识Photoshop CS2
2.1 认识Photoshop CS2的工作区
2.1.2 存储 Photoshop CS2.0 工作区
5
第2章 初步认识Photoshop CS2
2.3 认识Photoshop CS2的调板
“导航器调板”是用来显示图像文件窗口中，图像所处的位 置和比例状态。 “信息”调板用于显示鼠标所指向位置的RGB值、CMYK的 色彩系数、鼠标坐标以及物体大小、文档大小等相关信息。 “直方图”调板用于显示当前图像的直方图，直方图是灰度 级的函数，它表示图象中具有每种灰度级的象素的个数，反 映图像中每种灰度出现的频率。 “颜色”调板可以将颜色进行混合，然后再进行选择。 “色板”调板可以让我们很快的选取前景色或背景色，还可 以将经常用到的颜色保存在这里，以便随时使用。 “样式”调板是用来快速定义图形的各式属性的，并将预设 的效果应用到图像中。
第2章 初步认识 Photoshop CS2
1
第2章 初步认识Photoshop CS2
网页设计与网站建设PPT课件
2. 两边做成渐变式柱状或花边式。 3. 在CSS面板中新建CSS样式，选中重定
义HTML标签和仅对该文档，选择Body。 4. 修改背景图形及有关设置。 5. 在1024 ×768下浏览效果
返回
4.4 单元格背景图形处理技巧
1. 选中单元格中的图片，在属性面板中复 制路径。
2. 删除图片引用。 3. 在属性面板中的背景图像框中粘贴路径。 4. 原单元格中即可放入其它网页元素，如
文字、动画等。
返回
4.5 单元格中嵌套表格的插入
1. 选中单元格中的图片，在属性面板中记 下高度（需要时可记下宽度）。
2. 删除图片及其引用。 3. 用工具栏中插入表格工具插入嵌套表格。 4. 设置表格有关属性，如高度，边框颜色
等。
返回
4.6 本讲上机实验要点
1. 正确导出网页及建立站点结构。 2. 设置网页居中及边界，编码等属性 3. 为网页建立柱状和花边背景，并在高分辨
返回
4.2 页面居中及设置处理
1. 打开DW，建立站点，注意只需用高级 选项选择根文件夹即可。
2. 点击修改菜单→页面属性，设置边界为 0及编码为简体中文。
3. 在标签区找到Table，点击后在属性面 板设置居中。
返回
4.3 网页背景处理
1. 用Fireworks 制作背景用图形，大小 1000×*，
返回
1.5 位图处理
1. 位图导入：主要是jpg、gif图形 2. 位图选取：使用选取工具加羽化、反选、
等 3. 效果处理：透明度，边缘羽化等效果处理。 4. 位图的缩放处理。 5. 举例：广告区背景制作并进行相应切片等
返回
1.６ 本讲上机实验要点
1. 页面大小及背景设置。 2. 辅助线及对象对齐练习 3. Logo标志制作(含弧形文字处理) 4. 动画或广告区背景图形制作。 5. 位图的效果处理。 6. 公章图形等制作。
义HTML标签和仅对该文档，选择Body。 4. 修改背景图形及有关设置。 5. 在1024 ×768下浏览效果
返回
4.4 单元格背景图形处理技巧
1. 选中单元格中的图片，在属性面板中复 制路径。
2. 删除图片引用。 3. 在属性面板中的背景图像框中粘贴路径。 4. 原单元格中即可放入其它网页元素，如
文字、动画等。
返回
4.5 单元格中嵌套表格的插入
1. 选中单元格中的图片，在属性面板中记 下高度（需要时可记下宽度）。
2. 删除图片及其引用。 3. 用工具栏中插入表格工具插入嵌套表格。 4. 设置表格有关属性，如高度，边框颜色
等。
返回
4.6 本讲上机实验要点
1. 正确导出网页及建立站点结构。 2. 设置网页居中及边界，编码等属性 3. 为网页建立柱状和花边背景，并在高分辨
返回
4.2 页面居中及设置处理
1. 打开DW，建立站点，注意只需用高级 选项选择根文件夹即可。
2. 点击修改菜单→页面属性，设置边界为 0及编码为简体中文。
3. 在标签区找到Table，点击后在属性面 板设置居中。
返回
4.3 网页背景处理
1. 用Fireworks 制作背景用图形，大小 1000×*，
返回
1.5 位图处理
1. 位图导入：主要是jpg、gif图形 2. 位图选取：使用选取工具加羽化、反选、
等 3. 效果处理：透明度，边缘羽化等效果处理。 4. 位图的缩放处理。 5. 举例：广告区背景制作并进行相应切片等
返回
1.６ 本讲上机实验要点
1. 页面大小及背景设置。 2. 辅助线及对象对齐练习 3. Logo标志制作(含弧形文字处理) 4. 动画或广告区背景图形制作。 5. 位图的效果处理。 6. 公章图形等制作。
网页制作课件第2章
面文件
5.3.1、选择页面文件 5.3.2、打开页面文件 5.3.3、新建页面文件 5.3.4、更改页面标题
5.3.1、选择页面文件
在站点地图中的某个页面文件上单击鼠标即可选择该文件。 按住【Shift】键的同时单击需要选取的文件，可选择多个连 续的页面文件。 按住【Ctrl】键的同时单击需要选取的文件，可选择多个不 连续的页面文件。
1.1.1、本地站点 1.1.2、远程站点 1.1.3、测试站点
1.2、规划站点结构
规划站点结构是设计站点的必要前提，其操作是将 不同的文件分类存放在文件夹中以便于设计者管理。 合理地组织站点结构，可提高工作效率，加快对站点 的设计。
3、创建本地站点
3.1、新建站点 3.2、新建文件夹 3.3、新建网页文件
5.3.2、打开页面文件
在页面文件上双击鼠标即可打开该文件。 在选择页面之后，选择[文件] [打开]菜单命令打开页面。 选择页面后单击鼠标右键，在弹出的快捷菜单中选择“打开” 命令可打开页面。
5.3.3、新建页面文件
在建立好站点地图之后，如果还需要在其中添加新的 网页文件，可以在站点地图中新建一个页面文件。
5.3.4、更改页面标题
在站点地图中可对页面标题进行更改，以方便绝对站点的管理。
6、页面设置
当站点建立好之后，就可以进行具体的网页编辑操作了， 但在编辑网页之前，还需要对页面进行一些简单的属性设置 以方便以后的工作。
3.1、新建站点
通过[站点] [新建站点]菜单命令或“文件”面板新建站点 。
新建站点
3.1、新建站点
3.2、新建文件夹
建立好站点后就可以在站点中新建文件夹，该文件夹主 要用来存储这个网站中用到的网页元素，如图片、音乐等。
5.3.1、选择页面文件 5.3.2、打开页面文件 5.3.3、新建页面文件 5.3.4、更改页面标题
5.3.1、选择页面文件
在站点地图中的某个页面文件上单击鼠标即可选择该文件。 按住【Shift】键的同时单击需要选取的文件，可选择多个连 续的页面文件。 按住【Ctrl】键的同时单击需要选取的文件，可选择多个不 连续的页面文件。
1.1.1、本地站点 1.1.2、远程站点 1.1.3、测试站点
1.2、规划站点结构
规划站点结构是设计站点的必要前提，其操作是将 不同的文件分类存放在文件夹中以便于设计者管理。 合理地组织站点结构，可提高工作效率，加快对站点 的设计。
3、创建本地站点
3.1、新建站点 3.2、新建文件夹 3.3、新建网页文件
5.3.2、打开页面文件
在页面文件上双击鼠标即可打开该文件。 在选择页面之后，选择[文件] [打开]菜单命令打开页面。 选择页面后单击鼠标右键，在弹出的快捷菜单中选择“打开” 命令可打开页面。
5.3.3、新建页面文件
在建立好站点地图之后，如果还需要在其中添加新的 网页文件，可以在站点地图中新建一个页面文件。
5.3.4、更改页面标题
在站点地图中可对页面标题进行更改，以方便绝对站点的管理。
6、页面设置
当站点建立好之后，就可以进行具体的网页编辑操作了， 但在编辑网页之前，还需要对页面进行一些简单的属性设置 以方便以后的工作。
3.1、新建站点
通过[站点] [新建站点]菜单命令或“文件”面板新建站点 。
新建站点
3.1、新建站点
3.2、新建文件夹
建立好站点后就可以在站点中新建文件夹，该文件夹主 要用来存储这个网站中用到的网页元素，如图片、音乐等。
动态网页制作02HTML基础
2.3 添加各种网页元素
4. 设置文字和图片链接 href=链接 链接目标路径 target=？ </a> <a href=链接目标路径 target=？>…</a> </ href=a.htm>文字</a> ①<a href=a.htm>文字</a> target=_blank>文字 文字</a> <a href=a.htm target=_blank>文字</a> ②<a href=a.htm target=_blank><img …></a> ></a> 添加了超链接的图片周围会出现一个蓝色边框， 添加了超链接的图片周围会出现一个蓝色边框， 这是没设置border属性的缘故 没设置border 这是没设置border属性的缘故
思考练习： 思考练习： 添加视频格式是否跟添加声音一样？ 添加视频格式是否跟添加声音一样？ Flash的标记使用什么 的标记使用什么？ Flash的标记使用什么？
动态网页制作
2.3 添加各种网页元素
作业part2: 作业part2: 1.通用的视频播放器或者某一播放器 通用的视频播放器或者某一播放器（ 1.通用的视频播放器或者某一播放器（realplayer 或者mediaplayer 的代码是怎样的？ mediaplayer） 或者mediaplayer）的代码是怎样的？ 2.在网页中如何插入FLV视频 通用的FLV 在网页中如何插入FLV视频? FLV播放器代 2.在网页中如何插入FLV视频?通用的FLV播放器代 码是怎样的？ 码是怎样的？ 3.有FLV视频的网页在本机显示很正常 视频的网页在本机显示很正常， 3.有FLV视频的网页在本机显示很正常，但是放到 网上则不一定能够显示，原因是什么？ 网上则不一定能够显示，原因是什么？
第2章 网页设计与制作PPT课件
《网页设计与制作》 19
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
网页制作 第2课
清华大学出版社
Dreamweaver中文版网页制作教程
2.2 创建与管理站点
站点是网页文档存放的地方,也是管理 网页文档的重要场所.做好准备工作后 便可进行站点的创建.
电脑基础实例上机系列丛书
清华大学出版社
Dreamweaver中文版网页制作教程
2.2 创建与管理站点
2.2.1 创建站点 2.2.2 管理站点 2.2.3 应用举例——创建tianshu站点
本章要点
规划站点 创建站点 管理站点 页面的创建,保存及属性设置
电脑基础实例上机系列丛书
清华大学出版社
Dreamweaver中文版网页制作教程
2.1
规划站点
进行网页制作之前需创建站点,利用站 点的管理功能可对站点中的文件进行管 理或测试.创建站点前首先应规划站点, 再通过Dreamweaver MX 2004的站点管 理功能创建站点的框架,包括主页,分 支页面和相应的文件夹等.
电脑基础实例上机系列丛书 清华大学出版社
Dreamweaver中文版网页制作教程
2.1.3 创建导航草图
做好了站点的规划后,就可根据规划制 作出一个导航草图便于理清思路,制作 时可直接在纸上粗略绘出导航草图.
电脑基础实例上机系列丛书
清华大学出版社
Dreamweaver中文版网页制作教程
创建导航草图
Dreamweaver中文版网页制作教程
学习目标
站点是管理网页文档的场所,本章将介 绍站点的规划,创建以及对站点的管理 和操作,让读者能够通过学习熟练操作 站点,利用站点做好网页文档的管理. 此外本章还将介绍网页制作的一些基本 操作.
电脑基础实例上机系列丛书 清华大学出版社
Dreamweaver中文版网页制作教程
网页制作入门到精通 第二篇
安徽农业大学网络中心
2、新增超级链接网页； 首页新增并设置好以后，接着将以前所画的[网站结 构草图]拿出来，按照所设计的网页超级链接关系，将 所有网页新增完成。 （1）在site window的site map中，新增首页所链接的网 页。 （2）设置新增的链接网页文件名称、网页标题与在 首中可链接到新增网页的超级链接文字（以通知公告为 例演示）； （3）运用上述方法就能轻易将网站中所有网页以及 网页间的超级链接关系一并建立完成；
安徽农业大学网络中心
下面将网站中的网页，按照网页超级链接关系，一 个一个新增起来。 1、新增site map的首页； 步骤： （1）在站点文件查看模式下，新增网页,并命名成 index.htm（在站点文件夹上右键/执行新建文件命令）； （2）接下来将index.htm设置成站点的首页；
第四章 文字与网页属性设置 4.1 输入文字 4.1.1 自动换行的文字 检查好编码方式后，你就可以在网页编辑器区里输 入文字了。 在输入文字时，若一行的长度超过Dreamweaver窗口 的显示范围，则这行文字会自动换到下一行； 4.1.2 用Enter键换段落 在输入文字内容时，只要按下Enter键即可另换一个 段落，而且上一段与下一段之间会自动空一行，以方便 区分。对于html代码来说，就是加入了一个<p>标签
安徽农业大学网络中心
1
2
安徽农业大学网络中心
3.2 建立网站文件结构 首先，请按照[网站结构草图]将需要建立的网页及 文件夹赋予适当名称,并制成一张[网站文件结构表格]。 网页名称确定后，就按照[网站结构草图]上设计的网 页超级链接关系的site map，让所有的网页的超级链接 关系一目了然，有助于减少施工阶段的错误发生。 网站文件命名规则： 1、名称一律使用小写英文，以免造成混淆； 2、不要使用中文名称； 3、名称中不要有空格； 4、名称中不要有标点符号与特殊字符； 5、扩展名使用.htm或者.html。
第2章网页制作基础语言PPT课件
打开的.html文件，这时将直接在默认的浏览器中打开
该.html文件。
第5页/共44页
2.4 段落标记
2.4.1 注释标记<!--...--> 注释标记的格式为： <!-- 注释内容 --> 注释并不局限于一行，长度不受限制。结束标记与开始标
记可以不在一行上。 2.4.2 强制换行和不换行标记<br>、<nobr>...</nobr>
其中属性align用来设置段落文字在网页上的对齐方式： left（左对齐）、center（居中）和right（右对齐）。缺省 时默认为left。
格式中的“|”表示“或者”，即多中选一。
【例2-3】
第7页/共44页
2.4 段落标记
2.4.4 定位标记<div>…</div>
设定文字、图像、表格的摆放位置。当在许多段落中设 置对齐方式时，常使用<div>…</div>标记。定位标记的格 式为：
第6页/共44页
2.4 段落标记
2.4.3 段落标记<p>...</p>
段落标记放在一个段落的头尾，用于定义一个段落。 <p>...</p>标记不但能使后面的文字换到下一行，还可以使 两段之间多一空行，相当于两个<br><br>标记。段落标记 的格式为：
<p align="left|center|right"> 文字 </p> 一个段落标记<p>可以看作是两个<br>标记，即<br><br>。
要用HTML的标记来强制换行、分段。<br>放在一行的末 尾，可以使后面的文字、图片、表格等显示于下一行，而又不 会在行与行之间留下空行，即强制文本换行。强制换行标记的 格式为：
网页制作第2章
图 2-6 格式嵌套示例
2.2 控制文本的显示效果
2.2.1 字体控制标记符 FONT FONT标记符具有3个常用的属性： SIZE 设置字体大小 COLOR 设置字体颜色 FACE 设置字体样式 2.2.1.1 size 属性 字号属性 size 的值可以从1到7，3是默认值 。该属性值也可以用 + 号或 - 号来作为相对 值指定。 <FONT size=+1>S</FONT>HOPPING <FONT size=+1>B</FONT>ASKET
思考:竖分隔线的制作
图 2-2 水平线效果
2.1.3标题标记符 Hn 在 HTML 中，用户可以通过 Hn 标记符来标 识文档中的标题和副标题，其中 n 是1至6的数 字；H1表示最大的标题，H6表示最小的标题 。使用标题样式时，必须使用结束标记符。
以下HTML代码显示了 1 至 6 级标题的效果，<HTML> <HEAD><TITLE>标题效果</TITLE></HEAD> <BODY> <H1>此为一级标题</H1> <H2>此为二级标题</H2> <H3>此为三级标题</H3> <H4>此为四级标题</H4> <H5>此为五级标题</H5> <H6>此为六级标题</H6> <P>此为正常文本</P> </BODY> </HTML>
<P><FONT size="-2">这些文字的字体比正常文本小 2 号</FONT>