| |
| |
Tutorial
1: Creating a Website With Adobe Photoshop and Macromedia
Dreamweaver |
| |
|
| |
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 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. |
| |
|
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
 |
|
|
