Dienstag, 29. April 2008
Aufgabe 1: Umstellung auf XHTML
Andreas.Niederschick.Uni-Linz, 10:06h
Die erste Umstellung die ich machte war die Änderung des Doctypes von transitional auf strict :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Dies ist zwar nicht dringend erforderlich, jedoch verwende ich den strikten Standard um sofort auf Fehler aufmerksam gemacht zu werden.
Weiters erfolgte die Änderung des tabellenbasierten Designs in ein CSS-basiertes Design. Dazu wurde der sichtbare Bereich in 3 Container unterteilt: Den Banner, das Menu sowie den Contentbereich. Diese wurden mittels einfacher CSS-Befehle richtig positioniert.
Hier der Quellcode:
/* ##### Container ##### */
#banner {
height: 100px;
width: 100%;
}
#menu {
float: left;
width: 200px;
}
#content {
/* oben - rechts - unten - links */
margin: 0 0 0 230px;
}
Eingebunden wurden diese Container in die Main Page mit dividern (zB <_div id="banner">...<_/div>). [Die Unterstriche dienen zur Darstellung der entsprechenden Tags)
Nach durchsicht der meisten "Schnipseln auf der Collaborseite wurde ersichtlich dass die meisten Teile bereits ohne Tabellendesign und semantisch korrekt vorhanden sind. Dies folgt aus der Tatsache das die meisten Schnipsel hauptsächlich Makros und wenig anderen Inhalt aufweisen.
Zu ändern war noch der Story Editor. Dieser wurde wie das Mainlayout von Tabellendesing auf CSS umgestellt. Durch die Schachtelung zweier Tabellen war dies vergleichsweise schwer erreichbar.
CSS-Quellcode:
/* ##### Story Editor ##### */
#storyEditor {
display: block;
}
#storyEditor h3 {
font-weight:normal;
}
#storyEditor .topicChooser {
margin-left:15px;
display: inline;
float: left;
}
Außerdem mussten einige Tags aus semantischen Gründen entfernt bzw. durch andere erstetzt werden. So ersetzte ich die <_span>-Tags durch <_div>-Tags da diese oftmals in <_p>-Tags vorkamen. Außerdem wurden anschließend an die spans <_br/>-Tags verwendet, welche durch den Einsatz von <_p>-Tags vermieden werden konnte. Diese Änderungen wurden auch im Comment Editor vorgenommen.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Dies ist zwar nicht dringend erforderlich, jedoch verwende ich den strikten Standard um sofort auf Fehler aufmerksam gemacht zu werden.
Weiters erfolgte die Änderung des tabellenbasierten Designs in ein CSS-basiertes Design. Dazu wurde der sichtbare Bereich in 3 Container unterteilt: Den Banner, das Menu sowie den Contentbereich. Diese wurden mittels einfacher CSS-Befehle richtig positioniert.
Hier der Quellcode:
/* ##### Container ##### */
#banner {
height: 100px;
width: 100%;
}
#menu {
float: left;
width: 200px;
}
#content {
/* oben - rechts - unten - links */
margin: 0 0 0 230px;
}
Eingebunden wurden diese Container in die Main Page mit dividern (zB <_div id="banner">...<_/div>). [Die Unterstriche dienen zur Darstellung der entsprechenden Tags)
Nach durchsicht der meisten "Schnipseln auf der Collaborseite wurde ersichtlich dass die meisten Teile bereits ohne Tabellendesign und semantisch korrekt vorhanden sind. Dies folgt aus der Tatsache das die meisten Schnipsel hauptsächlich Makros und wenig anderen Inhalt aufweisen.
Zu ändern war noch der Story Editor. Dieser wurde wie das Mainlayout von Tabellendesing auf CSS umgestellt. Durch die Schachtelung zweier Tabellen war dies vergleichsweise schwer erreichbar.
CSS-Quellcode:
/* ##### Story Editor ##### */
#storyEditor {
display: block;
}
#storyEditor h3 {
font-weight:normal;
}
#storyEditor .topicChooser {
margin-left:15px;
display: inline;
float: left;
}
Außerdem mussten einige Tags aus semantischen Gründen entfernt bzw. durch andere erstetzt werden. So ersetzte ich die <_span>-Tags durch <_div>-Tags da diese oftmals in <_p>-Tags vorkamen. Außerdem wurden anschließend an die spans <_br/>-Tags verwendet, welche durch den Einsatz von <_p>-Tags vermieden werden konnte. Diese Änderungen wurden auch im Comment Editor vorgenommen.
... comment