ITA 103 Modul06

W tym module znajdziesz informacje dotyczące zarządzania wyglądem
aplikacji i tworzenia elementów nawigacyjnych. Poznasz możliwości
centralnego zarządzania wyglądem witryny przy pomocy stron wzorcowych
i kompozycji. Poznasz metody tworzenia mapy witryny internetowej oraz
nauczysz się, jak wykorzystywad kontrolki nawigacyjne.

Cel modułu

Celem modułu jest przedstawienie możliwości utrzymania wspólnego
wyglądem aplikacji przy użyciu stron wzorcowych i kompozycji oraz
możliwości tworzenia centralnie zarządzanych elementów nawigacyjnych.

Uzyskane kompetencje

Po zrealizowaniu modułu będziesz:



wiedział jak zarządzad wyglądem aplikacji przy użyciu stron
wzorcowych i kompozycji



potrafił tworzyd centralnie zarządzane mapy witryny



potrafił wyświetlad mapę witryny przy pomocy kontrolek
nawigacyjnych

Wymagania wstępne

Przed przystąpieniem do pracy z tym modułem powinieneś:



znad zasady pracy w środowisku Visual Studio, w szczególności
tworzenia stron internetowych,



potrafid tworzyd nowe aplikacje internetowe i dodawad strony.

Mapa zależności modułu

Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem
do realizacji tego modułu należy zapoznad się z materiałem zawartym
w modułach „Podstawy HTML”, „Kaskadowe Arkusze Stylów – CSS”
i „Wprowadzenie do ASP.NET”

MODUŁ 6

MODUŁ 14

MODUŁ 3

MODUŁ 8

MODUŁ 1

MODUŁ 5

MODUŁ 2

MODUŁ 4

MODUŁ 9

MODUŁ 10

MODUŁ 11

MODUŁ 12

MODUŁ 13

Rys. 1 Mapa zależności modułu

Piotr Bubacz

Moduł 6

ITA-103 Aplikacje Internetowe

Projektowanie serwisów internetowych

Strona 6-3

Przygotowanie teoretyczne

Przykładowy problem

Przeglądając serwisy internetowe możemy zauważyd, że każda strona wygląda podobnie.
Wspólnymi elementami są menu, baner czy inne wizualne komponenty strony. Aby utrzymad
wspólny wygląd strony tworzonej w XHTML należało zaprojektowad wspólne elementy, a później
przekopiowad je na każdą nową stronę. Oczywiście nie było to rozwiązanie dobre. Nie mówiąc o
problemach przy kopiowaniu należy pamiętad, że zmiana jakiegokolwiek elementu w części
wspólnej powodowała koniecznośd zmian we wszystkich plikach serwisu.

Kolejnym problemem jest wygląd strony. Już wiesz, że można go określid w pliku CSS, ale co, jeśli
chcemy okresowo zmieniad wygląd naszej witryny. Co jeśli chcemy, aby strona wyglądała inaczej w
zimie, lecie czy na jesieo i wiosnę. Oczywiście możemy podmieniad wskazania pliku CSS na stronie,
jednak nie jest dobre rozwiązanie, szczególnie jeśli mamy kilka stron w serwisie. Chcielibyśmy mied
centralne zarządzanie plikami CSS wykorzystywanymi przez stronę.

Ostatni problem na jaki napotkasz się tworząc serwisy internetowe to menu. Tworzenie menu jako
zbioru odnośników do stron jest może rozwiązaniem prostym, ale zdecydowanie nieoptymalnym.
Chcielibyśmy mied centralne miejsce do zarządzania elementami nawigacyjnymi. Dodatkowo
musimy mied możliwośd prostego wyświetlania naszej strony. Do tego celu potrzebujemy zbioru
kontrolek nawigacyjnych.

Podstawy teoretyczne

Budowanie wyglądu serwisu w oparciu o strony wzorcowe
Strony serwisu internetowego posiadają wiele wspólnych elementów, które powinny byd
wyświetlane na każdej ze stron (np. logo, elementy nawigacyjne itp.). Tworzenie podobnych stron
można wykonad kopiując wspólne elementy. Gdy tych stron jest dużo lub jeśli w pewnym
momencie zaistnieje potrzeba zmiany wyglądu serwisu, wtedy takie rozwiązanie jest niepraktyczne.
ASP.NET został wyposażony w mechanizm stron wzorcowych, umożliwiających grupowanie
pewnych wspólnych elementów z wielu stron w jednym pliku.

Strona wzorcowa (ang. Master Page) umożliwia tworzenie wspólnego wyglądu dla całej witryny
internetowej. Stanowi ona szkielet dla treści dostarczanej przez poszczególne strony i zawiera tylko
wspólne elementy. Miejsce, w którym ma zostad umieszczona treśd właściwej strony, jest
określone przez specjalną kontrolkę ContentPlaceHolder. Ze względu na fakt, że możliwe jest
umieszczenie dowolnej ilości kontrolek ContentPlaceHolder, każda kontrolka musi byd
jednoznacznie nazwana za pomocą identyfikatora kontrolki ID.

Strona z zawartością (ang. Content Page) korzysta ze strony wzorcowej, wypełniając miejsca
określone przez ContentPlaceHolder. Treśd jest umieszczona w kontrolce Content. Kontrolka
ta musi odwoływad się do odpowiedniej kontrolki ContentPlaceHolder za pomocą parametru
ContentPlaceHolderID (Rys. 2).

Strona wzorcowa

ContentPlaceHolder1

