=Browserlink
HTML/CSS
Ralf Herbst
noch 1 Tag bis zur Klausur und wir starten erst um 10 Uhr!
und Ralf gibt Gas.............
beschreiben der pdf-Datei "Bookmarks" mit vielen Infos und links zu HTML5
Tipps:
Video2brain
Galileo Video-Training
Terrashop
FastStone Photo Resizer
Web Design 2013 downloaden für €4 oder als Heft kaufen!
Wir beginnen ein neues Projekt und programmieren auch für Handy und Tablet: Alpensport
Monitor anpassen für Größe Handy & Tablet
Menüleiste Button: Größe ändern, hinzufügen:
Handy 480x800 ok
Tablet 768x1024 ok dazu legen wir im Ordner WebProjekte die Arbeitsordner an, die wir von Ralf bekommen und im HTML-Editor ein neues Projekt und starten mit der" index.html-Datei" und legen die Pfade und alle Daten an:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="de"> = gleich die Angabe der Sprache mitgeben
<head>
<meta charset="utf-8">
<title>Alpensport</title>
<link rel="stylesheet" href="css/boilerplate.css" type="text/css">
= boilerplate = Blaupause für moderne Websites, .jpg speichern auch unter der Endung .ico <link rel="stylesheet" href="css/main.css" type="text/css">
<script src="js/respond.min.js"></script> = Skript zur Erkennung der Divices/Monitorgröße
<link type="image/x-icon" href="bilder/alpen.ico" rel="icon">
<link type="image/xicon" href="bilder/alpen.ico" rel="shortcut icon">
</head>
<body>
<div id="container"> <!--begin of container-->
<header id="header">
<figure id="logo"> <!--begin of logo-->
<a href="#nogo">
<h1>Alpensport</h1>
<figcaption>eine Alpensport-Website rund um Ramsau</figcaption>
</a></figure> <!--end of logo-->
<nav id="navi"> <!--begin of navi-->
<ul> <li><a href="#nogo">Index</a></li>
<li><a href="seiten/video.html">Video</a></li>
<li><a href="seiten/galerie.html">Galerie</a></li>
<li><a href="seiten/kontakt.html">Kontakt</a></li>
</ul> </nav> <!--end of navi-->
</header>
<section id="content"> <!--begin of section-->
<article id="content1"> <h2>Artikel 1</h2> <p>Text</p></article>
<article id="content2"> <h2>Artikel 2</h2><p>Text</p></article>
<article id="content3"> <h2>Artikel 3</h2><p>Text.</p></article>
</section> <!--end of section-->
<footer id="footer"> <!--begin of footer-->
<header>
<hgroup><h2>Kontakt</h2> <h3>Kontaktadresse</h3> </hgroup>
<p>Meine Adresse steht hier</p>
<footer> <p>Hinweis zur Adressangabe</p> </footer>
</header>
</footer> <!--end of footer-->
</div> <!--end of container-->
</body>
</html>
Golem Blaupause für moderne Websites
Elmastudio
Google Fonts rausssuchen einer neuen Schrift mit dem entsprechenden Code
dann die "main-css-Datei" anlegen:
@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Pacifico);
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0;font-size: 100%; vertical-align: baseline;}
body {background-image: url(../bilder/background.jpg); =Pfad zum Bild angeben
background-repeat: no-repeat;background-position: left top; background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;}
body, select, input, textarea {color: #444;}
h1, h2, h3, h4, h5, h6 { font-weight: bold;}
a, a:visited, a:active { color: #607890;}
a:hover { color: #036;}
= auf keinen Fall breiter als z.B. das Handy-Display deshalb alle Möglichkeiten 100% geben
img, object, embed, video { max-width: 100%;}
= IE 6 unterstützt keine maximale Breite, verwenden Sie daher eine Standardbreite von 100%
.ie6 img{ width: 100%;}
= Faustregel: man beginnt immer mit den kleinsten Gerät und arbeitet sich zum größten vor /*--------------------------- Handy ------------------------------*/
= Layout für Mobilgeräte: 480px oder weniger
#container { margin: 0 auto; width: 87.36%; padding: 0% 1.82%;}
#header { width: 100%; height: 210px; display: block; background-image: url(../bilder/header.jpg);
background-repeat: no-repeat; background-position: left top; background-size: cover; -moz-background-size: cover;
-webkit-background-size: cover;}
#logo {padding: 10px 0; width: 100%;}
#logo a { text-decoration: none;}
#logo h1 { font-size: 185%; color: #FFF; font-family: Pacifico, cursive; text-shadow: 1px 1px 5px rgba(0,0,0,.5);
-moz-text-shadow: 1px 1px 5px rgba(0,0,0,.5);
-webkit-text-shadow: 1px 1px 5px rgba(0,0,0,.5);}
#logo, figcaption { font-size: 87.5%; color: #FFF; font-family: Pacifico, cursive; font-style: italic; text-align: center; text-shadow: 1px 1px 5px rgba(0,0,0,.5);
-moz-text-shadow: 1px 1px 5px rgba(0,0,0,.5);
-webkit-text-shadow: 1px 1px 5px rgba(0,0,0,.5);}
#navi { width: 100%;}
#navi ul li a { font-size: 80%; font-weight: bold; text-decoration: underline; display: block; text-align: center; color: #FFF; padding: 10px 0; text-shadow: 1px 1px 5px rgba(0,0,0,.5); -moz
text-shadow: 1px 1px 5px rgba(0,0,0,.5);
-webkit-text-shadow: 1px 1px 5px rgba(0,0,0,.5);
background: -moz-linear-gradient(top, rgba(0,0,0,0.25) 0%, rgba(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,6))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.25) 0%,rgba(0,0,0,.6) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.25) 0%,rgba(0,0,0,.6) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.25) 0%,rgba(0,0,0,.6) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%,rgba(0,0,0,.6) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */}
#navi ul li a:hover {
background: -moz-linear-gradient(top, rgba(0,0,0,0.25) 0%, rgba(0,0,0,.9) 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,9))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.25) 0%,rgba(0,0,0,.9) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.25) 0%,rgba(0,0,0,.9) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.25) 0%,rgba(0,0,0,.9) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%,rgba(0,0,0,.9) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */}
#content { background-color: rgba(255,255,255,.7); min-heigt: 150px; overflow: auto; text-align: justify; hyphens: auto;
= hyphens = Silbentrennung; funktioniert nur, wenn im meta-Bereich <html lang="lang.de"> steht
-moz-hyphens: auto;
-webkit-hyphens: auto;
box-shadow: 5px 0 4px -4px rgba(0,0,0,.4), -5px 0 4px -4px rgba(0,0,0,.4); }
=Trick nur rechts und links Schatten
#content1, #content2, #content3 { width: 98%; padding: 2.5% 1% 2.5% 1%;}
#footer { width: 98%; padding: 1%; display: block; margin: 5px 0 30px 0;
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(64,97,164,0.25) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(64,97,164,0.25))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(64,97,164,0.25) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(64,97,164,0.25) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(64,97,164,0.25) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(64,97,164,0.25) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#404061a4',GradientType=0 ); /* IE6-9 */}
#footer h2, h3 { font-size: 80%; }
#footer p { font-size: 70%; font-weight: bold; color: #526D98;}
Schatten box-shadow
community-sitepoint box-shadow
Tipp:
softonic ietester
(beachten download benutzerdefiniert!)
Keine Kommentare:
Kommentar veröffentlichen