Alan N. Shapiro, Hypermodernism, Hyperreality, Posthumanism

Blog and project archive about media theory, science fiction theory, and creative coding

Start Here, by Sarah Mohr

Posted on March 10th, 2014 by Alan N. Shapiro | in the Category: Offenbach Students: HTML & JavaScript Projects
Comments Off on Start Here, by Sarah Mohr

Digital
Publishing
Programmierung
und
Gestaltung
einer
Website
Mit
Grundkenntnissen
zu
HTML
und
CSS
bestand
meine
Aufgabe
darin,
mit
Dreamweaver
eine
simple
Website-­‐Basis
zu
bauen,
auf
deren
Konzept
eine
Portfolio-­‐
Internet-­‐Präsenz
konstruiert
werden
kann.
Die
Basis-­‐Webseite
enthält
zwei
Kategorien,
welche
jeweils
auf
die
gestalterischen
Rubriken
weiterleiten.
Das
Programmieren
mit
HTML
und
CSS
erfordert
zunächst
einen
Vorentwurf
/
ein
Layout,
sodass
von
diesem
ausgehend,
die
Programmier-­‐Struktur
besser
organisiert
werden
kann.
Empfehlenswert
ist
es
dabei,
die
CSS
Codes
in
externen
Seiten
für
CSS
auszulagern,
sodass
der
Code
übersichtlich
bleibt.
Zudem
ist
darauf
zu
achten,
Elemente,
die
zwar
dieselbe
Funktion
besitzen,
jedoch
ein
unterschiedliches
Aussehen
aufweisen
sollen,
mit
unterschiedlichen
IDs
in
der
CSS-­‐
Auslagerung
zu
vermerken,
da
unter
derselben
ID
die
Gestaltung
für
alle
Dateien,
in
denen
das
Element
enthalten
ist,
greifen
würde.

index3.html

Seite1.html

Seite2.html

Seite3.html

Seite4.html

Seite5.html

Seite6.html

Seite7.html

a_tag_effects.css

frame_element.css

Seite1.css

screenshot08h

 

screenshot07v

 

screenshot06v

screenshot05

 

screenshot04 screenshot03

 

 

 

screenshot02

 

screenshot01

 

 

overview02

Seite1.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Seite 2</title>
<link href=”CSS/a_tag_effects.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
a:link {
color: #666;
}
a:visited {
color: #666;
}
</style>
</head>

<body>

<header id=”topS2″ align=”left”>
<h1>about.</h1>
</header>
<div id=”Wrapper2″ align=”center”>
<div id=”TextAbout”>
<p> This is a website including my personal work. If you have any questions, feel free to ask.
</p>
<a href=”mailto:sarah-reva@gmx.de”>mail to: sarah</a>
</div>

<div id=”ReturnLink”>
<a href=”index3.html”>back.</a>
</div>
</div>

</body>
</html>

bad

 

bird

 

bravo

 

cph4

Seite2.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Seite 2</title>
<link href=”CSS/a_tag_effects.css” rel=”stylesheet” type=”text/css”>
</head>

<body>

<header id=”topS2″ align=”left”>
<h1>about.</h1>
</header>
<div id=”Wrapper2″ align=”center”>
<div id=”TextAbout”>
<p> This is my text to be written later.
</p>
</div>
</div>
</body>
</html>

Seite3.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Seite3</title>
<link href=”CSS/frame_element.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
a:link {
color: #333;
}
a:visited {
color: #333;
}
</style>
</head>

<body>

<div id=”animation” align=”center”>

<img src=”images/mad009.gif” width=”500″ height=”278″ alt=””></div>

<div id=”ReturnLink”>
<a href=”index3.html”>better go back.</a>
</div>

</body>
</html>

dach

 

ffm001

Seite5.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Seite 1</title>
<style type=”text/css”>
</style>
<link href=”CSS/a_tag_effects.css” rel=”stylesheet” type=”text/css”>
<link href=”CSS/Seite1.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
a:link {
color: #333;
}
a:visited {
color: #333;
}
</style>
</head>

<body>

<header id=”top” align=”left”>
<h1>photography.</h1>
</header>

<div id=”wrapper3″ align=”center”>