ContentPlaceHolder2

Strona zawartości

Content1

Strona w

przeglądarce

Content1

Content2

Rys. 2 Tworzenie strony internetowej na podstawie stron: wzorcowej i zawartości

Strona wzorcowa i strona zawartości mogą zawierad dowolne kontrolki serwerowe, jak również
własny kod programowy. Zawartości obu stron są łączone w jedną strukturę i wysyłane do klienta,
dzięki temu są widoczne jako jedna całośd.

Piotr Bubacz

Moduł 6

ITA-103 Aplikacje Internetowe

Projektowanie serwisów internetowych

Strona 6-4

Strona zawartości może umieszczad kontrolki tylko w wyznaczonych miejscach. Istnieje możliwośd
umieszczenia kontrolki w dowolnym miejscu na stronie przy pomocy pozycjonowania CSS, ale jest
to w najwyższym stopniu niewskazane. Zmiana szablonu nie spowoduje zmiany położenia kontrolki.
Jeśli musimy coś dodad w określonym miejscu, najłatwiej jest zdefiniowad w stronie wzorcowej
kolejną kontrolkę ContentPlaceHolder.

Aby ułatwid tworzenie rozbudowanych serwisów internetowych, możliwe jest zagnieżdżanie stron
wzorcowych. Visual Studio 2008 wspiera ich wizualne projektowanie.

Konwersja istniejącej strony Web na stronę zawartości

Przy projektowaniu aplikacji istnieje czasami koniecznośd dopasowania istniejącej strony Web do
całego portalu. W tym celu należy z konwertowanej strony usunąd następujące znaczniki:



<!DOCTYPE>



<html>



<head>



<body>



<form>

Następnie należy do dyrektywy @Page dodad atrybut MasterPageFile, podając właściwą nazwę
pliku strony wzorcowej. W kolejnym kroku przed treścią strony powinno się dodad znacznik
<asp:Content>.

Znacznik

ten

musi

posiadad

atrybuty

(dowolna

nazwa),

ContentPlaceHolderID (nazwa kontrolki ContentPlaceHolder na stronie wzorcowej, w
której ma znaleźd się treśd strony) oraz runat="Server". Na koocu pliku należy zamknąd znacznik
</asp:Content>.

Jeśli na stronie wzorcowej znajduje się klika kontrolek ContentPlaceHolder, to musimy
zapewnid, że każda z nich będzie posiadała na tej stronie kontrolkę Content z odpowiednim
ContentPlaceHolderID.

Sterowanie wyglądem aplikacji przy użyciu kompozycji
Przy użyciu arkusza styli (CSS) możliwe jest definiowanie wyglądu elementów w języku HTML, nie
jest to jednak możliwe w przypadku kontrolek serwerowych ASP.NET. CSS może zmienid
interpretacje kodu HTML generowanego przez kontrolkę serwerową, ale nie ma wpływu na samą
kontrolkę. Aby umożliwid scentralizowany sposób sterowania wyglądem kontrolek, wprowadzono
kompozycje (ang. themes).

Kompozycje są umieszczone na serwerze w specjalnym katalogu App_Themes, w podkatalogach,
których nazwy są nazwami kompozycji. Podkatalogi zawierad mogą pliki .skin (plik motywu) oraz
pliki arkuszy styli .css. Pliki styli zostaną dołączone do nagłówka każdej ze stron.

Wizualne cechy kontrolek Web określa się za pośrednictwem pliku motywu (.skin). Pojedynczy
folder kompozycji może zawierad dowolną liczbę takich plików. Pliki motywów zawierają znacznik
identyfikujący daną kontrolkę serwerową wraz z parametrami.

Definicja motywów ma wpływ tylko na wygląd kontrolek serwerowych Web, nie ma natomiast
wpływu na następujące elementy:



elementy HTML



kontrolki serwerowe HTML



kontrolki serwerowe Web, które nie mają właściwości wizualnych



niewizualne właściwości kontrolek serwerowych Web (np. AutoPostBack)

Stosowanie kompozycji do wszystkich stron witryny jest możliwe w pliku Web.config w sekcji
<system.web> przy pomocy znacznika <pages>. Przykład:

Piotr Bubacz

Moduł 6

ITA-103 Aplikacje Internetowe

Projektowanie serwisów internetowych

Strona 6-5

W celu utworzenia kompozycji należy w oknie Solution Explorer kliknąd prawym przyciskiem i
wybrad Add ASP.NET Folder, a następnie Theme. W tym momencie możliwe jest określenie
dowolnej nazwy folderu, która jednocześnie będzie nazwą kompozycji.

W celu dodania pliku kompozycji należy kliknąd prawym przyciskiem katalog zawierający
kompozycję i wybrad z menu opcje Add New Item, a następnie Skin File i wcisnąd przycisk Add.

Rys. 3 Dodanie pliku motywu

W utworzonym pliku należy następnie umieścid znaczniki i parametry definiujące wygląd strony.

Nawigacja w serwisie internetowym
Większośd serwisów internetowych posiada menu – zbiór odnośników do poszczególnych stron.
Możliwe jest określenie tego zbioru ręcznie na każdej stronie lub na stronie wzorcowej, jednak nie
jest to rozwiązanie elastyczne. Dodatkowo problemem jest ukrywanie części odnośników przed
użytkownikami anonimowymi oraz ograniczanie dostępu do odnośników dla różnych grup
użytkowników.

W ASP.NET 2.0 zaproponowano spójny, łatwy do zarządzania, scentralizowany system dostarczania
informacji o mapie serwisu. Możliwości systemu nawigacji:



