Projekt portalu WWWAkademii 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 px2. Poziomy: a. Szerokość -- panel górny (Logo, nazwa strony) 120 px b. Szerokość -- panel menu górne: 105 px

120 px

105 px 50 px22 px

33 px

170 px 690 px 164 px

50 px

banner flash

Nawigacja:

MENU GŁÓWNE:

Przyciskiwielkość: 16 px

font: Calibrikolor: #990066

Przycisk pod myszą:kolor tekstu: #ffffff

Kolor podlewu: #990066

Link po wybraniu:Kolor: #990066

2 px 2 px 1 px

1 px 1 px

Nawigacja:

MENU BOCZNE:

Przyciskiwielkość: 14 pxfont: Calibrikolor: #990066

Przycisk pod myszą:kolor tekstu: #ffffffKolor podlewu: #990066

Przycisk po wyborze:Kolor: #990066bold

wygląd przycisku po wyborze: wygląd przycisku pod myszą:

2 px2 px

2 px10 px

Nawigacja:

MENU BOCZNE: interlinia(podane wartości według parametrów programu Adobe Photoshop, np. 30 px oznacza interlinię)

30 px

30 px

23 px

21 px

15 px

30 px

30 px

30 px

Kalendarz boczny:

MENU BOCZNE:

Typografia:

NAGŁÓWEK:wielkość: 18 pxfont: Calibri, boldkolor: #81c11f

data:wielkość: 14 pxfont: Calibri, boldkolor: #81c11f

tytuł:wielkość: 14 pxfont: Calibri, boldkolor: #4e5853

opis:wielkość: 11 pxfont: Verdanakolor: #4e5853

10 px8 px

10 px4 px

10 px

10 px4 px

10 px

10 px

interlinia:

130 px

24 px

18 px

14 px

Interakcja: pole prostokąta po najechaniu myszą

Bannery

szerokość:105 px

wysokość:proporcjopnalnie do szerokości

105 px35 px

30 px

30 px

30 px

30 px

20 px

Typografia:

Nagłówki: Calibri, boldkolor: # 4e5853

H1 Nagłówek główny:Wielkość: 30 pxKolor: #000000Interlinia pomiędzy nagłówkiem a tekstem: 30 px

H1 Nagłówek główny + podtytuł/linki:Interlinia pomiędzy nagłówkiem a podtytułem/linkami: 30 pxInterlinia pomiędzy podtytułem/linkami a tekstem: 36 px

H2 Nagłówek: Wielkość: 16 pxKolor: #00000Interlinia pomiędzy nagłówkiem a tekstem: 30 pkt

H2 Nagłówek + podtytuł/ linki: Wielkość: 16 pxKolor: #00000interlinia pomiędzy tytułem a podtytułem: 24 pxInterlinia pomiędzy podtytułem a tekstem: 36 pkt

H1

H2

H1p

tekst ciągły: verdana 11 px, interlinia 18 pxkolor: # 4e5853

Typografia:

H3 Nagłówek: Wielkość: 14 pxbold, KapitalikiKolor: #00000Interlinia pomiędzy nagłówkiem a tekstem: 24 pkt

H1 Nagłówek główny + nagłówek H3:interlinia: 30 px

H1+H3

H3

Typografia:

Listy: font: verdana

Lista 1 - linki:Interlinia: 20 pxwyróżnienie: bolddzielenie informacji: |Wielkość fontu: 11 px

lista 2 - informacje:wyróżnienie: bolddzielenie informacji: |adres e-mail, www: #990066Interlinia: 24 pxWielkość: 11 pxlinia: 1 px, #c9c6c0

lista 3 - lata:podział co 10 latInterlinia: 24 pxWielkość: 11 px

Tabele:

Tabela prosta

font: verdanawielkość: 10 pxinterlinia (wewnątrz komórki): 12px

Table row header: boldkolor: # 4e5853

Table header (naprzemiennie): boldkolor: #990066 i #00000

Table data (naprzemiennie): kolor: #990066 i #00000

linia: 1 px i 2 pxkolor: #c9c6c0

2 px

1 px

1 px

1 px

7 px7 px

7 px7 px

7 px7 px

2 px 20 px 20 px 20 px 6 px 6 px

15 px

Tabele:

Tabela plan studiówkażdy rok opisany jest osobną tabelą

font: verdanawielkość: 10 pxinterlinia (wewnątrz komórki): 12px

Table row header: boldkolor: # 4e5853

Table header (naprzemiennie): boldkolor: #990066 i #00000

Table data (naprzemiennie): kolor: #990066 i #00000

linia: 1 px i 2 pxkolor: #c9c6c0

Nagłówki - tytuły tabelCalibriiboldkapitalikiwielkość: 18 pxkolor: #00000

40 px

40 px

25 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:

ListaPlus >>

Link w tekścieKolor: #990066

Link na końcu tekstuKolor: #990066Plus >>

Link pod kursorem:kolor tekstu: #ffffffKolor podlewu: #990066

Link zaznaczony tabulatorem:kolor tekstu: #990066Kolor ramki: #990066

Link zaznaczony tabulatorem i kursorem:kolor tekstu: #990066Kolor ramki: #990066

Link podczas ładowania strony:kolor tekstu: #990066Kolor linii: #990066

Link odwiedzony:Kolor: #CC6699

Link zewnętrzny

Link zewnętrzny, strona angielska

Paginacja

oznaczenie wybranej strony:kolor tekstu: #ffffffKolor 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 30 px

20 px

20 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:

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

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

40 px

(A)

(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

20 px80 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

30 px330 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 Ż

30 px150 px 150 px

30 px150 px

30 px150 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ść

30 px

30 px

18 px

Rodzaje podstron:

UKŁAD 8

KALENDARZ - linki w kalendarzu przenoszą do odpowied-nich 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ąc2. Dni podczas, których nie występują żadne wydarzenia a. wielkość: 11 px b. kolor: # 4e58533. Data wydarzenia a. wielkość: 11 px b. kolor: #81c11f c. bold4. Nazwa wydarzenia (H2): wcięcie 15 px6. opis wydarzenia (tekst ciągły)

Interlinie:data - tytuł: 28 pxtytuł - potytuł: 24 pxpodtytuł - teskt: 24 px

Rodzaje podstron:

UKŁAD 9

PROFIL

(A) Dwie kolumny:

a.Imię i nazwisko, dodatkowe informacje, miniaturki prac (380 px) b. Opis (280 px)

(B)Dwie kolumny:

a.Imię i nazwisko, dodatkowe informacje, zdjęcie osoby, kontakt, miniaturki prac (380 px) b. Opis (280 px)

30 px

30 px

380 px 280 px

30 px

20 px

30 px380 px 280 px

(A)

Rodzaje podstron:

UKŁAD 10

PRACOWNIA Dwie kolumny:

a. Opis pracowni (nazwa, pracownicy, opis, galeria), szerokość - 380 px b. Fotografia (260 px)

50 px