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

DDLS (Design/Development Life Cycle)

1. How to Write and Design Your Website Xhtml and CSS with Commercial Software Picture 1
   Go to 'Save for web'
2. How to Write and Design Your Website Xhtml and CSS with Commercial Software Picture 2
   Open your webpage in Adobe Dreamweaver.
3. How to Write and Design Your Website Xhtml and CSS with Commercial Software Picture 3
   Create a new 'Site'
4. How to Write and Design Your Website Xhtml and CSS with Commercial Software Picture 4
   Save to your desired directory on your desktop or Workstation.
5. How to Write and Design Your Website Xhtml and CSS with Commercial Software Picture 5
   Open your webpage 'index.html' or the 'HTML' file previously exported from Photoshop to Adobe Dreamweaver CS4 or higher.
6. How to Write and Design Your Website Xhtml and CSS with Commercial Software Picture 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. How to Write and Design Your Website Xhtml and CSS with Commercial Software Picture 7
   Be sure to switch on the built-in 'Ruler'. Enable show guides
8. How to Write and Design Your Website Xhtml and CSS with Commercial Software Picture 8
   Drag and drop guides along the places where images/photos and text tiles connect or meet.
9. How to Write and Design Your Website Xhtml and CSS with Commercial Software Picture 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. How to Write and Design Your Website Xhtml and CSS with Commercial Software Picture 10
    Add text in the following table cell (you may copy and past text).
11. How to Write and Design Your Website Xhtml and CSS with Commercial Software Picture 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'.