网页设计与制作基础课件

1、第1章 网页设计与制作基础网页设计与制作基础第第1章章 网页设计与制作基础网页设计与制作基础 1.1 网页概述 1.2 网页相关术语 1.3 网页基本元素 1.4 网页制作与美化工具 1.5 网页制作的原则与步骤 1.6 应用实例用写字板制作网页 本章总结 习题一 第1章 网页设计与制作基础网页设计与制作基础在学习网页设计与制作之前，首先要知道什么是网页。网在学习网页设计与制作之前，首先要知道什么是网页。网页的英文名称为页的英文名称为Web Page，它是用户通过浏览器在，它是用户通过浏览器在Internet上上看到的页面。通常所说的看到的页面。通常所说的Home Page是指首页，即进入网站

2、其是指首页，即进入网站其他页面的他页面的“入口入口”。一个网站可以有多个网页，但只能有一个。一个网站可以有多个网页，但只能有一个首页，如图首页，如图1.1.1所示为所示为“hao123”的首页。的首页。1.1 网页概述第1章 网页设计与制作基础网页设计与制作基础图1.1.1 “hao123”的首页第1章 网页设计与制作基础网页设计与制作基础从文件角度讲，网页是一种由从文件角度讲，网页是一种由HTML语言编写的文本文语言编写的文本文件，所以网页文件又叫做件，所以网页文件又叫做HTML文件，其扩展名为文件，其扩展名为.html或或.htm。网页作为一种文本文件，可以用任意文本编辑器编。网页作为一种

3、文本文件，可以用任意文本编辑器编辑，例如可使用辑，例如可使用Windows系统中的记事本程序，其操作步骤系统中的记事本程序，其操作步骤如下：如下：（1）单击）单击“开始开始”按钮，选择按钮，选择“所有程序所有程序”“附附件件”“记事本记事本”命令，启动记事本程序。命令，启动记事本程序。（2）在记事本中输入）在记事本中输入HTML代码，如图代码，如图1.1.2所示。所示。（3）保存文件，例如以文件名）保存文件，例如以文件名“index.htm”保存到保存到D盘盘根目录下。根目录下。（4）找到该文件，双击鼠标将其打开，如图）找到该文件，双击鼠标将其打开，如图1.1.3所示。所示。第1章 网页设计与

4、制作基础网页设计与制作基础图1.1.2 在记事本中输入HTML代码图1.1.3 浏览网页第1章 网页设计与制作基础网页设计与制作基础在进行网页设计与制作时，经常会遇到一些术语，例如在进行网页设计与制作时，经常会遇到一些术语，例如URL、Internet、WWW和浏览器、和浏览器、IP地址和域名等。如果不地址和域名等。如果不了解这些术语，在以后制作网页时将会遇到很多的麻烦，下了解这些术语，在以后制作网页时将会遇到很多的麻烦，下面对这些术语一一进行解释。面对这些术语一一进行解释。1.2 网页相关术语第1章 网页设计与制作基础网页设计与制作基础（1）URL。URL的英文全名为的英文全名为Unifor

5、m Resource Locator，中文译名为统一资源定位器。它的功能是提供一种，中文译名为统一资源定位器。它的功能是提供一种在在Internet上查找任何信息的标准方法，用户只要在浏览器中上查找任何信息的标准方法，用户只要在浏览器中输入输入URL的内容，便可以得到它指定的相关文件。简单地说，的内容，便可以得到它指定的相关文件。简单地说，URL就是就是WWW服务器主机的地址，也叫网址。使用最广的服务器主机的地址，也叫网址。使用最广的URL形式是用于表示网页位置的形式是用于表示网页位置的“http:/”。（2）Internet。Internet即互联网，也叫因特网，是将全即互联网，也叫因特网，

6、是将全球五大洲的各种电脑网络连接起来的全球性网络。球五大洲的各种电脑网络连接起来的全球性网络。Internet提提供各种服务供用户使用，例如供各种服务供用户使用，例如WWW服务（网页浏览服务）、服务（网页浏览服务）、电子邮件服务、网上传呼（如电子邮件服务、网上传呼（如OICQ）、文件传输（）、文件传输（FTP服服务）、在线聊天、网上购物、网络炒股、联网游戏等。务）、在线聊天、网上购物、网络炒股、联网游戏等。第1章 网页设计与制作基础网页设计与制作基础（3）WWW。WWW的英文全名为的英文全名为World Wide Web，又，又称称3W或或Web，中文译名为万维网。，中文译名为万维网。WWW是

