|
|
You are here: Home > Tutorials > Office Live Tips |
This page contains useful tips for Office Live webmasters, these tips will allow you to get more and more from your website. Please post any question or comment to Office Live board, in order to let maximum number of webmasters take benefits from this! How can I load my pictures to slide show module from documents folder? Open your website in edit mode, insert a picture slide show module, select some pictures from your image gallery folder in it, and then hit OK. When the setting box disappear, click on the slide show module, cut it ("Ctrl+X") open notepad.exe and paste. You will get the html code for the slide show module, now search for ("/images/your_image_name") replace it with your image from documents folder ("/documents/your_image_name"), then select all, copy, and paste it in your site.
How can I remove the indent from the bullet?
To enter a bullet without indent paste the following code:
<LI> </LI>
How can I control the size of IFrame exactly? Copy the HTML module that contains the IFrame you need to adjust, and paste it in notepad.exe, you will get the html code for that module. Search for ("height") and ("width") and modify their dimensions according to the dimension you need.
How can I add a back to previous page or position link? Paste the following code into your page directly: <A href="javascript:history.back(-1)">Back</A>
How can I change the default hyperlink color?
Get the desired color hex code from any image editor, replace it with xxxxxx in the following code, and paste the entire line directly into your page:
<A href="Destination URL"><FONT color=#xxxxxx>Link Title</FONT></A>
Change Destination URL to the actual URL, and Link Title to the actual title.
How can I remove the search bar without making the page flickering before loading?
<script>
var p = parent.document.getElementById('IWS_WH_Elem_GlobalLinks').style.opacity=0.01; ;top.document.getElementById('IWS_WH_Elem_GlobalLinks').style.filter="alpha(opacity=1)"
</script>
When I navigate away from some pages, and then click back only half page shown!
This happen on page that the first element inserted is table, picture or module; and the width of this element is more than the width of layout. To solve this, just open the page in edit mode > select all ("Ctrl+A") > cut ("Ctrl+X") > put the cursor in any place and keep pressing space bar until the layout width reach page width > paste contents ("Ctrl+V").
I am loosing alignment, control and my page become messy when I place more than one element ("picture, module or table") above or next to each other!
Around each element there is a 12-pixel margin; therefore, when place more than one element above or next each other the distance between them will be 12+12=24 pixel, this value is quite large and does not well-matched the over all alignments for the whole page, since all margins is 12 pixels.
To solve this you have to set the margin to 0 pixel. To do so, select one element > cut ("Ctrl+X > open notepad.exe > paste ("Ctrl+V"). You will get the html code for that element, in the first line seek for MARGIN 12px 12px 12px 12px, these value are the margin for four sides, organized as top, right, bottom, left. Change margin in the desired side by changing the corresponding number. After you done, select all > copy ("Ctrl+C) > go to Office Live edit page and paste ("Ctrl+V").
Office Live provides few colors in the color chart, how can I get more colors?
Get the Hex code for the desired color; you can use any picture processor software such as Adobe® Photoshop®. After you get the code, cut the contents ("table or text") which you want to change its color > paste it into notpad.exe > replace the exiting color code by pasting the new one.
For tables you will find:
BACKGROUND-COLOR: #xxxxxx
borderColor=#xxxxxx
Also, you can insert the hex color code in table properties box.
For font:
FONT color=#xxxxxx
Where xxxxxx is the hex code.
After you changed the code > select all > copy ("Ctrl+C") and paste it into Office Live.
The font looks great in edit mode, but when I hit view it looks difference!
On the upper left corner, click web pages then click the same page, the page will reload and the difference will show up, you can now fix it. If you already reload it and still there is a difference between edit and view modes then > select all ("Ctrl+A") > cut ("Ctrl+X") > paste onto Microsoft® Word® > open the find and replace box ("Ctrl+F") > click onto Replace tab > find +0 and replace it by the default font size in that page. For this page, the font size is 2.
Only the half of webpage is displayed when I browse my Office Live website using Firefox® browser!
Pages contain more than one layout does not display correctly in Firefox®. Design your site by using single layout.
My Office Live website display poor quality pictures even if I upload a high quality pictures! How can I remove the hyperlink border around the picture? Is it possible to add a screen tip for my pictures?
Upload your pictures to documents folder instead of images folder and use the following html code to load it:
<p> <img border="0" src="/documents/your_picture" </p>
As you noticed, border="0" to remove the border in case that you will insert a hyperlink, make 1 if you want border around the image.
Another tip for working with pictures, always use PNG file format for pictures that contain a few colors and JPG for pictures that contains a millionth of colors in order to save your disk space and reduce loading time. Can you figure out which one of the following pictures loaded from documents folder?
Can I design my website using a third party tool such as Microsoft® Word or FrontPage?
Yes, you can. You can design your own html page and upload it to documents folder, in this case, you have to add the site report code into the html page to allow Office Live to track this page, you can find site report code under Get Code section in your Office Live account. Check this page, I have uploaded it to documents folder. Also, you have to add a link manualy to your site map page ("in case that your site map is exist in your website!").
Alternatively, you can embed the html code inside html module. To use html module to design your page, you can design your page using Microsoft® Word®, and save it as ("Filtered HTML") open the saved file by using notepad.exe select all ("Ctl+A") > copy ("Ctrl+C"). Go to your Office Live page editor, add new html module and paste the data inside it.
If the page contain pictures, you should upload all pictures to your website and provide the correct link. This method sounds very cool and easy; but unfortunately, it has disadvantages! The entire contents such as text and hyperlinks, as well as hyperlink destination pages will not be crawled by the most of search engines, such as Google®, and the page will take longer time to load.
How can I add anchor ("bookmarks inside the webpage")?
All Office Live web pages have by default TOP anchor, click here to go to the top of this page. To utilize this function just add a hyperlink contain the same page address + ("#top"). e.g. http://engknowledge.com/officelive_tips.aspx#top
To make your own anchors inside Office Live pages follow these steps:
1- Place the cursor in the location that you would to bookmark.
2- Create new html module and write inside the box then hit ok and make it small as much as you can.
3- Copy the new HTML module ("Copy+C").
4- Open notpad.exe and paste ("Ctrl+V").
5- You will get the code for the module, search for ("id=HtmlControl") string, next to this string you will find a number, this is the number identify the module in side the page. For example, if that module is the third one on the page, the id will be ("id=HtmlControl3"). This number will be our anchor reference!
6- When you want to link immediately to that portion of the page use:
http://yoursite.com/yourpage.aspx#ctl00_IWS_WH_CPH_Content_HtmlControl3
3 is the module number and you should change it to the actual number, to make multiple anchors inside one page, just copy and paste the module, the control number will increase automatically by 1!
How to get in-depth site referrals report?
Suppose that you have an Add to Favorite ("click here to know how") button in your website, your customers have added your website address to their favorite list, and they used to access your website from that list. In this case, your site report will list these visitors under ("Bookmark/No referrals"). Unfortunately, you cannot separate bookmark visitors from no referrals visitors, since Office Live does not support special referrals.
However, we can use a small trick by adding ("#any_indication") next website address. For example, when you bookmark this website using ("Add to Favorite") link text that placed in the homepage, the address that will be bookmarked is: http://engknowledge.com/default.aspx#User_Favorite
Therefore, I can know that a specific user came from his/her favorite list, this information is provided under most requested pages.
In addition, you can use this technique when you promote your website using online advertisement such as Microsoft® AdCenter.
How can I add ("Add to Favorite") button on my webpage? Open a Microsof® Word® blank document type the link text, for example, ("Add to Favorite").
Highlight the text and select insert hyperlink or press ("Ctrl+K").
In insert hyperlink box, in address section inserts:
javascript:window.external.AddFavorite('http://yourwbsite.com/default.aspx#Favorite','Your Website Title') then hit OK.
Save it as Add_to_Favorite filtered HTML file and upload it to your Office Live documents folder.
Insert iframe to call Add_to_Favorite.htm file. Click here to know how to insert iframe.
Note: 1- I have added ("#Favorite") next to website address to let you know that a specific user is accessing your website from his/her favorite list, click here to know how. 2- Doesnt work for Firefox users.
How can I backup my website?
Microsft® Office Live always provides one backup copy of the entire site. Alternatively, you can backup individual pages by open the desired page in edit made select all ("Ctrl+A") > copy ("Ctrl+C") then open notepad.exe and paste, save it as text file. When you want to restore that page just open the text file copy the entire data and paste into your Office Live website.
How can I add a script or code from a third party, such as AdSense®, BidVertiser®?
Past the script into notpad.exe, save it as HTM, upload it to your Office Live documents folder and call it by using iframe. Below you will know how to add iframe.
How can I add iframe?
Open the page that you want to place iframe in edit mode, insert html module.
Type the following inside the module box:
IFRAME src="http://example.com/.................." width="…" height="…" frameborder="0" marginwidth="0px" marginheight="0px" scrolling=no></IFRAME> Change the source, and change height / width to match your iframe properties.
What are the keyboard shortcuts supported by Office Live?
Ctrl+A > Select all.
Ctrl+Z > Undo ("sometimes not working!").
Ctrl+K > Display hyperlink box.
Ctrl+C > Copy.
Ctrl+X > Cut.
Ctrl+V > Paste.
Sometimes Internet Explorer® blocks my website designer / editor window, even if the popup blocker turned off! In the blocked window or tab, click on the address bar, delete the last letter and re-type it, then hit enter.
Sometimes the image uploader window does not load correctly! Restore internet explorer down. How to add rounded table or gradient background. Just like that one? Make your own style image; a rounded table or a gradient color background, upload it to documents folder, create new table and set the background image to the one you uploaded. |
| |