Dreamweaver|Photoshop (Tut)

[craigg.]

Right, Im getting bored of telling people this so ill do a tut on Slicing/HTML Etc

Making your website template;

You may use what ever program you wish to do your template in, Im going to use Adobe (http://www.adobe.com) Photoshop 7.


This tutorial will be based on Adobe photoshop And Macromedia Dreamweaver


Open photoshop; Press Ctrl+N Or File - New...
http://img222.imageshack.us/img222/8099/new0bb.jpg

A window will appear;
http://img222.imageshack.us/img222/2103/new17qn.jpg

Then type in how big you wish to have your layout.


Right now lets get started.

Normally i start off filling in my background, then add my design.

Filling your background; Click on the paint bucket tool
http://img367.imageshack.us/img367/7947/fill1pm.jpg

I will be using a white background Hex code - #FFFFFF


Next step- Adding your Navigation and content box.

Take your Marquee tool (Rectangular), And click and drag the size you want for your navigation box. I will be using a horizontal navigation
http://img161.imageshack.us/img161/1315/nav5gd.jpg

Fill your box with a colour, I used white (#FFFFFF) Then i added stroke.

How do you add stroke?
+ Right click on the layer, Then click on "Blending options..."
+ Click on the last option on the left side "Stroke"
+ Choose the size of stroke (In pixels) I will use 1
+ Position - Outside | Normall | 100% | Type - Colour
+ Where it has the red coloured box, Click on it and select the colour you wish to use.

Add your banner (Or make a banner box)I will be using a graphic i made a while ago
http://img319.imageshack.us/img319/9439/banner5uv.jpg

Once your happy with everything, Added everything you wish to add eg;
+ Icons
+ Buttons
+ Graphics
Baiscly, What ever you want your template to have

Slicing;

Click on the slice tool;
http://img378.imageshack.us/img378/2889/slice3qb.jpg

Slice as accurate as posible, Make sure you slice everything you need.

Slicing accurate
+ Slice your banner (So you can change it if you wish to do so in the future)
+ Slice the bottom of the boxes FIRST. Make sure the sides touch the bottom slice not the other way round!
http://img275.imageshack.us/img275/1295/slice5na.jpg

Once you have finished slicing everything; Save it.

Saving your web page

File - Save for web... (Alt + Shift + Ctrl + S)

I would recomend saving them as .GIF

When you are happy with the loading speed, Click "Save"

I Recomend creating a new folder for your files, Then save it into your file. I Also recomend calling it "Index".


Open up Macromedia dreamweaver
Once it has loaded, Press "Open". Open up your file. (What ever you saved it as).html

If you have created a small template i.e 800 x 600 ;
Press Ctrl + A and then at the bottom "Align - Center"
http://img252.imageshack.us/img252/662/align4bm.jpg

Delite your content boxes (If they are an image, delite the source and put the background file as what it was)
If your content boxes were a flat colour like white, Where it says Bg: Get the eye dropper and select the colour (If it is white- It would be #FFFFFF)

Inserting IFrames


HTML Code:


<iframe name=" --1--" src=" --2-- " width=" --3-- " height=" --4-- " frameborder=" --5-- " scrolling=" --6-- "></iframe>

1. Give your IFrame a name Eg: Frame1, Content
2. Source of the page that will be loaded Eg: Welcome.Htm
3. Width of the Iframe in PIXELS Eg: 350
4. Hight of the Iframe in PIXELS Eg: 420
5. Do you want your Iframe to have borders? If so how big in PIXELS Eg:1
-+ If you do not wish to have a border, Its Simply 0
6. Do you want your Iframe to have scroll bars? Yes/No/Auto
-+ Auto is if the document has more content than the hight of your IFrame, It puts scroll bars in for you.


Complete Iframe:

<iframe name="FRAME1" src="Home.htm" width="100" height="100" frameborder="0" scrolling="Auto"></iframe>

Transparent IFrames

+ Insert a normall iframe (Above)


You should have something like below in your code view of your Iframe:


<TD COLSPAN=9 align="left" valign="top" bgcolor="# Hex code here Or Image source "><iframe name="Frame1" src="Home.htm" width="100" height="100" frameborder="0" scrolling="auto"></iframe>&nbsp;</TD>

With the source page that will be loaded change the CSS to:



<style type="text/css">
<!--
body,td,th {
font-family: Font;
font-size: - px;
background-color: transparent
}
body {
background-color: transparent
}
-->
</style>


That will give you a transparent IFrame.

Linking IFrames
Pritty Simple thing to do:



<a href="Home.htm" target=" The Frame name it will be loaded too "> Home </a>



I Think that covers mostly everything you need to do. (Sorry if there is mistakes)
My first Tutorial so go easy on me ;)

-Enjoy! :)

[Matt.]

Is there ne place where u can get photo thing 7?:s i will giveu a rep if u tell me:)

[craigg.]

Is there ne place where u can get photo thing 7?:s i will giveu a rep if u tell me:)
You can get Free trails from http://www.adobe.com/products/tryadobe/main.jsp :)

[Steven.]

Is there ne place where u can get photo thing 7?:s i will giveu a rep if u tell me:)

Yes, a 30 day trila i do believe,

www.adobe.com/products/photoshop/

[Wizzdom]

wow i bet that took you a long time... that will help alot of peeps.. +rep

[Matt.]

Thx for the i av given u a rep:)

[wwe-rko4eva]

Dude Yeah Does That Work If You Are Using Macromedia Flash MX 2004 ???

[craigg.]

I cant edit my posts for some reason but for an add-on:

Copyrighting Your Template
Underneath the </HEAD> Statement you could place something like;


<HEAD>
</HEAD>
<!-- Copyright Of -------(C) -->
<BODY>
</BODY>

[Carlos]

Thanks :)

[craigg.]

CSS Curser Style



<style type="text/css">
<!--
body {
cursor:
}
-->
</style>


Where is says "cursor:"
Place One of these below beside it;
auto
crosshair
default
e-resize
help
inherit
move
ne-resize
n-resize
nw-resize
pointer
se-resize
text
wait
w-resize

This will change your cursor style on the webpage you insert the code.

EG:


<style type="text/css">
<!--
body {
cursor:crosshair
}
-->
</style>


Sorry but i cant Edit my posts for some reason

[Dan Williamson]

Nice tutorial :)

[craigg.]

Thanks ;) My first tut also :o