主题：[转帖]在线网页设计制作实例：圣诞节网页

今年圣诞节打算做点什么作品送给朋友们呢？天极设计在线为大家介绍了那么多的在线制作工具，有你需要的吗？这次我们一起来学习在线制作圣诞节网页如何？

　　一、网页背景制作

Background Image Maker 地址：lab.rails2u.com/bgmaker/

图1，效果预览

　　现在的网页设计师们都喜欢使用斜线效果的网页背景图，初学网页设计的朋友可能不知如何制作此类效果，其实这种效果使用在线背景制作工具就能轻松搞定了。打开http://lab.rails2u.com/bgmaker/这个网址，可看到醒目的“Background Image Maker”标题，页面下左边是设计背景图像的所有工具（图2）。

图1

1.设计背景图案

　　圣诞节来临，互联网上到处都是充满了节日景象，这里我们使用“Background Image Maker”的工具来设计一个喜庆气氛的背景图。首先在网页左边工具菜单面板“Type”的选项中为背景图片挑选一个图案，“Slash”是斜线效果、“Strip”是横线效果、“Dot”的点状效果、“Gradation”是竖行颜色渐变效果（图3）。

图3

　　2.设置图案间距

　　这里我们选择“Slash”斜线效果， 然后在“Margin”边线距离选项中给斜线间距设置为“2”PX（图4）。

图4

　　3.设计图案颜色

　　接下来设计背景图像的颜色了，在“Line Color”中我们可以直接输入颜色代码，或拉动红、蓝、绿三种颜色的滑珠手动调解颜色。使用手动调节方式，可以在拉动滑珠的同时预览到颜色的变换（图5），这样我们很快的调节出红色效果。

图5

　　在“BackgroundColor”中我们还可以为这给背景图像设计它的背景颜色，不过应用于网页背景，直接使用透明“Transparent”效果较好。在背景图像尺寸“Size”选项处，使用“Auto”自动选项可不用限制它的尺寸。如果要增加背景图像的透明度，可在“Alpha”透明度选项中输入数值设定它的透明度，其中“0”为不启用透明效果，“127”完全透明（图6）。

　　4.发布图案

　　最后点击“Make”按钮就得到制作完成的背景图像了，如果为背景图像设计一个背景颜色，制作出来的效果也很漂亮（图7）。希望能立刻使用该背景效果图，从“URL”选项中复制图像的连接地址就ok了。我们可以利用这个链接，在使用Dreamwaver或其它工具制作网页时，让网页背景直接调用这个背景图像。

图7

二、网页图标制作

　　地址：http://ajaxload.info/

　　看到别人网页上使用了一些活波可爱的动态图标，自己也想弄一些到网页上去，可就不知道人家是怎么制作的。http://ajaxload.info/这个网页为大家提供了简单方便的动态图标设计，只需要2分钟就能搞定（图8）。

图8

　　在网页“Indicator Type”选项中挑选一个图标效果，其中有箭头形状、蛇行、球形、花形等多种形状供大家选择。然后在“Background color”中设置动态图标的背景颜色，可选择透明色。不过建议大家还是要为图标设计一个合适的背景色，如果使用透明色，万一图标和网页的背景颜色没有很好的搭配的话，效果会逊色许多（图9）。

图9

　　最后在“Fpreground color”中 设置图标的颜色，点击“Generate it”按钮，稍等一会网页“Preview”的预览界面就会显示出你制作好的图标效果了（图10）。此时可以选择下载这个图标，或者直接拷贝它的网页链接地址，应用到自己的博客、个人主页中。

图10

三、在线网页制作

　　地址：http://pages.google.com/

图11.GooglePages网页缩略图效果

　　前面介绍的两个在线工具都是辅助网页设计的，要制作一个完整的在线网页还需要借助更强大的工具才行，GooglePages为用户提供了比较完善且免费的在线网页制作服务。拥有Gmail账户的用户都可以使用它，每位用户还能免费获得100MB的网页存储空间呢！用Gmail账号登陆Googlepages空间后，可看到如图12的界面效果（图12），这是用户个人网页管理主界面。

图12

　　（一）新建GooglePages网页

　　现在我们使用它制作一个圣诞节网页，首先在“Create a new page”处点击创建新网页的按钮，此时该处会出现输入框要求用户为该网页命名（图13），我们可以输入“Merry Christmas”，点击“Create and Edit”按钮创建新网页。

图13

