w b i edi iwebsite editing tltools - liz murphylizmurphy.net/img/websiteeditingtools.pdf · format...

43
Wbi Edi i Website Editing T l Tools To log into your website administration page, go to: www.harrynorman.com/apt

Upload: others

Post on 19-May-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

W b i Edi iWebsite Editing T lTools

To log into your website administration page, go to:www.harrynorman.com/apt

Page 2: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

Today we will discuss…

This intermediate level class will show how to use website editor tools in the Web Builder in order to:website editor tools in the Web Builder in order to:

1. Format images to make them web-friendly

2 C t F k C t & dit t bl Add2. Create a Framework: Create & edit tables. Add color to table backgrounds

3. Add Content: Copy text from Word and paste into website editor

4. Add Links: Create hyperlinks with text and images

5. Decorate: Add Color to fonts tables and etc.

Page 3: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

Designing agent websites

1000 pixels wide max

600 pixels height on welcome page

Image type must be of the following formats: .gif, .jpg, .jpeg

Page 4: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

Format images to make them web-friendlyWebsite Images Must Be:72 dpi (dots per inch) +

Digital camera usually take photos at 300 dpi which is meant

Less than 600 pixels wide

(8.333 inches)photos at 300 dpi, which is meant for print quality. Photos need to be scaled down considerably for websites.

Quick Tip:When you useMS Picture Manager,you won’t have to worryyou won t have to worry about dpi!

Page 5: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

Using MS Picture Manager

How to resize photos without Photoshop• If you don’t have access to Photoshop, you can

use Microsoft Office Picture Manager. It comes t d d ith Mi ft Offi S itstandard with Microsoft Office Suite.

Th f ll i lid ill d t t h• The following slides will demonstrate how you can reformat your images to make them web friendly while using MS Office Picture Managerfriendly while using MS Office Picture Manager.

Page 6: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

Open Picture Manager

To open Picture Manager, f ll th i t ti

Click on Start Menu

follow these instructions:

→ Click on Start Menu→ Choose Programs→ Choose Microsoft Office Folder→ Choose Microsoft Office Folder→ Choose Microsoft Office Tools Folder→ Choose Microsoft Office Picture Manager→ Choose Microsoft Office Picture Manager

Page 7: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

Find your photos

Page 8: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

Microsoft Office Picture ManagerResizing Images

Locate your image in the Picture Shortcut section

D bl li k th i t t ditDouble-click on the image you want to edit.

Page 9: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

Microsoft Office Picture ManagerResizing Images

Click on “Picture” at the top.

Select “Resize”

Page 10: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

Microsoft Office Picture ManagerResizing Images

Adjust the size of the imageAdjust the size of the image as required. You can use the Predefined sizes.

Click on OK.

When changes have been made to an image, they can either be saved by selecting File | Save orby selecting File | Save or discarded by selecting Edit | Discard Changes.

Page 11: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

Accessing Website Content

Now that your photos have been resized and saved, you can log into your websiteand saved, you can log into your website account.

1 Log into www harrynorman com/apt1. Log into www.harrynorman.com/apt

2. Click on Web Builder

3. In the Web Builder, click on the “Manage Pages” tab.

Page 12: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

Copy and Paste from Word

Copy from Word• In the Word document, select all of the text.

• (Edit > Select All or Ctrl+A)• (Edit > Select All -or- Ctrl+A)

• Copy the text. • (Edit > Copy -or- Ctrl+C)

Page 13: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

3

Navigating Around: Agent Website Admin Interface  

The navigation bars are located in the same location on each page.  Here’s how you can navigate around: 

Main Navigation 

        Change Website Layout                                     Preview your website 

                   Update your website content                                        Submit changes to be published 

                                Upload files to link to on your website                                Exit Web builder 

 

 

 

 

Save changes* | Cancel changes* 

* Applies to the page you are on 

Page 5

Page 14: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

4

Change Your Website Layout  

After logging into the Web Builder, you will see the Change Layout Page. Select the radio button next to the template style you like and press the save button when finished.  Once you have saved the change, you can preview the design by clicking on the Preview button. 

 

 Google Analytics Key Typing in your Google Analytics Key in your Web Builder account will allow you to use Google Analytics to track your website activity.  See the Google Analytics section of this manual for more information. 

 

 

