Podręcznik użytkownika Anuluj

Programowanie zawartości WWW za pomocą programu Dreamweaver

 

 

Ogólny obieg pracy związany z projektowaniem i programowaniem serwisów WWW za pomocą programu Dreamweaver

W tym artykule omówiono sposób realizacji poszczególnych etapów lub faz projektowania treści WWW w programie Dreamweaver.

Uwaga:

Przyjęto założenie, że czytelnik ma wiedzę na temat domeny WWW oraz języków HTML, CSS i JavaScript na poziomie początkującym lub średnio zaawansowanym.

  1. Pierwszą fazą programowania treści WWW jest planowanie. W tej fazie należy przeanalizować potrzeby odbiorców oraz wymagania techniczne i marketingowe. Niezbędne jest także zgromadzenie informacji potrzebnych do zaprojektowania i opublikowania serwisu WWW oraz odpowiedzi na takie pytania, jak:

    • Jakiego usługodawcę wybrać w celu hostingu serwisu WWW? Czy masz dostęp umożliwiający przesłanie plików na serwer publikacji?
    • Jakiej nazwy domeny będzie używać tworzony serwis WWW?
    • W przypadku migracji istniejących serwisów do programu Dreamweaver — gdzie są obecnie przechowywane ich pliki i zasoby? Czy masz dostęp do serwera, na którym przechowuje się te informacje?
    • Jeśli chcesz utworzyć serwis dynamiczny, to jakiego serwera użyć do testowania dynamicznego wyświetlania danych? Czy znasz szczegółowe informacje dotyczące serwera aplikacji WWW, który ma być używany do ładowania danych dynamicznych?
    • Jakie rodzaje zasobów będą potrzebne w tworzonym serwisie WWW?
    • Czy będziesz projektować te zasoby od podstaw? Jeśli zasoby te już istnieją, to czy masz do nich dostęp?
    • Jakie aplikacje chcesz wykorzystać do zaprojektowania zasobów?
    • Czy planujesz utworzenie serwisu reagującego?

    Jeśli masz już przejrzystą koncepcję projektu i miejsca hostingu serwisu WWW oraz wybierasz jako narzędzia program Dreamweaver i platformę Creative Cloud, przejdź do następnego kroku.

  2. Sprawdź, czy masz wszystkie zasoby potrzebne do serwisu WWW. Zgromadź je i uporządkuj w folderach lokalnych albo w Bibliotekach Adobe Creative Cloud.

  3. Utwórz nowy dokument w programie Dreamweaver jako:

    • nowy, pusty dokument,
    • dokument oparty na szablonach początkowych dołączonych do programu Dreamweaver, 
    • dokument oparty na plikach szablonów (*.dwt) utworzonych przez innych.
    Uwaga:

    Jeśli nie znasz jeszcze programu Dreamweaver lub dopiero poznajesz podstawy projektowania zawartości WWW, skorzystaj z szablonów startowych, które znacznie ułatwiają rozpoczęcie pracy.

    Nawet jeśli zamierzasz zacząć projekt od zera, warto rzucić okiem na te strony, aby poznać elementy skutecznego projektu WWW.

  4. Poświęć kilka minut na zapoznanie się z przestrzenią roboczą w programie Dreamweaver. Znajdź przestrzeń roboczą, która jest dla Ciebie najwygodniejsza, a następnie ustaw motyw kolorów. Ułóż poszczególne panele stosownie do swoich potrzeb.

  5. Skonfiguruj serwis w programie Dreamweaver. Utwórz strukturę folderów zawierającą pliki i zasoby. Po zebraniu informacji i określeniu struktury możesz przystąpić do tworzenia serwisu. (Zobacz Informacje o serwisach programu Dreamweaver).

    Na tym etapie warto skonfigurować połączenia z serwerami zdalnymi oraz ustawić serwery testowe (jeśli tworzysz zawartość dynamiczną). 

  6. Rozpocznij od kodowania stron WWW w widoku Kod albo opracowywania ich układu w widoku Projekt lub widoku aktywnym.

    Jeśli zamierzasz korzystać z kompozycji z programu Photoshop, możesz wydzielić takie zasoby do użycia w programie Dreamweaver. Więcej informacji o pracy z kompozycjami programu Photoshop: Narzędzie Extract w programie Dreamweaver.

    Dodaj poszczególne elementy projektu, takie jak tekst, obrazy, efekty najazdu, mapy obrazów, kolory, filmy, dźwięki, odsyłacze HTML, tabele itp.

  7. Opracuj wygląd strony za pomocą stylów CSS. 

    Program Dreamweaver udostępnia wiele metod pracy ze stylami CSS:

    • Kod stylów CSS można napisać ręcznie.Informacje o funkcjach programu Dreamweaver przydatnych podczas ręcznego pisania stylów CSS podano w artykule Środowisko programistyczne w programie Dreamweaver.
    • Jeśli nie masz dużej wprawy w tworzeniu stron za pomocą stylów CSS, możesz skorzystać z panelu Projektant CSS, który ułatwia posługiwanie się tymi stylami. Więcej informacji: Tworzenie układu strony za pomocą panelu Projektant CSS.
    • Program Dreamweaver zapewnia także obsługę preprocesorów Sass oraz Less, jeśli preferujesz pracę z takimi plikami. Pliki Sass i Less można włączać do serwisu programu Dreamweaver i korzystać z nich. Dreamweaver automatycznie kompiluje te pliki (można również zrobić to ręcznie), tak więc wyniki zmian stylów CSS są widoczne w czasie rzeczywistym.Więcej informacji o używaniu plików Sass i Less w programie Dreamweaver: Preprocesory CSS.
  8. Skonfiguruj aplikację WWW w celu tworzenia zawartości dynamicznej.

    Wiele serwisów internetowych zawiera strony dynamiczne, umożliwiające odwiedzającym przeglądanie informacji przechowywanych w bazach danych i pozwalające użytkownikom na dodawanie i edycję informacji w bazach danych. Aby utworzyć takie strony, najpierw należy skonfigurować serwer WWW i serwer aplikacji, utworzyć lub zmodyfikować serwis programu Dreamweaver i połączyć się z bazą danych. Więcej informacji: Dynamiczne serwisy, strony i formularze WWW.

  9. Tworzenie dynamicznych stron internetowych.

    W programie Dreamweaver można zdefiniować wiele źródeł zawartości dynamicznej, łącznie z zestawami rekordów wydzielonych z baz danych, parametrami formularzy oraz komponentami JavaBeans. Aby dodać zawartość dynamiczną, wystarczy przeciągnąć tę zawartość na stronę.

    Stronę można skonfigurować do wyświetlania jednego rekordu albo wielu rekordów naraz. Można wyświetlać więcej niż jedną stronę rekordów, dodać specjalne łącza umożliwiające przechodzenie między poszczególnymi stronami rekordów, a także tworzyć liczniki umożliwiające użytkownikom śledzenie rekordów. Więcej informacji: Dynamiczne serwisy, strony i formularze WWW.

  10. Przetestuj, wyświetl podgląd, a następnie opublikuj swój serwis WWW. 

    Podczas tworzenia stron trzeba wyświetlać ich podgląd, aby sprawdzić, czy serwis wygląda i zachowuje się zgodnie z projektem. Pracując w widoku Podzielony, można ustawić obok siebie widok Kod oraz widok Aktywny.

    Można także wyświetlać podgląd stron internetowych w czasie rzeczywistym w przeglądarce.

    Jeśli podgląd na żywo nie jest potrzebny, możesz skorzystać ze zwykłej funkcji podglądu w przeglądarce.

    Jeśli zostały już zdefiniowane połączenia z serwerami zdalnymi, to aby opublikować serwis, trzeba przesłać pliki na odpowiedni serwer.

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?