Samouczek Dreamweaver


Samouczek Dreamweaver dotyczący tworzenia strony internetowejJak wiecie, ta strona dotyczy tworzenia witryny. Możesz uczyć się na różne sposoby, używając WordPress, Joomla lub Drupal. Mamy nawet przewodnik na temat używania czystego HTML, jak za dawnych czasów (oczywiście z najnowszą wersją HTML5). W tym samouczku dla początkujących Dreamweaver nauczysz się innego.


Dla tych, którzy nie wiedzą, Dreamweaver to aplikacja, która pozwala projektować, kodować i zarządzać stronami internetowymi. Interesujące w Dreamweaver jest to, że oferuje on zarówno możliwość pisania kodu, jak i tworzenia stron internetowych za pomocą interfejsu wizualnego.

W tym samouczku Dreamweaver dowiesz się wszystkiego, co musisz wiedzieć, aby rozpocząć tworzenie stron internetowych za pomocą Dreamweaver. Poznasz program i jego możliwości, najważniejsze funkcje i sposób jego konfiguracji. Następnie znajdziesz przewodnik krok po kroku, jak stworzyć prostą stronę internetową za pomocą Dreamweaver, uczynić ją przyjazną dla urządzeń mobilnych, a następnie przesłać ją na serwer.

To będzie długa jazda. Będziesz jednak zaskoczony, jak szybko dostaniesz się do tego bardzo intuicyjnego programu.

Contents

Co to jest Dreamweaver i co może zrobić?

Na pierwszy rzut oka Dreamweaver to IDE (zintegrowane środowisko programistyczne). Oznacza to, że jest to oprogramowanie, które łączy różne narzędzia, aby ułatwić projektowanie i tworzenie stron internetowych.

To, co czyni go wyjątkowym, polega na tym, że znajduje się gdzieś pomiędzy CMS (gdzie kontrolujesz wszystko o swojej stronie poprzez interfejs wizualny) a czystym edytorem kodu. Oto jak działają różne części.

Twórz strony internetowe za pomocą interfejsu wizualnego

Przybornik do projektowania wizualnego zasadniczo umożliwia tworzenie stron internetowych za pomocą myszy. Umożliwia umieszczanie elementów witryny w sposób, w jaki tworzysz układ w programie Word. Zasadniczo widzisz swoją witrynę tak, jak w przeglądarce, ale możesz także nią manipulować.

Jest to bardzo przydatne, ponieważ pozwala szybko zbudować szkielet strony internetowej bez konieczności pisania jednego wiersza kodu. Zamiast tego Dreamweaver automatycznie utworzy dla ciebie potrzebny kod. W ten sposób teoretycznie możesz ręcznie złożyć całą stronę internetową i przesłać ją na swój serwer.

Z drugiej strony, jeśli potrafisz kodować, Dreamweaver ma również wszystkie niezbędne narzędzia do tego.

Działa jako pełnoprawny edytor kodu

Druga część Dreamweaver to w pełni funkcjonalny edytor kodu. Jest wyposażony we wszystkie standardowe funkcje, w tym:

  • Podświetlanie składni – Oznacza to, że Dreamweaver wyróżnia różne elementy (takie jak operatory, zmienne itp.) W różnych kolorach, aby ułatwić czytanie i poprawianie kodu.
  • Uzupełnianie kodu – Uzupełnianie kodu działa w podobny sposób jak autouzupełnianie w telefonie. Zacznij pisać, a redaktor podpowie, co próbujesz napisać. W ten sposób nie musisz pisać wszystkiego całkowicie.
  • Kod się zwija – Zwijanie kodu to kolejna funkcja ułatwiająca czytanie kodu. Pozwala wizualnie zmniejszyć części kodu, gdy nie są potrzebne. W ten sposób nie musisz przewijać całego pliku, ale możesz poradzić sobie tylko z częściami, nad którymi musisz popracować.

Dreamweaver obsługuje najważniejsze języki projektowania stron internetowych (HTML5, CSS, JavaScript, PHP) i wiele więcej.

