Ćwiczenie 9
Temat:
Ujednolicenie wyglądu
serwisu
Cel ćwiczenia:
W ramach tego ćwiczenie student zapozna się z metodami ujednolicania
wyglądu serwisu internetowego utworzonego w technologii ASP.NET za
pomocą tworzenie schematów wyglądu oraz tematów strony. Dodatkowo
przedstawione zostaną metody tworzenia mapy strony oraz metody jej
wykorzystania do nawigacji po serwisie.
Tematy strony
Tematy (zwane także kompozycją strony) pozwalają na zarządzanie wyglądem strony
internetowej. W ramach jednego projektu może istnieć wiele tematów, które mogą być
wykorzystywane zamiennie w zależności od potrzeby. Do najważniejszych elementów
tematów należą:
" Arkusze styli (.css)
" Pliki motywów (.skin)
" Pliki graficzne
Tematy umieszczane są w specjalnym folderze o nazwie  App_Themes , w którym to
katalogu znajdować się mogą katalogi tematów, gdzie nazwa katalogu to nazwa tematu. Aby
dodać nowy temat (katalog tematu) należy w oknie  Solution Explorer kliknąć prawym
guzikiem myszy na katalogu App_Themes, a następnie z menu kontekstowego wybrać
polecenie Add Asp.Net Folder -> Theme. Po utworzeniu folderu tematu można przystąpić do
dodawania do niego poszczególnych elementów, poprzez kliknięcie prawym guzikiem myszy
na nowo utworzonym folderze tematu, a następnie wybierając polecenie Add New Item.
1
4
5
2
3
W powyższym przykładzie dodany został nowy temat o nazwie  dzien .
Tematy strony 80
Przyłączanie tematu do strony
Nowoutworzony temat może zostać dołączony do strony za pomocą parametru Theme w
dyrektywie Page strony ASP:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="Default" Theme="dzien" %>
lub w pliku z kodem Default.aspx.cs, ale tylko w metodzie Page_PreInit której polecenia
wykonują się przed załadowaniem strony:
protected void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = "noc";
}
Arkusze stylów
Pozwalają zdefiniować wygląd elementów strony. W ramach jednego tematu może istnieć
wiele arkuszy stylów. Wszystkie dołączone do tematu pliki stylów zostają dołączone do
strony która posiada dyrektywę dołączająca cały temat.
Pliki motywów
Pliki motywów można porównać do arkuszy stylów. Służą do określania właściwości
kontrolek serwerowych. Składnia pliku motywu nie odróżnia się od kodu wstawiającego
kontrolkę na stronę ASP z tą różnicą, iż w pliku motywu nie można stosować właściwości ID.
W celu określenia wyglądu konkretnej kontrolki zastosować można parametr skinID.
Przykład - Pliki motywów
Poniżej, w pliku motywów (.skin) określone zostały dwa style dla kontrolek kalendarza. Tylko
w pierwszym przypadku określony został parametr skinID, co oznacza, że określone
właściwości zostaną przypisane tylko do kontrolki kalendarza, która będzie posiadała taką
samą wartość parametru skinID. Natomiast wszystkie inne kontrolki kalendarzy, które znajdą
Tematy strony 81
się na stronie (do której przypięty jest temat) posiadać będą właściwości określone w
definicji nie posiadającej parametru skinID.
SkinFile.skin:
BorderStyle="Inset" Height="113px" ShowGridLines="True"
TitleFormat="Month" Width="207px">
CellPadding="5" CellSpacing="5">


W poniższym kodzie strony ASP dodane zostały dwie kontrolki kalendarzy. W pierwszym
przypadku zdefiniowano skinID, a w drugim nie, dlatego kontrolka przyjmie właściwości
ogólne zdefiniowane w pliku motywu (należy pamiętać, że w dyrektywie Page poniższej
strony musi istnieć odpowiedni parametr Theme).
Default.aspx:
runat="server">

