ich war hier: Prog2V03

Version [21552]

Dies ist eine alte Version von Prog2V03 erstellt von RonnyGertler am 2013-02-28 21:11:18.

 

 (image: http://wdb.fh-sm.de/uploads/QualipaktLehre/BMBF_Logo_klein.jpg)

Photoshop-Basiswissen für Webseiten-Layout


Inhalte von Prof. Dr. Klaus Chantelau


Entwicklung von Rich Clients mit HTML, CSS, JavaScript und AJAX



 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_1.gif)


Winkellayout



 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_2.jpg)


Portallayout



 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_3.jpg)


HTML und CSS zur Umsetzung eines einfachsten Winkellayouts



 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_4.jpg)


Baumstruktur des View



 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_5.gif)


HTML / CSS -Basiselemente



 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_6.gif)


1.Container: Tag-Verschachtelung
2. Jede style-Angabe wirkt sich auf alle Kindknoten aus!
3. Es wird immer das Koordinatensystem des Containers verwendet!

Umfangreiche Dokumentation: http://de.selfhtml.org/


Photoshop- Entwurf



 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_7.jpg)


Winkel-Layout



 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_8.jpg)

 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_9.jpg)


Übungsaufgabe



 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_10.gif)


CSS-Angaben für Hintergrundbilder



 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_11.gif)


body{

background-image:url(Hintergrund.jpg);
background-repeat:repeat-y;
background-attachment:fixed;
}




 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_12.jpg)


Komplexe Positionierung am Beispiel des Portallayouts



 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_13.jpg)


Boxmodell



 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_14.jpg)


Automatische Kontrolle von Größen und Abständen



 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_15.jpg)

 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_16.jpg)


Portallayout



 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_17.jpg)


Portallayout mit absoluter Positionierung des Contents

 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_18.jpg)

 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_19.jpg)

 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_20.jpg)

 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_21.jpg)


Automatische Anordnung von Basiskomponenten



 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_22.gif)


Google- Empfehlungen



 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_23.jpg)

Überschriften
Listen
Tabellen


Navigation „verpackt“ in Tabelle



<div id="navigation">
<a class="navi_self navi_first" href="schlagzeigen.html">
Casa
</a>
<a class="navi" href="tipps.html" title="Studiosus">
Studiosus
</a>
....



<div id="navigation">
<table>
<tr>
<td>
<a class="navi_self navi_first" href="schlagzeigen.html">
Casa
</a>
</td>
</tr>
<tr>
<td>
<a class="navi" href="tipps.html" title="Studiosus">
Studiosus
</a>
</td></tr>
</table>
</div>


table{
border-spacing:0px;
padding:0px;
width:220px;
}
td{
padding:0px;
border:0px;
}


Übungsaufgabe:

Erstellen Sie ein Portallayout mit der gemischten Positionierung, d.h. mit absoluten Positionierungen sowie mit margin-Angaben.


 (image: http://ife.erdaxo.de/uploads/Prog2V03/Prog2_3_24.gif)




CategoryProg2

Diese Seite wurde noch nicht kommentiert.
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki