docCSS i XHTML – Ćwiczenie 3
download 
Reklamacja Transkrypt
CSS i XHTML – Ćwiczenie 3
[CSS I XHTML – ĆWICZENIE 3] dr Artur Bartoszewski
Szerokość strony
I.
Ustawienie szerokości i wycentrowanie całej strony (bez tabel)
<body style="background-color: #c4c59c;
min-width: 800px;
max-width: 800px;
margin: 0 auto;">
Tworzenie zakładek za pomocą listy odnośników
II.
Usunięcie punktprów
HTML:
<ul>
<li>Odnośnik 1</li>
<li>Odnośnik 2</li>
<li>Odnośnik 3</li>
</ul>
CSS:
ul{list-style-type: none;}
Lista pozioma
CSS:
ul {list-style-type: none;}
li {display: inline;}
1|Strona
[CSS I XHTML – ĆWICZENIE 3] dr Artur Bartoszewski
Formatowanie wyglądu elementu listy
margin-top:
margin-left:
margin-right:
margin-bottom:
float:
border:
background-color:
color:
padding:
Tworzenie listy odnośników
HTML:
<ul class="menu">
<li class="aktywna"><a href='#'>WSTĘP</a></li>
<li class="pasywna"><a href="strona_1.html" target="_self" >ĆWICZENIA</a></li>
<li class="pasywna"><a href="strona_2.html" target="_self" >CIEKAWE
STRONY</a></li>
</ul>
CSS:
ul.menu {list-style-type: none;}
li.aktywna{
display: inline;
background-color:
#808040;}
li.pasywna {
display: inline;
background-color: #804040;}
2|Strona
[CSS I XHTML – ĆWICZENIE 3] dr Artur Bartoszewski
li.aktywna a:link, li.aktywna a:visited {
color: #f4dc79;
text-decoration: none;}
li.pasywna a:link, li.pasywna a:visited{
color: #f4dc79;
text-decoration: none;}
li.pasywna a:hover {
color: #ff8000;
text-decoration: none;}
Zadanie 3.1: Zakładki [its]1
Przedstawiony tu serwis dotyczy programu AudaCity (program open source do wielościeżkowego montażu dźwięku.).
Serwis ma zawierać:
a)
b)
c)
d)
1
Stronę główną – informacje ogólne i logo programu;
Ćwiczenia (w trakcie zajęć wykonujemy tylko szkielet strony i nawigację);
Galerię stron związanych z programem (w trakcie zajęć wykonujemy tylko szkielet strony i nawigację).
System nawigacji - strona zawiera potrójny system nawigacji:
wykonane przy pomocy odpowiednio sformatowanych odnośników zakładki;
ścieżkę powrotu (pojęcie znane z poprzednich ćwiczeń);
Mapę strony (niewielkie odnośniki na dole strony).
Informacja dla studentów z indywidualnym tokiem studiów: W ćwiczeniu tym wykonać należy działający system zakładek. Osiągnięcie wygładu strony
dokładnie takiego jak pokazano na rysunku nie jest konieczne. Mowa tu głownie o kolorach, rozmiarze oraz położeniu obiektów i tekstu, marginesach itp.
3|Strona
[CSS I XHTML – ĆWICZENIE 3] dr Artur Bartoszewski
4|Strona
[CSS I XHTML – ĆWICZENIE 3] dr Artur Bartoszewski
Zadanie 3.2: Tworzymy niewielki serwis WWW – c.d. zadania 3.1
Należy wypełnić treścią obie podstrony:
a) Strona „Ćwiczenia” – wstawić opisy ćwiczenia zawarty w dokumencie dołączonym do instrukcji – należy w
miarę możliwości zachować układ dokumentu (za wyjątkiem podziału na strony).
UWAGA: grafikę pobrać można z dokumentu PDF poprzez schowek - do tego potrzebny będzie program do
zarządzania lub edycji grafiki np. Irfan View, jednak dla wygody dołączyłem rysunki w osobnych plikach.
b) Galerię stron związanych z programem - wykonać wg własnego pomysłu .
5|Strona
