technologie internetowe cw 09 ...

[ Pobierz całość w formacie PDF ]
Ć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
3
2
5
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:
<
asp
:
Calendar
skinID
="kal_kolorowy"
runat
="server"
BackColor
="#FFFF66"
BorderStyle
="Inset"
Height
="113px"
ShowGridLines
="True"
TitleFormat
="Month"
Width
="207px"></
asp
:
Calendar
>
<
asp
:
Calendar
runat
="server"
BorderStyle
="Dotted"
BorderWidth
="5px"
CellPadding
="5"
CellSpacing
="5"><
SelectedDayStyle
BackColor
="#993300"
/>
<
DayStyle
BackColor
="#CCFF33"
/>
<
DayHeaderStyle
BackColor
="#669999"
/></
asp
:
Calendar
>
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:
<
asp
:
Calendar
ID
="Calendar1"
skinID
="kal_kolorowy"
runat
="server"></
asp
:
Calendar
>
<
asp
:
Calendar
ID
="Calendar2"
runat
="server"></
asp
:
Calendar
>
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:
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
.
<
asp
:
ContentPlaceHolder
ID
="contentPlaceHolder1"
runat
="server">
</
asp
:
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
[ Pobierz całość w formacie PDF ]