ZeDDD CMS Tutorials

 

 

1 Overview of application


Design
Page Banners and Footers
Content

 

2 Setting up


Meta Data
Page tracking with Google analytics

 

3 Menus and sub menus


About Menus
Menu Settings
Style Sheet
Page Template
Anchors

 

4 Page Content


About Page Content
Section Banners
Follow-on Page
Formatting Text
Email URL and PDF Links
Embedding Images in Text
Updating and publishing
SEO tools

 

5 Resource Libraries


Image Library
Catalogue Library
PDF, Zip Libraries
Client Library

 

6 Applications


About Applications
Yahoo maps
Gallery
Catalogue
3D Mall
3D Info Centre
3D Shop

 

 

 
Overview of application

 

 

ZeDDD has developed the ZeDDD CMS from its previous CMS GeneratorWeb application. ZeDDD CMS uses an industry standard HTML platform with a modular framework that supports a range of media. Text, images, maps, Video and Flash files can all be assembled and published in real time without the need of FTP or backend management systems, making it easier for non technical people to manage their web applications.

 

Design


The Design is primarily handled by the web designer in ZeDDD's Design Mode using ZeDDD's own CSS (Style Sheet) manager. Almost any custom design can be applied to a site to achieve a client's preferred branding and design. We do not cover tutorials on using the ZeDDD CMS style sheet manager.

 

Page Banners and Footers


Once the site has been designed each page can be customised further with headers, footers and side banners. These can be decorative or functional using either Jpeg Images, Flash Files or Custom Applications
1 Select a page to edit from your menu or submenu
2 The Page Banner menu is located in the top of the page under the 'Page Banners' tab
3 Select the Banner you want to edit Top, Side or Footer tabs
4 Top Banner has two option for its position, 'Content' or 'Header'
  Content places the banner under the menu bar which is suitable for Jpeg's but Swf Banners will cut off any drop-down menus
  Header places the menu above the menu bar
5 Select the format JPG, SWF, or Application
6 Open the folder tab to access the Library where you can upload new files or select existing files
7 Once selected the application will pop up a size window that has two options, Input or Scale to determine the size.
(It is Important to setup to the images with correct resolution and pixel dimensions in a photo editing application before uploading them to your library)
It's a good idea to name your Images when you upload, so you can recognise them in your library list
8 Once you have loaded your image check the 'Data' field to display the version number to ensure the most recent version is displayed on your site
9 Press Publish then Preview to view the page with it's banner

 

Tut_pageBanner.jpg

 

Content

 

The content can include a variety of media from
simple HTML text and images,
Flash SWF files,
Video
Maps
Shopping Carts
Galleries
3D Shops and Malls
Custom applications.

 

The Content is organised in modules which have the same structure, starting with a Section Heading, then a subheading, then the text box then the Section Banner. The Section banner can contain images or applications and can be set to any size.
The Content on a page starts with a single module, but you can add further content modules by selecting the Follow on Page and creating a new Module. Follow on Page modules can be controlled with their own On Off switch.
Follow On Pages can also be linked to the Menu through the Anchor Tag, simply by selecting the Anchor next to the on Off button and naming it the same as you have set up in the Menu settings.

 

 

 
Setting up for SEO

 

Serch Engine Metat Data settings

 

Setting up your site involves planning that will save time later. Each page you publish carries Meta Data that displays in Search Engine results and Google Analytics tracking code that is used to track your website's traffic. The zCMS has two places where you can manage your Meta Data. You set up your default Meta Data in the settings which will be applied to every page, then you can go into each Page and edit the Meta Data individually.

 

Meta Data


Meta Data has three main parts
Meta Heading
Meta Description
Meta keywords Access your Meta Settings Tab by Selecting your Settings Tab in the Main Left menu

 

The Meta Heading should be a short descriptive title that will display in bold in Search engine results. Use no more that 50 characters.

 

The Meta Description is used by search engines with display results, so it is a lead into your pages that helps viewers find the information they are looking for The best way to write the Meta Description is to list your Keywords then combine them into a meaningful and short sentence.

 

