网页设计与制作微课教程-全套PPT课件.pptx

单元1网页设计与制作基础

任务1.1认识网页与网站;;任务目标:

（1）认识什么是网页，熟悉网页类型和网页基本构成元素；

（2）了解设计制作网页常用的软件和技术；

（3）认识什么是网站，理解网站的网址与域名；

（4）掌握网站建设的一般流程。

;1.1.1什么是网页

网页（WebPage）是一个包含HTML标签的纯文本文件，它可以在互联网上传输，能被浏览器识别并翻译成页面显示出来，是构成网站的基本元素。在联网的计算机上打开浏览器，在浏览器的地址栏中输入诸如网址，即可在浏览器中打开网站的主页，如图1-1所示。;1.1.2网页类型

网页分为静态网页和动态网页两种类型。

1．静态网页

在网站设计中，使用纯HTML格式的网页通常称为静态网页，它运行于客户端。静态网页扩展名通常为.htm或.html。

2．动态网页

动态网页是指使用ASP、PHP、JSP、ASP.NET等程序生成的网页，动态网页会根据编写的程序访问连接的数据库，可以与浏览者进行交互，也称为交互式网页。;1.1.3网页基本元素

设计网页时要组织好页面的基本元素，同时再配合一些特效，这样才能构成一个图文并茂、绚丽多彩的网页。网页包括文本、图像、音频、视频、动画和超链接等基本元素。

1．文本

文本是网页传递信息的主要载体。文本传输速度快，而且网页中的文本可以设置其大小、颜色、段落、样式等属性，风格独特的网页文本设置会给浏览者以赏心悦目的感觉。;2．图像

图像给人的视觉效果要比文字强烈得多，在网页中灵活运用图像可以起到点缀的效果。

网页上的图像文件大部分是JPEG格式或GIF格式，因为它们除了具有压缩比例高的特点外，还具有跨平台特性。图像在网页中的应用主要有以下几种形式。

图像标题：在网页中一般都有标题，起到导航的作用，应用图像标题可以使网页更加美观。

网页背景：图像的另一个重要应用是作为网页背景，特别是一些个人网站，应用图像背景比较多。;网页主图：在网页上，除了用小的图片美化网页外，有时还会用一些大的图片来突出网页主题，特别是网站主页中用主图的比较多。

超链接：有时可以用图片取代文字作为超链接??钮，使网页更加美观。

3．动画

动画是网页最活跃的元素，有创意的动画是吸引浏览者的有效方法。网页中的动画不宜太多，否则会使浏览者眼花缭乱，无心细看。在网页中加入的动画一般是GIF格式或者SWF格式的动画。

;4．超链接

超链接是最为有趣的网页元素。在网页中单击超链接对象，即可实现在不同页面之间跳转、访问其他网站、下载文件、发送电子邮件等操作。无论是文本还是图像都可以加上超链接标签，当鼠标移至超链接对象上时，鼠标会变成小手形状，单击即可跳转到相应地址（URL）的网页。

在一个完整的网站中，至少要包括站内链接和站外链接。

站内链接：在一个网站的各个网页之间，或者网站的子网站之间创建的超链接，并有能够回到主页的超链接。通过超链接，浏览者可以迅速找到自己需要的信息。;站外链接：在制作的网站上放置一些与网站主题有关的对外链接，不但可以把好的网站介绍给浏览者，而且能使浏览者乐意再度光临该网站。如果对外链接信息很多，可以进行分类。

5．音频和视频

通过音频进行人机交流逐步成为网页交互的重要手段。浏览网页时，一些网页设置了背景音乐，伴随着优美的乐曲，浏览者在网上冲浪会更加惬意。但是加入音乐后，网页文件会变大，下载时间会增加。

在网页中加入视频，会使网页具有较强的吸引力。常见的网络视频有视频短片、远程教学、视频聊天、视频点播和DV播放等。

;1.1.4网页的构成

网页是由一些基本版块组成的，主要包括Logo图标、导航条、Banner、内容版块、版尾版块等，如下图所示。

;Logo图标是企业或网站的标志，通过形象的Logo可以让消费者记住公司主体和品牌文化。

导航条是网站的重要组成部分，通过网站页面中的导航条，可以帮助浏览者迅速查找到需要的信息和内容。

Banner中文直译为旗帜、网幅或横幅，意译为网页中的广告。

内容版块是网页的主体部分，包含文本、图像、动画、视频、超链接等内容。

版尾版块是网站页面最底端的版块，通常放置网站的联系方式、友情链接和版权信息等内容。

;1.1.5网页设计常用程序设计语言

HTML、CSS、JavaScript是网页设计制作最核心也是最基本的应用技术。

1．网页标签语言HTML

HTML是HyperTextMarkupLanguage的缩写，即超文本标签语言。用HTML编写的超文本文档称为HTML文档，该文档以.html或.htm为文件扩展名，它不需要编译工具，可直接在浏览器中执行。HTML是网页技术的核心与基础，不管是制作静态网页，还是编辑动态交互网页，都离不开HTML语言。所以，要灵活地实现想要的网页效果，必须了解HTML语言。;