Najlepsza część: jeśli zmienisz coś w kodzie, Dreamweaver automatycznie wyświetli to również po stronie wizualnej. W ten sposób możesz to zobaczyć bez konieczności przesyłania plików na serwer lub uruchamiania przeglądarki.

Jest o wiele więcej funkcji i wiele z nich zobaczysz w akcji w nadchodzącym samouczku Dreamweaver dla początkujących.

Konfiguracja i projektowanie stron internetowych Dreamweaver (krok po kroku)

Pierwszym krokiem jest zakup programu Dreamweaver z oficjalnej strony Adobe.

Możesz uzyskać bezpłatną wersję próbną tutaj lub ze swojego klienta Creative Cloud.

samouczek Dreamweaver dla początkujących

Krok 1. Pobierz i zainstaluj

Po pobraniu programu z oficjalnej strony internetowej wystarczy pobrać plik instalacyjny, uruchomić go i postępować zgodnie z instrukcjami.

Jeśli już korzystasz z usługi Creative Cloud (tak jak my), możesz po prostu kliknąć Próbować wewnątrz klienta. Następnie po zakończeniu instalacji programu kliknij Rozpocząć proces.

Krok 2. Pierwsze uruchomienie

Po pierwszym uruchomieniu Dreamweaver zobaczysz ten ekran.

Pierwsze uruchomienie Dreamweaver

Jeśli nigdy wcześniej nie korzystałeś z programu, wybierz Nie, jestem nowy. Gdy to zrobisz, Dreamweaver poprowadzi Cię przez kreatora konfiguracji. Pierwszym krokiem jest wybór, czy użyć obszaru roboczego dla programistów, czy standardowego obszaru roboczego.

Przewodnik po wdrażaniu Dreamweaver wybierz obszar roboczy

Ponieważ jest to samouczek dla początkujących Dreamweaver, wybierz wersję standardową. Następnie możesz wybrać motyw kolorystyczny dla swojego obszaru roboczego z czterech różnych opcji.

Przewodnik po wdrażaniu Dreamweaver wybierz schemat kolorów

Ostatnim krokiem jest wybór, czy zacząć od przykładowego pliku, nowego czy istniejącego projektu, czy obejrzeć samouczek.

Przewodnik po wdrażaniu Dreamweaver ostatni krok

Wybierz, aby rozpocząć od nowego lub istniejącego folderu, a proces instalacji dobiegnie końca. Dobra robota!

Teraz zacznijmy projekt i dowiedz się, jak stworzyć stronę internetową za pomocą Dreamweaver.

Krok 3. Uruchom nową witrynę

Pierwszym krokiem jest utworzenie nowej witryny. W tym celu przejdź do Strona> Nowa strona. Nastąpi przejście do tego ekranu:

utwórz nową stronę we Dreamweaver

Pierwszym krokiem jest nadanie swojej witrynie nazwy. Następnie musisz wybrać, gdzie go zapisać. To zależy od ciebie, ale zwykle rozsądnie jest trzymać wszystkie projekty w jednym miejscu dla uproszczenia.

Masz również możliwość powiązania nowego projektu z repozytorium Git. To może być dobry pomysł, ponieważ daje kontrola wersji ale na razie możesz to pominąć.

Zajmiemy się wszystkim pod Serwery po lewej stronie później. Tak samo z Preprocesory CSS, co jest ważne tylko podczas korzystania tego typu rzeczy.

To, co jest dla nas ważne, to Informacje lokalne pod Zaawansowane ustawienia.

włącz domyślny folder obrazów w programie Dreamweaver

Pamiętaj, aby kliknąć ikonę folderu po prawej stronie tam, gdzie jest napisane Domyślny folder obrazów. Następnie przejdź do nowo utworzonego katalogu witryny, otwórz go, utwórz nowy folder o nazwie obrazy i wybierz to jako domyślny folder. W ten sposób Dreamweaver automatycznie zapisuje obrazy związane z twoją witryną.

To wszystko na teraz, kliknij Zapisać wrócić do swojego obszaru roboczego.

Krok 4. Utwórz plik strony głównej

Po utworzeniu witryny projektu nadszedł czas na pierwszy plik. Zaczniemy od strony głównej.

