网页网站背景图片

网页制作基础在学习制作一个网页之前,首先应了解一些网页与网站的基本知识,了解常用的网页制作工具,熟悉网站开发的工作流程.
本章主要介绍与网页制作相关的一些基本知识及Web常用术语、网页制作工具、网页图像、动画制作工具与网站开发的工作流程.

任务1认识网页基础知识WWW(WorldWideWeb),中文称为万维网,是Internet中最为精彩的部分.
为了与传统的网络区别,人们将WWW简称为Web,或称为3W.
Web上具有共同的主题、性质相关的一组资源就是Web站点.
Web直译为"网",Web的含义是指通过超链接将各种文档组合在一起,形成一个大规模的信息集合.
知识点:网页的基础知识1.
Web网页的特点浏览Web时所看到的文件称为Web页,又称为网页.
网页可以将不同类型的信息(例如文本、图像、声音和视频等)组合在一个文档中.
由于这些文档是用超文本标记语言HTML表示的,其文件扩展名为.
htm或.
html,因此又称为HTML文档或超文本.
超文本可以给浏览者带来视觉和听觉的享受,所以Web技术又称为超媒体技术.
一个Web由一个或多个Web页组成,这些Web页相互链接在一起,存放在WWW服务器中,以供浏览者访问.
浏览者通过Web页可以进行跳跃式的查询与浏览,可以在世界各地的网络计算机之间自由地、高效率地选择和收集各种各样的信息,而不必知道所浏览的信息来自于哪台计算机.
Web所包含的是双向信息,一方面浏览者可以通过浏览器浏览他人的信息,另一方面浏览者也可以通过Web服务器建立自己的网站和发布自己的信息.
2¤DreamweaverCS6+FlashCS6网页制作技术与案例精解(第2版)高职高专新课程体系规划教材·计算机系列2.
Web网页常用术语当用户制作网页时,了解与熟悉Web站点的有关术语对网页设计是十分重要的,如HTML、URL、网页、主页等术语.

(1)HTMLWeb页是用超文本标记语言HTML(HyperTextMarkupLanguage)表示的.
HTML是一种规范,一种标准.
HTML通过标记符(Tag)标记网页的各个组成部分,通过在网页中添加标记符,指示浏览器如何显示网页内容.
浏览器按顺序阅读网页文件(HTML文件).
以IE浏览器为例,在浏览器窗口的菜单中选择"查看"|"源文件"命令后,系统将自动启动记事本或写字板,并显示该网页的HTML源文件,如图1-1所示.
图1-1查看网页源文件的选项操作和在记事本中查看网页源文件(HTML文件)(2)URLURL是UniformResourceLocator的缩写,其含义是统一资源定位器.
URL的表示可以是绝对的,也可以是相对的.
绝对的URL将完整地给出协议种类(例如HTTP、FTP)、服务器的主机域名、路径和网页文件名.
如图1-2所示是URL为http://www.
163.
com/index.
html的网页.
其中,http表示使用的是超文本传输协议,www.
163.
com表示主机的域名,index.
html表示网页文件名.
(3)网页网页是使用HTML语言所写的文本文件,网页里可以包含文字、表格、图像、超链接、声音和视频等.
每个网页都是磁盘上的一个文件,可以单独浏览.
(4)主页主页(HomePage)也称为首页,它是一个单独的网页,可以存放各种信息;它又是特殊的网页,是浏览者浏览一个网站的起点.
3.
Web网页的基本元素Web网页是一个纯文本文件,通过HTML、CSS等脚本语言对页面元素进行标识,然后由浏览器自动生成的页面.
构建网页的基本元素有文本、图像、超链接、导航栏、表格、3第1章网页制作基础¤高职高专新课程体系规划教材·计算机系列表单、多媒体及特殊效果等.

图1-2浏览器与主页(1)文本网页的主体一般以文本为主.
在制作网页时,可以根据需要设置文本的字体、字号、颜色以及所需要的其他格式.
(2)图像图像可以用作标题、网站标志(Logo)、网页背景、链接按钮、导航栏、网页主图等.

