W świecie kreatorów witryn internetowych typu „przeciągnij i upuść” program Adobe Dreamweaver spisał się dobrze, pozostając na miejscu wśród konkurencji. Wyposażony w świetne funkcje i mnóstwo narzędzi ułatwiających życie, to oprogramowanie jest doskonałym wyborem dla projektantów stron internetowych i programistów.

Ale jak zbudować swoją pierwszą witrynę internetową za pomocą programu Dreamweaver?

Pierwsze kroki z programem Dreamweaver

Musisz uzyskać kopię programu Adobe Dreamweaver, zanim zaczniesz z nią pracować, ale dostępna jest bezpłatna wersja próbna.

Udaj się do Cegła suszona na słońcu zaloguj się lub zarejestruj konto i pobierz narzędzie Adobe Creative Cloud, aby rozpocząć. Tutaj możesz pobrać program Adobe Dreamweaver i rozpocząć korzystanie z pełnego przewodnika.

W tym przewodniku dowiesz się, jak stworzyć podstawową witrynę internetową, używając jako podstawy plików szablonów Dreamweaver. Pełne pliki projektu można znaleźć na to repozytorium GitHub.

Krok 1: Utwórz witrynę Dreamweaver

Otwórz Adobe Dreamweaver i przejdź do Strona menu u góry strony. Wybierz Nowa strona, a następnie wybierz nazwę swojej witryny i wybierz dla niej lokalizację pliku.

Krok 2: Utwórz plik szablonu

Następnie nadszedł czas, aby utworzyć plik szablonu dla nowej witryny. Pliki szablonów działają podobnie do motywów używanych przez systemy CMS, takie jak WordPress i Shopify, tylko Ty tworzysz je samodzielnie.

Kliknij Tworzyć nowe lub przejdź do Plik > Nowy i wybierz Szablon HTML od typ dokumentu lista.

Spowoduje to utworzenie podstawowego szablonu z już wpisanym kodem HTML. Użyjesz tego kodu HTML w swoim projekcie, więc warto zachować go na miejscu na kolejne kroki.

​​​​​​

Krok 3: Zbuduj nagłówek w szablonie

Teraz nadszedł czas na zbudowanie sekcji menu/nagłówka na stronie internetowej w utworzonym właśnie szablonie. Iść do Wstawić u góry ekranu i wybierz nagłówek z listy.

W tym momencie otworzy się okno dialogowe. Dodaj nazwę dla nowej klasy nagłówka i kliknij OK aby dodać kod do kodu HTML. Powinien automatycznie umieścić nowy kod w obrębie tagi, ale w razie potrzeby możesz je przenieść.

Następnie należy również dodać element div do logo witryny i element nawigacji do menu witryny. Przejdź do Wstawić menu i wybierz Div, a następnie wróć do Wstawić menu i wybierz Nav. Oba te elementy potrzebują własnej nazwy klasy.

W ostatnim etapie tego procesu dodaliśmy kilka opcji menu do naszego elementu nawigacyjnego. Aby to zrobić, przejdź do Wstawić i wybierz Hiperłącze. Dodaliśmy pięć hiperłączy do nagłówka naszej witryny: Dom, Lew, Tygrys, Jaguar i Dom Kot.

Strony, które będą zawierać linki w nagłówku, jeszcze nie istnieją, więc zostaw href właściwość pusta, dopóki ich nie utworzysz.

Krok 4: Dodaj arkusz stylów dla CSS

Jak widać, ta strona nie wygląda zbyt dobrze w obecnym stanie. Odrobina CSS rozwiąże ten problem i możesz z łatwością dodać arkusz stylów w programie Dreamweaver. Przejdź do Projektant CSS po prawej stronie ekranu i kliknij Plus ikonę obok Źródeł. Wystarczy wybrać nazwę dla swojego arkusza stylów i pozostawić pozostałe ustawienia bez zmian.