7、是Internet提供的服提供的服务之一，它由遍布在务之一，它由遍布在Internet上的称为上的称为Web服务器的计算机组服务器的计算机组成。成。（4）浏览器。浏览器是一种浏览网页的软件，通过它可以）浏览器。浏览器是一种浏览网页的软件，通过它可以方便地浏览方便地浏览Internet上提供的电子邮件、上提供的电子邮件、FTP、网络新闻组和电、网络新闻组和电子公告栏等服务资源。目前，主要的浏览器有子公告栏等服务资源。目前，主要的浏览器有Internet Explorer和和Netscape，其版本越高，所支持的网页效果就越多，其版本越高，所支持的网页效果就越多，所以要经常升级。所以要经常升级。第

8、1章 网页设计与制作基础网页设计与制作基础（5）IP地址。为了使连接在地址。为了使连接在Internet上的计算机能够相上的计算机能够相互通信，每台计算机都必须有一个唯一的互通信，每台计算机都必须有一个唯一的“标识号标识号”，即，即IP地址。地址。IP地址是一个地址是一个32位的二进制编码，其标准写法是位的二进制编码，其标准写法是4个十个十进制数，即将进制数，即将32位位IP地址按地址按8位一组分成位一组分成4组，每组数值用一组，每组数值用一个十进制数表示，每组的范围为个十进制数表示，每组的范围为0255，组与组之间用小数，组与组之间用小数点分隔，例如点分隔，例如。 （

9、6）域名。由于）域名。由于IP地址的数字形式难以记忆和使用，地址的数字形式难以记忆和使用，因此人们引入了域名用以代替复杂的因此人们引入了域名用以代替复杂的IP地址。域名是用英文地址。域名是用英文来表示来表示IP地址的。域名是由固定的域名管理组织在全球进行地址的。域名是由固定的域名管理组织在全球进行统一管理的，要获取域名需到各地的网络管理机构进行申请。统一管理的，要获取域名需到各地的网络管理机构进行申请。申请域名后，无论在哪里，只要在与申请域名后，无论在哪里，只要在与Internet相连的浏览器的相连的浏览器的地址栏中输入域名即可登录相应的网站。地址栏中输入域名即可登录相应的网站。第1章 网页设

10、计与制作基础网页设计与制作基础大多数网页都包含站标、导航栏、广告条、色彩、文本、大多数网页都包含站标、导航栏、广告条、色彩、文本、图片和动画等，它们是网页的基本元素，对网页的制作有着举图片和动画等，它们是网页的基本元素，对网页的制作有着举足轻重的作用。足轻重的作用。（1）站标。站标是一个网站的标志，一般位于网页的左）站标。站标是一个网站的标志，一般位于网页的左上角，其作用类似于商品的商标或公司的徽标，如图上角，其作用类似于商品的商标或公司的徽标，如图1.3.1所所示为几个经典站标。示为几个经典站标。1.3 网页基本元素图1.3.1 几个经典站标第1章 网页设计与制作基础网页设计与制作基础（2）

11、导航栏。导航栏其实是一组超级链接，用于完成不同）导航栏。导航栏其实是一组超级链接，用于完成不同网页之间的跳转，通常被置于网页的顶部或一侧，如图网页之间的跳转，通常被置于网页的顶部或一侧，如图1.3.2所示。所示。图1.3.2 导航栏第1章 网页设计与制作基础网页设计与制作基础（3）广告条。广告条又称广告栏，一般位于网页的顶部，）广告条。广告条又称广告栏，一般位于网页的顶部，导航栏的下方，主要用于显示站点服务商要求的一些商业广告。导航栏的下方，主要用于显示站点服务商要求的一些商业广告。（4）色彩。在浏览网页时，最先引起访问者注意的往往）色彩。在浏览网页时，最先引起访问者注意的往往是网页的色彩，其

12、次才是图像和文字。一个网站的色彩不要超是网页的色彩，其次才是图像和文字。一个网站的色彩不要超过过3种，太多会让人感到眼花缭乱。种，太多会让人感到眼花缭乱。 （5）文本。文本是网页发布信息的主要形式，用它制作）文本。文本是网页发布信息的主要形式，用它制作出的网页占用的空间比较小，因此当用户浏览时可以很快地展出的网页占用的空间比较小，因此当用户浏览时可以很快地展现在用户面前。在浏览器中，默认的中文字体为宋体，英文字现在用户面前。在浏览器中，默认的中文字体为宋体，英文字体为体为Times New Roman。也就是说，如果没有设置任何字体，。也就是说，如果没有设置任何字体，网页将以这两种字体显示。网

