网页设计实例教程陈旭东孙永芳崔为花张晓诺02章节.pptVIP

本章内容 2.1 网页的基本构成元素 2.2 文本的输入和设置 2.3 图像的插入和设置 2.4 超级链接的建立和设置 2.5 表格的使用和设置 2.6 页面中表单的运用 2.1 网页的基本构成元素 网页由一些基本元素构成，下面介绍这些基本元素。 1. 文本 网页中的信息主要以文本为主。在网页中可以通过字体、大小、颜色、底纹、边框等选项修饰文本。这里指的文字并不包括图像中的文字，那是图形化了文字。对文字的编排建议参考一些优秀的网站或杂志。 2. 图像 图像在网页中起着重要作用，可以丰富网页的内容，增强网页的美感和表现力，使网页上的内容更具有可读性。网络上最流行的图像格式有JPEG和GIF两种。其中，JPEG格式使用24位真彩色，适合用于照片图像；GIF格式使用8位颜色，只能支持256色，但体积很小，并能制作GIF动画。 3. 超级链接 超级链接是网站的灵魂，是网页之间跳转的纽带。超级链接可以指向本站内的页面，也可以指向其他站点的页面。它把全世界的网站连接成一个信息的海洋。超级链接可以建立在文字上，也可以建立在图像上，用鼠标单击，就可跳转到指向的页面。 2.1 网页的基本构成元素 4. 表格 表格可以有效的控制页面内容的位置，可以用来控制页面的布局，也可以控制页面排版。 5. 表单 表单本身并不显示，用来容纳表单控件，如文本框，按钮等等。用户在表单控件内输入信息后，可以提交到网站。网站服务器端要有相应的程序来接收用户信息。 6. Flash动画 和GIF动画不同，GIF动画只是多帧的图像。Flash动画是真正的矢量动画，能支持缩放、能播放声音、实现在线视频，还能通过脚本机制和用户交互，响应用户的操作。现在有不少专业制作Flash的网站。 7. 多媒体 多媒体不是各种信息媒体的简单复合，它是把文本、图形、图像、动画、声音、视频等多种信息类型的综合，能支持完成一系列的交互式操作。 2.2 文本的输入和设置 2.2.1 输入文本 2.2.2 文本的调整和属性设置 2.2 文本的输入和设置 文本是网页上最多，最基本的信息表达形式。文本的编辑、设置是网页设计的基本操作。Dreamweaver CS4是一款所见即所得的网页设计工具，它提供了十分强大的文本编辑功能，可以很方便的进行文本的输入和设置等操作。 2.2.1 输入文本 2.2.2 文本的调整和属性设置 2.2.1 输入文本 1．普通文本输入 输入普通文本的方法是将光标放到需要添加文本的位置，直接输入文本，或者从其他文档中复制文本内容到预定的位置，通过菜单使用“编辑—粘贴”命令即可，如图2-1所示。 2.2.1 输入文本 2．特殊符号输入 首先思考一个问题，如果在网页中想输入一串空格该怎么办？是不是按几下空格键就可以了呢？事实是无论我们按多少次空格键，页面上只能显示一个空格。那么，应该怎么输入呢？ 在HTML中，连续空格是使用特殊编码来实现的，这里我们使用Dreamweaver提供的工具来进行特殊字符编码的输入。在Dreamweaver CS4中，面板的显示很灵活，可以停靠在界面边框上，也可以以工具栏的样式显示。如果还没打开插入面板，可以使用菜单命令“窗口—插入”打开插入面板。如图2-2所示，是当插入面板向上停靠时的样式。 如果是第一次插入不换行空格，Dreamweaver会弹出一个提示框对话框，勾选上“以后不再提示”选项，可以确保在以后的操作中不再出现该对话框，如图2-3所示。 表2-1 常用特殊字符编码表 2.2.2 文本的调整和属性设置 1．文本的换行方式 在页面上编辑文本时，有两种换行方式，一种是按下回车（Enter）键，文本换行并分段。段落之间会有一个空行的距离，产生段落的效果。令一种换行方式是使用组合键（Shift + Enter），文本换行但不分段，上下两行不会产生空行距离。分别使用两种方式换行后，在文档工具栏上选“代码”标签，查看生成的HTML代码，结果如下： 按Enter键： 插入p/p标签 按Shift +Enter键： 插入br / 2.2.2 文本的调整和属性设置 2．文本的属性设置 对于输入的文本，通过属性面板可以很方便的修改其样式。如图2-4所示，选中“Dreamweaver”后，通过属性面板更改字体颜色。 2.3 图像的插入和设置 2.3.1 插入图像对象 2.3.2 图像属性的调整和设置 2.3.3 图像作为页面背景 2.3 图像的插入和设置 网络上最流行的图像格式有GIF和JPEG两种。其中，GIF只能支持256色，却能提供良好的、损失极少的压缩比，一般GIF图片文件的体积都很小。另外，使