Click to See Complete Forum and Search --> : layout and coding
mar1300
05-14-2006, 06:26 PM
When it comes to web design I would do my layout in Photoshop, slice it up and drop it into Dreamweaver, and try to make it work from there.
Since coming to the forum I’ve learned it’s best to hand code it.
The past few days I’ve been working really hard trying to get a strong grip on (Html, CSS, and JavaScript).
I’m trying to understand is it best to do the whole layout in Photoshop, save it as a background image and then place all the information, buttons, and links in the proper location using Html, CSS, JavaScript????????
I’m having a hard time where to begin.
I was hoping for someone to share the steps and process they go through on setting up a web page layout and then coding it.
Thanks
I do start with a sketch as well. Each project is bit different but maybe give this a whirl and see if it helps.
First, take out a piece of paper and pencil and map out the regions of the site. Hypothetically, you've got a header, then a two-column content area with a main area and a secondary area, then a footer. On this map you can mark it up with whatever notes will help you to get a mental framework: assign widths to the regions, note your plans for margins or padding for gutters and such, etc. Of course if you've got a photoshop mock, some of this you'll just grab right from that, but I find having a pencil and paper sketch to be very "calming" and takes away that "where the heck to I start" feeling.
Ok, so then you would create a very loose framework after you've roughed this map, and begin the html like so:
<body>
<div id="header"></div>
<div id="main"></div>
<div id="secondary"></div>
<div id="footer"></div>
</body>
</html>
Then take those layout elements and start building your stylesheet. When I am in the very beginning stages, I like to keep all of the styles right in the same document rather than an external file, that way I can preview and test and edit quite efficiently. Are you using dreamweaver?
This may seem very elementary to some, but I used to skip over the 'beginning' and right into the middle and that's when it gets overwhelming. Start with a simple road map and then build on that.
Hope that helps????
nyc_skater
05-14-2006, 07:03 PM
I find in building a website, it really is important to know exactly what the site will be composed of and what you want the end result to be and all the other things associated with that. This helps in making smaller decisions along the way and also gives me clear places of where to start out and where not to.
There's a lot of useablity issues that also go into web design beyond what looks good, websites aren't just visual elements but dynamic machines that take care and understanding to work correctly.
I'd say read as much as you can about every aspect of web development, get a grasp on what concepts are out there and what their use is, even if you don't learn it you'll have a better understanding of the big picture and decisions will come easier.
DesignerScott
05-14-2006, 07:12 PM
I usually (when not designing in flash; yes I do mostly flash work to avoid the headaches of cross-browser crap) start out with adding all the content into my standard template, with all of the appropriate outlining, like paragraph, title1, title2 stuff. Then I'll look at it completely unstyled, and rearrange as necessary, then start thinking about the style of the css and images. this way, everything is all about the content, and presents the content clearly.
So in summary I:
1. obtain content
2. work out hierarchy for whole site. (i.e. sitemap)
3. outline content
4. place content in unstyled html
5. work out rough sketch of layout
6. work out graphics
7. create style sheets
^ Nice. I sometimes do this too when the site is content-heavy/complex. Sometimes the sketch/graphics come first, just depends. I don't touch content, but I do require that my clients have a detailed site outline to me before I touch anything. Gotta have that road map first.
mar1300
05-15-2006, 12:48 AM
thanks all this stuff really helps
but what I'm really trying to get at is......... example: you finish your layout in photoshop. so now you have your layout.....what do you do next with the layout
example layout (finshed)
mar1300
05-15-2006, 12:57 AM
would you save just the background and then place all the information using Html, CSS, javascript?????
orkaknos12
05-15-2006, 07:18 AM
Use the slice tool in Photoshop to cut your design into chunks, then save for web to save all your slices as a batch of image pieces (you can set different parameters for each slice to optimize the site's image weight (GIF, JPEG, Quality Level, Matting etc etc). Then take your pictures, put them in your HTML working directory and code them into the HTML layout. You'll have to figure out the best way to make that design work in HTML where the text size could vary considerably. If you're just learning to hand code, you're best to learn XHTML strict and CSS so you'll be up to day with today's standards.
-Jon
mar1300
05-15-2006, 09:49 AM
Use the slice tool in Photoshop to cut your design into chunks, then save for web to save all your slices as a batch of image pieces (you can set different parameters for each slice to optimize the site's image weight (GIF, JPEG, Quality Level, Matting etc etc). Then take your pictures, put them in your HTML working directory and code them into the HTML layout. You'll have to figure out the best way to make that design work in HTML where the text size could vary considerably. If you're just learning to hand code, you're best to learn XHTML strict and CSS so you'll be up to day with today's standards.
-Jon
thanks...wow I guess it will take alot of trial and error to line up all the slices correct using html, and css....
fireworks or imageready will do the lining up for you, but you might want to clean up the coding a bit. Also, you should centralise all your layout stuff in an external style sheet, makes doing wholesale changes to layout and style, much easier.
btw. when we say the best way to code webpages is with notepad, you should probably take that with a pinch of salt. Dreamweaver dramatically improves productivity, but what is important is that you know how to optimise code, fix problems and do things that aren't necessarily easy in dreamweaver. The only reason i use golive is because Its quick, especially with handy features such as the script assist, where it offers you suggestions of where to take your html or javascript expressions.
chris_bcn
05-15-2006, 04:34 PM
yeah notepad is certainly not the best way for me. I like to have some colour coding going on. Topstyle Pro is my weapon of choice. Fantastic HTML editor and CSS editor. Can't recommend it enough. I avoid WYSIWYG editors as much as I can. They can be handy but I always seem to spend hours getting rid of the bloated code they produce.
There is no trial and error when it comes to lining up the graphics. As long as you know the dimensions of the various slices it's easy to put them into your layout
ecsyle
05-15-2006, 05:04 PM
Well, when I say Notepad, i mean any text editor. Notepad sucks. You should get something that can at least color your code for you.
I use BBEdit on a Mac, and Bluefish on Linux. I use dreamweaver at work though. I end up using its templating features with our staff, since I don't want them to break anything :P
1ooScreamingTrees
05-15-2006, 05:24 PM
I like Textpad for PC coding - It's site licensed software for our university but I'm pretty sure you can grab a free 'shareware' esque version that just has a splash screen:
http://textpad.com/
mar1300
05-15-2006, 07:36 PM
thanks guys this is making alot more sense.........so it's ok to drop the layout into dreamweaver and then fix up the code....I was thinking you had to hand code the whole thing..
would you consider dreamweaver a good program or would you recommend something else?
ecsyle
05-15-2006, 08:08 PM
Of all the packages, i like Dreamweaver the best. It doesn't get in my way nearly as much as Frontpage and GoLive do.