Gwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywna
 

Wszystkich zainteresowanych statycznymi projektami stron internetowych, zapraszamy do zapoznania się z artykułem opisującym utworzenie pierwszego projektu i pierwszego pliku w HTML5. Najlepszym wyborem dla projektu jest „Eclipse IDE for Java EE Developers”, posiada bardzo dobre wsparcie dla HTML i CSS. Jak również „Web Page Editor” umożliwiający projektowanie stron metodą przeciągnij i upuść.

Wszyscy, którzy jeszcze nie pracowali w opisywanym środowisku programistycznym powinni również zapoznać się z artykułem „Wprowadzenie do środowiska programistycznego Eclipse”.

Po uruchomieniu środowiska programistycznego należy uruchomić kreator tworzenia projektu („New>Project, wybrać z listy Web>Static Web Project”). Formularz kreatora projektu wypełniono zgodnie z informacjami na (rys. 1.). Po zatwierdzeniu ustawień zostanie wygenerowany pusty projekt (rys. 2.).

 

Kreator projektu Static Web Project.

Rys. 1. Kreator projektu „Static Web Project”

 

Nowo utworzony projekt Static Web Project.

Rys. 2. Nowo utworzony projekt „Static Web Project”

 

Po utworzeniu projektu należy utworzyć pierwszy plik. Należy wybrać katalog projektu wiedzanaplus a następnie w menu kontekstowym „New>HTML File” (rys. 3.). Inny sposób to „New>Other” i wybrać z listy „Web>HTML File”.

 

Otwieranie kreatora pliku html.

Rys. 3. Otwieranie kreatora pliku html

 

W uruchomionym kreatorze należy podać nazwę pliku np.: index.html, a następnie przycisk „Next” (rys. 4.). Dzięki temu istnieje szansa wybrania szablonu strony dla HTML5 (rys. 5.).

 

Kreator nowego pliku HTML.

Rys. 4. Kreator nowego pliku HTML

 

Wybieranie szablonu HTML5 z listy.

Rys. 5. Wybieranie szablonu HTML5 z listy

 

Po zatwierdzeniu utworzenia pliku, zostanie on automatycznie otwarty w głównym oknie środowiska Eclipse (rys. 6.).

 

Tworzenie statycznej strony w HTML5.

Rys. 6. Tworzenie statycznej strony w HTML5

 

Jednak, jeśli chcemy skorzystać z funkcji „Przeciągnij i upuść” kontrolek HTML musimy uruchomić „Web Page Editor”. Zaznaczamy utworzony plik np.: index.html a następnie w menu kontekstowym „Open With>Web Page Editor” (rys. 7.).

 

Otwieranie Web Page Editor.

Rys. 7. Otwieranie Web Page Editor

 

Po uruchomieniu „Web Page Editor” można z „Palette” przeciągać kontrolki (rys.8.). Najlepszym wyjściem jest przeciąganie kontrolki do okna z samym kodem HTML, gdyż dzięki temu mamy pełną kontrolę nad wstawianiem kodu w odpowiednie miejsce.

Dobrym pomysłem jest również wybranie interesującej nas kontrolki np.: „submit” i uruchomienie dla niej menu kontekstowego (rys. 8.). Jak widać w dolnej części środowiska Eclipse można również podawać wartości dla atrybutów kontrolki.

 

Tworzenie strony przy pomocy edytora Web Page Editor.

Rys. 8. Tworzenie strony przy pomocy edytora „Web Page Editor”

 

Warto przeczytać:

Wybrane książki:

Książki Helion

Promocja dnia

REKLAMA

Tagi - Popularne