web design ...html help etc. etc. blah blah...

[krossfyter]

hello everyone.

im trying to rebuild my site. im not very versed in web design or html so im just learning and i could use all the help i can get. anyway... i have this specific problem...

im using dreamweaver ... for my layout im using an image done in photoshop and putting in a layer in dreamweaver. i want to be able to put a dhtml scroll bar inside a certain part of that layer where the image is at. this part is where the audience will scroll up and down to view text and or thumbnails of mine thus saving space and clicking on them to bring up a bigger view of it. my question is ... is this possible? im sure im not going about this right though. whats a better way of doing it? also.. how do you slice your image ....using fireworks to put as your layout on your site? whats the point of doing this other than it loading fast? do you all use layers,frames or tables or what? im very frustrated at this point so please bare with me and help out any way you all can. i need better methods on creating a web site. i dont even know exactly how to make css pages or if they work with my heavy minimalist design layout.

i have more questions but this is a start. thanks in advance for the help. i know some cats in here are good at this stuff... ie ensign, igav, ambitouslemon...etc. etc.



take care.

 

[D0ct0rteeth]

I reallty havent used fireworks too much... i haven't formed a real valid opinion on it yet.

As far as layers go no professional website uses layers.. its all about tables.

here is a simple step by step checklist i give my students:

design your website storyboards on paper

design those storyboards in photoshop

using guides divide your image into manageable pieces. (buttons, logos, header, left-nav, body, thumbnails) hint: it is a good idea to keep these images under 20k and to fill broad areas of color with html code.

using the photoshop guides build a table in dreamweaver and drop the images into the table

clean up code and link pages

test and debug

it sounds like you want that to be a popup window that has a scrollbar... by defining a set size for that window and making the content inside it larger than the area you will get a scrollbar... there is also a box to check when you set up the pop-up window that will include a scrollbar...

Keep at it.. good luck... i will happily answer more specific questions as you have them

C-

 

[krossfyter]

thanks doctor teeth. you answered a very important concept for me. which was divinding my image in photoshop and dropping it into tables in dreamweaver. okay so i do this... wont i have trouble with trying to make the table the size of a particular divided image? how can i more appropriately avoid this problem or whatever? why dont pros use layers? whats the deal? arent tables hard to load or is that frames? i forget.

the dhtml scroll bar im talking about would not be a pop up window it would be on the layout. what you click on in that scroll bar area would be a pop up window.

im trying to do this all myself and i have had no formal teaching. im sorry im so special ed in this crap. i hope to get better.


dig it.

 

[Macette]

first up, I can't help you with the scroll bar thing - I've seen it done, and I like the look, but I've never done it myself. My advice is: find a page that uses it, and then copy and paste the code into Dreamweaver. That's how I've learnt HTML etc - by examining other people's code. Dreamweaver is cool in that you can highlight a bit of a page, then hit F10 and you'll get the HTML code, conveniently highlighted for your viewing pleasure.

Frames are a bit crappy to load, although I think that's a bit of a hangover from the dark old days when lots of people had browsers that didn't support frames (but that's anything pre-4 browsers, so there's not many of them left). Also, you can specify NOFRAMES content in your HTML so that people who don't have frames can see a more basic version of your site. I usually write something along the lines of 'download a recent version of your favourite browser to view this site' as my NOFRAMES content.

Tables are extremely useful. You don't have to have a separate table cell for each sliced bit of your image - again, I suggest finding a site which uses a combination of tables and sliced images, copying the HTML into Dreamweaver, and having a look. Obviously the images won't copy across, but Dreamweaver will maintain the slice guides.

Fireworks is excellent! Use the help menu to find out about slicing, and don't forget to use the awesome 'Optimise' function to make your images as small as possible to reduce load times.

Hope this helps - I'm going to have a hunt around for sites that you could look at for your HTML education...

(Later)

