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