网页设计与制作基础.ppt

网络规划及艺术设计,第1章 网页设计与制作基础,1.1 网页概述 1.2 网页相关术语 1.3 网页基本元素 1.4 网页制作与美化工具 1.5 网页制作的原则与步骤 1.6 应用实例用写字板制作网页 本章总结 习题一,网络规划及艺术设计,在学习网页设计与制作之前，首先要知道什么是网页。网页的英文名称为Web Page，它是用户通过浏览器在Internet上看到的页面。通常所说的Home Page是指首页，即进入网站其他页面的“入口”。一个网站可以有多个网页，但只能有一个首页，如图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的英文全名为Uniform Resource Locator，中文译名为统一资源定位器。它的功能是提供一种在Internet上查找任何信息的标准方法，用户只要在浏览器中输入URL的内容，便可以得到它指定的相关文件。简单地说，URL就是WWW服务器主机的地址，也叫网址。使用最广的URL形式是用于表示网页位置的“http:/”。 （2）Internet。Internet即互联网，也叫因特网，是将全球五大洲的各种电脑网络连接起来的全球性网络。Internet提供各种服务供用户使用，例如WWW服务（网页浏览服务）、电子邮件服务、网上传呼（如OICQ）、文件传输（FTP服务）、在线聊天、网上购物、网络炒股、联网游戏等。,网络规划及艺术设计,（3）WWW。WWW的英文全名为World Wide Web，又称3W或Web，中文译名为万维网。WWW是Internet提供的服务之一，它由遍布在Internet上的称为Web服务器的计算机组成。 （4）浏览器。浏览器是一种浏览网页的软件，通过它可以方便地浏览Internet上提供的电子邮件、FTP、网络新闻组和电子公告栏等服务资源。目前，主要的浏览器有Internet Explorer和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）文本。文本是网页发布信息的主要形式，用它制作出的网页占用的空间比较小，因此当用户浏览时可以很快地展现在用户面前。在浏览器中，默认的中文字体为宋体，英文字体为Times New Roman。也就是说，如果没有设置任何字体，网页将以这两种字体显示。,网络规划及艺术设计,（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的排版功能更强，操作更灵活，专业性更强，因而已成为专业网页设计人员的常用工具。,网络规划及艺术设计,2Flash Flash是一款矢量图形和交互动画的制作工具，其应用比较广泛，从教学演示、网页设计、网站广告、动画MTV、作品展示到游戏设计，Flash都能够胜任。 Flash使用插件方式工作，用户只需安装一次插件就可以数次快速启动并观看动画，而不必像Java那样每次都要启动虚拟机。Flash动画还是一种“准”流式文件，即观看动画不必等到动画全部下载后再观看，而是边下载边看，毫无停滞。,网络规划及艺术设计,3Fireworks Fireworks是由Macromedia公司推出的一款全方位的网页图形制作工具，它既具有图形处理功能，又具有网页编辑功能。它主要用于创建高质量、低尺寸的图形，与Dreamweaver有着非常紧密的集成关系。 Fireworks能自由地导入多种格式的图形进行处理，而且具有便捷的图形和按钮制作功能，并能快捷地生成网页中常用的GIF，JPEG等格式的图像。在将图像导入到网页中时，Fireworks还会自动将相应的HTML和JavaScript代码放置到网页中的正确位置上，从而实现动态效果。,网络规划及艺术设计,4Photoshop Photoshop是由Adobe公司开发的图像处理工具，其功能完善，性能稳定，使用方便，被广泛应用于广告、出版等领域。使用Photoshop可以为图像添加切片或超级链接，而且还可以将图像存储为网页。 除了Flash，Fireworks和Photoshop，还有一些工具可用于对网页素材进行美化处理，如用于矢量绘图的Illustrator，CorelDRAW和FreeHand，用于制作GIF动画的GIF Animator，用于制作3D特效的Cool 3D等。,网络规划及艺术设计,网页开发不是一项简单的排版工作，它需要在一系列的准备工作后才能进行，要遵循一定的原则和步骤。 1.5.1 网页制作的原则 要制作出好的网页，应遵循以下原则： （1）要有充实的内容和浏览价值。 （2）网页的布局应有一定的艺术性。 （3）尽量少在网页中插入广告链接，尽量不要使用自动弹出的窗口。,1.5 网页制作的原则与步骤,网络规划及艺术设计,（4）不要每页使用不同的背景图片，以免在每次转换页面时花费较多的时间去下载。 （5）底色和背景图片必须要与网页文本对比鲜明，以便于浏览者的阅读。 （6）每页排版不要用太大的字或图片，以免访问者在浏览网页时要做大幅度的滚动。 （7）要有创意，新颖，并有自己的特色。,网络规划及艺术设计,1.5.2 网页制作的步骤 在一般情况下，网页制作的步骤如下： （1）选定主题：选定网页的主题以及要涉及的内容。 （2）搜集资料：依据主题搜集相关的文本、图片、声音和动画文件，为网页制作奠定基础。若制作公司网页，则需要提供该公司的简介、产品说明及产品图片等；若制作个人网页，则应准备个人简历、爱好和特长等材料。 （3）构思：按制订好的主题及方向设计网页的主要部分，并绘制草图，如图1.5.1所示。,网络规划及艺术设计,图1.5.1 绘制网页草图,网络规划及艺术设计,（4）制作：用网页制作工具把搜集到的资料按预先的构思放置到适当位置。 （5）应用CSS样式：对全部或部分文本应用CSS样式，增强网页的美感，如图1.5.2所示。 （6）修改：检查是否出现错误，并征求多方意见，对网页进行修改。 （7）测试：测试网页是否能按预期的效果运行。,网络规划及艺术设计,图1.5.2 应用CSS样式前后的效果,网络规划及艺术设计,1上机要点 在制作过程中主要用到写字板程序，效果如图1.6.1所示。,1.6 应用实例用写字板制作网页,图1.6.1 效果图,网络规划及艺术设计,2上机目的 学习使用Windows系统中的写字板程序编辑简单网页。 3上机操作 （1）单击“开始”按钮，选择“所有程序”“附件”“写字板”命令，启动写字板程序。 （2）在写字板中输入HTML代码，如图1.6.2所示。 （3）选择“文件”“保存”命令，弹出“保存为”对话框。 （4）在“文件名”下拉列表框中输入“音乐介绍.htm”，单击“保存”按钮将其保存。 （5）找到该文件，双击鼠标左键在IE浏览器中将其打开，效果如图1.6.1所示。,网络规划及艺术设计,图1.6.2 在写字板中输入HTML代码,网络规划及艺术设计,本章主要介绍了网页设计与制作的入门知识，包括网页概述、网页相关术语、网页基本元素、网页制作与美化工具、网页制作的原则与步骤等。通过本章的学习，读者应该了解什么是网页，以及网页的基本组成。,本章总结,网络规划及艺术设计,一、填空题 1_的英文名称为Web Page，它是用户通过浏览器在Internet上看到的页面。 2在浏览器中，默认的中文字体为宋体，英文字体为_。,习 题 一,网络规划及艺术设计,二、选择题 1网页的基本元素包括（ ）等。 A导航栏 B图片 C色彩 D文本 2网页制作与美化工具包括（ ）等。 ADreamweaver BFlash CFireworks DPhotoshop 三、上机操作题 1使用IE浏览URL为的网页。 2上网浏览一些著名网站（如搜狐、网易、新浪、ChinaRen等）的主页，了解一下构成这些网页的基本元素。,网络规划及艺术设计,补充1：网页发布的一般过程,1网页发布的方式 直接拷贝 利用FTP工具传输 常用的FTP传输软件：CuteFTP、LeechFTP、QuickFTP、FTP Commander等。 利用开发工具（如Dreamweaver）的内置上传功能。,网络规划及艺术设计,2发布个人网页的一般过程 选择ISP申请主页空间。申请后会得到一个网页地址、FTP主机地址、用户名以及密码等资料。 上传网页文件。若使用FTP上传,需要在本地机安装一个FTP软件。上传文件时，需要提供申请得到一个网页地址、FTP主机地址、用户名以及密码等资料。 上传之后，即可通过浏览器访问网页。,网络规划及艺术设计,CuteFTP使用简介 CuteFTP功能：集成文件上传、下载和网页编辑多种功能。 设置站点 启动CuteFTP“文件/站点管理器” 启动“站点设置”窗口建立并设置站点。 说明：其中的“FTP主机地址”、“FTP站点用户名称”、“FTP站点密码”等信息要与申请主页空间时的相应信息一致。,网络规划及艺术设计, 建立远程连接 在 “站点设置”窗口中点击“连接”按钮，或者使用CuteFTP主窗口的“快速连接”功能，即可建立本地机与远程Web服务器的连接。 文件上传和下载 文件上传：建立连接后，选中要上传的文件，使用“上传”命令，即可将本地信息上传到远程主机。 文件下载：建立连接后，选中要下载的文件，使用“下载”命令，即可将远程主机的信息下载到本地机上。,网络规划及艺术设计,申请主页空间-步