Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Junior Member
    Join Date
    Dec 2004
    Posts
    12
    Member #
    8357
    Hey All,

    This is my problem, I am a complete and utter newbie to the wonderful world or web design and know next to nothing about the actual coding of pages. To get stuck in I downloaded a free template, then just decided to design my own.

    Now I am very proficient with Photoshop and designed a simple layout in PS and sliced it in imageready and saved it with the html code. Opened said file in Dreamweaver MX and cannot work out how to the center the layout in the page when being browsed, or add a text layer to sit over my bg image.

    If anybody could help I would be extremely grateful.

    Thanks in advance.

    Ionize

  2.  

  3. #2
    Senior Member Trico's Avatar
    Join Date
    Feb 2004
    Location
    Nottingham, UK
    Posts
    894
    Member #
    5081
    You recreate the following CSS in between the <head></head> part of your html document in Dreamweaver.

    Code:
    ...<head>
    <style type="text/css" media="screen">
    html, body {
    
    margin: 0;
    padding: 0;
    text-align: center;
    
    }
    
    #centre { 
    
    margin: 0 auto;
    text-align: left;
    
    }
    </style>
    </head>...
    Then you wrap your entire layout in a pair of <div></div> tags like the following and link it to the CSS you just wrote.

    Code:
    <body>
    <div id="centre">
    
    [LAYOUT GOES HERE]
    
    </div>
    </body>...
    In order for you to start placing text over the images there are a few minor changes you will probably need to make. In most cases I believe slicing still outputs <img> tags inside table <td></td> cells.

    I.E.
    Code:
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td><img src="images/image_ready_slice_01.jpg"></td>
    <td><img src="images/image_ready_slice_02.jpg"></td>
    <td><img src="images/image_ready_slice_03.jpg"></td>
    </tr>
    </table> 
    
    etc...
    That would need to be formatted to look like the following:
    Code:
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td background="images/image_ready_slice_01.jpg">Insert text into this cell.</td>
    <td background="images/image_ready_slice_01.jpg">&nbsp;</td>
    <td background="images/image_ready_slice_03.jpg">&nbsp;</td>
    </tr>
    </table>

  4. #3
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    It's much easier to rebuild your table from scratch than trying to fix the html produced by ImageReady.

    Are you familiar with CSS?

    If yes... take it to a higher level than Trico's explanation and rebuild your whole layout in CSS.

    If no... when you select an image in Dreamweaver, that image, in its cell, comes up in the properties window. If you take the source image file and make it your td background (all of this can be done without style sheets), this will work as well. The problem is, it will repeat. So, then you either have to make a style sheet and declare a no-repeat, OR, you have to make your table completely static no matter what any one else's resolution is.

    One thing you will quickly learn in the field of web design... Style Sheets are you friend!
    Shani

    I have an eye for detail like you'd never believe.

  5. #4
    Junior Member
    Join Date
    Dec 2004
    Posts
    12
    Member #
    8357
    Css??

    To be honest I know next to nothing about any of it, as i have said i have only recently started getting into it, as in the last few days.

    I have started looking at making the table myself, and just adding the sliced images minus the code and it seems to be working, but I could still you some pointers on CSS and where to begin. i know that they can control text settings but not sure about the format when it comes to page layouts.

    Thanks for the help folks
    IOnize

  6. #5
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Quote Originally Posted by Ionize
    I could still you some pointers on CSS and where to begin. i know that they can control text settings but not sure about the format when it comes to page layouts.
    It's a hearty read, but a good place to start. CSS Thread

    Or if you want to click there, the tutorials link is right below the site-wide announcements.
    Shani

    I have an eye for detail like you'd never believe.

  7. #6
    Junior Member
    Join Date
    Dec 2004
    Posts
    12
    Member #
    8357
    Thanks a lot guys this stuff is helping a lot, just some small questions.

    With css what would I use 2 centre 12 gifs that make up an image into the centre of the page no matter the resolution or screen size?

    Plus i was just wondering about image transitions for mouse over events and links?

    And last but not least, i think this is probably dhtml or something, but when a page/link is clicked on my splash page i would like to slide a link bar down the page by about 500 pixels or so. Any tips for this?

  8. #7
    Senior Member Trico's Avatar
    Join Date
    Feb 2004
    Location
    Nottingham, UK
    Posts
    894
    Member #
    5081
    With css what would I use 2 centre 12 gifs that make up an image into the centre of the page no matter the resolution or screen size?
    http://www.alistapart.com/articles/sprites/

    Plus i was just wondering about image transitions for mouse over events and links?
    http://www.alistapart.com/articles/rollovers/

    http://www.projectseven.com/tutorial...pseudoclasses/

  9. #8
    Junior Member
    Join Date
    Dec 2004
    Posts
    12
    Member #
    8357
    Thanks again Trico,

    After looking at all that stuff I got to work on a layout and came up with this http://www.deviantart.com/view/12936936/

    And now I have more questions, if you don't mind or anybody else reading this.

    1: I want to make the "About Me: Lorem ipsum...." panel the only scrollable part of the screen. I want the rest of the layout to be complete static, having only the one section that changes.

    2: The font that I want to use is called "Parchment", is there anyway that this script will be seen by other users if they don't actuall have the font. If they can't view the font is there anyway to embed the font so that others can see it.

    Thanks again

  10. #9
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    For the About Me part, there are a few options (and possibly even more than what I'm about to mention). First, you can make a <div> block and set the overflow to scroll or auto. In this way if the content of the div goes beyond the given height, scrolling will occur.

    Another option is an iframe, but this is usually shunned. I'd suggest not using it, and perhaps I shouldn't even mention it. Oh well.

    As to the font, there is a way to embed it I believe, but it is not the best choice to do this. I think that if people don't have the font already on their machine it should be avoided on websites. I guess it's just an issue that designers need to work around.

    If you insist on that exact font, I'm sure someone will be able to tell you how. I have no clue myself. Hope I've been of help.

  11. #10
    Junior Member
    Join Date
    Dec 2004
    Posts
    12
    Member #
    8357
    Thanks Eddy, the whole font thing is just for aesthetics, I like the look and feel of it on my site and think it compliments the design, but as you said if people are not likely to have it then don't use it.

    But we can all wish and hope.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:52 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com