SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Page Layout - Do You Have to Hand Code?

    Would I be right in saying that if you choose to use CSS based page layout, then you have to hand code everything? i.e. are tools like Dreamweaver not suitable? Is there a quicker way of doing it than hand coding?

    Thanks

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 Thread(s)
    You could use a toolkit, such as Twitter Bootstrap.
    This is a free collection of tools for creating websites and contains a bunch of HTML and CSS-based design templates.
    To get going, you only have to download the code and include the style sheet in your page, then you have a load of pre-defined classes and UI elements that you can make use of.
    You can, of course, then build on this foundation with styles of your own.
    You can read more here: http://twitter.github.com/bootstrap/

  3. #3
    SitePoint Enthusiast seanuk's Avatar
    Join Date
    Dec 2012
    Location
    UK
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes Dreamweaver does. Most WYSIWYG HTML editors will write the HTML & CSS for you.

    This post on Smashing Magazine might help: http://www.smashingmagazine.com/2008...tors-reviewed/

  4. #4
    SitePoint Enthusiast seanuk's Avatar
    Join Date
    Dec 2012
    Location
    UK
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BTW, that's an old post (2008) and some might not be available anymore

  5. #5
    From space with love silver trophy
    SpacePhoenix's Avatar
    Join Date
    May 2007
    Location
    Poole, UK
    Posts
    4,998
    Mentioned
    100 Post(s)
    Tagged
    0 Thread(s)
    My own preference is to generally hand-code (sometimes I'll copy and paste a working example and modify it to suit) as when a program like Dreamweaver is used any errors could be made by either the program or the user.l When the CSS is hand-coded any errors are down to the user only.

    If you either have a good sized screen or two screens hooked up to the computer then you could have a text editor open in one to edit the css file and in the other have a browser window open to test any changes that are made.

    If you end up using a sample from somewhere and you might forget why you used that sample, place a comment above or below the bit to remind yourself or to inform a future developer why that bit was chosen.
    Community Team Advisor
    Forum Guidelines: Posting FAQ Signatures FAQ Self Promotion FAQ
    Help the Mods: What's Fluff? Report Fluff/Spam to a Moderator

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by accelerator View Post
    Would I be right in saying that if you choose to use CSS based page layout, then you have to hand code everything? i.e. are tools like Dreamweaver not suitable? Is there a quicker way of doing it than hand coding?
    You don't have to hand-code it, but you'll often end up with a better site if you do. Editors like Dreamweaver can create all the styles, but they can't know what you mean, so you will usually have less semantic code and more bloat/redundant code, leading to more styles than you need, which makes it more difficult to maintain and update. If you have hand-coded it, you will know exactly what everything does, which will help you to slim it down and make sure that everything is exactly as it should be.

    Even on sites where I have to use a CMS, I always switch to the code view and hand-code the editable content areas within the template!

  7. #7
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    I would stop using Dreamweaver, it's an old over-hyped program.

    I recommend using a lightweight program like notepad++. This program provides more helpful foundation to coding your websites, using this you can make changes to your CSS frameworks.

    For CSS based layouts, you can use bootstrap as suggested by @Pullo ; or you can other frameworks such as:

    http://www.amazium.co.uk/
    http://foundation.zurb.com/
    http://susy.oddbird.net/
    http://gumbyframework.com/
    http://www.getskeleton.com/
    http://www.responsivegridsystem.com/
    http://responsive.gs/
    http://piira.se/projects/ingrid/

    This would be your easiest option, your hardest bet would be to try and make a professional web design tool out of Dreamweaver
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  8. #8
    Non-Member
    Join Date
    Jun 2012
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I disagree. Dreamweaver is still among the best in terms of coding. It is easy to use and pretty robust. That said, there are newer options like SiteGrinder that do all of the heavy work for you so you don't slave over a screen for hours coding a site to perfection.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by shanshan View Post
    there are newer options like SiteGrinder that do all of the heavy work for you
    I agree with you that Dw is quite a good code editor, but as mentioned above, anything that spits out code for you is likely to do a poor job of it, so it's much better to learn to hand code. In the end, hand coding is much faster. I have a friend who uses a WYSIWYG editor, claiming it's much faster, yet he spends hours trying to fix/debug things that take me a few seconds to fix via hand coding.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by shanshan View Post
    I disagree. Dreamweaver is still among the best in terms of coding. It is easy to use and pretty robust. That said, there are newer options like SiteGrinder that do all of the heavy work for you so you don't slave over a screen for hours coding a site to perfection.
    Knowing your code is very important in controlling every aspect of your website, which is crucial in today's world of the web. WYSIWYG editors were good for learning what each thing does, but once you've completely grasped HTML and CSS you'd want to use a text editor to be able to understand what you're doing.

    Another downside to Dreamweaver is that is adds unnecessary tags. For example, every paragraph would be translated as a <DIV> and your document will contain a series of class's with the name .style. We've not even touched on the left behind tags.

    It's low level entry point combined with it's easy to use application made it a dream come true for wannabe web designer. As this is such an unregulated industry we naturally witnessed rock bottom prices overlooking the basics of web standards and browser cross-compatibility. Their technical expertise would be something similar to a person using Ms Word, but because of this low stepping stone this made it inevitable.

    Many professionals with technical experitise just wanted to be in full control and the only way they could do this is if they dropped this paid program and opted for another editor. Many in the industry use a free HTML editor.

    You're more likely in today's age to use CSS frameworks to do your hard work, such as 960, or the links I suggested above rather than using Dreamweaver.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 Thread(s)
    Hi all,

    Although DW has a WYSIWYG editor, which, as @Sega ; rightly says, is pants (if that is all you use), don't forget that it also has a code view, which is awesome.
    I use DW to do all my web coding (it has so many cool features like templates, code completion, widgets etc.), but I spend 99% of my time in the code view.
    The WYSIWYG view is useful to highlight an element on the page, then you can switch back to the code view and see the appropriate HTML highlighted.

    Maybe this is getting a bit off topic ...

  12. #12
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    @Pullo ;

    Off Topic:


    Sorry for getting a little off topic Have you tried notepad++. It also have cool feature like auto-code completion and zen coding. There are hundreds of free plug-ins available, another popular one is sublime 2, this is a real quick editor (very responsive on your keyboard). At one stage I used DW but I got tired of the updates. Now I use notepad++ and it works great!
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 Thread(s)
    Off Topic:

    Hi Sega,

    Quote Originally Posted by Sega View Post
    Have you tried notepad++. It also have cool feature like auto-code completion and zen coding. There are hundreds of free plug-ins available, another popular one is sublime 2, this is a real quick editor (very responsive on your keyboard). At one stage I used DW but I got tired of the updates. Now I use notepad++ and it works great!
    Indeed I have. On my local machine I have a dev server in a Virtual Box and as DW would (or at least used to) cause a virtual machine to fall over and die, I looked for other editors.
    I tried Aptana Studio, but wasn't convinced. Then I tried Notepad ++ and have been using that ever since.
    Saying that, my work bought the complete Adobe CS5 suite for me to use, so it would be a crying shame not to use DW


Bookmarks

Posting Permissions

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