Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Newbie questions

    These are simple questions and i hope someone has the time to adress them.

    As far as I know the first step in making a website is come up with a design. I have done it before and am fairly creative so that i can get my work done. I use fireworks even though photoshop is better because i got used to it.

    The next step is what troubles me and am seeking an easier way to it than the one am currently using. What do you do with the image file? I cant work on it with dreamweaver because it acts really weird with tables. I usually end up in frontpage creating tables and stuffing in the images to make it look like the original graphic file. That takes time. Isnt there an easier way to just pick it up from fireworks so that layers are preserved in someway and converted into tables? I think i came somewhat close with slices. By creating slices over the boxes i need they are converted into tables. Is this the way to go?

    Maybe you can understand better by looking at the initial design (if my host decides to come back online soon):

    design.


    Also, how can i make the table dimensions stay fixed. I understand that fluid webpages are better but i want my design to remain exactly the same with no distortion etc. Setting the attributes wont do the trick. Must be easier through CSS but i havent tried experimenting with that yet.


    Anyway these are newbie questions, i hope you understand what am talking about.

  • #2
    Regular Coder mic2100's Avatar
    Join Date
    Feb 2006
    Location
    Scunthorpe
    Posts
    562
    Thanks
    15
    Thanked 28 Times in 27 Posts
    i use fireworks to create images (not very good like but i still ave a go) and wen i want to display them on a web page i use the slice tool to break it down into pieces. When you have got all the image finished export it as HTML and firework will create the html file with the tables and images all propley positioned. Look on line for tutorials for this.

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well the only problem i have with that is that if i want the box to expand upon addition of content that would not work as it will distort all images around it. What i thought of was to make slices over the images i didnt want to brake up no matter what.

    But anyway this is time consuming and its always a try and see what happens thing till i get the slices correctly. Any other way ?

    Also again, how to make the table sizes stay fixed no matter how much text is put into ( extra text is simply not displayed). Maybe i can work around the distortion thing as tables become bigger.


    thanks

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,866
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    Wrong, wrong, all wrong!

    OK, I don't mean to be a jerk but I think your whole approach isn't quite right and up to date. But I can understand that you're more a designer than a programmer. However, this shouldn't justify that your approach is wrong.

    Websites in the 21st century do not, I repeat: do not consist of tables (for layout purposes). Tables are only to be used for what they are made: tabular data (e.g. sports results or a personnel listing).

    Quote Originally Posted by Nitric123
    Isnt there an easier way to just pick it up from fireworks so that layers are preserved in someway and converted into tables?
    There is a way, though not quite like that.
    Have you ever heard of cascading stylesheets? If not you really missed the first step in website development after coming up with a design.

    Here's how you should approach the making of a new website:
    1. Create a design (Photoshop, Fireworks... whatever)
    2. Create the plain HTML document (put text/content before you think of any styling - use divisions, paragraphs, headlines (h1 - h6), image tags (only if relevant for understanding the content), lists (e.g. for the navigation) and anchors. no tables! except you have a... well... table you wanna display)
    3. Apply styling to the HTML elements through CSS


    With CSS you can layer elements over one another (although this isn't the main usage) and it will make your code
    • shorter
    • faster to load
    • easier to maintain
    • easier to find (by search engines)
    • more accessible (to users with text-only browsers/mobile devices/disabilities (->screen readers))
    • semantically valuable


    For a good inspirational source you can and should refer to http://csszengarden.com to see what can be done to a plain ol' text page with CSS.

    Oh and one last advice: Test your pages in Opera/Firefox/Safari/Netscape... at first and then you can look at it in Internet Explorer and fix what it's doing wrong (compared to the other - better - browsers).
    Last edited by jkd; 08-01-2006 at 11:12 PM.

  • #5
    New Coder
    Join Date
    Aug 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok more newbie stuff along the way.

    yea i know ive missed much of all this since i was never into it. I usually just ended up with the design and gave that to others with enough skills to go over it. www.mwc06.com is an example.

    But anyway, i always thought that CSS was simply to define the style of a particular region of the document. Like font etc.

    Again from the start. I have the image file. I use slice tool all over the regions that i want them to be editable in dreamweaver etc. Basically all am asking is a way to make some regions of the image file editable in dreamweaver before/after making it an htm file.

    Create the plain HTML document (put text/content before you think of any styling - use divisions, paragraphs, headlines (h1 - h6), image tags (only if relevant for understanding the content), lists (e.g. for the navigation) and anchors. no tables! except you have a... well... table you wanna display)
    Basically this leads me to believe that the image file will some what be turned into an html file with editable regions. And by tables i was referring to these regions. But i could never do it that way so 2 years ago when i started out i was just making tables in frontpage. And i dont wanna go back to that.


    Unless, theres some way to use css in a way to specify in what part of the page i want a box to float with that particular color as backround and border and contain text of a particular style.

    Is that it? How do you insert boxes then at some particular space of the page?


    Thanks

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,866
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    Hm, I'm not quite sure what "editable" means for you... If you're talking about an image with some text on it that needs to be editable without changing/editing the image itself then CSS is the perfect example.

    Unless, theres some way to use css in a way to specify in what part of the page i want a box to float with that particular color as backround and border and contain text of a particular style.
    That's exactly what CSS is made for. Let's assume you have a paragraph with text and you want it to appear in a box with black border and gray background color in the top right corner you would use some CSS rules to make the paragraph look exactly like that.
    And you could change the text whenever you want and the box would still be there with black border and gray background. It would even adapt the size to the amount of text (unless you set a specific width to the paragraph).

    Wanna see an example in action? Copy the following code, save it into a file and look how CSS can change the entire appearance of a plain HTML document. That's the way to go.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #one {
    	border: 1px solid black;
    	width: 200px;
    	background: rgb(75, 20, 20) url(http://www.mwc06.com/themes/images/dwarf.png) top right no-repeat;
    	color: #FFF;
    	padding: 25px 150px 25px 10px;
    }
    #two {
    	position: absolute;
    	right: 50px;
    	top: 30px;
    	background-color: #CCC;
    	width: 100px;
    	border: 3px double #F00;
    	padding: 5px;
    }
    div {
    	border: 3px groove green;
    	width: 500px;
    	padding: 5px;
    	position: absolute;
    	right: 60px;
    	top: 145px;
    }
    div p {
    	background-color: #C93;
    	padding: 5px;
    }
    div img {border: 1px solid #00F;}
    </style>
    </head>
    
    <body>
    <p id="one">This is a paragraph with some text and a background image applied through CSS.</p>
    <p id="two">This is another paragraph to show the full effect of positioning with CSS.</p>
    <div>
    	<p>And this is a div with some text and an image with a border (again, applied through CSS). Look at the layering effect caused by absolute positioning.</p>
    	<img src="http://www.codingforums.com/img/logo.gif" alt="CodingForums logo" />
    </div>
    </body>
    </html>
    OK, I hope I understood your query correctly and my advice wasn't in the wrong place here.

  • #7
    New Coder
    Join Date
    Aug 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i cant test this code now since i need to leave home but i think you understand what am saying.

    But the only problem is : how do i make the paragraph with text to appear in a box with black border and gray background color not in the top right corner but somewhere along the page on a specific place defined by exact pixels lets say.

    Maybe i can see the top corner thing in the code and adjust it but as i said i gtg fast and i dont want to be stuck with no answer if i cant find it.
    Last edited by Nitric123; 08-02-2006 at 03:00 AM.

  • #8
    New Coder
    Join Date
    Aug 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks a lot man, and you are absolutely right. Css is the way to go, i didnt know it could be used for that.

    I would like to ask some specific questions now for the reasons i wanted to learn this and see whats the correct way to go.

    If you check: http://www.mwc04.com/tfc3/

    You can see theres 3 content boxes. The correct thing to do would be to create the image file in fireworks with everything shown apart from the content boxes and then add the boxes with the border with CSS.

    question1: I can fix the width of the box to stay fixed but what if i want the box to be able to expand bottomwise as more content is added? The box layer would float on top and would expand on top of everything? How do you make the page to expand to the bottom as the box pushes it downwards?


    2: also in the code provided, is this what defines the position of the box?

    Code:
    #two {
    	position: ;
    	right: 50px;
    	top: 30px;
    	background-color: #CCC;
    	width: 100px;
    	border: 3px double #F00;
    	padding: 5px;

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,866
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    Quote Originally Posted by Nitric123
    The correct thing to do would be to create the image file in fireworks with everything shown apart from the content boxes and then add the boxes with the border with CSS.
    I see you are thinking the right way. With a little practice you might become good at CSS layouts.

    Quote Originally Posted by Nitric123
    question1: I can fix the width of the box to stay fixed but what if i want the box to be able to expand bottomwise as more content is added?
    That happens automatically if you don't specify a fixed height. A paragraph or a div are block level elements and by default they expand to 100% width and collapse to as much height as there is content in them.

    Quote Originally Posted by Nitric123
    2: also in the code provided, is this what defines the position of the box?

    Code:
    #two {
    	position: ;
    	right: 50px;
    	top: 30px;
    	background-color: #CCC;
    	width: 100px;
    	border: 3px double #F00;
    	padding: 5px;
    }
    Well, actually the top: 30px; and right: 50px; are defining the position. The position property is just telling them that they are to be positioned in some way (static (=default), relative, absolute, or fixed). Note, however, that positioning is just one way (and the most obvious to newbies) to position an element and that this usually is barely necessary to get things positioned. Also there are some tricky things to know about positioning.
    You seem like a smart guy and you should really read a little bit about CSS (e.g. on http://www.w3schools.com/css/default.asp and/or http://htmldog.com). Also here is a great resource of how to achieve different layouts with CSS.

  • #10
    New Coder
    Join Date
    Aug 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for everything. I will try and learn as much css i can to get the work done.

    i will be bugging you again if i come across any problems

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,866
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    Sure, go ahead. That's what this place is made for.
    But for HTML and CSS related questions you should refer to the HTML/CSS forum as there are more people with specific knowledge that might be able to help you.

  • #12
    New Coder
    Join Date
    Aug 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #13
    Regular Coder Aradon's Avatar
    Join Date
    Jun 2005
    Location
    USA
    Posts
    734
    Thanks
    0
    Thanked 20 Times in 19 Posts
    Quote Originally Posted by VIPStephan

    Websites in the 21st century do not, I repeat: do not consist of tables (for layout purposes). Tables are only to be used for what they are made: tabular data (e.g. sports results or a personnel listing).
    I use tables cause I'm lazy

    (that might also be why I'm not a professional web developer )
    "To iterate is human, to recurse divine." -L. Peter Deutsch


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •