Zadanie 1. Tworzenie nowej "strony sieci WEB". Będziemy korzystad ze stron w technologii ASP.NET.

Transkrypt

1 Zadanie 1. Tworzenie nowej "strony sieci WEB". Będziemy korzystad ze stron w technologii ASP.NET. Ważne! Przy pierwszym uruchomieniu Visual Studio zostaniemy zapytani, jaki ma byd podstawowy język programowania używany przy tworzeniu projektów - wybierzmy C# (oczywiście można to ustawid również później, w ustawieniach programu). Utworzymy nową, pustą stronę: Wybierzemy ASP.NET Empty Web Site (pusta strona ASP.NET) - strzałka czerwona. Proszę zwrócid uwagę czy wybrany jest język "Visual C#". Proszę zmienid nazwę na jakąś własną, jednocześnie proszę zwrócid uwagę na to, gdzie jest zapisywana strona (strzałka niebieska). Efektem będzie stworzenie katalogu z jednym plikiem (web.config), którym na razie nie będziemy się zajmowad (a w tym pliku są parametry naszej strony). Okno "Solution Explorer" to okno, w którym mamy strukturę naszej strony (pliki i katalogi), w tym miejscu będziemy dodawad inne pliki - strony, pliki css itd.

2 Zadanie 2. Utworzymy witrynę z kilkoma stronami i nauczymy się poruszad po programie i korzystad z podstawowych narzędzi. 1. Aby dodad nową stronę (plik strony, jak wcześniej mieliśmy nowe strony HTML), należy kliknąd prawym przyciskiem myszy (PPM) na nazwie katalogu (w oknie Solution Explorer) i dodajemy nowy element (Add New Item...) 2. Wybieramy Web Form (Formularz sieci web - czyli nasz podstawowy typ stron) możemy zmienid nazwę strony (niebieska strzałka), zmienid nazwę możemy oczywiście również później. 3. Powstanie nowa strona, otworzy się ona w widoku źródła (Source) Proszę zauważyd, że struktura jest podobna do wcześniejszych stron HTML, jedynie są dodatkowe wpisy z parametrami. częśd strony o strukturze "zwykłego" HTMLa

3 Zadanie 3. Przedwiczyd inne widoki, w których możemy pracowad - są to Design i Split. W pierwszym będziemy mieli widok strony a w drugim - stronę podzieloną na dwie części, w jednej będzie widok, a w drugiej kod strony (poniżej dodałem trochę treści i rysunek, żeby było widad nie tylko pustą stronę). Proszę zauważyd, że z lewej strony jest zakładka paska narzędzi "Toolbox", możemy go rozwinąd i przypiąd (pineska) tak, żeby nie chował się. A jeśli ktoś woli, to można oczywiście odpiąd ten pasek, wtedy będzie się aktywował po kliknięciu na niego.

4 Zadanie 4. Proszę stworzyd trzy strony. Na stronach umieścid trochę tekstu. Na każdej ze stron wstawid tabelkę (użyd kontrolki table z grupy HTML - niebieska strzałka) Na każdej ze stron dodad jakiś obrazek (ściągnąd z Internetu) za pomocą kontrolki Image - żółta strzałka. Proszę połączyd hiperłączem każdą stronę z pozostałymi - czerwona strzałka. Użyjcie kontrolek (na następnej stronie trochę dłuższy opis) - po prostu przeciągamy kontrolkę na naszą stronę, - ustawienia kontrolek (np. adres URL strony, do której ma prowadzid hiperłącze) ustawiamy w oknie właściwości (Properties), które to okno możemy włączyd np. w menu Widok (View), kilka przykładowych ustawieo opisane poniżej Okno właściwości hiperłącza Okno właściwości obrazka adres strony, do której ma prowadzid link (NavigateURL) tekst, który będzie się pojawiał w linku (Text) wysokośd obrazka obrazka (Height) adres obrazka (ImageURL) szerokośd obrazka obrazka (Width)

5 Wykorzystanie kontrolki HyperLink. W oknie właściwości (Properities): w polu Text możemy wprowadzid tekst, który będzie się wyświetlał, w polu NavigateURL możemy wprowadzid adres strony, do której przejdziemy po kliknięciu na hiperłącze o (może to byd zarówno adres jednej z naszych stron, jak i dowolna strona WWW. W tym drugim przypadku najłatwiej po prostu wejśd na tą stronę w przeglądarce, skopiowad pełny adres i wkleid do pola NavigateURL np. proszę stworzyd kilka hiperłączy do różnych stron internetowych. Wstawianie obrazów na stronę - używanie kontrolki Image. Dodad nowy katalog/folder do naszej strony (PPM New Folder i zmienid nazwę na np. Obrazy, oczywiście nie jest to konieczne, ale tak jak mówiłem na wcześniejszych zajęciach, pozwala to na utrzymanie porządku). Proszę ściągnąd z Internetu kilka obrazków (najlepiej różnych) i zapisad je w utworzonym folderze. WAŻNE proszę zwrócid uwagę, że nie zapisanych zdjęd/obrazów będzie od razu widad w Solution Explorerze. Żeby były widoczne musimy odświeżyd widok (PPM Refresh Folder, czyli odśwież). Wstawianie obrazów jest banalne po prostu wstawiamy kontrolkę Image i w polu ImageURL wstawiamy adres obrazka (najłatwiej kliknąd w trzy kropeczki na koocu tego pola i pokazad plik obrazka). Oczywiście można również podad adres jakiegoś obrazka/zdjęcia, które znajduje się gdziekolwiek w Internecie. Można to zrobid kopiując adres tego zdjęcia (PPM na obrazku Kopiuj adres obrazka i wklejamy ten adres do pola ImageURL).

6 Zadanie 5. Arkusz stylów. 1. Dodajemy nowy element - PPM - Add New Item... Wybieramy Style Sheet 2. Powstanie nowy plik w głównym katalogu 3. Style konfigurujemy tak samo, jak na wcześniejszych zajęciach albo korzystamy z konstruktora stylów (klikamy PPM wewnątrz selektora i wybieramy "Build Style..."

7 5. Oczywiście musimy połączyd strony, które mają korzystad z arkusza stylów z tym właśnie arkuszem. czyli dodajemy w sekcji <head> linię <link rel="stylesheet" type="text/css" href="stylesheet.css" /> uwaga: niekiedy potrzebny jest nieco inny zapis "~/" przed adresem pliku (jeśli plik ze stylami nie byłby widziany przez program): <link rel="stylesheet" type="text/css" href="~/stylesheet.css" /> 6. Proszę zbudowad kilka stylów i wykorzystad je na stronie.