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 Photoshop 7.


This tutorial will be based on Adobe photoshop And Macromedia Dreamweaver


Open photoshop; Press Ctrl+N Or File - New...


A window will appear;


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


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


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


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;


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!


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"


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