Venturing Beyond the Basics in MS Office Live Small Business

Exclusive offer: get 0% off this eBook here
Microsoft Office Live Small Business: Beginner’s Guide

Microsoft Office Live Small Business: Beginner’s Guide — Save 0%

Build and Customize your Microsoft Office Small Business Live Web Site with this book and eBook

$0.00    $0.00
by Rahul Pitre | December 2009 | Beginner's Guides Microsoft Content Management e-Commerce

This article by Rahul Pitre, will help you try your hands at writing your own HTML mark up to tweak your site.How to install off-the-shelf components to enhance your website is the next skill you'll learn in this article. You'll install a custom FAQ component because the built-in FAQ page doesn't work as advertised.

In this article you will:

  • Add an HTML module to your page.
  • Write HTML in the HTML module. Chances are that you don't know a lot about HTML. So, you'll take a crash course on a small subset of HTML that will help you to get started with writing your own markup, if you so desire.
  • Perform some common page-building tasks such as embedding flash movies, PayPal buttons, and other such external content in your web pages using the HTML module.
  • Download and install an FAQ solution that renders a customized FAQ page.

In this article we will discuss why Office Live Small Business is the perfect site-building tool for you if you don't know (or don't want to learn) HTML, the language of web pages. And you'll certainly agree that it does a pretty decent job of it. But afer your site is functionally complete, it's only natural that you'd want to tweak little things here and there; move the text on some page a wee bit to the left, for example, or move a picture up by a pixel or two, so as to align it with the neighboring text. The trouble, though, is that Office Live Small Business doesn't allow such tweaks. You can't touch the HTML that it generates.

But what if you're not very happy with this state of affairs? Don't worry! Office Live Small Business has it covered. It has two advanced features that give you a fine-grained control over the look and feel of your web pages as follows:

  • Page Editor's HTML modules in which you can write your own HTML markup
  • Off-the-shelf Solutions, which render customized web pages within Office Live Small Business's framework

In this article, you'll explore both these advanced options.

Let's get started then.

About HTML modules

An HTML module is a little editor that you can plop on to your page in the Page Editor, just like any other module. It holds HTML markup. With an HTML module, you can construct a web page with raw HTML markup just as the pros do.

If you're conversant with HTML, the idea of having a fine-grained control over your HTML is likely to pump you up. And yet, I don't recommend using HTML modules.

You read that right: I don't recommend using HTML modules. Why? Because Office Live  Small Business stores the markup in HTML modules separate from the page. When a person requests your page from his/her browser, Office Live Small Business fetches the separately-stored markup and embeds it into the rest of the page dynamically. The problem is that it does the embedding using something called frames, which happen to be little windows on a web page that display content that doesn't actually reside on that page.

Why is this problematic? Because search engines can't index the content that doesn't physically reside on your web page. Therefore, people can't find it using search engines. Frankly, I don't see a point in building a site that people can't fnd. So, I strongly discourage you to build your entire site with HTML modules.

Another reason to avoid HTML modules is that they load the content dynamically using JavaScript. This can be an excruciatingly slow process that can delay the loading of a page  in a user's browser. In fact, such dynamically loaded pages often tend to time out.

Having said that, there are situations where they can come in handy. You may not care, for example, whether search engines index a certain page on your site, but you'd like to have great control over how that page looks. Or you may want to embed a YouTube video on your page, which search engines don't index any way. It's a good idea, therefore, to learn how to use the HTML module and that's what you'll do in this section.

The first step, of course, is to add an HTML module to one of your pages. Let's use a Test page as a guinea pig.

