Formatowanie ramek

Karta pracy 2014/2015

Dokument:
http://www.plotkarka.eu/kp/formatowanieramek.html
Autor:
Radosław Kowaluk

Ćwiczenia

Wstęp

Skopiuj plik formatowanieramek.zip i rozpakuj go do folderu z plikami WWW.

Zapoznaj się z zawartością i źródłami plików.

Style CSS w pliku1 (relacja2, adres pliku3), klasa elementu4

W elemencie head i znaczniku body w plikach stron witryny (stronaa.html, stronab.html, stronac.html) dodaj kod:

  <title>Strona A</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" href="style.css">
 </head>
 <body class="strona">

W pliku spis.html element link jak w stronach, a w znaczniku body w dodaj kod:

 <body class="spis">

Pik z definicjami CSS

Utwórz pusty plik o nazwie style.css w swoim folderze (kodowanie UTF-8).

Właściwości stron witryny, selektor klasy5

W pliku style.css dodaj kod. Zapisz zmiany i otwórz w przeglądarce pliki witryny.

body.strona {
background: rgb(204,204,204);
width: 610px; 
margin: 10px auto;
}

Właściwości ramki - wielkość i obramowanie

W pliku style.css dodaj kod:

iframe {
width: 610px; 
height: 50px;
border: none;
}

Zapisz zmiany i otwórz w przeglądarce pliki witryny.

Właściwości strony w ramce

W pliku style.css dodaj kod.

.spis {
background: rgb(255,255,255);
width: 600px;
margin: 5px;
}

Zapisz zmiany i otwórz w przeglądarce pliki witryny.

Właściwości hiperłączy

W pliku style.css dodaj kod.

a {
font: 13px Georgia;
text-decoration: none;
}
a:link {
color: rgb(51,51,51);
}
a:visited {
color: rgb(104,104,104);
}
a:hover {
color: rgb(0,0,0);
text-decoration: underline;
}
a:active {
color: rgb(153,153,153);
}

Zapisz zmiany i otwórz w przeglądarce pliki witryny.

Właściwości akapitów i nagłówków

W pliku style.css dodaj kod.

h1 {
font: 34px Georgia;
}
p {
font: 13px Georgia;
text-align: justify;
}

Zapisz zmiany i otwórz w przeglądarce pliki witryny.

Sprawdzanie poprawność CSS

W przeglądarce internetowej wpisz adres jigsaw.w3.org/css-validator

Wybierz zakładkę poprzez załadowanie pliku

Za pomocą przycisku Przeglądaj... otwórz plik

Naciśnij przycisk Sprawdź

Wgrywanie plików na serwer

Umieść pliki witryny na serwerze.

  1. Element <link> - definiuje styl CSS strony umieszczony w osobnym pliku. W starszych stronach internetowych spotykamy kod z atrybutem type, definiujący typ zawartości pliku, w postaci:
    <link type="text/css" rel="stylesheet" href="style.css">
    W HTML5 można ten atrybut pominąć.
  2. Atrybut rel - definiuje związek plików strony i stylu CSS
  3. Atrybut href - definiuje nazwę pliku ze stylami CSS stron
  4. Atrybut class - definiuje klasę elementu.
  5. Selektor klasy - określa właściwości elementów posiadających atrybut o wartości danej klasy.

Formatowanie witryny

Warstwy i ramki

W swoim folderze roboczym, w katalogu szablony, utwórz katalog szablonwitryny a w nim dokument szablonwitryny.html (wykorzystaj plik szablonstrony.htm, metodę kopiuj-wklej) zawierający następujący kod:

<!DOCTYPE html>
<html>
 <head>
  <title>Formatowanie witryny</title>
  <meta charset="utf-8"/>
 </head>
 <body>
  <iframe src="naglowek.html" id="naglowekwitryny">
  <a href="naglowek.html">naglowek</a>
  </iframe>
  <iframe src="menu.html" id="menuwitryny">
  <a href="menu.html">menu</a>
  </iframe>
  <div id="naglowek"> Nagłówek strony </div>
  <div id="tresc"> Treść strony </div>
  <div id="informacje"> Informacje dodatkowe </div>
  <div id="stopka"> Stopka strony </div>
  <iframe src="stopka.html" id="stopkawitryny">
  <a href="stopka.html">stopka</a>
  </iframe>
 </body>
</html>

Formatowanie witryny

Utwórz w katalogu szablonwitryny pusty plik style.css z kodowaniem UTF-8. W źródle pliku szablonwitryny.html, w elemencie head dopisz kod. Zapisz dokument i otwórz go w przeglądarce.

  <title>Szablon witryny</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" href="style.css">
 </head>

Definiowanie ramek

W folderze szablonwitryny utwórz dokument naglowek.html (wykorzystaj plik szablonstrony.html, metodę kopiuj-wklej) zawierający następujący kod:

<!DOCTYPE html>
<html>
 <head>
  <title>Nagłówek witryny</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" href="style.css">
 </head>
 <body id="bodynaglowek">
  Nagłówek witryny
 </body>
</html>

W folderze szablonwitryny utwórz dokumenty menu.html (wykorzystaj plik menu.html, metodę kopiuj-wklej) popraw odpowiednio kod:

  <title>Menu nawigacyjne witryny</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" href="style.css">
 </head>
 <body id="bodymenu">
  Menu nawigacyjne witryny
 </body>

W folderze szablonwitryny utwórz dokumenty stopka.html (wykorzystaj plik menu.html, metodę kopiuj-wklej) popraw odpowiednio kod:

  <title>Stopka witryny</title>
  <link type="text/css"
  rel="stylesheet"  href="style.css">
 </head>
 <body id="bodystopka">
  Stopka witryny
 </body>

Właściwości stron

W pliku style.css z folderu szblon2 popraw i dodaj kod:

body {
	background: rgb(204,204,204);
	width: 987px; 
	margin: 10px auto;
}
iframe {
	border: none;	
}
#naglowekwitryny {
	width: 100%;
	height: 50px;
}
#menuwitryny {
	width: 100%;
	height: 100px;
}
#naglowek {
	background: rgb(204,204,204);
}
#tresc {
	background: rgb(255,255,255);
}
#informacje {
	display: none;
}
#stopka {
	background: rgb(0,0,0);
}
#stopkawitryny {
	width: 100%;
	height: 25px;
}
#bodynaglowek, #bodymenu, #bodystopka {
	overflow: hidden;
}
#bodynaglowek {
	background: rgb(51,51,51);
}
#bodymenu {
	background: rgb(102,102,102);
}
#bodystopka {
	background:  rgb(153,153,153);
}

Zapisz zmiany i otwórz w przeglądarce plik szablonwitryny.html z folderu szablonwitryny.

Wgrywanie plików na serwer

Umieść pliki i foldery na serwerze.