项目一 网页制作基本知识（课件）-《网页设计与制作》同步教学（高教版）

项目一 网页制作基本知识 认识网站与网页 认识网页制作软件和语言 了解网站制作流程 任务一 认识网站与网页 一、网页的本质 网页主要由文字、图像和动画等元素组成。网页包括一组文件，它们分别是网页文件（扩展名为.htm、.asp等）、图像文件（扩展名为.jpg、.gif等）和Flash动画文件（扩展名为.swf）等。 二、网页中的常见元素 从浏览者的角度看，网页中无非就是一些文字、图像、动画等。但从专业的角度来讲，网页中通常包含站标、导航条、广告条、标题栏和按钮等功能元素，如下图所示。 站标 广告条 标题栏 按钮 导航条 1．站标 站标也叫Logo，是网站的标志，其作用是使人看见它就能够联想到企业。 Logo一般采用带有企业特色和思想的图案，或是与企业相关的字符或符号及其变形，当然也有很多是图文组合。 2．导航条 导航条是链接到网站内主要页面的超链接组合，它可以引导浏览者轻松找到网站中的各个页面。设计导航条时，应注意以下几点： 如果网站内容不多，可根据网站风格尝试灵活摆放，也可以使用图片或Flash动画等，如下图所示。 如果网站栏目很多，可以将导航条分为多排放置在Logo的下方或右侧。为便于观看，可为各排设置不同的底色，如下图所示。 3．广告条 广告条又称Banner，其功能是宣传网站或替其他企业做广告。在Banner制作过程中有几点需要注意。 Banner可以是静态的，也可以是动态的。 Banner的体积不宜过大，尽量使用GIF格式图片与动画或Flash动画。 Banner中的文字不要太多。 Banner中图片的颜色不要太多，尤其是GIF格式的图片或动画，要避免出现颜色的渐变和光晕效果。 4．标题栏 此处的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。 标题栏可以是文字加不同颜色的背景，也可以是图片。 标题栏 5．按钮 网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，或数据的传输等。 设计按钮时，有以下几点需要注意。 要保证按钮与页面的协调。 如果按钮上有字则尽量使用单色或渐变色背景。 当页面上有多个按钮时，应分清主次。 三、IP地址、域名和网址 1 ． IP地址 虽然互联网上连接了不计其数的服务器与客户机，但它们并不是杂乱无章的。每一个主机在互联网上都有唯一的地址，我们称这个地址为IP地址（Internet Protocol Address）。IP地址由4个小于256的数字组成，数字之间用点间隔。例如，“61.135.150.126”就是一个IP地址。 2 ．域名 由于IP地址在使用过程中难于记忆和书写，人们又发现了一种与IP地址对应的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。例如，我们只需在浏览器地址栏中输入www.sohu.com，就可以访问搜狐网站。 3 ．网址 网址又叫URL，英文全称是“Uniform Resource Locator”，即统一资源定位符。它是一种网络上通用的地址格式，用于标识网页文件在网络中的位置。 一个完整的网址由通信协议名称、域名或IP地址、网页在服务器中的路径和文件名4部分组成。 四、动态网页与静态网页 从大的方面来讲，网页可分为动态网页（DHTML）和静态网页（HTML）。 静态网页是指完全采用HTML（超文本标记语言）编写的网页，它只供浏览者浏览，而不提供交互功能。 动态网页是指其内容可以发生变化，且能与用户进行交互的网页，如各种论坛、留言板和聊天室等都属于动态网页。 任务二 认识网页制作软件和语言 一、网站管理与网页制作相关软件 目前用于网站管理和网页制作的软件主要是Dreamweaver。 在进行网页制作时，除需要Dreamweaver外，还会用到Fireworks、Flash、Photoshop等辅助软件。 二、网页制作基础——XHTML语言 XHTML是EXtensible HyperText Markup Language（可扩展超文本标记语言）的英文缩写，它的前身是HTML。由于HTML代码烦琐，结构松散，所以推出了XHTML。也可以说，XHTML是HTML的一个升级版本。 XHTML语言的核心是标签（或者称为标记）。也就是说，我们在浏览网页时看到的文字、图像、动画等在XHTML文档中都是用标签来描述的。 三、脚本语言简介 脚本语言是基于对象的编程语言，网页中常用的有VBScript、JScript和JavaScript，主要用来制作一些特殊效果，以弥补XHTML的不足。现在有很多网站都提供网页特效的下载，这些网页特效便是用脚本语言实现的。 任务三 了解网站制作流程 一、确定网站内容 建设网站要有目的性，首先要根据网站的性质和受众，确定网站内容和要实现的功能。 二、规划网站结构 确定网站内容后，就要根据网站的服务内容来规划网站结构。网站结构有两层意思，一是逻辑结构，二是物理结构。逻辑结构主要是指将网站的内容划分成哪些栏目。物理结构是指网站中文件的目录结构。 网站逻辑结构 网站物理结构 三、收集网站素材 客户提供的素材：主要是与产品或企业相关的图像和文字，比如产品外观图像等。 网上收集的素材：主要是一些辅助性图像，这些图像的装饰性较强，比如背景图像等。 独自创作的素材：主要是整个页面中视觉面积最大、最有说服力的图像，比如广告图像、标题图片等。 在开始动手制作网站之前，应事先收集好制作网站时要用到的素材，通常情况下，素材按来源可分为以下几种类型。 四、设计制作网站页面 所谓设计，就是根据前面确定的网站风格，用图像处理软件（如Photoshop、Fireworks等）设计好网页效果图，并将设计好的效果图进行切割导出。 将切割好的图片进行导出后，就可以在Dreamweaver中组织网站内容了。 五、空间和域名申请 1．申请虚拟空间 所谓虚拟空间，是指网站内容所占用的连接到互联网上的服务器空间。要申请虚拟空间，只需登录到任何一家提供虚拟空间服务的网站进行操作即可。 2．申请域名 域名的申请方法与虚拟空间相同，凡提供虚拟空间服务的网站一般都提供域名服务。 六、测试和发布网站 有了空间和域名后，就可以测试并发布网站了，网站测试一般包括服务器稳定和安全测试、程序和数据库测试、网页兼容性测试等。 在上传到主机空间之前，可以先在本地计算机上使用服务器软件（如IIS）进行网站测试。如果在本地计算机可以正常运行，便可以利用Dreamweaver或专门的FTP软件将已完成的网站上传至虚拟主机，进行下一步的测试。 1 ．网站推广 目前，网站推广的方法主要有下面几种。 （1）注册到搜索引擎 （2）交换广告条 （3）宣传 （4）网络广告 （5）报纸、杂志 七、推广和维护网站 2 ．网站维护 网站维护主要是指网站发布后内容的实时更新。为方便网站后期的维护和更新，在上传网站后，最好写一个使用手册，让每个人都能非常容易的上手。 知识拓展 一、网页颜色的选择与搭配 设计网页时，可根据以下原则确定网页的背景色和主色调，并进行颜色搭配。 （1）网页背景颜色最好选择白色或黑色。 （2）可根据网站的性质或网站标志（Logo，又称站标）的颜色确定网页的主色调，并且该主色调应贯穿于网站中的全部网页。 （3）设计网页时可充分利用同类色、邻近色和对比色，以增强网页的层次感、丰富网页的色彩或突出某些重要内容（如导航条或版块标题）。 二、网页版式设计 各种网页的布局都大同小异。例如，几乎所有网页的上部都有站标、导航条和广告条，中间是各个版块，下部为网站信息区。一般的版式设计可采用网格法，即首先确定页面版心尺寸，然后通过绘制网格精心确定各区域的位置和尺寸。 站标 导航栏 广告条 各个版块 网站信息区 三、网页尺寸 目前，我国大部分电脑的显示器都是17英寸，其分辨率通常为1024×768像素。因此，为避免在浏览网页时需频繁拖动水平滚动条，最好将网页宽度设置为1002像素以内。同时，由于浏览者可以利用浏览器的垂直滚动条快速上下滚动网页，因此对网页的高度没有特别的要求，用户可以将首页设计得长一些，以便能容纳较多的内容。 $$