Meta Keywords are not used as much due to their misuse early in the days of the internet, but they may have some use so provide as many key words that relate to your site as possible.

 

Generally the most useful part of your Meta Data is found in the first sentence of each page you publish as this is indexed by ZeDDD in your Meta Description section.

 

 
Menus and Sub Menus

 

 

The Menu is published on each page to enable the full drop down menu to appear on each page. Because of this, it's important to plan your menu before you load your content, otherwise you will need to republish your content on your whole site each time you make a menu change.

 

Menu Settings

 

You access the Menu Bar Tab under the Settings Tab

 

There are two Menu layers with the first displaying the main sections that will appear on your menu bar. You will need to consider the length of each menu title and the number of sections to ensure it fits within the available menu bar space. You have 10 section spaces available but you may not be able to use each section due to space.

 

The Sub-Menu pages have unlimited pages (except on the Express Web Editor that is limited to 5 Sections with 6 pages each)

 

The Menu-Section and Sub-Menu editors are similar
They have the menu Tag that will display in the menu
The relative URL link that will be used as the web address of the page
Visibility Setting
The Style sheet template
The Format Template
The Anchor Name panel (on the sub page menu only)

 

Setting up a menu has a few important things to remember
Your first page on your site is alway given the Menu URL name of 'index', as this is the default page that is displayed when linking to your domain name
Menu URL names shouldn't contain special characters such as "%$#/|\!?* or spaces.
Menu Tags shouldn't be too long, to ensure they fit within the menu boxes.

 

Update and Publish your Menu Settings to save them, they will now be available when you set up your Content pages

 

Visible Switch

 

The Visible switch allows you to have a page that is not published in the Menu, which could be useful for pages that are referenced in other ways. If you want a page switched off then you will have to publish the whole site to update the change to the menu. If you want to just temporarily have a page switched off then it is better to use a Follow on Page and use the ON OFF switch which doesn't need the whole site republished to change the visibility.

 

Style Sheet

 

The Site generally has one style sheet controlling the design of the whole site, however in some sites their may be multiple style sheets which can be selected from the drop-down menu

 

Page Template

 

The Default page template is the page Template. Other templates change the page structure, such as the Catalogue template used for shopping cart applications, and SWF that is sometimes used for custom page applications. Generally leave it set to 'Page'

 

Anchors

 

Anchors Provide a way for a page that has multiple sections to have their own location displayed from a link, rather than simply going to the top of the page.

 

The Anchor requires a name that can be used and references with the # as a prefix eg add the name 'mysection' as the anchor phrase and it will be referenced as a anchor link like this. www.yourdomain.com/page.html#mysection

 

 

 
Page Content

 

 

About Page Content

 

Page Content can be displayed in the Introduction page or the Follow on Page with the same formatting options available. Each Section has a heading and a Summary followed by a Description Window

 

You Can add plain text to each of these and the Style Sheet will provide the correct fond and sizes, but you can provide further formatting with the format tool that is explained further below.

 

Section Banners

 

The Section banners provide three options
JPG
SWF
Application Each option takes you to a library where you can store or upload new assets for your site. You can see more about managing your Library in the later section.

 

Once you have selected your Library item you need to select a size in Pixels. You can select the input fields if you know the correct size or you can select the scale option that will scale it correctly. It is important to plan your asset sizes before you load them into your library to ensure the resolution and size display correctly on the finished page. Once you have loaded and set the size, you may need to add in the data field the version number if you are updating an existing image to flush the previous version

 

Select the Apply Tab to set the size, then press the update and Publish Button to save and publish your page on your website. Remember that HTML sites cache on various servers as well as your own computer, so you may find a previous version will display when you visit the site. The Preview Button will force the latest page to display by adding additional code to the page URL, so if you are unsure if you are looking at the most recent page, then always use the preview button or add the code ?rn=123 (use a different number each time)

Follow-on Page

 

The Follow on Page has a similar structure as the page introduction, but it has two additional features ON OFF Switch and Anchor page Option

 

