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

《网页设计与制作》课程讲义实验学时部分 实验项目一用HTML制作简单网页 授课学时：2 授课内容： 教师提供简单网页的范例，学生根据范例网页的结构和形式，完成简单html页面 的制作。包括冇表格、文字、超级链接、图像、背景音乐元素。 基本要求： 掌握IITML文档的基木结构、标记和标记屈性的概念及作用；学会使用文木编辑软 件建立和编辑HTML文档的方法；能够使用标记在网页屮插入和编辑基木的网页元 素；能够利用表格标记建立和编辑表格，学会在表格中使用其他网页元素。 重点与难点： 重点：使用标记在网页中插入和编辑基本的网页元索； 难点：建立和编辑表格，学会在表格中使用其他网页元素。 一、 案例导入：西部旅游网 该网诂实例包含了若干个网页，在网页中添加文本、插入图像、建立超链接，涉及到的知识点 有以下儿点： 页面属性的设宜及文本的修饰； 插入图像，插入图像对象实现特效； 多个网页之间建立超链接。 二、 页面属性的设置 选择“修改”菜单I “页而属性”命令，弹出“页面属性”对话框。设置和应的参数： 选择“外观”选项卡，设置页面字体为默认字体、大小为12像索，字体颜色为深灰色(#cccccc), 页边距均为Oo 选择“标题/编码”选项卡，在标题框输入：西部旅游网，网页在浏览吋，网页标题会出现在 浏览器的标题栏中。 选择“跟踪图像”选项卡，单击跟踪图像框右侧的“浏览”按钮，选择图片文件，拖动透明度 滑块来设置跟踪图像的透明度。 最后单击“确定”按钮，完成“页而属性”设置。 三、 文本的修饰 操作文本是最基本的网页制作技能，例如：字体的修饰、段落的对齐方式等。 1、输入文本 在网页中输入文本，可岂接输入，或在其它应用程序中复制文本，然后切换到Dreamweaver 的文档窗口中，粘贴。下而就文木屮的其它情况加以说明。 输入特殊字符 单击“插入”栏丨“文木”选项丨某个“特殊字符”按钮。 2、 插入水平线 在网页中插入一条水平线，可以将网页元素分隔开，看起來整齐、清晰。单击“插入”栏丨“HTML” 选项I “水平线”按钮。选中水平线，可在“属性”面板中设置水平线的属性：水平线的鬲度、宽 度、是否有阴影等。 3、 文本特殊格式：上标和下标 4、 文本属性的设置 文本属性的设置可通过“属性”面板或“文本”菜单来设置，下面以在“属性”面板中设置文 本属性为例进行讲解。设置文本大小、设置字体样式、设置字体、设置文本颜色。 5、 段落格式的设置 设置标题与段落、设迸段落对齐方式。 6、 列表格式的设置 列表是比较常见的一种文本排版格式，它常用來格式化网页中包含逻辑关系的文木信息。列表 格式分为编号列表和项冃列表。 7、 滚动文本 在网页中如何让文本或图片自动滚动，并且当鼠标经过吋，文本会停下来，鼠标移开吋继续滚 动呢？设置方法如下： 选中文本,选择“插入”菜单丨“标签”命令,弹出“标签选择器”对话框,选择html标签, 单击marquee,再单击“插入”按钮。切换到代码视图：査看代码: marquee滚动的文本段落/marquee 四、设置超级链接 超链接是组成网站的基本元素，通过超链接将多个网页组成一个网站，浏览者通过超链接选择 阅读路径。 1、 URL地址 超链接是通过URL （统一资源定位器）来定位目标信息的。URL包括4部分：网络协议、域名 或TP地址、路径和文件名。URL地址分为绝对URL和相对URLo 2、 超链接的分类 超链接的分类有很多种，按链接目标的不同，超链接分为：页而链接、锚记链接、电子邮件链 接，按链接单击对像的不同，超链接分为：文字链接、图像链接、图像映射等。 ? 页面链接 页面链接是指链接忖标是其它网页或文件，浏览者单击超链接时将跳转到相应的网页或显示相 应的文件。 ?锚记链接 为了方便浏览者浏览篇幅较长的网页，可利用锚记链接实现一个页面Z间的快速跳转。 ?空链接 空链接一般默认指向当前页面，并不会打开新的网页文件。此种链接并不常用，一般会和 Javascript脚本语言配合使用，以达到一些特殊的网页特效。 ?电子邮件链接 电子邮件链接是指当浏览者单击超链接时，系统会启动客户端电子邮件程序（例如：outlook Express）,并打开新邮件窗口，使访问者能方便地撰写电了邮件。链接”对话框 3、选择链接目标 在设置好链接文件后，还应该选择打开链接文件的目标，即打开链接文件的浏览器窗口。设置 方法：单击“属性”而板的“目标”下拉列表，选择某项参数。 具体参数如下： .blank：表示在新的浏览器窗口打开链接文件； _self：表示在当前窗口打开链接文件，默认状态； .parent：表示在包含框架结构的上一级浏览器窗口打开链接文件； _top：删除框架结构，在整个浏览器窗口打开链接文件。 五、使用图像 图像是网页屮非常重要的元素，