Jak zrobić stronę www? cz4.

jak zrobić stronę www

Jak zrobić stronę www? cz4.

Kodowanie contentu – czyli jak zrobić  stronę www ?

Pierwszym co należy zrobić, żeby nasza treść się poprawnie wyświetlała, to wyczyszczenie floatu po MENU.
Musimy w tym celu użyć diva o klasie clear (nazwa klasy jest oczywiście umowna i dowolna).
W HTMLu, w miejscu gdzie skończyliśmy kod (z nawigacją)


od nowe linii piszemy:

 <div class="clear"></div>
Teraz odpowiedni dla tego diva kod CSS:

 .clear
 {
    clear:both;
 }
Aktualny kod HTML powinien wyglądać następująco:
 <body>
    <div class="pos-center">
       <header>
          <h1>WALENTYNKI 2016</h1>
       </header>
    </div>
   <div class="pos-center">
     <nav>
       <div class="pos-center">
         <ul>
            <li><a href="#">Kartki na walentynki</a></li>
            <li><a href="#">O co chodzi?</a></li>
            <li><a href="#">Prezenty</a></li>
         </ul>
       </div>
     </nav>
   </div>
  <div class="clear"></div>
  <div id="content">
  </div>
  <footer>
  </footer>
 </body>

Dalszą część wpiszemy między <div id=”content”> a jego zamknięciem.
Ten div nie ma klasy, a  ID –  może zostać użyty na stronie tylko raz.
Zróbmy w contencie div z kartkami.
Proponuję diva – o id=cards.
Następnie mamy nazwę sekcji „kartki” – dajmy nagłówek H2.

Kodu HTML:
 <div class="clear"></div>
 <div id="content">
    <div id="cards">
       <h2>Kartki</h2>
    </div>
 </div>

Odświeżmy stronę (F5).
Sekcja kartki się wyświetla, ale jest przyklejona do lewej strony okna przeglądarki nie wygląda to dobrze.
Wyśrodkujmy kartki divem o klasie .pos-center zamykając w nim całego diva #content.

Kod po modyfikacji:
 <div class="clear"></div>
 <div class="pos-center">
   <div id="content">
     <div id="cards">
        <h2>Kartki</h2>
     </div>
   </div>
 </div>

Teraz pod H2 umieścimy kartki.
Proponuję każdą zamknąć w divie o klasie card.
Gdy mamy diva – umieszczamy w nim kartki,

wstawiając tag img:
 <img src="" alt="" />

W src podajemy ścieżkę, w której znajduje się obrazek.
Czyli katalog img po nazwie folderu, stawiamy / podajemy nazwę obrazka razem z rozszerzeniem.
Tekst alternatywny musimy uzupełnić, żeby nie było błędu.

Kod:
 <div class="card">
    <img src="img/one.jpg" alt="first card" />
 </div>

Mamy 3 obrazki, skopiujmy i wklejmy kod 3 razy
zmieniając nazwę pliku i alt w drugim i w trzecim:

 <div class="clear"></div>
 <div class="pos-center">
   <div id="content">
      <div id="cards">
       <h2>Kartki</h2>
          <div class="card">
             <img src="img/one.jpg" alt="first card" />
          </div>
          <div class="card">
             <img src="img/two.jpg" alt="second card" />
          </div>
          <div class="card">
             <img src="img/three.jpg" alt="third card" />
          </div>
       </div>
     </div>
 </div>
CSS dla contentu:
 #content
 {
    background-image: url("img/bg.jpg");
    height:100%;
    width: 100%;
    box-shadow: -1px 8px 26px -8px #4d4d4d;
 }

Teraz w CSS nie stawiamy kropki.
Dla id zrobimy znak # i nazwa selektora.
Wysokość i szerokość – ustawiamy na 100%.
background-image: – to obrazek jako tło.
Ustawiamy je jak w img w HTMLu.
box-shadow: – podobna właściwość do text-shadow: – nadaje cień elementom, nie będącym tekstem.
Zasady parametrów są takie same.
Wartością minusową przesuwane są w drugą stronę.

Pozostał do wystylizowania nagłówek H2 i kartki.
Zacznijmy od #content h2:

  • font-size: 2.500em; – rozmiar tekstu – 40px.
  • color: #4d4d4d; – kolor tekstu.
  • text-align: center; – wyśrodkowanie tekstu.
  • padding: 10px; – margines wewnętrzny z każdej strony po 10px.

Po zapisaniu w Notepadzie++ (ctrl+S) i odświeżeniu w Firefox (F5)
Widzimy, że jest prawie dobrze, ale czcionka jest grubsza od tej w projekcie.
Dzieję się tak dlatego, że nagłówki mają domyślnie ustawioną grubość tekstu.
Żeby wyłączyć pogrubienie wpisujemy font-weight: normal;

