Jak utworzyć stronę HTML: instrukcje krok po kroku

Listy mailingowe są ważną częścią kampanii marketingowych. Tworzenie e-maili dla nich w dużej mierze przypomina rozwój prostych stron internetowych. Jednocześnie należy wziąć pod uwagę pewne istotne różnice. W szczególności wysyłanie arkuszy HTML będzie skuteczne tylko wtedy, gdy zostaną poprawnie sformułowane w sensie technicznym, a ich zawartość i styl odpowiadają twoim celom. Jednocześnie uważa się, że niespecjalny specjalista nie poradzi sobie z tym zadaniem. Ten artykuł zawiera szczegółowe instrukcje krok po kroku, jak pisać i jak wysłać stronę HTML.


Cechy tworzenia

Współczesna osoba otrzymuje średnio 5-6, a czasem nawet 10 e-maili dziennie. Oznacza to, że masz mniej niż sekundę, aby zwrócić uwagę adresata, zanim przejdzie on do przeczytania takiej korespondencji. W przeciwnym razie wysyłanie stron HTML będzie całkowicie nieskuteczne, a marnujesz swój czas na próżno. Jednym z niuansów, które zwiększają Twoją szansę na przyciągnięcie uwagi potencjalnych klientów lub innych docelowych odbiorców, jest tworzenie korespondencji dostosowanej do urządzeń mobilnych. W końcu większość osób adresowanych do poczty używa ich prawdopodobnie znacznie częściej niż komputerów stacjonarnych i laptopów. W tym celu, na przykład, "wrażliwy projekt, mogę łatwo dostosować się do wielkości ekranu.

Jaki powinien być wzór litery

