HTML - opis paska narzędziowego edytora Homesite 4.5
Edytor Homesite jest zaawansowanym edytorem HTML-owym, w pełni konfigurowalnym
przez użytkownika.
Główny pasek narzędziowy zawiera przyciski służące do otwierania nowej strony,
zapisywania edytowanej strony na dysku, wycinania fragmentów tekstu, przeszukiwania
tekstu i zamiany słów w dokumencie, cofania zmian, kolorowania itp.
Nowy dokument HTML zawiera zwykle następujący standardowy kod:
<html>
<head>
<title>tytuł</title>
</head>
<body>
</body>
</html>
Podczas edycji dokumentów lewy, górny panel pokazuje katalog, w którym zapisywane są bieżące dokumenty. Natomiast panel lewy, dolny pokazuje zawartość tego katalogu. Zwykle widoczne są dokumenty z rozszerzeniem *.html, pliki graficzne *.gif, *.jpg, skrypty JavaScript *.js oraz arkusze stylów *.css
Poniższy rysunek pokazuje panel lewy : u góry widoczne są katalogi natomiast dolna część panelu wskazuje pliki html-owe.
Środkowy pasek służy do konfigurowania edytora.
Do szybkiego tworzenia dokumentów HTML-owych służą przyciski znajdujące się na podwójnym pasku narzędziowym. Każda zakładka grupuje przyciski służące do edycji
wybranej grupy znaczników. Zakładka Common zawiera najczęściej używane przyciski
które powodują wklejenie znaczników odsyłaczy, paragrafu lub nowej linii.
Zakładka fonts służy do ustawiania kroju i wielkości czcionek oraz koloru tekstu.
Pozwala również sformatować nagłówki.
Przykład dokumentu z zastosowanymi znacznikami opisanymi powyżej.
Pierwszy dokument - pierw1.html
<HTML>
<HEAD>
<TITLE>tytul</TITLE>
</HEAD>
<BODY bgcolor="Aqua" leftmargin=5 topmargin=5>
<div align="center"><h2>Tytuł pierwszego dokumentu</h2></div>
<font color="Red">tresc dokumentu</font><br>druga linia<br>
trzecia linia<p>
Nowy paragraf. <b><center>Tekst dalszy</center></b><br>
<i>tekst pochylony</i> <br>
Ozdobimy tę strone obrazkiem <img src="TOOL.GIF" width=106 height=119 border=0 alt="Ciężkie prace"><br><br>
<br>Teraz zobaczymy odsyłacz do innej strony
<a href="dd.html">odsylacz do nowej strony</a><br><p>Odsyłaczem może być obrazek
<center><a href="dd.html"><img src="dennis_rodman.jpg" width=65 height=90 border=6 align="middle" alt="koszykarz"></a></center>
</BODY>
</HTML>
Drugi dokument dd.html
<html>
<head>
<title>druga strona</title>
</head>
<body>
To jest drugi dokument<br>
<a href="pierw1.html">Powrót </a>do poprzedniej strony
<br> koniec drugiej strony
</body>
</html>
Kolejna zakładka służy do szybkiego zdefiniowania tabelki oraz sformatowania tekstu w wierszach i kolumnach. Każda tabela składa się z wierszy, a wiersze składają się z komórek.
Zakładka Tables pozwala wygenerować dowolną tabelkę, ustawić tło tabeli, obramowanie, szerokość i odległości między wierszami tabeli.
Tabele pomagają sformatować w odpowiedni sposób nie tylko tekst ale również grafikę, tak by odpowiednie elementy pokazane zostały w postaci tabeli. Np. galeria obrazków wygląda bardzo przejrzyście i ładnie jeśli poszczególne obrazy umieścimy w komórkach tabeli.
Wybierając interaktywny sposób tworzenia tabeli musimy określić liczbę wierszy i kolumn oraz właściwości ogólne tabeli.
Przykład prostej tabelki
<html>
<head> <title>Tabelka</title> </head>
<body>
To jest tabelka
<table align="center" bgcolor="#00FF00" cellspacing="2" cellpadding="2" border="3" frame="box" rules="all">
<tr> <td align="center">1+2+3+5+15</td>
<td align="center">3+4</td>
<td align="center">45-3</td>
</tr>
<tr> <td>Ala</td>
<td align="center">Ma</td>
<td align="right">kota</td>
</tr>
<tr> <td align="center" valign="bottom">Kot</td>
<td align="center" valign="baseline">siedzi na płocie</td>
<td align="center" valign="baseline">i mruczy.</td>
</tr>
</table>
</body>
</html>
Następnie musimy ustalić szerokość i zawartość poszczególnych komórek tabeli. Dla każdej komórki możemy zdefiniować inne tło i inne zasady zapisania jej zawartości.
Innym sposobem formatowania dokumentów są listy Lists. Listy moga być uporządkowane lub nie i mogą się zagnieżdżać. Wśród list wyróżniamy i często stosujemy listy definicyjne.
Przykład listy numerowanej i nie numerowanej oraz listy definicyjnej lista.html
<html>
<head>
<title>Lista</title>
</head>
<body>
Komputer składa się z następujących elementów:
<ol type="1">
<li>Jednostka centralna
<ul type="circle">
<li>płyta główna
<li>procesor
<li>karta graficzna
<li>dysk twardy
<li>pamięć RAM
</ul>
<li>Monitor
<li>klawiatura
<li>Myszka
</ol>
Słownik pojęć:
<dl>
<dt>pamięć RAM
<dd>pamięć o dostępie losowym
<dt>dysk twardy
<dd>pamięć masowa
</dl>
</body>
</html>
Kolejne zakładki edytora Homesite to Frames i Forms
Zakładka Frames służy do podzielenia okna przeglądarki na mniejsze okienka, w których mogą być wyświetlane różne dokumenty. Natomiast zakładka Forms służy do zdefiniowania formularza którego zawartość może być przesłana do administratora lub zapisana na dysku serwera WWW.
Opiszę najpierw znaczenie zakładki definiującej okna czyli Frames.
Dokument zawierający tę definicję powinien zawierać tylko definicję okien i nie powinien zawierać znaczników body. Okna zdefiniowane powinny otrzymać unikalne nazwy. Nazwy okien posłużą do wskazania, w którym oknie dany dokument będzie wyświetlony. Jeśli tego nie zdefiniujemy dokumenty otwierane są w bieżącym oknie lub nowym oknie przeglądarki.
Kiedy decydujemy się na utworzenie okien musimy pamiętać o skierowaniu dalszych dokumentów do odpowiednich okien. Wykorzystujemy w tym celu atrybut target .
Forms jest wykorzystywany do przekazywania danych od użytkownika do serwera lub administratora bazy danych.
Zakładka ta definiuje pola tekstowe, pola ukryte, hasła, przyciski typu checkbox oraz przyciski radiowe. Ponadto formularz może zawierać listy rozwijalne oraz pola tekstowe długie czyli tzw. Textarea.
Przykłady dokumentów z podziałem na okna.
<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
</HEAD>
<!-- frames -->
<frameset cols="30%,*">
<frame name="lewe" src="lista.html" marginwidth="1" marginheight="1" scrolling="auto" frameborder="yes">
<frame name="prawe" src="pierw1.html" marginwidth="1" marginheight="1" scrolling="Auto" frameborder="yes">
</frameset>
</frameset>
</HTML>
Zapisz bieżący dokument
Otwórz dokument
Nowa strona
Zapisz wszystkie dokumenty
Pokaż paletę kolorów
Powtórz edycję
Cofnij edycję
Wytnij tekst zaznaczony
Przeglądanie dokumentów :
Pierwszy, następny. poprzedni
Zawijanie tekstu
Zamyka aktywny dokument
Pokaż numery linii
Pokaż lewy margines
Pliki html-owe
Wyróżniony katalog
Dodatkowa spacja
Nowa linia
Nowy paragraf
Nowa strona
Wklej znacznik <div>
Justuj tekst do prawej
Centruj tekst
Wklej linię poziomą
Wklej obrazek
Wklej odsyłacz
Indeks górny i dolny
Wyróżnienie tekstu
Pochylenie tekstu
Wytłuszczenie tekstu
Nagłówki h1, h2, h3
Tekst preformatowany
Ustalanie wielkości czcionki
Ustalanie kroju czcionki
Dialogowy sposób wklejania wierszy i komórek
Wkleja znaczniki tabeli
Szybkie tworzenie tabeli
Wkleja wiersze, komórki i nagłówki tabeli
Interaktywny sposób tworzenia tabeli
Ustawienie tabeli na stronie: z lewej, wycentro- wane lub z prawej
Określenie szerokości tabeli
Ustalenie grubości obramowania oraz sposobu rysowania ramek
Ustalenie koloru tła tabeli
Ustalenie odstępu między komórkami
Sposób zapisania zawartości komórki: centrowanie lub justowanie do lewej lub prawej
Wyróżnienie komórki której właściwości ustalamy
Ustalenie szerokości komórki
Wpisanie zawartości komórki
Szybkie tworzenie listy definicyjnej
Wkleja znacznik listy nie- uporządkowanej
Szybkie tworzenie listy uporządkowanej lub nie
Wkleja znacznik listy uporządkowanej
Wkleja elementy listy definicyjnej: termin definicji oraz objaśnienie
Wkleja element listy
Definiuje znaczniki <frameset> i <frame> w trybie dialogowym
Wklejają znaczniki ustawienia wielkości okien <frameset> oraz <frame>
Frame wizard jest dialogowym trybem definiowania okien. Ustalamy tu ilości i wielkości okien. Można również zdefiniować zawartość każdego utworzonego okna
Te pola służą do określenia wysokości i szerokości marginesów oraz obramowania i przewijaka
W tym polu podajemy nazwę dokumentu wyświetlanego we wskazanym oknie
To wpisujemy nazwę okna
Bieżące okno, którego zawartość definiujemy w poniższych polach
Wkleja pola wyboru radio (tworzą one grupę)
Wkleja pole tekstowe tekstarea
Wkleja pola wyboru checkbox
Wkleja listę rozwijalną
Definiuje formularz i sposób jego przesłania
Wkleja przycisk submit lub reset
Wkleja pole tekstowe, pole ukryte lub password
Możemy określić sposób kodowania danych przy przesyłaniu
Podajemy metodę przekazania danych: get lub post
Określamy sposób przesłania danych z formularza
Wyszukiwarka
Podobne podstrony:
#0225 – Feeling Homesick
Homesick Lyn Venable
The Homesick Chicken Edward D Hoch
więcej podobnych podstron