Centralne zarządzanie logiczną strukturą witryny – dodawanie lub usuwanie odnośników do
stron domyślnie odbywa się w pliku Web.sitemap. Możliwe jest określenie innego dostawcy.



Kontrolki nawigacyjne – kontrolki umożliwiające wyświetlenie menu serwisu bazujące na
pliku Web.sitemap.



Reguły dostępu – możliwośd określania reguł wyświetlania lub ukrywania odnośników w
menu nawigacji.



Możliwośd programowego dostępu do kontrolek nawigacji i wyświetlanych w nich informacji.

Tworzenie mapy witryny

Pierwszym krokiem wykorzystania systemu nawigacji w ASP.NET jest określenie struktury serwisu.
Standardowo system nawigacji serwisem wykorzystuje plik XML Web.sitemap zawierający
hierarchię stron.

Plik Web.sitemap musi byd umieszczony w katalogu głównym aplikacji. Zawiera on elementy
<siteMapNode> dla każdej strony serwisu. Hierarchię serwisu ustala się poprzez osadzanie
elementów <siteMapNode>. Każdy z nich zawiera następujące atrybuty:



title – określa tekst wyświetlany w kontrolkach nawigacyjnych

Piotr Bubacz

Moduł 6

ITA-103 Aplikacje Internetowe

Projektowanie serwisów internetowych

Strona 6-6



description - określenia tekst pomocy pojawiający się po ustawieniu kursora nad pozycją
menu (ang. tool tip)



url – określa lokalizację strony

Przykład pliku Web.sitemap:

Kontrolki nawigacyjne

Kolejnym krokiem po określeniu struktury jest wyświetlenie jej na stronie serwisu. ASP.NET
udostępnia następujące kontrolki nawigacyjne:



SiteMapPath



TreeView



Kontrolka SiteMapPath

Kontrolka SiteMapPath wyświetla ścieżkę nawigacji. Prezentuje ona użytkownikowi lokalizację i
wyświetla odnośniki umożliwiające nawigację do strony domowej.

Rys. 4 Kontrolka SiteMapPath

Kontrolka TreeView

Kontrolka TreeView wyświetla mapę serwisu w postaci struktury. Węzły zawierające elementy
potomne mogą byd rozwijane lub zwijane po kliknięciu ich.

Rys. 5 Przykład kontrolki TreeView a) cała b) zwinięty jeden węzeł

Piotr Bubacz

Moduł 6

ITA-103 Aplikacje Internetowe

Projektowanie serwisów internetowych

Strona 6-7

Kontrolka Menu

Kontrolka Menu wyświetla menu rozwijane. Węzły zawierające elementy potomne są rozwijane w
momencie, kiedy przesunie się nad nimi kursor.

Rys. 6 Przykład działania kontrolki Menu

Podsumowanie
W tym rozdziale przedstawiliśmy podstawowe informacje dotyczące budowania witryn
internetowych w oparciu o strony wzorcowe. Pokazaliśmy, jak tworzyd i zarządzad wyglądem
witryny przy pomocy kompozycji oraz jak tworzyd mapę witryny i wykorzystywad kontrolki
nawigacyjne do jej prezentowania.

Przykładowe rozwiązanie

Tworzenie strony wzorcowej i stron zawartości
Naszym zadaniem jest utworzenie szablonu serwisu internetowego dla klienta. Szablon ma
zawierad elementy przedstawione na Rys. 7.

Logo

Treść

Rys. 7 Szablon strony

Po utworzeniu nowego projektu aplikacji internetowej dodamy stronę wzorcową do projektu. Za
pomocą menu Website -> Add New Item, lub poprzez kombinację klawiszy Ctrl+Shift+A. W oknie
dialogowym Add New Item należy wybrad szablon Master Page oraz w oknie Name nadad mu
nazwę SzablonStrony.master. Dodatkowo zaznaczymy opcję Place Code In Separate File, aby
umieścid kod strony w osobnym pliku. Po kliknięciu przycisku Add tworzony jest plik strony
wzorcowej zawierający już dwie kontrolki ContentPlaceHolder. Pierwsza kontrolka umożliwia
dodanie treści do nagłówka strony. Dzięki temu na stronie zawartości możemy dodad plik CSS lub
skrypt wykonywany po stronie klienta. Druga kontrolka zawiera treśd, która zostanie wypełniona na
stronie zawartości.

Teraz należy odpowiednio przygotowad naszą stronę wzorcową. Aby to wykonad, usuniemy
kontrolkę ContentPlaceHolder. Ułatwi nam to opisanie kolejnych czynności. Następnie dodamy
do znacznika <div> właściwośd ID="Strona". W kolejnym kroku dodamy dwa znaczniki <div>,
pierwszy o ID="Naglowek", drugi o ID="ObszarRoboczy". Następnie do znacznika
zawierającego nagłówek dopiszemy: Logo. Do znacznika <div> o ID="ObszarRoboczy" dodamy
kolejne dwa znaczniki <div> o ID="Menu" i ID="Tresc". Do znacznika <div> o ID="Menu"
wpiszemy Menu, a do znacznika o ID="Tresc" dodamy kontrolkę ContentPlaceHolder.

Tak przygotowana strona wzorcowa będzie stanowiła bazę dla kolejnych podstron. Warto jeszcze
zdefiniowad wygląd poszczególnych sekcji w CSS, ze szczególnym uwzględnieniem odpowiedniego
rozmieszczenia obszaru treści i menu.

