第5章网页设计与制作课件

课件

l1

第5章 制作一个新网页 前面已经建好了一个站点。接下来的任务就是开始制作一个个 网页了。 制作一个 包括文字、图片、动画和影像等元 素的使用。

新网页学会如何插

入和编排这些元素，为后续的 网页制作打下基 础。

真正进行网页制作的第 一步就是新建一个网页。 而文字是网页的最基本 元素，也是网页的灵魂。

课件

幻灯片 1 l1 lyc 2008/3/24 深圳职业技术学院软件工程系 李云程制作lyc, 2008-3-24

课件

5.1 网页创建与文 字输入 网页创建与文→字输入

案例新建网页并 输入文字

制作要求： 制作要求 首先创建一个新网页，然后在网页中直接输入一些文字和从其 它文件中粘贴一段文字。 制作步骤： 制作步骤 1.新建网页 两种方法： 菜单文件中生成静态网页 从模板中生成

课件

5.1 网页创建与文 字输入 网页创建与文→字输入 直接输入文字。 若要另起一个段落，则按回车键。 如果只想换行，按Shift+Enter组合键。 如果想输入空格，必须在中文全角状 态下。 也可从其它文件中粘贴文字。 3.保存网页

2.输入文字

4.预览网页

按F12键可在浏览器中预览网页效果 编辑浏览器列表

课件

5.2 文字属性设置

文字是构成网站的最基本的信息资源，除了 准备好适当的文字内容 以外，对文字修饰也 学习如何对文字的属性 进行设置。

是增加网站吸引力 的重要环节，文字效果好能给人赏心悦目的 感觉。

案例文字属性 的设置

制作要求 本例要求对第一行文字设置 为Heading2格式，第二行文字 设为方正舒体，第三行文字设 置为黑体，第四行文字设为楷 体，最后三行文字设为5号字 ，所有文字颜色为蓝色。

课件

5.2 文字属性设置 设置文字标题 选中文字：小区焦点，单击属性 面板中的格式选择框，在弹出的 下拉菜单中选择Heading2。 设置文字字体 首先选中要设置的文字，单击属 性面板中的字体选择框，在弹出 的下拉菜单中选择相应字体。 如果字体选择框中没有合适的字体，那么可选择Edit Font List编 辑字体列表，添加字体。 设置文字字号 选中文字，然后单击属性面板上 Size大小下拉框选择。单击调色 板设置颜色。

制作步骤

课件

5.3 文字排列方法

文字的排列对网页起到了美化的作用制作要求 : 设置文字为居中对齐，增加项目 符号，设置段落缩进。

案例

文字段落设置

制作步骤

1.打开网页 2.设置居中/左右对齐 3.设置项目符号 4.设置段落缩进

课件

5.4 图片的插入与设置

图片也是网页中普遍使用的元素。可以 说，没有图片的网页 是不可想象的。

学会插入一张图片，并设置某些基 本属性，如图片大小、加框、文字 说明等，并且给网页增加背景图像。 制作

要求 : 要求图片插在文字“小区焦点”的 左边，在图片外面加一个框，图片 大小设为宽59像素，高121像素，图 片与文字的水平距离为35像素，最 后给网页加一张背景图像。 1.插入图片

案例插入图片并设置属性

制作步骤

2.设置设置图片属性 3.设置页面背景图象

课件

5.5 文字与图片混排 插入图片以后，如 何摆放它们就成了 一个重要问题。特别 是与文字一起排列， 排列合理可以增加网 页的美观效果。

学会进行图文混排 。

案例文字与图片的混排效 果 制作步骤

制作要求 : 把图片设置成右对齐，即图片在文 字的右面。 1.在文字中插入图片 2.设置排列方式 ，左右对齐可以 有多行文字。

课件

5.6 动画与影像的使用 在网页中含有动画 和多媒体影像是经 常碰到的，制作一个 充满动感的网页也是 大家所追求的。 学习在网页中插入Flash动画、影 像和声音。

案例插入动画和影像

制作要求 : 在网页中插入一个Flash动画和一 段影像。 1.将鼠标定位在想插入的地方

制作步骤

2.单击动画插入工具和插件工具插入文件 并设置其属性。 3.保存文件，然后按F12,可看到播放效果。

课件

如何插入透明FLASH在<object>标签中加入：<PARAM NAME=wmode value=transparent>属性 代码即可，要注意的是后面的图片要以 背景图片的方式加入。