Prezentacje - HTML

Witajcie!
Chciałabym przedstawić Wam sposób tworzenia ramek na podstawie tabeli, który aktualnie jest możliwy do zastosowania na howrse. Uprzedzam że potrzebne będą podstawowe umiejętności matematyczne i trochę wyobraźni. Jeśli wiecie już jak wypełnić puste miejsca i potrzebujecie tylko kodu - zapraszam do podsumowania:

Idź od razu do podsumowania -->

1. Obrazek


Tak jak na poniższych screenach jest to pokazane, zbyt duży obraz nie dopasowuje się do okienka. Dlatego najlepiej jest stworzyć tło, które będzie miało odpowiednie wymiary. W moim przykładzie przy okazji w programie graficznym dodałam już ramki. 
Odpowiedni rozmiar obrazka to:
w szerokości - 950px dla dużej prezentacji i 550px dla małej
w wysokości - wysokość, którą wybierzemy w ustawieniach prezentacji minus 12px, np. przy wysokości 600px będzie to 588px.
Aby wstawić obrazek do prezentacji musimy mieć jego link - otrzymamy go przesyłając zapisany obrazek przez serwis hostingowy np. tinypic.com. Po załadowaniu obrazka pokazuje nam się taka strona -  spośród różnych adresów które otrzymaliśmy wybieramy taki, po kliknięciu którego pokaże nam się sam obrazek - np. http://i40.tinypic.com/2ur30qv.png.

Zbyt duży obrazek

Dobry obrazek

2. Wklejamy Ramy HTML z pierwszą ramką i uzupełniamy, kanciaste nawiasy usuwamy podczas uzupełniania:

<table background="[link do obrazka]">
<tbody><tr><td align="left" valign="top" width="[950 lub 550]px" height="[wysokość prezentacji minus 12]px">
<div style="height: [wysokość okienka]px; width: [szerokość okienka]px;  margin-left:[odległość okienka od lewej krawędzi]px; margin-top: [odległość ramki od góry]px; overflow: auto;">
To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb. To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb. To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb. To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb.</div>
</td></tr>
</tbody></table>

3. Jeśli prezentacja ma mieć tylko 1 ramkę to gratuluję, skończyłeś :) Natomiast jeśli nie, przejdziemy teraz do dodawania drugiej ramki wklejając kod:

<div style="height: [wysokość okienka]px; width: [szerokość okienka]px;  margin-left:[odległość okienka od lewej krawędzi]px; margin-top: [odległość od dolnej krawędzi poprzedniej ramki]px; overflow: auto;">
To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb. To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb. To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb. To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb.</div>


Kod wklejamy przed częścią:
</td></tr>
</tbody></table>


Ustawienie drugiej ramki w odpowiedniej pozycji jest odrobinę trudniejsze. Problem będzie tu sprawiało określenie  margin-top: [odległość ramki od góry]px, którym określamy, jak już się pewnie każdy domyślił, położenie ramki w pionie. O ile przy pierwszej ramce tę odległość odliczaliśmy jak w tym obrazku, czyli od samej góry naszego tła:

o tyle kiedy mamy już jedną ramkę, nasza linia przesuwa się w miejsce, gdzie znajduje się dolna krawędź tej ramki (żółta linia):

Teraz żółta linia jest miejscem o odległości w pionie 0. Pewnie się domyśliliście, że jeśli chcemy aby kolejna ramka była wyżej, trzeba wstawić tu liczbę ujemną, a poniżej - dodatnią. Na kolejnym obrazku kilka przykładów, jak dostosować tę odległość od żółtej linii. Podsumowując, odległość zawsze musimy mierzyć od dolnej krawędzi ostatniej wstawionej ramki do górnej krawędzi nowej.

Aby wstawić nową ramkę w mojej prezentacji użyję odległości 50px. Żółta linia przesunie się wtedy na dolną krawędź, a żeby wstawić kolejną ramkę znów będę musiała dobrze wymierzyć odległości.

W ten sposób możemy dodać nieograniczoną ilość ramek. Jeśli nie do końca wiecie o co chodzi, spróbujcie poeksperymentować z moim obrazkiem: http://i40.tinypic.com/2ur30qv.png. A jeśli dalej nie wychodzi lub jeśli pominęłam jakąś instrukcję, postaramy się odpowiedzieć na wszelkie pytania zadane w komentarzach i aktualizować posta zgodnie z potrzebami. Miłej zabawy :)

zabaykowa

Podsumowanie:

Ramy kodu z 1 ramką:

<table background="[link do obrazka]">
<tbody><tr><td align="left" valign="top" width="[950 lub 550]px" height="[wysokość prezentacji minus 12]px">
<div style="height: 100px; width: 100px;  margin-left:100px; margin-top: 100px; overflow: auto;">
To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb. To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb. To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb. To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb.</div>
</td></tr>
</tbody></table>

Kolejna ramka:

<div style="height: 100px;  width: 100px;  margin-left:[odległość okienka od lewej krawędzi]px; margin-top: [odległość od dolnej krawędzi poprzedniej ramki]px; overflow: auto;">
To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb. To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb. To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb. To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb.</div>

Odległość w pionie między ramkami mierzymy od dolnej krawędzi poprzedniej ramki do górnej krawędzi kolejnej.