Zauważmy, że strona wzorcowa różni się od formularza internetowego tylko dwiema kontrolkami
ContentPlaceHolder. Kontrolki te będą wypełniane przez strony zawartości bazujące na tej

Piotr Bubacz

Moduł 6

ITA-103 Aplikacje Internetowe

Projektowanie serwisów internetowych

Strona 6-8

stronie. Strona zawartości korzystająca z tej strony wzorcowej musi zawierad dwie kontrolki
Content, których atrybut ContentPlaceHolderID jest równy ContentPlaceHolder1 oraz
head. Naszym zadaniem jest umieścid odpowiednią treśd w tych kontrolkach, która później
zostanie połączona z szablonem strony i wyświetlona w przeglądarce użytkownika jako jedna
strona XHTML.

Nie możemy zobaczyd szablonu strony bez strony zawartości. Musimy zatem dodad nową stronę
zawartości bazującą na naszym szablonie.

Dodawanie stron zawartości
Kolejnym krokiem jest dodanie strony zawartości, która będzie bazowała na stronie wzorcowej.
Strona zawartości to formularz internetowy, którego treśd umieszczona jest w kontrolkach
Content odpowiadających kontrolkom ContentPlaceHolder na stronie wzorcowej.

Stronę zawartości dodajemy do aplikacji podobnie jak formularz internetowy, z tą tylko różnicą, że
w oknie Add New Item (Rys. 8) dodatkowo zaznaczamy opcję Select master page.

Rys. 8 Okno Add New Item dla strony zawartości

Po kliknięciu przycisku Add zostaniemy proszeni o wybranie strony wzorcowej (Rys. 9). W aplikacji
możemy zdefiniowad klika szablonów stron. Co więcej, szablony te mogą byd zagnieżdżane.

Rys. 9 Okno Select a Master Page

Piotr Bubacz

Moduł 6

ITA-103 Aplikacje Internetowe

Projektowanie serwisów internetowych

Strona 6-9

Po wybraniu przycisku OK tworzona jest nowa strona zawartości oparta na wybranej stronie
wzorcowej. Zawiera ona dyrektywę @Page, w której oprócz standardowych właściwości znajduje
się właściwośd określająca szablon strony. Na stronie znajdują się również dwie kontrolki Content
odwołujące się do odpowiednich kontrolek ContentPlaceHolder.

Po przełączeniu w widok Design (Rys. 10) widoczna jest strona będąca połączeniem strony
wzorcowej i strony zawartości. Dzięki temu programista widzi ją tak, jak zostanie ona wysłana do
użytkownika. Częśd zdefiniowana w stronie wzorcowej jest oznaczona kolorem szarym, a
dodawanie kontrolek jest możliwe wyłącznie w kontenerze Content oznaczonym kolorem białym.
Umieszczenie kursora na szarym tle powoduje zmianę kursora na znak zakazujący.

Rys. 10 Widok WYSIWYG strony zawartości

Możemy teraz wyświetlid naszą stronę zawartości w przeglądarce. Po uruchomieniu widzimy stronę
składającą się z elementów umieszczonych zarówno na stronie wzorcowej, jak i stronie zawartości.

Konwersja istniejącej strony Web na stronę zawartości

Projektując aplikację internetową czasami potrzebujemy dodad do projektu starą stronę
przygotowaną bez użycia szablonu. W tym celu należy ze strony usunąd następujące znaczniki ze
starej strony:



<!DOCTYPE>



<html>



<head>



<body>



<form>

Należy pamiętad, że musimy usunąd znaczniki początkowe i koocowe zostawiając właściwą treśd
strony. Następnie należy do dyrektywy @Page dodad atrybut MasterPageFile, określający
lokalizację pliku strony wzorcowej. Następnie pod dyrektywą @Page, a przed treścią strony należy
dodad znacznik:

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>

Jeśli potrzebujemy dodad coś w nagłówku strony, to możemy to umieścid właśnie w tym znaczniku.
W naszym prostym przypadku nie potrzebujemy nic dodawad, zatem zostawiamy pustą zawartośd.

Kolejno do strony należ dodad znacznik <asp:Content>. Znacznik ten musi posiadad atrybuty ID
(dowolna nazwa), ContentPlaceHolderID (nazwa kontrolki ze strony wzorcowej
ContentPlaceHolder, w której ma znaleźd się treśd strony) oraz runat="Server". W naszym
przypadku:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">

Na koocu pliku musimy zamknąd znacznik </asp:Content>.

Piotr Bubacz

Moduł 6

ITA-103 Aplikacje Internetowe

Projektowanie serwisów internetowych

Strona 6-10

Jeśli w stronie wzorcowej znajduje się więcej niż dwie kontrolki ContentPlaceHolder, to należy
do strony zawartości dodad odpowiednio tyle kontrolek Content tak, aby każda kontrolka ze
strony wzorcowej miała odniesienie na stronie zawartości.

Sterowanie wyglądem aplikacji przy użyciu kompozycji
Naszym zadaniem będzie stworzenie wyglądu witryny w taki sposób, aby możliwa była szybka
zmiana wyglądu strony. Do tego celu użyjemy kompozycji.

W celu utworzenia kompozycji należy w oknie Solution Explorer kliknąd prawym przyciskiem i
wybrad Add ASP.NET Folder, a następnie Theme. W tym momencie możliwe jest określenie nazwy
folderu, która jednocześnie będzie nazwą kompozycji. W naszym przypadku będzie to
SkorkaZima.

