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

Discussion in 'Mac Help/Tips' started by krossfyter, Jun 22, 2002.

  1. krossfyter macrumors 601

    krossfyter

    Joined:
    Jan 13, 2002
    Location:
    secret city
    #1
    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.
     
  2. D0ct0rteeth macrumors 65816

    D0ct0rteeth

    Joined:
    Mar 11, 2002
    Location:
    Franklin, TN
    #2
    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-
     
  3. krossfyter thread starter macrumors 601

    krossfyter

    Joined:
    Jan 13, 2002
    Location:
    secret city
    #3
    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.
     
  4. Macette macrumors 6502

    Joined:
    Mar 5, 2002
    Location:
    Melbourne
    #4
    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.
     
  5. j763 macrumors 6502a

    Joined:
    Nov 25, 2001
    Location:
    Champaign, IL, USA
    #5
    um... you're wrong there... Bunches of sites use <div> and <table>
     
  6. Macette macrumors 6502

    Joined:
    Mar 5, 2002
    Location:
    Melbourne
    #6
    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.
     
  7. D0ct0rteeth macrumors 65816

    D0ct0rteeth

    Joined:
    Mar 11, 2002
    Location:
    Franklin, TN
    #7
    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 www.webmonkey.com :) es bueno.

    Good Times.

    C-
     
  8. Choppaface macrumors 65816

    Joined:
    Jan 22, 2002
    Location:
    SFBA
    #8
    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 :D

    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 :D

    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.
     
  9. krossfyter thread starter macrumors 601

    krossfyter

    Joined:
    Jan 13, 2002
    Location:
    secret city
    #9
    wow! thanks to everyone for the help thus far. im really learning some new stuff and well i love that!:D

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

    so... iframes... aye!?!!? how do i go about using that? is that html?
     
  10. barkmonster macrumors 68020

    barkmonster

    Joined:
    Dec 3, 2001
    Location:
    Lancashire
    #10
    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:

    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.
     
  11. krossfyter thread starter macrumors 601

    krossfyter

    Joined:
    Jan 13, 2002
    Location:
    secret city
    #11
    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.
     
  12. Macette macrumors 6502

    Joined:
    Mar 5, 2002
    Location:
    Melbourne
    #12
    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!
     
  13. Inhale420 macrumors regular

    Joined:
    May 4, 2002
    #13
    Re: web design ...html help etc. etc. blah blah...

    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 :)
     
  14. krossfyter thread starter macrumors 601

    krossfyter

    Joined:
    Jan 13, 2002
    Location:
    secret city
    #14
    Re: Re: web design ...html help etc. etc. blah blah...



    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.
     
  15. Choppaface macrumors 65816

    Joined:
    Jan 22, 2002
    Location:
    SFBA
    #15
    Re: Re: Re: web design ...html help etc. etc. blah blah...

    the iframe will do that, and it will save you some page weight too :D
     
  16. macabre macrumors newbie

    Joined:
    May 27, 2002
    Location:
    Santa Cruz, CA
    #16
    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.
     

Share This Page