Time for action – adding an HTML module to your page

  1. Bring up the Test page in Page Editor.
  2. Place the cursor where you want to add the module.
  3. Click the Module button in the Insert group on the Page Editor's ribbon. Select HTML from the Modules menu that drops down. The HTML dialog pops up, as shown:
  4. Microsoft Office Live Small Business: Beginner’s Guide

    The dialog contains a mini-editor where you can type your HTML markup. The Images and Hyperlink buttons just above the editor box help you add markup for embedding pictures and hyperlinks. As this is just a Test page, I'll type some simple HTML to show you how the module really works. I suggest that you do the same.

  5. Type the following markup in the mini-editor:
  6. <strong>Welcome to my web site.</strong>

  7. Click OK. The HTML dialog closes and you return to Page Editor, which renders the HTML you just typed as any browser would.
  8. Preview your website. The page should now look like this:
  9. Microsoft Office Live Small Business: Beginner’s Guide

  10. Close the preview window and return to Page Editor.
  11. Editing your markup is equally easy. Right-click on the HTML module in Page Editor. A pop-up menu appears, as shown in the next image:
  12. Microsoft Office Live Small Business: Beginner’s Guide

  13. Choose Properties…. The HTML dialog opens again with your markup in it. Change the markup to:
  14. <strong>Welcome</strong> to my web site.

    You'll be working with the HTML module a few more times in this article. From now on, I'll just say "Open the HTML module's HTML dialog" when I want you to edit a module's markup.

  15. Click OK. The HTML dialog closes and you return to Page Editor.
  16. Preview your website. The page should now display only the word Welcome in bold letters.
  17. Close the preview window and return to Page Editor.

What just happened?

You added an HTML module to a web page and typed some basic HTML in it.

Before this exercise, you simply typed text on to your web pages as you would in a word processor, and Office Live Small Business took care of converting it to HTML. With an HTML module, you're writing your own HTML. Naturally, you'll have a more fine-grained control over how you want it to appear. But to make use of this newfound power, you must know HTML. So, let me give you a brief tutorial on it.

There are several hundred excellent HTML tutorials on the Web (not to mention several thousand lousy ones). If you take into account the hundreds of books on the subject, you'd think that everything that needs to be said about HTML has, perhaps, already been said. Many times over, at that.

Yet, I have good reason to write this brief tutorial: writing HTML for Office Live Small Business web pages is an entirely different beast.

Why? Because:

  • You don't write an entire HTML document with Office Live Small Business's design tools. All you do is write little chunks of HTML in HTML modules placed strategically on your web pages. Office Live Small Business's Page Editor combines the basic framework of your web page with these chunks of HTML and presents a finished web page to your browser.
  • An HTML module doesn't store the HTML you type verbatim. It encodes what you type and lets the browser handle the decoding. Therefore, the page may not look exactly as you intend it to, after the browser renders it.
  • The page on which you drop an HTML module already has a Cascaded Style Sheet (CSS) associated with it. You may be able to take advantage of the fact and minimize manual formatting.
  • Therefore, you don't have to be an HTML guru to use Office Live Small Business's HTML module. All you need to know is a small subset of HTML that leverages the web page's features. This tutorial introduces that subset. It won't make you a fully-fledged web designer, but it will arm you with enough knowledge to impress unsuspecting folks at cocktail parties.

HTML 101

Contrary to what many people believe, HTML is not a programming language. It's a markup language. Unlike programming languages, it doesn't contain step-by-step instructions that tell a computer what to do. Instead, it contains instructions that tell a browser how to format and decorate web page content.

The instructions are written as Tags. Tags are keywords that reside within a pair of angular brackets (< and >). Typically, you enclose some content between a pair of tags.

For example, the <strong> and </strong> in the markup you just tried out is tag pair. The pair consists of an opening tag and a closing tag. The difference between an opening tag and the corresponding closing tag is usually a forward slash (/). So, <strong> is the opening tag and </strong> is the corresponding closing tag. If you want to make some text bold, you enclose it between <strong> and </strong> tags like this:

This is some text. <strong>This sentence is bold.</strong> This one isn't.

And the browser displays it like this:

Microsoft Office Live Small Business: Beginner’s Guide