Pierwszą rzeczą do zrobienia jest przekształcenie nagłówka w flexbox. Flexbox to tylko jeden ze sposobów układania strony internetowej za pomocą CSS. Oprócz tego ustawiona jest czcionka witryny, czarne tło i kilka innych zmian, aby strona wyglądała lepiej. Możesz zobaczyć pełny kod CSS na końcu artykułu.

Krok 5: Dodaj edytowalne regiony do szablonu

Edytowalne regiony tworzą sekcje HTML, które można edytować, gdy używasz szablonu do tworzenia innych stron. Treść naszej strony głównej idealnie pasuje do takiego regionu. Iść do Wstawić > Szablon > Edytowalny region aby dodać edytowalny region do swojej strony.

Krok 6: Dodaj treść obrazu/tekstu do szablonu

Dodany przed chwilą region edytowalny może być używany bez dodatkowego kodu HTML, ale nadal możesz dodać go do edycji podczas tworzenia pojedynczych stron. Aby rozpocząć, przejdź do Wstawić i wybierz Div aby dodać nowy element div do swojej witryny.

Będzie to zarówno pojemnik na treść tekstową na stronie, jak i miejsce do dodania obrazu tła. Ten element ma klasę i identyfikator, dzięki czemu różne strony mają różne właściwości CSS. Te unikalne wzorce tła CSS są świetne, jeśli chcesz przenieść swoją witrynę Dreamweaver na wyższy poziom.

Następnie przejdź do Wstawić > Nagłówki > H1 aby dodać nagłówek wewnątrz właśnie dodanego elementu div. Oba te elementy do poprawnego działania wymagają trochę kodu CSS. Element div ma wartości obrazu tła, rozmiaru tła i wysokości. Iść do Plik > Zapisz wszystko aby upewnić się, że Twój szablon zostanie zaktualizowany.

​​​​​​

Możesz dodawać obrazy z dowolnego miejsca w sieci lokalnej lub w Internecie, ale najlepiej jest zapisać obrazy we własnych plikach witryny, aby mieć do nich łatwy dostęp.

Krok 7: Dodaj strony z szablonem

Teraz, gdy masz już szablon, możesz zacząć dodawać strony. Iść do Plik > Nowy i wybierz HTML pod typ dokumentu. Dodać Tytuł dla każdej strony, którą dodasz przed uderzeniem Tworzyć.

Nowa strona jest biała i nie ma jeszcze naszego szablonu. Po otwarciu nowej strony w programie Dreamweaver przejdź do Narzędzia > Szablony i kliknij Zastosuj szablon do strony. Wybierz swój szablon z listy i kliknij Wybierz aby załadować swój szablon. Na koniec przejdź do Plik > Zapisz jako i wybierz nazwę nowej strony przed jej zapisaniem.

Powtarzaj ten proces, aż będziesz mieć wystarczającą liczbę stron, aby spełnić Twoje potrzeby. Nie musisz do tego trzymać się jednego szablonu; możesz dodać nowe dla różnych układów stron.

Krok 8: Dodaj linki do stron do szablonu

Po dodaniu stron możesz zmienić łącza nawigacyjne w szablonie, tak aby prowadziły do ​​właściwych stron. Wróć do szablonu i znajdź dodane wcześniej tagi A. Usuń link zastępczy i kliknij cudzysłów otworzyć Przeglądaj menu. Tutaj możesz wybrać odpowiednią stronę dla każdego z linków.

Krok 9: Napraw CSS/HTML na nowych stronach

W tej chwili każda ze stron będzie wyglądać tak samo. Jest kilka kroków, które należy podjąć, aby upewnić się, że mają własną treść; wykonaj poniższe czynności, aby ukończyć nową witrynę.

  • Zmień identyfikator elementu div treści na każdej stronie, aby odzwierciedlał tytuł strony
  • Dodaj kod CSS dla nowego identyfikatora elementu z innym obrazem tła
  • Zmień tytuł na każdej stronie

