Jak Zrobić Gumowy Nagłówek Na Stronę Internetową

Spisu treści:

Jak Zrobić Gumowy Nagłówek Na Stronę Internetową
Jak Zrobić Gumowy Nagłówek Na Stronę Internetową

Wideo: Jak Zrobić Gumowy Nagłówek Na Stronę Internetową

Wideo: Jak Zrobić Gumowy Nagłówek Na Stronę Internetową
Wideo: Zrób własny Nagłówek Na Stronie WordPress [WordPress Elementor] 2024, Kwiecień
Anonim

Tworząc stronę internetową w Internecie, jednym z najważniejszych punktów, które musi wziąć pod uwagę deweloper, jest jej funkcjonalność, wszechstronność i wydajność. Aby witryna była w pełni i poprawnie wyświetlana w dowolnej przeglądarce na komputerach o różnych rozdzielczościach ekranu, możesz utworzyć wygodny „gumowy” nagłówek, składający się z kilku elementów graficznych.

Jak zrobić gumowy nagłówek dla strony internetowej
Jak zrobić gumowy nagłówek dla strony internetowej

Instrukcje

Krok 1

W pierwszym kroku tworzenia takiego nagłówka dla strony internetowej otwórz w Photoshopie obraz, który już przygotowałeś do opublikowania w Internecie, a następnie pokrój go na kawałki za pomocą narzędzia Slice na pasku narzędzi. Wytnij nagłówek tak, aby środkowa część była pusta, dzięki czemu otrzymasz trzy elementy graficzne. Umożliwi to rozciągnięcie nagłówka do dowolnej rozdzielczości ekranu.

Krok 2

Po wycięciu nagłówka zapisz go, optymalizując pliki podczas zapisywania w formacie internetowym (Zapisz w Internecie). Ustaw żądany format pliku do zapisania - na przykład gif, jpeg lub png. Aby zmienić każdy fragment obrazu, kliknij opcję Slice Select Tool w menu i zmień rozmiar obrazów tak, aby ich rozmiar był jak najmniejszy przy jak najmniejszej utracie jakości wizualnego wyświetlania obrazu na ekranie. Zapisz edytowane obrazy jako html i obrazy.

Krok 3

Po zapisaniu zdjęć edytuj kod HTML, otwierając zapisany dokument html za pomocą Notatnika. W notatniku usuń wszystkie niepotrzebne wiersze kodu. Zostaw tylko niezbędne wiersze - dane o tabeli, w której osadzone są Twoje zdjęcia:

Krok 4

W tych wierszach zamiast yourimage

Krok 5

Aby środkowa część obrazu się rozciągnęła, rozkładając skrajne obrazy na boki, napisz odpowiednie atrybuty kodu w wierszach. Określ w kodzie własne parametry szerokości i wysokości.

Krok 6

Prześlij wygenerowane obrazy nagłówka do katalogu głównego witryny, a następnie edytuj kod HTML z nowymi ścieżkami do obrazów nagłówka na serwerze. Wklej kod nagłówka między tagami.

Zalecana: