plik

Piotr Bubacz

Moduł 6

ITA-103 Aplikacje Internetowe

Projektowanie serwisów internetowych

Strona 6-2

Informacje o module

Opis modułu

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.