《网页设计与制作》【共五章246PPT，非常好的一份资料】

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