搜索
第1章网页制作从零开始学习网页制作，需要先了解网页的相关基础知识，例如，什么是网站、什么是网页、网页由哪些元素组成、使用什么软件可以制作网站、实际制作时该采用哪些流程来完成以及如何才能学好网页制作技术等，本章就来详细介绍这些知识。本章导读什么是网站什么是HTMLHTML快速入门网页制作软件网站的制作流程商业网站开发流程3第1章网页制作从零开始1.1网页制作基础知识在开始学习网页制作之前，应该对网页的基本知识有一定的了解，以减少在制作网页时遇到的麻烦。1.1.1什么是网站网站是由多个网页组成的，但并不只是网页的简单罗列组合，而是通过超级链接方式组成的既有鲜明风格又有完善内容的有机整体，如图1-1所示为“人力资源”网站的所有文件及文件夹。要想制作出一个好的网站，必须了解网站建设的一些基本知识。图1-1“人力资源”网站文件1.1.2如何创建网站要创建网站，首先应使用Dreamweaver或其他软件在本地电脑中完成整个网站的编辑与测试，然后申请域名（用于访问网站，如）和虚拟主机（用于存放网站内容），并上传网站内容到虚拟主机中，最后申请备案，通过备案后就可以通过域名访问网站了，其流程如图1-2所示。图1-2创建网站流程1.1.3什么是网页上网时在浏览器中看到的一个个漂亮的页面就是网页，网页中包括了各种各样的网页按网站内容可将网站分为门户网站、个人网站、专业网站和职能网站4种类型。4中文版Dreamweaver+Flash+Photoshop网页制作从入门到精通（CS6版）入门篇元素，如文本、图像和超级链接等，如图1-3所示为网站中“index.html”页面的显示效果，其中各组成元素的作用介绍如下。图1-3网页主页1．LogoLogo是指网站的标志，通常以图像的形式表现。Logo需有独特的创意以体现该网站的宗旨。如图1-4所示分别为腾讯网、MSN中文网及搜搜网站的Logo。图1-4网站Logo2．表单表单是用于填写申请或提交信息时的交互页面，如电子邮箱、主页空间和QQ号码等的申请页面及登录页面或者进行内容搜索的搜索页面等都是采用表单来实现交互的，如图1-5所示为搜索页面的表单。图1-5表单3．超级链接超级链接有将不同页面链接起来的功能，它可以是同一站点页面之间的链接，也可以是与其他网站页面之间的链接。超级链接有文本链接、图像链接等。在浏览网页时单击超级链接就能跳转到与之对应的页面。表单图像Logo动画文本超级链接在浏览器地址栏中输入要访问的网址后按“Enter”键即可访问该网站。5第1章网页制作从零开始4．动画等多媒体元素动画、音乐等多媒体元素在网页中也运用得非常广泛。网页中常用的音乐格式有mid及mp3两种格式。mid为通过电脑合成的音乐，不能被录制。mp3为压缩文件，其压缩率非常高且音质效果较好，是背景音乐的首选。网页中常用的动画格式主要有两种：一种是gif动画，另一种是swf动画。gif动画是逐帧动画，画面相对比较简单，而swf动画则更富有表现力和视觉冲击力，还可结合声音和互动功能，给浏览者强烈的视听感受。如图1-6所示分别为网站中的gif动画及swf动画。图1-6动画5．文本文本是网页中最基本的组成元素之一。通过它可以详细地将要传达的信息传送给浏览者。它在网络上传输速度快，浏览者可方便地浏览和下载文本信息。因此，文本是网页主要的信息载体。网页中文本的样式繁多、风格不一，吸引人的网页通常都具有美观的文本样式。文本的样式可通过设置网页文本的属性来进行设置。6．图像图像也是网页中不可或缺的元素。图像比文本更直观和生动，并且可以传递一些文本不能传递的信息。网站Logo、Banner、广告等通常都是图像。如图1-7所示为网站中的广告图像。图1-7广告图像1.1.4网页的类型在网站中，网页有两种分类方法：一种是按表现形式分，另一种是按网页的位置分。按网页的表现形式可将网页分为静态网页和动态网页两类，下面分别进行介绍。对于比较大的网站，除了网站首页外，通常还有频道页，频道页下还包括栏目页。6中文版Dreamweaver+Flash+Photoshop网页制作从入门到精通（CS6版）入门篇静态网页：指用HTML语言编写的网页。其制作方法简单易学，但不能进行交互，缺乏灵活性。动态网页：指使用ASP、ASP.NET、PHP、JSP等语言编写的网页，也称为交互式网页，它可以与浏览者进行交互。按网页的位置可将网页分为主页和内页两类，分别介绍如下。主页：指打开网站时看到的第一个页面，也称为首页。内页：指与主页相关联的页面，也就是网站的内部页面。1.1.5网页的相关概念在网页制作过程中，经常会接触到许多和网络相关的专业术语，了解这些专业术语的概念对于网页设计有很大帮助。下面分别进行介绍。浏览器：是用于观看Internet上网页的工具，使用它访问网络就像是在互联网的海洋中冲浪一样，现在浏览器种类众多，如IE、GoogleChrome、Firefox等。万维网：简称（WorldWideWeb），是目前Internet上最流行的一种信息资源。利用万维网可以将全世界的信息链接在一起，可以通过网络访问这些资源并加以利用。文件传输协议：简称FTP（FileTransferProtocol）。它是一种快速、高效和可靠的信息传输方式，通过该协议可以将文件从一台电脑传输到另外一台电脑，实现资源互享。超文本标记语言：简称HTML（HyperTextMarkupLanguage）。网页是通过超文本标记语言创建的，其最基本的特征就是超文本和标记，用HTML编写的网页文件的扩展名一般为htm或html。IP地址：由一组数字和小圆点组合而成，用于标识网络中电脑的位置，如61.172.249.143和192.168.1.25等，在浏览器中输入网站所在服务器的IP地址即可访问该网站。域名：由于IP地址是一长串的数字，因此要记住这些数字非常困难，为了方便记忆，便出现了域名的概念。域名是由英文字符和数字组成的，与固定的IP地址相对应，这些域名通常都比较简短，方便记忆，如。统一资源定位符：简称URL（UniversalResourceLocator），用于定位Internet中某个资源的具体位置，以取得各种服务信息的一种标准方法，如为一个完整的URL。导航条：是多个超级链接的集合，能有效地实现超级链接功能。它包括了整个网站中主要页面的关键词，单击导航条上的超级链接，可以跳转到相应的页面进行浏览。导航条一般分为横式和竖式两种。导航条可以是纯文本、按钮、图片、Flash动画或脚本语言等。发布：将制作好的网页上传到网上的过程即称为发布，也叫做上传或上载。如果做访问网站首页时一般不需要输入网站首页的文件名（如index.aspx），只需输入域名，浏览器就会将页面切换到网站首页页面。7第1章网页制作从零开始好了网页，但没有将网站内容放到主页服务器上，那么仍然无法在互联网上访问到它。1.2网页制作软件一个好的网页常包含文本、图像、动画、音乐以及视频等多种对象，因此在制作过程中需要结合多种软件进行网页编辑、动画制作、图像处理等。下面对这些软件进行详细介绍。1.2.1网页制作“三剑客”网页“三剑客”，顾名思义，是一套强大的网页编辑工具，最初是由Macromedia公司开发，它由Dreamweaver、Fireworks和Flash3个软件组成。Dreamweaver是一个“所见即所得”的可视化网站开发工具软件，主要用于静态网页的开发；Fireworks主要是用于对网页上常用的jpg、gif的图像进行处理的软件，也可用于布局网页；Flash主要用来制作动画。Adobe在收购了Macromedia后，将旗下的代表作Photoshop与Dreamweaver、Flash等进行不断的更新，现已发展到了CS6版本，CS6为用户提供了一些新的选择工具和全新的软件UI，用户可完全摆脱代码的束缚而创造属于自己的HTML5标准网页。鉴于Adobe将Dreamweaver、Flash和Photoshop进行了完美的兼容，因此，它们已成为新的网页制作“三剑客”。1．AdobeDreamweaverCS6AdobeDreamweaverCS6是Adobe公司开发集网页制作和管理网站于一身的“所见即所得”的网页编辑软件，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和浏览器限制的充满动感的网页。其最大的特点就是能够快速创建各种静态、动态网页，除此之外，它还是一个出色的网站管理和维护软件，如图1-8所示为DreamweaverCS6的主界面。图1-8DreamweaverCS6的主界面随着互联网的普及，HTML技术的不断发展和完善，随之产生了众多网页编辑软件，从网页编辑软件基本性质可以分为“所见即所得”网页编辑软件和“非所见即所得”网页编辑器，两者各有千秋。8中文版Dreamweaver+Flash+Photoshop网页制作从入门到精通（CS6版）入门篇2．AdobeFlashCS6AdobeFlashCS6是Adobe公司开发的二维动画软件，主要用于设计和编辑Flash动画，如图1-9所示为FlashCS6的主界面。它附带AdobeFlashPlayer播放器，用于支持Flash动画的播放。图1-9FlashCS6的主界面Flash最大的优点在于可应用互联网网页的矢量动画文件格式，全世界97%的网络浏览器都内建Flash播放器，由于它产生出来的影片swf使用向量运算﹙VectorGraphics﹚的方式，所以存储空间较小，更加利于网络传播。3．AdobePhotoshopCS6AdobePhotoshopCS6是Adobe公司旗下最为出名的图像处理软件之一，它是集图像扫描、编辑修改、图像制作、广告创意、图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和网页美工设计师的喜爱。CS6版本采用了最新的MercuryGraphicsEngine设计开发引擎，其最新的内容识别技术和友好的操作界面可帮助用户更加精准地完成图片编辑，如图1-10所示为PhotoshopCS6的主界面。图1-10PhotoshopCS6的主界面Fireworks可以处理网页中常见格式的图像，广而不精。而Photoshop是专门用来处理图片的。在Adobe公司收购Macromedia后，使Dreamweaver和Flash兼容，因此Photoshop制作网页图像一点也不比Fireworks逊色。9第1章网页制作从零开始1.2.2辅助软件一个优秀的网站除了具有合理的页面布局和友好的用户操作界面外，优美简洁的颜色搭配、适当加入3D动画、视频和有效的推广也是非常重要的。而这些工作也可以借助一些小软件来帮助网页开发人员和推广人员进行高效的完成。1．网页配色软件网页色彩的把握是网页制作中的一个重点和难点，好的网页色彩具有视觉舒适性，便于浏览者经常访问。使用一些专门的网页配色软件可以方便地创建网页色彩方案。用于网页配色的软件也较多，而常用的有玩转颜色（见图1-11）和网页配色等，另外，某些网站也提供网页配色功能，如蓝色理想、模板无忧（见图1-12）等。图1-11玩转颜色软件图1-12模板无忧在线配色工具2．网页推广软件为了提高网站的访问量，需要进行网站的宣传及推广，网站推广的方式很多，包括电子邮件推广、搜索引擎加注、论坛推广、加入友情链接联盟等。当然，借助电子商务师、登录奇兵、网站世界排名提升专家及ActiveWebTraffic等软件进行网站推广也是必不可少的方式。网站推广软件，顾名思义，是通过网络软件将网站信息推广到目标受众。具体包括通过传统的广告、企业形象系统去宣传；通过网络技术的方式，如链接、网络广告等方式宣传。3．网页制作小软件制作网页元素的小软件非常多，如用于制作网页特效的网页特效王，制作3D文字动画的Cool3D，制作网页按钮的CrystalButton，编写网页代码的