Sunteți pe pagina 1din 16

Office Live Small Business Template

README DOCUMENT

Deployment Instructions

To download the site template solution file:

1. Open the Café Web site download page in the MSDN Code Gallery.

2. Under Files, click Café template.

3. In the license agreement dialog box, read the agreement, and then click I
Agree.

4. In the File Download dialog box, click Save.

5. In the Save As dialog box, click the folder where you want to save this
solution file, and then click Open.

6. Click Save.

7. In the Download complete dialog box, click Close.

If you customized the Web site associated with your Office Live account, it is highly
recommended that you back up your site before adding this solution. You can
back up your pages, including the related data, using the back-up feature in Office
Live Small Business to create a solution file (.olp). For more information about
backing up your site, see Back up, restore, or reset your Web site.

To install the site template solution in your account:

1. On the Office Live Small Business home page, on the navigation bar, click
Web site.

2. In Page Manager, on the actions bar, click Design site, and then click Install
solution.

3. On the Add a solution page, click Browse, and point to the solution file (.olp)
that you downloaded.

4. Select the Overwrite existing files check box.

NOTE: Although the selection of this check box is not generally


recommended, you must select it in order to install a site template. As the
solution is added, it writes over the home page, and possibly other pages, of
the existing Web site.

1
Office Live Small Business Template

README DOCUMENT

Most Web pages, other than the Home page, that are included in the solution
have been named using an underscore as the first character. For example,
the About Us page is named “_aboutus.aspx”. Unless you are using this same
naming convention, these pages are added to your site with no effect to
existing pages.

5. Click Add solution.

Template Sample Site

To see what this template looks like with full copy and imagery please check out the
Fourth Coffee sample site at http://www.fourthcoffee.web.officelive.com.

Hiding Pages for Editing

After uploading your new template pages you may want to hide them while you
work on updating the content. Although your pages cannot actually be hidden, they
can be easily removed from the navigation bar so that customers cannot easily
access them.

To remove a page from the navigation bar:

1. On the Office Live Small Business home page, on the navigation bar, click
Web site.

2. In Page Manager, to the right of each page you want to remove from the
navigation bar, click Properties.

3. In the Choose page properties dialog box, clear the Show this page in the
Navigation bar check box.

Table of Contents

I. Basic Overview of Office Live Small Business Templates

i. Document Overview

II. Basic Changes to Your Site

i. Copy and Basic Updates


• Guidelines for Changing Out Template Copy (Text)
• Best Practices for Writing Copy

2
Office Live Small Business Template

README DOCUMENT

• Navigation and Page Names


• Modules

III. Complex Changes to Your Site

i. Changing the Banner Image

ii. Changing and Updating Custom Forms

iii. Changing and Updating HTML Components

iv.

I. Basic Overview of Office Live Small Business Templates

i. Document Overview

The purpose of this ReadMe Document is to provide an overview of the


contents that are included in the template. Your template includes
customized copy with fill in the blank bits to guide you to the best writing
possible, great imagery, custom design pieces and placement and custom
forms to help you with your business ready needs. The ReadMe file is meant
as a starting point for creating your new website with your template package.

NAVIGATION/PAGE LAYOUT

The template package provides all of the pages you will need to get your
website started. The following is the intended page navigation/layout for the
template:

NOTE: Sub-pages are indented and italicized

• Home

• About Us

• Community

3
Office Live Small Business Template

README DOCUMENT

o Café Events

• Menu

• Coffee to Go

• Contact us

o Jobs

• Site Map

To update your website navigation first open your Office Live Small Business
account and go to the Web Site tab.

1 - Click on ‘Design Site’ in the middle of the page.

2 - A drop down list will appear, select ‘Modify Navigation’.

3- Under the text ‘Page Order’ select the page that you would like to make a
sub-page

4 – Under the text ‘Place Page Under’ select the page you would like to place
your new sub-page under.

5 – Your website navigation is updated.

COPY

You will need to update the copy by filling in the blanks and changing
sentences and paragraphs to reflect your company.

IMAGES
The templates contain placeholder images, which are correctly sized for the
site layout.
Page Images are sized as follows:
3 Sizes:
5 images at 200x200 pixels– Basic Pages
4 images at 125x125 pixels– Menu Page

