Wissensdatenbank Wirtschaftsrecht

aktuelles Dokument:
Prog2V03
image5
image4
image3
image2
image1
 Alle Kategorien:
  Forschungsdatenbank
  Lehrveranstaltungen
  Lexikon
  Literatur
  Rechtsgebiete
  Rechtsprechung
  Service
  Studium F H S
  Wissensmanagement
ich war hier: Prog2V03
 (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://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_1.gif)


Winkellayout



 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_2.jpg)


Portallayout



 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_3.jpg)


HTML und CSS zur Umsetzung eines einfachsten Winkellayouts



 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_4.jpg)


Baumstruktur des View



 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_5.gif)


HTML / CSS -Basiselemente



 (image: http://wdb.fh-schmalkalden.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://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_7.jpg)


Winkel-Layout



 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_8.jpg)

 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_9.jpg)


Übungsaufgabe



 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_10.gif)


CSS-Angaben für Hintergrundbilder



 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_11.jpg)


body{

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




 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_12.jpg)


Komplexe Positionierung am Beispiel des Portallayouts



 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_13.jpg)


Boxmodell



 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_14.jpg)


Automatische Kontrolle von Größen und Abständen



 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_15.jpg)

 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_16.jpg)


Portallayout



 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_17.jpg)


Portallayout mit absoluter Positionierung des Contents



 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_18.jpg)

 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_19.jpg)

 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_20.jpg)

 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_21.jpg)


Automatische Anordnung von Basiskomponenten



 (image: http://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_22.gif)


Google- Empfehlungen



 (image: http://wdb.fh-schmalkalden.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://wdb.fh-schmalkalden.de/uploads/Prog2V03/Prog2_3_24.gif)



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