Kurs HTML - Narzędzia do edycji

Autor: Wojtek Raczyński

Opublikowano: 2011-08-19

Obecnie tworzy się rozbudowane serwisy internetowe wykorzystujące wiele technologii, takich jak np. CSS czy JavaScript. W celu łatwego i sprawnego tworzenia takich stron warto korzystać z narzędzi do tego przeznaczonych. W tym artykule omówię, jak korzystać z jednego z najlepszych i przy tym darmowych narzędzi – Visual Web Developer 2010 Express.

Artykuł jest częścią cyklu artykułów o tworzeniu stron w HTML.

Po przeczytaniu tego artykułu będziesz:

• potrafił tworzyć i edytować kod HTML w widoku projektowym i tekstowym,
• umiał edytować style CSS i aplikować je z Themes Managera,
• wiedział, jak wykorzystywać mechanizmy ułatwiające pisanie kodu takie jak intellisense.

Implementacja

Stwórz nowy projekt, wybierając File­­>New-->Project… i wybierz ASP.NET Empty Web Application. Teraz dodaj do projektu pusty plik html (prawy przycisk myszy na projekt i z menu Add-->New Item...) (rysunek 1).

**Rys.1.Dodawanie pliku do projektu.

W oknie wybieramy plik HTML Page. Po prawej stronie możemy przeczytać krótki opis danego typu pliku. Oprócz pliku html będą interesować nas również Style Sheet (plik css do tworzenia stylów) oraz JScript File do tworzenia skryptów JavaScript.

Edycja pliku html w różnych widokach

Visual Web Developer udostępnia nam trzy widoki pracy z plikami html (i nie tylko), tzn.: Design, Split i Source. Omówmy krótko każdy z widoków:

• Design – pozwala tworzyć stronę metodą drag & drop. Przeciągamy znaczniki z Toolboxa, ustawiamy ich położenie i rozmiar poprzez rozciągnięcie i przesunięcie ich na stronie. Dwukrotne kliknięcie na utworzoną kontrolkę spowoduje wstawienie do kodu szkieletu skryptu JavaScript. Wszystkie operacje są odwzorowywane w kodzie strony;
• Source – pozwala na bezpośrednie edytowanie kodu strony. W tym widoku również możemy przeciągać znaczniki z Toolboxa w odpowiednie miejsce kodu strony. Dodatkowo mamy do dyspozycji mechanizm Intellisense (o którym powiemy trochę później);
• Split – ten widok łączy Design i Source. Ekran edycji jest dzielony na dwie części, dzięki czemu możemy obserwować, jak zmiany w kodzie wpływają na wygląd (i na odwrót).

Edytując plik w dowolnym z widoków, mamy do dyspozycji wiele ułatwień, a każdą czynność możemy wykonać na wiele sposobów.

Najczęściej tworzymy cały kod strony, wpisując ręcznie po kolei nazwy znaczników i właściwości. W takim przypadku z pomocą przychodzi nam Intellisense. W momencie, kiedy wpisujemy nawias otwierający znacznik, pojawia się menu pokazujące wszystkie możliwe tagi.

Drugi sposób to skorzystanie z opcji dostępnych w menu (konkretnie Format i Table). Opcje dostępne w menu Format dają nam możliwość zmienienia praktycznie wszystkich właściwości na stronie bez pisania jednej linii kodu. Pozycja Table pozwala nam stworzyć tabele oraz dodawać, usuwać i modyfikować jej komórki.

Dla sprawdzenia, jak działa to w praktyce, stwórzmy tabele, połączmy dwie komórki w jedną i ustawmy obramowanie.

1) Aby wstawić tabele, wybierz z menu Table-->Insert Table:

• w otwartym oknie ustaw liczbę wierszy i kolumn dla tabeli. Jest również możliwość ustawienia takich parametrów jak wysokość i szerokość tabeli, jej położenie oraz wygląd (obramowanie tabeli ustawimy gdzie indziej),
• w polu Color w grupie Borders wybierz kolor obramowania. Ustaw również grubość obramowania w polu Size.

2) Aby scalić komórki, zaznacz komórki do scalenia, trzymając wciśnięty Ctrl (kursor powinien być białym krzyżykiem), a następnie z menu wybierz Table-->Modify-->MergeCells.

Więcej możliwości modyfikacji wyglądu elementów strony dostarcza nam menu Format. Za jego pomocą możemy również modyfikować wygląd tabel. Zmieńmy teraz obramowanie naszej tabeli na podwójną linię oraz kolor zawartości na żółty:

1) Wybierz z menu Format-->Borders and Shading... (rysunek 2):

• W otwartym oknie wybierz zakładkę Borders i z listy w Style wybierz double,
• przejdź do zakładki Shading i w polu Foregroundcolor wybierz żółty.

Kolejnym sposobem jest skorzystanie z okna Properties. Wybierając dowolny element strony w oknie, otrzymujemy listę właściwości, jakie możemy zmodyfikować. Wybierając właściwość, która ma zdefiniowane możliwe wartości, otrzymujemy listę wartości do wyboru.

**Rys.2.Wstawianie obramowania tabeli.

Edycja stylów CSS

