首页 > 编程技术 > html

我用Google做网站 GPC初体验

发布时间:2016-9-20 19:05

  Google实验室总是会有许许多多的新奇想法。2006年2月23日,它又给我们带来了惊喜。这一次给我们带来的是一个名叫GPC(Google Page Creator)的东西,利用这个在线网页编辑工具,我们也可以过一回网页制作的瘾了。在免费网页空间铺天盖地的今天,Google又会用怎样的手法来诠释网页制作这一理念呢?就让我们揭开GPC的神秘面纱,一探究竟。

  GPC需要使用Gmail帐号登陆,好在现在Gmail已经是遍地开花了。在浏览器中输入“http://pages.google.com”便可进入GPC。首次登陆会看到一个欢迎界面,这里介绍了GPC的诸多优点。Google在这里表示这个服务“Create your own web pages, quickly and easily.”(快速、简单地创造属于你自己的网页。)在网页下部钩选“I have read and agree to these Terms and Conditions”,再单击“I'm ready to create my pages”就可以进入Google Page Creator的世界了。

  进入之后我们可以看到一个类似于Gmail的页面,此乃网页编辑页面也!我把整个页面分成了5个区域,让我们来看一看各个区域都能实现哪些功能:

  ①在这里可以轻松地发布和管理你的网页。网页编辑完成后可以点击“Publish”发布网页或者点击“Back to Page Manager”进入网站管理。

  ②这里是撤销/重做按钮。

  ③这里可以改变网页的外观和框架。GPC提供了多种网页模板和4种网页框架可供选择。

  ④在这里可以插入图片、创建超链接、改变文字格式等多种操作。

  ⑤单击这里可以设定文字的样式,还可以直接编辑HTML源代码。

  当我们了解了网页编辑器的操作界面后,就让我们动手制作一个首页吧!

  首先单击④区的两个链接,把网页更改成自己喜欢的样式和框架。

  接着就可以在编辑区输入文字了。这个编辑区是所见即所得的,就跟我们用FrontPage等软件一样,可以完美地显示网页的样子。在④区可以设置文字的大小、颜色等选项,在⑤区可以将选定文字设置成一级、二级和三级标题。

  全部是文字的网页肯定不好看,那么就添加几张图片吧!在编辑区将光标定位在要插入图片的地方,点击④区的“Image”按钮,在弹出的对话框中可以选择上传自己的图片还是引用网络中的图片。目前Google为每个用户提供了100MB的网页空间,对于一般的个人网站可以说是绰绰有余。选择图片后点击“Add Image”即可添加图片。在编辑区选择添加的图片,会出现一个工具栏。在这里可以调整图片的大小,制作成缩略图,以适合网页的排版,还可以方便地删除图片。