4
Office Live Small Business Template

README DOCUMENT

1 image at 125x200 pixels– Job Page


You can find imagery to use on your site in the Office Online Clip Gallery, or
by taking and posting your own photos.

LINK TO THE CLIP GALLERY

DESIGN

The template comes ready with several examples of how to make your new
site look and feel ‘custom’. The template includes an example banner to
show you where to place it as well as giving you a sample of what well
designed banner really looks like (text, images, logo and great colors!). To
create your own logo you can use the office Live Small Business Logo creator
to upload an image of your creation or check out Logo Yes, where you can
get a free custom logo for your business! The template also provides
customized header images that you can use to place in the body of your copy
and amp up the design appeal.

HTML, HYPERLINKS AND CUSTOM FORMS

The template you have downloaded contains custom html pieces that you
can use by making basic changes to the text portion. The step by step
instructions are located in section III.iii.). Another important piece of
customizing your new template is to update hyperlinks; this includes links to
other pages, emails and links to outside websites. The template also includes
several customized forms that were created using the Office Live Small
Business – Business Application feature. Below you will find information on
how to use and update the custom forms that come with this template.

II. Basic Changes to Your Site

i. Copy

5
Office Live Small Business Template

README DOCUMENT

Below you will find direction on updating the information on your page,
including what you can change to make the page ‘your own’.

HOME PAGE

• Remove and Update with Your Information:

o Select Your Color Scheme

o Change Banner Image (section III.i.)

o Update Callout Box with Your Information (Section III.iii.)

o Update Callout Box Color to Match Your Scheme (Section


III.iii.)

o Complete the page copy by filling in [] with your custom


information and/or removing copy to make it your own.

• Suggested Copy: The home page should welcome the audience


and point them to interesting areas on your site as well as
highlight the most important information, such as business
location or exciting events. Footer text should say something
like “company name” All Rights Reserved.

ABOUT US PAGE

• Remove and Update with Your Information:

o Complete the page copy by filling in [] with your custom


information and/or removing copy to make it your own.

6
Office Live Small Business Template

README DOCUMENT

• Suggested Copy: This page should tell customers a bit about


you and your business, its history, the people who make the
company what it is, etc

COMMUNITY PAGE

• Remove and Update with Your Information:

o Complete the page copy by filling in [] with your custom


information and/or removing copy to make it your own.

o Update RSS Links List with Links to Feeds you enjoy (See
section III.ii.)

• Suggested Copy: Use the community landing page as a starting


point to highlight events at your business, around your town, or
around the world! This should have some interactivity for
customers, such as rss feeds or newsletters

EVENTS PAGE

• Remove and Update with Your Information:

o Complete the page copy by filling in [] with your custom


information and/or removing copy to make it your own.

o Update Events list with your event information (See


section III.ii.)

• Suggested Copy: Use the Events page to highlight what is


happening at your company

7
Office Live Small Business Template

README DOCUMENT

MENU PAGE

• Remove and Update with Your Information:

o Complete the page copy by filling in [] with your custom


information and/or removing copy to make it your own.

o Update the Document that the “Print” button links to

o The Document can be used to place your Menu Content or


other Content you want customers to print.

o The Menu Document is located on the Office Live Small


Business Home Page.

1 -Go to “Home Page” in your OFFICE LIVE SMALL


BUSINESS Account.

2 - Go to “Web site” Go to “Document Gallery”,

3 - Click on and open the document entitled “menu.doc”

4 – Open the document and make changes

4 – Insert your logo or other branding designs you have.

5 – Add Text, Save and re-upload to the document gallery.

• Suggested Copy: The menu page should highlight your


offerings, daily specials, weekly specials, etc. It should also
include descriptions if you decide to just use a menu/price
format.

8
Office Live Small Business Template

README DOCUMENT

CONTACT US PAGE

• Remove and Update with Your Information

o Complete the page copy by filling in [] with your custom


information and/or removing copy to make it your own.

• Suggested Copy: How to contact you, where you are, ordering


food/beverages

JOBS PAGE

• Remove and Update with Your Information:

o Complete the page copy by filling in [] with your custom


information and/or removing copy to make it your own.

