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

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