<img src=”images/bird.JPG” name=”Image1″ width=”25%” hspace=”10″ border=”0″ align=”absmiddle”;>
<img src=”images/bravo.JPG” name=”Image2″ width=”25%” hspace=”10″ border=”0″ align=”absmiddle”>
<img src=”images/coffee.JPG” name=”Image3″ width=”25%” hspace=”10″ border=”0″ align=”absmiddle”>

</div>

<div id=”wrapper4″ align=”center”>
<img src=”images/cph4.JPG” name=”Image4″ width=”25%” hspace=”10″ border=”0″ align=”absmiddle”>
<img src=”images/cph2.jpg” name=”Image5″ width=”25%” hspace=”10″ border=”0″ align=”absmiddle”>
<img src=”images/IMG_6421-4.JPG” name=”Image6″ width=”24%” hspace=”10″ border=”0″ align=”absmiddle”>

</div>

<div id=”wrapper5″ align=”center”>
<img src=”images/IMG_6304.JPG” name=”Image7″ width=”22%” hspace=”10″ border=”0″ align=”absmiddle”>
<img src=”images/IMG_6114.jpg” name=”Image8″ width=”24%” hspace=”10″ border=”0″ align=”absmiddle”>
<img src=”images/IMG_6227.JPG” name=”Image9″ width=”25%” hspace=”10″ border=”0″ align=”absmiddle”>

</div>

<div id=”ReturnLink”>
<a href=”seite4.html”>back.</a>
</div>

</body>
</html>

Seite6.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Seite 1</title>
<style type=”text/css”>
</style>
<link href=”CSS/a_tag_effects.css” rel=”stylesheet” type=”text/css”>
<link href=”CSS/Seite1.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
a:link {
color: #333;
}
a:visited {
color: #333;
}
</style>
</head>

<body>

<header id=”top” align=”left”>
<h1>collage.</h1>
</header>

<div id=”wrapper3″ align=”center”>

<img src=”images/_MG_7352-6.JPG” name=”Image1″ width=”24%” hspace=”10″ border=”0″ align=”absmiddle”;>
<img src=”images/bad.JPG” name=”Image2″ width=”25%” hspace=”10″ border=”0″ align=”absmiddle”>
<img src=”images/eule_hoodie.JPG” name=”Image3″ width=”25%” hspace=”10″ border=”0″ align=”absmiddle”>

</div>

<div id=”wrapper4″ align=”center”>
<img src=”images/1_wolke 001 Kopie.JPG” name=”Image4″ width=”25%” hspace=”10″ border=”0″ align=”absmiddle”>
<img src=”images/hand 001.JPG” name=”Image5″ width=”25%” hspace=”10″ border=”0″ align=”absmiddle”>
<img src=”images/instant_orthodox 001.JPG” name=”Image6″ width=”25%” hspace=”10″ border=”0″ align=”absmiddle”>

</div>
<div id=”ReturnLink”>
<a href=”seite4.html”>back.</a>
</div>

</body>
</html>

flowers

 

friends

 

IMG_6225

Seite7.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Seite 1</title>
<style type=”text/css”>
</style>
<link href=”CSS/a_tag_effects.css” rel=”stylesheet” type=”text/css”>
<link href=”CSS/Seite1.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
a:link {
color: #333;
}
a:visited {
color: #333;
}
</style>
</head>

<body>

<header id=”top” align=”left”>
<h1>random.</h1>
</header>

<div id=”wrapper3″ align=”center”>

<img src=”images/tlv4.JPG” name=”Image1″ height=”210″ hspace=”10″ border=”0″ align=”absmiddle”;>
<img src=”images/mad074.GIF” name=”Image2″ width=”300″ hspace=”10″ border=”0″ align=”absmiddle”>
<img src=”images/friends.JPG” name=”Image3″ height=”208″ hspace=”10″ border=”0″ align=”absmiddle”>

</div>

<div id=”ReturnLink”>
<a href=”seite4.html”>back.</a>
</div>

</body>
</html>

Seite1.css

#top {
font-size: 10px;
text-align: left;
color: #333;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
text-decoration: underline;
letter-spacing: 1px;
}
#topS2 {
font-size: 10px;
text-align: left;
color: #333;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
text-decoration: underline;
letter-spacing: 1px;
}
#Wrapper2 {
margin-top: 10%;
color: #093;
}
#TextAbout {
font-size: 10px;

text-align:left
color: #333;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
letter-spacing: 1px;
width: 283px;
text-decoration: none;
text-transform: lowercase;
text-align: left;
color: #333;
}

 

Comments are closed.