图像使用最多的文件格式是JPEG和GIF格式.
(3)超链接超链接是从一个网页指向另一个目的端的链接,该链接既可以指向本地网站的另一个网页,也可以指向世界各地的其他网页.
(4)导航栏导航栏能使浏览者方便地返回主页或继续下一页的访问.
导航栏可以是按钮、文本或图像.
(5)表格网页中的表格是一种用于控制网页页面布局的有效方法.
(6)表单表单通常用于收集信息或实现一些交互式的效果.
表单的主要功能是接收浏览者在浏览器端的输入信息,然后将这些信息发送到浏览者设置的目的端.
(7)多媒体及特殊效果网页还包含有声音、动画、视频等多媒体元素,以及悬停按钮、Java控件、ActiveX控件等特殊效果.
4¤DreamweaverCS6+FlashCS6网页制作技术与案例精解(第2版)高职高专新课程体系规划教材·计算机系列4.
Web网页的常见类型目前,常见的网页有静态网页和动态网页两种.
静态网页的URL通常以.
htm、.
html、.
shtml、.
xml等形式为后缀,而动态网页的URL一般以.
asp、.
jsp、.
php、.
perl和.
cgi等形式为后缀.
5.
浏览器浏览器的作用是"翻译"HTML标记语言,并按照规定的格式显示出来,因此使用IE等浏览器可以直接访问网页.
浏览器是浏览Internet资源的软件,通过它可以显示各种多媒体网页,连接到不同的Internet服务器,获取各种各样的有用信息.
因此,浏览器是浏览者用于获得Web资源的有力工具.
如图1-2所示,浏览器窗口一般由标题栏、菜单栏、图标组成的工具栏、URL地址栏和页面等部分组成.
浏览器具有以下基本功能.
获取Internet资源.
保存访问记录.
阅读超文本文件.
具有字符格式化功能.
发送或接收E-mail.
具有安全保密功能.
具有书签功能.
处理具有交互功能的FORM表单.
6.
网页制作新手须知假如你从来没有制作过网页,现在希望体会一下制作网页的快乐,那么,你的工作步骤通常包括如下几步.
(1)使用Windows资源管理器规划网站的目录结构.
例如,假定希望创建一个个人站点,其中大致包括个人兴趣(xingqu)、爱好(aihao)和自我简介(jianjie)等内容,那么网站的目录结构可以按图1-3所示进行安排.
因此,规划站点目录结构实际上是一个信息分类管理的过程,用户完全可以自由安排,不过此时应特别注意下面几个问题.
最好在驱动根目录下创建站点文件夹,如在D盘下建立站点根文件夹mywebsite.
文件夹名、网页文件名及网页中所用到图像等素材文件名最好不要使用大写、中文及空格,因为很多网站使用的都是Unix操作系统,该操作系统对大小写敏感,且不能识别中文文件名.
不要将与网页无关的文件放置在站点文件夹中.
(2)启动网页编辑软件Dreamweaver,配置站点.
由于将来必须将上面创建的文件夹结构及以后制作网页时产生的HTML文件及各种图片文件全部发送到某个ISP处,并且要图1-3网站目录规划示例5第1章网页制作基础¤高职高专新课程体系规划教材·计算机系列不断更新文件.
因此,用户必须让Dreamweaver了解自己的网站配置情况,以便让它自动完成这些工作.
(3)制作网页并将某个网页作为网站的入口网页,即主页.
尽管在Dreamweaver中用户可将任何一个网页设置成主页,但是,由于很多ISP要求将主页名称命名为index.
html,因此,用户最好遵守此规定.
(4)在某个ISP处申请一块地皮(空间),此时网站就有了自己的域名.
请留意ISP授予的FTP服务器名称、用户名、口令.
(5)利用Dreamweaver将本计算机上的站点内容上传到所申请的空间中.
以后的工作就是网站维护了,主要包括改进创建的网页、制作新网页、同步更新网站内容等.
任务2认识网页制作工具知识点:网页编辑工具及图像、动画制作工具1.
网页编辑工具过去的网页一般是专业人员利用HTML语言编写实现的.
目前已出现多种可视化程度很高的网页制作工具,设计者不需要掌握专业的网页制作技术也能创作出富有特色、动感十足的网页.
(1)FrontPageFrontPage是Microsoft公司出品的入门级网页编辑软件.
FrontPage支持所见即所得的编辑方式,它不需要用户掌握很深的网页制作技术,甚至可以不了解HTML的语法规则.
只要会使用Word,就能很快学会使用FrontPage,因为它的基本使用方法与Word很相似,可以像Word文档一样在文章中加入表格、图像,甚至可以加入声音、动画和电影.
FrontPage带有的向导和模板能使初学者在编辑网页时感到更加方便.
FrontPage最强大之处是其站点的管理功能.
在更新服务器上的站点时,不需要创建更改文件的目录,FrontPage将自动跟踪文件并复制那些新版的文件.
(2)DreamweaverDreamweaver是Macromedia公司推出的网页制作产品,它是一个用于可视化设计与管理网页和网站的工具,支持最新的Web技术,包含可视化网页设计、图像编辑、全局查找替换、能处理Flash和Shockwave等媒体格式和动态HTML.
它与Macromedia公司的Freehand配合使用,功能更为强大,是目前专业人士首选的网页制作工具.
DreamweaverCS3、FlashCS3、FireworksCS3、PhotoshopCS3Extended被称为"网络四剑客2007".
2.
网页图像与动画制作工具现在的网页通常具有丰富多彩的图像和动画.
对于网页中的图像和动画,既要求质量高,同时又要求文件所占存储空间小.
6¤DreamweaverCS6+FlashCS6网页制作技术与案例精解(第2版)高职高专新课程体系规划教材·计算机系列(1)FlashFlash是Macromedia公司专门为网页设计的一个交互性矢量动画设计软件.
网页设计者可以随心所欲地设计各种动态Logo(商标、图案)、动画和导航条,还可以加入动感音乐,以及其他多媒体的各项功能.
由于矢量图形不会因为缩放而导致影像失真,因此Flash在Web上应用很广泛.
(2)FireworksFireworks是Macromedia公司专门设计的Web图形工具软件,它可以用最少的步骤生成最小但质量很高的JPEG和GIF图像,这些图像可以直接用于网页上.
Fireworks是Web图形工具的首选软件.
(3)PhotoshopPhotoshop是由Adobe公司出品的著名的图形图像处理软件.
它能够实现各种专业化的图像处理,是专业图像创作的首选软件.
(4)UleadGIFAnimatorUleadGIFAnimator是友立(Ulead)公司发布的一个动画GIF制作工具.
它可以将多幅外部图像文件组合成动画,还具有滤镜功能、条幅文字效果等.
网页设计者可使用UleadGIFAnimator快速、轻松地创建和编辑网页动画文件.
(5)COOL3DCOOL3D是友立(Ulead)公司推出的一款优秀的三维立体文字特效工具,它广泛地应用于平面设计和网页制作领域.
COOL3D主要用于制作文字的各种静态或动态特效.
任务3认识网站开发流程知识点:网站开发流程网站设计是一个系统工程,它具有特定的工作流程,只有遵循这个流程才能设计出令人满意的网站.
网站设计主要分为网站规划、网站制作和后期维护等3个阶段,如图1-4所示.
确定主题搜集素材规划网站网站规划推广网站维护更新后期维护网站制作制作网站上传网站测评网站图1-4网站设计的工作流程7第1章网页制作基础¤高职高专新课程体系规划教材·计算机系列1.
网站规划(1)确定网站的主题与名称网站主题是指建立的网站所要包含的主要内容,如旅游、娱乐休闲、体育、新闻、教育、医疗和时尚等.
其中每一大类又可进一步细化为若干小类.
一般来说,确定网站主题应遵循以下原则.
主题鲜明.
一个网站必须要有一个明确的主题,在主题范围内做到内容全而精.

