Wraz z rozwojem tak wielu języków programowania, stylów i znaczników nauka projektowania stron internetowych staje się bardziej skomplikowana niż kiedykolwiek. Na szczęście dostępnych jest mnóstwo narzędzi, które pomogą Ci zacząć. Poszukaj kilku podstawowych zasobów, takich jak samouczki online lub aktualna książka na temat projektowania stron internetowych. Gdy będziesz gotowy do rozpoczęcia, zacznij od opanowania podstaw HTML i CSS. Następnie możesz zacząć odkrywać bardziej zaawansowane języki projektowania stron internetowych, takie jak JavaScript!
Kroki
Metoda 1 z 4: Znajdowanie zasobów do projektowania stron internetowych
Krok 1. Sprawdź online kursy i samouczki dotyczące projektowania stron internetowych
Internet jest pełen szczegółowych informacji na temat projektowania stron internetowych, a wiele z nich jest dostępnych bezpłatnie. Możesz zacząć od wzięcia bezpłatnych kursów online na Udemy lub CodeCademy albo dołączenia do społeczności programistów, takiej jak freeCodeCamp. Samouczki wideo dotyczące projektowania stron internetowych można również znaleźć na YouTube.
- Jeśli dokładnie wiesz, czego szukasz, spróbuj przeprowadzić wyszukiwanie przy użyciu określonych terminów (np. „selektory klas w samouczku CSS”).
- Jeśli jesteś początkującym użytkownikiem bez doświadczenia w projektowaniu stron internetowych, zacznij od poznania podstaw kodowania w HTML i CSS.
Krok 2. Zastanów się nad zajęciami w lokalnym college'u lub na uniwersytecie
Jeśli studiujesz w college'u lub na uniwersytecie, skontaktuj się z wydziałem informatyki swojej szkoły lub przejrzyj katalog kursów, aby dowiedzieć się, czy są dostępne kursy projektowania stron internetowych. Jeśli nie jesteś w szkole, sprawdź, czy jakieś uczelnie lub uniwersytety w Twojej okolicy nie oferują zajęć kontynuacji edukacji w zakresie projektowania stron internetowych.
Niektóre uniwersytety oferują zajęcia z projektowania stron internetowych, które są otwarte dla każdego, kto chce się zapisać. Sprawdź strony internetowe, takie jak Coursera.org, aby znaleźć bezpłatne lub niedrogie zajęcia z projektowania stron internetowych prowadzone przez instruktorów uniwersyteckich
Krok 3. Zdobądź książki o projektowaniu stron internetowych z księgarni lub biblioteki
Dobra książka na temat projektowania stron internetowych może być nieocenionym punktem odniesienia, gdy uczysz się i stosujesz swoje rzemiosło. Poszukaj aktualnych książek na temat ogólnego projektowania stron internetowych lub konkretnych formatów kodowania i języków, których chcesz się nauczyć.
Czytanie magazynów i artykułów na blogach na temat projektowania stron internetowych to także dobry sposób na poznanie nowych technik, czerpanie inspiracji i nadążanie za najnowszymi trendami
Krok 4. Pobierz lub kup oprogramowanie do projektowania stron internetowych
Dobre oprogramowanie do projektowania stron internetowych może pomóc w bardziej wydajnym i efektywnym tworzeniu witryn internetowych, a także doskonale pomaga poznać tajniki stosowania kodowania, skryptów i innych kluczowych elementów projektu. Możesz skorzystać z narzędzi takich jak:
- Programy do projektowania graficznego, takie jak Adobe Photoshop, GIMP lub Sketch.
- Narzędzia do tworzenia stron internetowych, takie jak WordPress, Chrome DevTools lub Adobe Dreamweaver.
- Oprogramowanie FTP do przesyłania gotowych plików na serwer.
Krok 5. Znajdź szablony stron internetowych do zabawy na początku
Nie ma nic złego w korzystaniu z szablonów, gdy uczysz się podstaw projektowania stron internetowych. Wyszukaj szablony stron internetowych, które Ci się podobają, i przyjrzyj się bliżej kodowi, aby dowiedzieć się, jak projektant ułożył stronę. Możesz też poeksperymentować ze zmianą kodu i dodawaniem własnych elementów do szablonu.
Aby rozpocząć, wyszukaj bezpłatne szablony witryn internetowych lub poeksperymentuj z szablonami dołączonymi do oprogramowania do projektowania witryn internetowych
Metoda 2 z 4: Opanowanie HTML
Krok 1. Zapoznaj się z podstawowymi znacznikami HTML
HTML to prosty język znaczników, który służy do formatowania podstawowych elementów witryny. Możesz formatować różne elementy swojej witryny za pomocą tagów. Tagi są wyświetlane w nawiasach kątowych przed i po każdym elemencie oraz zawierają instrukcje dotyczące sposobu funkcjonowania tego elementu na stronie. Aby zamknąć tag, umieść / przed ostatnim tagiem w nawiasach kątowych.
- Na przykład, jeśli chcesz, aby część tekstu była pogrubiony, otoczysz element tagiem w następujący sposób: Ten tekst jest pogrubiony.
- Kilka typowych tagów to (akapit), (kotwica, która definiuje połączony tekst) i (czcionka, która może pomóc w zdefiniowaniu różnych atrybutów tekstu, takich jak rozmiar i kolor).
- Inne znaczniki definiują różne części samego dokumentu HTML. Na przykład służy do zawierania informacji o stronie, które nie będą widoczne dla widza, takich jak słowa kluczowe lub opis strony, który pojawi się w wynikach wyszukiwania.
Krok 2. Naucz się używać atrybutów tagów
Niektóre tagi wymagają dodatkowych informacji, aby określić, jak powinny działać. Te dodatkowe informacje pojawiają się w znaczniku otwierającym i są nazywane „atrybutem”. Nazwa atrybutu pojawia się zaraz po nazwie znacznika, oddzielona spacją. Wartość atrybutu jest dołączona do nazwy atrybutu za pomocą znaku = i otoczona cudzysłowami.
- Na przykład, jeśli chcesz, aby część tekstu była czerwona, możesz to zrobić za pomocą znacznika i odpowiedniego atrybutu koloru czcionki, na przykład: Ten tekst jest czerwony.
- Wiele efektów, które kiedyś rutynowo osiągano za pomocą atrybutów znaczników HTML, takich jak ustawianie różnych kolorów czcionek, jest teraz zwykle wykonywanych za pomocą kodowania CSS.
Krok 3. Eksperymentuj z zagnieżdżonymi elementami
HTML umożliwia również umieszczanie elementów w innych elementach w celu tworzenia bardziej złożonego formatowania. Na przykład, jeśli chcesz zdefiniować akapit, a następnie pochylić część tekstu w akapicie, możesz to zrobić w ten sposób:
Uwielbiam kodować!
Krok 4. Zapoznaj się z pustymi elementami
Niektóre elementy w HTML nie wymagają jednocześnie otwierających i zamykających znaczników. Na przykład, jeśli wstawiasz obraz, potrzebujesz tylko jednego tagu „img” zawierającego nazwę tagu i wszelkie inne niezbędne atrybuty (takie jak nazwa pliku obrazu i dowolny tekst alternatywny, który chcesz dodać w celu ułatwienia dostępu). Na przykład:
Krok 5. Poznaj podstawowy układ dokumentu HTML
Aby Twoja witryna oparta na HTML działała poprawnie, musisz wiedzieć, jak sformatować całą stronę. Wiąże się to z określeniem, gdzie zaczyna się i kończy Twój kod HTML, a także za pomocą tagów, aby określić, które części kodu będą wyświetlane, a które mają zapewnić ukryte informacje w tle. Na przykład:
- Użyj tagu, aby zdefiniować swoją stronę jako dokument HTML.
- Następnie umieść całą stronę w tagach, aby określić, gdzie zaczyna się i kończy Twój kod.
- Umieść w tagach wszelkie informacje, które nie będą wyświetlane widzowi, takie jak tytuł strony, słowa kluczowe i opis strony.
- Zdefiniuj treść swojej strony (tj. dowolny tekst i obrazy, które chcesz wyświetlić widzowi) za pomocą tagów.
Metoda 3 z 4: Zapoznanie się z CSS
Krok 1. Użyj CSS, aby zastosować style do dokumentów HTML
CSS to język arkuszy stylów, który umożliwia zastosowanie różnych elementów stylu i projektu do Twojej strony internetowej. Na przykład, jeśli chcesz selektywnie zastosować określoną czcionkę lub kolor tekstu do niektórych elementów tekstowych na swojej stronie, możesz w tym celu utworzyć plik CSS. Następnie możesz wstawić plik CSS do dokumentu HTML, gdziekolwiek chcesz.
-
Na przykład, jeśli chcesz, aby plik CSS zmienił wszystkie elementy akapitu w dokumencie HTML na zielono, możesz utworzyć plik.css zawierający wiersze:
- P {
- Zielony kolor;
- }
- Następnie zapisz plik pod nazwą style.css.
- Aby zastosować arkusz stylów do dokumentu HTML, wstaw go jako pusty element łącza w znacznikach. Na przykład:
Krok 2. Zapoznaj się z elementami zestawu reguł CSS
Pojedynczy fragment kodu CSS nazywany jest „zestawem reguł”. Zestaw reguł zawiera różne elementy, które definiują, co ma robić Twój kod. Obejmują one:
- Selektor, który definiuje element HTML, który chcesz stylizować. Na przykład, jeśli chcesz, aby zestaw reguł wpływał na elementy akapitu, możesz zacząć swój zestaw reguł od litery „p”.
- Deklaracja, która definiuje właściwości, które chcesz stylizować (takie jak kolor czcionki). Deklaracja jest zawarta w nawiasach klamrowych {}.
- Właściwość, która określa, którą właściwość elementu HTML chcesz nadać stylowi. Na przykład w tagu możesz określić styl koloru tekstu.
- Wartość właściwości określa konkretnie, w jaki sposób chcesz zmienić właściwość (np. jeśli właściwość ma kolor czcionki, wartością właściwości będzie „zielony”).
- W ramach jednej deklaracji można modyfikować kilka różnych właściwości.
Krok 3. Zastosuj CSS do swojego tekstu, aby Twój skład wyglądał ładnie
CSS jest przydatny do stosowania różnych efektów do tekstu bez konieczności indywidualnego kodowania każdej właściwości w HTML. Eksperymentuj ze zmianą różnych właściwości składu w CSS, w tym:
- Kolor czcionki
- Rozmiar czcionki
- Rodzina czcionek (np. zakres czcionek, których chcesz użyć w tekście)
- Wyrównanie tekstu
- Wysokość linii
- Odstępy między literami
Krok 4. Eksperymentuj z pudełkami i innymi narzędziami układu CSS
CSS jest również przydatny do dodawania atrakcyjnych elementów wizualnych do strony, takich jak pola tekstowe i tabele. Dodatkowo możesz go użyć do zmiany ogólnego układu strony i określenia położenia różnych elementów względem siebie.
Na przykład możesz zdefiniować atrybuty, takie jak szerokość i kolor tła elementu, dodać obramowanie lub ustawić marginesy, które stworzą odstęp między różnymi elementami na stronie
Metoda 4 z 4: Praca z innymi językami projektowania
Krok 1. Naucz się JavaScript, jeśli chcesz dodać interaktywne elementy do swoich stron
JavaScript to świetny język do nauki, jeśli chcesz dodać do swoich witryn bardziej zaawansowane funkcje, takie jak animacje i wyskakujące okienka. Weź udział w kursie lub poszukaj samouczków online na temat kodowania w JavaScript i włączania tych zakodowanych elementów do stron internetowych |za pomocą HTML.
Zanim oswoisz się z JavaScriptem, musisz znać podstawy tworzenia stron w HTML i CSS
Krok 2. Zapoznaj się z jQuery, aby ułatwić kodowanie JavaScript
jQuery to biblioteka JavaScript, która może uprościć programowanie w języku Java, umożliwiając dostęp do różnych wstępnie zakodowanych elementów JavaScript. jQuery to świetne narzędzie, jeśli znasz już podstawy kodowania JavaScript.
Możesz uzyskać dostęp do biblioteki jQuery i wielu innych cennych zasobów za pośrednictwem jQuery.org, strony internetowej Fundacji jQuery
Krok 3. Naucz się języków po stronie serwera, jeśli interesujesz się rozwojem back-endu
Chociaż HTML, CSS i JavaScript są idealne dla projektantów stron internetowych, którzy koncentrują się na tym, co użytkownik widzi i robi w witrynie, języki po stronie serwera są przydatne, jeśli bardziej interesuje Cię praca za kulisami. Jeśli chcesz dowiedzieć się więcej o programowaniu zaplecza, skup się na nauce języków takich jak Python, PHP i Ruby on Rails.
Te języki są przydatne do zarządzania i przetwarzania danych, których użytkownik nie widzi. Na przykład PHP można wykorzystać do tworzenia bezpiecznych narzędzi do tworzenia haseł na stronach internetowych wymagających logowania
Pliki pomocy
Ściągawka HTML
Ściągawka CSS
