《网页设计与制作实例教程》第1章(梁祥)ppt课件(全).ppt

清华大学出版社 网页设计与制作实例教程第1章高等学校计算机应用规划教材 2023/3/4主编 方其桂内容提要第1章 网页与网站基础随着网随着网络时代的到来，互代的到来，互联网成了海量信息的网成了海量信息的载体，网体，网络从最初的信息从最初的信息发布与布与资源共享，到源共享，到现在的网在的网络咨咨询、网、网络会会议、网、网络购物、网物、网络社区等，网社区等，网络越来越越来越显示出它的魅力示出它的魅力和生机。和生机。网网络逐逐渐成成为人人们生活的一部分，网上冲浪、生活的一部分，网上冲浪、浏览各种各种各各样的网的网页已已经成成为很多网民的每天很多网民的每天习惯。你是否考。你是否考虑过这些些缤纷多彩的网多彩的网页是如何是如何设计出来的呢？网出来的呢？网页背后有哪些相背后有哪些相关的技关的技术呢？你是否能呢？你是否能够想制作出美想制作出美观大方的网大方的网页呢？呢？通通过本章的学本章的学习，你将掌握网，你将掌握网页与网站的基与网站的基础知知识，认识网网页与网站的相关概念，感受网与网站的相关概念，感受网页编写写语言，了解网站开言，了解网站开发的流程。的流程。教学目录网网页网站知网站知识网网页编写写语言言网站开网站开发流程流程010203第1章 网页与网站基础1.1 网页与网站知识教学内容1.1.1 1.1.1 认识网页与网站认识网页与网站 网网页是用来承是用来承载各种多媒体信息的文件，网站是由网各种多媒体信息的文件，网站是由网页构成的，构成的，网站网站的的访问、特征与分、特征与分类是学是学习网网页设计与制作的基与制作的基础知知识。1.网页概念 网页（Web）就是网站上某一个页面，是向浏览者传递信息的载体。它以超文本和超媒体为技术，采用HTML、CSS、XML等语言来描述组成页面的各种元素，如文字、图像、动画、音乐、超链接等，并通过客户端浏览器进行解析，从而向浏览者展示网页的各种内容。第1章 网页与网站基础2.网站概念 网站（Website）是指互联网上根据一定的规则，使用HTML、CSS、XML等语言和其他工具制作的用于展示特定内容的相关网页集合，一般包括一个首页和若干个子页。网站设计者先将整个网站结构规划好，然后再分别制作各个网页。大多数网站为浏览者提供一个首页，然后再将其他网页与首页链接起来。1.1 网页与网站知识教学内容3.网页特点 图形化的界面、兼容的系统平台、交互式的操作、分布工的存储、信息的时效性、Web的可设计性。第1章 网页与网站基础1.1 网页与网站知识教学内容4.网站分类 网站有很多不同的分类方法，例如按照其使用的技术可分为静态网站和动态网站。按照网站所属部门的性质可以分为企业网站、政府网站、教育网站和个人网站；按照网站的作用可以分为搜索引擎网站、社区论坛网站、在线翻译网站、软件下载网站和音乐欣赏网站等。第1章 网页与网站基础1.1 网页与网站知识教学内容5.访问网站 （1）门户网站：是指通向某类综合性互联网信息资源并提供有关信息服务的应用系统。门户网站最初是提供搜索引擎和网络接入服务的，后来由于市场竞争日益激烈，门户网站不得不快速地拓展各种新的业务类型。（2）搜索引擎的基本功能是为用户查询信息提供方便，随着互联网上信息量的爆炸式增长，如何寻找有价值的信息显得日益重要，因此搜索引擎便应运而生。目前国内较为常用的搜索引擎是百度。（3）电子商务是一种在Web上进行商务活动的方式，这种商务通常是零售、银行交易、期货交易、咨询或培训等。电子商务网站是以完成电子商务活动为目的的网站。任何通过互联网进行产品或服务的出售和买入的行为均属电子商务范畴。第1章 网页与网站基础1.1 网页与网站知识教学内容6.网站特征 网站是由大量的网页组成的，所以从某种角度上讲，建设网站就是制作网页。第1章 网页与网站基础1.1 网页与网站知识教学内容7.网站结构 网站的体系结构一般有三种，C/S结构、B/S结构和混合结构。第1章 网页与网站基础1.1 网页与网站知识教学内容1.1.2 1.1.2 网页基本组成元素网页基本组成元素1.文本 文本是指网页中叙述性的文字，是最理想的网页信息载体与交流工具，网页中主要信息一般都以文本为主，与图像网页元素相比，文字虽然不如图像那样容易被浏览者注意，但却能简明扼要地表达出主题。第1章 网页与网站基础2.图像 图像是指网页中插入的具体说明性图片。图像拥有丰富的色彩和表现形式，能够表达更加丰富的内容和含义，并且具有文本无法达到的视觉效果。添加适量的图像可以使制作的网页图文并茂，具有更好活力和表现力。1.1 网页与网站知识教学内容3.动画 动画在网页中的作用是有效地吸引访问者更多的注意，用户在设计网页时可以通过在页面中加入动画使页面更加生动。在网页中使用的动画主要有两种方式，即GIF和FLASH动画。第1章 网页与网站基础4.音频 音频是多媒体网页重要的组成部分。在为网页添加声音效果时应充分考虑其格式、文件大小、品质和用途等因素。另外，不同的浏览器对声音文件的处理方法也有所不同，它们彼此之间在有可能并不兼容。用于网络的音频文件的格式种类很多，常用的有MP3、MIDI、WAV等。5.视频 随着网络带宽的增加，越来越多的视频文件被应用到网页中，使得网页效果更加精彩且富有动感。常见的视频文件格式有MP4和FLV等。1.1 网页与网站知识教学内容6.超链接 超链接是网页中最常用的一种元素。它是指某个网页指向某个目标的链接关系，这个目标可以是另一个网页，也可以是本页面的不同位置，不可以是一张图片、一个电子邮箱地址，或者是一个文件夹，甚至可以是一个应用程序。使用超链接管理器可以清楚地看出各文件之间的链接关系，并且可以用来检查站点中网页链接是否正确。第1章 网页与网站基础7.表单 表单在网页中通常用来连接数据库并接受访问，以采集用户在浏览器端发出的请求，它可以是文本文件、WEB页、电子邮件，也可是服务器端的应用程序。表单的是收集用户在浏览器上信息，接受请求，反馈意见，设置签名以及登录信息等。8.导航栏 导航栏是网页中的超链接，其链接的目标是网站中重要的页面，在网站中设置导航栏可以使访问者便捷地浏览站点中的其他网页。1.1 网页与网站知识教学内容1.1.3 1.1.3 静态网页和动态网页静态网页和动态网页1.静态网页 静态网页是指没有程序代码的网页。运行于客户端的程序、插件和组件等都属于静态网页，在网络中看到的静态网页文件通常是以htm或html为扩展名的，俗称HTML文件。第1章 网页与网站基础2.动态网页 动态网页就是含有程序代码的网页。运行于服务器端的程序、网页和组件都属于动态网页，它们会随不同客户、不同时间及不同需要而返回不同的网页。在网络中看到的动态网页文件通常是以ASP、PHP和JSP等为扩展名的，这种文档类型的网页由于采用了动态页面技术，所以拥有更好的交互性、安全性和友好性。1.1 网页与网站知识教学内容3.动态网站原理 动态网页一般需要通过访问数据库(或文本类文件)来实现网页的生成，系统中可有一台单独的数据库服务器(存放数据库系统)，也可以将WWW服务与数据库系统放置在同一个服务器上。第1章 网页与网站基础4.动态网站特点 （1）交互性：网页会根据用户的选择和要求产生各种用户所需要的结果，进而完成各种数据交互功能。（2）自动更新：用户不需要手工制作HTML文件，即可根据数据库中的数据生成各种网页。（3）针对性：网页可以根据不同地区、不同的人、不同时间的浏览，产生不同的内容。1.1 网页与网站知识教学内容5.动态网站技术 以前的动态网站主要是使用CGI技术，CGI(Common Gateway Interface)即公用网关接口，可以使用Visual BasicDelphi或C/C+等语言开发CGI程序。虽然CGI的功能强大，但是其语法复杂，开发效率低下，程序维护更新难度较大，后来逐渐被其他网站编程技术所取代。现在比较流行的网页编程技术有ASP、PHP、JSP、ASP.NET等。第1章 网页与网站基础1.2 网页编写语言与制作工具教学内容1.2.1 1.2.1 网页设计语言基础网页设计语言基础1.HTML语言简介 HTML语言，又称为超文本标记语言（Hypertext Markup Language）。与其他编程语言不同，它不是一种真正的计算机编程语言，而是一种在使用转义码文档中应用的格式化语法。HTML语言不像其他语言一样被编译为指令，而只是提供一些语法标签，再由浏览器解释生成相应的页面。第1章 网页与网站基础2.HTML文档的基本结构 HTML文档的构成是十分简单的，它主要包括文件头、表头和主体三个部分。文件头和为文件的开头和结尾。表头是指和，用来定义文档的属性和文档的标题，主体部分和，由来表示网页文字、图像、表格等内容。3.常用页面标签 通过几种不同的水平线，它们在宽度、长度、颜色、位置等方面分别有所不同。水平线的颜色设定可以采用十六进制数也可以直接输入对应原英文。如红色的水平线，可以设定为color=red或者color=#ff0000。1.2 网页编写语言与制作工具教学内容1.2.2 1.2.2 网页编写语言介绍网页编写语言介绍1.HTML代码 在记事本中就可以编写HTML代码，就可以制作网页。用IE浏览器就可以查看（.html文件）效果第1章 网页与网站基础2.CSS概念 CSS就是Cascading Style Sheets，译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。“样式”就是指网页中文字大小、颜色、图片位置等格式，“层叠”的意思是，当在HTML中引用了数个样式文件(CSS文件)时，当样式文件中的样式发生冲突时，浏览器将依据层叠顺序处理。1.2 网页编写语言与制作工具教学内容3.CSS角色 CSS所扮演的角色：是目前唯一的网页页面排版样式标准，它能使任何浏览器都听从指令，知道该以何种布局、格式显示各种元素及其内容。在HTML语言中可以直接编写CSS代码。CSS能帮助用户对页面的布局加以更多的控制。CSS可以控制网页字体变化和大小。CSS弥补了HTML对网页格式化方面的不足，起到排版定位的作用。CSS可实现页面格式的动态更新。第1章 网页与网站基础4.JavaScript概念 出现使得用户与信息之间不只是一种浏览与显示的关系，而是实现了一种实时、动态、交互的页面功能。这样静态的HTML页面也逐渐被客户端可做出响应的动态页面所取代。1.2 网页编写语言与制作工具教学内容1.2.3 1.2.3 网页制作工具网页制作工具1.Dreamweaver Adobe Dreamweaver，简称DW，中文名称梦想编织者，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。第1章 网页与网站基础2.FrontPage FrontPage是微软公司出品的一款网页，作入门级软件，FrontPage使用方便简单，所见即所得是其特点，该软件结合了设计、程式码、预览三种模式。FrontPage 2002还允许我们设定数据库的交互功能，利用该功能，用户可以设置让指定的访问者通过浏览器来编辑数据库中的记录，或者在数据库中新增记录，查看已有的资料等。1.2 网页编写语言与制作工具教学内容3.SharePoint Designer SharePoint Designer 是微软继 FrontPage之后推出的新一代网站创建工具。Microsoft SharePoint Designer 提供了更加与时俱进的制作工具，用于创建交互式 Web 应用程序)和全站支持 AJAX 功能，让企业用户很方便地给网站添加丰富的多媒体和互动性体验。Microsoft SharePoint 还具有全新的备份和恢复功能，能够更加方便地选择需要备份的组件，节省操作时间也缩短了之前复杂繁琐的过程。还可以添加更多的管理员用户，新的管理员用户的添加能够让 IT 人员更好的控制网页上资源的分配，从而能够让服务器运行效率得到提高。第1章 网页与网站基础4.CutePage CutePage 2.0是一个集代码编辑，可视化编辑，站点管理和特效制作为一体的功能强大的网页编辑器。代码编辑和可视化编辑的完美结合，特效工具的灵活应用助你制作出不同凡响的网页。CutePage由网页编辑器和其组件工具组成。组件工具能在页面中加入特殊效果，包括由硕思公司开发的DHTML,Java Applet,JavaScript 工具，可以方便地为主页添加交互动态内容。1.2 网页编写语言与制作工具教学内容5.WebSphere WebSphere 是 IBM 的软件平台。它包含了编写、运行和监视全天候的工业强度的随需应变 Web 应用程序和跨平台、跨产品解决方案所需要的整个中间件基础设施，如服务器、服务和工具。WebSphere 是随需应变的电子商务时代的最主要的软件平台，可用于企业开发、部署和整合新一代的电子商务应用，如B2B，并支持从简单的网页内容发布到企业级事务处理的商业应用。WebSphere 可以创建电子商务站点，把应用扩展到联合的移动设备，整合已有的应用并提供自动业务流程。第1章 网页与网站基础6.记事本 记事本软件相当常见，其存储文件的扩展名为.txt，文件属性没有任何格式标签或者风格，所以相当适合纯文本编辑。一般来说，使用记事本可以很方便的使用代码编辑方式编辑网页，只是在保存时需另存为对应网页格式的扩展名，而再次打开网页文件时，一定要选择打开方式，让网页文件用记事本软件打开，即可再次编辑。1.2 网页编写语言与制作工具教学内容1.2.4 1.2.4 网页美化工具网页美化工具1.Fireworks Fireworks是一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等。Firework软件主要用于制作网页图像、网站标志、GIF动画、图像按钮和导航条等。第1章 网页与网站基础2.Photoshop Photoshop是一款优秀而强大的图形图像处理软件，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等；也可进行复制、去除斑点、修补、修饰图像的残损等。此外它具有的强大功能已经完全涵盖了网页设计的需要。1.2 网页编写语言与制作工具教学内容3.Flash Flash是一款动画制作软件，主要用于制作矢量动画，如广告条、网站片头动画、动画短片等。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。利用该软件还可以制作交互性很强的游戏、网页和课件等。第1章 网页与网站基础4.CorelDraw CorelDraw是Corel公司出品的矢量图形制作工具软件，这个图形工具给设计师提供了矢量动画、页面设计、网站制作、位图编辑和网页动画等多种功能。一方面用于矢量图及页面设计，另一方面用于图像编辑。通过CorelDraw的全方位的设计及网页功能可以融合到用户现有的设计方案中，为专业设计师及绘图爱好者提供简报、彩页、手册、产品包装、标识、网页及其他。1.2 网页编写语言与制作工具教学内容第1章 网页与网站基础5.Illustrator illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件，作为一款非常好的图片处理工具，Adobe Illustrator广泛应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等，也可以提供较高的精度和控制，适合生产任何小型设计到大型的复杂项目。1.3 网站开发流程教学内容1.3.1 1.3.1 网站总体策划网站总体策划1.网站主题定位 网站的定位就是确定网站的形式。网站是一种新式媒体，在日常生活、商业活动、娱乐资讯、新闻媒体等方面有着广泛的应用。在网站开发之前，首先需要认识各种网站的主要特点，对网站进行定位。第1章 网页与网站基础2.网站功能确定 在网站定位之后，要明确网站的主要功能。下面以一个招聘求职网站为例进行说明。招聘求职网站的功能，应该围绕招聘与求职来进行。针对的对象分别是企业与会员。这两方面的功能都需要通过编号设计出强大的功能。1.3 网站开发流程教学内容3.网站标志设计 （1）设计Logo:网站的Logo是一个网站的标志，在各种场合都需要使用到网站的Logo，一个网站需要设计出一个有创意的Logo作为网站的品牌标识。网站的Logo首先要突出网站的功能，让用户一看到这个Logo就可以联想到网站求职招聘的功能。其次，网站的Logo需要有鲜明的色彩与内容。在很多Logo链接中，能够吸引用户的注意并单击这个Logo链接。（2）设计Banner:网站所有的广告中，首页的广告是最主要的，需要美观大方，网站中的Banner.需要体现出”眼球效应“。可以做成功画的形式，以动态的效果吸引用户的注意力。如果是静态图片需要使用鲜明的颜色与内容。第1章 网页与网站基础1.3 网站开发流程教学内容4.网站数据结构规划 网站中的数据内容比较复杂，这些数据有很强的逻辑关系，各种数据的关系规划。第1章 网页与网站基础1.3 网站开发流程教学内容5.网站数据结构规划 在创建网站以前需对网站进行整体和设计，写好网站项目设计书，在以后的制作中按照这些规划和设计进行。需要从网站内容、网页美术效果和网站程序的构思3个方面进行网站的整体规划。第1章 网页与网站基础6.收集资料与素材 网站的设计需要相关的资料和素材，丰富的内容才可以丰富网站的版面，整理好的资料后还需要对资料进行筛选和编辑。图片：可以使用相机拍摄相关图片，对已有照片可以使用扫描仪输入到电脑。一些常见图片可以在网站上搜索或下载。文档：收集和整理现有的文件、广告、电子表格等内容。对纸制文件需要输入到电脑形成电子文档。文字类的资料需要进行整理和分析。媒体内容：收集和整理现有的录音、视频等资料。这些资料可以作为网站的多媒体内容。1.3 网站开发流程教学内容7.设计网站页面 确定网站的基本内容与思路以后，即可设计网站页面了。网站网页设计包括首页的设计与内容的设计。首页设计要规划以下内容：网页Logo的大小与样式、网页的Banner的大小与样式，网页各个模块搭配、网页中导航条的位置与样式、网页中其他链接的位置与格式、网页各个模块的版式等。使用切图输出：制作好的效果图，还需要经过Fireworks切图，才能制作成网页。可以通过Fireworks打开设计好的效果图，对网页的各个部分进行切片。在切片时，要注意各个怎的合理分布，同一内容最好切割到同一个图片上。利用模板制作网页：只需要更改模板中已经设定的可编辑内容，即可完成新网页的编辑。使用模板操作，可以提高网站设计制作速度。第1章 网页与网站基础1.3 网站开发流程教学内容1.3.2 1.3.2 建立发布网站建立发布网站1.申请网站域名 一个网站必须有一个世界范围内唯一可访问的名称，这个名称还可方便地书写和记忆，这个就是网站的域名。从网络体系结构上来讲，域名是域名管理系统进行全球统一管理的，用来映射主机IP地址的一种主机命名方式。第1章 网页与网站基础2.申请服务器空间 一个网站直接放在独立的服务器上是不实际的，实现方法是在商用服务器上租用一块服务空间，每年定期支付很少的服务器租用费即可把自己的网站放在服务器上运行。租用的服务器空间，用户只需要管理和更新自己的网站，服务器维护和管理则由网络公司完成。1.3 网站开发流程教学内容3.发布与上传 网站完成设计与高度以后，需要上传到租用的服务器空间中才能被用户访问。网站的发布就是把自己计算机中的网站内容发布到网络上服务器空间的过程。第1章 网页与网站基础4.网站的推广注册到搜索引擎 用户常通过搜索引擎查找自己所需要的网站或信息，然后要所搜索到的结果单击所需要的网站。搜索引擎一般有自动收录功能，网站运行一段时间以后，搜索引擎可能根据网站的地址搜索到自己的网站，并且遍历网站中所有的网页。但搜索引擎并不是一定能自动搜索并添加自己的网站，搜索引擎都有网站手动添加功能，需要把网站的域名和手动添加到搜索引擎中。1.3 网站开发流程教学内容第1章 网页与网站基础友情链接 网站上有一些链接是指向其他网站的链接，单击这些链接时会打开其他网站的网页，这种链接就是友情链接。在网站推广时，可以和不同的网站交换友情链接，这样用户在访问这些网站时可能单击到自己的网站，可以给网站带来一些流量，在交换友情链接时，需要与这些站点进行联系。1.3 网站开发流程教学内容第1章 网页与网站基础网站竞价排名 竞价排名一般是按网站用户通过搜索引擎对自己网站的有效点击次数计费的，运营商会定期计算网站的有效搜索点击次数进行计费和结算，在搜索引擎中搜索某一个关键字，如搜索结果的末尾有“推广”两个字，则这些搜索结果是被用做推广的，1.3 网站开发流程教学内容1.3.3 1.3.3 维护加密网站维护加密网站1.网站数据库内容维护（1）Access数据库的压缩和修复 Office的Access软件自带有Access数据库压缩功能，可以利用这个功能压缩和修复数据库。将网站的数据库用FTP软件下载到本地计算机，然后用Access打开，选择“工具”“数据库实用工具”“压缩和修复数据库”命令，即可实现Access数据库的压缩和修复。可以发现压缩以后的数据库文件会减少很多。第1章 网页与网站基础1.3 网站开发流程教学内容（2）SQL Server2000的数据库维护 SQL Server 2000数据库有自带的数据库压缩和管理机制，系统会定期自动地完成数据库的压缩和管理等日常维护。针对SQL Server 2000的日常维护，用户需要注意设置网站用户的访问权限。用企业管理器登录远程SQL Server 2000服务器，选择自己网站的数据库，单击“用户”，可以看看自己网站数据库的用户。第1章 网页与网站基础2.网页维护更新 网站在正常运行以后，网站上需要添加新内容时，需要对网站的内容进行及时的更新。静态网站的更新就是增加新的网页内容。动态网站的更新可以在网站后台方便地操作。（1）静态网站的维护更新 （2）动态网站的更新1.4 小结与习题教学内容1.4.1 1.4.1 本章小结本章小结本章主要介绍了网页与网站的基础知识，具体包括以下主要内容。网页网站知识：详细介绍了网页与网站的一些概念、网页特点与网站的分类。介绍网站的特征与结构组成，同时介绍了网页基本组成元素，并就常见的静态和动态网页进行分别介绍。网页编写语言：介绍了HTML语言基本知识，并通过一组实例讲解HTML语言简单的编写过程。同时介绍了CSS代码片段、JavaScript代码片段，以及常用的网页制作与美化工具。网站开发流程：详细介绍了网站总体策划，包括网站定位、域名注册、网站空间、网站设计购买、网站上传等工作。同时介绍了网站的建立、发布和维护网站方法。第1章 网页与网站基础1.4 小结与习题教学内容1.4.2 1.4.2 强化练习强化练习一、选择题1.能被绝大多数的浏览器完全支持的图像格式为()。Agif和jpeg Bgif和png Cjpeg和png Dpng和bmp 第1章 网页与网站基础2.在CSS选择器中表示鼠标移上状态的样式是()。Aa：link Ba：hover Ca：active Da：visited1.4 小结与习题教学内容1.4.2 1.4.2 强化练习强化练习3.下列说法正确的是（）A创建网页前必须应先创建站点 B创建网页就是创建站点 C创建网页也可以不必创建站点 D网页和站点都是文件 第1章 网页与网站基础4.下列哪种软件不能编辑html语言的是()。A记事本 BFront Page CWord DC语言5.当鼠标停留在超链接上时会出现标记定义的文字是()。Atitle Bhref Ctable Dword 1.4 小结与习题教学内容1.4.2 1.4.2 强化练习强化练习二、判断题1.使用模板能够做到使众网页风格一致、结构统一。()2.基于模板的文件只能在模板保存时得到更新。()3.在网页的源代码中表示段落的标记是。()4.某个网页中使用了库以后，只能更新不能分离。()5.获取网站空间方法有申请免费主页、申请付费空间、自己架设服务器。()第1章 网页与网站基础三、问答题1.简述网页特点。2.简述网站的特征。3.请使用HTML语言写一段古诗代码。4.简述CSS语言在网页设计中作用。5.请规划设计一个企业网站的开发流程。清华大学出版社 网页设计与制作实例教程高等学校计算机应用规划教材 谢谢使用！联系信箱：