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.
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
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.
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)
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. http://onet.pl) 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).
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... 4.... albo korzystamy z konstruktora stylów (klikamy PPM wewnątrz selektora i wybieramy "Build Style..."
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.