Profesjonalni projektanci stron internetowych opracowują szablony stron internetowych, zwykle w potężnych edytorach graficznych, takich jak Adobe Photoshop. Efektem pracy jest plik z obrazem, który w takiej formie jest dostarczany klientowi. Aby skorzystać z gotowego projektu, czyli rozłożyć stronę internetową, należy wyciąć szablon.
Niezbędny
edytor grafiki rastrowej Adobe Photoshop
Instrukcje
Krok 1
Otwórz plik szablonu w edytorze graficznym Adobe Photoshop. Wybierz z menu opcję Plik i Otwórz lub naciśnij kombinację klawiszy Ctrl + O. W wyświetlonym oknie dialogowym przejdź do katalogu z plikiem, wybierz go z listy i kliknij przycisk „Otwórz”.
Krok 2
Wybierz dogodną skalę do oglądania obrazu szablonu. Użyj narzędzia Lupka lub elementów menu kontekstowego. Wybierz skalę, która umożliwia ustawienie kursora z dokładnością do pikseli. Jest to konieczne do dokładnego ustawienia linii odniesienia.
Krok 3
Utwórz zestaw linii odniesienia nad obrazem szablonu. Włącz wyświetlanie linijek w oknach dokumentów, jeśli nie jest jeszcze włączone. Aby to zrobić, naciśnij Ctrl + R lub wybierz z menu Widok i linijki.
Krok 4
Przesuń kursor myszy nad górną linijkę, aby dodać poziomą linię odniesienia. Naciśnij i przytrzymaj lewy klawisz. Przesuń kursor myszy w dół do obszaru obrazu. Podobnie, używając odpowiedniej linijki, możesz dodać poziome linie.
Krok 5
Dodaj wymaganą liczbę linii odniesienia i umieść je wzdłuż granic podziału regionów szablonu. Linie powinny przechodzić przez wszystkie miejsca, w których chcesz wyciąć szablon. Powinny ograniczać wszystkie obrazy i obszary logiczne (logo, nagłówek witryny, menu poziome i pionowe itp.), które będą prezentowane na stronie internetowej.
Krok 6
Aktywuj narzędzie Cięcie na plasterki. Jego przycisk znajduje się na pionowym pasku narzędzi.
Krok 7
Utwórz wymaganą liczbę obszarów cięcia za pomocą narzędzia Slice. Wybierz dogodną skalę do wyświetlania szablonu. Użyj myszki, aby ustawić granice obszarów. Wytyczne dodane w trzecim kroku zapewnią precyzyjne pozycjonowanie granic tworzonych obiektów. W razie potrzeby dostosuj istniejące obszary za pomocą narzędzia Zaznaczanie plasterków.
Krok 8
Zmień właściwości obszarów cięcia zgodnie z wymaganiami. Aktywuj narzędzie Zaznaczanie plasterków. Kliknij prawym przyciskiem myszy żądany obszar. Z menu kontekstowego wybierz opcję Edytuj opcje plasterka. W wyświetlonym oknie dialogowym Opcje plasterka wybierz typ obszaru (obraz, pusty obszar, tabela), tryb wypełnienia tła, określ, jeśli to konieczne, nazwę, docelowy adres URL, zawartość atrybutu alt=„Obraz” i inne wartości. Kliknij OK.
Krok 9
Wytnij szablon. Wybierz z menu Plik i Zapisz dla Internetu i urządzeń lub naciśnij Shift + Ctrl + Alt + S. W oknie dialogowym Zapisz dla Internetu i urządzeń określ parametry formatu i kompresji obrazu, do których szablon zostanie wycięty. Kliknij przycisk Zapisz. Wyświetlone zostanie okno dialogowe Zapisz zoptymalizowane jako.
Krok 10
Wybierz HTML i obrazy (*.html) z listy rozwijanej Typ pliku, a w polu Nazwa pliku wpisz nazwę pliku, w którym zostanie umieszczony znacznik HTML szablonu. Z listy Plasterki wybierz Wszystkie plasterki. Określ katalog danych wyjściowych i kliknij przycisk „Zapisz”.
Krok 11
W docelowym katalogu zostanie umieszczony plik HTML, który w rzeczywistości jest gotowym szablonem strony internetowej. Podkatalog images będzie zawierał zestaw obrazów, do których został wycięty oryginalny szablon.