Jeśli Dreamweaver nie oferuje samej opcji, przejdź do Plik> Nowy. Możesz utworzyć zupełnie nowy plik lub użyć istniejącego szablonu. Program zawiera kilka z nich (patrz Szablony startowe). Teraz zamiast tego stworzymy nowy.

utwórz nowy plik w programie Dreamweaver

HTML jest ustawiony domyślnie i można go pozostawić bez zmian. Wpisz tytuł dokumentu index.html i wybierz Stwórz. Spowoduje to przejście do następującego ekranu.

świeży projekt w Dreamweaver

Jest to kapelusz, o którym wspominaliśmy na początku: podgląd na żywo tego, jak wygląda twoja strona (obecnie pusta) i kod za nią. Zauważysz również, że Dreamweaver automatycznie utworzył podstawowe znaczniki HTML, na których możesz budować. Zróbmy to teraz?

Krok 5. Utwórz nagłówek

Aby wstawić element na stronę, musisz najpierw wybrać jego lokalizację. Albo kliknij pustą stronę (Dreamweaver automatycznie wybierze element, jeśli tak zrobisz) lub umieść kursor w tym samym elemencie w części kodowej ekranu.

Następnie musisz przejść do Wstawić zakładka w prawym górnym rogu. To daje listę typowych elementów HTML i elementów witryny, które możesz dodać do swojej strony. Przewiń w dół, aż zobaczysz nagłówek jako opcja.

wstaw element nagłówka do Dreamweaver

Proste kliknięcie wstawia go na stronę. Widać to również w dokumencie HTML.

nagłówek widoczny w interfejsie wizualnym i edytorze kodu

Proste, prawda?

Teraz zmienisz tekst wewnątrz nagłówka, a także zmienisz go w nagłówek. W przypadku obu – najpierw zaznacz tekst w edytorze kodu na dole.

zaznacz tekst nagłówka w programie Dreamweaver

Następnie wróć do Wstawić, kliknij strzałkę obok Nagłówek i wybierz H1. Spowoduje to zawinięcie tytułu strony w tag HTML H1. Aby uzyskać więcej informacji na temat tagów nagłówka, przeczytaj Ten artykuł.

Następnie możesz także wpisać tytuł swojej strony. Na swojej prawdziwej stronie internetowej wybrałbyś coś opisowego za pomocą słów kluczowych, a nie tylko Witaj na stronie My Test jak w przykładzie.

zmieniono nagłówek w programie Dreamweaver

W porządku, właśnie utworzyłeś nagłówek strony! W tej chwili wciąż wygląda to nieco prymitywnie, więc zmieńmy to za pomocą CSS.

Krok 6. Utwórz plik CSS

W przypadku, gdy nie jesteś zaznajomiony z tym, CSS jest częścią, która zapewnia wszystkie style na stronie internetowej. Pozwala definiować kolory, wymiary elementów, typy i rozmiary czcionek i wiele więcej. Chcemy użyć znaczników, aby poprawić tytuł strony, a także dowiedzieć się, jak zmienić CSS w Dreamweaver.

Teoretycznie możesz dodać CSS bezpośrednio w dokumencie HTML. Istnieje o wiele mniej elegancka opcja niż to, co będziemy robić, czyli tworzenie dedykowanego pliku dla wszystkich stylów CSS całej witryny.

Pierwszym krokiem jest nadanie nowemu nagłówkowi klasy lub identyfikatora CSS. Podczas tego procesu Dreamweaver wyświetli również monit o utworzenie pliku arkusza stylów. Przejdź do menu DOM w prawej dolnej części ekranu z listą całej struktury witryny. Upewnij się, że nagłówek jest zaznaczony.

W widoku na żywo zobaczysz go oznaczonego na niebiesko małą etykietą i znakiem plus u dołu.

dodaj plik css w programie Dreamweaver

Kliknij znak plus i wpisz #nagłówek w polu, które zostanie otwarte. Hashtag oznacza, że ​​przypisujesz id w przeciwieństwie do klasy. Naciśnij enter. W menu otwierającym zamiast Zdefiniuj na stronie Wybierz Utwórz nowy plik CSS. W wyskakującym okienku wybierz Przeglądaj i przejdź do folderu witryny. Następnie wpisz style.css (która jest standardową nazwą dla arkuszy stylów) w pliku Nazwa pliku pole i uderzenie Zapisać.