13、页将以这两种字体显示。第1章 网页设计与制作基础网页设计与制作基础（6）图片。图片是网页十分重要的组成部分，有了图片，）图片。图片是网页十分重要的组成部分，有了图片，网页才能够吸引更多的访问者，才能够更好地表现主题。网页才能够吸引更多的访问者，才能够更好地表现主题。（7）动画。动画是由一组连续播放的静态画面组成的，）动画。动画是由一组连续播放的静态画面组成的，所谓连续播放既指时间上的连续，也指画面内容上的连续，即所谓连续播放既指时间上的连续，也指画面内容上的连续，即播放的相邻两幅图像之间内容相差不大，如图播放的相邻两幅图像之间内容相差不大，如图1.3.3所示为一段所示为一段香蕉卡通动画。网页上

14、的动画主要分为两类：一类是香蕉卡通动画。网页上的动画主要分为两类：一类是GIF格式格式的图片动画，一类是的图片动画，一类是Flash动画。动画。第1章 网页设计与制作基础网页设计与制作基础图1.3.3 香蕉卡通动画第1章 网页设计与制作基础网页设计与制作基础目前，制作网页有两种方法：一种是使用目前，制作网页有两种方法：一种是使用FrontPage，Dreamweaver等网页制作工具进行；另一种是使用等网页制作工具进行；另一种是使用HTML来来编写。由于网页中含有文本、图片、图像、动画、音频、视频编写。由于网页中含有文本、图片、图像、动画、音频、视频等多种信息表达形式，因而还需要使用一些工具对

15、素材进行美等多种信息表达形式，因而还需要使用一些工具对素材进行美化处理。化处理。1.4 网页制作与美化工具第1章 网页设计与制作基础网页设计与制作基础1FrontPage与与Dreamweaver虽然网页的实质是虽然网页的实质是HTML，但现在已经很少有人直接用，但现在已经很少有人直接用HTML来编辑网页了，这是因为来编辑网页了，这是因为HTML不能直观地显示网页设不能直观地显示网页设计的结果，本身也比较枯燥。现在绝大多数的网页设计与制计的结果，本身也比较枯燥。现在绝大多数的网页设计与制作工作都是通过所见即所得的编辑工具完成的。作工作都是通过所见即所得的编辑工具完成的。在所见即所得的网页编辑工

16、具中，应用最为广泛的是在所见即所得的网页编辑工具中，应用最为广泛的是Dreamweaver和和FrontPage。FrontPage作为微软公司的办作为微软公司的办公工具之一，与公工具之一，与Office的其他工具高度兼容，适合于初学者的其他工具高度兼容，适合于初学者使用。与使用。与FrontPage相比，相比，Dreamweaver的排版功能更强，的排版功能更强，操作更灵活，专业性更强，因而已成为专业网页设计人员的操作更灵活，专业性更强，因而已成为专业网页设计人员的常用工具。常用工具。第1章 网页设计与制作基础网页设计与制作基础2FlashFlash是一款矢量图形和交互动画的制作工具，其应用

17、比是一款矢量图形和交互动画的制作工具，其应用比较广泛，从教学演示、网页设计、网站广告、动画较广泛，从教学演示、网页设计、网站广告、动画MTV、作、作品展示到游戏设计，品展示到游戏设计，Flash都能够胜任。都能够胜任。Flash使用插件方式工作，用户只需安装一次插件就可以使用插件方式工作，用户只需安装一次插件就可以数次快速启动并观看动画，而不必像数次快速启动并观看动画，而不必像Java那样每次都要启动那样每次都要启动虚拟机。虚拟机。Flash动画还是一种动画还是一种“准准”流式文件，即观看动画不流式文件，即观看动画不必等到动画全部下载后再观看，而是边下载边看，毫无停滞。必等到动画全部下载后再观

18、看，而是边下载边看，毫无停滞。第1章 网页设计与制作基础网页设计与制作基础3FireworksFireworks是由是由Macromedia公司推出的一款全方位的网公司推出的一款全方位的网页图形制作工具，它既具有图形处理功能，又具有网页编辑页图形制作工具，它既具有图形处理功能，又具有网页编辑功能。它主要用于创建高质量、低尺寸的图形，与功能。它主要用于创建高质量、低尺寸的图形，与Dreamweaver有着非常紧密的集成关系。有着非常紧密的集成关系。Fireworks能自由地导入多种格式的图形进行处理，而能自由地导入多种格式的图形进行处理，而且具有便捷的图形和按钮制作功能，并能快捷地生成网页中且具

