Arlong Park Forums

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Users
    • Groups

    Coding a Layout

    Help Forums
    4
    8
    3052
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Buuhan1
      Buuhan1
      last edited by
      Buuhan1
      spiral
      Buuhan1
      spiral

      Alright, I got a site to do. The method I use to code with was saving a webpage and simply modifying its coding, but this method was slow, difficult, and overall didn't produce a great result.

      I know how to slice and all that, I've made the layout and sliced it already. Just the matter of learning to code it. I have Dreamweaver MX 2004 but I don't know what the hell I'm doing. I found a tutorial which I thought was gonna be good but when it came down to the coding part the guy totally failed to explain things: http://s12.invisionfree.com/NemesisGFX/index.php?showtopic=29

      So, I really need help. I've been meaning to get this site up since July 2007.

      (http://www.slicingguide.com/ was no use to me. I found the guides overly complicated/confusing and the fact they want you to do the layout and coding back to back and not one after another, but I don't see why.)

      1 Reply Last reply Reply Quote 0
      • Quexinos
        Quexinos
        last edited by
        Quexinos
        spiral
        Quexinos
        spiral

        I can help you here. HTML is a lot easier I think. I don't even know what this slicing is but I can show you how to do it with HTML. What I always do is lay my layouts out in photoshop, then figure out how to code them. The most important codes you will need is < table >… that one right there, Trust me.

        The method I use to code with was saving a webpage and simply modifying its coding, but this method was slow, difficult, and overall didn't produce a great result.

        Well you shouldn't do that anyway, that's like stealing a layout almost XD Plus if you run across something and you don't know what it means, it's impossible to change it.

        Take a look at saveonepiece.com:
        http://www.saveonepiece.com

        It's all tables and links mostly. So is the old layout:
        http://www.saveonepiece.com/archive/

        Now look at this site:
        http://www.saturdaymorningsonic.com/

        That was done by someone entirely different and if you right click and view source, you'll see they're done completely differently. Find a way that's right for you. I'll tell you my method, but if it doesn't work you can try something else.

        Okay at SOP.com I basically used one giant table but of course it's invisible. Well here it is:
        http://www.saveonepiece.com/index2.html
        Now I don't know how much of this you all ready know so just skip it if you know it.

        The table width is set to 775 pixels. Cell padding is how big a cell is, cell spacing is how far apart the cells are spaced. When you need images to line up, both should be set to zero.

        A table is made up of < TD > and < TR > tags.
        http://saveonepiece.com/trtd.jpg

        They mean table data and table row respectively. The < TD > tags always go inside the area where the < TR > tags are. If you look at my code you get this:

        
        ![](topleft.gif)
        
        ![](topright.gif)
        
        

        Look across the top row:
        Empty because there's nothing there XD But notice I did set the width of the data as well. You won't always NEED this, but when you have images that need to line up, then it's a good idea.

        ![](topleft.gif)
        ```That's this pic:
        ![](http://saveonepiece.com/topleft.gif)
        again I set the width to be sure it lined up right
        
        This time the pic is set as a background. Now I did NOT set the width of this one. This is because I set the width of all the others with the images as the foreground. The table had a certain width that I need it to be so this one will stretch out to max the table width by itself.
        
        

        ![](http://saveonepiece.com/topright.gif)
        
        So it's basically this
        
        [http://saveonepiece.com/tr.jpg](http://saveonepiece.com/tr.jpg)
        
        Notice how it's wrapped around a < tr > and a < /tr > tag. This is obviously where the row starts and ends.
        
        and before I go on is any of this making any sense/ I don't really know how much you know or need to know. If this is helping I'll continue on but if not, I'll shut up.

        _For with a closing door, another surely opens

        Just you wait and see,

        And when you look back on where we've been together

        Wherever you may be

        I hope that you remember me_

        J 1 Reply Last reply Reply Quote 0
        • J
          jobebob @Quexinos
          @Quexinos last edited by
          J
          spiral
          jobebob
          spiral

          Here are some useful sites that have easy tutorials to get you started:
          http://www.w3schools.com/
          http://www.htmldog.com/

          A general rule is to put all your formating in css then to go in and write a basic layout in html.

          If you go through the htmldog tutorial you should be good enough to make whatever you want.

          Good luck.

          http://one-piece.manga-read.net All OP eps and manga up and ready to be leeched. ![](images/smilies/ipb/ninja.png "Ninja")

          1 Reply Last reply Reply Quote 0
          • R
            roamingwyoming
            last edited by
            R
            spiral
            roamingwyoming
            spiral

            This is… a kid's site. But I used to use it all the time whenever I wanted to try messing around with Geocities or something. You're probably more advanced than this, but here you go anyway: http://www.lissaexplains.com/

            Originally Posted by Chibi Schala

            Nero has just the right amout of junk in his trunk.

            1 Reply Last reply Reply Quote 0
            • Quexinos
              Quexinos
              last edited by
              Quexinos
              spiral
              Quexinos
              spiral

              Yeah that site kinda states the obvious there doesn't it?

              Don't make your text too small or the same color as the background. No one will be able to read your text.

              but that actually is a pretty good site and I used a kiddie site to get started too.

              _For with a closing door, another surely opens

              Just you wait and see,

              And when you look back on where we've been together

              Wherever you may be

              I hope that you remember me_

              1 Reply Last reply Reply Quote 0
              • Buuhan1
                Buuhan1
                last edited by
                Buuhan1
                spiral
                Buuhan1
                spiral

                Quex, thanks for taking time writing up that guide…but I'm a little reluctant to follow it due to you not even knowing what slicing is and our layouts being very different.

                1 Reply Last reply Reply Quote 0
                • Quexinos
                  Quexinos
                  last edited by
                  Quexinos
                  spiral
                  Quexinos
                  spiral

                  OKay I think.. isn't it basically "slicing" the images apart and then putting them back together in Dreamweaver or HTML? I just didn't know it had a name. Basically that's what I did above, made the layout. Made all the separate images, then put them all back together. It's like disassembling a puzzle then putting it back together.

                  Unless there's a big difference between that and slicing in Dreamweaver

                  anyway, if you can show me your layout I'll probably be able to help more or at least show you where the tables should go

                  _For with a closing door, another surely opens

                  Just you wait and see,

                  And when you look back on where we've been together

                  Wherever you may be

                  I hope that you remember me_

                  1 Reply Last reply Reply Quote 0
                  • Buuhan1
                    Buuhan1
                    last edited by
                    Buuhan1
                    spiral
                    Buuhan1
                    spiral

                    Yeah, that is what it is. Alright. I'll PM you.

                    1 Reply Last reply Reply Quote 0

                    • 1 / 1
                    • First post
                      Last post
                    Powered by NodeBB | Contributors