Most HTML tags are paired like the <strong> tag. But some are not. An example is the  <br /> tag. It adds a line break to your text like this:

This is some text. <br /> This is some more text but it's on the next line.

And the browser displays it like this:

Microsoft Office Live Small Business: Beginner’s Guide

The character < opens the tag and the character sequence /> closes it. Such tags that close themselves without corresponding closing tags are called self-closing tags. It's not mandatory to close the self-closing tags. So, if you write <br> instead of <br />, your page will work just fine. But I recommend closing all tags. I'll do so in this tutorial and so will you.

Notice, by the way, that simply typing the second line of text on a new line in the editor doesn't make the text appear on the next line (go ahead, try it!). It's the <br /> tag that actually does the trick and displays the subsequent text on the next line, although you typed it as a single line in the editor. In other words, the tags determine the appearance of your web page, not how you type the text in the editor.

HTML is not case sensitve. So, you can write a <br /> tag as <BR />, <Br />, or even  <bR />, if you insist, and your page won't look any different. But, I strongly advise against it. As a matter of convention, I recommend sticking to lowercase letters, as I've done throughout this tutorial.

That's just about all the dirt that you really need to know on HTML. There's more,  of course, but as this is not a complete HTML tutorial, we'll look into the finer details  on a need-to-know basis. So, let's proceed to some useful HTML tags.

Working with paragraphs

Most writing is structured as a collection of paragraphs. While writing HTML, you must enclose the text in a paragraph between the <p> and </p> tag pair like this:

<p>This is the first paragraph. It has this filler text to make it rather long so that it looks like a real paragraph.</p><p>Here is the second paragraph.</p>

And the browser renders it like this:

Microsoft Office Live Small Business: Beginner’s Guide

As you can see, there's no space between the paragraphs in the markup. But the <p></p> tag pair automatically introduces breaks that makes the text look like paragraphs in the browser.

Because of a bug in the HTML module, it doesn't seem to treat <p> and </p> tags correctly. As a result, you don't see intended paragraph breaks in the browser. In the picture above, I sneaked in our old friend, the <br /> tag, between the two paragraphs as in <p>...</p> <br /> <p>...</p>.You may have to resort to this workaround as well. But remember that if Microsoft fixes the bug, you'll get an extra line-break on your page.Also, remember that you can add text to an HTML module without the paragraph tag pair; you can use <br /> tags instead, for example, where you want a break in text. However, I recommend that you enclose all of your text in paragraph tags. If you don't, Office Live Small Business's stylesheets may hijack the formatting of your text. Not enclosing text in paragraphs is one of the main reasons why text on so many web pages is misaligned and displayed in the wrong font.

Working with horizontal rules

You can draw a horizontal line across your web page simply by clicking the Horizontal line button on Page Editor's ribbon. To draw a similar line while working with the HTML module, you'll need—you guessed it—a tag! Web designers call a horizontal line a horizontal rule and so the corresponding tag is the <hr /> tag, like the <br /> tag, the <hr /> tag. Simply type <hr /> wherever you want a horizontal line  to appear. If you want it to appear between the two paragraphs in the previous example, your markup will look like this:

<p>This is the first paragraph. It has this filler text to make it rather long so that it looks like a real paragraph.</p><hr /><p>Here is the second paragraph.</p>

And your page will appear in the browser like this:

Microsoft Office Live Small Business: Beginner’s Guide

Working with headings

Headings are an important part of the text. Books, for example, use headings with varying importance. The more important a heading, the bigger its font size is. This scheme makes  it easy for readers to quickly grasp the scope of topics and sub-topics within the text.

HTML uses a similar scheme. There are six levels of heading tag pairs in HTML that you can put around heading text like this:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Text included between beginning and ending tags at each level looks like this:

Microsoft Office Live Small Business: Beginner’s Guide

As you can see, <h1> has the largest font size. Naturally, it's used for the most important heading on a web page. As the number inside the tag increases, its font size decreases.  So, among headings, <h6> has the smallest font size.

