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

One Methods:DDLS (Design/Development Life Cycle)

This tutorial walks the designer/developer through the website design and HTML/CSS conversion process. This is a detailed tutorial on previews/Screens/Tools Icons and their placement or location in the software packages that will be utilized, if the software being used is Adobe Photoshop and Adobe Dreamweaver.

Steps

  1. Image titled Write and Design Your Website Xhtml and CSS with Commercial Software Step 1
    1
    Become aware of the overall development strategy:
    • Write and design your website xHTML and CSS in Adobe Photoshop & Dreamweaver.
    • Design the layout in Adobe Photoshop then Export to Adobe Dreamweaver for web development.
    • Preview Adobe Dreamweaver in action.
  2. Image titled Write and Design Your Website Xhtml and CSS with Commercial Software Step 2
    2
    Incorporate the CSS spacing during initial design in Adobe Photoshop:
    • Turn on Rulers from the “View” menu. Create Guidelines along the points where “objects – images, titles and text meet.” Make visible only the intended Design Framework and its titles at this point. To-do this, switch on and off layers (images; text etc..) that you do not need.
    • This will determine which part/portions of your web page design will be xHTML/CSS after “Saving for web”.
  3. Image titled Write and Design Your Website Xhtml and CSS with Commercial Software Step 3
    3
    Plan the amount of spacing & margins that you will use. This should be easy and simple to do since you “Already Created Guidelines – While Designing your website in Adobe Photoshop.”
  4. Image titled Write and Design Your Website Xhtml and CSS with Commercial Software Step 4
    4
    Create Photoshop “Slices with the Slice tool ”
  5. Image titled Write and Design Your Website Xhtml and CSS with Commercial Software Step 5
    5
    Carefully edit or name your slices accordingly. This is vital at this point and will rename each website graphic or image accordingly. Simply put, renaming Slices saves time and when you open your website html file in a program like “Dreamweaver”, all the images, tables and Photoshop CSS will be named accordingly and will ultimately be easy to read and edit in “Dreamweaver or HTML”
  6. Image titled Write and Design Your Website Xhtml and CSS with Commercial Software Step 6
    6
    Be sure to Design and Export the Sub menu and images separately.
  7. Image titled Write and Design Your Website Xhtml and CSS with Commercial Software Step 7
    7
    Export as HTML & CSS

DDLS (Design/Development Life Cycle)

  1. Image titled Write and Design Your Website Xhtml and CSS with Commercial Software Step 8
    1
    Go to “Save for web”
  2. Image titled Write and Design Your Website Xhtml and CSS with Commercial Software Step 9
    2
    Open your webpage in Adobe Dreamweaver.
  3. Image titled Write and Design Your Website Xhtml and CSS with Commercial Software Step 10
    3
    Create a new “Site”
  4. Image titled Write and Design Your Website Xhtml and CSS with Commercial Software Step 11
    4
    Save to your desired directory on your desktop or Workstation.
  5. Image titled Write and Design Your Website Xhtml and CSS with Commercial Software Step 12
    5
    Open your webpage “index.html” or the “HTML” file previously exported from Photoshop to Adobe Dreamweaver CS4 or higher.
  6. Image titled Write and Design Your Website Xhtml and CSS with Commercial Software Step 13
    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. Image titled Write and Design Your Website Xhtml and CSS with Commercial Software Step 14
    7
    Be sure to switch on the built-in “Ruler”. Enable show guides
  8. Image titled Write and Design Your Website Xhtml and CSS with Commercial Software Step 15
    8
    Drag and drop guides along the places where images/photos and text tiles connect or meet.
  9. Image titled Write and Design Your Website Xhtml and CSS with Commercial Software Step 16
    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. Image titled Write and Design Your Website Xhtml and CSS with Commercial Software Step 17
    10
    Add text in the following table cell (you may copy and past text).
  11. 11
    Click inside the cell. Then select the Navigate to the “CSS Panel” (illustrated above)and create a new “Style” Click the plus icon. Create a class and name it appropriately. Add a background in the “background category” Set the margins to allow text indentation. Click Ok. Then right-click the newly created style and click apply. This should apply the style to the “already selected cell”.
    tag to select the whole cell for CSS formatting.
    Image titled Write and Design Your Website Xhtml and CSS with Commercial Software Step 18

Article Info

Categories: Programming | Web Programming