Zadanie 1  tematy strony
1. Wykonać prostą stronę, posiadającą kontrolkę Image, Label oraz dowolny tekst.
2. Dodać do strony 3 tematy:
" dzien
" noc
" specjalny
3. Do każdego tematu dodać arkusz stylów (.css) oraz plik motywu (.skin), a także
odpowiednią grafikę loga: http://kzi.polsl.pl/ti/cwiczenia/logo.zip
4. Dostosować poszczególne tematy, tak aby:
4.1. Tło strony w temacie dzien tło było koloru białego, w temacie noc koloru szarego, a
w temacie specjalny koloru pomarańczowego
4.2. Kontrolka image posiadała ustawiony obrazek z odpowiednim dla tematu logo.
Tematy strony 82
4.3. Kontrolka Label posiadała tekst:  Dzień dobry! lub  Dobry wieczór w zależności
który temat został wczytany.
5. Przypisać poszczególne tematy do strony w zależności od aktualnej godziny (daty):
" dzien  od 6:00 do 22:00
" noc  od 22:00 do 6:00
" specjalny  tylko dnia 1 i 3 maja
Schemat wyglądu strony  strony wzorcowe
Strony wzorcowe umożliwiają narzucenie wspólnego wyglądu dla całej witryny tworząc
swoisty szkielet. Każda witryna (w rozumieniu zespołu powiązanych ze sobą stron) posiada
elementy, które powinny powtarzać się na każdej z zakładek witryny, takich jak na przykład
logo, menu, stopka, panel logowania itd. Dzięki zastosowaniu stron wzorcowych nie jest
konieczne każdorazowe osadzanie tych elementów w każdej stronie, wystarczy wskazać przy
dodawaniu strony, iż dodawana strona powinna mieć wybrany schemat.
Tworzenie strony wzorcowej
Aby dodać do projektu nową stronę wzorcową należy wybrać polecenie Add New Item z
menu kontekstowego po kliknięciu prawym guzikiem myszy na nazwie projektu w oknie
Solution Explorer, a następnie wybrać template: Master Page. Strona wzorcowa (Master
Page) jest bardzo podobna w swojej budowie do zwykłej strony ASP, jednak z tą różnicą, że
nie można przypisywać do niej tematów. Strona wzorcowa musi posiadać specjalną
kontrolkę ContentPlaceHolder.


Jest to kontrolka definiująca obszar, który zostaje zarezerwowany na treść strony. Jeśli
utworzone zostanie nowa strona (.aspx) i zostanie określona dla niej strona wzorcowa
(Master Page) to tylko w obszarze zdefiniowanym przez kontrolkę ContentPlaceHolder
będzie można wpisywać treść strony, natomiast cała zawartość zdefiniowana we stronie
wzorcowej będzie zablokowana do edycji.
Schemat wyglądu strony  strony wzorcowe 83
Zasadę działania stron wzorcowych prezentuje poniższy schemat (kolorowe obszary są
możliwe do edycji na danej stronie):
MasterPage.master Default.aspx Strona wynikowa
ContentPlaceHolder1 ContentPlaceHolder1
ContentPlaceHolder1
ContentPlaceHolder2 ContentPlaceHolder2
ContentPlaceHolder2
ContentPlaceHolder ...
ContentPlaceHolder ... ContentPlaceHolder ...
Definiowanie strony wzorcowej dla tworzonej strony
Strona wzorcowa może zostać zdefiniowana dla nowej strony podczas jej dodawania do
projektu, poprzez zaznaczenie opcji Select master Page a następnie wybraniu odpowiedniej
strony wzorcowej:
lub za pomocą odpowiedniego parametru dyrektywy Page:
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
Schemat wyglądu strony  strony wzorcowe 84
Zadanie 2 - Schemat wyglądu strony  strony wzorcowe
1. Do strony utworzonej w Zadaniu 1 dodać plik strony wzorcowej MastePage.master
2. Zaprojektować stronę wzorcową jak w poniższym przykładzie:
Logo (kontrolka Image)
Kontrolka Label
miejsce na menu Treść stron (kontrolka ContentPlaceHolder)
Stopka strony (kontrolka ContentPlaceHolder)
3. W kodzie strony wzorcowej MasterPage.master.cs przypisać do kontrolki Label aktualną
datę.
4. Dodać do projektu nową stronę WebForm (Default2.aspx), wskazać dla nowej strony
stronę wzorcową (MasterPage.master).
5. Ustawić stronę Default2.aspx jako startową stronę całego projektu.
6. Przypisać do strony Default2.aspx temat  dzien . (w dyrektywie Page).
7. Na stronie Default.aspx wpisać przykładowy tekst
8. Przetestować działanie nowej strony.
Mapa strony  nawigacja w witrynie
Mapa strony w aplikacjach ASP.NET to forma opisu struktury witryny za pomocą standardu
XML. Mapa strony dodawana jest w ten sam sposób jak inne pliki dodawane do projektu
(menu kontekstowe w oknie Solution Explorer -> Add New Item: template: Site Map). Plik
zawierający mapę strony (Web.sitemap) musi znajdować się w głównym katalogu witryny.
Mapa strony składa się z elementów siteMapNode, które posiadają strukturę hierarchiczną.
Mapa strony może posiadać tylko jeden główny element siteMapNode. Każdy element mapy
strony posiada trzy atrybuty:
" url  adres zakładki
" title  tytuł zakładki
" description  dodatkowy opis zakładki
Mapa strony  nawigacja w witrynie 85
Mapa strony wykorzystywana jest do automatycznego tworzenie nawigacji oraz co
najważniejsze, pozwala na zarządzanie strukturą nawigacji w jednym miejscu, bez
konieczności zmieniania kodu w wielu plikach stron.
Przykład
Strona o strukturze:
" Produkty
o AGD
o RTV
" Kontakt
" Regulamin
posiadać będzie mapę strony zdefiniowaną w następujący sposób (oczywiście w
parametrach url powinny znajdować się odpowiednie ścieżki do plików stron ASP):











