Projekt portalu WWW Akademii Sztuk Pięknych w Katowicach manual
Podział ogólny: 1. Pionowy: a. Szerokość -- menu boczne 170 px b. Szerokość -- pole zmienne 690 px c. Szerokość -- bannery 164 px 2. Poziomy: a. Szerokość -- panel górny (Logo, nazwa strony) 120 px b. Szerokość -- panel menu górne: 105 px
170 px 120 px
164 px
690 px
banner flash
105 px 22 px 33 px
50 px
50 px
Nawigacja: MENU GŁÓWNE:
Przyciski wielkość: 16 px font: Calibri kolor: #990066
2 px
1 px
1 px
2 px 1 px
Przycisk pod myszą: kolor tekstu: #ffffff Kolor podlewu: #990066
Link po wybraniu: Kolor: #990066
Nawigacja: MENU BOCZNE: Przyciski wielkość: 14 px font: Calibri kolor: #990066 Przycisk pod myszą: kolor tekstu: #ffffff Kolor podlewu: #990066
Przycisk po wyborze: Kolor: #990066 bold
wygląd przycisku pod myszą:
wygląd przycisku po wyborze:
2 px
10 px
2 px 2 px
Nawigacja:
30 px
30 px 23 px 21 px 15 px 30 px 30 px 30 px
MENU BOCZNE: interlinia (podane wartości według parametrów programu Adobe Photoshop, np. 30 px oznacza interlinię)
Kalendarz boczny: interlinia:
MENU BOCZNE: Typografia: NAGŁÓWEK: wielkość: 18 px font: Calibri, bold kolor: #81c11f data: wielkość: 14 px font: Calibri, bold kolor: #81c11f
tytuł: wielkość: 14 px font: Calibri, bold kolor: #4e5853 opis: wielkość: 11 px font: Verdana kolor: #4e5853
130 px 8 px 10 px
24 px 18 px 14 px
10 px 10 px
4 px
Interakcja: pole prostokąta po najechaniu myszą
10 px 10 px
10 px
4 px
35 px 20 px
105 px
Bannery szerokość: 105 px wysokość: proporcjopnalnie do szerokości
30 px
30 px
30 px
30 px
Typografia: Nagłówki: Calibri, bold kolor: # 4e5853
tekst ciągły: verdana 11 px, interlinia 18 px kolor: # 4e5853
H1 Nagłówek główny: Wielkość: 30 px Kolor: #000000 Interlinia pomiędzy nagłówkiem a tekstem: 30 px
H1
H1 Nagłówek główny + podtytuł/linki: Interlinia pomiędzy nagłówkiem a podtytułem/ linkami: 30 px Interlinia pomiędzy podtytułem/linkami a tekstem: 36 px
H1
H2 Nagłówek: Wielkość: 16 px Kolor: #00000 Interlinia pomiędzy nagłówkiem a tekstem: 30 pkt
H2
H2 Nagłówek + podtytuł/ linki: Wielkość: 16 px Kolor: #00000 interlinia pomiędzy tytułem a podtytułem: 24 px Interlinia pomiędzy podtytułem a tekstem: 36 pkt
p
Typografia: H3 Nagłówek: Wielkość: 14 px bold, Kapitaliki Kolor: #00000 Interlinia pomiędzy nagłówkiem a tekstem: 24 pkt
H1 Nagłówek główny + nagłówek H3: interlinia: 30 px
H3
H1+H3
Typografia: Listy: font: verdana
Lista 1 - linki: Interlinia: 20 px wyróżnienie: bold dzielenie informacji: | Wielkość fontu: 11 px
lista 2 - informacje: wyróżnienie: bold dzielenie informacji: | adres e-mail, www: #990066 Interlinia: 24 px Wielkość: 11 px linia: 1 px, #c9c6c0
lista 3 - lata: podział co 10 lat Interlinia: 24 px Wielkość: 11 px
Tabele: Tabela prosta font: verdana wielkość: 10 px interlinia (wewnątrz komórki): 12px Table row header: bold kolor: # 4e5853
2 px 1 px 1 px 1 px
Table header (naprzemiennie): bold kolor: #990066 i #00000 Table data (naprzemiennie): kolor: #990066 i #00000 linia: 1 px i 2 px kolor: #c9c6c0
2 px
20 px
20 px
20 px 6 px
6 px 15 px
7 px 7 px 7 px 7 px 7 px 7 px
Tabele: Tabela plan studiów każdy rok opisany jest osobną tabelą
25 px
font: verdana wielkość: 10 px interlinia (wewnątrz komórki): 12px Table row header: bold kolor: # 4e5853 Table header (naprzemiennie): bold kolor: #990066 i #00000
40 px
Table data (naprzemiennie): kolor: #990066 i #00000 linia: 1 px i 2 px kolor: #c9c6c0 Nagłówki - tytuły tabel Calibrii bold kapitaliki wielkość: 18 px kolor: #00000
40 px
Tabele: Tabela rozkład zajęć kolorystyka tła: #e0e0e0 #babfb6 #8b8e88 Typografia: Rok: Calibrii, bold, 16 px godziny: Verdana, 10 px, #00000, interlinia: 14 px dni tygodnia: Calibrii, 14 px, bold, #ffffff napis wyśrodkowany w stosunku do komórki. nazwa przedmiotu: Verdana, bold, 11 px, interlinia: 14 px, #00000 prowadzący: Verdana, 10 px, interlinia 14 px, #00000, interlinia pomiędzy nazwą przedmiotu a prowadzącym: 18 px interakcja: po najechaniu kursorem na pole z nazwą przedmiotu pole to oraz pole z odpowiednią godziną i dniem zostaje podświetlone na kolor: #990066
Linki: Oznaczenie linków: Lista Plus >>
Link w tekście Kolor: #990066
Link na końcu tekstu Kolor: #990066 Plus >>
Link pod kursorem: kolor tekstu: #ffffff Kolor podlewu: #990066 Link zaznaczony tabulatorem: kolor tekstu: #990066 Kolor ramki: #990066 Link zaznaczony tabulatorem i kursorem: kolor tekstu: #990066 Kolor ramki: #990066 Link podczas ładowania strony: kolor tekstu: #990066 Kolor linii: #990066 Link odwiedzony: Kolor: #CC6699
Link zewnętrzny Link zewnętrzny, strona angielska
Paginacja
oznaczenie wybranej strony: kolor tekstu: #ffffff Kolor podlewu: #990066
Wiadomości
Rodzaje podstron: UKŁAD 1a Główne informacje (A) + kolumna tekstu: 210 px, ilość znaków: 167 (bez spacji, bez tytułu) + zdjęcie 100x200 px (stała wartość) + link - czytaj całość + linki do pokrewnych stron informacje (B) + kolumna tekstu: 510 px, ilość znaków: 254 (bez spacji, bez tytułu) + zdjęcie 100x126 px (stała wartość) + link - czytaj całość + linki do pokrewnych stron
(A)
(B)
20 px
20 px
20 px
30 px
Rodzaje podstron: UKŁAD 1a Główne informacje (B) + kolumna tekstu: 510 px, ilość znaków: 254 (bez spacji, bez tytułu) + zdjęcie 100x126 px (stała wartość) + link - czytaj całość + linki do pokrewnych stron
(B)
20 px
20 px
Rodzaje podstron:
(A)
UKŁAD 2 Podział na dwie kolumny a. Kolumna tekstu -- szerokość 390 b. fotografia -- szerokość 260 c. odległość między tekstem a fotografią - 40 px
40 px
Układ 2 (A) rozwinięcie news’u: pod zdjęciem znajduje się przycisk galeria - jeśli do danego tekstu przypisanych jest więcej zdjęć
Układ 2 (B) W prawej kolumnie znajduje się fotografia/ilustracja + dodatkowe informacje
(C)
Rodzaje podstron: UKŁAD 2(C) Podział na dwie kolumny a. Kolumna tekstu -- szerokość 390 b. fotografia -- szerokość 260 c. odległość między tekstem a fotografią - 40 px d. możliwość umieszczania fotografii na szerokość obu kolumn
Rodzaje podstron: UKŁAD 3 Galeria a. miniaturka - 80 x 100 px b. odległość między zdjęciami: 20 px c. 6 miniaturek w jednej linii
80 px 20 px
20 px
Rodzaje podstron: UKŁAD 4 lista 1 - szerokość 540 px
Rodzaje podstron: UKŁAD 5 lista 2 -- podział na 2 kolumny - szerokość kolumny 330 px - szerokość kolumny 30 px
330 px 30 px
330 px
Rodzaje podstron: UKŁAD 6 lista 3a -- podział na 4 kolumny
a. Szerokość kolumn -- 150 px b. Odleglość pomiędzy kolumnami -- 30 px
lista 3b -- podział na 4 kolumny lista alfabetyczna a. Szerokość kolumn -- 150 px
b. Odleglość pomiędzy kolumnami -- 30 px
I kolumna
A B C D E F
II kolumna G H I J K L
III kolumna Ł M N O P R
IV kolumna S T U W Z Ż
150 px
30 px
150 px 30 px
150 px
30 px
150 px
Rodzaje podstron: UKŁAD 7 lista -- tekst + ilustracja + kolumna tekstu: 390 px + zdjęcie 260 x175 px (stała wartość) + link - czytaj całość
18 px
30 px
30 px
Rodzaje podstron: UKŁAD 8 KALENDARZ - linki w kalendarzu przenoszą do odpowiednich postów z aktualności (cały post) a. Kolumna tekstu -- szerokość 470 b. zdjęcia/ilustracje -- 100 x 176 px (stała wielkość) c. odległość między tekstem a zdjęciem - 120 px
1. Nagłówek H1 -- miesiąc 2. Dni podczas, których nie występują żadne wydarzenia a. wielkość: 11 px b. kolor: # 4e5853 3. Data wydarzenia a. wielkość: 11 px b. kolor: #81c11f c. bold 4. Nazwa wydarzenia (H2): wcięcie 15 px 6. opis wydarzenia (tekst ciągły) Interlinie: data - tytuł: 28 px tytuł - potytuł: 24 px podtytuł - teskt: 24 px
Rodzaje podstron:
(A)
UKŁAD 9 PROFIL (A) Dwie kolumny:
30 px
a.Imię i nazwisko, dodatkowe informacje, miniaturki prac (380 px) b. Opis (280 px)
(B) Dwie kolumny:
380 px
a.Imię i nazwisko, dodatkowe informacje, zdjęcie osoby, kontakt, miniaturki prac (380 px) b. Opis (280 px)
30 px
280 px
30 px
20 px
380 px
30 px
280 px
Rodzaje podstron: UKŁAD 10 PRACOWNIA Dwie kolumny:
a. Opis pracowni (nazwa, pracownicy, opis, galeria), szerokość - 380 px b. Fotografia (260 px)
50 px