utwórz arkusz stylów w programie Dreamweaver

Kiedy teraz wybierzesz Ok, nowy plik pojawi się u góry podglądu na żywo. Możesz go wyświetlić i edytować z tego miejsca. Będzie również powiązany z sekcja części HTML strony.

arkusz stylów dodany do strony internetowej

Niesamowite possum! Teraz możesz już zmienić styl swojej strony.

Krok 7. Utwórz selektor CSS dla tytułu strony

Pierwszą rzeczą, którą chcesz zrobić, to zmienić czcionkę nagłówka i wyśrodkować ją. W tym celu musisz najpierw utworzyć nowy selektor CSS. Selektor to nazwa elementu na naszej stronie, do którego można przypisać właściwości, np. Kolor, rozmiar i inne.

Zaznacz swój nagłówek H1 w widoku DOM w prawym dolnym rogu (tak jak wcześniej z nagłówkiem). Następnie wybierz Projektant CSS.

przygotuj stylizację dla elementu nagłówka

Aby utworzyć selektor CSS, kliknij linię, w której jest napisane Swyborcy a następnie kliknij symbol plus. To powinno automatycznie zaproponować ci selektor o nazwie # nagłówek h1.

utwórz selektor css we Dreamweaver

Naciśnij Enter, aby go utworzyć. Gotowy!

Krótka notatka: dla wszystkich nowych w CSS ten selektor oznacza, że ​​celujesz w element o nazwie h1 wewnątrz element o nazwie #nagłówek. W ten sposób cokolwiek wpiszesz jako CSS, zostanie zastosowane tylko do tekstu pisanego, a nie do całego elementu nagłówka.

Krok 8. Zmień czcionkę nagłówka

Teraz, gdy masz selektor, możesz przypisać mu właściwości. Jeśli znasz się na CSS, możesz po prostu wpisać znacznik w style.css a program automatycznie się tym zajmie.

Dla mniej doświadczonych użytkowników Dreamweaver sprawia, że ​​jest to naprawdę łatwe. Zostań w Projektant CSS menu i odznacz pole, w którym jest napisane Pokaż zestaw. Gdy to zrobisz, odblokujesz wiele dodatkowych opcji.

włącz opcje css w programie Dreamweaver

Za pomocą nowych przycisków możesz wybrać wiele właściwości CSS z obszarów układu, tekstu, ramki i tła. The Więcej przycisk daje opcje wprowadzania własnych reguł.

Aby zmienić typ czcionki, kliknij Tekst opcja u góry (alternatywnie przewiń w dół). Najedź kursorem myszy na nadchodzące opcje rodzina czcionek i kliknij Domyślna czcionka.

zmień rodzinę czcionek w programie Dreamweaver

Zapewni to szereg opcji dla popularnych czcionek, w tym ich awarie (w przypadku, gdy przeglądarka użytkownika nie będzie mogła wyświetlić głównej czcionki). Możesz kliknąć Zarządzaj czcionkami na dole, aby przejść do tego menu:

czcionki internetowe Adobe Edge

Tutaj możesz wybrać darmowe czcionki Adobe Usługa Edge Web Fonts. Wyszukaj czcionkę według nazwy lub użyj wielu opcji filtrowania po lewej, aby zawęzić wybór do momentu znalezienia czegoś.

Kliknięcie dowolnego kroju oznacza go do włączenia do Dreamweaver. Gdy to zrobisz, możesz użyć ich bezpośrednio lub przejść do Niestandardowe stosy czcionek aby zdefiniować własne czcionki zastępcze.

twórz własne stosy czcionek w programie Dreamweaver

Na razie po prostu naciśnij Gotowy a następnie kliknij domyślne czcionki jeszcze raz. Tym razem wybierz wybraną niestandardową czcionkę i voilá – zmiana jest wykonywana łącznie ze wszystkimi niezbędnymi kodami.

zmieniona czcionka w programie Dreamweaver