Krok 10: Przetestuj witrynę w swojej przeglądarce

Możesz przetestować swoją nową witrynę internetową w wybranej przeglądarce internetowej bezpośrednio z programu Adobe Dreamweaver. Iść do Plik > Podgląd w czasie rzeczywistym i wybierz wybraną przeglądarkę, aby wyświetlić swoją witrynę. Świetnie nadaje się do testowania CSS lub innego kodu, który nie jest kompatybilny z każdą przeglądarką.

Teraz potrzebujesz tylko miejsca do hostowania swojej witryny. Hosting statycznej witryny za pomocą AWS S3 to świetne miejsce na rozpoczęcie.

Kod HTML i CSS

<!doctype html>
<html>
<głowa>
<zestaw znaków meta="utf-8">
<!-- TemplateBeginEditable name="tytuł dok." -->
<tytuł>Nienazwany dokument</title>
<!-- SzablonEndEditable -->
<link href="../strona-css.css" rel="arkusz stylów" typ="tekst/css">
</head>
<ciało>
<klasa nagłówka="główny nagłówek">
<klasa div="logo-strony">MakeUseOf Przykładowa witryna</div>
<klasa nawigacji="menu główne">
<a href="../Strona główna.html">Dom</a><a href="../Lew.html">Lew</a><a href="../Tygrys.html">Tygrys</a><a href="../Jaguar.html">Jaguar</a><a href="../Dom Kat.html">Dom Kot</a>
</nav>
</header>
<!-- TemplateBeginEditable name="Region głównej zawartości" -->
<klasa div="główna zawartość" id="Lew">
<h1>To jest lew!</h1>
</div>
<!-- SzablonEndEditable -->
</body>
</html>

Ten kod HTML buduje gotową stronę internetową dla naszego projektu. Możesz go rozebrać, aby zobaczyć, jak to działa, ale zachęcamy do stworzenia własnego kodu HTML dla swojej witryny.

@charset "utf-8";
ciało {
 margines: 0;
 tło: czarne;
 rodzina czcionek: Gotham, "Helvetica Neue", Helvetica, Arial, "bezszeryfowy";
}
.główny-nagłówek {
 wyświetlacz: elastyczny;
 tło: czarne;
 wypełnienie: 20px;
}
.logo-strony {
 szerokość: 30%;
 kolor biały;
 grubość czcionki: pogrubiona;
 transformacja tekstu: wielkie litery;
}
.menu główne {
 szerokość: 70%;
 wyrównanie tekstu: do prawej;
}
.menu głównea {
 wypełnienie: 10px;
 dekoracja tekstu: brak;
 kolor biały;
}
.główna zawartość {
 wysokość: 100vh;
 wypełnienie: 20px;
 rozmiar tła: okładka;
}
.główna zawartośćh1 {
 kolor biały;
 rozmiar czcionki: 10rem;
 transformacja tekstu: wielkie litery; 
}
#Lew {
 obraz w tle: url("Obrazy/largelion.png");
}
#Tygrys {
 obraz w tle: url("Obrazy/tygrys.png");
}
#jaguar {
 obraz w tle: url("Obrazy/jaguar.png");
}
#koty domowe {
 obraz w tle: url("Obrazy/housecat.png");
}
#wszystkie koty {
 obraz w tle: url("Obrazy/loadsofcats.png");
}

Ten CSS jest również częścią gotowego projektu. Podobnie jak HTML, który omówiliśmy, możesz pobawić się tym kodem, aby uczynić tę witrynę własną.

Tworzenie stron internetowych za pomocą Adobe Dreamweaver

Dreamweaver może nie wydawać się tak łatwy w użyciu jak narzędzia takie jak WordPress czy Squarespace, ale daje znacznie więcej możliwości. Ten przewodnik to świetny punkt wyjścia, ale jest dużo więcej do nauczenia się i warto samemu poznać Dreamweaver.