Sliceing An Image

[calaman]

I have made a layout for a website iam creating, but iam wondering how to go about sliceing it and getting the layout right, walk by walk steps are much appreciated.. thanks -=)


http://img222.imageshack.us/img222/1050/drawingboarda1ye8.th.jpg (http://img222.imageshack.us/my.php?image=drawingboarda1ye8.jpg)

[Centauri]

Where does the content go? - there appears to be very little room if that is the full size. Web sites are about presenting and displaying some sort of content, and the visual styling should be based around that. As it stands now, you could just use that image (really needs to be optimised further, as the file size is a little large) as the background for a fixed width, centred div, and position the content over that - in which case no slicing is needed. If you want the height to be able to expand with content, then you would have some tricky slicing to make side sections that can repeat. With a little work, it could even be made expandable in all directions, but it all depends on what you want to present here.

[calaman]

well i know i can slice the two sides and put them in a table/layer as background to reapeat, and create the center to use as my space for text an pictures ( where all the white is in the center) and my top is going to be the navigation, but the only thing is how would i set up the guys on the left side, thats actually the question, thanks

[Centauri]

and put them in a table/layer as background to reapeat

Don't put things in tables as that is not what tables are for, and there is no such thing as layers in html.

Assuming you use a slice across the middle to use as a repeat-y background on a wrapper div (to create the sides), this wrapper could contain a header div, with the frame top as a background and containing the navigation, a content div with the "guys" as a background positioned at the bottom left, and a footer div containing the frame bottom. A negative bottom margin on the content div could pull the footer back up under for the overlap, provided the "guys" graphic was transparent. Alternately, the entire frame bottom, including the "guys", could be used as a bottom placed background to the content div.

[calaman]

a content div with the "guys" as a background positioned at the bottom left, and a footer div containing the frame bottom. A negative bottom margin on the content div could pull the footer back up under for the overlap, provided the "guys" graphic was transparent. Alternately, the entire frame bottom, including the "guys", could be used as a bottom placed background to the content div.


this is a little gibberish to me, sorry i usually use dream weaver to do all the html writing for me, so in other words i dont have any html knowledge, perhaps possibly you could explain a little more? or maybe directions thanks a lot -=)

[Centauri]

Whilst DreamWeaver is a great tool (I use it myself), it should never be used to "produce" the html. Dreamweaver knows nothing about semantics, concerning itself mainly with the presentation, producing notoriously inefficient code that can have many cross-browser problems. Relying on the design view window is unreliable, as it is not a browser and renders things differently to most browsers. Most work in Dreamweaver should be centred around the code view window, with the design view window providing a bit of a reference (I use split view). A knowlege of html is required here, but it is not difficult to learn, especially if you hang around forums like this one.

One of the first things you should do with Dreamweaver is modify the default page settings (Edit menu > preferences > New Document) and set the default DTD to HTML 4.01 Strict, and the encoding to UTF-8, being the most appropriate settings for new pages.

As devices other than visual browsers access web pages (screen readers for the vision-impared, search engine spiders etc), html is about providing content with meaning, and the visual styling of this content is handled by the css, whether that is an external file or contained within the html file. With this in mind, I came up with this html for your page:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
<div id="header">
<p>Header and menu stuff here</p>
</div>
<div id="content">
<p>Content stuff here</p>
</div>
</div>
</body>
</html>
It consists of a wrapper div containing two divs "header" and "content", with a paragraph of text in each. Look at this so far in a browser and all you see is two paragraphs, nothing more. Near the top of this code is a reference to "style.css" stylesheet - this is an external file wich controls the visual look of the site, which I will describe shortly.

A did a quick slice of your graphics (the quality of these would be much better with access to the original layered photoshop graphic) to produce a top section, bottom section, and a slice which can be repeated for any length of the page. These (rough) graphics are attached to this post, and assume they will be put in a folder called "images".

The style.css file (save as this name in the same folder as the html file) is this:* {
margin: 0;
padding: 0;
}
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
padding-top: 10px;
}
p {
padding-bottom: 1em;
}
#wrapper {
width: 800px;
margin: 0 auto;
background-image: url(images/framemid.jpg);
}
#header {
height: 140px;
background-image: url(images/frametop.jpg);
padding: 50px 0 0 60px;
}
#content {
padding: 0 50px 50px 60px;
background-image: url(images/framebottom.jpg);
background-position: left bottom;
min-height: 350px;
background-repeat: no-repeat;
}
* html #content {
height: 350px;
}
The first part of the css uses the universal selector (*) to zero out all default margins and paddings of everything, ensuring all browsers render from a common start point. A base font type and size is applied to the body, and a top padding gives a little space at the top of the page. A default spacing for paragraphs is applied, as the defaults were zeroed at the start.

The wrapper div gets the middle graphic slice as its background (which will repeat no matter how high the div is), and the width is set to 800px to match the image width. Auto side margins centre the wrapper (and therefore the whole site) on the page.

The header div gets the top image as its background, and left padding and top padding spaces any content away from the edges. The height is set at 140px, and combined with the top padding of 50px, gives the overall height of 190px to match the top graphic height.

The content div gets the bottom graphic slice as its background, and this is locked to the bottom of the div with the background position, so no matter how high the content div is, the image will allways be at the bottom. Side and bottom padding again ensures that any content is spaced away from the edges. To ensure that all of the bottom graphic is visible, a minimum height of 350px is set - at this height, the top and bottom image sections touch and completely hide the side repeats, As content increases, the graphics will split, revealing the side portions.

As Internet Explore 6 does not recognise minimum height, but instead tends to treat a fixed height as a minimum, it is fed a fixed height of 350px via the last definition in the css file - IE6 and below are the only browsers that respond to the "* html" part of the rule, this being ignored by all other browsers.

Have a play with it - load the html file into Dreamweaver and see the relationship between the stuff that appears in the CSS styles window with the actual coding of the css file, and see how the divs are structured and sit. Then come back to ask questions.

Cheers
Graeme