Warning: sizeof(): Parameter must be an array or an object that implements Countable in /home/kbwebconsole/public_html/wp-content/plugins/article-taxonomy/article-taxonomy.php on line 772
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’.
Skillset Requirements
CSS
A working knowledge of CSS (cascading style sheets) is highly recommended. CSS Tutorial
Graphics Applications
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).
Internet Delivery
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