女士短袖t恤

在线网页设计制作实例:圣诞节网页(全文)

时间:2020-05-02 10:26来源:未知 作者:admin 点击:
今年圣诞节打算做点什么作品送给朋友们呢?天极设计在线为大家介绍了那么多的在线制作工具,有你需要的吗?这次我们一起来学习在线制作圣诞节网页如何? 现在的网页设计师们都喜欢使用斜线效果的网页背景图,初学网页设计的朋友可能不知如何制作此类效果,其

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

  

网页设计代码案例在线网页设计制作实例:圣诞节网页(全文)

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

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

  这里我们选择“Slash”斜线效果, 然后在“Margin”边线距离选项中给斜线.设计图案颜色

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

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

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

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

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

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

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

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

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

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

  下面我们就开始在网页上添加文字和图片设计网页内容了,标题文字可以直接使用网页页面标题的“Merry Christmas”内容,而在标题下方可以写一些文字描述例如“congratulates everybody Merry Christmas”,祝大家圣诞快乐!在页面左边的菜单栏写上网页的栏目,例如“中文版”我们可以制作一个中文版的圣诞节网页。在页面尾部写上网页的一些版权信息,例如“Copyright @2006 12月”。接下来就是选择设定已经输入的这些文字的字体样式,例如我们处理“congratulates everybody Merry Christmas”这一行字,用鼠标选中它之后,在网页左边的工具栏面板上使用文字调色板设计文字的颜色(图19),再选择文字的字体等编辑好它的效果。按照同样的方法,把其它几处的文字效果设计好。

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

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

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

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

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

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

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

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

栏目列表
推荐内容