Następnie dodajemy do folderu plik CSS, w którym znajdują się odpowiednie definicje wyglądu
elementów na stronie. Oprócz pliku CSS możemy również wykorzystad plik motywów. W celu
dodania pliku motywów należy kliknąd prawym przyciskiem katalog zawierający kompozycję i
wybrad z menu opcje Add New Item, a następnie Skin File i wcisnąd przycisk Add. W utworzonym
pliku należy następnie umieścid znaczniki i parametry definiujące wygląd strony.

Aktualnie wykorzystywaną kompozycje przez aplikacje definiujemy w pliku Web.config w sekcji
<system.web> przy pomocy znacznika <pages>. Przykład:

Możliwe jest również umieszczenie bezpośredniego odniesienia do odpowiedniego pliku w sekcji
head każdej strony w aplikacji, jednak ustawienia wykonane w pliku Web.config przykrywają
ustawienia lokalne w sekcji <head>.

Porady praktyczne

Strony wzorcowe



Praca ze stroną wzorcową jest analogiczna do pracy z formularzem internetowym. Możliwe
jest dodawanie dowolnych kontrolek i wykonywanie dowolnego kodu aplikacji. Należy
jednak pamiętad, że kontrolki i kod tej strony będą wykonywane na wszystkich potomnych
stronach.



Przy dodawaniu do projektu strony już istniejącej należy:



w dyrektywie @Page wskazad lokalizację bezwzględną strony wzorcowej rozpoczynając od
głównej strony serwisu "~/"



dodad tyle kontrolek Content, aby wszystkie kontrolki ContentPlaceHolder miały
swoje odwzorowanie

Kompozycje



Tworzenie kompozycji należy zacząd od stworzenia kompozycji bazowej, a następnie
zmieniad ją odpowiednio do potrzeb.



Aby możliwe było projektowanie strony w trybie podglądu, powinieneś określid styl bazowy
w nagłówku strony wzorcowej.



W katalogu kompozycji możemy umieścid nie tylko pliki CSS i kompozycje, ale również
elementy graficzne niezbędne dla odpowiedniego wyglądu strony.

Nawigacja w serwisie



W pliku Web.sitemap określaj zawsze element nadrzędny <siteMapNode>, a następnie w
kontrolce Menu określ właściwośd ShowStartingNode="False".



W pliku Web.sitemap staraj się zawsze umieszczad właściwośd description. Ułatwi to
odnajdowanie ważnych elementów użytkownikom strony

Piotr Bubacz

Moduł 6

ITA-103 Aplikacje Internetowe

Projektowanie serwisów internetowych

Strona 6-11



W pliku Web.sitemap nie musisz zawsze określad właściwości url. Jest to szczególnie
przydatne dla nadrzędnych opcji menu.

Uwagi dla studenta

Jesteś przygotowany do realizacji laboratorium jeśli:



rozumiesz jak działają strony wzorcowe



umiesz dodawad do projektu stronę wzorcową i stronę zawartości



potrafisz dodawad i zarządzad kompozycjami



potrafisz tworzyd mapy witryny w pliku Web.sitemap oraz wykorzystywad te informacje do
wyświetlania w kontrolkach nawigacyjnych

Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że
rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego
w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów.

Dodatkowe źródła informacji

1. Strony wzorcowe – wprowadzenie,

http://aspnet.codeguru.pl/GuidedTourPL/webdev/webdev15.htm

Na stronie znajdziesz opis najważniejszych kwestii związanych ze stronami
wzorcowymi.

2. Stephen Walther, ASP.NET 2.0. Księga eksperta, Helion, 2008

W książce autor porusza wiele zagadnieo związanych z ASP.NET 2.0. Z książki
nauczysz się tworzyd efektowne witryny internetowe, a także dbad o ich
bezpieczeostwo oraz wysoką skalowalnośd. Dowiesz się, jak można dodawad nowe,
jednolite strony do aplikacji webowych.

3. Webcast

Wykorzystanie

stron

wzorcowych,

http://www.microsoft.com/poland/developer/net/webcasty/09_wykorzystanie_stron_wzorcow
ych/default.aspx

Webcast w języku polskim umożliwiający zapoznanie się w nieco ponad 11 min z
najważniejszymi kwestiami związanymi ze stronami wzorcowymi w ASP.NET.
Nauczysz się dodawad strony wzorcowe i strony zwartości. Poznasz również
mechanizm tworzenia mapy witryny i dodawania kontrolek nawigacyjnych.

4. Instrukcja:

Dodawanie

nawigacji

witryny

sieci

Web,

http://www.microsoft.com/poland/developer/net/podrecznik/customizing-01.mspx

Fragment podręcznika do ASP.NET, który w prosty sposób na przykładzie pokazuje,
jak tworzyd mapę witryny oraz dodawad kontrolki nawigacyjne.

Piotr Bubacz

Moduł 6

ITA-103 Aplikacje Internetowe

Projektowanie serwisów internetowych

Strona 6-12

Laboratorium podstawowe

Problem 1 (czas realizacji 25 min)

Firma Adventure Works chciałaby w Polsce otworzyd sklep internetowy sprzedający rowery.
Ponieważ poprzednia ankieta, którą przygotowałeś bardzo im się spodobała, zaproponowali Tobie
wykonanie tej strony. Ich grafik zaproponował układ przedstawiony na Rys. 11. Twoim zadaniem
jest przygotowanie strony wzorcowej oraz zaprezentowanie jej klientowi.

