If you know how to work basic text editors like Microsoft Word, you are well on your way to updating your website with Servee. Before you begin, make sure you are using the Firefox web browser. If you need it, download it here for free. Once you are in Firefox, type the address of your website in the address bar followed by /admin (for example, http://www.servee.com/admin). Enter the username and password, and this will give you access to edit your website.
figure 1
|
A. Advanced Site Editor |
J. Ordered list / Unordered list |
First, browse to the page you wish to edit using the normal navigation for the site. If the navigation is hidden under the toolbar, just drag the toolbar out of the way.
figure 2
On each page, there is a field for a headline and a subhead. If you don't need either of these, you can leave them blank without affecting your site. However, having elements in those fields helps search engines locate the key elements of your page.
Make edits to your page with the text tools to the right of the content window. Most of the buttons on the text toolbar are similar to those used in other programs. An exception may be the Add styles button (fig. 1, P., and fig. 2). This tool is where the designer of your site has given you site-specific color, size, and font specifications for your type, and also specifications for your images. The designer has been given control of these elements so that the look and feel of your site remains exactly as the designer intended.
figure 3
For the sake of this tutorial, we'll assume you are placing an image, but the process is the same for PDFs, audio, video, and most other types of media documents. Servee accepts files up to 60 MB in size.
First, place the cursor where you want the image to go in the content window. Click the media button (Fig. 1, M.).
Click the browse button (fig. 3, A.) to select the image or file from your computer. Once selected, click OK and then Upload (B.). Servee will automatically resize the image to the appropriate width for your content window, so there is no need to shrink the photo in an image editing program before you place it on the web.
You'll see the new image in the preview window (C.). Click on the image, and then type in the title, description, and tags for the image in the resource fields (D.). The tags are very important. Once you have several images on your site, the tags allow you to sort through your images quickly. If you upload ten images from a family vacation, you could tag all of them with the same descriptive name, such as "vacation 2009." After you update the resource fields, the tag will appear in the tag field (E). To narrow the preview window to display only the "vacation 2009" photos, simply click on that tag, and the other files will become hidden. To display all of the files, click "Show all files" in the tag field.
To add the image to your page, click on the image in the preview window and select Use This Media (F.). Once you are back in the editor mode, you can resize the photo by dragging the corners, or select different floating options (right, left, or full) from the Add styles menu.
Image galleries are based solely on tags. Add a tag to a group of photos, such as "ward photos" in the example above. Select the "create a gallery" checkbox, and choose the display rule you wish to use. The default for most sites is "Javascript Overlay Gallery," which creates a list of thumbnails on the page that link to a full-screen overlay. Select Use This Media (F.) to apply the gallery. In the editing window, you'll see a line of code where the gallery should be:
This is a Servee script. Select Save/Publish (Q.), and view the live page in another window to see the gallery in action. To add or remove an image from the gallery, just add or remove the tag that the gallery refers to. For a more in-depth look at galleries, see our gallery tutorial.
figure 4
To add a link to your content, highlight the text or image that you wish to become a link and click the link button (fig. 1, K.).
To create a link that directs to another page within your site, choose the page from the drop-down menu. (fig. 4, A.)
To create a link to another web page, type in the full URL to the page in the second field. (B.)
Once you have specified where the link will point, add a title tag in the third field (C.) describing the link for search engine optimization.
Note: Links to other web pages always need to start with "http://". In order to create a link to an e-mail address that will open in a new Outlook message, replace "http://" with "mailto:". When you are finished, the field should look like this: mailto:name@address.com.
figure 5
Blogs are used for time-sensitive content such as news articles, event summaries, or a monthly letter-from-the-CEO. Once a blog has been created, add an entry by selecting New Blog Entry (fig. 1, G.). Type the headline of your entry, select the blog you wish to post to, and select Add News/Blog Entry. You will be directed to a new post. Once the page is done, select Save/Publish (fig. 1, Q.) to create the post.
To create a calendar event, the process is similar. Select New Calendar Entry (F.) and enter the name of the event. Choose the calendar you wish to post to, and select Add New Event. Add the date and time of the event, add a description, and select Save/Publish (fig. 1, Q.).
Now that you have a grasp on the content editing features of Servee, it's time to move on to the Advanced Editor. In the next tutorial, you'll learn how to add standard content pages, blogs, and calendars. you'll also learn how to edit your navigation tree and change page URLs.
All site-wide changes to your site are made in the advanced editor. Select Advanced Site Editor (fig. 1, C.) from the Admin Toolbar. This will open the Advanced Editor in a new window (fig. 6). Familiarize yourself with the editor:
figure 6
|
A. Site Structure and Pages |
H. Site Structure Tree
|
First, notice the Site Structure Tree (H.). Each of these items represent a page on your site, and they're arranged in the same hierarchy as your navigation. With this interface, there are an unlimited number of tiers for your navigation. For most sites, it's best to keep the structure to two or three tiers.
figure 7
Hover over the Add a new page button (fig. 7, A.), and select New Standard Content Page. The process is the same if you wish to create a new calendar page, blog page, or add a link to another web site within your navigation. Select the new page from the Site Structure Tree (B.), and give it a title (C.). As you tab away or click anywhere else on the page, the URL box will be populated automatically. If you'd like to change the, keep in mind that when you edit a URL, only letters, numbers, underscores ( _ ) and dashes ( - ) are permitted. All other characters placed in the URL field will be deleted.
Now that you've given it a name, you can move it to the correct location within your site navigation. Go to the Site Structure Tree (E.) and click and drag the page. You can make the page a child of another page by dragging over that page, or simply place the page between other pages. Using this feature, you can move around entire groups of pages within the navigation.
When you return to your actual website and refresh the page, you'll notice that the new page doesn't show up in the navigation. When a new page is created, the default is set to hide it from the navigation. This is so you can add content and make sure it is exactly how it should be before publishing it to the live site. All pages that are hidden from the navigation will still be visible in the navigation on the admin side, so you can always get to the page to edit. If you would like to display the page in the navigation of your site right away, click the Visibility Toggle (D.). If the page is hidden, the visibility toggle will be grey. Click on it, and it will change to green, indicating that the page is now visible. To hide the page from the navigation, select the button again. All this does is hide the page from the navigation. Technically, it's still posted to the live site. If there is a page that isn't important enough to be displayed in the navigation you can hide it, and still link to it from another location using the link dialog.
To delete a page permanently, go back to the advanced editor... Select the page in question and choose Delete (fig. 6, K.). If this page is a blog or a calendar, all entries associated with that blog or calendar will be deleted as well, so proceed with caution.
The other buttons in this dialog (fig. 6, L.) are just links that go directly to the page editing tools or straight to the live version of the page. Note that each time you use these buttons, it will open a new tab or window.
Congratulations! You now have all the skills you need to make edits to your website. If you'd like to dig a little deeper, check back soon for more tutorials and videos or contact us with questions.
Welcome to Servee.