明确设立网站的目的.
体现自己的个性.
设计者应该把自己的兴趣、爱好尽情地发挥出来,突出自己的个性,办出自己的特色.
(2)搜集素材确定网站主题后就要围绕主题搜集素材,作为自己制作网页的素材.
搜集的材料越多,制作网站越容易.
材料既可以从图书、报纸、光盘和多媒体上获得,也可以从网上搜集.

对搜集到的材料应去粗取精,去伪存真.
(3)规划网站规划网站时,首先应把网站的内容列举出来,根据内容列出一个结构化的蓝图,根据实际情况设计各个页面之间的链接.
规划网站的内容应包括栏目的设置、目录结构、网站的风格(即颜色搭配、网站标志Logo、版面布局、图像的运用)等.
主题栏的设置.
在设计网站的主题栏时应注意以下问题:一是要突出主题,把主题栏放在最明显的地方,让浏览者更快、更明确地知道网站所表现的内容;二是要设计一个"最近更新"栏目,让浏览者一目了然地了解更新内容;三是栏目不要设置太多.
目录结构设计.
目录结构设计一般应注意以下问题:一是要按栏目内容建立子目录;二是每个目录下分别为图像文件创建一个子目录images(图像较少时可不创建);三是目录的层次不要太深,主要栏目最好能直接从首页到达;四是尽量使用意义明确的非中文目录.
版面布局.
网页页面的整体布局是不可忽视的.
设计网站时应合理地运用空间,让网页疏密有致、井井有条.
版面布局一般应遵循的原则是:突出重点、平衡和谐,首先将网站标志(Logo)、主菜单等最重要的模块放在突出的位置,然后再排放次要模块(例如搜索、友情链接、计数器、版权信息和E-mail地址等).
此外,其他页面的设计应和首页保持相同的风格,并有返回首页的链接.

