Wszystko, co odwiedzający widzi na stronach serwisu, jest wyświetlane przez przeglądarkę na podstawie szczegółowych instrukcji przesłanych mu przez serwer. Instrukcje te nazywane są kodem html strony i składają się z oddzielnych „tagów”, które opisują typ, wygląd i położenie każdego elementu z osobna. Aby umieścić dowolny nowy element (na przykład obraz) na stronie, musisz dodać odpowiednią instrukcję - tag - do jego kodu źródłowego. Rozważ najłatwiejszy sposób na zrobienie tego.
Instrukcje
Krok 1
Jeśli korzystasz z jakiegokolwiek systemu zarządzania treścią, jest bardzo prawdopodobne, że zawiera on edytor stron. Najpierw musisz otworzyć żądaną stronę w tym edytorze. Dalej - możliwe są opcje. W najlepszym przypadku edytor stron będzie miał "tryb wizualny", czyli "tryb WYSIWYG" (To, co widzisz, to to, co dostajesz - "dostajesz to, co widzisz"). W tym trybie nie będziesz musiał w ogóle zajmować się oryginalnym kodem html! Strona w edytorze będzie wyglądać tak samo jak na stronie, wystarczy najechać myszką w wybrane miejsce i nacisnąć przycisk „wstaw obrazek” na panelu edytora.
Krok 2
W rezultacie otworzy się okno dialogowe, w którym musisz wybrać żądany obraz. Jeśli jeszcze go nie przesłałeś, jest tam również przycisk do wybrania obrazu na twoim komputerze i przesłania go na serwer. Ponadto w tym oknie dialogowym możesz ustawić kolor i szerokość ramki wokół obrazu, odległość i kolor wypełnienia między ramką a obrazem, tekst podpowiedzi. Nie trzeba tutaj podawać wymiarów, ale ze względu na przyspieszenie ładowania strony i zapobieganie zniekształceniom projektu, nadal lepiej to zrobić. Gdy wszystkie wymagane pola okna dialogowego zostaną wypełnione, kliknij „OK”, a następnie zapisz edytowaną stronę.
Krok 3
Ze względu na to, że nie ma jednego standardu dla systemów sterowania, procedura wstawiania obrazu w trybie wizualnym Twojego systemu może się nieznacznie różnić, ale zasada będzie taka sama. Z tego samego powodu tryb WYSIWYG może nie pojawiać się w systemie zarządzania witryną. Następnie musisz jeszcze edytować kod źródłowy strony w HTML (HyperText Markup Language - "język znaczników hipertekstowych"). Będziesz musiał wstawić tag we właściwym miejscu w kodzie, który mówi przeglądarce, aby wyświetlić tutaj obraz. W najprostszej postaci powinno to wyglądać tak: Oto „adres względny” obrazu - pod tym adresem przeglądarka powinna skontaktować się z serwerem, aby pobrać z niego plik obrazu. Jeśli adres jest względny, przeglądarka przyjmie, że plik znajduje się w tym samym folderze serwera co sama strona (lub w podfolderze). Aby jednak się nie pomylić, lepiej podać „adres bezwzględny” - na przykład tak: Oczywiście, aby serwer znalazł i wysłał obraz do przeglądarki, należy go przesłać na określony Lokalizacja. Najłatwiej to zrobić za pomocą menedżera plików, który znajduje się w każdym systemie zarządzania treścią, a także w panelu sterowania Twojej firmy hostingowej. Możesz to również zrobić za pomocą protokołu FTP (File Transfer Protocol - „protokół przesyłania plików”), używając specjalnego programu - klienta FTP. Jest ich wiele, zarówno płatnych, jak i bezpłatnych - na przykład Cute FTP, FlashFXP, WS FTP itp. Ale oczywiście instalacja, opanowanie i konfiguracja programu zajmie trochę czasu, więc menedżer plików do pobrania wszystkiego, czego potrzebujesz przeglądarka jest łatwiejszą opcją.
Krok 4
Oprócz adresu w tagu html obrazu możesz podać dodatkowe informacje - "atrybuty" tagu. Na przykład atrybut alt=„Obraz” zawiera tekst podpowiedzi, który pojawia się po najechaniu kursorem myszy na obraz: Można go zastąpić atrybutem - title: - Rozmiar prostokąta, w którym powinna wyświetlanie obrazu jest ustawiane przez atrybuty width i height: - Atrybut border określa szerokość obramowania wokół obrazu (w pikselach): Jeśli obrazek jest łączem, przeglądarka narysuje wokół niego niebieską ramkę. Aby się go pozbyć, ustaw wartość border na zero: - Pozostałe dwa atrybuty zawierają informacje o wielkości wcięcia obrazka od sąsiadujących elementów (od linii tekstu, innych obrazków itp.) - hspace ustawia rozmiar wcięcie poziome (lewe i prawe), vspace - pionowo (dół i góra):
