Hilfe HTML/CSS

Qweqweqwe · 7 September 2015

Sehr geehrte Damen und Herren,
ich besuche dieses Jahr die Fachoberschule für Technik, Praktikum bei einer IT Firma.

Nun habe ich einige HTML/CSS Grundkenntnisse erlernt, und bereits eine Aufgabe bekommen.
Ich soll eine Website mit Vorlage (http://i.imgur.com/XDrCrUi.jpg) nachbauen zum üben, jedoch habe ich keine Ahnung wie ich Anfangen soll genau, bzw mit was ich genau starten soll.

Habe auch Photoshop Grundkenntnisse erhalten, um die Grafiken aus dem Bild zu übernehmen.
Natürlich möchte ich es selber lernen, aber ich bräuchte einen Anfang bzw ein Beispiel wie ich zu starten habe, da es meine "erste" eigene Website ist,
vorher nur mit kleinen Übungen gearbeitet bzw. kleine eigene Ideen verwirklicht.

Mfg.
David

MrMurphy · 7 September 2015

Hallo

so kann das nicht funktionieren. Webseiten werden heutzutage nicht mehr nach Bildern als Vorlage erstellt. Das Vorgehen stammt aus dem letzten Jahrtausend.

Viel wichiger ist zum Beispiel die Information, wie die Seite sich bei unterschiedlichen Fenstergrößen verhalten soll. Auf Smartphones und Tablets? Im Hoch- und im Querformat? Bei hochauflösenden Displays, zum Beispiel Retina?

Und was hat das Zerschneiden eines Bildes mit dem Erstellen einer Webseite zu tun? Großflächige Grafiken zur Gestaltung werden heutzutage nicht mehr benutzt. Und dazu braucht es kein Photoshop.

Nun habe ich einige HTML/CSS Grundkenntnisse erlernt, und bereits eine Aufgabe bekommen.

Das sagt überhaupt nichts aus. Zusammen mit

aber ich bräuchte einen Anfang

und

ein Beispiel wie ich zu starten habe

deutet es eher darauf hin, das dir die Grundkenntnisse zum Erstellen einer Seite noch fehlen.

Der Beginn ist einfach:

Du erstellst ein HTML5-Grundgerüst mit Doctype, html, head und body.

Doctype für HTML5.

html mit Sprachkennung.

Im head dann charset UTF-8, title, description und Viewport-Angabe. Zum Erstellen der Seite und für Testseiten allgemein würde ich dort auch das CSS hineinschreiben.

Das sind die Grundangaben, die jede Seite größtenteils enthalten muss und sollte, egal was sie anzeigen sollte.

Dem Bild entnehme ich drei Hauptbereiche, die als Container in den body-Bereich kommen und dann den eigentlichen Inhalt enthalten. Es gibt bestimmt noch mehr Möglichkeiten, aber ohne weitere Informationen zu dem Bild kann jeder seine Phantasie spielen lassen.

Die drei container sind header, nav und main.

In den header kommt der Text Portfolio in deinem h1- oder h2-Element sowie die beiden ausgeschittenen Bilder mit der Kaffeetasse und dem Logo. Die Kaffeetasse dabei eher als Hintergrundbild, also später per CSS. Und bei dem Logo sollte der Text als Text eingefügt werden.

In das nav kommen 4 a Elemente mit den Texten Portfolio, Team, Kared und Wir denken voraus.

In das main 5 weitere a-Elemente mit den 4 Icons (ohne ihre Rahmen) und den Texten als Text und dem Dreieck mit der Spitze nach unten. Die 4 Icons sollten auch als Hintergrundgrafiken eingebaut werden, da sie in Wirklichkeit keinen Inhalt haben.

Wobei die Icons und das Dreieck heutzutage eher als Iconfonts eingefügt werden oder, wenn etwas mehr Farbe im Spiel sein soll, als svg-Grafiken. Die würden dann in den verschiedenen Fenstergrößen nicht pixelig werden.

Der Rest dann per CSS.

Gruss

MrMurphy

jakestyler · 7 September 2015

MrMurphy schrieb:
so kann das nicht funktionieren. Webseiten werden heutzutage nicht mehr nach Bildern als Vorlage erstellt. Das Vorgehen stammt aus dem letzten Jahrtausend.

MrMurphy, so recht hast du da nicht oder aber ich habe dich falsch verstanden.
Denn nach wie vor arbeitet man noch in vielen Firmen wie folgt:

-> (Konzeption) -> Design in PS -> In CSS/HTML/JS umsetzen
Dabei gibt es meist mehrere Vorlagen, eine davon ist Desktop, eine Tablet und eine Smartphone.

Danach musst du dir natürlich überlegen wie du anfängst:

Bietet die Firma in der du arbeitest bereits eine Boilerplate (eine Art Grundgerüst vom HTML), musst du dir eine runterladen oder selbst schreiben?
Wie arbeitet ihr? Mit CSS, LESS oder SASS?
Gibt es ein allgemeines reset.css?
Fängst du mit dem CSS-Code für Smartphones (Mobile-First) oder für Desktops an?

Da gibt es noch deutlich mehr zu wissen, frag doch einfach mal nach, ob es da was gibt.
Wenn du bescheid weißt, schreib einfach nochmal hier! :)

