1. Opening A File



After exporting the index.psd file as HTML from ImageReady you must edit it in a HTML editor to insert text, text links, add CSS and more. We will use Macromedia Dreamweaver.

So start your Dreamweaver application and open the index.html file from template/html/html_version. Depending on your Dreamweaver version the program window will look like this or with little differences that don't matter that much:

This is the final html file resulted from our Photoshop index.psd, already edited in Dreamweaver.

1. These tabs let's you select the way you see & manipulate the html layout. Depending on the mode you select the options may be different. "Many designers use tables to lay out web pages. Macromedia Dreamweaver provides two ways to view and manipulate tables: Standard mode, in which tables are presented as a grid of rows and columns, and Layout mode, which allows you to draw, resize, and move boxes on the page while still using tables for the underlying structure". "In Layout mode, you use layout cells and tables to lay out your page before adding content". "Expanded Tables mode temporarily adds cell padding and spacing to all tables in a document and increases the tables’ borders to make editing easier. This mode enables you to select items in tables or precisely place the insertion point" (Dreamweaver Help)

2. These tabs let's you select the way you see the document. In Code view you only see the html code (or other code you use). In Split mode you see both the html code and the preview of your page. And finally in Design view you only see the preview of you page without the code.

3. Here you can write your page's name

4. This tab offers you information about the CSS. In our template we work with an external CSS file so here you'll find all the styles defined in that file. You can view & modify the styles directly from here.

5. This is the Properties tab in which you'll find all the settings you need depending on the element you select.

To preview a file in a web browser press F12 and the file will be opened in your default browser.