网页设计与制作基础.ppt

网络规划及艺术设计,第1章网页设计与制作基础,1.1网页概述1.2网页相关术语1.3网页基本元素1.4网页制作与美化工具1.5网页制作的原则与步骤1.6应用实例用写字板制作网页本章总结习题一,网络规划及艺术设计,在学习网页设计与制作之前，首先要知道什么是网页。网页的英文名称为WebPage，它是用户通过浏览器在Internet上看到的页面。通常所说的HomePage是指首页，即进入网站其他页面的“入口”。一个网站可以有多个网页，但只能有一个首页，如图1.1.1所示为“hao123”的首页。,1.1网页概述,网络规划及艺术设计,图1.1.1“hao123”的首页,网络规划及艺术设计,从文件角度讲，网页是一种由HTML语言编写的文本文件，所以网页文件又叫做HTML文件，其扩展名为.html或.htm。网页作为一种文本文件，可以用任意文本编辑器编辑，例如可使用Windows系统中的记事本程序，其操作步骤如下：（1）单击“开始”按钮，选择“所有程序”“附件”“记事本”命令，启动记事本程序。（2）在记事本中输入HTML代码，如图1.1.2所示。（3）保存文件，例如以文件名“index.htm”保存到D盘根目录下。（4）找到该文件，双击鼠标将其打开，如图1.1.3所示。,网络规划及艺术设计,图1.1.2在记事本中输入HTML代码,图1.1.3浏览网页,网络规划及艺术设计,在进行网页设计与制作时，经常会遇到一些术语，例如URL、Internet、WWW和浏览器、IP地址和域名等。如果不了解这些术语，在以后制作网页时将会遇到很多的麻烦，下面对这些术语一一进行解释。,1.2网页相关术语,网络规划及艺术设计,（1）URL。URL的英文全名为UniformResourceLocator，中文译名为统一资源定位器。它的功能是提供一种在Internet上查找任何信息的标准方法，用户只要在浏览器中输入URL的内容，便可以得到它指定的相关文件。简单地说，URL就是WWW服务器主机的地址，也叫网址。使用最广的URL形式是用于表示网页位置的“http:/”。（2）Internet。Internet即互联网，也叫因特网，是将全球五大洲的各种电脑网络连接起来的全球性网络。Internet提供各种服务供用户使用，例如WWW服务（网页浏览服务）、电子邮件服务、网上传呼（如OICQ）、文件传输（FTP服务）、在线聊天、网上购物、网络炒股、联网游戏等。,网络规划及艺术设计,（3）WWW。WWW的英文全名为WorldWideWeb，又称3W或Web，中文译名为万维网。WWW是Internet提供的服务之一，它由遍布在Internet上的称为Web服务器的计算机组成。（4）浏览器。浏览器是一种浏览网页的软件，通过它可以方便地浏览Internet上提供的电子邮件、FTP、网络新闻组和电子公告栏等服务资源。目前，主要的浏览器有InternetExplorer和Netscape，其版本越高，所支持的网页效果就越多，所以要经常升级。,网络规划及艺术设计,（5）IP地址。为了使连接在Internet上的计算机能够相互通信，每台计算机都必须有一个唯一的“标识号”，即IP地址。IP地址是一个32位的二进制编码，其标准写法是4个十进制数，即将32位IP地址按8位一组分成4组，每组数值用一个十进制数表示，每组的范围为0255，组与组之间用小数点分隔，例如。（6）域名。由于IP地址的数字形式难以记忆和使用，因此人们引入了域名用以代替复杂的IP地址。域名是用英文来表示IP地址的。域名是由固定的域名管理组织在全球进行统一管理的，要获取域名需到各地的网络管理机构进行申请。申请域名后，无论在哪里，只要在与Internet相连的浏览器的地址栏中输入域名即可登录相应的网站。,网络规划及艺术设计,大多数网页都包含站标、导航栏、广告条、色彩、文本、图片和动画等，它们是网页的基本元素，对网页的制作有着举足轻重的作用。（1）站标。站标是一个网站的标志，一般位于网页的左上角，其作用类似于商品的商标或公司的徽标，如图1.3.1所示为几个经典站标。,1.3网页基本元素,图1.3.1几个经典站标,网络规划及艺术设计,（2）导航栏。导航栏其实是一组超级链接，用于完成不同网页之间的跳转，通常被置于网页的顶部或一侧，如图1.3.2所示。,图1.3.2导航栏,网络规划及艺术设计,（3）广告条。广告条又称广告栏，一般位于网页的顶部，导航栏的下方，主要用于显示站点服务商要求的一些商业广告。（4）色彩。在浏览网页时，最先引起访问者注意的往往是网页的色彩，其次才是图像和文字。一个网站的色彩不要超过3种，太多会让人感到眼花缭乱。（5）文本。文本是网页发布信息的主要形式，用它制作出的网页占用的空间比较小，因此当用户浏览时可以很快地展现在用户面前。在浏览器中，默认的中文字体为宋体，英文字体为TimesNewRoman。也就是说，如果没有设置任何字体，网页将以这两种字体显示。,网络规划及艺术设计,（6）图片。图片是网页十分重要的组成部分，有了图片，网页才能够吸引更多的访问者，才能够更好地表现主题。（7）动画。动画是由一组连续播放的静态画面组成的，所谓连续播放既指时间上的连续，也指画面内容上的连续，即播放的相邻两幅图像之间内容相差不大，如图1.3.3所示为一段香蕉卡通动画。网页上的动画主要分为两类：一类是GIF格式的图片动画，一类是Flash动画。,网络规划及艺术设计,图1.3.3香蕉卡通动画,网络规划及艺术设计,目前，制作网页有两种方法：一种是使用FrontPage，Dreamweaver等网页制作工具进行；另一种是使用HTML来编写。由于网页中含有文本、图片、图像、动画、音频、视频等多种信息表达形式，因而还需要使用一些工具对素材进行美化处理。,1.4网页制作与美化工具,网络规划及艺术设计,1FrontPage与Dreamweaver虽然网页的实质是HTML，但现在已经很少有人直接用HTML来编辑网页了，这是因为HTML不能直观地显示网页设计的结果，本身也比较枯燥。现在绝大多数的网页设计与制作工作都是通过所见即所得的编辑工具完成的。在所见即所得的网页编辑工具中，应用最为广泛的是Dreamweaver和FrontPage。FrontPage作为微软公司的办公工具之一，与Office的其他工具高度兼容，适合于初学者使用。与FrontPage相比，Dreamweaver的排版功能更强，操作更灵活，专业性更强，因而已成为专业网页设计人员的常用工具。,网络规划及艺术设计,2FlashFlash是一款矢量图形和交互动画的制作工具，其应用比较广泛，从教学演示、网页设计、网站广告、动画MTV、作品展示到游戏设计，Flash都能够胜任。Flash使用插件方式工作，用户只需安装一次插件就可以数次快速启动并观看动画，而不必像Java那样每次都要启动虚拟机。Flash动画还是一种“准”流式文件，即观看动画不必等到动画全部下载后再观看，而是边下载边看，毫无停滞。,网络规划及艺术设计,3FireworksFireworks是由Macromedia公司推出的一款全方位的网页图形制作工具，它既具有图形处理功能，又具有网页编辑功能。它主要用于创建高质量、低尺寸的图形，与Dream