nookie · 7 September 2015

Bevor man überhaupt einen Wireframe oder Screendesign umsetzt ("Konzeption"), geschehen noch viele andere Dinge. Dies ist aber ganz dem Unternehmen überlassen, denn jedes Unternehmen hat dahingehend einen anderen Arbeitsprozess. Hierbei sieht man aber auch deutlich das manche besser funktionieren als andere, obwohl diese einen kürzeren Prozess haben.

Qweqweqwe · 7 September 2015

Hey Freunde der Sonne!
Danke für die Tipps.

Habe mir nun ein Konzept aus header, nav und main gemacht.
Bekomme es nur noch nicht so mit dem background-image vom header hin,
da sich das Bild wiederholt.

Wir arbeiten mit CSS, muss Code selbst schreiben. Habe keine Vorlage, bis auf wie es "aussehen" soll.
Fange CSS für Desktop an.

jakestyler · 7 September 2015

Was genau soll sich da wiederholen?
Auf deinem Screenshot sehe ich jetzt nicht wirklich einen Background der sich wiederholt.

Qweqweqwe · 7 September 2015

Nein, mein Background (Die Tasse) ist sogesehen 2x zu sehen, sogar fast ein 3tes mal.
Sie wiederholt sich.

jakestyler · 7 September 2015

Also willst du nicht, dass sich der Hintergrund wiederholt?

Dazu folgendes Tutorial: http://www.w3schools.com/cssref/pr_background-repeat.asp

CSS-Code zum einfügen wäre dann:

Code:

background-repeat: no-repeat;

Qweqweqwe · 7 September 2015

jakestyler schrieb:
Also willst du nicht, dass sich der Hintergrund wiederholt?

Dazu folgendes Tutorial: http://www.w3schools.com/cssref/pr_background-repeat.asp

CSS-Code zum einfügen wäre dann:

Code:

background-repeat: no-repeat;

Vielen Dank! Stell hier richtige Anfänger Fragen, tut mir Leid.

jakestyler · 7 September 2015

Kein Problem, dafür ist das Forum ja da :)

Qweqweqwe · 7 September 2015

Okay, komme nicht weiter.
Bekomme Header nicht in richtige Größe.

http://codepen.io/anon/pen/qOdZbV

jakestyler · 7 September 2015

In der Höhe, Breite, oder wie?

Qweqweqwe · 7 September 2015

http://i.imgur.com/yvTNoVK.jpg

So schauts aus, Höhe sowie Breite stimmen nicht.
Höhe zu ändern ist keine schwierigkeit, aber irgendwie jammerts an der Breite.

jakestyler · 7 September 2015

Ich würde sagen, zentriere das Bild im Hintergrund und mach den freien Bereich farbig (in dem grau ganz an der Seite von dem Bild), dann siehts so aus wie in der Vorlage

MrMurphy · 7 September 2015

Hallo,

das hat mit aktuellem HTML / CSS auch wenig zu tun.

Der header sollte nicht so

Code:

<header>Portfolio</header>

sondern so aussehen:

Code:

<header>
   <h1>Portfolio</h1>
   <figure>
      <img src="2015_09_07_qwegwegwe_layout_nach_vorlage_02.jpg" alt="Logo von Informa">
      <figcaption>
         <span>Informa</span>
         <span>&reg;</span>
         <br>
         <span>Medienagentur</span>
      </figcaption>
   </figure>
</header>

Wobei das jpg nur das Logo von Iforma ohne den Text ist.

Das CSS dazu könnte dann so aussehen:

Code:

header {
   background-color: gainsboro;
   background-image: url(2015_09_07_qwegwegwe_layout_nach_vorlage_01.jpg);
   background-repeat: no-repeat;
   background-position: center bottom;
   background-size: contain;
   border-top: 0.4rem solid orange;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
}
header h1 {
   font-size: 2rem;
   padding: 5rem 7%;
}
header figure img {
   margin: 0 auto;
}
header figcaption {
   text-align: center;
}

Wobei im CSS das background-jpg nur die Kaffeetasse mit den Gebäuden drum herum ist.

Schriftarten, -farben und -größen müssen natürlich noch angepasst werden.

Bis hierhin würde der gesamte Quellcode so aussehen:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout nach Bild-Vorlage 02</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
   /*Grundeinstellungen*/
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
         margin: 0;
      }
      img {
         display: block;
         max-width: 100%;
      }
      a {
         color: black;
         text-decoration: none;
         display: block;
      }
   }
   /*Spezielle Einstellungen*/
   @media all {
      body {
         position: relative;
      }
      header {
         background-color: gainsboro;
         background-image: url(2015_09_07_qwegwegwe_layout_nach_vorlage_01.jpg);
         background-repeat: no-repeat;
         background-position: center bottom;
         background-size: contain;
         border-top: 0.4rem solid orange;
         display: flex;
         justify-content: space-between;
         align-items: flex-end;
      }
      header h1 {
         font-size: 2rem;
         padding: 5rem 7%;
      }
      header figure img {
         margin: 0 auto;
      }
      header figcaption {
         text-align: center;
      }
   }
   /* Vorlage zum Kopieren für Media Queries */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
