## Photoshop-Basiswissen für Webseiten-Layout

_<span class="right">Inhalte von Prof. Dr. Klaus Chantelau</p>_



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





### Winkellayout





### Portallayout





### HTML und CSS zur Umsetzung eines einfachsten Winkellayouts






### Baumstruktur des View





### HTML / CSS -Basiselemente




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





### Winkel-Layout






### Übungsaufgabe





### CSS-Angaben für Hintergrundbilder




body{

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



### Formatierung von Hyperlinks





### Komplexe Positionierung am Beispiel des Portallayouts





### Boxmodell





### Automatische Kontrolle von Größen und Abständen






### Portallayout





### Portallayout mit absoluter Positionierung des Contents








### Automatische Anordnung von Basiskomponenten





### Google- Empfehlungen



Überschriften
Listen
Tabellen



### Navigation &#8222;verpackt&#8220; 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.



# Photoshop-Basiswissen für Webseiten-Layout
_<span class="right">Inhalte von Prof. Dr. Klaus Chantelau</p>_
### Entwicklung von Rich Clients mit HTML, CSS, JavaScript und AJAX
### Winkellayout
### Portallayout
### HTML und CSS zur Umsetzung eines einfachsten Winkellayouts
### Baumstruktur des View
### HTML / CSS -Basiselemente

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
### Winkel-Layout
### Übungsaufgabe
### CSS-Angaben für Hintergrundbilder

body{

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

### Formatierung von Hyperlinks
### Komplexe Positionierung am Beispiel des Portallayouts
### Boxmodell
### Automatische Kontrolle von Größen und Abständen
### Portallayout
### Portallayout mit absoluter Positionierung des Contents
### Automatische Anordnung von Basiskomponenten
### Google- Empfehlungen
Überschriften
Listen
Tabellen
### Navigation &#8222;verpackt&#8220; 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.
***
CategoryProgrammierung2

CategoryProgrammierung2

CategoryDelete

CategoryDelete

CategoryProg2

# Photoshop-Basiswissen für Webseiten-Layout
_<span class="right">Inhalte von Prof. Dr. Klaus Chantelau</p>_
### Entwicklung von Rich Clients mit HTML, CSS, JavaScript und AJAX
### Winkellayout
### Portallayout
### HTML und CSS zur Umsetzung eines einfachsten Winkellayouts
### Baumstruktur des View
### HTML / CSS -Basiselemente

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
### Winkel-Layout
### Übungsaufgabe
### CSS-Angaben für Hintergrundbilder

body{

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

### Formatierung von Hyperlinks
### Komplexe Positionierung am Beispiel des Portallayouts
### Boxmodell
### Automatische Kontrolle von Größen und Abständen
### Portallayout
### Portallayout mit absoluter Positionierung des Contents
### Automatische Anordnung von Basiskomponenten
### Google- Empfehlungen
Überschriften
Listen
Tabellen
### Navigation &#8222;verpackt&#8220; 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.
***
CategoryProg2