Jeśli klikniesz na style.css plik u góry, zobaczysz, że wszystkie znaczniki zostały również dodane.

zaktualizowany arkusz stylów w programie Dreamweaver

Krok 9. Wyśrodkuj nagłówek i zmień jego rozmiar

Tekst może nadal wyglądać lepiej. Następnym zadaniem jest wyśrodkowanie go i zwiększenie rozmiaru czcionki. W tym celu możesz również użyć innej funkcji o nazwie Szybka edycja.

Aby go użyć, przejdź do widoku kodu i kliknij prawym przyciskiem myszy część, którą chcesz edytować. W tym przypadku jest na

wspornik.

otwórz menu szybkiej edycji w programie Dreamweaver

Tutaj wybierz Szybka edycja na górze. Spowoduje to otwarcie CSS powiązanego z tym elementem poniżej. Teraz możesz wprowadzić dodatkowe właściwości bez konieczności przeszukiwania całego pliku arkusza stylów (który może być bardzo długi). Aby wyśrodkować tekst i powiększyć go, dodaj do niego następujący kod.

rozmiar czcionki: 42px;
wyrównanie tekstu: środek;

Podczas pisania Dreamweaver przygotuje również propozycje tego, co próbujesz wprowadzić, co jeszcze bardziej ułatwi. To wspomniana wcześniej funkcja uzupełniania kodu.

Po zakończeniu będzie wyglądać następująco:

zmień css poprzez szybką edycję w programie Dreamweaver

Pamiętaj, że tekst zmienił się już w trybie podglądu na żywo. Teraz naciśnij wyjście aby szybko wyjść, edytować i przejść do arkusza stylów. Przekonasz się, że nowy CSS został dodany w odpowiednim miejscu.

Całkiem fajnie, prawda?

Nawiasem mówiąc, jeśli kiedykolwiek nie jesteś pewien, co oznacza właściwość CSS, po prostu kliknij ją prawym przyciskiem myszy i wybierz Szybkie dokumenty (lub naciśnij Ctrl + K). Dreamweaver udzieli ci wyjaśnienia.

Dreamweaver szybkie dokumenty

Krok 10. Dodaj więcej treści

Dzięki temu, czego się nauczyłeś, możesz teraz zbudować podstawową stronę. Na potrzeby tego samouczka Dreamweaver wykonaliśmy następujące czynności:

  • Zdefiniowane domyślne czcionki dla nagłówków i akapitów
  • Dodano pasek nawigacyjny i utworzono w nim link do strony głównej
  • Dodano pole div dla zawartości z dwoma dodatkowymi pudełkami w środku
  • Przeniesiono jeden z nich w lewo, a drugi w prawo za pomocą pływak własność
  • Ograniczono ich szerokość do wartości procentowych, aby można je było wyrównać w poziomie
  • Dodano po lewej przykładowy nagłówek i tekst obojętny, w tym nieuporządkowaną listę
  • Utworzono formularz (użyj menu rozwijanego pod Wstawić), dwa pola tekstowe i przycisk przesyłania
  • Dodano odstępy wokół elementów dzięki marginesom CSS i wypełnieniu
  • Podane kolory tła i obramowania
  • Utworzono stopkę i wiadomość o prawach autorskich

Oto wynik:

strona internetowa o zaawansowanym designie

Kod dla przykładu:

Ponieważ jest to nieco zaawansowane i nie każdy będzie wiedział, jak to zrobić, możesz znaleźć HTML i CSS poniżej, abyś mógł go zrekonstruować. Najpierw HTML:





index.html

 



Dom

Przykładowy nagłówek głównej treści

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi. In imperdiet auctor leo vitae blandit.

  • Etiam tempus urna condimentum libero varius
  • Ut commodo risus finibus
  • Duis odio lacus, elementum eget sem finibus
  • Mollis dignissim enim.
  • Quisque molestie suscipit odio vel ułatwienia

Curabitur vestibulum, lorem a tincidunt dapibus, erat sem rhoncus nisl, non dapibus quam mi ac ligula. Vestibulum id auctor eros, gdzie indziej niesklasyfikowany. Nuncfficitur turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in, easisis nisl.

Przykładowe wezwanie do działania!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi.

