Navigation:    Home arrow Building a Website
Creating a Website With Adobe Photoshop and Macromedia Dreamweaver PDF  
Digg Reddit Ma.gnolia Stumble Upon Facebook Twitter Google Yahoo! MyWeb Furl" BlinkList Technorati Mixx Bookmark
Article Index
Creating a Website With Adobe Photoshop and Macromedia Dreamweaver
Page 2
Page 3

 This is the simplest way that I found to create websites with a professional design without actually having knowledge of web design.

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

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.