Press the radio button under each thumbnail to change the layout. 

The first template is the default layout.   

Press the Save button when finished. 

Step 1 

Step 2

Page 6

Page 15: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

5

Designing your Website  New Harry Norman Site vs. Old Harry Norman Website 

When designing or editing your new Harry Norman website, please take the following into consideration:  

New layout dimensions:  

The newer site has more content space than the previous one.   

Previous version of the                                     Harry Norman website 

 

New version of the Harry Norman website –          More “Real Estate” 

Height is defined as “Above the Scroll”.  “Above the Scroll” is a website marketing concept that refers to the location of important news or visually appealing images on the upper half of the homepage of a website before you start scrolling down.  (This comes from newspaper terminology. AKA “Above the Fold”) 

Page 7

Page 16: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

6

Managing Pages   How to Create a New Page 

1. Click on the Manage Pages at the top of the window. 2. Select New Page on the top right‐hand corner 

 

3. Select whether the new page is a General Page or a Link Page 

 

Link Page – Is an external page or content, such as pdf, you wish to add a link to under the “My Links” section of your website. General Page – A page within your agent site that you will customize (this page will be added to the “My Links” section, but the content of the page will be created by you.)    

If you select Link Page, 

1. Insert page title in the Page Name field (i.e. “School Info”) 2. Insert the URL of the page you wish to link to in the Link field (i.e. “http://www.yahoo.com”) 3. Check the Open New Browser box 4. Click the Save button  located at the top right corner 

If you select General Page, 

1. Insert page title in the Page Name field (i.e. “My Resume”) 2. Click the Save button  located at the top right corner 

Step 1 

Step 2 

Page 8

Page 17: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

7

Managing Pages   How to Activate or Deactivate a Page from the Navigation Bar You can add a page to your navigation bar by filling the Selected check box next to the page name.  You can remove a page from your site navigation by removing the checkmark from the Selected check box next to the page name.  Be sure to click the Save button after making the change.   

 

Please note: Even though it is removed from the site navigation bar, the page is still accessible by the public.  So if you have a link to this page, it will still work.   

How to Edit or Delete an Existing Page Edit:  From the Manage Pages section of Web Builder, select Edit next to the page you wish to edit 

 

Delete:  To delete a page, click on the X you wish to remove. 

Note: Every site has an index page (or main homepage).  As a default, this page is titled “Welcome.”  This is your main agent homepage and cannot be deleted.  If you want to make changes to your main agent homepage, you must select and edit the “Welcome” page.  

 

Page 9

Page 18: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

8

Managing Pages   How to Sort Your Pages You can sort your pages by clicking and dragging the page in the order you want them to be.  Note:  The first page will always be your welcome page. 

 

1. Click and hold the mouse button down.   

2. Drag it up or down to where you want it.  You will see the row turn red while you are sorting. 

3. Click on the Save button when finished to save your changes. 

  

Page 10

Page 19: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

9

Using Basic Tools  

Web Builder Tool Bar  Below is the Web Builder Tool Bar.  You will find it is very similar to a Microsoft Word Tool Bar.   

Note: When viewing the Tool Bar in Web Builder, any Tools that are grayed out are not available for use at that time. 

 

 

 

 

 

    What is a Table?  A Table is a series of rows and columns used to arrange data.  This is what a table looks like:  

 

 

 

When building your site, using a Table will help you better align images and text.  It will also prevent your text from displaying in various widths on different computer screens and will ensure visitors can quickly see and read your information.  

Tables can be used in an unlimited number of ways including:  

• Organize your text and images  • Display your text in a newspaper format  • Add color and image backgrounds to text areas 

Website Header 

>>Image<<  Website Content 

Website Content  >>Image<< 

Bold, Italicize, & Underline 

Insert Table 

Insert Image 

Find & Replace 

Insert Bullets  Horizontal Rule 

HTML Code View* 

Edit Font Type 

Insert Symbol 

Check Spelling Edit Text Color 

Insert Link 

Page 11

Page 20: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

Harry Norman, Realtors® TinyMCE Users Guide

Version 1 1

TinyMCE Users Guide

Introduction

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor. What this means is that it will let you create html content on your web site. TinyMCE supports a lot of Operation Systems and browsers. Some examples are: Mozilla, Internet Explorer, Firefox, Opera, Safari and Chrome. TinyMCE has a large userbase and an active development community.

This user manual will show you all the basics of the TinyMCE editor.

Basics

The default TinyMCE editor will look like this:

On top you can see the toolbar, below the text area and at the bottom a resize bar. If you drag the lower right corner you can make the editor window bigger or smaller.

This information was created for use by Harry Norman, Realtors® for the sole and propriety use by Harry Norman agents and employees. Any other use is not authorized or supported in any way.

©2009 Harry Norman, Realtors® All rights reserved.

Questions? Comments? Contact [email protected] or call 404-504-7965

Page 12

Page 21: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

Harry Norman, Realtors® TinyMCE Users Guide

Version 1 2

TinyMCE Toolbar

The following table describes the function and output of each button.

Icon / Menu Name Description Example

Paragraph Style Menu

Paragraph Style Dropdown button - Applies standard text styles to selected text.

See

examples in the left icon

column

Font Family Menu

Font Select button - Sets the font typeface.

See

examples in the left icon

column

Page 13

Page 22: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

Harry Norman, Realtors® TinyMCE Users Guide

Version 1 3

Icon / Menu Name Description Example

Font Size Menu

Font Size button - Sets the font size.

See

examples in the left icon

column

Bold Bolds selected text text

Italic Italicizes selected text text

Underline Underlines selected text text

Strikethrough Places a line through text text

Justify left Aligns the selected text to the left text

Justify center Aligns the selected text to the center of the screen text

Justify right Aligns the selected text to the right text

Justify full Aligns the selected text to both left and right text

Bulleted list Creates a bulleted list

• item 1 • item 2 • item 3

Numbered list Creates a numbered list

1. item 1 2. item 2 3. item 3

Out dent Moves an indented section of text one tab to the left N/A

Indent Indents the selected text by one tab N/A

Block quote Indents entire paragraph to block quote style N/A

Undo (Ctrl+Z) Undoes the last action. N/A

Page 14

Page 23: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

Harry Norman, Realtors® TinyMCE Users Guide

Version 1 4

Icon / Menu Name Description Example

Redo (Ctrl+Y) Redoes/Repeats the last action, which has been undone. N/A

Cut Removes the selection from the active document and places it on the Clipboard.

N/A

Find Find text in the editor's content area N/A

Find & Replace Find (and replaces) text in the editor's content area N/A

Copy Copies the selection to the Clipboard. N/A

Paste Inserts the contents from the Clipboard at the insertion point, and replaces any selection.

N/A

Paste in Plain Text

Inserts the text from the Clipboard at the insertion point, and removes all formatting and leaves plain text.

N/A

Paste from Word Inserts the text from the Clipboard at the insertion point and keeps all formatting.

N/A

Insert Table Inserts a table N/A

Row Properties Table row properties N/A

Cell Properties Table cell properties N/A

Insert Row Before Inserts a row before the current row N/A

Insert Row After Inserts a row after the current row N/A

Delete Row Deletes the current row N/A

Insert Column Before

Inserts a column before the current column N/A

Insert Column After Inserts a column after the current column N/A

Delete Column Deletes the current column N/A

Split Cells Splits the current cell N/A

Merge Cells

Merge the current cell with other cells

N/A

Page 15

Page 24: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

Harry Norman, Realtors® TinyMCE Users Guide

Version 1 5

Icon / Menu Name Description Example

Select text color Text Color (foreground) button - Changes the foreground color of the selected text.

Text

Select text background color

Text Color (background) button - Changes the background color of the selected text.

Text

Preview View page in preview mode N/A

Insert Time Inserts current time. N/A

Insert Date Inserts current date. N/A

Insert Link Inserts or edits a link text

Unlink Removes the current link text

Insert Anchor Inserts or edits an anchor N/A

Insert Image Inserts or edits an image N/A

HTML Mode Edit the HTML source code N/A

Full Screen Toggles fullscreen mode N/A

Direction Left to Right Left Justification Text

Direction Right to Left Right Justification Text

Print Print page contents N/A

Run Spell Checking Spell check page text N/A

Insert Emotions Insert emoicons

Insert Special Character Inserts a special character ®

Superscript Makes a text superscript Text2

Subscript Makes a text subscript Text2

Remove Formatting Removes custom or all formatting from selected text. N/A

Insert Horizontal Rule

(e.g. horizontal rule) button - Inserts a horizontal line at the cursor position.

Insert Image Map Allows users to define clickable areas within image. N/A

Insert Non-BreakingSpace Character

Used in special situations. Used to insert a space between text, images, etc.

N/A

 

Page 16

Page 25: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

10

Using Basic Tools  

How to Insert a Table    1. To insert a table, click so that the cursor is flashing inside the Web Builder window 2. Click on the Table icon 

 

3. The Table Properties window will appear.  Complete the information according to the properties you need and select Insert.  Make sure the entire width of your table is no wider than 980. 

 

To insert a row or delete a row: 

o Insert Row Before icon ‐ the row will be inserted above the row in which your cursor is placed 

o Insert Row After icon ‐ the row will be inserted below the row in which your cursor is placed 

o  Delete Row icon ‐ the row in which your cursor is placed will be deleted 

 Editing the Table:  To edit a table, right‐click inside the table and select Table Properties. You can also select Cell Properties, Row Properties, or Column Properties if you want to edit that part of the table. 

The following settings are recommended for general use:  Rows – determined by user needs Columns – 1 Cellpadding – none Cellspacing – none Alignment – left Border – 0 Width – 980 Height – default Class – none selected Table caption – not selected 

Page 17

Page 26: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

11

Using Basic Tools  

How to Insert an Image    

1. To insert an image, click inside the cell where you want to insert the image 2. Click the Insert/edit image icon 

 

3. An image properties box will appear allowing you to browse your computer to find the image file.  Select the file you wish to insert and click Open. 

4. Once you have selected the image  file, click Upload 

5. Enter a Description of the file into the Image Description box 

6. To insert the uploaded image, click Insert 

 

How to Insert Text  

To insert text, click inside the cell or space where you want to add text to and begin typing 

 

 

Welcome to Harry Norman, Realtors

Page 18

Page 27: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

12

 

Using Basic Tools  

How to Modify Text  You can use different fonts, sizes and colors to help separate Headings and Body text as well as Links and other information. 

All Tools used to change font properties are found on the Tool Bar 

 

To change the font of the text:  Highlight the text and select the font under Font Family 

To change the size of the text:  Highlight the text and select the size under Font Size 

To change the color of the text: Highlight the text and choose the Font Color from the drop down 

 

Note: Each line of text should have a designated Font Family and Font size.  After you enter each line of text, be sure to highlight the text and select a Font Family and Font size.  If this is not specified, a default font and size will be used and your text may display inconsistently on your agent page.  Be sure to confirm the fonts and sizes when previewing your page before submitting for approval. 

 

Page 19

Page 28: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

13

 

Using Basic Tools  

How to change font color  

  To apply a color to your text: 

1. Highlight your text, then click the down arrow next to the Font Color button and choose More Colors   

2. You can select any color in the Color Picker by clicking anywhere in the gradient 3. Click Apply 

 

It is strongly advised that you use consistent colors throughout your agent page.  These colors will vary depending on the agent template you choose.   

Corporate Colors – Hex Colors ­ Web Colors 

#330e00 #b80007 #ff3600

#ffb300 #f7edd4

 

Page 20

Page 29: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

14

 

Using Basic Tools  

What is a Hyperlink?  A Hyperlink is a specified section of text or a specified image that links to another web page (within the same site or on a different site) or resource (i.e. PDF document, email).  Hyperlinks are generally a different color (usually blue) and underlined, so as to be easily found.   

Example:  Click Here to read more of my resume 

On your site, you may use Hyperlinks to connect viewers to information on current Market Trends, Community Schools, Custom Home Search, your resume, MyHome registration, Mortgage information, Home Buying/Selling tools, etc. 

How to Create a Hyperlink        To create a Hyperlink:   Select the text you wish to make a Hyperlink.  Click the Insert/Edit Link Icon.  

 

Page 21

Page 30: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

15

Using Basic Tools  

How to Create a Hyperlink (cont.)  

1. Type in the web address in the     Link URL field. 

 a. Creating an External Link:  If you 

want to create a link to an external website, type the web address in the Link URL field. (Include the http:// in the web address) 

 b. Creating an email link: If you want 

to create an email link, type in mailto: followed by your agent email into the URL field  (i.e. mailto:[email protected]

 c. Link to an Internal Page: If you want to create a link to a page found on HarryNorman.com, visit 

the page you wish to link to and copy the link and paste it in the Link URL field. Each page will have a different id number and the URL should look similar to the following: http://agentname.harrynorman.com/?PageID=12 

 2. Choose the Target:  open in a new window if you are linking to a webpage outside of 

HarryNorman.com or to a document (PDF).  If you are linking to a page within your website, you can leave this alone.  Default setting is to open in same window. 

 3. At the bottom, click the Insert button. The text will now appear in the Web Builder window as 

underlined blue text.  4. After you press the insert button, if you didn’t include the http:// in your web address, you may 

receive this message:  

  

5. Click OK to finish this procedure 

Page 22

Page 31: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

5

Copy and Paste from Word

Copy from Word• In the Word document, select all of the text.

• (Edit > Select All -or- Ctrl+A)

• Copy the text. py• (Edit > Copy -or- Ctrl+C)

Page 23

Page 32: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

16

Using Basic Tools  

 How to Make an Image a Hyperlink  If you would like to make an image a Hyperlink: 

1. Right‐click on the image and select “Insert/edit link” 

  

2. Fill in the Link URL field   3. Under the Target field, select if you want 

the link to open in a new window or in the same window. 

 4. At the bottom of the window, click on 

the Insert button 

    

 

 

Page 24

Page 33: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

17

Publishing Changes to Your Website How to Save and Preview Your Page To save the changes you have made to your custom page: 

1. Click the Save button located at the top‐right of the Web Builder window 2. It is good practice to save your page frequently 

 

In order to preview the page, it first must be activated (see How to Activate or Deactivate a Page): 

1. Click the Preview button in the top right corner of the Web Builder window.  This will bring up a new window with your agent page, defaulting to the Welcome Page. 

  

2. Check to make sure fonts appear as desired and that all Hyperlinks work properly 

How to Submit Changes for Approval Once you have made all changes to your site, saved them and previewed to ensure they are displaying and working properly, you need to submit the page for approval.  If you do not submit for approval, the changes will not be made on the LIVE site. 

1. Click the Submit for Approval button in the top right corner of the Web Builder window.  A confirmation box will appear stating that your changes have been submitted to the Technical Service Center for approval. 

 Approval Schedule:  

Monday through Friday 9:30am – 5:30pm – approval within 1 hour Afterhours, holidays & weekends will be approved next business morning. 

You will receive an email confirming approval or an email explaining why it was not approved. 

Page 25

Page 34: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

18

Using the File Manager The file manager allows agents to upload and link to files such as Adobe Acrobat pdfs, Microsoft Word docs, & Microsoft Excel spreadsheets onto their Harry Norman agent website. 

How to upload files         1.  Click on the File Manager Tab 

2.  Click on the “Add a new file” icon 

3.  Click on the Browse button 

 

4.  Find the file on your computer and press the Open button 

5.  Then press the Submit button 

 

Page 26

Page 35: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

19

After the file is uploaded, you will see it listed here. 

 

Managing your files 

Delete the file        View the file in a web browser 

Website address for the file

Adding a link onto your website 

After uploading the file, you will need to create a link to the file on your website in order for your visitors to access it. 

1. Highlight the link on your file manager page. Or you can click on the link to open the file and then you can highlight the web address. 

2. Copy the address by selecting the Edit menu at the top of the window and click on Copy. 3. Navigate to where you want to place the link (manage pages > edit page > highlight text 

or image and click on the Insert/Edit Link icon. 4. Paste the address in the URL field.  Click on the URL text box and select Edit menu and 

click on Paste. 5. Press the save button on the Link Menu. 6. Press the save button located on the top‐right of the window. 7. Press Submit for approval to publish your changes. 

Page 27

Page 36: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

20

 

This guide will show you how to sign up for a Google Analytics account, what it is and how you can install the Google Analytics Key on your Harry Norman website.

Please note that Harry Norman, Realtors is not affiliated with Google in any way. Google Analytics is a free service provided by Google. The Web Builder has incorporated Google Analytics to give agents the ability to track visitor activity on their Harry Norman agent website.

On the layout page of the Agent Web Builder, you will find the Google Analytics Key field here:

Page 28

Page 37: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

21

What is Google Analytics?

Google Analytics is absolutely free to use and there are many benefits that come with installing it on your site. Here are the top five things you can do as soon as you start tracking your site with Analytics:

1. AdWords advertisers can make Analytics available right in their AdWords account as a separate tab through a simple linking process. Advertisers can review extra data for their online campaigns by tracking landing page quality and conversions (goals), and pick out their highest performing ads. You can also use Analytics to track other Google products including AdSense, Blogger, and Google Sites.

2. See which pages drive the most pageviews on your site from the Top Content report. This report can answer questions you have about your most or least effective pages - for example, a high bounce rate indicates a landing page that should be redesigned or tailored to the specific ad which links to it.

3. Which groups of visitors became customers or did something else important to the success of your business? You can get key insights for these questions by setting up goals.

4. Grant other people in your company or organization access so that they are restricted to viewing reports in a profile or given full access to help manage your entire account as an administrator.

5. There are over 80 reports with customizable, drag-and-drop interfaces. You can also create your own reports with Custom Reporting, create the segments you want to see with Advanced Segmentation, or view multi-dimensional views of your data with Motion Charts.

Signing Up

Google Analytics is a free product that tracks your website and gives detailed statistics about visitors to your website. For example, Analytics can show you how people found your site, how they explored it, and how you can enhance their visitor experience. With this information, you can improve your website return on investment, increase conversions, and make more money on the web.

We hope you'll find this guide helpful and that it will be a useful introduction to the reporting interface and basic features. To read this guide alongside with your Analytics account, sign in with your Google Account.

Don’t have an Analytics account? Visit: http://www.google.com/analytics

Page 29

Page 38: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

22

Getting to Know Google Analytics

See the diagram below to explore some of the features available for Google Analytics users.

1. Click this link to navigate back to your Analytics Settings page, so you can get an overview of and edit all your Analytics accounts and profiles. From there, you can navigate to the Profile Settings page, where you can view your tracking code, and create goals and funnels.

2. You can also navigate to any account using this pull-down menu.

3. The 'Settings' page is different from the “Analytics Settings” page. Here, you can set the email address associated to your account, your account language, and your email notifications settings.

4. The 'My Account' link takes you to a page listing all your Google Accounts. Learn more about Google Accounts settings page.

Page 30

Page 39: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

23

5. Click here to go to our Google Analytics Help Center. It searches over 30,000 pages of Google Analytics support content from the Help Center, Google Analytics Help Group, and the web.

6. Always remember to sign out of your account when you’re done!

Google Analytics reports

Google Analytics has over 80 reports to help you gauge your site's performance -- whether by usage metrics, return visit numbers, or time on page. Below is a list of reports that are available as of January 2009. However, please keep in mind that Analytics is continually releasing new features and reports, so this list may occasionally change and grow.

7. Visitors This section provides information on visitor interaction with your site, the type of visitors, and information about how they are viewing your site.

o Benchmarking, Map Overlay, New vs. Returning, Languages, Visitor Trending, Visitor Loyalty, Browser Capabilities, Network Properties, User defined

8. Traffic Sources Find out how different offline or online sources sent traffic to your site. View which sources are driving the most traffic to your site and spot trends from the provided graphs and charts.

o Overview, Direct Traffic, Referring Sites, Search Engines, All Traffic Sources, Keywords, AdWords (lists AdWords-specific information like AdWords Campaigns and Keyword Positions), Campaigns, Ad Versions

9. Content These reports are all about the pages in your site and how visitors interacted with each one. Use the data here to find time on page, landing and exit page information, and a navigation summary for pages. Another free Google product, Website Optimizer, has been useful for advertisers looking to increase conversions by testing different versions of their content. You can learn more about it here.

o Overview, Top Content, Content by Title, Content Drilldown, Top Landing Pages, Top Exit Pages, Site Overlay, Site Search, Event Tracking (in Beta)

10. Goals If you’ve set goals for your Analytics account, then you should see data in these reports. Learn how to set up goals and funnels .

o Overview, Total Conversions, Conversion Rate, Goal Verification, Reverse Goal Path, Goal Abandoned Funnels, Funnel Visualization

Page 31

Page 40: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

24

11. Ecommerce For Ecommerce site owners, these reports give extremely helpful information on the revenue, transaction, and ecommerce activity on a site. There’s a whole section on product performance to view your top-selling product, right down to the SKU number.

o Overview, Total Revenue, Conversion Rate, Average Order Value, Product Performance (Product Overview, Product SKUs, Categories), Transactions, Visits to Purchase, Days to Purchase

12. Design a custom report using the metrics and dimensions you want to see. For more information, please read our Quick Start Guide.

13. Settings – Advanced Segments and Email Advanced Segmentation: Slice and dice your data in the way you want to see them. Click ‘Advanced Segments’ to create these segments and apply them to your reports. Read through our tutorial and view our video on this powerful feature here. Email: Manage scheduled email reports. In order to learn how to modify them, please read this article.

14. Click on any of these help resources to get information on the specific report you’re viewing, tips on how to interpret and use the information for your campaign, or learn what other people’s common questions are.

15. Select from this pull-down menu to jump to another Analytics account.

16. Apply the advanced segment you created to a report and compare it side-by-side to other graphs. See number 13 to learn more about advanced segments

17. Select a date range through a calendar or timeline slider to graph your report data by clicking on the arrow. You also have the option compare to past data in this section. Instructions on how to use this feature can be found here.

18. Graph your report by day, week, month, or hour (where available). Learn more.

19. The selected date range, graph by view, advanced segment or metric is viewed as a graph here.

20. Get at-a-glance views of your account’s key metrics here.

21. Add or delete report snapshot modules to your dashboard. To add a module, go to your desired report and click ‘Add to dashboard’ at the top of your report. To delete one, click the ‘X’ on the upper right-hand corner of every module in your Dashboard report.

Page 32

Page 41: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

25

How do I add tracking code to my website?

Step 1: Access your tracking code in your Google Analytics account

1. Log in to Google Analytics at http://www.google.com/analytics 2. From the Overview page, select the account that has the profile for the tracking code

you're looking for, as the code is profile-specific. 3. Select the profile from the accounts Overview page. 4. From that profile's Actions column, click Edit 5. At the top right of the 'Main Website Profile Information' box, click Check Status 6. Your tracking code can be copied and pasted from the text box in the Instructions for

adding tracking section

Still Confused? Watch video instructions by visiting this link: http://www.youtube.com/watch?v=Po7kpV71vhs&feature=player_embedded

Step 2: Copy and Paste your tracking code into the Agent Web Builder

1. Log into the Web Builder 2. On the homepage, find the Google Analytics Key field

3. Paste the UA code in the text box. Only the UA code is needed. The UA code looks like this: UA-1231234-1

4. Press the save button at top right.

Page 33

Page 42: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

26

It will take up to 24 hours for your Google Analytics account to start showing data. You will know that it is working correctly when you find a check mark in the status column on your profile page.

Page 34

Page 43: W b i Edi iWebsite Editing TlTools - Liz Murphylizmurphy.net/img/WebsiteEditingTools.pdf · Format images to make them web-friendly 2. Ct F kCt&dittbl AddCreate a Framework: Create

 | Harry Norman, Realtors  W e b   B u i l d e r   v 1   

27

Where to Find Additional Support  

 Technical Support or General Questions  

Contact our web development team for your technical Web Builder issues or questions. 

Phone:  404‐504‐7965 Email:   [email protected]  

 

Continued Training on Web Builder  Contact the Harry Norman Career Services Department for more information on available training classes. 

  Career Services   Phone: 404‐504‐7944   Email: [email protected]   

                    

Page 35