Copyright © 2017 My Imaginary Website

A potem CSS:

@charset „utf-8”;

ciało {
kolor tła: # F5F5F5;
margin-top: 0px;
margines z prawej: 0px;
margines na dole: 0px;
margines lewy: 0px;
}

p,
za,
ul,
ol,
li,
etykieta,
Wejście{
font-family: muli, sans-serif;
styl czcionki: normalny;
grubość czcionki: 300;
rozmiar czcionki: 17px;
}

h1, h2, h3, h4, h5 {
font-family: karla, sans-serif;
styl czcionki: normalny;
grubość czcionki: 400;
transformacja tekstu: wielkie litery;
}

#nagłówek {
padding-top: 25px;
padding-bottom: 25px;
kolor tła: #FFFFFF;
border-bottom: 4px solid # EB232F;
}

#header h1 {
font-family: aguafina-script;
styl czcionki: normalny;
grubość czcionki: 400;
rozmiar czcionki: 42px;
wyrównanie tekstu: środek;
margin-top: 0px;
margines na dole: 0px;
transformacja tekstu: brak;
}

#navigation {
margines z prawej: auto;
margines lewy: auto;
maksymalna szerokość: 1140px;
margines na górze: 10 pikseli;
margines na dole: 10 pikseli;
}

#navigation a {
kolor: # EB232F;
}

.Główny {
Blok wyświetlacza;
margines na górze: 15 pikseli;
margines z prawej: auto;
margines lewy: auto;
margines na dole: 15 pikseli;
oba czyste;
przelew: automatyczny;
maksymalna szerokość: 1140px;
}

.main # main-right {
float: prawo;
szerokość: 37,5%;
Blok wyświetlacza;
}

.main # main-left {
float: left;
szerokość: 57%;
Blok wyświetlacza;
padding-right: 20px;
}

.main # main-right .cta {
wyrównanie tekstu: środek;
}

.main # main-right .form {
szerokość: 92%;
margines z prawej: auto;
margines lewy: auto;
}

# main-right .form div {
margines na dole: 10 pikseli;
}

# main-right .form .label {

}

# main-right .form .textfield {
szerokość: 100%;

}

.main # main-right #button {
wyrównanie tekstu: środek;
padding-top: 7px;
padding-bottom: 7px;
margines lewy: auto;
margines z prawej: auto;
pozycja: względna;
Blok wyświetlacza;
padding-right: 36px;
padding-left: 36px;
granica: brak;
kolor tła: # EB232F;
kolor: #FFFFFF;
kursor: wskaźnik;
}

.stopka {
Blok wyświetlacza;
padding-top: 25px;
padding-bottom: 25px;
wyrównanie tekstu: środek;
}

Chcemy wykorzystać to jako przykład pokazujący kolejne kroki. Nawet jeśli wydaje się to skomplikowane, zestawiliśmy to w ten sam sposób, w jaki pokazaliśmy ci wcześniej.

Krok 11. Podgląd w przeglądarce i na urządzeniu mobilnym

Jak to wszystko zrobiliśmy? Po pierwsze, jesteśmy nieco bardziej doświadczeni w budowaniu stron internetowych niż Ty prawdopodobnie. Dlatego już myślę o tym, jak stworzyć odpowiednią stronę internetową.

Po drugie, używamy bardzo przydatnej funkcji, która pomaga mi przyspieszyć ten proces: podgląd przeglądarki. Dreamweaver umożliwia przeglądanie stron internetowych w czasie rzeczywistym w przeglądarce, a nawet na urządzeniach mobilnych.

Aby rozpocząć, kliknij przycisk podglądu w czasie rzeczywistym w prawym dolnym rogu.

włącz menu podglądu w programie Dreamweaver

Spowoduje to otwarcie opcji podglądu.

opcje podglądu w czasie rzeczywistym w programie Dreamweaver

Kliknięcie jednej z nazw przeglądarki otworzy w niej projekt witryny. Możesz również zeskanować kod QR za pomocą telefonu lub tabletu (na przykład za pomocą Firefox Quantum) lub wpisz wyświetlony adres w przeglądarce, aby uruchomić podgląd na żywo na swoim urządzeniu.

