(C) ZPKSoft
develophtml
wszystko czego potrzebujesz do budowy swojej strony internetowej. Bez CMS, bez FTP.
Panele narzędziowe
W
trybie edycji strony mamy do dyspozycji przyciski narzędziowe, pogrupowane w panele.
Pasek paneli narzędziowych:
Panele po rozwinięciu:
Korzystanie z opcji narzędziowych
Po najechaniu myszą na pozycję na pasku paneli narzędziowych rozwija się określony panel:
Opcje formatujące czcionkę
Pierwszy panel narzędziowy zawiera opcje dotyczące formatowania tekstu. Aby tekst mógł być odpowiednio sformatowany, należy najpierw go zaznaczyć. Formatowanie dotyczy tylko zaznaczonego fragmentu tekstu:
↑przycisk | znaczenie |
---|---|
krój czcionki | |
wielkość czcionki | |
kolor czcionki | |
kolor tła czcionki | |
przekreślenie czcionki | |
pogrubienie czcionki | |
pochylenie czcionki | |
podkreślenie czcionki |
Opcje formatujące akapit
Drugi panel narzędziowy zawiera opcje dotyczące formatowania akapitu . Aby akapit mógł być odpowiednio sformatowany, kursor powinien być ustawiony w dowolnym miejscu akapitu.
przycisk | znaczenie |
---|---|
justowanie centralne | |
justowanie na całą szerokość | |
justowanie do lewej | |
justowanie do prawej | |
większe wcięcie | |
mniejsze wcięcie | |
lista numerowana | |
lista punktowana |
Wstawianie siatki
Kolejny panel umożliwia wstawienie siatki. Są do wyboru dwie możliwości: siatka typu tabela i ramki typu kolumny tekstu:
przycisk | znaczenie |
---|---|
tabela | |
ramki |
Ramki tekstowe inaczej pozycjonują zawartość, Przykład tabelki:
tekst | tekst |
---|---|
tekst druga linia trzecia linia |
tekst |
to samo w dwóch ramkach ułożonych jedna obok drugiej:
tekst druga linia trzecia linia |
tekst |
Linie ramek są niewidoczne.
Obiekty blokowe
Panel "obiekty" zawiera elementy blokowe, linię poziomą, biblioteki emotikonów i znaków symbolicznych:
przycisk | znaczenie |
---|---|
element blokowy DIV | |
element blokowy zawierający tekst preformatowany | |
element blokowy typu cytat | |
dowolny tag HTML | |
linia pozioma | |
emotikony | |
znaki symboliczne |
Wybranie
elementu blokowego DIV spowoduje pojawienie się okna dialogowego gdzie można określić wstępnie niektóre cechy tego elementu:
Tekst preformatowany jest to czysty tekst pisany czcionką stałej szerokości Courier New z akceptacją wielu spacji obok siebie (w html spacje powtarzające się są ignorowane), np:
tekst
<- trzy spacje
tekst preformatowany dobrze sprawdza się do cytowania kodu.
Cytat pokazywany jest formacie wyróżniającym, np:
Ach, już niejedna jak but głupiutka,
Wystrychnęła mędrca na dudka.
tag HTML - opcja ta umożliwia wstawienie dowolnego obiektu HTML, np. jeżeli w oknie dialogowym wpiszemy słowo button to do kodu HTML wstawiony zostanie tekst:
<button>-button-</button>
a w widoku strony zobaczymy:
Edytując własności takiego obiektu możemy nadać mu odpowiedni styl, przypisać procedury obsługi zdarzeń, np:
w efekcie otrzymamy:
emotikony - po najechaniu myszą na ten przycisk pojawi się biblioteka emotikon do wyboru. Emotikony są elementami wektorowymi, więc można je dowolnie powiększać bez utraty jakości:
znaki symboliczne - podobnie jak emotikony są elementami wektorowymi które ze swej natury nie tracą na jakości przy powiększaniu. Znaki powiększamy korzystając z opcji formatujących tekst:
Aby wstawić inne znaki tzw. html entities można je skopiować z
dowolnego źródła i wkleić na stronę.
Łącza
Ten panel posiada narzędzia umożliwiające zarządzanie różnego rodzaju łączami:
przycisk |
znaczenie |
---|---|
wstawienie łącza | |
usunięcie łącza | |
utworzenie nowej podstrony i łącza do niej | |
wstawienie na stronę obrazu poprzez podanie łącza do istniejącego obrazu, np. grafika ze strony zpksoft.pl:
| |
wstawienie obiektu w ramce, może to być inna strona lub np. film na youtube |
Aby wstawić na stronę film z youtube, należy posłużyć się odpowiednim łączem, np. klikamy kolejno opcje znajdujące się pod filmem:
a następnie po wybraniu przycisku
wklejamy skopiowany kod:
Efekt jest od razu widoczny na stronie:
Zdjęcia w tekście i skany dokumentów
Kolejny panel posiada tylko dwa przyciski. Pierwszy służy do wstawiania zdjęcia do tekstu. Zdjęcie wskazane z dysku jest skalowane do wielkości 400x300 pikseli.
Kolejny służy do wstawiania skanu, czyli dokumentu w wielkości czytelnej. Skan lub zdjęcie wskazane na dysku zostanie sformatowane do wielkości 850x1200 pikseli. Na większości ekranów komputerowych będzie to grafika wielkości kartki A4.
przycisk |
znaczenie |
---|---|
wstawianie zdjęcia ze skalowaniem do 400x300px | |
wstawianie skanu lub zdjęcia ze skalowaniem do 850x1200px |
Usunięcie formatowania
Jeżeli zostały użyte różne opcje formatowania (wielkość i kolor czcionki itp.) a jest potrzeba całkowitej zmiany stylu, wygodnie jest najpierw usunąć formatowanie do domyślnego.
Czytaj dalej-
-