网站标志Logo.
Logo最重要的作用就是表达网站的理念、便于人们识别,可以广泛地用于站点的链接和宣传.
如同商标一样,Logo是站点特色和内涵的集中体现.
如果设计的是企业网站,最好在企业商标的基础上设计,保持企业形象的整体统一.
设计Logo的原则是:以简洁的、符号化的视觉艺术把网站的形象和理念展示出来.
如图1-5所示是一些网站的Logo.
颜色搭配.
网页选用的背景应与页面的色调相协调,色彩搭配要遵循和谐、均衡、重点突出的原则.
8¤DreamweaverCS6+FlashCS6网页制作技术与案例精解(第2版)高职高专新课程体系规划教材·计算机系列巨泽科技Logo中国益智网Logo网易Logo搜狐Logo图1-5一些网站的Logo图像的运用.
网页上应适当地添加图像.
使用图像时一般应注意以下问题:一是图像是为主页内容服务的,不能让图像喧宾夺主;二是图像要兼顾大小和美观,图片不仅要好看,还应在保证图片质量的前提下尽量缩小图片的大小(即字节数),图像过大将影响网页的传输速度;三是应合理地采用JPEG和GIF图像格式,颜色较少的(256色以内)图像可处理为GIF格式,色彩比较丰富的图像最好处理为JPEG格式.
2.
网站制作(1)制作网站制作网站主要包括以下几个步骤:建立本地站点.
首先建立站点根文件夹,用于存放首页、相关网页和网站中用到的其他文件.
在站点根文件夹下创建子文件夹,将页面文件和图像文件分开存放.
在站点文件夹中新建所需要的空网页.
设置网页尺寸:页面大小一般选择800*600规格.
设置网页属性:包括页面标题、背景图像、背景颜色、链接颜色和文字颜色等.

向网页中插入文本、图形图像和动画等对象.
建立所需要的超链接.
预览和保存网页.
(2)上传与测评网站测试评估与上传网站是不可分割的两部分.
制作完毕的网页必须进行测试.
测试评估主要包括上传前的兼容性测试、链接测试和上传后的实地测试.
完成上传前所需要的测试后,利用FTP工具将网站发布到所申请的主页服务器上.
网站上传后,继续通过浏览器进行实地测试,发现问题后及时修改,然后再上传测试.
3.
后期维护推广网站.
网页上传之后,需要不断地进行宣传,以便让更多的人了解它,从而提高网站的访问率与知名度.
推广网站的方法很多,例如,利用E-mail、新闻组、9第1章网页制作基础¤高职高专新课程体系规划教材·计算机系列友情链接、到搜索引擎上注册、加入交换广告等.