Pamiętaj tylko, że w tym celu musisz podać swój identyfikator Adobe ID i hasło. Powinieneś to mieć od momentu rejestracji w Dreamweaver.

Najlepsza część: Wszelkie zmiany wprowadzone w programie Dreamweaver będą automatycznie wyświetlane w przeglądarce w momencie ich wprowadzania.

W jaki sposób pomogło mi to szybciej zbudować witrynę? Przede wszystkim, w zależności od wielkości ekranu, wyświetlanie w przeglądarce może być bliższe oryginałowi niż to, co widzisz w Dreamweaver.

Po drugie, sprawdzenie witryny w przeglądarce pozwala mi używać narzędzi programistycznych do testowania zmian.

narzędzia programistyczne w przeglądarce

Są bardzo podobne do tego, co widzisz w Dreamweaver. Są nam bardziej znani, dzięki czemu możemy szybciej z nimi pracować, wystarczy skopiować i wkleić kod do naszego arkusza stylów.

Spojrzenie na wersję telefonu pokazuje, że wciąż jest wiele do zrobienia.

mobilny podgląd w czasie rzeczywistym w programie Dreamweaver

To prowadzi nas do następnego punktu.

Krok 12. Dodaj zapytania o media

Aby Twoja witryna działała na wszystkich urządzeniach, musisz dodać tak zwane zapytania o media. Są to warunkowe instrukcje CSS, które informują przeglądarki, aby stosowały styl tylko powyżej lub poniżej niektórych rozmiarów ekranów lub na określonych urządzeniach. W ten sposób możesz zmienić układ na mniejszych ekranach.

Do tej pory zdefiniowałeś tylko style globalne. Oznacza to style stosowane w całej witrynie. Teraz dowiesz się, jak dodawać style warunkowe dla mniejszych ekranów.

Najpierw przejdź do Projektant CSS. Upewnij się, że plik, do którego chcesz dodać kod, jest zaznaczony w obszarze Źródła. Naciśnij znak plus pod @głoska bezdźwięczna.

Daje ci ten panel opcji:

menu zapytań o media w programie Dreamweaver

Możesz zdefiniować warunki zapytań o media, np. Urządzenia, których dotyczą, orientację, rozdzielczość i wiele więcej. Możesz również dodać wiele warunków ze znakiem plus.

W naszym przykładzie ważniejsze jest maksymalna szerokość oprawa. Dzięki temu możesz zdefiniować niestandardowy CSS, który będzie miał zastosowanie tylko do określonego maksymalnego rozmiaru ekranu.

Załóżmy, że chcesz najpierw naprawić problemy w telefonie, więc wpisujesz maksymalna szerokość 375 pikseli. Gdy to zrobisz, możesz zobaczyć kod CSS na dole.

utwórz zapytanie o media w programie Dreamweaver

Co stanie się również po kliknięciu Ok oznacza, że ​​zielona linia pojawia się u góry ekranu. To wizualnie reprezentuje zapytanie o media. Kliknij go, a ekran automatycznie przeskoczy do tego rozmiaru.

twórz zapytania o media w programie Dreamweaver

Krok 13. Dodaj warunkowy CSS

Aby poprawić projekt telefonu komórkowego, pierwszą rzeczą, którą musimy zrobić, jest wyeliminowanie kodu, który sprawia, że ​​dwa elementy w witrynie układają się obok siebie. Widocznie nie ma na to miejsca.

Możesz to zrobić tak samo, jak wcześniej manipulowałeś CSS, tylko tym razem masz aktywowane zapytanie medialne.

Przede wszystkim – przejdź do elementu w widoku DOM. Stamtąd utwórz dla niego nowy selektor CSS. Następnie ustaw szerokość do automatyczny, pływak do Żaden (aby zapobiec przesuwaniu się w lewo) i dodaj marginesy po bokach, aby zawartość nie graniczała z krawędzią ekranu.

poprawiony projekt mobilny

Wygląda znacznie lepiej, prawda? W ten sam sposób możesz zmienić CSS wszystkich innych elementów na stronie, aby wszystkie wyglądały poprawnie.

