- +Getting Started
- +Web Pages
- +Product Catalogue
- How do I add a new email address?
- How do I administer an email account?
- How do I check my email from webmail?
- Common email settings
- How do I configure Outlook 2013
- How to configure Outlook 2010?
- How to configure Outlook 2007?
- How to configure Outlook Express?
- How to configure Windows Mail?
- How do I check my emails in Thunderbird?
- How do I setup Netscape Communicator?
- How do I check email in my iPhone?
- How do I check email in my BlackBerry?
- How to configure Mac Mail?
- How to setup Entourage for Mac
- How do I add an email signature? (Outlook, Thunderbird)
- Mail Quota Warning
- How do I setup anti spam configuration?
- How can I download my email but keep a copy in server?
- Why am I losing important emails?
- Avoid "timeout" errors when checking email
- Setting the Root Folder Path for your IMAP account
- Email Setting for Bork
- +Site Styles
- +Site Admin
- How do I change my site configuration?
- How do I change my contact details?
- How do I change my password?
- How do I add Google Analytics?
- How do I add a Google Map?
- How do I hide and publish my site?
- How do I change the layout of my template?
- How do I see my site statistics?
- How do I use Meta tags?
- How to add social media?
- How to use robots.txt?
- How to manage custom file
- Can I have different style or template on each page?
- How do I change my website appearance or templates or style?
- How do I create three levels of navigation?
- How do I use a proxy server?
- How to disable or enable tax display?
- How to export order into .csv format?
- How to create a member protected page?
- How do I restrict access to my catalogue?
- How do I send email to members?
- How to Forward Emails to Multiple Addresses?
- How to forward emails "As Attachment" in Outlook.
- How to Enable SMTP Authentication in Outlook
- How to enable snippet in the website?
- How do I add custom code to my website?
- How do I create a desktop shortcut of WebAlive Console?
- How to Clear Your Browser's Cache
- How to upload favicon ico
- How to enable Re Captcha
- How to send files to WebAlive
- What is this message “click to activate and use this control”?
- How can I remove old content or URL from search engine (Google, Bing, and Yahoo)?
- +How to use the Editor
- The text editor
- How to do copy & paste in text editor?
- Why can't I upload my photos?
- How do I add an image to my site?
- How do I make an image pop up?
- How to update alternative text on images?
- How do I create a hyperlink?
- How do I upload a file for people to download?
- How do I add multimedia (YouTube video and flash file)?
- How do I remove inline style
- Why is my new line gap too big?
- How do I create and work around a table?
- How do I improve the layout of my page using a table?
- How to remove or hide table borders?
- What makes a good web page?
- How do I make a consistent page?
- How do I copy content from an existing page to a new page?
What it is…
The WebAlive ‘Design Console’ is a graphically based assembly tool for the production of stylesheets used within WebAlive content managed websites. The product works hand in hand with the ‘WebAlive Console’ by setting the default visual properties of a WebAlive website through the use of CSS (cascading style sheets).
What it is not…
The WebAlive ‘Design Console’ is not a tool for the upload, or editing of CSS websites created in external software ie- Macromedia Dreamweaver. All stylesheets for use in a WebAlive content managed website should be constructed solely with the use of the ‘Design Console’.
A working knowledge of CSS (cascading style sheets) is highly recommended. CSS Tutorial
To achieve a commendable result for a WebAlive content managed site, a thorough working knowledge of both a Vector and Raster graphics application is required. (eg. Adobe Illustrator/Adobe Photoshop or similar apps).
A sound working knowledge of internet delivery is essential – ie basic design concepts, flat graphics deconstruction (image slices) and reconstruction (through tables & cells), image compression and export.
Finding your way around the interface
Below shows the main features of the ‘Design Console’ interface. The expanded explanation of each feature follows.
1. Custom Design: The five functions located in this area are,
- Save Template As: Before making any changes to the existing template, you are able to take a backup using this feature. Saved template can be found under ‘Site Styles’ -> ‘Manage Custom Templates’.
Edit Banner: Used to edit the text of the website ‘Title’ and ‘Slogan’.
Upload Banner: Used to upload the banner image. (Before uploading a new banner, make sure the banner image need to be resized to fit to the webpage template, you can do so fairly easily with some basic design software.)
Upload CSS: Used to load the main stylesheet (style.css).
Upload Flash: Used to load a flash banner in the website.
2. Element selection list: This area contains a complete and “clickable” list of every element (Class, ID) within the ‘Design Console’ stylesheet. Used to select the element you want to edit the attributes of.
3. Attribute control panel: This panel shows a list of attributes currently applied to the selected element. Used to edit the values of, delete, and add new attributes to the selected element.
4. Add attribute, add/delete new element button:
- Add new attribute: Used to add new attributes to the selected element.
Add new Class or ID: Used to add new element (Class, ID).
- Delete selected ID or Class: Used to delete the selected element (Class, ID).
5. Apply Changes:
- Save Changes: Used to save all changes made to stylesheet since last save.
- Reset Changes: Used to restore the stylesheet to a previous state.
6. Browser rendering window: The largest section of the ‘Design Console’ this window is a visual render of how your stylesheet will display in Internet Browser. Used to preview changes and visually interact with your stylesheet. Clicking anywhere in the rendering window will display a “clickable” pop up of the elements located directly beneath the mouse pointer. These elements are displayed in a stacking order from front to back, in a similar fashion to the layer order in common graphics applications.
Major elements diagram
Below is a brief visual explanation of the major elements in the ‘Design Console’ stylesheet.
Please note that this diagram merely touches on a very small number of the total elements that are actually featured in the ‘Design Console’ stylesheet. Please see the following link for a full description off all W3C CSS elements and their application for page construction. http://www.w3.org/TR/REC-CSS1