Kod #content h2:
 #content h2
 {
    font-size: 2.500em;
    color: #4d4d4d;
    text-align: center;
    padding: 10px;
    font-weight: normal;
 }
Style CSS dla kartek. 
Trzeba je wyśrodkować divem .pos-center.
Wstawiamy go między znacznik H2, a div z klasą card:

 <div id="content">
    <div id="cards">
       <h2>Kartki</h2>
         <div class="pos-center">
           <div class="card">
              <img src="img/one.jpg" alt="first card" />
           </div>
           <div class="card">
              <img src="img/two.jpg" alt="second card" />
           </div>
           <div class="card">
              <img src="img/three.jpg" alt="third card" />
           </div>
         </div>
    </div>
 </div>

Zapiszmy (ctrl+S) i zobaczmy (F5) zmiany.

 Style dla kartek:
 #cards
 {
    width: 100%;
    height: 100%;
 }
 #cards div.card
 {
    margin:1%;
    float: left;
    box-shadow: -1px 8px 26px -8px #4d4d4d;
 }

Sprawdźmy jak wygląda strona.
Zapisaliśmy, odświeżamy i coś się rozjechało.
Dlaczego?
Użyliśmy float:left; dla diva .card, a nie wyczyściliśmy floatowania.
Zróbmy to:
Tam, gdzie kończy się kod HTML dopiszmy w nowej linii:

<div class="clear"></div>

To powinno załatwić sprawę : )
Teraz efekt hover.
Czyli efekt jakby powiększenia lupką po najechaniu kursorem:

 #cards div.card:hover
 {
    transform:scale(1.2,1.2);
    cursor: zoom-in;
 }

transform:scale(1.2,1.2); – do animacji w CSS3.
Wartość scale – żeby coś powiększyć.
Wartości w nawiasie mówią o ile ma być powiększone (1,1) – to wartość bez powiększenia.
My daliśmy (1.2,1.2) więc powiększyliśmy wysokość i szerokość o 20%.
cursor: zoom-in; – po najechaniu kursor myszy ma się zmienić na taką lupkę ze znakiem +.
Jakby było np. cursor:pointer; – zmieniłby się na łapkę, jak przy linkach.

Dopiszmy pozostałe dwie sekcje treści strony:
 <section id="info">
    <h2>O co chodzi?</h2>
    <p></p>
 </section>

Skąd wziąć przykładowy tekst?
Jest cała masa generatorów, które generują przykładowy tekst na stronę, żeby ją czymś wypełnić.
Nikomu by się chyba nie chciało pisać tekst, tekst, na całej stronie.
Polecam skorzystać z Lorem Ipsum generatora.
Wygenerować sobie akapit tekstu, lub kilka akapitów i wstawić go między znacznik <p>.

Zapiszmy (ctrl+S) i zobaczmy zmiany (F5).

 Została ostatnia sekcja prezenty:
 <section id="prezenty">
    <h2>Prezenty</h2>
    <p> O to lista najczęściej i najchętniej wybieranych upominków 
        dla swojej drugiej połówki.</p>
     <ul>
        <li>dolor sit amet, consectetur adipiscing elit. In egestas suscipit </li>
        <li>dolor sit amet, consectetur adipiscing elit. In egestas suscipit </li>
        <li>dolor sit amet, consectetur adipiscing elit. In egestas suscipit </li>
        <li>dolor sit amet, consectetur adipiscing elit. In egestas suscipit </li>
        <li>dolor sit amet, consectetur adipiscing elit. In egestas suscipit </li>
        <li>dolor sit amet, consectetur adipiscing elit. In egestas suscipit </li>
        <li>dolor sit amet, consectetur adipiscing elit. In egestas suscipit </li>
    </ul>
 </section>
CSS dla oby sekcji:
 #info p, #prezenty p
 {
    font-size:1.000em;
    padding:2px 30px 30px;
 }
 #prezenty ul
 {
    padding:10px 60px 50px;
 }
 #prezenty ul li
 {
    list-style-image: url("img/strzalka.png");
 }

Jeśli chcemy nadać style CSS dla więcej niż jednego selektora jednocześnie oddzielamy je przecinkiem.

  • font-size: – 16px czyli 1em.
  • padding: 2px 30px 30px; – margines wewnętrzny z góry 2px, z dołu 30px, lewo i prawo też 30px.
  • podobnie z paddingiem dla listy tylko inne wartości.
  • list-style-image: url(„img/strzalka.png”); – zamiast czarnych kropek elementy listy mają mieć obrazek.
    W naszym przypadku strzałeczkę.

Przed Tobą ostatnia część kursu jak zrobić stronę www.
Jak zrobić stronę www? cz5. Zapraszam.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *