网页设计与制作网页制作课程内容:1、网页制作基础知识2、HTML语言3、Dreamveaver4、综合应用(课程实训)第一讲网页制作基础知识在学习网页制作之前,首先应了解一些网页与网站的基本知识,了解常用的网页制作工具,熟悉网站开发流程。本讲要点:网页的基本概念网页包括的主要元素网页制作流程网页制作工具一、网页的基本概念(一)、什么是网页?网页是使用网页制作工作编辑生成或使用HTML语言编写的文本文件,网页里可以包含文字、表格、图像、声音和视频等网页元素。每个网页都是磁盘上的一个文件,可以单独浏览。网页是组成网站的特殊成分,图像、声音、和视频等文件均需要通过网页才能让浏览者看到或听到。一、网页的基本概念(二)、网站的的概念与分类1、网站的的概念网站,也称作站点,英文的名称是WebSite。从逻辑上讲网站就是一个建构在网络上、具有独立名称的逻辑上的独立体。再简单来讲,就是一组具有特殊连接方式的页面群,表现出来就是我们常说的一个网站,比如网易、搜狐、新浪、百度等知名网站。我们个人做的网站虽然规模上不能和大站相比,但它在结构上也是完全独立的。从物理意义上讲,所有的网站都架构在连接到因特网的服务器上,其具体网页文件都存放在一个网站文件夹中。网站的分类方式有多种,这里我们仅就网站的内容与网站的交互性两方面来分类。一、网页的基本概念2、网站的分类(1)按内容分类搜索引擎式网站:以搜索引擎为主要功能。如百度、一搜、Google等。综合性门户网站:以新闻信息、娱乐资讯等为主要功能。如搜狐、新浪、网易、雅虎等。电子商务网站:主要用于网上交易。如:阿里巴巴、易趣等。即时通讯网站:用于实时性网上通讯交流。如腾迅QQ、雅虎等。小型专题或个人主页:多以宣传创建者自身,提供信息,或就某一专题提供最新资讯、历史资料及相关论坛等内容为主要形式。小型企事业网站或个人网站大多采用这种形式。(2)按网站交互性来类单向传递:这类网站重点在宣传自身、介绍产品、发布新闻等。与传统媒体的传播方式相类似,主要是提供资料供用户浏览,其它交流功能则较少。双向交流:更注重网络与用户间信息的互动,网站可按用户的需求提供各种形式的检索,并且用户在网上获取信息的同时,网站也可接收到来自用户的信息,实现信息共享,用户还可加入各种网上互动活动,如参加论坛讨论,进行在线游戏等。一、网页的基本概念(三)、网页是如何被浏览的?网页是能够被浏览器软件识别的文件,但有时也把用浏览器看到的网页文件的内容叫网页或页面。浏览器是专门用于浏览网页的软件,常用的浏览器软件有Microsoft的IE和Netscape的Navigator等。HTML文件中还定义了网页中的各种对象(如:文字,图片,声音,图像,动画)的位置,外形和色彩,各种图像,声音,动画等文件则是网页的素材。网页浏览者在浏览网页时,实际上是将HTML文件及相关的文本、图像、声音等文件下载到自已本地的计算机中,然后由浏览器程序对HTML文件进行解释后显示网页内容。一、网页的基本概念(四)、网页制作常用术语1、HTML文件用超文本标记语言编写的超文本文件称为HTML(HyperTextmark-uplanguage)文件,它能不受各种操作系统限制,独立地运行于各种操作系统平台之上。HTML文件作用:HTML语言主要用于静态网页设计,自1990年起HTML语言就一直被用作WorldWideWeb(WWW)上的信息表示语言,用于描述网页的格式,设计它与WWW上其它主页的链接信息。HTML文件是网页的源文件,是一个放置了标记的ASCII文本文件,通常以.htm或.html为扩展名。一、网页的基本概念2、服务器和客户机浏览者在访问网页时,是由浏览者本地的计算机向存放网页的远程计算机发出一个请求。远程计算机在收到请求后,将所需要的浏览内容(即网页)发送给本地计算机。那么本地的计算机被称为客户计算机(Client),远程存放网页的计算机被称为服务器(Server),根据服务器上运行的程序类型及服务器与客户所使用的通信协议的作用的不同,服务器可分为WWW(Web)服务器,FTP服务器等。一、网页的基本概念3、IP地址和域名IP地址:为了使连接在Internet上的计算机能够互相识别并进行通信,每台连入Internet的计算机必须有个“标识号”,这个标识号便是计算机在Internet中的地址。这个地址是由IP协议进行处理的,故称为计算机的IP地址。IP地址是一个32位的二进制数,IP地址的写法是按8位为一组分组4组,组与组之间用小数点分隔,每组数值用十进制数表示:如:某台计算机的IP地址为202.121.160.78IP地址包含两部分:一部分是网络号,用以区分在Internet上互联的各个网络;另一部分是计算机号,用以区分在同一网络上的不同计算机。域名:Internet规定了一套命令机制,称为域名系统DNS(DomainNameSystem)。按域名系统定义的计算机名字称为域名。如:www.ecupl.edu.cnwww.163.com当用户用域名来访问远程的计算机时,必须由Internet的DNS的名字服务器(NameServer)将域名翻译成对应的32位IP地址,然后才能完成对远程的计算机的访问。一、网页的基本概念4、虚拟主机虚拟主机是使用特殊的软、硬件技术把一台服务器主机分成几十个“虚拟”的服务器主机,每台虚拟主机都具有独立的域名和IP地址(或共亨的IP地址),具有完整的Internet服务器功能。虚拟主机之间完全独立,在外界看来,每台虚拟主机和一台独立的服务器主机完全一样。多台虚拟主机共亨真实主机的资源,这样就可以把网络的开销费用均摊到每台虚拟主机上。可利用虚拟主机技术建立个人主页,在大型网站上(提供存放主页的免费空间,提供免费域名)申请主页空间和域名(免费或收费),获得成功后,把你制作的网页存放在虚拟主机上,这样你就好象在Internet上拥有了自己的服务器和网站。一、网页的基本概念5、统一资源定位器(url)统一资源定位器(UniformResourceLocator)是全球www网服务器资源的标准寻址定位源码,用于确定资源相应的位置及所需检索的文件。其优点是用字符串来指向所需的信息,从而进行资料的检索。URL由3部分组成:Internet协议域名主机路径及文件名http://www.online.ln.cn/index.htm协议有:http://超文本传输协议ftp:文本传输协议telnet:远程登陆协议一、网页的基本概念6、文件传输协议(FTP)文件传输协议(FTP)(filetransferpretocol)用于网络调节点间文件的双向传输,是实现资源共享的重要方式和有效手段之一。FPT是支持用户实现把文件从一台计算机中传输到另一台计算机中,并且能保证传输的可靠性。用户在本地计算机上做好的主页除了用DW4.0上传之外。还可以用FTP上传到达远程的主机中。常用的FTP工具有CuteFTP和LeapFTP等。一、网页的基本概念7.网站的发布网站制作好后还需要发布才能被浏览者浏览。网站的性质不同,发布方式也不同。(1)企业级商业网站的发布如果企业有足够的资金和技术支持,可以考虑创建自己的网络中心。硬件方面需要有性能稳定的服务器、路由器、交换机,并要向当地的电信部门申请网络专线。同时需要有一定数量的专人对网站进行维护和管理。一、网页的基本概念7.网站的发布(2)中小企业级或小型组织社团的网站发布如果没有条件创建独立的网站硬件环境,或者网站规模并不大,不需要创建独立的网站硬件环境,可以选择以下几种小型网站的解决方案。1)租赁虚拟主机:如果网站的内容不是很多,也不需要大量的服务器空间支持数据库,可以采用这种发布方式,也就是租用ISP主机服务器的一定空间,比如100MB,来发布网站,一年需要支付几千元,就可以建立一个功能比较强大的网站。目前,这是大多数中小企业和社会团体、较具规模的各种组织网站多采用的模式。2)服务器托管:如果在网站里需要大量数据库支持,可以采用这种方式。将网络服务器主机存放在某个ISP的网络中心里,借用他们的通信系统接入因接网。ISP的人员还可代为维护,这样既可以节省相当的网络管理人员和许多通信设备的同时,又能达到网站的高性能。3)DDN专线接入:这种方式有些类似于服务器托管,就是也有自己的服务器,但不是存入放在ISP网管中心,而是存放在自己的机房中,利用DDN或其他专线接入方式与ISP的通讯系统相连,由ISP连入因特网,这种方式的费用也很高,因为专线多是每月要收比较贵的月租费,而且还有一个容量问题,如果专线容量较小,网站所能被访问的人数就会较少。一、网页的基本概念7.网站的发布(3)免费主页空间如果只是想建立一个小型的、功能简单的网站,当然也可采用以上形式,但这需要有相应有费用支持,投资与效益的比例关系需要权衡。如果目前还不想投资太多,那么免费主页空间将是较好的选择。但现在较好的免费主页空间不多,且一般不支持ASP、JSP、CGI等高级功能。一、网页的基本概念8、超文本、超媒体、超链接超文本文件(HyperText)就是指在文本中包含了与其他文本的链接的文件。超级链接文本下方带有下划线。超媒体(Hypermedia)进一步扩展了超文本所链接的信息类型。超媒体文件就是一种文字、影像、图片、动画、声音综合在一起的文件。超链接(Hyperlink)是WWW上使用最多的一种技术。它是超文本、超媒体、超链接以及与其媒体之间的链接,也是一种从源端点到目标端点的一种链接。在网页中,当鼠标移到超链接处,会呈现手的的形状,表示单击该处,可以链接到该提示所指的页面。一、网页的基本概念9、主页主页(HOMEPAGE),也称为首页,它和一般网页一样,是一个单独的网页,可以存放各种信息。主页是特殊的网页,是这个站点中所有网页文件的起点和交点,也是浏览者浏览一个网站的起点。主页应给出站点的基本信息和主要内容,使浏览者一目了然地了解站点的基本主题,了解站点的信息是否对自己有用。二、网页包括的主要元素网页中除包含文本、声音外,还包含图像、导航、表格、表单等元素:(1)文本文本是人类最重要的信息载体和交流工具,网页的主体一般以文本为主。在制作网页时,可以根据需要设置文本的字体、字号、颜色以及所需要的其他格式。二、网页包括的主要元素(2)图像图像在网页中可以起到提供信息、展示作品、美化网页以及体现风格等效果。图像可以用作标题、网站标志(Logo)、网页背景、链接按钮、导航栏、网页主图等。由于网络对网页文件的容量要求非常苛刻,因此在网页中只支持压缩比较高的GIF、JPEG、BMP等几种图像格式。(3)动画动画即动态画面,它是由一组静态画面组成的连续播放便形成了动画。动画可由fireworks、flash、3dmax等软件制作。二、网页包括的主要元素(4)导航栏导航栏类似于软件中的菜单,实质上是一串超链接。其作用是目录提纲,是浏览网页的引航路标,使浏览者顺利的浏览网站内容,是建设网站过程中的一条主目录。导航栏可以是按钮、文本或图像。站点的每个网页上均应设置导航栏,导航栏应放置在网页比较明显的位置。(5)超级链接超级链接是网页中很有作的功能,是从一个网页指向另一个目的端的链接,该链接既可以指向本地网站的另一个网页,也可以指向世界各地的其他网页。不论是文字还是图像,都可以设置超级链接。超级链接一般包括两种类型:站内链接和站外链接二、网页包括的主要元素(6)表格网页中的表格是一种用于控制网页页面布局的有效方法。为了达到理想的视觉效果,通常不显示边框。如果网页具有横竖分明的风格,那么一定是由表格辅助布局。(7)表单表单是能够实现人机交互的网页界面,一种特殊的网页元素,通常用于收集或实现一些交互式的效果。表单的主要功能是接收浏览者在浏览器端的输入信息,然后将这些信息发送到浏览者设置的目的端。比如用户注册,要填一些表格,做出一些选择后提交,提交的信息将上传到服务器。(8)多媒体及特殊效果为了吸引浏览者,许多网页还包含有声音、视频等多媒体元素,以及悬停效果、Java控件