21. Tag HTML 07.11.2014 - KLAUSUR

HTML/CSS
Ralf Herbst



Photoshop
im Ordner Web-Projekte einen Ordner "Photoshop" anlegen, aus Avatar den Ordner "galerie" kopieren und im Ordner Photoshop einfügen, den Unterorder "notes" löschen, neuen Ordner "ergebnisse" anlegen.
Photoshop öffnen: Ansicht - Aktion: neuer Satz, neue Aktion benennen "Thumbs Avatar 210px breit" aufzeichnen - größe 210px eingebenQualität, 2fach, für web speichern
Stapelbearbeitung




K L A U S U R  (60 Min.) mit dem Ergebnis: Note 1


 fertigprogrammieren des Projektes Alpensport Responsiv der "main.css"-Datei für Tablet und PC:
 
 /*-----------------------------Tablet-----------------------------------*/
/* Layout für Tablet-PCs: 481 bis 768px. Erbt Stile vom: Layout für Mobilgeräte. */
/*dies ist ein Mediaquerie*/
@media only screen and (min-width: 481px) {
#container {width: 90.675%; padding: 0 1.625%;}
#header { height: 100px; margin: 5px 0 10px 0; background-size: cover;  -moz-background-size: cover; -webkit-background-size: cover; border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0; }
#logo { float: left; z-index: 1000; box-shadow: 0 1px 2px rgba(0,0,0,.5); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5); transform: rotate(-9deg) scale(1, 1.5) skew(-15deg, -5deg); -moz-transform: rotate(-9deg) scale(1, 1.5) skew(-15deg, -5deg);  -webkit-transform: rotate(-9deg) scale(1, 1.5) skew(-15deg, -5deg); width: auto; margin: 50px 0 0 4px; }
#logo h1 { font-size: 110%; }
#logo, figcaption { font-size: 80%;  padding: 0 5px 2px; }
#logo, #navi a {
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.6) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.25)), color-stop(100%,rgba(0,0,0,0.6))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.6) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.6) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.6) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.6) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#99000000',GradientType=0 ); /* IE6-9 */ }
#logo:hover, #navi a:hover {
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.9) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.9))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.9) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.9) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.9) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.9) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#e6000000',GradientType=0 ); /* IE6-9 */ }
#navi { clear: both; float: right; width: auto; display: block;  margin: -25px 0 0; }
#navi ul li { float: left;  text-align: center;  margin: 3px 0 0 5px;}
#navi ul li a {width: 70px; padding: 10px 0;}
#content { clear: both; }
#content1, #content2 { float: left; width: 46.7179%; padding: 2% 1% 1% 1%; }
#content1 { margin-right: 2.5641%; }
#content3 {clear: both; }
article h2:first-letter {font-size: 200%; vertical-align: middle; }
article p:first-letter { font-size: 130%; }
article p:first-line {  font-weight: bold; }
#footer { border-radius: 0 0 4px 4px; margin-bottom: 2%; }
#footer h2, h3 { font-size: 85%;}
#footer p { font-size: 75%; }
} /* End of Tablet*/

/*-----------------------------PC (Desktop)-----------------------------------*/
/* Desktoplayout: 769 bis maximal 1232px.  Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
@media only screen and (min-width: 800px) {
#container { width: 88.5%; max-width: 1232px;padding: 0 0.75%; }
#header { margin: 20px 0 10px 0;  width: 100%; height: 200px; display: block;}
#logo {margin: 90px 0 0 4px; }
#logo h1 { font-size: 220%; }
#logo, figcaption {font-size: 100%; padding: 0 7px 4px; }
#navi { margin: -50px 0 0; }
#navi ul li a { width: 150px; padding: 25px 0; }
#content1, #content2 { clear: none; float: left; margin-right: 1.6949%;  width: 30.2033%; padding: 2.5% 1%; display: block; }
#content3{ clear: none; float: left; margin-right: 0; width: 30.2033%; padding: 2.5% 1%; display: block;}
#footer { border-radius: 0 0 7px 7px;}
} /* End of PC*/