　　现在我们会进入Merry Christmas网页的详细编辑界面（图14），这里我们可以看到页面顶部是网页管理面板，左边是网页编辑的工具面板，中间是可视网页制作区域，下方还有切换到Html状态的按钮。其中在中间可视网页制作区，它又被分网页头、网页主体、网页尾部几个板块。

图14

　　（二）选择GooglePages网页风格和版式

　　GooglePages为用户提供了多种网页风格模板和网页版式模板供选择。首先点击网页右上角的“Change Look”按钮选择一个好看的风格（图15）。

图15

　　从模板列表中找到好看的风格后，点击它就可以应用到编辑区中。制作圣诞节网页，我们可找一个应景的红色风格（图16）。

图16

　　如果对此模板的版式不太认同，此时可以选择编辑区右上角的“Change Layout”重新设计版式（图16）。

图17

　　这里我们选择左右两排的版式，左边（窄）可作为网页的菜单。选定此版式后返回编辑区，可看到页面已经应用选择改动了（图18）。

图18

　　（三）添加GooglePages网页文字内容

　　下面我们就开始在网页上添加文字和图片设计网页内容了，标题文字可以直接使用网页页面标题的“Merry Christmas”内容，而在标题下方可以写一些文字描述例如“congratulates everybody Merry Christmas”，祝大家圣诞快乐！在页面左边的菜单栏写上网页的栏目，例如“中文版”我们可以制作一个中文版的圣诞节网页。在页面尾部写上网页的一些版权信息，例如“Copyright @2006 12月”。

　　接下来就是选择设定已经输入的这些文字的字体样式，例如我们处理“congratulates everybody Merry Christmas”这一行字，用鼠标选中它之后，在网页左边的工具栏面板上使用文字调色板设计文字的颜色（图19），再选择文字的字体等编辑好它的效果。按照同样的方法，把其它几处的文字效果设计好。

图19

　　现在网页只剩下版面中间的主体部分没有内容了，我们可以从网上搜索一些关于圣诞节的资料（包括图片）填充在里面。文字添加的工作非常简单，我们只需要把它们拷贝粘贴到此处即可（图20），然后自己编排一些文字的样式。

图20

　（四）添加GooglePages网页图片

　　图片的添加有两种方式，一是从本地上传图片，二是调用网上的图片。不管选择什么方式首先要在网页左边的工具面板上选择图片工具。打开图片工具面板后，选择添加图片的方式，例如调用网上的图片，在输入图片地址的位置输入图片的URL地址，稍等一会在这个窗口内就可以预览到调用这个图片效果了（图21）。这里，我们可以使用前面“在线制作动态”介绍的图片制作方法，把做好的动态图标添加到GooglePage网页中使用！

图21

　　图片载入网页编辑区的第一时间，可以用鼠标拖动图片，为它安排一个所在的位置。确定图片在网页中的显示位置之后，选中图片会出现一个工具条，大家可以调节图片的显示尺寸比例（图22）！如果使用网上的图片，添加时可不必这么麻烦，在别的网页上选中图片直接选择复制功能就能把它粘贴到GooglePage的编辑区。

图22

　　（五）发布GooglePages网页

　　网页主体部分的文字和图片内容都添加完毕，这个页面的设计工作也结束了。选择网页上方网页管理工具中的“Publish”（图23）按钮发布网页就得到了我们的圣诞节网页成品。

图23

　　（六）创建GooglePages网页间的链接

　　做好一个页面工作后，我们还可以制作一个中文网页，并让它们之间产生链接，做一个中英文版的圣诞节个人网站。在该页面的“中文版”字样那里选中文字，点击左边的“Link”工具，在弹出的窗口中指定要链接的网页为“Your Page”即自己GooglePages里的网页，然后选择中文版“圣诞节”那个页面，点击“Ok”按钮完成操作（图24）。

图24

　　（七）GooglePages网页制作技巧

　　如果大家认为上面网页制作的方法还是太复杂，那么我们可以灵活的应用GooglePages提供的功能快速制作出漂亮的网页。

　　1.直接拷贝法

　　例如我们在其它网页上想引用这一段内容，包括它的文字、版式、图片和链接，那么直接选中这些内容复制（图25）。

图25

　　这样把这些内容直接粘贴到GooglePages的编辑区就OK了（图26）。

图26

　　2.源代码编辑法

　　熟悉网页Html源代码的朋友，还可直接通过编辑源代码的方式处理GooglePages网页。处理时需要注意的是，GooglePages的网页结构都是分了区块的（前面已介绍过），因此选择了页面下方查看Html按钮后，它显示的只是当前鼠标所在位置的源代码（图27）。

图27