Dear
Friend, Hello, and welcome back to Firewire, your friendly
guide to the exciting world of web-design and web-solutions!
Let's begin with the newsletter now.
With
the help of the fabulous Layout Galaxy, I have redesigned
the layout 'sample 1' from the 4 layouts of
(FREE to download offer), according to my specifications in
Photoshop. In the last newsletter I explained about the Optimizing
and Slicing part. Hence converting the layout into HTML page.
Now in the line, comes editing the HTML page in the HTML Editor.
I
use Macromedia Dreamweaver as the HTML Editor. You can even
use Microsoft FrontPage as one of the default HTML Editor.
I open the html file with the File Menu>Open File. The
whole layout is displayed on the screen in the form of images
together in a table. I then delete the yellow comment icons,
which are displayed at the top and the bottom of the layout
table.
I
resave this HTML page with the File Menu> Save As option.
This is done to rename the HTML page as index.html, for the
very reason that when you load this page with the other corresponding
pages on the net, the server picks the index.html as the main
page.
HTML
pages are made by two different ways: -
1) With frames
2) Without frames.
I will explain both the ways step by step. I would be using
'without frames' for the main page and with frames for the
inside pages (data containing information on the links: Profile,
Products, Clients, Feedback, Advice Online and Contact us).
For
the home page (i.e. index.html): -
I choose Modify Menu> Page Properties. Here I give the
left margin, top margin along with the margin height and width
as 0 value. I change the background colour value of the HTML
page. I first choose the exact hash value for the background
by switching to Adobe Photoshop. I do this by selecting the
eyedropper tool and then by clicking on the edge of my layout
at 1600% zoom levels so that I can get the exact value of
the colour. The colour is displayed in the foreground colour
of the tool palette #63393D. I copy this colour and paste
it in the Modify Menu> Page Properties. Incase the layout
has some images which have flat colours and those which suit
the background colour of the HTML page. I delete these images
as to reduce the file size of the overall layout.
I
then give links to the Buttons (i.e. Profile, Products, Clients,
Feedback, Advice Online and Contact us). I choose the respective
image, and give a hash (#) in the link of the window properties.
By this I have temporarily claimed that image as a button.
I would be linking these buttons to their respective pages
when these inside pages will be created in Dreamweaver. I
would later be making these various pages, as per the buttons.
To
make this page compatible with 1024 resolution, I place the
index page layout with its images in one single table with
two columns and its width as 100%. I then choose window>
properties for aligning the layout table. I choose left for
"Horz" and top for" Vert" in the drop
down menu. In this case the background colour blends with
the layout, but gives me a sharp edge at the right as well
as the bottom side. This problem has to be solved. I work
on it very minutely and try to get the layout compatible in
both the resolutions.
I
again switch back to Adobe Photoshop. There I open the layout.
Then I draw a 1-pixel vertical marquee covering the background
colour in the right side with its bottom panel effect. I do
not select the rightmost side because of the shadow effect.
I then copy this image by the Edit Menu> Copy merged. This
command copies the required data by merging the layer, but
this command does not merge the layer in the psd. File. I
then open a new file and paste