计算机基础第七章.ppt

* 大学计算机基础第七章 1 第七章 网页设计基础 * 大学计算机基础第七章 2 本章主要内容本章主要内容 4HTML超文本语言基础 4Dreamweaver MX 2004的基本操作 4在网页中使用多媒体对象及表单 4网页版面设计 4站点测试与发布 * 大学计算机基础第七章 3 HTMLHTML语言简介语言简介 网页就是用HTML语言写成的文档，在Internet中的 浏览器就是解释这个文档并将文档内容翻译成我们 可见的页面形式。 HTML是超文本标记语言的缩写(HyperText Mark-up Language),是一种描述文档结构的语言，使用描述 性的标记符(称为标记码)来指明文档的不同内容。 用HTML语言写的页面是普通的文本文档，不含任何 与平台和程序相关的信息，不区分大小写，可被任 何文本编辑器读取。 HTML文档包含两种信息：页面本身的文本；表示页 面元素、结构、格式和其它超文本链接的HTML标签 。 标记码是区分文本各个组成部分的分界符，用来把 HTML文档划分成不同的逻辑部分（或结构），如段 落、标题和表格等。标记码描述了文档的结构，它 向浏览器提供该文档的格式化信息，以传送文档的 外观特征。 * 大学计算机基础第七章 4 HTMLHTML文档结构文档结构 网页标题 HTML文件的正文内容 HTML的标记码是由成对的标记组成，书写格式为： 内容 标记与等是每个HTML文档必须包含的 * 大学计算机基础第七章 5 主要标记码的含义主要标记码的含义 ：通知浏览器该文件含有HTML标记码。 ：文件头，是HTML文件第一部分的起始 。 ：文件名，将显示在浏览器的窗口。 ：是HTML文件的第二部分，也是最大的 部分，它包含了可显示的主题信息。例如：标题 、文字、图形、表格、超级链接等用户可以实际 看到的东西。常用的HTML标记符号及简要说明 * 大学计算机基础第七章 6 HTMLHTML文档中常用标记的使用文档中常用标记的使用 设置标题:每一个网页都应该有一个标题，格式为: 网页标题 “网页标题”中的文字显示在浏览器的标题栏中 添加标题:在HTML中有六种标题，是最大标题 ，是最小标题 例如： 一级标题 二级标题 三级标题 四级标题 * 大学计算机基础第七章 7 HTMLHTML文档中常用标记的使用文档中常用标记的使用 设置正文段落:使用和，中间存放所有的文 字、图像和超级链接等 例如： 第一个段落 第二个段落 如果要强调某个单词，可以使用粗体字标题 或强调标签 例如：访客注意的问题 * 大学计算机基础第七章 8 HTMLHTML文档中常用标记的使用文档中常用标记的使用 设置超级链接：一个超级链接唯一地指向另一个 Web信息页 超级链接由两部分组成：可被显示在Web浏览器 中的超链接文本及图像和用以描述当超级链接被触 发后要链结到何处的URL信息。超链接标记的格式为 : 超级链接文本及图像 超链接文本会被加上一种特殊的颜色和下划线，当 用户鼠标指向超链接时会变成手的形状，属性HREF 表明了超级链接被触发后所指向的URL。 * 大学计算机基础第七章 9 HTMLHTML文档中常用标记的使用文档中常用标记的使用 设置图像： 能被Web浏览器直接解释的图像格式有：GIF格式 ；X位图格式（.XBM文件）；JPEG格式（.JPG、 .JPEG文件） 对图像，可用ALIGN属性定义图与文本行的对齐方 式：TOP、MIDDLE、BOTTOM、LEFT、RIGHT 例如：在网页中插入名为“aa.jpg”的图像，图像 宽度为100个像素，高为120个像素： * 大学计算机基础第七章 10 HTMLHTML文档中常用标记的使用文档中常用标记的使用 声音和视频 声音文件有.WAV、.AU、.SND等 视频文件有.AVI、.MPG等 Web浏览器自身不能解释声音和视频文件 例如： 一段电影. 用户触发这段超级链接后，Web浏览器立即启动 默认的网络视频播放工具程序，如mplayer程序 来播放cc1.avi视频文件。 * 大学计算机基础第七章 11 HTMLHTML文档中常用标记的使用文档中常用标记的使用 表格 表格的表示为：表 格 内 容 定义表格标题： 标题内容 定义表格列： 表格列内容 定义表头资料：表头内容 定义表格内容：表格内容 例如 * 大学计算机基础第七章 12 HTMLHTML文档中常用标记的使用文档中常用标记的使用 表单：用在客户端提供一个人机交互界面，通过表 单可以将用户输入的数据提交给服务器。在服务器一 端，需要由CGI（Common Gateway Interface）语言 编写的程序进行处理。表单的语法如下： 表单的输入域有以下几种： 提交（SUBMIT）：这是每个FROM都有的。在浏览器 中这是一个按钮，表示开始提交信息，激活服务器 端的CGI程序。 文本（TEXT）：这是文本输入域，用户在通过它输 入信息。 单选按钮（RADIO）：类似与Windows中的单选按钮 。 CHECKBOX：多选按钮。 选择列表：SELECTION 例如 * 大学计算机基础第七章 13 DreamweaverDreamweaver MX 2004 MX 2004简介简介 Dreamweaver MX 2004是一款专业的可视化网页编辑 软件，可用于对Web站点、Web页和Web应用程序进行 设计、编码和开发。利用 Dreamweaver 中的可视化 编辑功能，可以快速地创建页面而无需编写任何代 码。 下面将介绍Dreamweaver MX 2004的工作界面、创建 站点、创建文档、在文档中插入文本、格式化文本 、创建超级链接等创建基本网页的操作方法。 * 大学计算机基础第七章 14 DreamweaverDreamweaver MX MX的工作界面的工作界面 * 大学计算机基础第七章 15 DreamweaverDreamweaver MX MX主要功能主要功能 “插入”栏：包含用于将各种类型的“对象”(如 图像、表格和层)插入到文档中的按钮。每个对象都 是一段 HTML 代码，在插入时可设置不同的属性 “文档”工具：包含各种按钮，提供各种“文档” 窗口视图(如“设计”视图和“代码”视图)的选项、 各种查看选项和一些常用操作 “标准”工具栏:包含“文件”和“编辑”菜单中 的一般操作的按钮：“新建”、“打开”、“保存” 、“保存全部”、“剪切”、“复制”、“粘贴”、 “撤消”和“重做” * 大学计算机基础第七章 16 DreamweaverDreamweaver MX MX主要功能主要功能 “文档”窗口:显示当前创建和编辑的文档,有3种 视图方式: “设计”视图：是用于可视化页面布局、可视化 编辑和快速应用程序开发的设计环境 “代码”视图：是用于编写和编辑HTML等语言代 码以及任何其他类型代码的手工编码环境 “代码和设计”视图：可使用户在单个窗口中同 时看到同一文档的“代码”视图和“设计”视图 “属性检查器”:也叫“属性”栏或“属性”面板 ，用于查看和更改所选对象或文本的各种属性。 * 大学计算机基础第七章 17 DreamweaverDreamweaver MX MX主要功能主要功能 标签选择器:位于“文档”窗口底部的状态栏中， 它显示环绕当前选定内容的标签的层次结构。 面板组:是组合在一个标题下面的相关面板的集合 。若要展开一个面板组，请单击组名称左侧的展开 箭头；若要取消停靠一个面板组，请拖动该组标题 栏左边缘的手柄。 “文件”面板:可以管理文件和文件夹，无论它们 属于 Dreamweaver 站点的一部分还是位于远程服务 器上，非常类似于 Windows 资源管理器。 * 大学计算机基础第七章 18 站点站点 站点：一系列通过各种链接关联起来的逻辑上可以 视为一个整体的一些网页，它可以大到整个网站， 也可以小到一个网页。严格地说，站点也是一种文 档的磁盘组织形式，它同样是由文档和文档所在的 文件夹组成。 一般情况下，网站都有一个首页，或者说主页，作 为网站的开始点。首页的作用一般像是一本书的目 录，使访问者能够了解网站的内容。首页的名称一 般是固定的，例如index.htm或default.htm等（具 体名称由Web服务器确定）。 * 大学计算机基础第七章 19 创建站点的步骤创建站点的步骤 选择“站点/管理站点”菜单命令，打开“管理站点” 对话框，在该对话框中单击“新建”按钮，打开“站 点定义”导航页面 输入站点名称 定位到建立的站点文件夹 选择不连接到远程服务器 站点建好后，可以将设计网页需要用的一些素材，如 ：图片、动画、声音文件等拷贝到站点目录下，最好 在站点目录下再建子目录，将各种素材分类存放。 * 大学计算机基础第七章 20 网页文档的基本操作网页文档的基本操作 打开网页文档：执行“文件/打开”菜单命令 保存网页文档：执行“文件/保存”菜单命令 执行“文件/另存为”菜单命令 执行“文件/关闭”菜单命令 新建网页文档：执行“文件/新建”菜单命令 * 大学计算机基础第七章 21 在文档中插入文本在文档中插入文本 插入普通文本：即汉字或英文文本，先将光标定位到 要输入文字的地方，然后直接输入文字。需要换行则 按“Shift + Enter”键，需要分段则按“Enter”键 。 插入特殊符号：在“插入/HTML/特殊字符（C）”的 子菜单下可以插入多种特殊符号 插入水平线：将插入点定位到要插入水平线的位置， 并执行以下操作之一： 选择“插入/HTML/水平线”菜单命令 在插入栏“HTML”选项卡中单击“水平线”按钮 插入日期：执行“插入/日期”菜单命令 * 大学计算机基础第七章 22 格式化文本格式化文本 文本格式设置与WORD类似。可对文本的字体、大小 、颜色和对齐方式等进行设置。 先选中要格式化的文本，在属性检查器中进行设置 段落样式颜色对齐链接 字体大小页面加编号 * 大学计算机基础第七章 23 创建超级链接创建超级链接 选中要创建超链接的文字或图片,在“属性检查器” 的“链接”文本框中输入目标文件的URL，或者单击 “浏览文件”按钮，在站点中选择一个文件作为超 链接的目标文件。 链接 * 大学计算机基础第七章 24 创建导航条创建导航条 导航条能十分有效地实现超级链接功能，它总结了 整个站点主要页面的关键词，一般将他们排列在主 页上，通过单击导航条上的链接，就可以跳转到相 应的页面进行浏览。 将插入点定位到要插入导航条的地方，在“插入” 栏的“常用”类别中，单击“图像”菜单并选择“ 插入导航条”按钮，在出现“插入导航条”对话框 中进行设置并完成导航条的创建工作 * 大学计算机基础第七章 25 电子邮件超链接电子邮件超链接 电子邮件超链接就是指当浏览者单击该超链接时， 系统会启动客户端电子邮件程序并打开“新邮件” 窗口，使访问者能方便地撰写电子邮件。 创建电子邮件超链接的步骤： 将光标定位到需要插入电子邮件链接的位置 在文档窗口中的“插入栏”中选择“常用”标签 ，单击“电子邮件链接”按钮 在“电子邮件链接”对话框的“文本” 框中输入 用于超链接的文本，在“E-mail”文本框中输入 电子邮件地址，单击“确定”按钮。 * 大学计算机基础第七章 26 在网页中插入、修改图像在网页中插入、修改图像 受网络带宽和浏览器的限制，在 Web 上常用的图像 格式只包括GIF、JPEG和PNG三种。 插入图像的步骤如下： 将光标置于要插入图像的位置，在“插入”栏的 “常用”选项卡中单击“图像”按钮或选择“插 入”菜单中的“图像”命令 在“选择图像源文件”对话框中选取存放在站点 中的图像文件，最后单击“确认”按钮 如果所选择的图像文件不是站点中的文件，则将 打开“Macromedia Dreamweaver MX 2004”对话 框，提示是否将图像文件保存到根目录下，单击 “是”按钮 * 大学计算机基础第七章 27 在网页中插入在网页中插入FlashFlash动态元素动态元素 插入Flash动画 插入Flash动画之前应首先在Flash制作软件中 完成Flash动画的制作，并且最好将其制作好后保 存在站点相应文件夹中。 插入 Flash 按钮 在Dreamweaver MX 2004中可以插入自己制作的 Flash按钮，也可以插入Dreamweaver MX 2004集成 的动态按钮 插入 Flash 文本 Flash文本是Dreamweaver MX 2004中集成的文 本动画。插入Flash文本与插入Flash按钮类似 * 大学计算机基础第七章 28 插入播放媒体插入播放媒体 插入声音文件 有多种不同类型的声音文件和格式可以插入， 例如 .wav、.midi 和 .mp3。 插入Shockwave影片 Shockwave 作为 Web 上用于交互式多媒体的 Macromedia 标准，是一种经压缩的格式，其扩展 名为：.dcr，.dir或.dxr，可以从网上获取。 插入视频 可以通过不同方式和使用不同格式将视频添加 到 Web 页面。视频可被下载给用户，或者可以在 下载它的同时播放它。 * 大学计算机基础第七章 29 在网页中使用表单在网页中使用表单 表单：是用于实现浏览者与网页制作者之间信息交 互的一种网页对象，例如：邮箱登录时的对话窗口 ，要求用户输入用户名和密码，确定后提交给服务 器验证，验证通过后你才能进入邮箱。 在Dreamweaver MX 2004中创建表单网页，要进行以 下几步： 创建表单并对其进行属性设置， 向表单中添加需要的表单对象（如文本框、按钮 等），设置其属性， 创建后台处理程序。 * 大学计算机基础第七章 30 创建表单并设置属性创建表单并设置属性 创建表单 将插入点定位到要创建表单的位置 执行“插入/表单/表单”菜单命令，在编辑窗口 中插入表单 设置表单属性 将插入点定位到插入的表单中，打开“属性检查 器”进行设置 * 大学计算机基础第七章 31 插入表单对象插入表单对象 表单是一个容器，只有在表单中添加了表单对象后 才能使用。 表单对象有：文本字段、隐藏域、文本区域、复选 框、单选按钮、单选按钮组、列表/菜单、跳转菜单 、图像域、文件域、按钮、标签、字段集。 插入栏 * 大学计算机基础第七章 32 插入表格插入表格 表格是页面布局中最常用的手段 Dreamweaver MX 2004中的表格技术不仅支持有序地 排列数据，还可在其中插入文本、图像及其他元素 在“文档”窗口的“设计”视图中，将插入点放在 需要表格出现的位置，在“插入”栏的“常用”类 别中，执行“插入/表格”菜单命令，即会出现“表 格”对话框 * 大学计算机基础第七章 33 表格的基本操作表格的基本操作 选择整个表格 选择行或列 选择单元格 合并单元格：用“修改/表格/合并单元格”命令 插入行或列：用“修改/表格/插入列”命令 删除行或列：用“修改/表格/删除行”命令 设置表格属性、设置单元格属性 选中整个表格，在“属性检查器”面板中进行设置 ，各功能与EXCEL软件相似 * 大学计算机基础第七章 34 用表格进行页面布局用表格进行页面布局 利用表格将网页内容分成若干个区，然后将相应的 内容分别填入不同的表格中，著名的门户网站“新浪 ”的页面就是用表格进行布局的。 一般用表格定位来布局网页都分成“标题和导航区” 与“正文区”两大部分。 “标题和导航区”一般在网页最上部，可由两个大的 表格组成：上面表格是图片区，下面是导航区。 “正文区”是由一个多行多列的大表格构建而成，其 中每一行、列再通过插入单独的表格或者拆分的方 法来形成多个区域并输入相应的信息。 * 大学计算机基础第七章 35 用布局模式进行页面布局用布局模式进行页面布局 执行“查看/表格模式/布局模式”菜单命令，在布局 面板中选择“布局”按钮，使窗口处于“布局模式” 创建布局表格 创建布局单元格 在布局单元格中添加内容 调整布局表格 调整布局单元格 设置布局表格和单元格 用布局模式布局页面是在 添加内容前才创建布局表 格和布局单元格。如，可 沿页的顶部绘制一个单元 格放置标题图形，在页的 左边绘制另一个单元格放 置导航条，在右边绘制第 三个单元格放置内容。 * 大学计算机基础第七章 36 用框架进行页面布局用框架进行页面布局 框架页面将浏览器的显示窗口分为多个显示区域，每 个显示窗口称为一个框架，它包含一个单独的、可以 滚动的页面。几个框架组合在一起就构成了框架集。 选中框架 创建框架 在框架中添加内容 保存框架 设置框架属性 框架的最常见用途就是导 航。一组框架通常包括一 个含有导航条的框架和另 一个要显示主要内容页面 的框架。 * 大学计算机基础第七章 37 用框架进行页面布局的优缺点用框架进行页面布局的优缺点 访问者的浏览器不需要为每个页面重新加载与导航 相关的图形。 每个框架都具有自己的滚动条，因此访问者可以独 立滚动这些框架。 例如：当框架中的内容页面较长时，如果导航 条位于不同的框架中，那么向下滚动到页面底部的 访问者就不需要再滚动回顶部来使用导航条。 使用框架也有一些缺点，如：可能难以实现不同框 架中各元素的精确图形对齐以及对导航进行测试可 能很耗时间等。 * 大学计算机基础第七章 38 层叠样式层叠样式 现代网页制作离不开 CSS技术，使用它可以对网页 中的布局元素（如表格）、字体、颜色、背景、链 接效果和其他图文效果实现更加精确的控制，并显 示更好效果。CSS样式不仅可以在一个页面中使用 ，而且可以用于其他多个页面。 创建层叠样式 设置层叠样式 管理层叠样式 应用层叠样式 * 大学计算机基础第七章 39 测试站点测试站点 站点中所有页面制作好后要对整个网站进行测试 测试最基本的方法就是在浏览器中测试每一个页面 ，看内容是否能正确显示，尤其要测试超链接是否 能正确工作。 进一步测试超链接的正确性的方法：将整个站点目 录复制到另外一个位置，然后在浏览器中打开站点 首页，测试是否所有的超链接都能正确工作。 为了确保不同的浏览者能够看到一致的页面效果， 网站还应在不同的显示