In Sammlung (en) In der gespeicherten
  1. Ingenieurwissenschaft
  2. Webdesign

Head - Lothar Melching

Werbung 
SEITENSTRUKTUR
DIESES WEBAUFTRITTS
Grundstruktur
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Spezifizierung der Html-Version
<html lang=“en“>
<head>
###############################
</head>
Beginn derHtml-Seite, HtmlProgrammiersprache Englisch
Beginn des Seitenkopfes
Text des Seitenkopfes
Ende des Seitenkopfes
<body>
###############################
</body>
Beginn des Seiteninhalts
Text des Seiteninhalts
Ende des Seiteninhalts
Ende der Html-Seite
</html>
Head
<head>
<title>################</title>
<meta
name="author"
content="Lothar Melching">
<meta
name="date"
content="##############">
<meta
name="description"
content="############################">
<meta
name="keywords"
content="############################">
Seite 1 von 5
Fenstertitel, wird oben in der
Rahmenleiste angezeigt
Dann folgt eine Reihe von
Meta-Tags
<meta
http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<meta
http-equiv="Content-Script-Type"
content="text/javascript">
<meta
http-equiv="Content-Style-Type"
content="text/css">
<link rel="stylesheet"
Verweis auf ausgelagertes
type ="text/css"
Stylesheet
href="../../stylesheets/seitenvorlage.css">
<script
src="../../javascript/##############"
type="text/javascript">
</script>
Verweis auf ausgelagertes Script
<style type="text/css">
<!-###############################
-->
</style>
eingebundene Style-Definition
<script type="text/javascript">
<!-###############################
// -->
</script>
eingebundenes Javascript
</head>
Seite 2 von 5
Body
<div id=“kopf“>
#################################
</div><-- kopf -->
Seitenüberschrift
<div id=“navigation“>
#################################
</div><-- navigation -->
Navigationsleiste
<-- ================================================ -->
<div id=“inhalt“>
#################################
Der eigentliche Inhalt
</div><-- inhalt -->
<-- ================================================ -->
<div id=“fuss“>
#################################
</div><-- fuss -->
Fußzeile
(Nach Html-strict müssen alle
Inhalte in Blockelemente eingeschlossen werden. Hierdurch
sind sie es.)
kopf
naviga
tion
inhalt
fuss
Seite 3 von 5
kopf
Beginn des Seitenkopfes
Sprungziel „Seitenanfang“
Seitenüberschrift
Ende des Seitenkopfes
<div id="kopf">
<a name="oben"></a>
<h1>##################</h1>
</div><!-- kopf -->
fuss
<div id="fuss">
<table width="100%" summary="fuss">
<tr>
<td class="fuli">
<img alt="zurueck (1K)" src="bilder/zurueck.gif"
height="15" width="15">
<a href="javascript:history.back()">zuletzt besucht</a>
</td>
<td class="fure">
<img alt="hoch (1K)" src="bilder/hoch.gif"
height="15" width="15">
<a href="#oben">zurück zum Seitenanfang</a>
</td>
</tr>
</table>
</div> <!-- fuss -->
produziert diesen Seitenfuß:
Seite 4 von 5
Layout mittels Stylesheet
body {
margin:0px;
padding:0px;
font-family:"helvetica", arial, sans-serif;
font-size:11pt;
font-weight:normal;
background-color:#CCFFCC;
color:maroon;
min-width:32em;
background-image:url(../bilder/hintergrund2.gif);
background-position:30px 3px;
background-repeat:no-repeat;
background-attachment:fixed;
}
#kopf {
top:0px;
left:0px;
height:60px;
margin:30px 15px 15px 15px;
text-align:center;
vertical-align:middle;
z-index:3;
background-color:transparent;
border-style:none;
}
#inhalt {
margin:2em 5em 1em 16em;
border-style:solid;
border-width:2px;
border-color:maroon;
padding:30px;
text-align:justify;
line-height:3ex;
background-color:#FFFFEC;
z-index:1;
}
#navigation {
position:absolute;
left:0em;
padding:2ex 0 0 1em;
width:12em;
z-index:2;
text-align:left;
overflow:visible;
font-size:10pt;
}
#fuss {
margin:0px 75px 0px 240px;
text-align:right;
padding-bottom:15px;
}
Seite 5 von 5
Herunterladen
Werbung