网页与网站设计Chap1基础.ppt
网页设计与网站建设,基础知识&HTML基础,1,学习内容,理解网页、网站的相关知识。掌握HTML语言的语法规则，掌握基本的网页标记符和属性。了解网页制作的常用工具。,2,什么是网页？,？网页是一种文件使用HTML语言编写的文件英文名web page 是一种可以在www网上传输，并被浏览器认识和翻译成页面显示出来的文件,3,网站、网页,通常把一系列逻辑上可以视为一个整体的页面叫做网站，或者说，网站就是一个相互链接的网页集合。网站的概念是相对的，大可以到“雅虎网”和“新浪网”这样的大网站，页面多得无法计数；小可以到一些个人网站，可能只有几个网页，仅在一台服务器上占据很小的空间。举例,4,网页的关系,网页与网页之间的关系并不是完全相同的。主页(Home page)是网站中的一个特殊网页，它是进入网站的第一个网页，其中包含指向其他网页的超链接。通常主页的名称是固定的，例如叫做index.htm或 index.html等（.htm或.html后缀表示HTML文档）。,5,网页的分类（1）,根据不同的分类标准，可以对网页进行如下的分类。按网页在网站中所处位置不同，网页可分为主页（如图1-1所示）和内页（如图1-2所示）。1、打开一个网站时看到的第一个页面就是主页，也称为首页；2、与主页相链接的其他各个页面就称之为内页。,6,网页的分类,7,图1-1 图1-2,网页的分类（2）,按网页的表现形式，可将网页分为静态网页和动态网页。一般用户制作的都是静态网页，它是一切网页制作的基础，如果想制作动态网页，那么仍然需要先做好静态页面，然后在此静态页面中加入动态技术，从而制作出十分精彩的动态页面。动态技术：ASP技术 JSP技术.Net技术 PHP技术,8,动态网页举例,自己阅读 查询 部分,9,10,URL（Uniform Resource Locator）即统一的资源定位符,指出资源(例如：网页文件)在Internet中的位置。当用户查询信息资源时，只要给出URL地址，www服务器就可以用它找到网络资源(文件)的位置，并将它传送给用户的计算机。通常，当用户用鼠标单击网页中的链接点时，就将URL地址的请求通过http协议传送给了WWW服务器。,URL,URL的构成,URL（Universal Resources Locator）一个 URL 包括 3 部分：协议、计算机地址、文件路径(文件)。格式：协议：/计算机地址(主机名)/文档名(包括路径),11,http:/,通信协议：也就是上面举例中的“http”部分，它包括HTTP（超文本传输协议）、FTP（文件传输协议）等。主机名：指上面举例中的“”部分，这是新浪网站的主机地址，所要访问的文件路径及文件名：它指明要访问资源的具体位置。在计算机名与文件路径之间，一般用“/”符号隔开。举例,12,http:/,协议,主机名,文档名,内容小节,WWW是Internet上提供的一种服务组成WWW的基本元素是网页，网页也被称为页面或Web页。不同的网页通过超链接联系在一起。自修IP 域名 等必须通过网页（网站）的URL找到资源在Internet上的位置,13,网页制作工具介绍,14,网页制作工具,我们已经知道网页由html语言编写，那么那些工具可以用来帮助我们制作网页呢？windows记事本Editplus,15,编写HTML语言可以在Windows记事本内书写，在存盘输入文件名时，一定要输入HTML语言文件的扩展名：.htm或.html。,网页制作工具,由于网络的迅速发展，网页的需求量很大，网页的复杂性也越来越高，因此，软件生产商开发了许多专门用于网页制作的工具软件。这些软件多采用直观易用的图形界面，无需编辑程序代码，就可以轻松的制作出美观漂亮的网页。这类软件通常也称为所见即所得的网页编辑制作软件。,16,17,可视化网页制作工具,FrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。Microsoft公司将FrontPage封装入Office之中，成为Office家族的一员，使之功能更为强大。,18,可视化网页制作工具,Dreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。Dreamweaver是网页设计者的首选工具。,Macromedia,网页三剑客：Macromedia DreamweaverMacromedia FireworksMacromedia Flash,19,2005年4月18日 adobe公司收购Macromedia公How much？Dreamweaver，Authorware等软件同样归Adobe公司,目前最新版本：cs5,34亿美元,20,网页制作相关工具图形,为了使制作的网页更为美观，用户在利用网页制作工具制作网页时，还需利用网页美化 工具对网页进行美化。1Photoshop Photoshop是由Adobe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具。,21,网页制作相关工具图形,2Fireworks Fireworks是由Macromedia公司开发的图形处理工具，它的出现使Web作图发生了革命性的变化。因为Fireworks是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。,22,网页制作相关工具动画,3Flash Flash是Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。,配置EDITPLUS软件,软件配置以及使用演示一个简单网页的制作以及发布第一次作业,23,Thats all for this chapter!,24,