Rys. 11 Szkic wyglądu strony

Zadanie

Tok postępowania

1. Utwórz nową
stronę w Visual
Web Developer
2008 Express
Edition



Otwórz Visual Web Developer 2008 Express Edition.



Z menu wybierz File -> New Web Site.



Z listy Visual Studio installed templates wybierz ASP.NET Web Site.



Z listy Location wybierz File System, a w polu obok określ lokalizację dla
pliku w dowolnym miejscu na dysku.



Z listy Language wybierz Visual C#.



Kliknij OK.

2. Utwórz
wzorzec strony



Usuo z projektu stronę Default.aspx.



Wybierz z menu opcję Websites -> Add New Item lub naciśnij
kombinację Ctrl+Shift+A.



Z wyświetlonego okna dialogowego wybierz następujące opcje:

— Templates: Master Page
— Language: Visual C#
— Name: SzablonStrony.master
— Place Code In Separate File: zaznaczona



Naciśnij przycisk Add.



Program

utworzy stronę

wzorcową z

dwiema

kontrolkami

ContentPlaceHolder.



Usuo kontrolkę ContentPlaceHolder o id="ContentPlaceHolder1".

3. Utworzenie
głównych
elementów strony



Zmieo tytuł strony na Adventure Works.



Wewnątrz znacznika <body> dodaj:

Piotr Bubacz

Moduł 6

ITA-103 Aplikacje Internetowe

Projektowanie serwisów internetowych

Strona 6-13

4. Podział
głównych
elementów



Wewnątrz znacznika zawierającego nagłówek (id="Naglowek") dodaj:

Logo
<div id="Menu">Menu</div>
<div id="ObszarLogowania">Zaloguj</div>



Wewnątrz znacznika zawierającego treśd (id="Tresc") dodaj:

<div id="PierwszyObszarBoczny">Pierwszy obszar boczny</div>
<div id="DrugiObszarBoczny">Drugi obszar boczny</div>
<div id="ObszarRoboczy">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>

5. Dodanie
nowego arkusza
stylów



Wybierz Website -> Add New Item.



Z listy Visual Studio installed templates wybierz Style Sheet.



W polu Name wpisz Style.css.



Kliknij OK.

6. Określenie
pozycji
w obszarach
roboczych



Przełącz widok strony na Design lub Split.



Wybierz Format -> New Style.



W polu Selector wpisz #PierwszyObszarBoczny.



W górnej części okna z listy Define in wybierz Existing Style Sheet,
a z listy rozwijanej URL wybierz Style.css.



Z listy Category wybierz Layout, a następnie określ właściwośd float:
left.



Z listy Category wybierz Position, a następnie określ właściwości width:
200 px oraz height: 300 px.



Kliknij OK.



Postępuj podobnie z selektorem #DrugiObszarBoczny, tylko zmieo
właściwośd float na right.

7. Określenie
podstawowego
wyglądu
zawartości strony



W pliku Style.css standardowo jest już dodany selektor znacznika
<body>. Kliknij go prawym przyciskiem myszy i wybierz Build Style.



Określ właściwości font-family: Verdana, font-size: 8 pt i color:
#000033.



Z listy Category wybierz Background, a następnie określ właściwośd
backgroud-color: white.



Z listy Category wybierz Box, a następnie określ właściwośd margin: 0.
Upewnij się, że opcja Same for all jest zaznaczona.



Kliknij OK.



Otwórz plik SzablonStrony.master. W oknie Solution Explorer chwyd
myszką plik Style.css i upuśd go w sekcji nagłówka strony za znacznikiem
</title>. Zobacz jak zmienił się podgląd pliku.

8. Określenie
wyglądu
pozostałych
elementów strony



Przy pomocy narzędzi Visual Studio lub w kodzie pliku Style.css określ
następujące style:

— #Menu: kolor tła: #55BBFF, wielkośd tekstu: 7.5pt
— #ObszarLogowania: wyrównanie tekstu (właściwośd text-align): do

prawej, kolor tła #C3DBEA, margines wewnętrzny (ang. padding)
z góry i dołu 5px, z lewej i prawej 10px

— #ObszarRoboczy: kolor tła #EEE, margines wewnętrzny (ang.

padding) z góry i dołu 50px, z lewej i prawej 20px, margines z góry
i dołu 0, z lewej i prawej 200px

Piotr Bubacz

Moduł 6

ITA-103 Aplikacje Internetowe

Projektowanie serwisów internetowych

Strona 6-14

9. Dodaj logo do
strony



Do aplikacji dodaj katalog Images. Wybierz Website -> New folder, a
następnie nazwij go Images.



Do katalogu dodaj obrazek AWlogo.jpg. W oknie Solution Explorer
wskaż nowo dodany folder, wybierz Website -> Add Existing Item, a
następnie wskaż obrazek AWlogo.jpg.



Usuo napis Logo na górze strony, a następnie w to miejsce dodaj
kontrolkę Image i w oknie Properties w polu ImageUrl wpisz
~/Images/AWlogo.jpg.

10. Dodawaj
stronę z
zawartością



W oknie Solution Explorer wskaż nazwę aplikacji. Wybierz z menu opcję
Websites -> Add New Item lub naciśnij kombinację Ctrl+Shift+A.



Z wyświetlonego okna dialogowego wybierz następujące opcje:

— Templates: Web Form
— Language: Visual C#
— Place Code In Separate File: zaznaczona
— Select Master Page: zaznaczona
— Nazwa: Default.aspx



Naciśnij przycisk Add.



