Czasami będziesz musiał oddzielić obraz od tła lub otaczającej zawartości, aby wyróżniała się w programie Dreamweaver. Jednym ze sposobów uzyskania tego efektu jest umieszczenie obramowania wokół obrazu.
Ramka może zwrócić uwagę na obraz i może stanowić element stylistycznego wyglądu całej witryny. Czasami ramka może również wskazywać łącze.
Istnieją dwa sposoby definiowania granicy w tym ćwiczeniu: Użyjesz CSS do utworzenia obramowania, ale poznasz też drugą metodę stosowania atrybutu obramowania do tagu obrazu.
Jak dodać obramowania do programu Dreamweaver?
Panel obramowania programu Dreamweaver określa wygląd granic wokół obrazów, tabel, znaczników
- Wybierz regułę studioPhoto z listy Wszystkie reguły w panelu stylów CSS.
- Kliknij przycisk Edytuj styl u dołu panelu.
- Reguły pojawiają się w kolejności, w jakiej je utworzyłeś.
- Z najstarszymi na górze listy i najnowszymi na dole.
- W oknie dialogowym Definicja reguły CSSwybierz kategorię Obramowanie.
- Wybierz bryłę z opcji stylu.
- Wprowadź 1 w górnym polu tekstowym sekcji Szerokość i wybierz #747E3F.
- Kliknij OK, aby zamknij okno dialogowe i zastosuj zmianę.
- Dreamweaver dodaje obramowanie a piksel wokół obrazu.
- Ustawienia obramowania używają pomiaru opartego na pikselach.
- Wartość domyślna w oknie dialogowym Definicja reguły.
- Możesz ustawić szerokość obramowania na dowolny numer.
Jak korzystać z panelu obramowania, który prezentuje program Dreamweaver?
Móc użyj ustawień obramowania, aby utworzyć linie podziału między znacznikami
- Zwiń granicę: Określ, czy obramowania tabeli mają być łączone w pojedyncze obramowanie, czy rozdzielane tak, jak pojawiają się w standardowym kodzie HTML, gdy używasz znacznika
. Dostępne opcje to Zwiń, Odłącz (domyślnie) i Dziedzicz. - Przestrzeń między krawędziami: Ustaw odstęp między obramowaniami sąsiednich komórek tabeli, gdy opcja Zmniejsz obramowanie jest ustawiona na Oddziel.
- Kolor ramki: Określ kolor obramowania dla wszystkich czterech boków elementu, wprowadzając kolor szesnastkowy lub klikając kolor i używając selektora kolorów.
- Górny, prawy, lewy i dolny kolor obramowania: Określ różne kolory dla dowolnego lub wszystkich obramowań elementu.
- Szerokość granicy: Określ szerokość lub grubość obramowania. Możesz wybrać cienki, średni lub gruby albo możesz określić rozmiar w pikselach, ems lub dowolną inną opcję rozmiaru.
- Górna, prawa, lewa i dolna granica szerokości: Określ różne szerokości dla dowolnego lub wszystkich obramowań elementu.
- Styl obramowania: Wybierz jedną z opcji stylu obramowania, w tym Jednolity, Kropkowany lub Podwójny.
Styl obramowania górnego, prawego, lewego i dolnego — określ różne style obramowania dla dowolnego lub wszystkich obramowań elementu. - Promień krawędzi: Twórz zaokrąglone rogi na swoich krawędziach. Kliknij, aby umieścić kursor w dowolnym z czterech pól znajdujących się w pobliżu rogów pola podglądu obramowania i wprowadź liczbę określającą wielkość promienia. Możesz wybrać dowolną opcję rozmiaru CSS za pomocą listy rozwijanej.
zalecenia
Możesz także zastosować obramowanie do obrazu, używając atrybutu obramowania znacznika . W tym celu wybierz obraz i wprowadź wartość żądanej grubości w polu tekstowym Obramowanie w Inspektorze właściwości.
Jeśli przypiszesz link do obrazukolor obramowania będzie taki sam, jak domyślny kolor łącza określony we właściwościach strony, chyba że zostanie zastosowany styl CSS, w którym to przypadku łącze nie spowoduje żadnej zmiany koloru obramowania.
Kolor obramowania będzie taki sam jak domyślny kolor tekstu który został określony w oknie dialogowym Właściwości strony. Poniższy przykład przedstawia obraz, do którego zastosowano atrybut obramowania za pomocą Inspektora właściwości.
Unikaj atrybutu border na rzecz używania CSS do definiowania obramowań obrazu, tak jak to zrobiłeś w tym ćwiczeniu, to lepszy proces kodowania.
