GOOGLE PAGE 制作教程

胡杨烈风 2006-11-01

展开全文

[添加flash篇]

现在为止知道的两种方法：
1.采用页面相套

具体方法：
1).先在自己的电脑上用网页编辑器制作带有目标FLASH 的htm页面，然后上传到自己的googlepages。
2).用套用这个代码，尺寸自己调整
<IFRAME border=0 name=x_book marginWidth=0 marginHeight=0 src="http://xxxx.googlepages.com/*.htm (刚刚做的htm)" frameBorder=0 width=650 height=360></IFRAME>

3).弄好之后在googlepages里通过html editor在线编辑功能，将上面的代码粘贴到想要添加flash的功能。publish
完成。

演示地址：http://chaoup.googlepages.com/

2.直接在自己的电脑上用网页编辑器制作带有目标FLASH 的htm页面，然后上传到自己的googlepages。
该flash的显示地址是：http://xxxx.googlepages.com/*.htm

如有更好的方法，请在次跟贴，我们加上。同时感谢lc00 提供的第一种方法。

[添加在线音乐篇]

描述：你将可以听一些你上传到google page里的mp3音乐。
示例：http://gfansbbs.googlepages.com/onlinemusic.htm
教程：
该效果的实现需要添加部分javascript，但是google pages不支持javascript，你需要在自己的电脑上做好后在上传。

1.添加

CODE:

[Copy to clipboard]

该部分脚本添加到</head>前面。

2.添加

CODE:

[Copy to clipboard]

这段代码就没有特别的位置限制了。
不要忘记了上传你的mp3文件到google page 里。
ps：如果你想要添加更多的音乐，可以用下面的代码

CODE:

[Copy to clipboard]

[添加移动文字篇]

描述：你将可以在google page中实现文字的移动效果。
演示：http://gfansbbs.googlepages.com/moving.htm
教程：
只需将下面的代码添加如google page文件的代码中即可：

CODE:

[Copy to clipboard]

<p class="description"> <div id="g_description">
<font color="#FF0000"><marquee>想要添加的移动文字</marquee></font></div></p>

代码放置的位置，你可以自己选。

[添加计数器篇]

1.在自己的gpc上添加计数器

在提供计数器的网站注册一个账户，[提供一个较好的免费计数器：http://www.]，当你注册成功后，statcounter就会要求你设置有关网站计数器的颜色、样式等等细节。这些细节设置完毕，statcounter将自动生成一段HTML代码，添加这段代码到你的googlepages的相应页面的相应位置就可以了。如果你对HTML语言一点都不了解，那也没有关系，下面我教你一步一步地设置。

复制statcounter自动生成的那段HTML代码，
打开googlepage中相要添加计数器的页面，
选择编辑页面的Edit HTML[在页面的左侧]
粘贴你复制的HTML代码到HTML-editor中HTML-code 的尾部，注意一定要加在"<body><html>"前面。
Save, Publish, 你就完成了添加计数器。简单吧

[添加google maps篇]

首先我们申明：关于google pages的教程都为我站原创，我们希望大家在转载我站内容是注明“转载于——搜索风”。我们发现很多的网站转载了我站得教程，没有注明出处，对于这种行为我们表示愤怒与鄙视，同时也会采取技术手段。

演示：http://gfansbbs.googlepages.com/-maps.htm
描述：可以让google maps在你的google page上显示。
教程：
1.将google page空白页面另存为的形式保存在自己的pc上面。取名为-maps[格式为htm]。
2.到google maps developer site 注册一个google maps API，你会得到一个KEY码。
3.用网页编辑器打开文件 -maps.htm
4.在</head> 标签之前添加

CODE:

[Copy to clipboard]

5.添加下面的代码到任何你想要的位置：

CODE:

[Copy to clipboard]

<div id="map" style="width: 400px; height: 300px"></div>

<script type="text/javascript" defer="defer">

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-73.972, 40.747), 4);
var point = new GPoint(-73.972, 40.747);
map.addOverlay(new GMarker(point));

</script>
</div>

其中(-73.972, 40.747)可以变，这个是地球的经纬度值。如果你不知道怎么取经纬度值，你可以在这个国外的网站得到。

6.保存，上传就可以了。

[添加反馈表格篇]

描述：你google page将可以在线给你反馈一些关于网站的信息，这些信息将直接发送到你的email中。
演示：http://gfansbbs.googlepages.com/form.htm
教程：在这里注册一个账户，注册完毕后，你可以选择表格样式等等资料，然后，bravenet会给自动生存一段代码。你将代码添加到你的google page中即可。

bravenet自动生存的代码如下：

CODE:

[Copy to clipboard]

<form>
<input type="hidden" name="cpv" value="2" />