oknie

dialogowym

Select

Master

Page

wybierz

SzablonStrony.master, a następnie wciśnij OK.

Zawartośd strony Default.aspx i wszystkich pozostałych można dodad
w kontrolce Content. Aby zmienid zawartośd pozostałych części strony
należy dokonad edycji strony wzorcowej.

11. Sprawdzenie
wyglądu strony w
przeglądarce



W oknie Solution Explorer kliknij prawym przyciskiem myszy plik
Default.aspx i wybierz View In Browser.

Strona w przeglądarce powinna wyglądad podobnie jak na Rys. 12.

Rys. 12 Wygląd strony po zastosowaniu stylów

Piotr Bubacz

Moduł 6

ITA-103 Aplikacje Internetowe

Projektowanie serwisów internetowych

Strona 6-15

Problem 2 (czas realizacji 25 min)

Aby przetestowad szablon strony chciałbyś dodad stronę z ankietami wykonaną w dwiczeniu w
module 4.

Zadanie

Tok postępowania

1. Dodaj stronę
do projektu



Wybierz Website -> Add Existing Item.



Znajdź na dysku stronę Ankieta.aspx.



Kliknij Add.



Do projektu dodaj również katalog Adv z jego zawartością.

2. Usuo
niepotrzebne
znaczniki



Usuo następujące znaczniki ze strony:

— <!DOCTYPE>
— <html>
— <head>
— <body>
— <form>

Nie zapomnij o znacznikach koocowych.

3. Określ
parametry
dyrektywy @Page



Na stronie w dyrektywie @Page dodaj atrybuty:

MasterPageFile="~/SzablonStrony.master" Title="Ankieta"

4. Dodaj
kontrolkę Content



Po dyrektywie @Page dodaj znacznik:

<asp:Content ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">



Na koocu strony po całej treści zamknij dodany znacznik
</asp:Content>.

5. Dodaj do
strony głównej
odnośniki do
ankiety



Do strony głównej dodaj odnośniki odpowiednio uruchamiający ankietę
dla nowego klienta oraz dla osoby posiadającej już rower.



Przetestuj działanie ankiety klikając na linki na stronie głównej.

Piotr Bubacz

Moduł 6

ITA-103 Aplikacje Internetowe

Projektowanie serwisów internetowych

Strona 6-16

Problem 3 (czas realizacji 25 min)

Klient jest bardzo zadowolony z wyniku Twoich prac. Chciałby, abyś dodał jeszcze elementy
nawigacyjne do strony. Zaproponował, aby na stronie w miejscu, gdzie jest napis „Menu” pojawiło
się prawdziwe menu z rozsuwanymi elementami.

Zadanie

Tok postępowania

1. Dodaj nowe
strony do
projektu



Do aplikacji internetowej utworzonej w poprzednim zadaniu dodaj
cztery nowe strony aspx. Nazwij je kolejno: Produkty.aspx, Szukaj.aspx,
Uwagi.aspx oraz Informacje.aspx i dla każdej określ następujące
właściwości:

— Language: Visual C#
— Place code in separate file: zaznaczona
— Select master page: zaznaczona



W kolejnym oknie wybierz SzablonStrony.master i naciśnij Add.

Strony dodajemy, aby po kliknięciu na pozycje menu nie pojawiła się
informacja o błędzie.

2. Utwórz mapę
witryny



Wybierz z menu opcję Websites -> Add New Item lub naciśnij
kombinację Ctrl+Shift+A.



W wyświetlonym oknie dialogowym w obszarze Templates wybierz Site
Map a w polu Nazwa wpisz Web.sitemap. Naciśnij przycisk Add.



W głównym oknie aplikacji zostanie zaprezentowana zawartośd pliku.



Zamieo zawartośd pliku na następującą:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-
1.0" >
<siteMapNode>
<siteMapNode url="Default.aspx" title="Strona główna"
description="Przenieś do strony głównej" />
<siteMapNode title="Produkty"
description="Zapoznaj się z ofertą">
<siteMapNode url="Produkty.aspx" title="Przeglądaj"
description="Przejrzyj dostępne filmy" />
<siteMapNode url="Szukaj.aspx" title="Szukaj"
description="Wyszukaj po nazwie" />
</siteMapNode>
<siteMapNode title="Ankiety"
description="Wypełnij ankietę na stronie">
<siteMapNode url="Ankieta.aspx?view=nowy"
title="Szukam roweru"
description="Określ preferowane produkty" />
<siteMapNode url="Ankieta.aspx?view=wycieczki "
title="Szukam towarzystwa na wycieczki "
description="Opowiedz nam o sobie" />
</siteMapNode>
<siteMapNode title="Informacje" description="Dowiedz się więcej
o nas">
<siteMapNode url="Informacje.aspx" title="O nas"
description="Dowiedz się więcej o nas" />
<siteMapNode url="Uwagi.aspx" title="Zgłoś uwagę"
description="Zgłoś uwagę odnośnie działania serwisu" />
</siteMapNode>
</siteMapNode>
</siteMap>



Zapisz zmiany.

Piotr Bubacz

Moduł 6

ITA-103 Aplikacje Internetowe

Projektowanie serwisów internetowych

Strona 6-17

3. Dodaj
kontrolkę Menu



Przejdź do strony wzorcowej SzablonStrony.master. Przejdź do widoku
Source.



W miejsce napisu Menu wstaw kontrolkę SiteMapDataSource (okno
Toolbox, sekcja Data) i w oknie Properties:

