MasterPagePracownicy.aspx

Transkrypt

1 Zadanie 1. Utworzyd witrynę internetową według schematu opis pod schematem: MasterPage.aspx Strona główna (Default.aspx) Strona O firmie (Firmia.aspx) Strona Historia (Historia.aspx) Strona Kontakt (Kontakt.aspx) Strona Pracownicy (Pracownicy.aspx) MasterPagePracownicy.aspx Mariusz Iksioski (MIksinski.aspx) Dorota Nowak (DNowak.aspx) Anna Pawlak (APawlak.aspx) Grzegorz Kowalski (GKowalski.aspx) Czyli będzie to witryna, gdzie mamy dwie strony wzorcowe. Jest strona główna, która ma cztery podstrony (wszystkie korzystające z pierwszej strony wzorcowej) i jedna z tych podstron (Pracownicy.aspx) ma kolejne cztery podstrony (korzystające z drugiej strony wzorcowej). Oczywiście można pracowad ze stroną, którą zaczęliście Paostwo robid na poprzednich zajęciach. Etapy: 1. File New - Web Site (Plik - Nowy - Witryna sieci Web). Wybieramy ASP.NET Web Site (pustą stronę sieci Web) i wybieramy język C# Proszę zapisad w katalogu ze swoim nazwiskiem łatwiej będzie Wam znaleźd na kolejnych zajęciach (sugeruję też skopiowad pod koniec zajęd ten katalog po to, np. jakby ktoś inny skasował go lub jeśli będziecie chcieli zerknąd na to w domu). Lokalizację katalogu można sprawdzid w oknie właściwości, po kliknięciu na stronę w Solution Explorerze (Eksplorator rozwiązania) tam gdzie jest wyświetlona struktura Waszej strony (zwykle po prawej stronie ekranu).

2 2. Tworzenie Strony wzorowej MastePage.aspx oraz stron Firma, Historia, Kontakt, Pracownicy. a. Najłatwiej będzie najpierw skasowad stronę Default.aspx, która powstała, kiedy tworzyliśmy nowy dokument, ponieważ nie trzeba będzie ręcznie podłączad jej do strony wzorcowej. Proszę więc ją skasowad. b. Klikamy prawym przyciskiem myszy (PPM) na lokalizacji naszej strony (w moim przypadku na C:\strony_www\ooo\) i wybieramy Add New Item... (dodaj nowy element) i wybieramy Master Page (stronę wzorcową), czyli każemy dodad naszą pierwszą stronę wzorcową. c. Poniżej oraz powyżej ContentPlaceHolder1 (to jedna z serwerowych kontrolek w ASP.NET służąca do przechowywania treści taki zasobnik, w miejscu którego będą się wyświetlały zawartości poszczególnych stron) proszę wpisad jakiś dowolny tekst żeby było widad efekty. Wpisywad można w oknie Design (przełączamy się do tego okna w dolnej części strony) Efekt: i. WAŻNE strona wzorcowa (Master Page) nie jest, mimo nazwy, zwykłą stroną, którą można wyświetlid. Jest jakby szablonem, który jest używany wtedy, kiedy ma się wyświetlid jakaś strona. Albo inaczej jest oddzielnym plikiem zawierającym wszystkie wspólne elementy dla jakiejś grupy stron. Chodzi o to, żeby nie trzeba było na każdej ze stron od nowa tworzyd np. nagłówka, stopki, menu itp. Na stronach korzystających ze wspólnej strony wzorcowej jest tylko odsyłacz do tejże strony.

3 d. Utworzyd (Add New Item... Web Form) cztery pierwsze strony (zwane tu formularzami sieci Web) Firma, Historia, Kontakt, Pracownicy. Przy tworzeniu poszczególnych stron proszę zaznaczyd pole Select Master Page, żeby móc wybrad stronę wzorcową dla każdej z tworzonych stron. Efekt powinien byd taki:

4 e. Proszę zobaczyd jak w tym momencie wygląda Wasza strona mając otwarte okno którejś ze stworzonych stron (np. Firma) proszę wcisnąd Ctrl+F5. Uruchomi się przeglądarka i zobaczymy efekt. Proszę zwrócid uwagę, że widzimy to co wpisaliśmy na stronie wzorcowej już chyba wiadomo dlaczego :) f. Teraz wpiszmy coś w ContentPlaceHolder1 na stronie Firma. g. Proszę uruchomid podgląd strony (Ctrl+F5), efekt powinien byd taki: h. Proszę powpisywad coś na pozostałych stronach, żeby nie były puste (strony: Historia, Kontakt, Pracownicy). 3. Tworzenie Strony wzorowej MastePagePracownicy.aspx oraz stron MIksinski.aspx, DNowak.aspx, APawlak.aspx, GKowalski.aspx. a. Utworzyd nową stronę wzorcową. Tym razem będzie to strona wzorcowa dla stron poszczególnych pracowników. Nazwa: MasterPagePracownicy.aspx b. Utworzyd strony pracowników podpięte do powyższej strony wzorcowej. c. Na stronie wzorcowej proszę wpisad Strona pracownika: powyżej ContentPlaceHolder1 d. Na stronach poszczególnych pracowników na razie proszę wpisad tylko ich nazwiska.