What if you need more than six levels of headings? Well, you shouldn't; a six level deep topic hierarchy is deep enough for most people to keep track of. If you have seven or more levels, you should seriously consider rewritng your text.

Generally, it's a good idea to start a page with the <h1> tag. It identifies the most important heading on the page, and it is used by search engines to take an educated guess at what  the page is all about. So, a good convention to follow is to have only one <h1> tag on every web page.

But, you're better off flouting this convention when working with Office Live Small Business. Why? Because you don't write entire web pages in HTML modules; you just write individual chunks of HTML. Office Live Small Business automatically adds a <h1></h1> tag pair  to your web pages and places the title of your site between them. Similarly, it uses the <h2></h2> tag pair for your site's tag line. So, you're better off starting with a <h3> tag in every HTML module on a web page. That way, you won't drive Google's spider nuts by forcing it to wrestle with 23 <h1> tags on a single web page.

When you need a sub-heading on the page, you should use the next tag downin the hierarchy; in our example, <h4>. Avoid the temptaton to skip levels. Don't jump from <h3> to <h6>, for example. And it's a good idea to use these heading tags. Don't just write plain text with large fonts instead.

Microsoft Office Live Small Business: Beginner’s Guide Build and Customize your Microsoft Office Small Business Live Web Site with this book and eBook
Published: November 2009
eBook Price: $0.00
Book Price: $39.99
See more
Select your format and quantity:

Working with hyperlinks

The HTML tags that you've seen so far merely alter the appearance of the text that they enclose. They're quite easy to work with. Just enclose some text between them and they alter its appearance. But all HTML is not that straightforward. You need more complex markup to perform more complex tasks.

Creating a hyperlink, for example, requires slightly more involved markup. It's not rocket science, but even a small mistake in the markup can leave your hyperlink broken. To prevent you from inadvertently creating broken hyperlinks, the HTML module's mini-editor lends you a helping hand. It lets you create the markup precisely in the same manner as you did outside of it.

Let's say you want to build a web page using an HTML module, which looks like this:

Microsoft Office Live Small Business: Beginner’s Guide

The question is, how do you write the markup for the Contact Us link? Well, I could easily tell you that the markup should look like this:

<a href="/contactus.aspx">contact us</a>

But as you can see, I'd have to give you a good amount of explanation as to what href means and why it's enclosed within a pair of double quotes. Then, some of you may want to know what happens if you omit the double quotes. So, one thing would lead to another and you would find yourself spending all of your time learning the nuances of HTML, rather than doing whatever it is that you do for a living.

So, the HTML module has a feature that writes the markup for you. Let me walk you  through it.

