1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Cleaning up Dreamweaver Code

Discussion in 'White Hat SEO' started by stevesdata, Aug 23, 2009.

  1. stevesdata

    stevesdata Regular Member

    Joined:
    Nov 3, 2008
    Messages:
    357
    Likes Received:
    140
    Location:
    Next to Chuck Norris
    I just built a new site and I am disgusted at the amount of sh1tty code Dreamweaver appeared to has put in particularly in the head tags. What tips do you guys have for cleaning up Dreamweaver code for white hat seo activities?

    I think I may need to change the way I work is using XHTML strict likely to be better. I have heard code is much cleaner. What are the best HTML editors available for clean code / seo? (excluding notepad lol).

    My onsite optimisation knowledge is reasonable but not used to seeing so much crap in code when looking at other sites.

    Below is an example. Thanks to anyone that can help...

    :)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/main-template.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>< Home ></title>
    <!-- InstanceEndEditable -->
    <link href="file:///E|/Websites/site_root/main.css" rel="stylesheet" type="text/css" />
    <script src="file:///E|/Websites/site_root/Scripts/swfobject_modified.js" type="text/javascript"></script>
    <!-- InstanceBeginEditable name="head" -->
    <style type="text/css">
    <!--
    a:link {
    	color: #EEE;
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    	color: #EEE;
    }
    a:hover {
    	text-decoration: underline;
    	color: #EEE;
    }
    a:active {
    	text-decoration: none;
    	color: #EEE;
    }
    -->
    </style><!-- InstanceEndEditable -->
    <style type="text/css">
    <!--
    a:link {
    	color: #EEE;
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    	color: #EEE;
    }
    a:hover {
    	text-decoration: underline;
    	color: #EEE;
    }
    a:active {
    	text-decoration: none;
    	color: #EEE;
    }
    -->
    </style>
    <link href="main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>
     
    Last edited: Aug 23, 2009
  2. ukescuba

    ukescuba Jr. VIP Jr. VIP Premium Member

    Joined:
    Feb 24, 2008
    Messages:
    994
    Likes Received:
    634
    Occupation:
    Mobile Marketer & QR Code Junkie
    Location:
    San Antonio, TX
    Home Page:
    looking at the code i am thinking its adding the extra comments cos your using a dreamweaver template... ie your starting with a blank template instead of a blank page

    also look at the option under commands and clean up xhtml, cleanup dreamweaver special markup...

    if you code your pages starting with a new blank page it shoudlnt add those comments, it doesnt for me, ive been using dreamweaver since v3 and ive always got relatively clean code from it, although my software of choice for building sites is notepad! lol

    that css code is usually added when you modify the page properties, these can simply be moved to your external css code - not sure why its added it twice though thats not normal...

    the javascript has been added because you used the rollover image feature this again can be moved externally, it will normally add that in if you use the built in feature...

    hth
     
    • Thanks Thanks x 1
    Last edited: Aug 23, 2009
  3. stevesdata

    stevesdata Regular Member

    Joined:
    Nov 3, 2008
    Messages:
    357
    Likes Received:
    140
    Location:
    Next to Chuck Norris
    Many thanks.

    I didnt use a third party template but built a single html page then created my own template and deployed the template to create a ton of pages so I could update globally. I was just shocked at how scruffy the code seemed in comparison to a recent site I built.

    Thanks for the tips I think I need to have a good think about using a mixture of hand coding and dreamweaver.

    The CSS thing is weird the version of dreamweaver I have forces me to add my CSS to the page not the external style sheet. I will try adding to the stylesheet manually as this has always annoyed me.

    I need to sort this sh1t out as I want to set up a web design co with super clean coded templates to work from.

    :)
     
  4. ukescuba

    ukescuba Jr. VIP Jr. VIP Premium Member

    Joined:
    Feb 24, 2008
    Messages:
    994
    Likes Received:
    634
    Occupation:
    Mobile Marketer & QR Code Junkie
    Location:
    San Antonio, TX
    Home Page:
    ive been doing web development since back in the day, pre 2000 think from around 1996 - started out with frontpage, then dreamweaver, then notepad! lol

    in all honesty if you know css, and know how to slice photoshop images - the best recommendation i can offer for someone to setup as web company is to start using Joomla

    it has a big learning curve depending where you find the right resources to learn it but once you get it down you will be able to knock out decent fully functional sites in no time at all

    if you any questions about this feel free to ask

    thanks
     
    • Thanks Thanks x 1
  5. Entrepreneur

    Entrepreneur Regular Member

    Joined:
    Oct 12, 2007
    Messages:
    438
    Likes Received:
    379
    I followed a similar path to Ukescuba, Hotmetal, Dreamweaver, Notepad 2/++. I now do alot of Joomla and think it's a great script to learn and understand. I recommend you buy a sitepoint book on css and another on html. They read well and they'll help teach you standardised valid code rather than than the rubbish pumped out by "editors". A hand coded site is just a million times cleaner and better.
     
    • Thanks Thanks x 1
  6. ukescuba

    ukescuba Jr. VIP Jr. VIP Premium Member

    Joined:
    Feb 24, 2008
    Messages:
    994
    Likes Received:
    634
    Occupation:
    Mobile Marketer & QR Code Junkie
    Location:
    San Antonio, TX
    Home Page:
    people dont believe me but you can make your own basic joomla templates with about 20 to 30 lines of code!

    hand coded its really easy too! :)
     
    • Thanks Thanks x 1
  7. Entrepreneur

    Entrepreneur Regular Member

    Joined:
    Oct 12, 2007
    Messages:
    438
    Likes Received:
    379
    I've wanted to make my own template a number of times, but always found something that's good enough and decided it's to time consuming. I'd one day like to convert a hand coded site to Joomla for the sake of the cms backend though.
     
  8. stevesdata

    stevesdata Regular Member

    Joined:
    Nov 3, 2008
    Messages:
    357
    Likes Received:
    140
    Location:
    Next to Chuck Norris
    Thanks a lot for the advice guys.

    My plan is initially to create some banging templates covering every niche all very high end, clean code and white hat then outsource site creation. I would probably do this in XHMTL at first then move into other things.

    I like the idea of wordpress templates but have had joomla recommended many times for corp sites. How does wordpress compare? I was going to outsource some of these and dewordpressify and deblogify them too at a later date. Another plan I had was to hand code the templates into wordpress sites at a later date or poss outsource this too. This would be using XHTML and CSS in .php containers and swap out the dynamic sections with php code.

    In regards to slicing I usually mock up in photoshop and loosely follow my designs in XHTML and CSS, using CSS layouts. I have never found slicing to be good for my workflow although in theory it rocks!

    Thanks again guys I feel very lucky to be part of this community :)

    My coding is not great although I have the confidence to do pretty much anything as I am stubborn as f^&k with a hd full of goodies.

    Any links to joomla stuff would be interesting if poss and would live to know opinions on joomla vs wordpress. I like wordpress as I can easily charge a small (or large ;)) fee to SEO it.

    :)
     
  9. Entrepreneur

    Entrepreneur Regular Member

    Joined:
    Oct 12, 2007
    Messages:
    438
    Likes Received:
    379
    The main difference in my opinion is that one is a blog, one is a cms. I know many people start saying wordpress is a cms and in the true sense it is, but as you've mentioned, wordpress is a blog cms and needs "deblogifying", Joomla is a proper content management system and doesn't, because, simply put, it isn't a blog. Template wise sites like Rocket Theme show the difference quite clearly, at least in terms of site structure.

    As an out of the box solution Joomla and wordpress are comparatively similar for the job they're intended. With a few minutes you can throw up a blog using wordpress. Job done. Within a few minutes in Joomla you can have a very fresh looking corporate site with masses of pages, proper menus (not the previous/older posts), polls, and members areas.

    Personally i consider Joomla to be the bollocks. It does a million and one things and can do those things with a million and one pages with no additions. And that's where it trumps WP imo. For a proper site, that doesn't look like a blog trying to be a corporate site, Joomla wins.
     
    • Thanks Thanks x 1
  10. ukescuba

    ukescuba Jr. VIP Jr. VIP Premium Member

    Joined:
    Feb 24, 2008
    Messages:
    994
    Likes Received:
    634
    Occupation:
    Mobile Marketer & QR Code Junkie
    Location:
    San Antonio, TX
    Home Page:
    totally agree with E,

    some people will say that wordpress is also better for seo, everyone to there own - if you know what you are doing with joomla and are familiar with the many components available and know about template overrides seo then is not an issue for joomla, its just in most instances people because of the relative steep learning curve, and the fact people dont have the patience or access to the right resources to learn how to do this they tend not to see just how powerful and how many few limitations it has...

    additionally joomla gets a somewhat bad rep for security... again most people dont realize that is more to do with badly written third party apps and not keeping there site upto date with security patches... there are several posts on here debating the pros and cons of several cms at the end of the day use whats best for you, i know from a business stand point we turned to Joomla about 4 or 5 years ago and it was the best decision we ever made, not just from a developers point of view but also from a $$$ making view too. It saves us time, looks great, our clients love it, and we still get great ranking if not better than we used to with our hand written sites due to us being able to automate and manage the sites a lot better!

    for most of the time our clients want more than a 5 to 10 page website, or at least tend to expand that eventually and with over 3000+ plugins for joomla we can accommodate pretty much anything a client requests, and if a component isnt available - because of the excellent MVC Joomla framework we can always custom build something for them :)

    hth
     
    • Thanks Thanks x 1
    Last edited: Aug 28, 2009
  11. stevesdata

    stevesdata Regular Member

    Joined:
    Nov 3, 2008
    Messages:
    357
    Likes Received:
    140
    Location:
    Next to Chuck Norris
    Thanks guys

    I have said this many times but really appreciate being a part of this forum and for all the help I get from guys like yourselves ;)

    You have given me a number of ideas. I think I will create a ton of designs first in photoshop, then XHTML, then will look to port the templates over to both WP and Joomla with a view to tailor to clients.

    I think I am polarised to WP because I have read so much about it already and know some great tricks. I think I will prioritise WP for my own sites. XHTML / Joomla with Flash for corp sites. Possibly WP for clients that want a quick seo solution. I was thinking of creating manuals for seoing WP sites to give to my outsourcing company.

    I would really appreciate a point in the right direction for Joomla resources. I am having a look at
    Code:
    joomla.org/
    obviously. Where are the best places to learn it inside and out?

    Does it work the same as WP in terms of install and uploading themes? i.e. you can create the templates and turn around a high volume of sites for clients?

    Apologies for the noobish Joomla Q's I am reading up on this right now. Any particularly good books / guides would be amazing...

    You guys have a good weekend.

    :)
     
  12. Entrepreneur

    Entrepreneur Regular Member

    Joined:
    Oct 12, 2007
    Messages:
    438
    Likes Received:
    379
    When i first learned Joomla years ago, I simply spent a few hours watching video tutorials on a site. I was confident in what i was doing within a few hours and then over the course of a few weeks/months, as i built things and got stuck, i was able to find the solution using Google and therefore increased my experience.

    I have no idea what site is was i used when i learned, but found this and it looks good enough to teach you using short videos.

    http://www.joomlatutorials.com/
     
    • Thanks Thanks x 1
  13. stevesdata

    stevesdata Regular Member

    Joined:
    Nov 3, 2008
    Messages:
    357
    Likes Received:
    140
    Location:
    Next to Chuck Norris
    Thanks for this it recommends this:

    Code:
    http://www.joomlatemplatebuilder.com
    Is this any good? I also looked at Artisteer:

    Code:
    http://www.artisteer.com/
    I am starting to become concerned about the amount of crap code with any of these tools. I think I need to get good at either hand coding or optimising the crap code myself in notepad.

    Thanks again for the help

    :)
     
  14. ruler0fall

    ruler0fall Power Member

    Joined:
    May 17, 2009
    Messages:
    565
    Likes Received:
    263
    If you use dreamweaver don't use the preview window for editing it instead type out the code. That way you have more control and it's way less code then dreamweaver uses.
     
  15. ukescuba

    ukescuba Jr. VIP Jr. VIP Premium Member

    Joined:
    Feb 24, 2008
    Messages:
    994
    Likes Received:
    634
    Occupation:
    Mobile Marketer & QR Code Junkie
    Location:
    San Antonio, TX
    Home Page:
    all i use is CSS positioning and position everything within div tags

    hope that makes sense