第3章制作“盛和景园”网站 【导读】 制作网站是网站开发的第二阶段，在此阶段需要把前一阶段设计师所设计的精美网站效果图转换为真正可以供用户使用的网页，而要达到这样的目标，我们第一步就是对效果图进行切割，切割出在网站制作中所需要的图像素材； 第二步是进行网页地制作，在制作过程中，我们主要使用HBuilderX软件创建站点和制作页面。首页是整个网站的入口，同时也是涵盖内容最丰富的页面，因此我们先进行首页的制作，然后再进行内页的制作。 通过本项目的完成，我们可以知道，一个网页的页面结构和外观表现效果是由结构(HTML)、表现样式(CSS)达成的。 视频讲解 3.1任务一： 网站效果图的切割与导出 完成“盛和景园”首页设计页面的切割，准备好网站开发中所使用的图像素材。 在第2章中完成了“盛和景园”网站页面效果图的设计，接下来就要把效果图转换为具体的网页，而在此之前，需要对设计的效果图进行切片操作，从而获得所需图像素材。切片是指将整个网站的效果图通过分割操作生成一个一个的小图，以供后期网站页面制作时使用，这是将网站效果图转换为具体网页文件必不可少的一步。 合理地切图不仅有利于加快网页的下载速度、设计复杂造型的网页及对不同特点的图片进行分格式压缩等，还能合理地使用CSS样式表现图片效果。因此，接下来讲解如何对效果图进行切图。 1. 切图 为了提高浏览器的加载速度，或是满足一些版面设计的特殊要求，通常需要把效果图中有用的部分裁切下来作为网页制作时的素材，这个过程被称为切图。 从切图的定义不难看出，切图主要是为了达到如下两个目的： 提高浏览器的加载速度。 满足设计的特殊要求。 所以切图的对象也是两个： 大图： 当网页上的图片较大时，浏览器下载整个图片需要花费较长的时间，从而让客户长时间地等待，这是大忌。切片的使用很好地解决了这个问题，通过把大图分为多个不同的小图分开下载，这样就大大加快了下载的速度。 特效图片： 在设计页面时为了追求页面的美观，会使用一些特殊效果，比如不规则图形、蒙版、图层样式等，这些都是无法通过CSS代码实现的，因而需要进行切图。 网页中要使用的图片分为两种： 表现图片和内容图片。 表现图片主要用来表现网页的外观，并非是网页的实际内容，这部分图片主要用于装饰，一般这类图片由CSS引入页面中,如栏目标题的背景、各种边框等。 内容图片是将其作为页面内容插入网页中的，它是网站所展示具体信息的一部分，一般应用<img>标签插入页面中，如实景图片、轮播图等。在切图时主要切割的是表现图片，内容图片需要在素材中提供。 2. 切图原则 在进行切图时，应遵循以下原则： 颜色范围的取值： 假如一个区域中颜色对比的范围不是很大，有几种颜色，这样就应该单独地把它切出来，如果就一种颜色，可以用代码来表示背景色。 切片大小： 很多设计师认为要把网页的切片切得越小越好，这是有道理的。切片小，可以加快网页下载图片的速度，让多个图片同时下载而不是只下载一个大图片。所以切片大小要根据实际需要来切，标志logo等主要部分尽量切在一个切片内，防止显示时遇到特殊情况只显示一部分。 切片区域： 保证完整的一部分在一个切片内，例如某区域的标题，方便以后修改。 导出类型： 颜色单一过渡少的图片，应该导出为PNG； 颜色过渡比较多、颜色丰富的图片应该导出为JPG； 有动画的部分应该导出为GIF动画。 图像有很多格式，但是在网页上通常只使用PNG、JPG、GIF这三种格式。 (1) PNG格式。 PNG包括PNG8和真色彩PNG(PNG24和PNG32)。相对于GIF，PNG最大的优势是体积更小，支持Alpha透明(全透明、半透明、全不透明)，并且颜色过渡更平滑，但PNG不支持动画。需要注意的是，IE 6.0可以支持PNG8，但在处理PNG24的透明时会显示为灰色。通常，图片保存为PNG8会在同等质量下获得比GIF更小的体积，而半透明的图片只能用PNG24。 (2) JPG格式。 JPG所能显示的颜色比GIF和PNG要多得多，可以用来保存超过256种颜色的图像，但是JPG使用的是有损压缩的图像格式，这也就意味着每修改一次都会造成一些图像数据的丢失。JPG是特别为照片图像设计的文件格式，网页制作过程中类似于照片的图像，比如横幅广告、商品图片、较大的插图等都应该使用JPG格式。 (3) GIF格式。 GIF最突出的优点就是支持动画。同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎没有损失。而且GIF支持透明(全透明)，因此很适合在互联网上使用。 PNG是目前公认的最适合网络的图像格式，它兼具GIF和JPG的大部分优点，一般导出图片都会选择PNG格式。 网站logo、小图标、按钮、背景等推荐使用PNG格式； 动画使用GIF格式； 高清大图使用JPG格式。 3. 源文件 即使页面做好了，也要保留带切片层的源文件，说不定哪天要修改某一个部分，如文字、颜色调整等。 切片的操作主要是在设计软件中完成的，例如Photoshop或者Fireworks，可以根据自己的喜好选择，因为本书在前面主要介绍的是Photoshop，故在下面的案例中主要以Photoshop为例进行介绍。 1. 创建首页头部的切片 网页头部包括logo、联系电话、快捷功能导航，其中logo为不规则形状，主色调为红色、黑色和绿色； 联系电话包括电话图片、文字； 快捷功能导航包括导航图片和文字。根据切图原则和CSS3技术支持样式，按以下步骤进行切图。 (1) 在“工具箱”中选择“裁剪工具”→“切片工具”，如图3.1所示。 (2) 切出想要logo的范围，选取范围操作就像平时用QQ的截图工具一样，直接拖曳选取切片范围即可，如图3.2所示。 图3.1 图3.2 为了确保切片大小、位置的精确度，建议先绘制参考线，确定切片的范围，再创建切片，此时拖动鼠标进行切割比较容易定位。 应在确定切片范围后，进行切割之前，先隐藏背景，因为背景不利于内容的查看。 (3) 按照步骤(2)的方法，切出“电话”图片，如图3.3所示。 (4) 在切割“快捷功能导航”时，为了保证切图的精确，把“快捷功能导航”先整体切割，如图3.4所示，后期再进行优化。至此，首页头部的切片完成，共创建3个切片。 图3.3 图3.4 2. 创建首页导航的切片 首页导航包括红色渐变、投影背景，9个导航内容， 8个分隔线，其中分隔线由深红色、浅红色两个1像素的细线组成，因此只需切出分隔线即可。 将导航背景隐藏，用“切片工具”继续切割分隔线，如图3.5所示。 3. 创建首页主体内容区域切片 (1) 切割“盛和景园展示”区域的展示列表图标图片，首先隐藏该区域的灰色背景，然后用“切片工具”切割所需图片，如图3.6所示。 图3.5 图3.6 (2) 切割“登录/注册”区域的“登录”和“取消”按钮，操作步骤参考操作步骤(1)，然后再切割向右箭头图标，如图3.7所示。 图3.7 在导出切片之前，可以再查看一下各个图片的切割情况，对于不符合需要的切片可以重新编辑它们，切割完成的图片，其切割范围的线为蓝色，如图3.8所示。如果想重新编辑某个切片，只需要在如图3.1所示的“工具箱”中选择“切片选择工具”，单击需要编辑的切片，此时该切片呈现编辑状态，如图3.9所示。 图3.8 图3.9 4. 导出切片 (1) 打开“文件”菜单，选择“存储为Web所用格式”，在弹出的“存储为Web所用格式”对话框的“优化”选项卡中，选择图片格式为默认的PNG8即可，如图3.10所示。 图3.10 在进行切片导出时也可以导出一个或几个图片，如果是一个，单击要导出的切片即可，如果导出几个切片，此时需要按住Shift键去选取要导出的切片，在图片格式中选择需要的格式即可。 (2) 单击“存储”按钮，在弹出的“将优化结果存储为”对话框中选择F:＼sh＼shhome路径，文件名改为sh.png,格式为“仅限图像”，设置为“默认设置”，切片为“所有用户切片”，如图3.11所示，单击“保存”按钮。 图3.11 (3) 保存后会自动在F:＼sh＼shhome路径下创建images文件夹，双击打开images文件夹，如图3.12所示，可以看到，图片的名称都是以sh开头的，但是在给图片命名时应尽量做到“见名知意”，比如logo、tel等，因此需要对图片名称进行重命名，如站标的名称为logo.png，其他图片名称以此类推，但是严禁使用中文命名，否则无法解析。 图3.12 视频讲解 3.2任务二： 创建“盛和景园”网站站点 创建“盛和景园”网站站点。 站点是存放一个网站所有资源的场所，由若干文件和文件夹组成。用户在进行网站开发时，首先要建立站点，以便于组织和管理网站的资源。 站点按站点文件夹所在位置分为两类： 本地站点和远程站点。本地站点是指本地计算机上的一组网站文件，远程站点是指远程Web服务器上的一组网站文件。 用户在进行网站开发时，一般先建立本地站点，站点建立好后再上传到Web服务器上。 在此选择的是Builder这一款开发软件。HBuilder X是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder X的编写用到了Java、C、Web和Ruby。HBuilder X本身主体是由Java编写的，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快是HBuilder X的最大优势，通过完整的语法提示和代码输入法、代码块等，可以大幅提升HTML、JavaScript、CSS的开发效率。 1. 下载和安装HBuilder X 打开浏览器，登录HBuilder X的官方网站，网址是https://www.dcloud.io/hbuilderx.html，如图3.13所示，在该页面中单击DOWNLOAD链接，打开如图3.14所示的下载窗口，在该窗口中选择“标准版”下载。 图3.13 图3.14 HBuilder X是一款绿色软件，下载后，将压缩包解压到适当位置，在解压后的文件夹中找到HbuilderX.exe可执行程序，如图3.15所示，双击即可启动程序。 图3.15 2. 使用HBuilder X HBuilder X在使用的时候有很多技巧，具体可以参考HBuilder的使用教程，读者可以上网搜索。 (1) 启动HBuilder X，选择“文件”→“项目”命令，在弹出的“新建项目”对话框中使用默认的“普通项目”，项目名称为shhome,位置为F:＼sh，选择模板中“基本HTML项目”，如图3.16所示，单击“创建”按钮，“盛和景园”网站站点就建好了，目录结构如图3.17所示。 图3.16 图3.17 其中，index.html是网站的主页，也叫首页，是整个网站的入口页，主页的文件名建议使用index，因为服务器默认自动识别index文件。css文件夹一般用来保存样式文件，img文件夹用来保存图片资源文件，js文件夹用来保存JavaScript脚本文件。 (2) 将之前已经切割好的images文件夹中的图片复制一份到img文件夹。 (3) 在css文件夹目录上右击，在弹出的快捷菜单中选择“新建”→“CSS文件”命令，分别创建首页样式文件index.css和通用样式文件base.css。 (1) css、img、js是行业内存放表现样式、图像素材、JavaScript脚本文件的文件夹名称，网页制作人员应严格遵守行业命名规范，不要为它们随意命名。 (2) 网页文件的命名规范。 ① 尽量使用英文和小写字母，以字母开头。 ② 长名称或词组使用短横线分隔()。 ③ 尽量“见名知意”，不用无意义的命名，尽量不用拼音命名。 ④ 使用正确的扩展名(.html)。 3．3任务三： 制作“盛和景园”网站页面 完成如图3.18所示“盛和景园”网站首页页面的制作。 图3.18 在3.1节中完成了网页效果图的切图，接下来，需要完成网页的制作，这就需要应用前面提到的HTML5和CSS3知识。 通过查看网页效果图，可以看到网页中有文字、图形、图像、动画等多媒体信息，那么这些信息是如何呈现出来的呢？答案就是通过HTML。HTML作为一种描述性的标记语言，用于描述网页文档中的结构和内容。当浏览器接收到HTML文件后，就会解释、执行里面的标记，然后把标记相对应的结构和内容表现出来。 通过HTML表现出只有结构和内容的网页显然已无法满足现在人们对美的追求，在前面利用Photoshop设计出精美的页面，如果这种效果只停留在图片上，那么显然这种设计就是一种浪费。怎么才能实现一个美观大方的网页页面呢？就是CSS层叠样式表。如果说HTML是人体的骨骼，那么CSS就是美丽的外衣。CSS用于控制网页样式并允许将样式信息和网页内容分离的一种标记性语言，它提供了丰富的格式化功能，如字体样式、颜色、背景和整体排版布局等。 一个完整的网页主要由三部分组成： 结构(内容)、表现和行为。其中，各级标题、正文段落、各种列表等构成了网页的“结构(内容)”； 结构和内容中的字号、字体和颜色等样式形成了网页的“外观表现”，即网页的样式； 网页和传统媒体不同的一点是，它是可以随时变化的，而且是可以和读者互动的，称其为网页的“行为”。在本任务中将介绍网页的结构和表现。