5. Creating web page in Macromedia Dreamweaver

After the HTML page has been generated from Adobe Photoshop we will have to complete next tasks:
a. creating HTML page using the HTML file generate with Adobe Photoshop
b. creating the navigation bar of the page
c. copying the model page with a different name for every button in the navigation bar (generating every page for your website)
d. editing separately every page adding the content for that page, text and images
e. testing every page to work properly

a. Creating HTML page
Usually templates have a surface on the outside of the page covered with a certain color. We need that color, but Photoshop generates images for that surface too. We don't need these images. We will open the HTML file generated by Adobe Photoshop in Macromedia Dreamweaver and we will find that it contains many elements that we don't need. Sometimes it is easier to build up manually the table of the page that contains other tables, but to edit the file that Adobe Photoshop has generated previously.

If you succeed modifying the generated HTML file it is good, but I recommend to create a new layout where we will copy just the design of the page, without the outer elements, to be able to center everything in the page in the middle. If we decided to go with 800X600 resolution and we want to set the width of the page to 740 we will create a new HTML file in Macromedia Dreamweaver, we will pick the color of the background exactly the one from the template and then we will insert a table with the width of 740 (pay attention when you pick the width not to select percents instead of pixels).

To select the background color pick from the menu: Modify / Page Properties / Background Color.

Then insert a table: Insert / Table. In this table select: Rows = 1, Columns = 1, Table width = 740pixels (NU % !) and then Border Thickness = 0.

We will have to center this table in the middle. To do that we will select the table and then we will choose from the lower bar - Properties - horizontal center - Horz - Center.

After we centered the table we will copy inside it the content of the generated layout, selecting only the layout, without the outer part. If Dreamweaver does not allow Paste, we will need to create in the table we created with a single line and a single column another table with a certain number of lines and columns.

b. Creating the page navigation bar
We will delete the first button and after we will settle the cursor in the cell where the button was we will insert a button with the following: Insert / Image Objects / Rollover Images.

We will need 2 buttons - the one that we just deleted from the layout and another one with the same text but with a different shade. To do that we will use again Adobe Photoshop and we will modify every button changing the contrast and brightness to make it look different. After this we will save the buttons under different names (i.e button_on.jpg and button_of.jpg).

To change contrast of a button you will choose from the menu: Image / Adjustments / Brightness-Contrast. These parameters will be given for each other buttons for the color not to differ from button to button.

We come back to Dreamweaver, to insert a button (I used here Rollover Images because is the simplest way to create a design. You can use other options like Navigation Bar).

We select Insert / Media Objects / Rollover images.

Original image is the image of the button when it is not selected and Rollover image it is the over image of it. In the "When clicked, go to URL" insert the link where the button goes. This way, we will insert every button going to different links.

c. saving the model page with another name, for every page that we need for the site

The pages towards the buttons will point will be generated by copying each page with a different name, the names that we placed in the links of the buttons of the navigation bar. Attention! You need to generate the first page completely, the way you want it to look final (the common parts for every pages) , or else the rest of the pages will be incomplete and you will have to modify each of them once you modify the first page. Finally, you will insert the content for each page.

d. adding the content for every page

You will edit every page that you created adding the content, including text and images.

I will mention here that implicitly the files used to represent html pages have the extension .html. If you want to create dynamic pages using PHP, then your pages will have to have the extension .php right from the creation of the design, because otherwise you will have to modify the names of the links for the pages afterwards.

If you want to create a site with pages in two languages, then you will need two models for the pages design, one for every language, with different buttons (written in each language). Each generated page needs to have a link towards the page for the other language, like a flag or a text link.