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