<div style="padding: 2px;">
<div style="font: normal 11px Arial, Sans-Serif;">Name:<br>
<input type="text" name="name" height="10" style=" font: normal 11px Arial, Sans-Serif;"> </div>
<div style="padding-top: 8px; font: normal 11px Arial, Sans-Serif;">E-Mail:<br>
<input type="text" name="email" height="10" style=" font: normal 11px Arial, Sans-Serif;"></div>
<div style="padding-top: 8px; font: normal 11px Arial, Sans-Serif;">Country:<br>
<select name="country" height="10" style=" font: normal 11px Arial, Sans-Serif;">
<option>North America</option>
<option selected="true">  United States of America</option>
<option>  Canada</option>
<option>  </option>
<p> <option>Europe</option>
<option>Austria</option>
<option>  Belgium</option>
<option>  Finland</option>
<option>  France</option>
<option>  Germany</option>
<option>  Greece</option>
<option>  Italy</option>
<option>  Netherlands</option>
<option>  Norway</option>
<option>  Portugal</option>
<option>  Spain</option>
<option>  Sweden</option>
<option>  Switzerland</option>
<option>  United Kingdom</option>
<option>  Rest of Europe</option>
<option>  </option>
<option>Eastern Europe</option>
<option>  Czech Republic</option>
<option>  Hungary</option>
<option>  Poland</option>
<option>  Russia</option>
<option value="0" >  Rest of Eastern Europe</option>
<option value="0">  </option>
<option>Asia Pacific</option>
<option>  Australia</option>
<option>  Hong Kong</option>
<option>  India</option>
<option>  Japan</option>
<option>  Korea</option>
<option>  Mainland China</option>
<option>  Malaysia</option>
<option>  New Zealand</option>
<option>  Taiwan</option>
<option>  Rest of Asia</option>
<option>  </option>
<option>Middle East</option>
<option>  Turkey</option>
<option>  Rest of the Middle East</option>
<option>  </option>
<option>Latin America</option>
<option>  Brazil</option>
<option>  Mexico</option>
<option>  Rest of Latin America</option>
<option>  </option>
<option>Africa</option>
<option>  South Africa</option>
<option>  Rest of Africa</option>
</select></div>
<div style="padding-top: 8px; font: normal 11px Arial, Sans-Serif;">comments:<br>
<textarea cols="25" rows="10" name="comments" style=" font: normal 11px Arial, Sans-Serif;">Type your comments here.</textarea></div>
<div style="padding-top: 8px; font: normal 11px Arial, Sans-Serif;">What do you like:<br>
Apples or Oranges?<br>
<span style="font: normal 11px Arial, Sans-Serif; padding-left: 10px;">Apples</span> <input type="radio" name="fruit" value="Apples" style="border:0px;"> <span style="font: normal 11px Arial, Sans-Serif;">Oranges</span> <input type="radio" name="fruit" value="Oranges" style="border:0px;"></div><br>
<div style="padding-top: 8px; font: normal 11px Arial, Sans-Serif;">Favorite Color(s):<br>
<span style="font: normal 11px Arial, Sans-Serif; padding-left: 10px;">Blue</span> <input type="checkbox" name="colors" value="Blue" style="border:0px; margin: 0 7px 0 5px;"> <span style="font: normal 11px Arial, Sans-Serif;">Green</span> <input type="checkbox" name="colors" value="Green" style="border:0px; margin: 0 0 0 5px;"><br>
<span style="font: normal 11px Arial, Sans-Serif; padding-left: 10px;">Pink</span> <input type="checkbox" name="colors" value="Pink" style="border:0px; margin: 0 7px 0 7px;"> <span style="font: normal 11px Arial, Sans-Serif;">Red</span> <input type="checkbox" name="colors" value="Red" style="border:0px; margin: 0 0 0 16px;"></div>
<br>
<input type="submit" name="submit" value="Submit"><input type="reset" name="reset" value="Reset" style="margin-left: 10px;">
</form>

当然你也可以根据你的需求适度的修改代码。上述代码，你可以自己的需要将部分代码修改，比如”name“修改为“姓名”“country”改为“国家” 等等。
[添加google video篇]

描述：你将可以在google page上添加任何http://video.google.com/上可以提供的video。
示例：http://gfansbbs.googlepages.com/googlevideo.htm
教程：
为了添加google video，我们必须添加一段代码，代码如下[你可以直接复制]

CODE:

[Copy to clipboard]

这段代码的添加方法如同html的编辑，没有特别的地方。
对于上面的代码，它是 google video的文件地址，你可以在google video网站上可以找到。

[直接从GPC登陆gmail篇]

CODE:

[Copy to clipboard]