Kontrolka SiteMapDataSource
To kontrolka znajdująca się w panelu Toolbox w sekcji Data. Kontrolka sama nie wprowadza
widocznej funkcjonalności na stronę, pozwala jednak innym kontrolkom na poprawny odczyt
pliku mapy strony. Kontrolka posiada ważny parametr: ShowStartingNode, który umożliwia
zamaskowanie głównej gałęzi struktury strony, co jest szczególnie wygodne, gdy kontrolka
wykorzystywana jest do tworzenia menu strony. Gdy parametr ShowStartingNode ma
Mapa strony  nawigacja w witrynie 86
wartość true, menu strony będzie jednoelementowe, ponieważ wszystkie  gałęzie drzewa
struktury strony są potomnymi gałęzi głównej.
Kontrolka Menu
To kontrolka znajdująca się w panelu Toolbox w sekcji Navigation. Kontrolka tworzy na
stronie menu służące do nawigacji w witrynie. Elementy menu mogą zostać wpisane ręcznie
za pomocą przycisku Edit Menu Items lub mogą zostać automatycznie pobrane z pliku mapy
strony, jednak w tym celu na stronie dodatkowo umieścić należy kontrolkę
SiteMapDataSource, a następnie wskazać tą kontrolkę we właściwości DataSourceID.
Kontrolka TreeView
To kontrolka znajdująca się w panelu Toolbox w sekcji Navigation. Kontrolka wstawia na
stronę strukturę witryny w postaci drzewa. Kontrolka podobnie jak kontrolka menu do
poprawnego działania potrzebuje na stronie kontrolki SiteMapDataSource (należy ją
wskazać w parametrze kontrolki TreeView  DataSourceID)
Zadanie 3  Nawigacja strony, mapa strony
1. Do strony utworzonej w poprzednich zadaniach dodać mapę strony (plik web.sitemap)
Mapa strony  nawigacja w witrynie 87
2. W pliku mapy strony stworzyć następującą strukturę:
" Informatyka Przemysłowa
o Strona główna (url  do strony głównej projektu)
o O kierunku
o Specjalności
ISP
IwTM
o Materiały do pobrania
o Logowanie
o Kontakt
Dane teleadresowe
Formularz kontaktowy
o Mapa strony
3. W pliku strony wzorcowej MastePage.master w odpowiednim miejscu dodać kontrolkę
Menu oraz SiteMapDataSource
4. Dodać do projektu stronę Web Form smap.aspx, określić dla strony plik wzorcowy
(MasterPage), określić dla strony temat ( dzien ). Na stronę wstawić kontrolkę TreeView
oraz SiteMapDataSource. W pliku web.sitemap dodać url do utworzonej strony dla
elementu:  Mapa strony
5. Przetestować działanie strony z nawigacją.
Mapa strony  nawigacja w witrynie 88