Beispielprojekt Webdesign

Zielsetzung

Umstellung von verschachteltem Tabellendesign auf XHTML und CSS
Ersetzung der Javascript-Funktionen durch CSS-Funktionalität
Möglichst Beibehaltung des Aussehens mit kleineren kosmetischen Korrekturen

Dauer

einige Stunden

Veränderungen

	Vorher:	Nachher:
Aussehen
Dateigrößen	135 kB	41 kB (-70%)

Kodeauszug identischer Teile:

Vorher:

<BODY BGCOLOR="#CCCC99" LINK="#0000FF" VLINK="#800080" TEXT="#000000" TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
    <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
        <TR VALIGN=TOP ALIGN=LEFT>
            <TD WIDTH=8 HEIGHT=8><IMG SRC="./clearpixel.gif" WIDTH=8 HEIGHT=1 BORDER=0></TD>
            <TD></TD>
            <TD WIDTH=8><IMG SRC="./clearpixel.gif" WIDTH=8 HEIGHT=1 BORDER=0></TD>
            <TD WIDTH=58><IMG SRC="./clearpixel.gif" WIDTH=58 HEIGHT=1 BORDER=0></TD>
            <TD WIDTH=454><IMG SRC="./clearpixel.gif" WIDTH=454 HEIGHT=1 BORDER=0></TD>
            <TD WIDTH=1><IMG SRC="./clearpixel.gif" WIDTH=1 HEIGHT=1 BORDER=0></TD>
            <TD WIDTH=1><IMG SRC="./clearpixel.gif" WIDTH=1 HEIGHT=1 BORDER=0></TD>
            <TD WIDTH=1><IMG SRC="./clearpixel.gif" WIDTH=1 HEIGHT=1 BORDER=0></TD>
            <TD WIDTH=49><IMG SRC="./clearpixel.gif" WIDTH=49 HEIGHT=1 BORDER=0></TD>
            <TD WIDTH=47><IMG SRC="./clearpixel.gif" WIDTH=47 HEIGHT=1 BORDER=0></TD>
        </TR>
        <TR VALIGN=TOP ALIGN=LEFT>
            <TD COLSPAN=3 HEIGHT=43></TD>
            <TD WIDTH=611 COLSPAN=7><IMG ID="Banner1" HEIGHT=43 WIDTH=611 SRC="./Home_NIndBannerShort.GIF" BORDER=0 ALT="coan.de Homepage"></TD>
        </TR>
        <TR VALIGN=TOP ALIGN=LEFT>
            <TD COLSPAN=10 HEIGHT=9></TD>
        </TR>
        <TR VALIGN=TOP ALIGN=LEFT>
            <TD></TD>
            <TD WIDTH=120 ROWSPAN=4>
                <TABLE ID="VerticalNavigationBar1" BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=120>
                    <TR VALIGN=TOP ALIGN=LEFT>
                        <TD WIDTH=120 HEIGHT=21><A HREF="./index.html" onMouseOver="F_roll('Navigationsknopf92',1)" onMouseOut="F_roll('Navigationsknopf92',0)"><IMG ID="Navigationsknopf92" NAME="Navigationsknopf92" HEIGHT=21 WIDTH=120
                             SRC="./Home_HIndButtonOn.gif" onLoad="F_loadRollover(this,'Home_HRIndButtonOnRoll.gif')" BORDER=0 ALT="Home"></A></TD>
                    </TR>
                    <TR VALIGN=TOP ALIGN=LEFT>
                        <TD WIDTH=120 HEIGHT=21><A HREF="./features.html" onMouseOver="F_roll('Navigationsknopf93',1)" onMouseOut="F_roll('Navigationsknopf93',0)"><IMG ID="Navigationsknopf93" NAME="Navigationsknopf93" HEIGHT=21 WIDTH=120
                             SRC="./features_NIndButton.GIF" onLoad="F_loadRollover(this,'features_NRIndButtonRoll.gif')" BORDER=0 ALT="Features"></A></TD>
                    </TR>
                    <TR VALIGN=TOP ALIGN=LEFT>
                        <TD WIDTH=120 HEIGHT=21><A HREF="./download.html" onMouseOver="F_roll('Navigationsknopf94',1)" onMouseOut="F_roll('Navigationsknopf94',0)"><IMG ID="Navigationsknopf94" NAME="Navigationsknopf94" HEIGHT=21 WIDTH=120
                             SRC="./Download_NIndButton.GIF" onLoad="F_loadRollover(this,'Download_NRIndButtonRoll.gif')" BORDER=0 ALT="Download"></A></TD>
                    </TR>
...

Nachher:

<body>

<div id="header">
  <h1><img src="img/banner_home_s.gif" alt="Homepage von CoAn - Software für computergestützte Inhaltsanalyse" height="43" width="611" /></h1> 
</div>

<div id="navi1">
  <ul>
    <li class="selected" id="navi_index" title="Zur Startseite"><span>Home</span></li>
    <li><a href="features.php" id="navi_features" title="Informationen über die Programmmerkmale"><span>Features</span></a></li>
    <li><a href="download.php" id="navi_download" title="Download einer kostenlosen Testversion"><span>Download</span></a></li>
...