Time for action – generating the markup for a hyperlink

  1. Bring up the Test page in Page Editor. It should have the HTML module that you added just a short while ago. (Add another one if it isn't there any more.)
  2. Open its HTML dialog. Clear any markup that might already be there and type:
  3. <p>Questions? Please contact us.</p>

  4. Select the text contact us and click the Hyperlink button just above the mini-editor.
  5. The Insert a link dialog opens. You've seen this dialog before. It pops up every time you insert a hyperlink outside of the HTML module using the Hyperlink button on  Page Editor's ribbon.
  6. Choose the Page on my site radio button in its left pane. A list of all the pages on your site appears in the right pane, as shown in the following screenshot:
  7. Microsoft Office Live Small Business: Beginner’s Guide

  8. Select your contact page and click OK. The Insert a link dialog closes and you return to the HTML dialog.
  9. Notice that the text in the editor now looks like this:
  10. Questions? Please <a href="/contactus.aspx" >contact us</a>.

    As you can see, Office Live Small Business added the necessary markup for you.

  11. Click OK to close the HTML dialog and return to Page Editor.
  12. Preview your site and confirm that the hyperlink works as intended.

What just happened?

The HTML module generated HTML markup for you at the click of a button! Come to think of it, this is exactly how Office Live Small Business works behind-the-scene. When you create a hyperlink, add a horizontal line, or format pretty much any text in Page Editor, it generates the necessary HTML markup so that you don't have to learn HTML. The only difference here is that you actually get to see the markup.

Working with pictures

You might have noticed that in the HTML dialog, there's an Images button right next to  the Hyperlink button that you just used to magically generate the hyperlink markup. Any  guesses what that's for? Yes, it generates the markup necessary to display a picture on  your web page.

As is the case with the Hyperlink button, the Images button works exactly the same way within the HTML module as it does outside of it.

Have a go hero – experiment with a picture's HTML markup

You can use the Images button to insert images on to your web pages. Can you now generate the markup in the HTML module to display a picture?

Working with external content

Some of the most common elements on many websites don't actually reside on those websites. Take a YouTube video, for example, a blog hosted at Blogger, or even an Amazon aStore. People commonly display such elements from external services on their web pages. How do you do that?

Well, all of these services provide you with HTML markup that is specific to that content  and ask you to paste it on to your web page. On your Office Live Small Business website,  you must paste it into an HTML module.

Why can't I paste it on the page itself?
Because what you're pasting is markup, not text. If you paste a YouTube video's markup in Page Editor, the web page will display the markup, not the video.

To give you an example, I created a small video clip and uploaded it to YouTube. To display it on my web page, YouTube informs me that I must use the following markup:

<object width="425" height="344"><param name="movie" 
value="http://www.youtube.com/v/j5HoGG767MQ&hl=en&fs=1&"></
param><param name="allowFullScreen" value="true"></param><param
name="allowscriptaccess" value="always"></param><embed src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://
www.youtube.com/v/j5HoGG767MQ&hl=en&fs=1&" type="application/x-
shockwave-flash" allowscriptaccess="always" allowfullscreen="true"
width="425" height="344"></embed></object>

To display this clip on my web page, all I have to do is to paste this markup in an HTML module on my page. I did so, and here's what my page looks like:

 

Microsoft Office Live Small Business: Beginner’s Guide

And while we're on the subject, you can also embed JavaScript into an HTML module. Someservices, such as Google's AdSense advertising service, require you to embed JavaScript code, as opposed to HTML markup, into your web pages. HTML modules let you do that seamlessly.

Although AdSense has a cult following, advertisements make sense only on news portals, online magazines, and such. They don't have a place on small-business websites. Displaying AdSense advertisements on your small-business websites is like displaying your competitor's billboard in your office. Don't do it!

Have a go hero – experiment with a picture's HTML markup

Do you have something hosted at a service such as YouTube, Amazon, or Blogger that you'd like to display on your web page? If so, give it a shot. Simply plop an HTML module on the page on which you want the content to appear, copy the markup from the service's website, and paste it into the HTML module.

Don't have any such hosted content? You can try it out using my YouTube video clip. You can copy the code from YouTube's site.

  1. Point your browser at http://www.youtube.com/watch?v=j5HoGG767MQ  as shown:
  2. Microsoft Office Live Small Business: Beginner’s Guide

  3. Copy the code in the litle Embed box on the right and paste it in your  HTML module.

Most services will provide you the markup in a similar fashion.

As I mentioned before, you can embed all sorts of external content  using HTML modules.

Pop quiz 1

  1. HTML contains instructions on:
    1. Formatting the text and other content on a web page
    2. Configuring Office Live Small Business modules
    3. All of the above
    4. None of the above
  2. You found this HTML markup on a web page:
    1. It states that an elephant is strong at one end and extra-strong at the other
    2. It displays the word elephant in bold letters when the web page is displayed in a browser
    3. All of the above
    4. None of the above
  3. <strong>elephant</strong>.

    What do you think the markup does?

Answers to the quiz are at the end of the article.

Further customization with solutions

Now that you've seen the power of HTML modules, let me introduce you to yet another way of taking control of your web pages: solutions.

The common denominator of everything that you've done so far in Site Designer and Page Editor is that you created every page on your site using Office Live Small Business's page templates. Then, you just manipulated the content on the page.

But is it possible to build entire web pages outside of your website and then simply stick them in to your website? It certainly is. Such a web page, or a set of web pages packaged together as a unit, is called a solution in Office Live Small Business's parlance.

You can't, however, take any random web page and make it a part of your website. You must build one from scratch and you must follow a complex list of rules while building it, so that it can function within Office Live Small Business's framework. That, obviously, is not an item on the to-do list of small-business owners. You'd need hard-core programmers for the job.

Microsoft developed the Office Live Small Business platform as an extensible platorm for independent sofware vendors to build solutions that would help small-business owners take all the aspects of their businesses online. One vendor may build a payroll system on the platorm, for example, and another may build an inventory control system. Although there aren't all that many solutions out there as yet, you can expect to see more of them in the future. Microsoft hopes that vendors will create such solutions for various aspects of a business that you'll buy off-the-shelf and drop on to your web pages.

To give you a taste of the punch that solutions can pack, I've created a simple FAQ system. Office Live Small Business's FAQ page template leaves much to be desired. You can't have more than ten questions, for example, and it's very easy to mess up its formatting irreversibly. My FAQ system, called AcxedeFAQ, fixes these problems. You can create as  many questions and answers as you want, and they always retain their formatting. All you have to do to use it, is download it and install it on your website. You'll find the downloadable package and complete instructions on installing and using AcxedeFAQ  at http://www.officeliveguide.com/AcxedeFAQ.aspx

Summary

In this article, you learnt that Office Live Small Business lets you go beyond its point-and-click tools and lets you customize the HTML markup of your web pages. It also allows you to install compatible web pages developed by third-party vendors. To recap:

  • The HTML module is just another module in Page Editor, but it's unique in that it lets you actually write HTML markup like the pros do.
  • You can write just about any valid HTML markup in an HTML module.
  • I gave you a brief tutorial on HTML that's very specifc to what you can expect to do with an HTML module. Of course, it's just a start. If you're an advanced HTML author, you can write as complex a markup as you want.
  • HTML modules can also take scripts that let you embed external content such as blogs, videos, and even advertisements on your web pages.
  • Although HTML modules appear to be the solution to all your site customizaton problems, you should use them only occasionally because search engines can't  index content within them.
  • Solutions are ready-made add-ons that you can install on your website. There aren't all that many of them out there as yet, but you can expect more in the future.

If you've followed along with me so far, congratulations! By now, you should have an almost-finished website and a good many ideas about how to finish it.

Answers to Pop quiz 1:

  1. HTML contains instructions on:
    1. Formatting the text and other content on a web page
  2. You found this HTML markup on a web page:
  3. <strong>elephant</strong>

    What do you think the markup does?

    2.It displays the word elephant in bold letters when the web page is displayed in a browser

 

If you have read this article you may be interested to view :

 

Microsoft Office Live Small Business: Beginner’s Guide Build and Customize your Microsoft Office Small Business Live Web Site with this book and eBook
Published: November 2009
eBook Price: $0.00
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Books From Packt

Drupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

Programming Microsoft Dynamics NAV 2009
Programming Microsoft Dynamics NAV 2009

Magento 1.3 Theme Design
Magento 1.3 Theme Design

Implementing Microsoft Dynamics NAV 2009
Implementing Microsoft Dynamics NAV 2009

WordPress Plugin Development: Beginner's Guide
WordPress Plugin Development: Beginner's Guide

3D Game Development with Microsoft Silverlight 3: Beginner's Guide
3D Game Development with Microsoft Silverlight 3: Beginner's Guide

Zabbix 1.6 Network Monitoring [RAW]
Zabbix 1.6 Network Monitoring [RAW]

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
V
R
g
1
d
j
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software