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