Page 1

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

Manual portalu internetowego - ASP Katowice  

Projekt graficzny portalu internetowego Akademii Sztuk Pięknych w Katowicach.