网页与网站设计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服务器 。 urlurl url的构成 url（universal resources locator） 一个 url 包括 3 部分：协议、计算机地址、 文件路径(文件)。 格式： 协议：/计算机地址(主机名)/文档名( 包括路径) 11 n/index.htm 通信协议：也就是上面举例中的“http”部分， 它包括http（超文本传输协议）、ftp（文件传 输协议）等。 主机名：指上面举例中的“”部分 ，这是新浪网站的主机地址， 所要访问的文件路径及文件名：它指明要访问资 源的具体位置。在计算机名与文件路径之间，一 般用“/”符号隔开。 举例 12 n/index.ht m 协议 主机名 文档名 内容小节 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 dreamweaver macromedia fireworks macromedia 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公司开发的矢量图形 编辑和动画创作的专业软件，它