《网页设计与制作》第一章：网页制作基础.ppt

第 1章 网页制作基础 网页设计与制作 南海学院计算机系制作 2020/10/14 2 第 1章 网页制作基础 Web和浏览器 Web Web的特点和结构 Web 最 大 的 特 点 是 使 用 了 超 文 本 （ Hypertext） WWW采用 C/S（ 客户机 /服务器 ） 工作模式 在浏览器和服务器之间应用 HTTP（ Hyper Text Transfer Protocol， 超文本传输协议 ） 作为网络应用层通信协议 2020/10/14 3 URL Internet上所有的资源都有一个唯一的 URL地址，一般将 URL地址称为网址。 URL的完整格式如下： 协议 :/主机名（或 IP地址）：端口号 /路径名 /文件名 2020/10/14 4 【 例 】 几个 URL的例子 . （ 1） ，用 http协议和缺省端口号（ 80）访问微软公司 服务器 。这里没有指定路 径和文件名，所以访问的结果是把一个缺省 主页送给浏览器。 （ 2） ftp:/ windows/winvn926.zip，用 FTP协议访问北京 大学 FTP服务器上路径名为 pub/ms-windows、 文件名为 winvn926.zip的文件。 2020/10/14 5 （ 3） http:/gnacademy.org: 8001/uu- gna/index.html，从运行在端口号 8001的 gnacademy.org服务器上访问 index.html主页。 （ 4)http:/www.w3.org/Addressing/URL/5- BNF.html#httpaddress，访问 www.w3.org 服务器 上 Addressing/URL目录下的 5-BNF.html 网页文件 中锚点标识为 httpaddress的地方。 2020/10/14 6 浏览器 概述 分类 Internet Explorer Netscape Navigator Mosaic等专业浏览器以及一些以上述浏览器 为内核的专用浏览器。 其中使用最广泛的是 Microsoft出品的 Internet Explorer 6.0（简称 IE6）。 2020/10/14 7 IE6的界面 标题栏 工具栏 菜单栏 地址栏 状态栏 浏览窗口 2020/10/14 8 IE6.0的使用 浏览网页 “停止”按钮 前进和后退 刷新页面 改变文字大小 选择编码 全屏幕显示 查看源文件 2020/10/14 9 打开多个窗口 用菜单栏上的“文件” “新建” “窗口”， 会打开一个新的浏览器窗口。 一般情况下，打 开四、五个窗口可以 充分利用系统资源， 而且通过调整窗口的 大小和位置还可以同 时浏览。 2020/10/14 10 主页、临时文件和历史记录 浏览器在打开 时自动调入的网页 称为“主页”，主 页可以通过“工 具” “ Internet 选项”打开 Internet选项对话 框，在“常规”选 项卡的“主页”栏 设置 . 2020/10/14 11 收藏夹的使用 使用菜单“收 藏” “添加到收 藏夹”打开添加到 收藏夹对话框。 2020/10/14 12 使用菜单“收藏” “整理收藏夹”打开收 藏夹整理对话框，进行收藏夹中网页的移动、 删除、改名及创建新文件夹等操作。 2020/10/14 13 关闭图片显示 在网络速度较慢时， 不观看网页中的图片和 其它多媒体内容可以得 到更快的下载速度。通 过“工具” “ Internet 选项”打开 Internet选项 对话框，在“高级”选 项卡中可以对浏览器的 工作方式进行设置 2020/10/14 14 关闭自动完成功能 通过工具 Internet 选项，打开 Internet 选项对话框，在“内 容”选项卡的“个人 信息”部分单击“自 动完成”按钮打开自 动完成设置对话框 。 2020/10/14 15 搜索引擎的使用 1、使用浏览器的“搜索”按钮 2、使用专门的搜索引擎 (Google) (摆渡 ) (雅虎 ) (搜狐 ) 2020/10/14 16 认识网站 1.门户网站 2.个人网站 3.专业网站 4.职能网站 2020/10/14 17 1.门户网站 这类网站是一种综合性网站，涉及领域 非常广泛，包含文学、音乐、影视、体 育、新闻和娱乐等方方面面的内容，具 有论坛、搜索和短信等功能。现在国内 较著名的门户网站有搜狐 （ ）、网易 （ ）等。 2020/10/14 18 2.个人网站 个人网站具有较强个性化，是以个人名 义开发创建的网站，其内容、样式、风 格等都是非常有个性的。 2020/10/14 19 3.专业网站 这类网站具有很强的专业性，通常只涉 及某一个领域，内容专业。如榕树下网 站（ ）即是一个专 业文学网站。 2020/10/14 20 4.职能网站 职能网站具有专门的功能，如政府职能 网站等。目前逐渐兴起的电子商务网站 也属于这类网站，较有名的电子商务网 站有阿里巴巴（ ）、 卓越网（ ）和当当网上书 店（ ）等。 2020/10/14 21 认识网页 Flash动画 导航栏 GIF动画 文字 表单 图片 超级链接 2020/10/14 22 网页中的元素 1.文字 2.图像 3.表单 4.Flash动画 5. 表格 6. 超级链接 7. 视频、音频 8. POP窗口 9. 标题栏和状态栏文字 2020/10/14 23 1.2 网页制作的相关知识 HTML语言概述 是一种超文本标记语言，作为一种网页编 辑语言，易学易懂。 2020/10/14 24 1、 HTML网页 HTML网页通常是由三部分内容组成的： 版本信息、网页标题（ HEAD）和文档主体 （ BODY）。 下面就是网页结构的总体框架： 2020/10/14 25 （ 1）版本信息 版本信息位于 HTML网页文件的第一行 （ 2） HTML文件标记 大部分网页文件都是以 标记开始的，在文件 的结尾处又以 结束 （ 3）头部信息 HEAD标记之间是 HTML文档的头部，用来标明当前文档 的有关信息 在 HEAD标记之间，使用频率最高的标记就是 TITLE，它用于定义显示在浏览器标题栏的文档标题。 2020/10/14 26 【 例 】 给网页设置 “ 励志学社 ” 的文档标 题，可在头部输入以下代码： 励志学社 2020/10/14 27 （ 4）主体标记 网页的主体是 “ ”标记 对作用的范围 标记用于定义 HTML文档主体的开始， 它能够设置网页的背景图像、背景颜色、链接颜色 和网页边距等属性，其基本用法如下所示： Bgcolor为背景颜色。关于颜色的值后面会详 细介绍。 Text为不包含超级链接的文字颜色。 Link为超级链接文字的颜色。 Alink为正被点击的超级链接文字的颜色。 2020/10/14 28 Leftmargin、 Topmargin用于设置网页的左 边距和上边框，它们是以像素为单位 【 例 1】 将网页的上边距和左边距分别设置为 40 和 30个像素的宽度，使用黑色文本、白色背景， 未访问的链接源采用蓝色，已访问的链接源标记 为暗红色。 Vlink为已经点击过的超级链接文字的颜色。 Background设置，如果设置了背景图片， 图片会覆盖已经设置的颜色。 2020/10/14 29 2、 XML语言 XML（ eXtensible Markup Language）被称作是下一代的网页标 记语言，也是采用各种标记来形成网 页的源代码。 XML中包括可扩展格式语言 XSL(Extensible Style Language) 和 可扩展链接语言 XLL(Extensible Linking Language)。 2020/10/14 30 1.22 静态网页和动态网页 静态网页指基本上全部使用 HTML语言制作的网页，页面的 内容是固定不变的。 动态网页（ DynamicHTML， DHTML）利用 JavaScript， CSS (层叠样式表 ) 及其它类似的语言如 VBScript等与 HTML进行有机的结 合来使静态的 HTML网页变成动态。 2020/10/14 31 1.23 Web服务器端程序 专业的网站都是建立在使用数据库的 基础上的，要将这些数据库变成可以通过 浏览器显示和操作的 Web页面，就需要编 写服务器端的程序。用户向服务器传送提 交的表单（个人信息、选择结果等）需要 在服务器端进行记录、筛选等处理。大量 的数据库查询、修改处理也需要服务器端 程序的支持。 目前常用的服务器端编程技术主要有 CGI、 ASP、 PHP、 JSP等，不同的技术 需要不同的系统环境支持。 2020/10/14 32 1.3 网页制作的基本方法 制作网页的基本步骤 1、确定网页的内容 2、设计网页的组织结构 3、资料的收集与整理 4、选择网页的设计方法 常用的网页制作工具有 Frontpage、 Dreamweaver等。服务器端的 ASP程序可以使用 Visual Interdev、 UltraDEV等编辑。 2020/10/14 33 开始网页制作 构建页面框架 创建导航条 填充内容 创建返回主页连接 2020/10/14 34 网页制作的原则 站点要有创意 整体规划 动画不能过多 导航要明朗 制作通用网页 主题鲜明 优化图象 定时更新 2020/10/14 35 制作网页时要注意的问题 1、网页的标题要简洁，明确。 2、在文本中要使用水平线，以分割不同部分。 3、对重点段落要强调显示。 4、网页中插入的图片要尽量的小。 5、图形要附加文字说明，以便关闭图像时查 看。 6、网页中引用的资料及商标（或图标），不 能侵犯版权。 2020/10/14 36 1.4 Macromedia Studio MX2004 Macromedia Studio MX2004是目前应用最 广泛的网页制作工具组件，使用方便、功能齐全， Dreamweaver、 Flash、 Fireworks被称作 “ 网页 三剑客 ” 。 在 Dreamweaver 里用丰富的层叠样式表制作耐看， 专业的网站。 Macromedia Flash 工具可较快的制作 SWF 文件。 Fireworks通过自动变形，用动的效果，图片编 辑工具和拖拽工具能传送较精彩的 Fireworks 图片。 2020/10/14 37 思考题 1.1 什么是 WWW？什么是网页？ 1.2 一个完整的 URL由哪几部分组成？举 出几个 URL的例子。 1.3 如何设置 IE的主页？如何用 IE收藏一 个网页？ 1.4 网页中一般都使用了哪些技术？ 1.5 Macromedia Studio MX2004有哪 几部分组成？