Podczas przygotowywania dokumentu, który ma zostać wysłany do korespondentów, należy przestrzegać następujących wymogów:
  • Powinien być bardzo wąski, tzn. Nie powinien przekraczać zakresu 500-600 pikseli, co zapewni poprawne wyświetlanie tekstu i innych treści na dowolnym urządzeniu dowolnego typu.
  • Konieczne jest użycie dość dużej czcionki dla wszystkich informacji tekstowych, ponieważ na urządzeniach z systemem iOS niewygodne będzie czytanie strony HTML, jeśli rozmiar czcionki jest mniejszy niż 13 pikseli.
  • Elementy, z których można zrobić kliknięcie, muszą być wystarczająco duże i odizolowane od najbliższych odsyłaczy. W takim przypadku adresat może łatwo aktywować je od pierwszej próby.



  • Przygotowanie

    Przed stworzeniem strony HTML powinieneś utworzyć nowy folder na jednym z dysków i nazwać go, na przykład "Korespondencja". Ponadto musisz pobrać i zainstalować program Dreamweaver CS3. Ten produkt firmy Adobe jest jednym z dość prostych narzędzi do projektowania witryn internetowych i doskonale nadaje się do tworzenia arkuszy kalkulacyjnych HTML.

    Tworzenie i zapisywanie dokumentu

    Przed napisaniem części tekstowej listu, musisz:
  • otworzyć całkiem popularnego projektanta dla arkuszy HTML Dreamweaver CS3 (DW);
  • utwórz dokument wybierając go jako typ "przejścia HTML 401";
  • zapisz plik z rozszerzeniem .html;
  • Znajdź polecenie edycji w górnym menu;
  • usuń zaznaczenie pola wyboru "Użyj CSS zamiast znaczników HTML".
  • Instrukcja krok po kroku

    Zobaczmy teraz, jak utworzyć stronę HTML. Aby to zrobić:
  • Sekwencyjne otwieranie zakładki "Wstaw" i "Tabela" w menu i wyświetlanie żądanych parametrów stołu.Na przykład ciągi - 2 kolumny - 1 szerokość - 700 nagłówków. Możesz umieścić granice, lub możesz zrobić bez nich, wskazując 0.
  • Formularz tytuł arkusza. Ponieważ arkusz HTML jest przeznaczony dla większej liczby odbiorców, instrukcja [first_name] służy do zastąpienia wybranej nazwy odbiorcy.
  • W dolnym oknie Właściwości wyświetlają pożądane parametry czcionki, rozmiaru i koloru tekstu tytułu oraz koloru tła.
  • "Exit" z pola tytułu. U dołu ekranu ustawiasz parametry kursora "Środek" i "W środku".
  • Wstaw gotowy tekst listu lub "napisz" go bezpośrednio w programie DW, wybierając żądany typ i rozmiar czcionki, a także pozycję tekstu na stronie.
  • Tworzenie linków hipertekstowych

    Spróbujemy uczynić stronę HTML bardziej profesjonalną i zaawansowaną. W tym celu ukryj łącza hipertekstowe w treści. Aby to zrobić, wybierz miejsce w tekście, który wybrałeś jako łącze hipertekstowe. W lewym rogu u góry ekranu należy "otworzyć" odpowiednią ikonę i wstawić link w rozwijanym polu. Jednocześnie nie zapomnij zaznaczyć pola wyboru "_blank", aby linki otwierały się w nowym oknie, a miejsce docelowe po obejrzeniu nie utraciło dostępu do głównej litery.

    Jak wstawiać zdjęcia

    Zazwyczaj wiadomość w formacie HTML uzupełniają informacje kontaktowe, najlepiej ze zdjęcia autora lub odpowiadającego mu obrazu tematycznego. Można go pobrać z Internetu lub wstępnie załadować w Internecie, zgodnie z potrzebamiAdres URL obrazu. Najlepiej zrobić to za pomocą jednej z bezpłatnych usług. Aby taki ładny finał:
  • wstaw na dole arkusza, w tabeli głównej, kolejny z parametrem 3 kolumn dla granicy 0 pikseli;
  • umieść kursor w miejscu stołu, w którym chcesz zobaczyć zdjęcie;
  • uwaga w dolnym oknie "Wewnątrz" i "Górna krawędź" dla każdej sekcji;
  • wybierz zakładkę Wstaw w górnym menu;
  • Klikamy na "Obraz" iw rozwijanym menu wstawiamy kopię adresu;
  • naciśnij "Ok" 2 razy.

  • Przeglądanie

    Teraz, gdy już wiesz, jak utworzyć stronę HTML, musisz upewnić się, że odbiorca zobaczy ją we właściwej formie. Aby to zrobić, przed przesłaniem musisz przejrzeć swoją pracę w przeglądarce Dreamweaver CS3. Aby to zrobić, kliknij ikonę z globusem w środkowym górnym menu. Jeśli zamiast liter na ekranie pojawiły się abrakadabry, to powinieneś ustawić autokodowanie w ustawieniach przeglądarki.

    Kodowanie

    Z sekcji "Projekt" i przejść do części kodowej - "Kod". W oknie zaznacz i skopiuj wszystko, co jest zawarte między tagami i. Zapisz plik. Następnie wstawiamy kod HTML.

    Wysyłanie arkuszy HTML

    Aby utworzyć skrzynkę pocztową otwierającą "Smart Reporter" (SR). Następnie:
  • wybierz lub utwórz nową literę, wypełniając linie "Nazwa" i "Adres nadawcy".
  • wypełnić wiersz "Przedmiot pisma";
  • zaznacz kod HTML w lewym górnym menu;
  • wstawić kod,Kod DW skopiowany w programie w dużym polu "Źródło";
  • weryfikują poprawność mapowania za pomocą narzędzia "Podgląd";
  • usunąć wersję tekstową listu;
  • przetestuj go pod kątem spamu, używając tego samego przycisku nazwy obok przycisku "Wyślij".
  • Kilka popularnych szablonów

    Korzystanie z frameworka znacznie przyspiesza proces tworzenia listu i czyni go bardziej dostępnym dla programisty, który wciąż rozumie podstawy tworzenia dokumentów internetowych. Najpopularniejsze szablony to:
  • Cerberus. Ten zestaw tak zwanych responsywnych szablonów pozwala tworzyć wiadomości e-mail, które są zwykle wyświetlane zarówno w aplikacji mobilnej Gmaila, jak i w Outlooku. Pozwala na używanie bloków kodu HTML indywidualnie lub przez ich łączenie.
  • Atrament to przygotowanie listów, których dystrybucja jest praktycznie uniwersalna i kompatybilna z dowolnymi urządzeniami i klientami.
  • Naprawdę prosty szablon wiadomości e-mail w formacie HTML. Szablon umożliwia łatwe i szybkie tworzenie biuletynów. To prawda, że ​​będą miały bardzo prosty projekt w postaci pojedynczej kolumny, w której znajduje się wezwanie do działania.
  • Jak wstawić arkusz HTML

    Rozważmy teraz nieco inne zadanie. Aby wkleić kod HTML do e-maila, na przykład gmail, korzystając z następującego przykładu, przeglądarka Google Chrome powinna:
  • kliknąć przycisk "F12" lub wybrać odpowiednią sekwencję poleceń w menu;
  • W oknie z kodem aktualnej strony klienta Gmaila znajdź miejsce, w którym chcesz wkleić stronę HTML, kliknij prawym przyciskiem myszy i wybierz Edytuj jako HTML.
  • wstawićskopiowany kod HTML;
  • , aby nacisnąć kombinację dwóch klawiszy «Ctrl» i «Enter».
  • W tym samym celu można pobrać łatwą w użyciu aplikację Thunderbird Mozilli. Użyj go, aby utworzyć literę, następnie wybierz Wstaw, a następnie HTML i wklej tam kod swojej listy mailingowej.

    Narzędzia

    WordPress Plugin e-Newsletter pozwala na profesjonalne zarządzanie listami adresowymi i subskrybentami. Oba są wykonywane bezpośrednio za pośrednictwem panelu administracyjnego WordPress. Ta okoliczność zapewnia pełną kontrolę i całkowicie za darmo, co nie może, ale proszę. Kolejne proste narzędzie - obrazy tła kuloodpornego, które jest prostym narzędziem, które pozwala uzyskać kod dla tła generowanego przez litery. Dzięki niemu korespondencja stanie się o wiele piękniejsza. Aby napisać list, wystarczy podać adres URL żądanego obrazu tła i jego koloru kopii zapasowej, a także ustawić te ustawienia dla całej treści arkusza HTML lub są one przeznaczone tylko dla jednej komórki tabeli. W rezultacie otrzymasz gotowy kod, który chcesz skopiować i wkleić do szablonu.
    Teraz już wiesz, jak wysłać stronę HTML. Jego tworzenie nie przedstawia szczególnej złożoności, szczególnie jeśli korzystasz z gotowych szablonów, w których nie ma żadnych wad w sieci. Dlatego nawet ci, którzy nie mają specjalnej wiedzy, mogą z łatwością poradzić sobie z tym zadaniem.

    Powiązane publikacje