• Suggested Copy: Open positions

III. Complex Changes to Your Site

9
Office Live Small Business Template

README DOCUMENT

i. Adding Text to Banner Image (Page Logo Graphic)

1- From your Office Live Small Business home


(http://home.officelive.com), select “Web Site” in the left navigation.

2 – In “Image Gallery” right click the banner image

3 – Open the banner image in a photo editing program and add text

4 – Reupload the image to the Image Gallery, keeping the same name

5 – The image will appear on your site with your updated changes.

ii. Changing the Banner Image (Page Header Graphic)

1 - From the your Office Live Small Business home


(http://home.officelive.com ), select “Web Site” in the left navigation.

2 - In “Page Manager” click "Design Site". A drop down list of actions


will appear. Click "Design Site". The Web Design Tool will open in a
new window.

3 - The "Site Designer" tab should be selected at the top. Click "Logo"
in the menu.

4 - Upload your primary page header logo.

5 - Select "Next to title" for location. Select "Large (full size)" for size.
Click

To add an image to the left of the page header logo:

To use the same page header style as the Cafe Template site:

6 - Click "Style" in the menu. A drop down menu will appear. Click the
first item in the list of styles.

* Note, the dimensions of the image should be appropriately sized to fit


the page header area (633x130 pixels)

10
Office Live Small Business Template

README DOCUMENT

If you have an image you would like to place in the left hand area
follow the below instructions:

Click "Theme" in the menu. A drop down menu will appear. Click
"Custom Theme Image", then select "New".

Upload your left page header image.

iii. Changing and Updating Custom Forms

NOTE: You must first activate the custom forms that come with
your template. To activate go to each template page in the
Web Design Tool and click ‘OK’ to activate any forms on that
page.

ADD AN EVENT

1 - From the your Office Live Small Business home


(http://home.officelive.com ), select “Business Application” in the left
navigation.

2 - In “Business Applications” you will find the “Cafe Template”


application listed in the left navigation. Click "Cafe Template".

3 - In the "Cafe Template" Business Application you will find the “Café
Events” list tab at the top. Click "Café Events". ONCE AGAIN, ARE YOU
USING ACTUAL NAME HERE?

4 - To enter a new event, click the “New” button in the list menu, then
click the “New Item” selection.

5 - Enter your event data into the new item form, then click the “OK”
button.

11
Office Live Small Business Template

README DOCUMENT

Your new event will then appear on the events page of your site.

http://{your Office Live Small Business Site URL}/events.aspx

EDIT AN EVENT

1 - From the your Office Live Small Business home


(http://home.officelive.com ), select “Business Application” in the left
navigation.

2 - In “Business Applications” you will find the “Cafe Template”


application listed in the left navigation. Click "Cafe Template".

3 - In the "Cafe Template" Business Application you will find the “Café
Events” list tab at the top. Click "Café Events".

4 - You will see a list of events in your event list. Click the event title
that you would like to edit. A drop down list of actions will appear.
Click “Edit Item”.

5 - You will be taken to the event form for this item. You can then edit
values for this event and click “OK” to save and publish your updates.

VIEW CAFÉ TO GO SUBMISSIONS

http://{your Office Live Small Business Site URL}/contactus.aspx

1 - From the your Office Live Small Business home


(http://home.officelive.com ), select “Business Application” in the left
navigation.

2 - In “Business Applications” you will find the “Cafe Template”


application listed in the left navigation. Click "Cafe Template".

12
Office Live Small Business Template

README DOCUMENT

3 - In the "Cafe Template" Business Application you will find the


“Coffee To Go” list tab at the top. Click "Coffee To Go".

4 - You will see all items that have been submitted from this form.

ADD A LINK TO RSS FEEDS LIST

1 - From the your Office Live Small Business home


(http://home.officelive.com ), select “Business Application” in the left
navigation.

2 - In “Business Applications” you will find the “Cafe Template”


application listed in the left navigation. Click "Cafe Template".

3 - In the "Cafe Template" Business Application you will find the “Cafe
Template RSS List” list tab at the top. Click "Cafe Template RSS List".

4 - To enter a new RSS feed link, click the “New” button in the list
menu, then click the “New Item” selection.

5 - Enter the RSS feed information into the new item form, then click
the “OK” button.

Your new RSS feed link will then appear on the community page of
your site.

http://{your Office Live Small Business Site URL}/community.aspx

iv. Changing and Updating HTML Components

13
Office Live Small Business Template

README DOCUMENT

HOME PAGE BOX

To update text only from the html module tool take the following
steps:

1. Open the Office Live Small Business Web Design Tool


2. Right Click on the Module and select properties
3. The html module will open and you will see the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


"http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1"> <style type="text/css"> <!-- #callout_container { width:240px;
background:#FFF
url(http://fourthcoffee.web.officelive.com/images/callout_background.gif) top
left repeat-y; } #callout_rounded_top
{ background:url(http://fourthcoffee.web.officelive.com/images/callout_round
ed_top.gif) top left no-repeat; margin:0; padding:10px 0 0 0; }
#callout_content { margin:2px 12px; padding:10px; background:#F4F1E7;
color:#794128; font-size:14px; font-family:Arial, Helvetica, sans-serif; }
#callout_rounded_bottom
{ background:url(http://fourthcoffee.web.officelive.com/images/callout_round
ed_bottom.gif) bottom left no-repeat; margin:0; padding:0 0 10px 0; } -->
</style> </head> <body> <div id="callout_container"> <div
id="callout_rounded_top"> <div id="callout_rounded_bottom"> <div
id="callout_content">[Company Name]<br/> [Address]<br /> [City,
State]<br /> [Phone Number]<br /><br> [Hours]:<br /> [Weekday
Hours]<br /> [Weekend Hours]</div> </div> </div> </div> </body>
</html>

4. Scroll to the area that has the text you want to change.
5. Change the Text

To update the Home Page Callout Box border color:

1. Open the Office Live Small Business Web Design Tool


2. Right Click on the Module and select properties
3. The html module will open and you will see the following code:
4. Update the highlighted area with the URL of the border color you
want to use.
5. The images are located on the Office Live Small Business Tool,
Web Site Image Gallery
6. Select from blue, red, green or brown (default color)
7. Replace the image names in the html (highlighted portions
below)module.

14
Office Live Small Business Template

README DOCUMENT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


"http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1"> <style type="text/css"> <!-- #callout_container { width:240px;
background:#FFF
url(http://fourthcoffee.web.officelive.com/images/callout_background.gif) top
left repeat-y; } #callout_rounded_top
{ background:url(http://fourthcoffee.web.officelive.com/images/callout_round
ed_top.gif) top left no-repeat; margin:0; padding:10px 0 0 0; }
#callout_content { margin:2px 12px; padding:10px; background:#F4F1E7;
color:#794128; font-size:14px; font-family:Arial, Helvetica, sans-serif; }
#callout_rounded_bottom
{ background:url(http://fourthcoffee.web.officelive.com/images/callout_round
ed_bottom.gif) bottom left no-repeat; margin:0; padding:0 0 10px 0; } -->
</style> </head> <body> <div id="callout_container"> <div
id="callout_rounded_top"> <div id="callout_rounded_bottom"> <div
id="callout_content">[Company Name]<br/> [Address}<br /> [City,
State]<br /> [Phone Number]<br /><br> [Hours]:<br /> [Weekday
Hours]<br /> [Weekend Hours]</div> </div> </div> </div> </body>
</html>

UPDATE HEADER AND SUB-HEADERS

1. While in the Office Live Small Business Web Design tool Open html module
that corresponds to the header or sub header you would like to update

2. Look for the text area (scroll to the bottom of the html code in front of you)
and replace text with the text you would like.

3. The html module will open and you will see the following code (depending on
if it is header or subheader module).

Header code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--.pageHeader {

15
Office Live Small Business Template

README DOCUMENT

font-family:"Courier New", Courier, monospace;


font-size:18px;
color:#934d28;
font-weight:bold;}--></style></head><body><h2
class="pageHeader">Header Text</h2></body>
</html>
Sub-Header code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--pageSubHeader {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
color:#977329;
font-weight:normal;
text-transform:uppercase;}--></style></head><body>
<h2 class="pageSubHeader">Sub-Header Text</h2>
</body></html>

16

S-ar putea să vă placă și