How to Write and Design Your Website Xhtml and CSS with Commercial Software

DDLS (Design/Development Life Cycle)

1. Go to 'Save for web'

2. Open your webpage in Adobe Dreamweaver.

3. Create a new 'Site'

4. Save to your desired directory on your desktop or Workstation.

5. Open your webpage 'index.html' or the 'HTML' file previously exported from Photoshop to Adobe Dreamweaver CS4 or higher.

6. Placement of items (text titles;images,divs or layers ) including 'Header, Body & Footer' by creating page sections in CSS. Refer: Designing Graphical User Interface

7. Be sure to switch on the built-in 'Ruler'. Enable show guides

8. Drag and drop guides along the places where images/photos and text tiles connect or meet.

9. Measure your guides. Hold down the 'Ctrl' key while you measure the distances between newly laid guidelines.Measuring your guides comes in handy when planning and executing the CSS needed to render the webpage in the browser with selectable text.

10. Add text in the following table cell (you may copy and past text).

11. Click inside the cell. Then select the tag to select the whole cell for CSS formatting.
12. Navigate to the 'CSS Panel' (illustrated above)and create a new 'Style' Click the plus icon.
13. Create a class and name it appropriately.
14. Add a background in the 'background category'
15. Set the margins to allow text indentation.
16. Click Ok.
17. Then right-click the newly created style and click apply. This should apply the style to the 'already selected cell'.