Style CSS możemy tworzyć na trzy sposoby. Pierwszy to stworzenie pliku .css i wpisywanie wszystkiego odręcznie (co nie jest chyba najwygodniejszym rozwiązaniem). Na szczęście również tutaj dostępny jest Intellisense, który podpowie nam co pisać.

Drugim sposobem jest skorzystanie z CSS Properties (jeśli nie jest widoczne w głównym oknie, wybieramy z menu View-->Css Properties). To okno dostarcza nam wszystkie właściwości aktualnie wybranego znacznika. Wyświetla również listę stylów, jakie zastosowaliśmy do naszej strony (Applied Rules).

Trzeci sposób to stworzenie stylu poprzez wybranie z menu Format-->New style. Jest to rozwiązanie dające duże możliwości tworzenia nowych stylów – przyjrzymy się bliżej temu oknu (rysunek 3).

**Rys.3.Tworzenie stylów css.

W lewym górnym rogu okna mamy dwa pola rozwijane. Pierwsze pozwala wybrać selektor, do jakiego będzie odnosił się tworzony styl (można stworzyć własny selektor i przypisać go do znaczników). Drugie pole określa miejsce, gdzie będzie znajdował się opis naszego stylu (czy oddzielny plik, czy w kodzie strony). Zalecane jest umieszczanie stylu w osobnym pliku – ułatwi to późniejsze modyfikacje wyglądu strony (wystarczy podmienić jeden plik z stylami). Poniżej znajduje się lista kategorii stylów (czcionki, tła itd.). Dla każdej kategorii w głównej części okna wyświetlane są wszystkie właściwości, jakie możemy ustawić, i możliwe wartości do ustawienia. Po stworzeniu arkuszy stylów możemy je zastosować do niektórych stron, wybierając Format-->Attach Style Scheet...

Visual Web Developer dostarcza nam również możliwość zarządzania stylami na naszej stronie poprzez okno Manage Styles i Apply Style, który umożliwia zmianę lokalizacji stylów i zmienianie ich porządku. Wyświetla tylko style użyte na danej stronie. Okno Apply Styles daje możliwość szybkiego zastosowania stylów na naszej strony. Wyświetla wszystkie style dotyczące wybranego elementu wraz z podglądem danego stylu (rysunek 4). 

**Rys.4. Okna Apply Styles i Manage Styles.

Edycja JavaScript

Visual Web Developer oferuje wiele udogodnień w pisaniu kodu JavaScript i sprawdzaniu jego działania. Przyjrzyjmy się najpierw systemowi podpowiedzi dla JavaScript w kontekście używania jQuery. Na początek musimy pobrać najnowsze jQuery ze strony. Pobrane pliki dołączamy do projektu.

W czasie pisania kodu wciskamy Ctrl+Spacja i otrzymujemy listę możliwych funkcji do wywołania, ich opis i możliwe parametry. Jeśli funkcja jest przeciążona (ta sama funkcja z innymi parametrami), otrzymujemy listę wszystkich możliwych wersji tej funkcji (rysunek 5). Po wybraniu funkcji i wpisaniu nawiasu otwierającego „(„ otrzymujemy listę parametrów wraz z dokładnym opisem każdego parametru.

**Rys.5.Podpowiedzi dla jQuery.

Jeśli w czasie tworzenia skryptu w JavaScript napotkamy błędy w działaniu skryptu, warto skorzystać z dostępnego w VWD debuggera. Aby zobaczyć, co dzieje się wewnątrz kodu:

1. zaznacz linię, w której chcesz zatrzymać wykonywanie się skryptu, i umieść tam brakepoint (kliknij prawym przyciskiem myszy i wybierz Breakpoint-->Insert Breakpoint),
2. uruchom skrypt, wciskając klawisz F5 lub wybierając z menu Debug-->Start Debugging.

Jeśli skrypt napotka brakepoint, zatrzyma swoje działania i w zakładce Locals (jeśli jej nie widzimy, to w menu wybieramy Debug-->Windows-->Locals) wyświetli aktualne wartości zmiennych oraz zdarzeń (rysunek 6). Aby kontynuować działanie programu, wciskamy F5 lub zieloną strzałkę. Można też poruszać się po kodzie skryptu, korzystając z klawiszy F10, F11 oraz Shift+F11 lub klikając ikonki Step Into, Step Over i Step Out (niebieskie strzałki przy czarnych linijkach).

**Rys.6.Debuggowanie skryptu JavaScript.

Podsumowanie

W tym artykule omówiliśmy, jak wykorzystywać możliwości Visual Web Developer 2010 w dziedzinie tworzenia i edycji stron HTML i styli CSS. Dowiedzieliśmy się, jak korzystać z narzędzi wspomagających, takich jak Intellisense i okna Manage Styles i CSS Properties. Poznaliśmy również zastosowanie Intellisense w kontekście wykorzystania jQuery. Udało nam się również wykorzystać debugger do analizy kodu JavaScript i poruszania się po nim.

Z kolejnego artykułu dowiemy się, jak wygląda struktura dokumentu HTML oraz za co odpowiadają znaczniki doctype, meta i xhtml.