网页设计和制作32课时完整实验讲义.doc

《网页设计与制作》课程讲义 实验学时部分 实验项目一 用HTML制作简单网页 授课学时：2 授课内容： 教师提供简单网页的范例，学生根据范例网页的结构和形式，完成简单html页面的制作。包括有表格、文字、超级链接、图像、背景音乐元素。 基本要求： 掌握HTML文档的基本结构、标记和标记属性的概念及作用；学会使用文本编辑软件建立和编辑HTML文档的方法；能够使用标记在网页中插入和编辑基本的网页元素；能够利用表格标记建立和编辑表格，学会在表格中使用其他网页元素。 重点与难点： 重点：使用标记在网页中插入和编辑基本的网页元素； 难点：建立和编辑表格，学会在表格中使用其他网页元素。 一、案例导入：西部旅游网 该网站实例包含了若干个网页，在网页中添加文本、插入图像、建立超链接，涉及到的知识点有以下几点： 页面属性的设置及文本的修饰； 插入图像，插入图像对象实现特效； 多个网页之间建立超链接。 二、页面属性的设置 选择“修改”菜单｜“页面属性”命令，弹出“页面属性”对话框。设置相应的参数： 选择“外观”选项卡，设置页面字体为默认字体、大小为12像素，字体颜色为深灰色（#cccccc），页边距均为0。 选择“标题/编码”选项卡，在标题框输入：西部旅游网，网页在浏览时，网页标题会出现在浏览器的标题栏中。 选择“跟踪图像”选项卡，单击跟踪图像框右侧的“浏览”按钮，选择图片文件，拖动透明度滑块来设置跟踪图像的透明度。 最后单击“确定”按钮，完成“页面属性”设置。 三、文本的修饰 操作文本是最基本的网页制作技能，例如：字体的修饰、段落的对齐方式等。 １、输入文本 在网页中输入文本，可直接输入，或在其它应用程序中复制文本，然后切换到Dreamweaver的文档窗口中，粘贴。下面就文本中的其它情况加以说明。 输入特殊字符 单击“插入”栏｜“文本”选项｜ 某个“特殊字符”按钮。 2、插入水平线 在网页中插入一条水平线，可以将网页元素分隔开，看起来整齐、清晰。单击“插入”栏｜“HTML”选项｜“水平线”按钮。选中水平线，可在“属性”面板中设置水平线的属性：水平线的高度、宽度、是否有阴影等。 3、文本特殊格式：上标和下标 4、文本属性的设置 文本属性的设置可通过“属性”面板或“文本”菜单来设置，下面以在“属性”面板中设置文本属性为例进行讲解。设置文本大小、设置字体样式、设置字体、设置文本颜色。 5、段落格式的设置 设置标题与段落、设置段落对齐方式。 6、列表格式的设置 列表是比较常见的一种文本排版格式，它常用来格式化网页中包含逻辑关系的文本信息。列表格式分为编号列表和项目列表。 7、滚动文本 在网页中如何让文本或图片自动滚动，并且当鼠标经过时，文本会停下来，鼠标移开时继续滚动呢？设置方法如下： 选中文本，选择“插入”菜单｜“标签”命令，弹出“标签选择器”对话框，选择html标签，单击“marquee”，再单击“插入”按钮。切换到代码视图：查看代码： marquee滚动的文本段落/marquee 四、设置超级链接图像256色，为无损压缩，有透明处理的功能，支持动画效果。 Jpg：联合图像专家组，有较高的压缩比，属有损压缩，要选择合适的压缩品质，支持真色彩。 Png：可移植网络图形，是专门针对Web开发的无损压缩图像，支持真色彩和透明处理。 1、插入图像 插入图像的方法有二种： 方法一：光标放在要插入图像的位置，选择“插入”菜单｜“图像”命令。 方法二：单击“插入”栏｜“常用”选项｜“图像”按钮。 弹出“选择图像源文件”对话框，选择图像文件，单击“确定”按钮。 2、设置图像属性 选中图像，在“属性”面板中设置图像的属性。例如：图像的高度、宽度、边框、周围的空白及图像的对齐方式等属性。 3、制作图像映射 图像映射是指在一幅图像中指定若干个区域，这些区域被称为热点，每一个区域可指定到不同的超链接，当单击不同的区域可以跳转到相应的页面。图像映射最常用于电子地图、页面导航图、页面导航条等。 上 机 实 训 背景知识 　　根据本章所学的文本编辑、图像及图像对象的插入、网站相册的创建、超链接的设置等知识进行网站的创建。 实训准备工作 　　将文本素材和图像素材准备好，发送到学生主机上，以供学生参考使用。 实训要求 创建一个以篮球为话题的网站，要求如下： （1）编辑网站首页，效果图如图所示，包括有图像映射、鼠标经过图像、导航条。 （2）编辑其它内容网页并添加超链接，如图所示，其它页面中包括有图像和文本等，有一个网页中是明星的相册。 图 篮球俱乐部首页 课时安排：4课时，每一项实训要求为2课时 实训指导 网站首页制作过程 步骤1　启动Dreamweaver，定义本地站点，新建一