To w zasadzie dotyczy zapytań o media. Możesz użyć tej samej metody, aby dostosować układ do tabletów i innych rozmiarów.

Wskazówka profesjonalna: Nie optymalizuj pod kątem niektórych urządzeń i ich rozmiarów, zamiast tego twórz zapytania o media w zależności od układu. Oznacza to grę z rozmiarem ekranu i dodawanie zapytań w tych punktach, w których układ nie wygląda już dobrze.

Jeszcze jedna rzecz: możesz również nieco łatwiej tworzyć zapytania o media, używając wstępnie ustawionych rozmiarów urządzeń w dolnym rogu i klikając symbol plus u góry, gdy znajdziesz punkt, w którym chcesz go dodać.

twórz zapytania o media za pomocą skrótów w programie Dreamweaver

Krok 14. Prześlij swoją witrynę na serwer

Zalecamy użycie Bluehost (link partnerski) do prowadzenia witryny Dreamweaver.

Gdy skończysz z częścią projektową, jesteś prawie gotowy do przesłania strony na serwer. Jak wspomniano na samym początku, Dreamweaver również czyni to bardzo łatwym.

Najpierw przejdź do Witryna> Zarządzaj witrynami. Wybierz bieżącą witrynę z menu i wybierz Edytować w lewym dolnym rogu. W następnym oknie kliknij Serwery.

zdalna konfiguracja serwera w programie Dreamweaver

Wprowadź wszystkie ważne dane, aby połączyć się z serwerem FTP. Nazwa należy do Ciebie, reszta (adres FTP, nazwa użytkownika, hasło) pochodzi od Twojego dostawcy hostingu. Nie zapomnij podać katalogu, w którym chcesz umieścić pliki, oraz adresu internetowego swojej witryny! Ostatnia część jest ważna, aby Dreamweaver mógł tworzyć linki wewnętrzne odnoszące się do strony.

Pod zaawansowane masz więcej opcji (czy przesyłać pliki automatycznie po zapisaniu). Zwykle możesz zachować rzeczy takimi, jakie są. Trafienie Zapisać dwa razy i gotowe.

Teraz przejdź do Akta panel (w prawym górnym rogu lub przez Okno> Pliki) i kliknij najbardziej lewy symbol, aby połączyć się z serwerem:

prześlij stronę na zdalny serwer w programie Dreamweaver

Po nawiązaniu połączenia wybierz pliki, które chcesz przesłać, i kliknij strzałkę skierowaną w górę, aby to zrobić. Po zakończeniu witryna powinna być dostępna z Twojego adresu internetowego.

Dobra robota! Właśnie zbudowałeś i przesłałeś prostą stronę za pomocą Dreamweaver!

Samouczek Dreamweaver – końcowe słowa

Dreamweaver to fantastyczny program do tworzenia stron internetowych. Łączy intuicyjny interfejs użytkownika z pełnoprawnym edytorem kodu. Dzięki tej kombinacji ułatwia początkującym, średnio zaawansowanym i zaawansowanym użytkownikom tworzenie wysokiej jakości stron internetowych.

W tym samouczku dla początkujących Dreamweaver przedstawiliśmy Ci program Dreamweaver i jego możliwości. Pokazaliśmy, jak skonfigurować program i rozpocząć pracę z pierwszą witryną. Nauczyłeś się, jak tworzyć podstawową strukturę HTML i stylizować ją za pomocą CSS. Zastanawialiśmy się również, jak dostosować stronę internetową do wymagań mobilnych i przesłać ją na swój serwer.

Do tej pory dobrze rozumiesz, jak działa Dreamweaver i jak możesz go użyć do stworzenia strony internetowej. Teraz musisz zanurzyć się głębiej i wymyślić kolejne kroki.

Nie zapomnij: Dreamweaver to tylko jeden ze sposobów na stworzenie strony internetowej. Jest o wiele więcej i możesz znaleźć wiele informacji na ten temat tutaj. Powodzenia!

Czy korzystałeś już z Dreamweaver? Jaka jest Twoja opinia? Coś do dodania do powyższego? Daj nam znać w sekcji komentarzy poniżej!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map