5 Zadanie 2. Tworzenie mapy strony oraz menu, pozwalającego poruszad się po utworzonych stronach. Tworzenie menu z wykorzystaniem kontrolki TreeView. 1) najpierw musimy stworzyd plik Web.sitemap czyli PrawyPrzyciskMyszy Add New Item... (Dodaj nowy element) Site Map (mapa strony) a. w pliku Web.sitemap mamy wiersze o strukturze: <sitemapnode url="" title="" description="" /> będziemy to uzupełniad tyle razy ile mamy stron. sitemapnode to tzw. węzeł b. generalnie po uzupełnieniu wiersze powinny wyglądad, jak: <sitemapnode url="default.aspx" title="strona główna" description="" /> oczywiście w url="xxxxxxxx" mają byd nazwy naszych plików a w title="xxxxxxxxx" tytuły c. dodatkowo w description="" dodamy opisy podstron (to nie jest konieczne) d. proszę to zrobid dla wszystkich stron 2) dodajemy i konfigurujemy nawigację na stronie MasterPage.master a. umieszczamy na MasterPage.master kontrolkę TreeView b. w polu Choose Data Source wybieramy New Data Source i w oknie, które się pojawi, wybieramy Site Map, czyli nasz plik z mapą strony Jeśli wpiszemy dane w taki sposób (poniżej przykłady z użyciem innych nazw stron niż te w poprzednim zadaniu, ale oczywiście Wy używacie swoich stron) Efekt powinien byd taki: Możemy modyfikowad hierarchię wyświetlania stron, np. konstruując Site Map tak: (proszę pytad prowadzącego to nie jest trudne jak się złapie zasadę) Otrzymamy taki efekt:

6 A tak: Taki:

7 Zadanie 3. Tworzenie menu z wykorzystaniem kontrolki Menu (*w niektórych przeglądarkach mogą nie byd widoczne niektóre części menu rozwiązanie problemu jest w pliku Opis modyfikacji do wykonania, żeby menu wyświetlało się prawidłowo.pdf 1) Do MasterPage.master dodajemy kontrolkę Menu 2) w polu Choose Data Source wybieramy New Data Source i w oknie, które się pojawi, wybieramy Site Map, czyli nasz plik z mapą strony Efekt (oczywiście na stronach Firma, Historia, Kontakt, Pracownicy, ponieważ te strony wykorzystują MastePage.aspx: Menu może byd zarówno dynamiczne (rozwijalne) jak i statyczne (stale widoczne wszystkie pozycje). Proszę zwrócid uwagę, że po najechaniu na link pojawia się to co wpisaliśmy w description, oczywiście będzie tak zarówno w TreeView, jak i w Menu.

8 Zadanie 4. SiteMapPath ścieżka określająca, gdzie jesteśmy. Działa ona na podstawie pliku Web.sitemap. Czyli efektem jest ścieżka, pokazująca, gdzie jesteśmy (ostatnia pozycja) i pokazująca ścieżkę stron wyżej w hierarchii Np.:

9 Zadanie 5. Zadanie 6. Trochę z "innej beczki": Wstawianie na stronę bieżącej daty. 1) napisad na stronie Dzisiaj jest: 2) obok napisu wstawid kontrolkę Label 3) dodad procedurę obsługi zdarzenia Page_Load (oczywiście dla strony, na której jest kontrolka - proszę pytad, łatwiej mi będzie pokazad, niż opisywad a Paostwu łatwiej będzie zrozumied, jeśli pokażę o co chodzi) Label1.Text = DateTime.Today.ToShortDateString(); 4) sprawdzid czy działa Dodanie łącza do wysyłania a. 1) po prostu do kodu strony (w naszym przypadku MasterPage) wstawiamy: <a tutaj jakiś tekst</a>

10 Zadanie 7. Użycie stylów Proszę dodad katalog tematów (skórek). Czyli dodamy ASP.NET Folder - Theme. Powstanie nowy katalog/folder ASP.NET (o nazwie App_Themes) a w nim pierwszy temat (oczywiście można wpisad własną nazwę) do tego katalogu proszę dodad nowy element - plik arkusza stylów (wprawdzie arkusz stylów może byd w dowolnym miejscu, ale tak jest porządnie i daje to jeszcze kilka możliwości, które poruszymy innym razem).

11 Zadanie 8. Proszę połączyd stronę wzorcową z plikiem stylów dla przypomnienia - w sekcji <head> należy dodad: <link rel="stylesheet" type="text/css" href="tu_adres_pliku_css" /> Zadanie 9. Następnie proszę dodad kilka selektorów, żeby pozmieniad (formatowad) poszczególne fragmenty strony. Np. stworzyd selektor stylu w pliku CSS:.jakas_nazwa { border-left: 10px solid red; /*czyli lewe obramowanie elementu o grubości 10pt linia ciągła, czerwona*/ } w pliku strony (albo na stronie wzorcowej) w znaczniku obrazka musimy dopisad CssClass="jakas_nazwa" czyli: <asp:image ID="Image1" runat="server" CssClass=" jakas_nazwa" ImageUrl="~/nemo1.jpg" /> albo we właściwościach kontrolki Image wpisujemy (można też wybrad z listy rozwijalnej) nazwę klasy w zaznaczonym miejscu: W podobny sposób (zadanie 7 i 8) dodad drugi temat i połączyd go z kolejnym arkuszem stylów (który również należy dodad). Oczywiście proszę w tym arkuszu dodad jakieś style. Dla przypomnienia (mówiłem na wykładzie) - w pliku CSS można wykorzystad kreatora/budowniczego stylów - po prostu klikamy prawym przyciskiem myszy w opisie selektora i wybieramy Build Style:

12 wyskoczy okienko, w którym będziemy mogli budowad style (proszę nie klikad "jak leci", ponieważ niektóre elementy wykluczają inne): Podsumowując: pod koniec dzisiejszych zajęd witryna powinna składad się z dziewięciu stron, powinny one bazowad na dwóch różnych stronach wzorcowych (pięd stron na jednej a cztery pozostałe - poszczególnych pracowników - na drugiej). Strony wzorcowe powinny korzystad z dwóch różnych plików CSS, w których powinny byd różne formatowania poszczególnych elementów stron.