Okay, the Iconfactory (http://www.iconfactory.com) is a great example of the tables and slices thing. Copy it into Dreamweaver and have a look. Note how they use HTML to make the purple bits, rather than with bits of sliced up image. It makes for speedier downloads.

You can examine their CSS page at: http://www.iconfactory.com/ifstyle.css (that's another tip - search out CSS pages in the head of the document - you can almost always get to them through your browser.)

There's a great cooking site, http://www.deliaonline.com, which is good as well - really clean and functional.

There's some pretty superior button action in http://www.bluewave.com/ - you have to wait for it to load fully before you see it, but it's great. Corporate, but clever.

I've been trying to find some not-so-corporate, arty sites that use these techniques, but there seems to be a new period of Flash madness in action. Flash can be fun too...

All right, I'll shut up now.

 

[j763]

Originally posted by D0ct0rteeth
I reallty havent used fireworks too much... i haven't formed a real valid opinion on it yet.

As far as layers go no professional website uses layers.. its all about tables.

um... you're wrong there... Bunches of sites use <div> and <table>

 

[Macette]

Originally posted by j763


um... you're wrong there... Bunches of sites use <div> and <table>

Eh?? He's talking about <layer>... <div> doesn't have to have anything to do with layers, although it sometimes does, and <table> means, well, TABLE. But maybe I misunderstood what you're saying?

I don't think I said anything about Layers before, so: layers are the new frames. Some browsers don't support them, and they can be buggy and crap. However it's a perfectly reasonable technique to layout using layers, and then use Dreamweaver's nifty 'Convert Layers to Tables' function. As long as none of your layers overlap, this works pretty well... though sometimes with unexpected results.

 

[D0ct0rteeth]

maybe i was confusing...

Once again I use <div> and <table> in every page i code.... so yes I use tables in every single page. Two thumbs up for tables.

Layers <layer> are bad news... I dont use them. Two thumbs down for layers

Sorry for any confusion. Macette has a good bunch of advice. I also recommend http://www.webmonkey.com es bueno.

Good Times.

C-

 

[Choppaface]

a lot of pros do use layers. but they usually use them in conjunction with lots of javascript in order to creat flash like animations. and they usually use layers for their portfolios and stuff...I've only seen a handful of very pro looking sites that use layers as a layout tool. the main problem is that they dont translate well between NS and IE. that, and a lot of the advantages that layers offer are also offered by flash...and well flash is flash

just because you use div tags does not mean you're using layers. div tags signify a division in the html doc, and they're often used for laying down styles using CSS as well as doing various javascript effects. although there is a way to do layers using div and CSS. there's the other way of using the layer tag, but I believe that its only supported by netscape, so the div method is more common...

layers are not really the new frames. the new frames are iframes. you can do things with layers that resemble frames, but a primitive layer does not exactly take the place of a frame....a primitive iframe is much more like a primitive frame than a primitive layer

tables are great because basically everything supports them, and basically everything will draw them more or less the same way. things get a bit screwy once you start using percents for height or width, but if you use fix sized cells your pages should look constant from browser to browser (assuming you manage your text styles well and the user doesnt decide to turn text size up ten notches....)...layers are good too, but I would suggest tables for backwards compatability....which is always what you want on the web

I've found that the tables that Photoshop outputs from the web export dialog are pretty good. usually I export a page in PS, and then import it to golive and/or bbedit to work on it (depending on what i want to do with it). I'd recommend splicing your image in PS, exporting it, and then opening the html file generated in dreamweaver and working from there.

as to your scroll bar thingy, try using an iframe. I think the newest mozilla and netscape support it, and IE has supported it since v5. they're relatively new, but if your audience is relatively web savvy, then they will all probably be using compatible browsers. I would recommend staying away from a dhtml solution. unless you grab something pre-written by experts, you're usually going to run into incompatibilities somewhere. not to mention that an iframe would probably be a lot easier to play around with if you're not familiar with javascript.

 

[krossfyter]

wow! thanks to everyone for the help thus far. im really learning some new stuff and well i love that!

i will be investigating the code on those link sites...thanks.

so... iframes... aye!?!!? how do i go about using that? is that html?

 

[barkmonster]

here's some code for iFrames.

let's assume a few things about you're image, you can change all the information later on:

image name : myimage.jpg
image width : 300 pixels
image height : 800 pixels (or basically any value higher than the height of the iFrame)

let's say you want it in a scrollable areas 300 pixels wide by 200 pixels deep, you'd just use this code:

<iframe src="myimage.jpg" width="316" height="200" align="middle"
frameborder="0" marginwidth="0" marginheight="0" scrolling="auto">
</iframe>

I put a return instead of a space in the code so it doesn't mess up the width of this thread on the messageboard.

You add the extra 16 pixels to the width so it only displays vertical scrollbars and the whole width of the image is viewable.

This won't work in NS 4, any other browser (Mozilla, Netscape 6, Internet Explorer etc..) will work with iFrames fine. Opera doesn't like them much, but anything remotely DHTML related runs like crap in Opera anyway.

The best way to embed an iFrame is to work it into a table layout so you can place it beside the rest of the content on the page.

if you want to see something completely nuts with iFrames check out my homepage! It's still underconstruction mostly and there's still some bugs in the code I need to iron out related to internet explorer not displaying scrollbars properly after you've changed the contents of an iFrame a few times but it's probably a good example of iFrames and DHTML.

 

[krossfyter]

okay say i got my web page layout sliced up into tables in dreamweaver etc. etc. ..... since this page would look the same throughout the site would i need to create a css style sheet for it? is it possible or is it nessacary?

if not what exactly are css style sheet ONLY for?


im still unlcear on the whole iframe business. what exaclty about that site is iframed? nice sight by the way.

 

[Macette]

hi krossfyter,

i think you may be confusing templates with CSS - though I'm a fairly new CSS user, so if there are people out there who know better, please step in. As far as i'm aware, you create a template if you want every page in the site to look physically the same (ie, pix in the same spots etc), and you create a CSS for the text styles on the page. I usually attach a CSS to my template, to maintain text style throughout the site.

Because web browsers do awful things to text with their default sizes and styles and stuff, you can use CSS to control more accurately the way text works.

Basic text controls in HTML don't allow you to control line spacing, for example, but CSS does. You can use CSS to make links appear without lines underneath them. CSS is great if you've got a commonly used style that takes several steps to achieve - eg, sans text, size 4, bold, italics. with css, you can achieve that effect with one click.

go to http://www.iconfactory.com/ifstyle.css to see an example of a CSS, then copy it into a text document, call it something.css, and then link it to an html page in dreamweaver, using the CSS palette. you'll then have a list of styles you can use that are the same as the ones on iconfactory.

hope this helps - sorry i can't help with iframes!

 

[Inhale420]

Re: web design ...html help etc. etc. blah blah...

Originally posted by krossfyter


im using dreamweaver ... for my layout im using an image done in photoshop and putting in a layer in dreamweaver. i want to be able to put a dhtml scroll bar inside a certain part of that layer where the image is at. this part is where the audience will scroll up and down to view text and or thumbnails of mine thus saving space and clicking on them to bring up a bigger view of it. my question is ... is this possible? im sure im not going about this right though. whats a better way of doing it? also.. how do you slice your image ....using fireworks to put as your layout on your site? whats the point of doing this other than it loading fast? do you all use layers,frames or tables or what? im very frustrated at this point so please bare with me and help out any way you all can. i need better methods on creating a web site. i dont even know exactly how to make css pages or if they work with my heavy minimalist design layout.

can you be clearer on 'dhtml scrollbar'? the guy who posted the code with the <iframe> tags sounds like the solution to me. you just need to position it how you like. the scroll bars will appear automatically unless you tell it not to. if you have absolutely no use for layers i would avoid them. another note, the <layer> tag has been depreciated. it was a netscape only thing anyway.

i wish i could help out more, as i put in iframes by hand. not sure what dreamweaver does with them.

oh, by the way, i think you mean 'minimal' style. Minimilaism is COMPLETELY different - a fine art movement

 

[krossfyter]

Re: Re: web design ...html help etc. etc. blah blah...

Originally posted by Inhale420


can you be clearer on 'dhtml scrollbar'? the guy who posted the code with the <iframe> tags sounds like the solution to me. you just need to position it how you like. the scroll bars will appear automatically unless you tell it not to. if you have absolutely no use for layers i would avoid them. another note, the <layer> tag has been depreciated. it was a netscape only thing anyway.

i wish i could help out more, as i put in iframes by hand. not sure what dreamweaver does with them.

oh, by the way, i think you mean 'minimal' style. Minimilaism is COMPLETELY different - a fine art movement

well i just want a scroll bar frame thing in the middle portion of my site. i hope thats clear.

i know minimalism is an art movement. most of my artwork come from that style bases. so does my web design work. anotherwards im not gaudy with my design.

 

[Choppaface]

Re: Re: Re: web design ...html help etc. etc. blah blah...

Originally posted by krossfyter

well i just want a scroll bar frame thing in the middle portion of my site.

the iframe will do that, and it will save you some page weight too

 

[macabre]

iframe is not dhtml

If you want dhtml scrollbars on your page your code will have to look something like this:
html has nested layers(divs)
"<div id="cont">
<div id="text">
content
</div>
</div>"

javascript for scrollarrows
"
function ScrollUp(speed){
if(document.getElementById){
if(parseInt(txt.style.top) < 0)
txt.style.top = parseInt(txt.style.top) + speed + "px";
timerID = setTimeout("ScrollUp("+speed+")",30)
}
}
"

css for layers
"

#cont {position:relative; left:0px; top:0px; width:312px; height:300px; border:0px solid #ffffff; overflow:hidden;}
#text {position:absolute; left:0px; top:0px; width:302px; font-family:Arial, Helvetica, sans-serif; font-size:11px;}
"

that works in ie only, but there is similar code for cross-platform compatibility.
I was just to lazy to write it for that site considering the ie%.
http://www.dhtmlcentral has a lot of nifty dhtml stuff on it. Check it out even if you dont care. Kind of slow on ie for mac though.