计算机应用基础 Computer Application Essential （2007版）,第六章 网页制作基础,目录 61 网站与网页概述 62 网站制作步骤 63 网页中的文本与超链接 64 网页中的图像与多媒体 65 制作表单 66 网页版面设计 67 网页的特效制作 68 网站发布与管理 小知识 网站在银行和商贸业务中的应用 习题6,网页的基本构成元素,网页制作工具,网站与网页,网页制作语言,6.1 网站与网页,1.网 站 的 概 念,网站与网页 网站由网页组成 网页由文字、图像、动画、表格、色彩等组成 访问网站时看到的第一张网页为网站的首页 网页和主页的英文都称为 Home Page 网页和主页的中文意义有所不同： 网页往往是成组、成批的，不止一张 一组网页中的第一张为主页 主页往往是一组网页的总体介绍,网站与网页,文本：主要部分，通过字体设置体现 图像：jpg和gif格式 超链接:网站的灵魂 ,实现位置跳转 表格：网页排版的灵魂 ，精确定位元素 表单：人机交互的有力工具 导航栏：一组超链接 动画：网页上最活跃的元素 ，有gif和swf 框架：网页的组织形式 ，多个内容在一个窗口浏览 其它：日期、计数器、音频、视频、网页特效等,网页的构成元素,HTML的概念,制作工具,网页制作语言,HTML的概念,HTML：是超文本标记语言（Hyperlink Markup Languange）的缩写，它基于SGML（标准通用标记语言，Standard General Markup Language ）语言，由W3联合会推出，目前最新的版本是HTML4.0,HTML语言纯文本标识格式,HTML的基本格式,标识格式：指定内容,基本结构： 页头标题 。 。 ,制作工具,文本编辑器 Dreamweaver FrontPage Dreamweaver与FrontPage的比较,Dreamweaver 8 的新增功能: “缩放”工具和辅助线 可视化 XML 数据绑定 新的 CSS 样式面板 CSS 布局的可视化 代码折叠 “编码”工具栏 后台文件传输 “插入 Flash 视频”命令,工作区,文档窗口与状态栏,编码工具栏,管理站点,管理站点,管理站点,文本操作,添加字体,2.网站制作步骤,网站建设的主要步骤： 确定主题 收集和制作图片资料 规划并建立站点结构 设计站点导航 制作网页 测试和发布 网站的反馈及维护,影响网站成功的因素,网页结构的合理性 网页结构的直观性 网页中的多面体效果 用户等待的时间,1.网站的总体规划与设计,网站的总体规划主要涉及以下内容: (1)确定网页结构。 (2)确定网页的信息组织和管理方式。 (3)确定信息的存储方法。 (4)文档版本的控制。 (5)确保结构的完整性和一致性。,网站的总体设计包括网页的布局、系统的内部结构、网页的开发技术、网站的维护方法、网站的运营模式等。 (1)网页的布局 页面尺寸 整体造型 页眉 文本 页脚 图片 多媒体,2. 网站的总体设计,(2)网站的设计方式和内容 不同类型的网站，其设计方式和内容各不相同 为网站建立一个所需的内容和功能的清单 (3)网页开发技术 选择自己所熟悉的系统及其相应工具软件 (4)网站的维护 使用适当的网站维护方法,2.网站的总体设计（续）,层次结构 序列结构 网状结构,网站信息的组织结构,网页的层次结构,序列结构 主页面是标题或引言，后面的各页面按顺序排列，前后 有连接。 其结构如图所示 网页的序列结构示意图,网状结构 把一些相关内容链接到一起，浏览者可以通过不同的途 径进入到想要的界面。 其结构图如图所示 网页的网状结构示意图,网站中的文本和超链接,超链接,文本,创建文本 插入特殊文本 编辑文本 删除文本,文本操作：,文 本,创建段落 段落排版 添加项目列表和格式符号,编辑文本格式,文本产生:类似word操作,拷贝或直接输入 设置字体: 利用属性面板，也可以实现对字符字体的设置。打开属性面板上的字体列表，选择相应字体项即可 。 设置字号: 字号指的是字体的大小，它没有一个绝对的大小标准，其大小只是相对于默认字体而言。例如，1号字和2号字，比默认字体要小一些，而4号字和5号字，比默认字体要大一些。,添加字体颜色 打开【文本】菜单，选择【颜色】，可以打开Windows标准的颜色对话框，允许用户选择颜色，如图所示。,设定字体样式: 字符的样式指的是字符的外观显示方式，例如字符的加粗、倾斜和下划线等，可以设置多种字符样式。 1. 加粗 2. 倾斜 3. 下划线 4. 删除线 5. 打字型 6. 强调 7. 加强 8. 代码，变量，范例和键盘 9. 引用和定义 10. 已删除 11. 已插入,文本标题,文本标题用来强调段落要表现的内容。在HTML中，定义了6级标题，从1到6级，每级标题的字体大小依次递减。 在HTML中，采用如下的标记来定义标题： 和 定义标题1 和 定义标题2 和 定义标题3 每级标题的字符大小并没有一个实际上的固定的值，它是由浏览器所决定的，为标题定义的级别只决定了标题之间的相互大小。,处理段落,设置段落格式: 使用【属性】面板的【格式】弹出式菜单或选择【文本】|【段落格式】菜单可以应用标准段落和标题标签。 对齐段落 : 段落的对齐方式，指的是段落相对文档窗口（或浏览器窗口）在水平位置的对齐方式。有三种对齐方式：左对齐、居中对齐、右对齐、两端对齐。 缩进段落: 许多时候需要缩进段落，例如希望强调一段文字，或引用其他来源的文字，都需要将文字缩进，以示同普通段落的区别。所谓缩进，主要是相对于文档窗口（或浏览器窗口）左端而言的。,创建项目列表,设置段落的项目列表是Dreamweaver 8 一个很重要的格式设置方法。在HTML中，从总体上分有两种类型的项目列表，一种是无序项目列表，另一种是有序项目列表，当然还有定义列表、目录列表和菜单列表。无序项目列表使用项目符号来标记项目，有序项目列表则使用编号来标记项目顺序。 在Dreamweaver 8 中，允许设置多种项目列表格式。,项目列表的类型 在HTML中，可以创建的列表有：无序列表、有序列表、定义列表、目录列表和菜单列表。 无序列表 有序列表 定义列表 目录列表和菜单列表,使用现有的项目列表 要使用现有的项目列表，请执行如下步骤： 1选中要转换为项目列表的所有段落。 2单击“属性”面板上的“项目列表”按钮或“编号列表”按钮；也可以单击“文本”“列表”菜单项，选择相应的“无序列表”、“有序列表”菜单项。 3这时被选中的段落文字就被转换为项目列表的形式。,创建嵌套项目列表 要实现多级项目列表的形式，请执行如下步骤： 1选中要嵌入的列表项，如果有多行希望嵌套，请选中多行。 2单击【属性】面板上的【文本缩进】按钮，如图所示；或者单击【文本】|【缩进】菜单项。,超链接的分类： 内部链接：用于同一个站点内的不同页面之间相互联系的超级链接。 外部链接：即从当前页面链接到Internet上其他站点的超级链接。 书签链接：链接到该网页自身某个特定位置的超级链接。,链接分类及其实现演示,图 示,文本链接,图 示,图像链接,目标的概念,一blank：超链接的网页会在一个新的浏览窗口被打开 一parent：超链接的网页会在主框架内显示。 一self：超链接的网页会在目前窗口或框架内显 一top：若此网页有框架，会拆除目前所有的框架 显示在主窗口内。,网页的颜色,文本的颜色,超链接的颜色,网页中的图像和多媒体,图象格式,图像文件有各种各样的格式，目前能用 于网络的有 ： Gif Jpg png,图象与图像占位符,插入图象,插入图像占位符: 定位要插入图像的位置； 单击“插入/图像对象/占位符号” 图象站位符: 双击页面中的图像占位符 在“选择图像源文件”对话框中，浏览 至您定义的 图象 文件夹。 选择 文件并单击“确定”。,插入图象,使用插入菜单完成图象插入 通过拖拽的方式实现图象插入,图象替代文本,图象处理（修改大小）,图象剪辑,站点地图,网页背景,站点地图的应用,插入动画,插入动画,插入音乐,选择插件,插入视频,定位插入点 选择“插入”“媒体”“Flash视频”。,插入视频(2),网页中的表单,表单的概念,表单有2个重要组成部分，一是描述表单的HTML源代码，二是用于处理用户在表单域中输入的数据的应用程序，该程序存放在服务器上，叫脚本，如ASP、CGI等。 使用Dreamweaver 8创建表单，可以给表单中添加对象，还可以通过使用【行为】来验证用户输入信息的正确性。,表单控件,文本域 复选框 单选按钮 列表/菜单,跳转菜单 按钮 隐藏域 文件域,表单控件的应用,表单控件的应用,表单控件的应用,表单控件的应用,表单控件的应用,表单控件的应用,版面设计,版面设计,网页设计除了考虑网页中的文字和图像等本身内容之外，还要考虑整体布局以及由其带来的视觉效果。如色彩的搭配、文字变化、图像处理以及网页布局。 网页布局是指以最适合浏览的方式放置网页中的各种对象，使网页的浏览效果和视觉效果都达到最佳。,版面设计,表格应用,框架网页,层,Dreamweaver 8的框架将网页分割成不同的显示区域； Dreamweaver 8的表格可以作为规划安排网页内容的主要依据(精确定)； Dreamweaver 8的层提供了弹性的版面设计功能 ；,版面设计的常用手段,表格在网页布局中的使用比较多，表格的引入使网页变得整齐和美观。 Dreamweaver8将表格中最小单位的格子称为单元格，一整条横向单元格称为行，一整条纵向单元格称为列。 表格单元格内可以放置图像、声音、视频信息，从而为网页设计提供了一种极为灵活的方法,表格应用例子,布局表格和布局单元格,创建表格,插入/表格,表格应用例子,表格的很多属性都在对应的属性面板上进行设置,单元格标题设置,使单元格的内容成为标题,表格设计及内容分布,表格数据排序(插入表格对象),表格数据排序（导入数据）,表格数据排序(执行排序表格命令),表格数据排序（指定排序依据）,表格数据排序（排序后效果）,表格排版范例,框架的概念,框架（frame）把浏览器窗口分成几个部分，每个部分可以显示不同的网页。从而使浏览器窗口同时包含多个页面，增加了可显示的信息量。 框架由框架集和框架页组成。,框架的概念,框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL。框架集文件本身不包含要在浏览器中显示的HTML内容，框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。 在另一个框架集之内的框架集称作嵌套的框架集。一个框架集文件可以包含多个嵌套的框架集。,框架的概念,如果某个页面被划分为两个框架，那么它实际上包含的是三个独立的文件，一个框架集文件和两个框架页（内容）文件。 框架内容文件就是显示在页面框架中的内容。 框架通常被用来定义页面的导航区和内容区域。,框架布局范例,框架布局制作过程,新建框架,框架面板,框架属性,框架页的制作和保存,框架页的链接设置,要在一个框架中使用链接以打开另一个框架中的文档，必须设置链接目标。 由链接目标属性指定在其中打开链接的内容的框架或窗口。,链接目标的含义,_blank：在新的浏览器窗口中打开链按的文档，同时保持当前窗口不变； _parent：在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集； _self：在当前框架中打开链按，同时替换该框架中的内容； _top：在当前浏览器窗口中打开链接的文档，同时替换所有框架。,完成目标指定,框架页欣赏,框架页欣赏,层的概念,可以把图层想象成是一张一张叠加起来的透明胶片，每张透明胶片上都有不同的画面，可以包含文本、图像、表单