19、有便捷的图形和按钮制作功能，并能快捷地生成网页中常用的常用的GIF，JPEG等格式的图像。在将图像导入到网页中时，等格式的图像。在将图像导入到网页中时，Fireworks还会自动将相应的还会自动将相应的HTML和和JavaScript代码放置到代码放置到网页中的正确位置上，从而实现动态效果。网页中的正确位置上，从而实现动态效果。第1章 网页设计与制作基础网页设计与制作基础4PhotoshopPhotoshop是由是由Adobe公司开发的图像处理工具，其功公司开发的图像处理工具，其功能完善，性能稳定，使用方便，被广泛应用于广告、出版等能完善，性能稳定，使用方便，被广泛应用于广告、出版等领域。使用

20、领域。使用Photoshop可以为图像添加切片或超级链接，而可以为图像添加切片或超级链接，而且还可以将图像存储为网页。且还可以将图像存储为网页。除了除了Flash，Fireworks和和Photoshop，还有一些工具可，还有一些工具可用于对网页素材进行美化处理，如用于矢量绘图的用于对网页素材进行美化处理，如用于矢量绘图的Illustrator，CorelDRAW和和FreeHand，用于制作，用于制作GIF动画的动画的GIF Animator，用于制作，用于制作3D特效的特效的Cool 3D等。等。第1章 网页设计与制作基础网页设计与制作基础网页开发不是一项简单的排版工作，它需要在一系列的网

21、页开发不是一项简单的排版工作，它需要在一系列的准备工作后才能进行，要遵循一定的原则和步骤。准备工作后才能进行，要遵循一定的原则和步骤。1.5.1 网页制作的原则网页制作的原则要制作出好的网页，应遵循以下原则：要制作出好的网页，应遵循以下原则：（1）要有充实的内容和浏览价值。）要有充实的内容和浏览价值。（2）网页的布局应有一定的艺术性。）网页的布局应有一定的艺术性。（3）尽量少在网页中插入广告链接，尽量不要使用自动）尽量少在网页中插入广告链接，尽量不要使用自动弹出的窗口。弹出的窗口。1.5 网页制作的原则与步骤第1章 网页设计与制作基础网页设计与制作基础（4）不要每页使用不同的背景图片，以免在每

22、次转换页）不要每页使用不同的背景图片，以免在每次转换页面时花费较多的时间去下载。面时花费较多的时间去下载。（5）底色和背景图片必须要与网页文本对比鲜明，以便）底色和背景图片必须要与网页文本对比鲜明，以便于浏览者的阅读。于浏览者的阅读。（6）每页排版不要用太大的字或图片，以免访问者在浏）每页排版不要用太大的字或图片，以免访问者在浏览网页时要做大幅度的滚动。览网页时要做大幅度的滚动。（7）要有创意，新颖，并有自己的特色。）要有创意，新颖，并有自己的特色。第1章 网页设计与制作基础网页设计与制作基础1.5.2 网页制作的步骤网页制作的步骤在一般情况下，网页制作的步骤如下：在一般情况下，网页制作的步骤

23、如下：（1）选定主题：选定网页的主题以及要涉及的内容。）选定主题：选定网页的主题以及要涉及的内容。（2）搜集资料：依据主题搜集相关的文本、图片、声音）搜集资料：依据主题搜集相关的文本、图片、声音和动画文件，为网页制作奠定基础。若制作公司网页，则需和动画文件，为网页制作奠定基础。若制作公司网页，则需要提供该公司的简介、产品说明及产品图片等；若制作个人要提供该公司的简介、产品说明及产品图片等；若制作个人网页，则应准备个人简历、爱好和特长等材料。网页，则应准备个人简历、爱好和特长等材料。（3）构思：按制订好的主题及方向设计网页的主要部分，）构思：按制订好的主题及方向设计网页的主要部分，并绘制草图，如

24、图并绘制草图，如图1.5.1所示。所示。第1章 网页设计与制作基础网页设计与制作基础图1.5.1 绘制网页草图第1章 网页设计与制作基础网页设计与制作基础（4）制作：用网页制作工具把搜集到的资料按预先的构）制作：用网页制作工具把搜集到的资料按预先的构思放置到适当位置。思放置到适当位置。（5）应用）应用CSS样式：对全部或部分文本应用样式：对全部或部分文本应用CSS样式，样式，增强网页的美感，如图增强网页的美感，如图1.5.2所示。所示。（6）修改：检查是否出现错误，并征求多方意见，对网）修改：检查是否出现错误，并征求多方意见，对网页进行修改。页进行修改。（7）测试：测试网页是否能按预期的效果运

