SiteBuilder (Adding/Editing Content) Enable web pages on your website Add and format text and images Upload images Create Image Links Create Sub Levels Create Hyperlinks Upload Data files (ppt,xls,word doc, pdf,etc.) Upload Flash Files Create iframes Access www.commercepromote.com in your internet browser. Go to Customer Log in> To access the client administration site key in your user name and password and Log in to your website SiteBuilder. Introduction SiteBuilder comprises the majority of the web pages within your Commerce Promote website account. Using our easy-to-use SiteBuilder, you will learn to add text and images as well as other functions without any HTML or programming knowledge. Before enabling your web pages, please go to My Account to enter your details. Please refer to the help manuals of respective sections to learn more about Your Account, esupport, emarketing and etc. Terms and Definitions Client Admin Site or Back End: This term refers to the administrative section of your website, which only you, the subscriber, can view. It is not visible to the general public and is accessible only by entering your username and password in the CommercePromote web portal. 1
Front End: The front end is the website itself, visible to the general public. The front end of the website is accessible by clicking the blue square (shown below) Image: Photographs, logos and other images Text: Words, sentences, numbers, paragraphs, and other writings. Main Navigation Buttons: Located at the back end, they include the following: SiteBuilder, esupport, ecommerce, emarketing, Community, My Account. Sub Navigation Buttons: Clicking on the main navigation buttons will reveal an inner menu of sub navigation buttons that permit access to various web pages and features of the CommercePromote application. View My Site In building or editing your web pages, just click and open the rectangular icon located at the top of the frame of the SiteBuilder page before beginning. Clicking it allows you to see the front end of the website. After creating/revising material on your web pages, it allows you to see how those changes really look on your website. Always click the Refresh button after opening the front end, in order to view recent changes. Refresh can be found in your browser s tool bar, under the main navigation button, View. Creation of Web Pages in SiteBuilder Web pages are formed in the SiteBuilder (1 st blue icon ). You will see the navigation buttons that are available for your type of industry. e.g. Web page- About Us 2
Select the pages that you wish to make visible. Every page with a check in the box in the VISIBLE column will appear in the menu bar on the left hand side of your website. Clearing the checkbox will remove the page from your menu bar. Choose whether or not to secure each page, this is optional. Every page with a check in the box in the SECURED column will be password protected. This means users will have to login to view the contents of the page. The login and password for the secured pages can be set on Website Login tool under the esupport menu. E.g., About Page Name Visible Secured About Us History Mission & Vision Staff Testimonials Home What's New News Events Projects Awards & Honors Photos enewsletter Services Our Services Other Services Catalog Resources Specifications Return Policy Shipping Publications FAQ Links 3
Area Info Contact Contact Info Appointment Booking Request Info Directions Mailing List Please note: Your landing page (Home) appears in Site Navigation. No content available at this level informs you that the page is empty Enable web pages on your website Add and format text and images Add Content, please select the type of content you wish to add by clicking on the icons i.e., Image Only, Text Only, Data File, Text and Image, Image and Text, Flash File, iframe To add Text Only Text: Select this option to add text only Image: Select this option to add an image only Image + Text: Select this option to have an image appear on the left side of your website and the text to its right. Text + Image: Select this option to have text appear on the left side of your website and an image to its right Data File: Select this option to add a data file. Flash File: Select this option to add a swf flash file iframe: Select this option to add an iframe 4
Copying Text From Other Sources Best Method to use Note Pad Click the Text Only button Instead of manually inputting data, you may opt to simply copy text and paste it directly within the Text Editor. Whether highlighting and copying from a web page, Word document or other source, the material must be stripped of its coding before being pasted into the Text Editor. Highlight and copy the text to be transferred Open the Notepad program (Start>Programs>Accessories>Notepad) Paste the copied text onto Notepad Recopy the material from Notepad Paste into the Text Editor Save changes Text Only: Pasting from Word Document Compose your text in a word document in font type Arial and size, 12 to paste into the Text Content When you cut and paste it into the back end, you will be prompted as appended: Allow access and ok the above. The back end will prompt you (b) to clean it before pasting a) b) However, you are advised that it is best to format your text first in notepad to avoid embedding of original formats that may cause problems: Use Note Pad: To ensure that you do not embed original formats into the text, it is best to clean up your text in NotePad and then cut and paste into Text Content immediately. You can then format your text, i.e. choose your font, size of text, colour etc etc 5
Enabling content block: Image + Text Image + Text: Select this option to have an image appear on the left side of your website and the text to its right. Text + Image: Select this option to have text appear on the left side of your website and an image to its right If you select Image/Text or Text/Image you will be brought to a screen that allows you to add images as well as text. If you select Image or Text only, you will be taken to a screen displaying either image functions or the Text Editor only, depending on selection. Image related functions occupy the upper half of the page if Text/Image or Image/Text have been selected. Image Width: 850 usually occupies the full width (depends on template design). Size your image accordingly from 150 onwards. Text related functions are located in the lower half in the Text Editor: Upload images Uploading Personal Images (Image/Text function selected) To upload a personal image, click Browse A window opens revealing the desktop of your computer Select (highlight) the image file desired Double click the file name or click Open on the pop up window Image file name will appear in this field, confirming upload Personal Image Requirements Images must be in the form of JPEGS, GIFS or PNG An image should preferably not exceed 75K An image cannot exceed 800 pixels in width To determine the properties of an image: Point your mouse on the image Right click your mouse A menu selection appears Select Properties (bottom menu selection) Note: Do not determine image properties on the back end as they will not reflect actual dimensions; only do so on the front end 6
Click here to upload an image from your personal computer Click here to upload an image from the photo gallery Uploading Images from the Photo Gallery (Image/Text function selected) Size is 75K and pixel width 120 To upload an image from the Photo Gallery, click From Gallery The Photo Gallery will open Click the photo name or the image to upload Photo Gallery The Photo Gallery contains various categories of stock photography Navigate categories via the drop down menu Use the Previous and Next buttons, located at the bottom, to navigate individual pages within a category Click the photo name or the image to upload. You may use as many photos as you wish Images are of varying dimensions Photos within a category have been alphabetized by image name Do note that these images are the property of Commerce Promote Pte Ltd. Graphics Handling When uploading a personal image from your computer, you can shrink it so that it will fit the parameters of the Commerce Promote application. For uploading of header images where a frame exists as appended 7
For this template frame, pixel width is 650. Maximum width is usually 850 but varies with each design template. To alter an image to a specific size, you must do so using a graphics program (i.e. PhotoShop or Paint) and adjust it accordingly. Entering Text Type text in the white area of the Text Editor. You can format text by highlighting it and using the tool bar functions located at the top of the editor. Tip: Under Format, use Normal Div to enable single spacing. Fonts are deliberately limited to universal website fonts available on all desktops: Different Headings, Fonts and sizes are available The Text Editor simulates a word document type, you can bold, italicize, underline or even create a hyperlink and tables! Keep in mind that when using Image/Text or Text/Image, the photo s dimensions may compromise the layout of the text. For example, if uploading an unusually long (horizontal) image, in order to permit space for the image, text will wrap around an image. Furthermore, because the boundaries of the Text Editor and the web page itself 8
differ, slight variances may occur between appearances in the Text Editor as opposed to the actual web page in IE or Mozilla browsers. Regardless of the nature of your content block, when you are finished adding text and/or images: click Submit Changes Click Submit Changes to add content Click Cancel to return to the previous screen To add further sections, click any of the following items to create various text configurations: Only a single image is permitted for each content block For multiple images in a single section (i.e. a collage), you must combine the photos in a graphic arts program (i.e. Photoshop or Paint) and save as a single image You can create various content blocks on your web page by alternating the above configurations as seen here 9
Image + text Text+ image Image +text Image only Text only x3 To create a text headline above a photograph, enter a Text only block followed by an Image only block as shown below Image Only Block You can also upload an animated gif; these show up in mobile gadgets unlike flash files. Here, we show a gif image of our flyer; its two sided so we animated the front and back by using a gif animator software. 10
You can also upload an animated gif; here, we animated the front and back of our flyer. Screenshots are appended as it changes at the client admin site. We had already animated the two images before uploading it. Changes to By separating your content blocks, you can enable better layouts. Action Buttons Each content block has action buttons located on the right side of the page: Edit (pencil icon): Click to edit existing sections. Remember that although changes are possible, they must follow the original pre-format. Arrows: Use arrows to move content blocks one level up or down with each click. X: Clicking X will permanently delete a section. Should the deleted content block be sandwiched between other sections, they will remain intact and collapse against each other in the absence of the eliminated content section. Create Image Links Image Links Suppose you wanted to create a link on the Home page of your website with the source being an image of a telephone and the destination is the Contact Info page of your website. Proceed as appended: Step 1: Click the edit button (pencil icon) of a content item which has an image. 11
Step 2: Go to (front end of website) or the outside Webpage you wish to link to; the destination page Step 3: Copy the entire web page address e.g.http://www.yourdomain.com.sg/contactinfo.asp ) Step 4: Paste the web page address into the Link URL field Step 5: Click Image link, to ensure it works.. Go to the front end of the website and test out the Remove the URL from the Link URL in the Image Content if you want to remove a previous text link You can enter the web page address manually within the URL field as opposed to copying and pasting Create Sub Levels Sub Levels (green icon) A sub level is, a separate page connected to its main level. Click Sub Level and you will be brought to a fresh page. Add content as previously explained. You can create a single Sub Level page for each layer You cannot create sub Sub Levels (e.g. you can drill just one level deep) If you are at a Sub Level and want to return to the main level, click, located in the upper left hand corner. Deleting a Sub Level will not affect its main level yet deleting a main level will eliminate any attached Sub Level. Upon creating a Sub Level, a link is automatically created, connecting the main level with its sub level. This link, labeled as, does not appear on the back end of the website-just the front end. Refer to the example below: 12
The link appears automatically whenever a sub level has been created. Clicking it will bring the website visitor to the corresponding sub level page. The link does NOT appear on the backend (administrative section) Create Hyperlinks Creating Hyperlinks Hyperlinks, or links as they are commonly referred, are shortcuts from one website page to another, or even a different website. They can be in the form of text or images. To create a link, you must: Determine and create the source. Will the link be text or an image? If text, which specific word(s) will be the actual link. See underlined link above. Determine the destination. To which page is the link directed? Copy and paste the web address (URL) of the destination web page onto either the Text Link URL or the Image URL. E.g., Link the actual text or image to its destination page. Text Links Suppose you wanted to create a link on the Home page of your website with the source being the sentence, View our showcase and the destination is an external url that exists elsewhere. Proceed as follows: Step 1: Click the edit button (pencil icon). 13
Step 2: Type: View our current showcase inside the Text Editor box. Highlight read and use your mouse to click hyperlink button Step 3: Go to the url you want to grab and using the navigation buttons proceed to the destination page. Step 4: Copy the entire web page address where the external page exists: e.g.www.comercepromote.com/sg/showcase.asp Step 5: Paste the web page address by going to the window that pops up when you click Step 6: Click and test out the link, to ensure it works.. Go to the front end of the website Highlight text and click Unlink if you want to remove a previous text link If you want to change the destination page of an existing link, you must first unlink before revising 14
You can enter the web page address manually within the URL field as opposed to copying and pasting Upload Data files (ppt,xls,word doc, pdf,etc.) Data File Need to get a flyer or ebrochure online? Do it via Data File : here, you can upload a PowerPoint Presentation, an excel file and a word document besides a pdf of your flyer or ebrochure. Select Data File from the Add Content Item menu Upload the file using the Browse button. The allowed file formats are jpg, gif, pdf, ppt, pps, xls. Enter text (i.e. Click Here ) within the Text Editor Click Add Content button to save changes Click Cancel to return to the previous screen 15
Upload Flash Files Inserting a Flash File e.g. a shockwave Flash file Browse your computer for your swf flash file and upload it. It is that simple. Then adjust the width of the Flash file to fit within the width of the content area. This is usually done visually by looking at it in the Website. The reason is that the width of the content area changes based on the template selected. Create iframes How to create an iframe Copy the url link and upload it. It is that simple. Then adjust the width of the Flash file, maximum width is 800 to fit within the width of the content area. You will see the url link within your website and you could even scroll the web page within your website. 16
Congratulations on enabling your business website with Commerce Promote! We look forward to serving you further via our monthly enewsletter. Should you need to ask a question, please use our Support Request form and key in your question. Our U.S. Team based in San Diego, U.S.A will usually reply within 3 working days. The url is appended for easy reference: http://www.commercepromote.com/support.asp For manuals Please access url : http://muse.commercepromote.com/display/resources.asp?navid=625 For tutorials Please access url: http://muse.commercepromote.com/display/educationallinks.asp?navid=2137 17