— w polu ID wpisz MapaSerwisu
— w polu ShowStartingNode z listy rozwijanej wybierz False
— kontrolkę Menu (okno Toolbox, sekcja Navigation):



Obok dodanej kontrolki dodaj kontrolkę Dla kontrolki Menu (okno
Toolbox, sekcja Navigation) i w oknie Properties:

— w polu ID wpisz MenuGlowne
— w polu DataSourceID wpisz MapaSerwisu
— w polu Orientation z listy rozwijanej wybierz Horizontal



Zapisz zmiany i uruchom przygotowaną aplikację. Sprawdź wyświetlanie
menu i możliwośd wybierania poszczególnych stron.

4. Określ wygląd
kontrolki menu



Ponownie wybierz kontrolkę Menu MenuGlowne i w oknie Propoerties:
Określ właściwości CssClass dla następujących elementów:

— w

polu

DynamicHoverStyle-CssClass

wpisz

ZaznaczonyElementMenu

— w

polu

DynamicMenuItemStyle-CssClass:

wpisz

ElementMenuRozwijanego

— w polu StaticHoverStyle-CssClass wpisz ZaznaczonyElementMenu
— w

polu

StaticMenuItemStyle-CssClass

wpisz

ElementMenuNadrzednego



Do pliku Style.css dodaj następujące definicje stylów:

.ElementMenuNadrzednego
{ color: #000033; font-weight: bold; padding: 3px 10px; }
.ElementMenuRozwijanego
{ background: #F5F5F5; color: #000033; padding: 3px 10px; }
.ZaznaczonyElementMenu
{ background: #000033; color: White; }



Zapisz zmiany i uruchom przygotowaną aplikację. Sprawdź wyświetlanie
menu.

Piotr Bubacz

Moduł 6

ITA-103 Aplikacje Internetowe

Projektowanie serwisów internetowych

Strona 6-18

Problem 4 (czas realizacji 25 min)

Twój klient jest bardzo zadowolony z Twoich postępów w projekcie. Na dzisiejszym spotkaniu
pojawiła się nowa kwestia. Firma chciałby mied możliwośd szybkiej zmiany wyglądu strony bez
konieczności ingerencji w jej kod.

Zadanie

Tok postępowania

1. Dodaj
kompozycje do
projektu



W oknie Solution Explorer kliknij prawym przyciskiem i wybierz Add
ASP.NET Folder, a następnie Theme.



Określ nazwę nowej kompozycji jako NiebieskaSkorka.



Kliknij prawym przyciskiem myszy na folderze App_Themes i wybierz
Add ASP.NET Folder, a następnie Theme. Określ nazwę kompozycji jako
CzerwonaSkorka.

2. Skopiuj plik css
z głównego
katalogu aplikacji
do nowych
kompozycji i
odpowiednio
przygotuj
kompozycje
CzerwonaSkorka



Skopiuj plik Style.css do katalogu CzerwonaSkorka.



Przenieś plik Style.css do katalogu NiebieskaSkorka.



W nagłówku strony wzorcowej zmieo odniesienie do pliku CSS
umieszczonego w katalogu NiebieskaSkorka.



Zmieo style w kompozycji CzerwonaSkorka, tak, aby wyświetlana strona
była w odcieniach czerwieni.

3. Określ
aktywną
kompozycją
CzerwonaSkorka



Otwórz plik Web.config, a następnie odszukaj znacznika <pages>. Dodaj
do niego właściwośd theme="CzerwonaSkorka", teraz ten znacznik ma
wyglądad następująco:

4. Testowanie
zmian



Zapisz zmiany i przetestuj aplikację w przeglądarce.

Dlaczego w Visual Studio widad kompozycję NiebieskaSkorka, a w
przeglądarce widad CzerwonaSkorka?

Piotr Bubacz

Moduł 6

ITA-103 Aplikacje Internetowe

Projektowanie serwisów internetowych

Strona 6-19

Laboratorium rozszerzone

Przygotuj projekt strony dla firmy Adventure Works sprzedającej rowery. Do tego celu możesz
wykorzystad wybrany przez Ciebie szablon ze strony Open Source Web Design
(http://www.oswd.org).

W ramach projektu zdefiniuj wspólny wygląd przy pomocy strony wzorcowej oraz kompozycji.
Przygotuj i przetestuj co najmniej dwie różne kompozycje. Przygotuj też strukturę nowego serwisu.
Zaplanuj, że w serii będą dostępne następujące strony (lub grupy stron):



Strona główna – strona zawierająca informacje ogólne o sprzedawanym towarze



Nowości – strona zawierająca informacje o nowościach



Strona z informacją o produktach – strony umożliwiające przeglądanie lub wyszukiwanie
produktów



Ankieta dla klientów – ankieta dla klientów oraz ankieta opinie o stronie



Informacja o firmie – informacje o działalności firmy



Zawartość serwisu – strona zawiera mapę serwisu wyświetloną w postaci struktury

Wyświetl strukturę w menu oraz na stronie Zawartosc.aspx umieśd kontrolkę wyświetlającą mapę
serwis w postaci struktury.

Wyszukiwarka

Podobne podstrony:
ITA 103 Modul04
ITA 103 Modul02
ITA 103 Modul03
ITA 103 Modul05
ITA 103 Modul08
ITA 103 Modul01
ITA 103 Modul09
ITA 103 Modul03
ITA 103 Modul11
ITA 103 Modul13
ITA 103 Modul12
ITA 103 Modul10

więcej podobnych podstron