<form action="https://www.google.com/accounts/ServiceLoginAuth"
method="post" style="margin: 0px;"> <input name="continue"
value="http://gmail.google.com/gmail" type="hidden"> <input
name="service" value="mail" type="hidden"> <input name="rm"
value="false" type="hidden"> <p style="line-height: 200%;"><input
name="Email" alt="" type="text"> login<br><input name="Passwd"
maxlength="25" alt="" type="password"> password<br><input value="sign
in" type="submit"> </p>
</form>

只要将这个代码添加到GPC就可以了。
演示
http://gfansbbs.googlepages.com/login

[添加guestbook篇]

1.访问HTMLgear ，
2.单击 Get this gear，注册一个账户;
3.选择你喜欢的guestbook样式，
4.单击"save & create". HTMLgear会生成一个guestbook的代码。
5.登陆你的Google Page creator，在你想要制作guestbook的页面添加HTMLgear生成的guestbook的代码。记住将代码放在"<body><html>"前面。

[如何使pc上制作与GPC模版相同外观的页面篇]

我想很多的人都在制造googlepages，但是由于google的限制，许多的功能都不能实现，并且google的home页面时无法删掉的。
为了让自己的页面看起来协调一致，我们不得不突破google的限制。废话少说，现在来教大家怎样让自己在pc上制作的页面与google模版有相同的外观。

其实很简单，方法如下：
1）选定自己喜欢的模版，同时用这个模版在googlepages上做一个页面。
2）在浏览器的左上角，文件〉另存为〉[存为html文件]
3）用网页编辑器打开，开始你的修改制作过程，
4）制作完毕，上传。
5）在其他页面链接此页即可。
FINISH！

在Googlepage里运用TiddyWiki的教程

如何在Googlepage里运用TiddyWiki，下面是一个简单的步骤：

1.到敝小站（http://icomesee.googlepages.com/wiki.html）或者TiddlyWiki 使用教學中文（http://web.nlhs./~lss/wiki/TiddlyWikiTutorialTW.html）去了解TiddyWiki是怎么被利用的；

2.下载一个最新版本的空TiddyWiki（这是一个独立的大小不足200K的Html文件，你所有的编辑工作都是在这个单一的文件里操作，你所有加入的文本内容也都在这个文件里，图片除外）。

下载地址：TiddyWiki官方网站（[url]http://www.英文好的进），或是直接下载我提供的中文版(http://icomesee.googlepages.com/empty.rar）。

(注意：当你使用IE编辑的时候，在保存的时候可能有问题，建议下载一个 FireFox)

3.结合TiddlyWiki 使用教學中文版（http://web.nlhs./~lss/wiki/TiddlyWikiTutorialTW.html）教程，开始摸索如何运用TiddyWiki;

4.当你已经可以运用TiddyWiki的时候，思考一个问题如何将TiddyWiki整合到GPC里？有两种方式：a.用iFrame调用~TiddyWiki成为你GPC内的某个页面；b.直接以页面跳转代码将~TiddyWiki作为你的GPC主页面。我是采用了a方式。

5.如果决定采用a方式，你需要修改TiddyWiki的页面风格来与你本来的网页一致，这需要通过修改StyleSheetColors,PageTemplate,StyleSheetLayout这几个Tiddler来实现。你会发现TiddyWiki官方网站提供的empty.html文件是以篮色调为背景的，我正是通过修改，使得本页面以红、灰颜色为主。

6.在调整好你的TiddyWiki后，将其上传到GPC里，通过iFrame或者是页面跳转来引用该页面。引用后的TiddyWiki是无法修改的，你会发现本页面中每个Tiddler原来的edit按钮都变成了view，其它一些编辑功能也都隐藏了。在这种情况下TiddyWiki只能作为你个人的内容展示，而无法与网络其他用户互动。

7.后期更新：在你的本地电脑修改TiddyWiki页，需要的时候，重新上传至GPC里即可。

XHTML之动画文字篇

XHTML之动画文字篇
I. <marquee>标签
只适用于Internet Explorer（官方不推荐使用，不过好像firefox也可以显示动画文字……）
<marquee>标签和属性值被其他浏览器忽略，但它的内容不会被忽略
A. align属性
top , middle , bottom 之一，表示字母指定点将与周围文字的相应点对齐方式。
B. behavior , direction , loop属性
behavior属性
三个值：scroll （默认）, alternate（） , slide（）
direction属性
两个值：left（默认，从右向左）, right（从左向右）
loop属性
可以是infinite 或者整数值
C. bgcolor属性
允许改变字幕区域的背景颜色，接受RGB颜色值或标准颜色名
D. height和width属性
两个属性可以接受数值或者百分比
E. hspace和vspace属性
需要整数值
F. scrollamount和scrolldelay属性
scrollamount
滚动过程中文字每次移动的象素数
scrolldelay
设置滚动过程中文字相邻两次移动之间的时间间隔