The ON OFF setting will control the publishing or not of selected Follow on Page, which is ideal for when you want to work on a page before you want it displayed or you have a seasonal page that can be stitch on and off when required.

 

The Anchor Setting requires a name written in the Anchor Box which will be used as a link in the address bar. Don't use special characters or a space to avoid errors

 

Formatting Text

 

Prepare your text in a Document editor and paste it into your Document window. With HTML you will need to provide formatting code to display it correctly on your published page. ZeDDD CMS has a simple way to add formatting code by selecting the Formatting Tab below the Text box and selecting the formatting you require

 

Tut_FormatBox.jpg

Text Formatting Options
New Line
Tab
Bold
Line Break
Italics
Bullet Point
Line
Text Style
Underline
Strike Thru
Heading 1
Heading 2

 

Layout Options
Table
Indent

 

Embed Code
Email
URL Link
Image
PDF

Email, URL and PDF Links

 

Embedding Emails or URL?s requires a few more steps, so follow the step by step instructions in the format box and then you can paste the resulting text into your description page.

Updating and Publishing

 

Press the Update Tab and Publish Tab to save and publish your page on your website. Remember that HTML sites cache on various servers as well as your own computer, so you may find a previous version will display when you visit the site. The Preview Button will force the latest page to display by adding additional code to the page URL, so if you are unsure if you are looking at the most recent page, then always use the preview button or add the code ?rn=123 (use a different number each time)

Making changes to the Menu

 

If you have made changes to the Menu or Sub Menu, then you will be prompted to re-publish the whole site so that the new menu information is displayed correctly on every page. This may take a while if you have a number of pages. If the application finds a blank page then it will stop the Auto update and prompt you to load information into the blank page, so your site doesn't have errors for your customers.

 

 
Resource Libraries

 

 

Your libraries contain assets that you can use to display on any of your web pages Your Resources are stored in different folders and are managed separately.
Your site contains 7 different Libraries

1 Image Library for JPGs and PNGs
2 Catalogue Library that contains JPGs but have also Icon and Thumb size images
3 SWF Library that contains Flash Swf Files
4 Client Library that contains JPGs for Client uploads
5 PDF Library that contains PDFs
6 ZIP Library that contains ZIPs
7 Application Library that has various files for various application requirements.

 

You don?t have to select a library as it is automatically selected when you are editing various parts of your site. Apart from the Application Library each library has a similar structure. You can access your library from your Settings/Settings Tabs or when you are editing your page from the Section or page banner edit section. You have to select the library tab on the lower Left corner from the available list.

 

When you access the Library you will see the list of existing images already loaded with options of Add, Update, Delete. When Adding a new Image you need to remember to use a name that is meaningful if the default name is not suitable otherwise it will be difficult locating the image from your list at a later date.

 

Once you have given it the correct name you can upload the image by browsing your computer to find the image. Its important to remember that you should prepare images before you upload them as most digital images are too big to be used on websites. They need resized to a smaller size that will load quickly when people visit your site. If the image is too big it will take ages to load and if it's too small it will look poor quality. You may need to experiment with sizes to get the right size for your page. A typical web banner may be 700 wide pixels by 500 pixels High with a DPI of 72.

 

There are various Photo management applications that resize resample, crop and manipulate images that can be used to prepare your images before you load them onto your site.

 

Once you image has uploaded it will return to the list page where you can select it to display on your selected page.
You will see a pop up box that requests you to select the size of the image. You can use the correct pixel size that you have set it to if you know the size otherwise you can use the scale option to scale the image to your preferred option. If you don't select a size the image will not display on your finished page.

 

When you update an image then you need to add in the Data field the version number of the image to ensure the latest Image displays correctly

 

 
SEO Search engine optimisation.

 

How to set up SEO on each page.

 

ZCMS has Meta Data Page editor that allows you to load information into the Page for search engine optimisation. This is also the information that is often displayed on search engine page results, so the more useful information on each page the more useful it will be for you clients to find you on the Search Engines