<

  太长时间没写文章了,主要是工作太忙。今晚上没睡着起来把这篇文章写了希望对初学者提供点帮助,同时也在此再次感谢曾经帮助过我的人与我所看书籍的作者们。

  我们在做网页的时候自己画的图也不错,自己做的布局也很精致,做的图标也很漂亮,第一眼看起来也觉得很漂亮,但是看看就觉得不舒服。也不清楚为什么,这里我告诉你,也许就是你的排版出现问题了。由于排版的不合理,所产生的视觉效果会对读者的眼睛产生一定的疲劳影响,基本的毛病在于“字间距太挤或太宽”、“行距太小或太大”、“段距太少或太多”、“每行字数太多或太少”等这几个常见因素。下面的内容可以从图示中看出效果来,同时我会给大家一个相对比较好的参数供大家参考。当然设计本来就不要太过拘泥,我所提供的都是一般性的提议,不同网站不同对待,不要过于拘泥我所给大家的一些参数。

  大家看到上图,前三个是行距的问题:

  第一个太挤了,都粘在一起了,这样眼睛在看这个文本的时候会需要花点时间去分辨,这样的排版会让读者看得很累。很不舒服。大家看一下自己手头上所做文本的是不是太挤了,如果是那就改一下吧!

  第二个是比较适中的,由于每行分得很清楚,这样看起来有很强的识别性。

  第三个是比较宽的,松了一点,这样看起来也很清楚,但是当你的文章不是一两行而是十几行与几十行的时候你就会觉得文章的连贯性产生了很严重的脱节,一般排版不会越过两个字体高度(2em)

  下面两个就是字数的问题了,第四个每行文字太长,这样看起来头要摇来摇去,这样读者更容易显得很累。因为要不断的转动头,或是让眼球不断的左右摆动。最舒服的方式就是读者一眼看上去就能把一行看完,不然从行末到下一行行首也会形成断裂感。而下面的又太扁了,这样看起来也不是很舒服。由于在不断的换行阅读,眼球也会觉得不舒服。而推荐的最好的字数是: 不大于45个字母,不大于30个汉字。

  上面的图是关于段距的,第一个是比较合适的,这样的把段落分开了,让读者觉得文章并不是很多很难读,而如果不把段落当一回事,任其自然那么就会如下面一样,两段成为一段,这里是两段还好,如果是几十段,那么这个文章就很少有人能读下去了!

  在经典论坛中,发表文章不好设定行距与段距,所以有的朋友在看一些好文章都看不下去,这就是因为文章没有很好的排版。当然有的朋友用的是1024*768的分辨率,看起来就有点吃力,因为一行很多。而800*600的用户就会觉得好得多了!所以我很多文章都在打完之后分行,不然真的没办法让大家看清楚这里讲了什么东西。当然这样的做法也难为了网站的编辑,他每次都要把这些分行去掉才行!呵呵,在此深表歉意!

  补充:

  关于“单词间距”“字母间距”“垂直对齐”“水平对齐”“文字缩进”“空格”“显示”在这里面设置,如下图:




  很多站长都喜欢直接引用友情网站上的图片URL,这样图片要先经过加载才能显示的,各个友情网站的访问速度不一样,整个表格都要等图片都下载完了才能显示出来,这样大大降低了网页的速度。因此,做友情链接时应尽量做到:

  1.只做文字链接:做文字链接是不会延迟网页速度的。

  2.将所有链接放到一个独立的分页去,然后在首页链接上该页。

  3.如果友情链接一定要出现在首页,请将链接所在的整个Table放到页面的最下方,因为页面是由上到下逐行显示的,将其放到页面的最下方,不会延迟其他内容的显示。

  4.友情链接的LOGO图片先下载后再传到自己的网页空间,这样,速度由自己的网站空间决定而不受友情网站的影响。




< 很多时候,我们希望能在个人主页上挂上自己QQ的形象秀。并且达到同步的效果。其实这个功能挺容易的。因为QQ秀的图片不是虚拟的图片共用而是实际存在的。如:以下是我的QQ秀:

    使用代码:<IMG" width=100% src="http://qqshow-user.tencent.com/120673406/10/00/">

    主要你将其中的120673406换成你的QQ号码就OK了。

  全身QQ秀: http://qqshow-user.tencent.com/你的QQ号码/10/00/   

    半身QQ秀: http://qqshow-user.tencent.com/你的QQ号码/11/00/




<

抽时间做了一个经典blog群的可定制flash显示器,暂时命名为经典blog群小贴士吧,共享给大家 :)

作用:嵌入一段代码,可以在网站的自定义区域显示经典blog群里的最新更新信息(注意为了节省空间,目前只支持单行显示)

用法:在网站中嵌入以下推荐代码即可:

推荐代码 :

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash
/swflash.cab#version=7,0,0,0" width="169" height="20" id="bxna" align="middle">
<param name="FlashVars" value="clr=#484848"/>
<param name="movie" value="http://blog./bxna/styles/mxna/bxna.swf" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<embed" width=100% src="http://blog./bxna/styles/mxna/bxna.swf" loop="false" menu="false" quality="high" wmode="transparent" bgcolor="#ffffff" width="169" height="20" name="bxna" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

如果您的网站需要对缺省设置进行修改,请使用下面的可选参数代码,并根据后面的使用帮助对参数进行微调:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=7,0,0,0" width="169" height="20" id="bxna" align="middle">
<param name="FlashVars" value="clr=#484848&speed=1&dfont=隶书&category=Flash&dy=-1.5"/>
<param name="movie" value="http://blog./bxna/styles/mxna/bxna.swf" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<embed" width=100% src="http://blog./bxna/styles/mxna/bxna.swf" loop="false" menu="false" quality="high" wmode="transparent" bgcolor="#ffffff" width="169" height="20" name="bxna" align="middle" allowScriptAccess="sam

标签:[!--infotagslink--]