25、行。）测试：测试网页是否能按预期的效果运行。第1章 网页设计与制作基础网页设计与制作基础图1.5.2 应用CSS样式前后的效果第1章 网页设计与制作基础网页设计与制作基础1上机要点在制作过程中主要用到写字板程序，效果如图在制作过程中主要用到写字板程序，效果如图1.6.1所示。所示。1.6 应用实例用写字板制作网页图1.6.1 效果图第1章 网页设计与制作基础网页设计与制作基础2上机目的学习使用学习使用Windows系统中的写字板程序编辑简单网页。系统中的写字板程序编辑简单网页。3上机操作（1）单击）单击“开始开始”按钮，选择按钮，选择“所有程序所有程序”“附附件件”“写字板写字板”命令，启动写

26、字板程序。命令，启动写字板程序。（2）在写字板中输入）在写字板中输入HTML代码，如图代码，如图1.6.2所示。所示。 （3）选择）选择“文件文件”“保存保存”命令，弹出命令，弹出“保存为保存为”对对话框。话框。（4）在）在“文件名文件名”下拉列表框中输入下拉列表框中输入“音乐介绍音乐介绍.htm”，单击单击“保存保存”按钮将其保存。按钮将其保存。（5）找到该文件，双击鼠标左键在）找到该文件，双击鼠标左键在IE浏览器中将其打开，浏览器中将其打开，效果如图效果如图1.6.1所示。所示。第1章 网页设计与制作基础网页设计与制作基础图1.6.2 在写字板中输入HTML代码第1章 网页设计与制作基础网

27、页设计与制作基础本章主要介绍了网页设计与制作的入门知识，包括网页本章主要介绍了网页设计与制作的入门知识，包括网页概述、网页相关术语、网页基本元素、网页制作与美化工具、概述、网页相关术语、网页基本元素、网页制作与美化工具、网页制作的原则与步骤等。通过本章的学习，读者应该了解网页制作的原则与步骤等。通过本章的学习，读者应该了解什么是网页，以及网页的基本组成。什么是网页，以及网页的基本组成。本章总结第1章 网页设计与制作基础网页设计与制作基础一、填空题1_的英文名称为的英文名称为Web Page，它是用户通过，它是用户通过浏览器在浏览器在Internet上看到的页面。上看到的页面。2在浏览器中，默认

28、的中文字体为宋体，英文字体为在浏览器中，默认的中文字体为宋体，英文字体为_。习 题 一第1章 网页设计与制作基础网页设计与制作基础二、选择题1网页的基本元素包括（网页的基本元素包括（ ）等。）等。A导航栏导航栏 B图片图片C色彩色彩 D文本文本2网页制作与美化工具包括（网页制作与美化工具包括（ ）等。）等。ADreamweaver BFlashCFireworks DPhotoshop三、上机操作题1使用使用IE浏览浏览URL为为http:/的网页。的网页。2上网浏览一些著名网站（如搜狐、网易、新浪、上网浏览一些著名网站（如搜狐、网易、新浪、ChinaRen等）的主页，了解一下构成这些网页的基

29、本元素。等）的主页，了解一下构成这些网页的基本元素。第1章 网页设计与制作基础网页设计与制作基础补充补充1：网页发布的一般过程：网页发布的一般过程 1网页发布的方式网页发布的方式 直接拷贝直接拷贝 利用利用FTP工具传输工具传输常用的常用的FTP传输软件：传输软件：CuteFTP、LeechFTP、QuickFTP、等。、等。 利用开发工具利用开发工具（如（如Dreamweaver）的内置上传）的内置上传功能。功能。第1章 网页设计与制作基础网页设计与制作基础2发布个人网页的一般过程发布个人网页的一般过程 选择选择ISP申请主页空间申请主页空间。申请后会得到一个网。申请后会得到一个网页地址、页

30、地址、FTP主机地址、用户名以及密码等资料。主机地址、用户名以及密码等资料。 上传网页文件上传网页文件。若使用。若使用FTP上传上传,需要在本地机需要在本地机安装一个安装一个FTP软件。上传文件时，需要提供申请软件。上传文件时，需要提供申请得到一个网页地址、得到一个网页地址、FTP主机地址、用户名以及主机地址、用户名以及密码等资料。密码等资料。上传之后，即可通过浏览器访问网页。上传之后，即可通过浏览器访问网页。第1章 网页设计与制作基础网页设计与制作基础CuteFTP使用简介使用简介CuteFTP功能：集成文件上传、下载和网页编辑多功能：集成文件上传、下载和网页编辑多种功能。种功能。 设置站点设置站点启动启动CuteFTP“文件文件/站点管理器站点管理器” 启动启动“站点站点设置设置”窗口建立并设置站点。窗口建立并设置站点。说明：其中的说