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.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Apr 2007
    Posts
    2
    Member #
    15137
    Ok well, basically I'm almost completely new to web design, and I've been learning CSS, HTML and photoshop. Along the way I've gathered up a bunch of questions that I'd really appreciate the answers to!
    Ok so firstly, other than CSS and HTML, what other languages do I need to learn if I'm to design some decent sites?
    Also, how do you sort of, integrate photoshop sites into dreamweaver, and add in CSS, text etc? How much do you have to make in photoshop, or at least, what's the limit of what you should create in photoshop and then what you should leave to CSS etc? I tried creating a whole site in photoshop, but I came across all sorts of problems when I tried putting it into dreamweaver, like how to make it a fluid layout?
    I'd really appreciate some answers, especially to my second question! Thanks for your time!

  2.  

  3. #2
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    1. No other languages, to be strict. The two alone can do a pretty effective site. But then you'll probably want to take either Javascript, which is a client-side language, or a server-side language, such as PHP. A few pointers: Using JS, you have to be concise and effective (because each user will execute on their own). Using a server-side, you'll find a lot more complexity but at the same time a lot more flexibility. Client-side and server-side each has their own functions, so you can pick which you want first. Generally since I'm a guy of elegant solutions, I don't like the shortcomings of JS and learned PHP first.

    Tip: Do note that both JS, PHP and other languages are much more difficult than XML-style HTML or CSS. Some people (often who use WYSIWYG editors) even say that JS looks like swear words. Heh.

    2. You need to refine your use of photoshop. Things have changed, and typically you don't want to just make a design in photoshop and pop it into HTML. Reasons:
    - HTML is text-based. Not raster-based. You can't just put things there.
    - HTML is dynamic. It's designed to conform to its contents, not to other restrictions. Thats why it took all those table hacks and CSS in order for designers to restrict HTML shapes.

    This is why a lot of designs you see on the net are not photoshop-ish. Believe me, if a site could be made in completely photoshop (and work), we'd be seeing drop shadows and glows and everything everywhere. Such as on wdf, the only images (that are part of the design) are the left stripes, various gradients, and the header.

    Generally if you have an integral part of design you can use photoshop to design in. Most of the time, this is done by making a small image and tiling it (such as many gradients you see and also striping). Otherwise photoshop should only be used for headers, icons, or anything that has a clear meaning. I can't stress this enough. People use it for all sorts of decorative stuff. Do not do this. Use big images for a good reason.

    What you want to do is, first, create a layout in CSS only (but at this step you are also preparing the containers for your images). Then fill in your CSS styling like borders. Now you can fill in any images via direct HTML tags of through CSS backgrounds. This is the simplest workflow. The key: A layout should work without images. So don't let your images control your layout - make your layout control your image placement.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  4. #3
    Junior Member
    Join Date
    Apr 2007
    Posts
    2
    Member #
    15137
    Hmm, ok, thanks very much, that's a great help! Do you think you could explain the last part a bit more? Sorry!

  5. #4
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Before I continue, I'll split images into 3 types.

    Decorative Images are ones to avoid, or at least keep at bay unless absolutely necessary or are light enough not to impose any trouble. These include the subtle gradients you see everywhere and drop shadow images. Since gradients are simply 1px-width (or height) images which are tiled, they are usually safe.

    Iconic Image are ones that should sit in <img> tags. These images have a symbolized meaning, such as navigation arrows in image galleries, etc. Be careful with these - never give an important control item (navigation button, etc) an iconic image without any explanation text (even if the explanation pops up or something). This can lead to very bad navigation. Stuff like smilies are also here, but they don't imply any action.

    Layout Component Images are pieces of imagery intended to assist your layout. I separate these from decorative images because these images usually do have an implied meaning that builds on the entire sites atmosphere. This includes headers, navigation backgrounds, and generally most layout pieces. These are the ones you'll probably construct in your photoshop design.

    Ok here goes. Here's the steps you should take. Keep in mind this is assuming you can create layouts in CSS.

    1. Visualize your layout - not the design yet. Just where container A will set, where notice B should lay, etc. Since this is HTML, don't worry about getting down pixel-perfect widths or anything. Just imagine "I want a long header, then a bar on the left. On that bar, there should be a logo at the top, then...".

    2. Create the layout in CSS. Just the layout again. Prepare the divs necessary for the layout. At this point, if you have layout component images, prepare their locations. Also prepare the markup (insert dummy content for now).

    3. Start to create life in your page. Fill in some pseudo-menuitems, give them their backgrounds, etc. Also insert all of your layout components here, and any decorative images. At this point your containers are probably taking shape and look how they should in the end.

    4. Insert the real content. The iconic images are considered content.

    Well thats my workflow, others may have their own preferences.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.


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 12:58 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com