The Website Editor
Thank you for your interest in Shortgrass Web Development’s Website Editor. This guide was created for use with the Website Editor as both a promotional document to demonstrate how easy it is to use, as well as reference material for those who need a refresher on how to use their website editor.
The Website Editor has the ability for you to make changes to your website's content from anywhere with an accessible internet connection: home, office, friend’s house, coffee shop, etc. There is NO SOFTWARE to install on your computer. All you need is your website browser (Internet Explorer, Safari, FireFox, Netscape Navigator, etc) and a working internet connection.
If you have any questions or comments regarding the editor, please fill out our Customer Support Form and we will get back to you shortly.
Logging In
To make changes to your website, the first thing you need to do is log on. To do so, you first need to open your internet browser. In the URL Box at the top of your screen (Fig 1.1) type in the address of your website (Example: www.yoursite.com). You will arrive directly at your website. If you are seeing website Search Results, then you are likely typing the URL into Google, Yahoo, or some other internet search engine and not the URL Box.
Figure 1.1
The URL Box in Mozilla Firefox
The next step is to return to your URL Box and add “/admin” to the end of your website address (Example: www.yoursite.com/admin). This will bring you to your login screen (Fig 1.2).
You will see a page that has a username and password entry, as well as options at the top:
- Home - Once logged in, this button will take you back to your list of editable pages
- Public Site - Opens your website in a new window. Useful if you want to make edits and see the results simultaneously.
- Logout - Logs you out of the Editor
Figure 1.2
Standard Login Screen
Enter the username and password provided to you by Shortgrass Web Development and click the LOGIN button.
If you lost your username and password, you can retrieve it by contacting Shortgrass Web Development.
Editing a Page
After successfully logging in, you will be presented with a table that lists all of the editable pages in your website.
PLEASE NOTE: Not every page on your website is editable. Pages that contain Forms, Calculators, or any advanced programming have likely been omitted from the editor due to their sensitivity. Casual changes on such pages (ie: moving boxes, changing names, deleting text fields) can break their functionality and could result in them not working correctly and needing to be reprogrammed. The Website Editor can be enabled on such pages, but be advised that fixing any problems resulting in its use will be billable at our standard hourly rate.
To edit a page on your website, simply click on the name of that page. The page you selected will appear in a table with several options that will appear familiar to those who use Microsoft Office products (Ex: Microsoft Word, Excel, etc):
The icons depicted have the same functionality as the icons in a Microsoft Office document. Cut, Copy, Paste, Bold, Italics, Create a Table, Right Align, Left Align, Create Bullets, Create Listed (numbered) Items; all of the standard functions of an Office document are present.
TIP: If you are not sure what an icon does, simply mouse over the icon and a small box will appear next to your curser that says what it will do.
To make text edits, simply place the mouse curser where you want to begin adding content and begin typing. To change formatting options (ie: Bold, Right Align, etc) highlight the text with your mouse curser and select the icon that correlates to the desired formatting function.
Submitting and Viewing Changes
Pasting Text from Microsoft Word
One common method of adding content to a website through the editor is by copying and pasting directly from a Microsoft Word document.
However, because Microsoft Word uses special characters (Ex: #, ?, !, ' ) that do not translate into website characters, documents are often plagued with odd symbols where the special characters were supposed to appear (Ex: Instead of "Don't throw the cat!", you may see something like "Don’t throw the cat!")
To ensure that Microsoft Word text is properly translated to the website, we recommend using the Paste from Word function. The Paste from Word icon resembles a clipboard with the blue 'W' logo:
When you click on Paste From Word, and new window pops up. If you do not see the new popup window, please check the settings on any software or browser popup blockers (Internet Explorer 7) you may be running.
Copy the text from your Microsoft Word document, Paste it inside the box using the keyboard (Ctrl+V) and click on the OK button. The text from the Word document is converted to website code, and is then automatically inserted into the editor.
Submitting and Viewing Changes
Making Text Consistent
A lot of people struggle with getting all of their website's text to look the same throughout. That is why it is common practice to use what are called Cascading Style Sheets, or CSS for short. CSS allows a web programmer to make all-encompassing changes to a website with a few lines of code. With one line of code, a website's Headers can all look the same, and with another line all of the body copy can look the same on each page.
To keep your website consistent using the editor, you will need to assign text the right CSS code. To do so:
- Highlight the text you want to change.
- Select an option from the 'FORMAT' drop-down box.
- 'Normal' - Body Copy, Normal Text
- 'Header 1' - Big Headers
- 'Header 2' - Sub Headers
- Submit your changes and view them
In the editor you will see the text will change size, but you probably won't see different fonts or colors in the editor. That's normal. You will need to Submit the Changes in order to see how they really look on the website.
Adding Web Links
To add a website link, highlight some text to make a link and click the Insert / Edit Link
icon:
A popup box will appear. Type in the URL (website address) into the box marked URL, starting with "www."
Example: www.shortgrass.com
Click on the tab that says 'Target' and in the dropdown box, select 'New Window (_blank)'. This will open the link in a new window, that way viewers going to a new website never physically leave your site. It is a best-practice rule for keeping website viewers on your website.
Click 'OK' and you are done.
Adding Anchor Tags
To create anchor tags, first input all of your information onto a page.
At the top of the page, create a list of the topics or subcategories.
Place an anchor tag by placing the cursor next to the beginning of the topic or subcategory you want the page to jump down to and click on the Anchor Tag icon (looks like a boat anchor). You will be instructed to give the anchor tag a name and this can be whatever you want, but all anchor tags must be different.
At the top of the page in your list, highlight the text that corresponds to your new anchor tag and select the Link icon. The popup box will appear and you will need to select 'Link to Anchor' under the 'Link Type' dropdown box. Then enter the same name you used when you created the corresponding anchor.
Creating a RETURN TO TOP link is to just simply link to
'#'.
Adding Photos
In the top tool bar, click on the Insert Image logo (landscape, yellow sky, mountain, sun). A popup box will appear.
Click on the Browse Server button on the "Image Info" tab. Another popup box will appear.
Now upload your image using the Browse button at the bottom and the Upload button to send it to the server. Your file will now appear in the box above.
Click on that file and the box will close. The original popup box will now have the server path to the uploaded image inserted.
Click OK and you are done. The image will be placed on your web page where your text cursor last rested. You can click and drag the image wherever you like on the page.
Attaching Documents
The procedure for attaching documents is a combination of the steps for attaching images and adding links.
To add a Word document or a PDF file, highlight some text to make a link and click the Insert / Edit Link
icon:
A popup box will appear. Select the 'Browse Server' button.
Now upload your file using the Browse button at the bottom and the Upload button to send it to the server. Your file will now appear in the box above.
Click on that file and the box will close. The relative path to the file you uploaded will now appear in the URL directory.
Click on the tab that says 'Target' and in the dropdown box, select 'New Window (_blank)'. This will open the link in a new window, that way viewers going to a new website never physically leave your site. It is a best-practice rule for keeping website viewers on your website.
Click 'OK' and you are done. The text you highlighted will look like a link, but when you click on it, your PDF document will load in a new window, or a download box will appear, prompting the user to save the file to their hard drive.
Submitting and Viewing Changes
To save your changes, scroll to the bottom of the page and click on the SUBMIT button. You then have three choices presented to you:
- Make More Changes - Takes you back to the previous page so you can make more edits.
- View Completed Page - Opens the page in a new window so you can see what your changes look like to the rest of the world.
- Return to Menu - Takes you back to the Home Page that lists your editable pages.
To discard your changes and return to the Home Page, click on the Cancel Edit - Return to Main link above the editor.
Common Issues
Text Formatting - Why does my new text look different than the old? It is the wrong color/size/position/font.
If you are noticing that your text is either not the right font, color, or size as the rest of the text on your website, or if your text is expanding closer to the edge of your website, then try changing the Formatting of the new text.
In the toolbar there is a dropdown menu labeled 'Format'. Highlight the text you want to correct and change the formatting option to 'Normal'. This should make your new text look identical to the rest of the text on your site.
|
