网页设计完整ppt课件

学习目标,网络以其独特的优势渗入到人们的生活中，它已成为人们生活的一个重要组成部分。若想要学习网页制作，需先了解网页的一些基本知识，如网页的定义、分类，制作网页的软件以及网页制作的基本步骤和规则等。本章将讲解网页制作的基础知识，为以后学习网页制作做好铺垫。,1网页制作基础知识,1.1网页的定义和分类1.2网页制作中的基本概念1.3页面的基本组成元素1.4认识网站,1.1网页的定义和分类,在上网时浏览到的一个个页面就是网页，网页又称为Web页，网页中的图像、文字、超级链接等是构成网页的元素。网页可按其在网站中的位置分类，也可按其表现形式分类。,1.1网页的定义和分类,1按位置分类2按表现形式分类,1按位置分类,按网页在网站中的位置可将其分为主页和内页，主页是指进入网站时看到的第一个页面，故也称为首页；内页是指与主页相链接的页面，也就是网站的内部页面。,2按表现形式分类,按网页的表现形式可将网页分为静态网页和动态网页。其含义如下：静态网页动态网页,1.2网页制作中的基本概念,在网页制作过程中常常会遇到一些专业名词，如URL、域名、站点、发布、浏览器、超级链接、导航条和表单等，用户需掌握其含义才能在制作网页时灵活应用。下面将一一讲解这些专业名词。,1.2网页制作中的基本概念,1.URL2.域名3.站点4.发布5.浏览器6.超级链接7.导航条8.表单,1.URL,URL是指全球资源定位器，用来指明通信协议和地址的方式，如就是一个URL。“Http:/”形式的URL用于表示网页的Internet位置，它是提供一种在Internet上查找任何信息的标准方法。,2.域名,域名就如同是网站的名字，任何网站的域名都是全世界惟一的。也可以说域名就是网站的网址，如就是搜狐网站的域名。域名是由固定的网络域名管理组织在全球进行统一管理的，用户需到各地的网络管理机构进行申请才能获取域名，申请成功后便可将网页发布到网上。,3.站点,站点是一个管理网页文档的场所，简单地讲，一个个网页文档连接起来就构成了站点。站点可以小到一个网页，也可大到一个网站。,4.发布,顾名思义，发布就是指把制作好的网页上传到网络上的过程。,5.浏览器,浏览器是一种把在互联网上的文本文档和其他类型的文件翻译成网页的软件。通过浏览器，可以快捷地连接Internet。目前使用较广泛的浏览器主要有Microsoft公司的IE浏览器和腾讯公司的TT浏览器等。,6.超级链接,超级链接能起到将不同页面链接起来的功能，可以是同一站点页面之间的链接，也可以是与其他网站页面之间的链接。超级链接有文字链接和图像链接等。在浏览网页时单击超级链接就能跳转到与之相关的页面。,7.导航条,导航条就如同一个网站的路标，有了它就不会在浏览网站时“迷路”。导航条链接着各个页面，只要单击导航条中的超级链接就能进入相应的页面。,8.表单,表单是具有交互性的动态网页，用于在申请会员和邮箱时提交用户信息。在腾讯网站上申请QQ号的表单页面。,1.3页面的基本组成元素,网页是由多种元素组成的。文本和图像是网页中最基本的元素，是网页信息的主要载体，它们在网页中起着非常重要的作用。其余的元素如超级链接等都是基于这两种基本元素而创建的。,1.3页面的基本组成元素,1文本2图像,1文本,文本在网络上传输速度较快，用户可以很方便地浏览和下载文本信息，故其成为网页主要的信息载体。网页中文本的样式多变，风格不一，吸引人的网页通常都具有美观的文本样式。文本的样式可通过对网页文本的属性进行设置而改变，在后面的章节将详细讲解这方面的知识。,2图像,图像比文本更具有生动性和直观性，它可以传递一些文本不能传载的信息。网站标识Logo、背景等都是图像。,2网页制作的一般步骤,2.1收集、整理资料2.2规划、创建站点2.3制作网页2.4站点测试2.5网页发布2.6站点的更新与维护,2.1收集、整理资料,在确定了制作哪方面的网页后，需收集和整理与网页内容相关的文字资料、图像、动画素材等。如想要制作影视网站就需收集大量中外电影的信息以及演员资料；要制作公司网站就需收集公司的介绍、产品信息和企业文化等。,2.2规划、创建站点,收集好资料后还需对资料进行有效地管理，站点就是管理资料、素材的场所。在创建站点之前需对站点进行规划，站点的形式有并列、层次和网状等，用户需根据实际情况选择。规划站点时应按素材的不同种类分为几个站点，再将收集好的素材分类放置在相应站点中，然后在不同站点中将不同的素材进行细分。站点规划好后即可对其进行创建了。,2.3制作网页,网站是由多个页面链接而成的。在制作网页时需注意以下几方面的问题，以便浏览者轻松浏览网站。,2.3制作网页,1.页面框架的构建2.导航条3.返回首页链接4.添加网页元素,1.页面框架的构建,页面框架的构建是指对网页的整体布局，针对网页中的内容应将网页有条理地划分为几部分。,2.导航条,导航条应出现在网站的各个页面中，提供各个站点的相关主题，引领浏览者有条理地浏览网站。导航条通常放置在页面的上部或左侧。,3.返回首页链接,在分页面中放置返回首页链接，以便浏览者在访问分页面后快速回到首页，以重新选择其他页面进行浏览。,4.添加网页元素,为网页添加相应的内容，以传递网页信息给浏览者。,2.4站点测试,在制作好网页后，不能立即就发布站点，还需对站点进行测试。站点测试可根据浏览器种类、客户端要求以及网站大小等要求进行测试，通常是将站点移到一个模拟调试服务器上对其进行测试或编辑。,2.4站点测试,测试站点的过程中应注意以下几方面：监测页面的文件大小以及下载速度。运行链接检查报告对链接进行测试。由于在网页制作中，各站点的重新设计、重新调整会使某些链接所指向的页面可能已被移动或删除，所以应检查站点是否有断开的链接，若有则自动重新修复断开的链接。,2.4站点测试,为了使页面不支持的样式、层、插件等在浏览器中能兼容且功能正常，可进行浏览器兼容性的检查。使用“检查浏览器”行为，可自动将访问者定向到另外的页面，这样就可解决在较早版本的浏览器中无法运行页面的问题。网页布局、字体大小、颜色和默认浏览器窗口大小等区别是在目标浏览器检查中无法预见的，需在不同的浏览器和平台上预览页面进行查看。,2.5网页发布,发布站点之前需在Internet上申请一个主页空间，以指定网站或主页在Internet上的位置，在后面的章节中将详细讲解申请主页空间的知识。网页发布通常使用FTP（远程文件传输）软件上传网页到服务器中申请的网址目录下，这样速度较快，也可使用Dreamweaver或FrontPage中的发布站点命令进行上传。,2.6站点的更新与维护,站点上传到服务器后，还需对站点进行更新和维护，以保持站点内容的最新和页面元素的正常。,3网页的制作原则,1.整体规划2.站名要有创意3.鲜明的主题4.通用网页5.动画不能过多6.导航要明朗7.图像优化8.定期更新,1.整体规划,为能合理安排站点中的各项内容，制作网页之前需对整个站点进行有条理的规划。,2.站名要有创意,名称对于网站来说非常重要，有创意的站名能给浏览者留下较深的印象，也有利于网站的宣传和推广。给站点取名时应基于简洁、好记以及与站点内容相适应，此外最好还能让人有耳目一新的感觉。,3.鲜明的主题,标题内容不能太长太复杂，需简单、明了。主题内容需要醒目抢眼，具有较强的针对性。,4.通用网页,为了让大多数浏览者可正常地浏览网页，在制作网页时通常需考虑满足800600像素的显示屏。使用漂亮的网页背景可填充左右两侧多余的空白空间，可使800600像素的网页在分辨率高的显示器中也显得较为美观。,5.动画不能过多,动画元素虽能使网页更加生动，但动画文件通常比较大，若网页中动画过多则会降低网页下载速度，造成网页打开速度慢甚至不能打开网页的状况，因此网页中动画不宜过多。,6.导航要明朗,网页的导航需明确，主页导航条上的链接项目不宜太多，最好只限于几个主要页面，通常用68个链接比较合适，大型网站可适当增加导航链接个数。,7.图像优化,前面说了在网页中动画不能太多，同样图片太多也会影响网页下载的速度。网页中的图片可进行优化，以便在图片大小和显示质量两个方面取得一个平衡，网页中的图像最好保持在10KB（千字节）以下。,8.定期更新,定期更新页面内容或更改主页的样式，才能让浏览者对网站保持一种新鲜感，保持较高的浏览率。,4启动与退出DreamweaverMX2004,4.1启动DreamweaverMX20044.2退出DreamweaverMX2004,4.1启动DreamweaverMX2004,启动DreamweaverMX2004可选择“开始/所有程序/Macromedia/MacromediaDreamweaverMX2004”命令。也可双击DreamweaverMX2004的桌面快捷方式。,启动DreamweaverMX,4.1启动DreamweaverMX2004,首次启动DreamweaverMX2004时，将弹出“工作区设置”对话框。在该对话框中可选择工作区布局，对于初学者来说，基本上不会涉及代码编写，可选择单选按钮。,4.1启动DreamweaverMX2004,选择工作区布局模式后，单击对话框中的按钮，将弹出“产品注册”对话框。在其中选中单选按钮，单击按钮弹出“输入序列号”对话框。在软件包装上找到序列号并输入“输入您的序列号”文本框中。单击按钮，弹出注册Dreamweaver对话框。若此时不想进行网上注册，单击按钮即可进入DreamweaverMX2004的工作界面。,1.4.1启动DreamweaverMX2004,以上是首次启动DreamweaverMX2004所需进行的操作，以后启动会直接进入工作界面。,4.2退出DreamweaverMX2004,在结束网页编辑后若需退出DreamweaverMX2004，操作很简单，直接单击操作窗口右上角的按钮或选择“文件/退出”命令即可。,5DreamweaverMX2004的工作界面,启动DreamweaverMX2004后即可进入其工作界面。,DreamweaverMX2004的工作界面,5DreamweaverMX2004的工作界面,5.1插入栏5.2“文档”工具栏5.3“属性”面板5.4浮动面板组,5.1插入栏,插入栏可方便用户在制作网页过程中快速插入网页元素。Dreamweaver提供了“常用”、“布局”、“表单”、“文本”、HTML、“应用程序”、“Flash元素”、“收藏”8个插入栏，通常默认的是“常用”插入栏。切换插入栏的方法很简单，单击插入栏的按钮，在弹出的菜单中选择相应的命令即可。,5.2“文档”工具栏,“文档”工具栏可用于进行工作布局切换、检查浏览器错误和文档的预览等操作。,5.3“属性”面板,“属性”面板用于查看和设置所选对象的各种属性。单击其右下角的按钮可打开其他的设置项目，此时按钮变为按钮再单击该按钮可将其还原。,5.4浮动面板组,浮动面板组位于编辑窗口右侧，是浮动面板的集合。浮动面板组是站点管理、事件添加等操作的场所。在浮动面板组中单击所需面板栏的图标可展开该面板。展开面板后原来的图标变为形状，单击图标则关闭该面板，只显示其名称。若需显示其他浮动面板，可选择“窗口”菜单中的相应命令。,6上机练习,本次上机练习是为一