The software tools that you need and versions used in this tutorial:
- Macromedia Dreamweaver (MX 2004) to edit HTML pages.
- Adobe Photoshop (v.7) for images processing.
1. Setting up content and establish dimensions for the website pages
First you have to set the content for every page of your site. First page will consist of a not very long text, a link menu that points to the other pages (horizontal or vertical buttons). It is best, when it is possible to frame the content of first page in a screen height, so the visitors will not be forced to scroll horizontally or vertically to read the content of the page.
When the content of the site is chosen (the navigation bar with the buttons, the text for every button, the content of every page that will be loaded when a certain button is pressed), next step is page design (which is usually composed of text and images).
First you have to choose the resolution for your page. You can choose between two variants: create the pages with a fixed dimension, optimized for a certain resolution or with variable dimension, where the text will use all the space in the browser, conforming the resolution. Personally I prefer the fixed dimension because sometimes your design can look bad on other widths than the one it was created for.
Generally we choose the dimension of the page in accordance with the resolution that most clients that visit your page use. 640X480 is not used anymore, so the page should have minimum 800X600. Actually, to fit perfectly for such a resolution, your page dimensions have to be less that that because the browser has the navigation buttons and vertical scroll bar that also have to fit in that resolution. So, in order the page to be easy visualized on a computer with a 800X600 resolution, we will have to create all pages with a fixed width of 740px and a height of about 500px if possible. When the content of the page does not permit a setting where scrolling vertically is not needed, the page width must be established at 740.
If we want that the page to be best seen on screens with a 1024X768 resolution, then the dimension of the page horizontally has to be 980
Once these things are settled, we can start creating the design.
2. Creating the design
The design will be made in two phases:
- creating the design using Adobe Photoshop, which means creating an image of the main page and a model page that will repeat on all the other pages and then generating (also with Adobe Photoshop) HTML format pages with images.
- reconstruction of pages in Macromedia Dreamweaver using the model generated previously with Adobe Photoshop and also the images created with it.
To speed up the creation of the site and to obtain a professional look, you can use templates. A template can be bought from a designer, and also there are many sites that sell templates for websites . What I mean from "template" is actually the .psd file that is a file format that Adobe Photoshop uses to represent images.
A very well known site that sells templates is http://www.templatemonster.com.
Also, you can create yourselves templates, but if you don't have experience working with Adobe Photoshop then it will take a long time.
In both cases - a personally made psd design file or a bought template, it will need to be modified to personalize the buttons in the navigation bar according to your needs.
3. Modify the layout of the template created with Adobe Photoshop
Open .psd file in Adobe Photoshop adn activate the Layer window, choosing from the menu: Windows/Layers
Move the mouse cursor over the text that you need to modify and press right click. A list will appear with objects located at that point. Choose from that list the text to modify. In that moment, in the Layer window will be selected the layer with that text.
Double click on "T" and then modify the text of the button. Usually those who create templates place a single text on all the buttons in the menu, so this text will have to be modified to create the menu of the page (in graphic mode).
4. Saving the layout (template) from graphic mode to HTML code + images
After modifying the .psd file until it looks like we want the final page to look, we will save the .psd file and then mark slices the way we want to cut it. After we do this outline, Adobe Photoshop will know how to cut the layout in small images. With these images it will generate a HTML file that contains the site assembled from images.
How to mark slices: we will use the helping rulers to mark the zones we want to cut. To do that, select from the menu View/Ruler
<
A ruler will appear at left and above the working area in Adobe Photoshop. Drag the mouse over this ruler and press left button, keep it pressed while draging with the mouse and mark the areas you want to cut.
To mark the slices to cut you use Slice Tool from vertical tool bar. Before selecting the slices to cut, activate viewing slices from the menu: View / Extras.
To mark the slices: select from tools bar Slice Tool and mark the slices that you want to cut when Adobe Photoshop will generate the site using the layout.
Once the selection done, next step is generating HTML code from the psd file.
In Adobe Photoshop pick from File / Save for Web. A window will appear and you will be able to choose which format the images will be generated in. You can choose jpg, gif and png.
With this, the part with Adobe Photoshop has end. Not completely, we still have to make shaded buttons for the menu when selected.
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.
discuss this topic to forum
