网页设计与制作 教学课件 作者 李云程 主编 李亮 周光明 副主编 第5章.pptVIP

第5章 制作一个新网页 5.1 网页创建与文→字输入 5.1 网页创建与文→字输入 5.2 文字属性设置 5.2 文字属性设置 5.3 文字排列方法 5.4 图片的插入与设置 5.5 文字与图片混排 5.6 动画与影像的使用 * * 前面已经建好了一个站点。接下来的任务就是开始制作一个个网页了。 制作一个新网页 包括文字、图片、动画和影像等元素的使用。 学会如何插入和编排这些元素，为后续的网页制作打下基础。 真正进行网页制作的第一步就是新建一个网页。而文字是网页的最基本元素，也是网页的灵魂。 lyc 2008/3/24 深圳职业技术学院软件工程系 李云程制作 制作步骤： 1．新建网页 制作要求： 首先创建一个新网页，然后在网页中直接输入一些文字和从其它文件中粘贴一段文字。 两种方法： 菜单文件中生成静态网页 从模板中生成 案例 新建网页并输入文字 2．输入文字 3．保存网页 直接输入文字。若要另起一个段落，则按回车键。如果只想换行，按Shift+Enter组合键。 4．预览网页 按F12键可在浏览器中预览网页效果 编辑浏览器列表 如果想输入空格，必须在中文全角状态下。 也可从其它文件中粘贴文字。 文字是构成网站的最基本的信息资源，除了准备好适当的文字内容以外，对文字修饰也是增加网站吸引力的重要环节，文字效果好能给人赏心悦目的感觉。 学习如何对文字的属性进行设置。 案例 文字属性的设置 制作要求 本例要求对第一行文字设置为Heading2格式，第二行文字设为方正舒体，第三行文字设置为黑体，第四行文字设为楷体，最后三行文字设为5号字，所有文字颜色为蓝色。 制作步骤 设置文字标题 选中文字：小区焦点，单击属性面板中的格式选择框，在弹出的下拉菜单中选择Heading2。 设置文字字体 首先选中要设置的文字，单击属性面板中的字体选择框，在弹出的下拉菜单中选择相应字体。 如果字体选择框中没有合适的字体，那么可选择Edit Font List编辑字体列表，添加字体。 设置文字字号 选中文字，然后单击属性面板上Size大小下拉框选择。单击调色板设置颜色。 文字的排列对网页起到了美化的作用 案例 文字段落设置 制作要求 : 设置文字为居中对齐，增加项目符号，设置段落缩进。 制作步骤 1．打开网页 2．设置居中/左右对齐 4．设置段落缩进 3．设置项目符号 图片也是网页中普遍使用的元素。可以说，没有图片的网页是不可想象的。 制作要求 : 要求图片插在文字“小区焦点”的左边，在图片外面加一个框，图片大小设为宽59像素，高121像素，图片与文字的水平距离为35像素，最后给网页加一张背景图像。 制作步骤 1．插入图片 2．设置设置图片属性 3．设置页面背景图象 学会插入一张图片，并设置某些基本属性，如图片大小、加框、文字说明等，并且给网页增加背景图像。 案例 插入图片并设置属性 插入图片以后，如何摆放它们就成了一个重要问题。特别是与文字一起排列，排列合理可以增加网页的美观效果。 制作要求 : 把图片设置成右对齐，即图片在文字的右面。 制作步骤 1．在文字中插入图片 2．设置排列方式 ，左右对齐可以有多行文字。 学会进行图文混排 。 案例 文字与图片的混排效果 在网页中含有动画和多媒体影像是经常碰到的，制作一个充满动感的网页也是大家所追求的。 制作要求 : 在网页中插入一个Flash动画和一段影像。 制作步骤 1．将鼠标定位在想插入的地方 2．单击动画插入工具和插件工具插入文件并设置其属性。 学习在网页中插入Flash动画、影像和声音。 案例 插入动画和影像 3.保存文件，然后按F12，可看到播放效果。 *