<header>
   <h1>Portfolio</h1>
   <figure>
      <img src="2015_09_07_qwegwegwe_layout_nach_vorlage_02.jpg" alt="Logo von Informa">
      <figcaption>
         <span>Informa</span>
         <span>&reg;</span>
         <br>
         <span>Medienagentur</span>
      </figcaption>
   </figure>
</header>
  <nav>
  <a href="#">Portfolio</a>
  <a href="#">Team</a>
  <a href="#">Kared</a>
  <a href="#">Wir denken voraus</a>
  </nav>
  <main>
  <a href="#">Grafik &amp; Gestaltung</a>
  <a href="#">Internet</a>
  <a href="#">Druck</a>
  <a href="#">Fotografie</a>
  <a href="#"><img src="dreieckunten.jpg" alt="Weiter im Text"></a>
  </main>

</body>
</html>

Und noch die beiden bisherigen Bilder:

Die Namen müssen natürlich mit denen im Quellcode übereinstimmen.

Gruss

MrMurphy

Qweqweqwe · 7 September 2015

Vielen Dank MrMurphy,
hat mir ganz gut geholfen.
Werde Code nicht copy pasten, möchte es ja auch nebenbei selbst lernen aber somit konnte ich mir ein guten Einblick in den Code geben, danke dir!

Qweqweqwe · 8 September 2015

Hm, irgendwie hackts bei mir.

HTML Code:

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>INFORMA® Medienagentur</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>

<header>
   <h1>Portfolio</h1>
  
   
   <figure>
        <img src="Informa Logo.png" alt="Informa Logo">
        <figcaption>
            <span>Informa</span>
            <span>&reg;</span>
            <br>
            <span>Medienagentur</span>
        </figcaption>
   </figure>
</header>


<div class="content">
       
    <nav>
        <ul>
            <li><a href="Portfolio.html">Portfolio</a></li>
            <li><a href="Team.html">Team</a></li>
            <li><a href="KARED.html">KARED</a></li>
            <li><a href="Wir denken voraus.html">Wir denken voraus</a></li>
        </ul>
    </nav>
</div>   


<main>
    <a href="">Grafik & Gestaltung</a>
    <a href="">Internet</a>
    <a href="">Druck</a>
    <a href="">Fotografie</a>
</main>

</body>
</html>

CSS:

Code:

* {
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
}

header {
                    border-top: 0.4rem solid #FFA500;
                    height: 400px;
                    width: 100%;
                    background-color: #f5f5f5;
                    background-image: url(tasse.png);
                    background-repeat: no-repeat;
                    background-position: center;
               
                   
}

h1 {
                    font-size: 60px;
                    font-family: Calibri;
                    color: #282828;
                    font-weight: lighter;
                    padding: 9rem 10%;
               
                   
}



figure {
                    padding: -3rem;
                    text-align: right;
}

header figcaption {
                    text-align: center;
                   
}

.content {
                    width: 100%;
                    height: 900px;
                    background-color: #f5f5f5;
                    position: relative;
}

nav {
                    background-color: #282828;
                    overflow: auto;
                    display: inline-block;
                    transform: rotate(90deg);
                    position: absolute;
                    top: 170px;
                    left: -175px;
                    box-shadow: 0px -5px 5px -2px #999;
}

nav ul {
                    list-style: none;
                   
}

nav ul li {
                    padding: 9px;
                    background-color: #282828;
                    float: left;
                    margin-left: 9px;
                   
}

a:link {
    color: white;
    text-decoration: none;
    }
   
a:visited {
    color: white;
    text-decoration: none;
    }
   
a:active{
    color: white;
    background-color: none;
    }

So schauts aus: http://imgur.com/lEuyb1I

DIe Nav-Leiste müsste weiter nach unten gezogen werden, jedoch weiß ich nicht wie.
Und das kleine Logo rechts oben müsste ebenfalls fast central-rechts sein, mit Schrift darunter.

Qweqweqwe · 9 September 2015

push, immer noch hilfe benötigt.

Logo + Schrift unten rechts im Header will nicht. Quellcode steht oben.

jakestyler · 9 September 2015

Guten Morgen,
Kannst du die Seite auf dem aktuellen Stand irgendwo hochladen?

- Jake

Qweqweqwe · 9 September 2015

Nur vom Design oder direkten Quellcode?

- David

Hilfe HTML/CSS

Neues Mitglied

Senior HTML'ler

Mitglied

I did it all for the nookie

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied

Senior HTML'ler

Neues Mitglied

Neues Mitglied

Neues Mitglied

Mitglied

Neues Mitglied