Otwieranie elementów w różnych ramkach - SLIDEPPTX.COM

Otwieranie elementów w różnych ramkach

1 Otwieranie elementów w różnych ramkachRamki w HTML Otwi...

Author: Ludwika Doruch

0 downloads 0 Views

1 Otwieranie elementów w różnych ramkachRamki w HTML Otwieranie elementów w różnych ramkach Wykonał: Mariusz Stebelski Otwieranie elementów w różnych ramkach

2 Co to jest ramka? Ramka jest elementem języka HTML, za pomocą której możemy zdefiniować dowolny sposób podziału okna przeglądarki WWW. Podział ten może być realizowany zarówno w pionie, jak i poziomie. Możliwe jest również zagnieżdżanie ramek. Powyższe własności ramek przedstawiają następujące przykłady (Rys.1, Rys.2, Rys.3) Otwieranie elementów w różnych ramkach

3 Rys.1. Przykład pionowego podziału strony.Otwieranie elementów w różnych ramkach

4 Rys.2. Przykład poziomego podziału strony.Otwieranie elementów w różnych ramkach

5 Rys.3. Przykład zagnieżdżenia ramek na stronie.Otwieranie elementów w różnych ramkach

6 Znaczniki ramek Otwieranie elementów w różnych ramkach

7 Definiuje układ ramek i sposób podziału okna przeglądarki. (1) Definiuje układ ramek i sposób podziału okna przeglądarki. (1) Przykład prostego układu pionowych ramek: Znacznik FRAME Każda z ramek (kreowanych przez elementy frame) wyświetla osobny dokument definiujemy go używając atrybutu src. W tym przypadku element frameset zastępuje element body.(1) Otwieranie elementów w różnych ramkach

8 Definiuje ramkę. Przykład złożonego układu ramek: Ramki zagnieżdżone Otwieranie elementów w różnych ramkach

9 Ten element przeznaczony jest dla przeglądarek, które nie obsługują ramek. Umieszczany jest w obrębie frameset i zawiera informację zastępczą. Przykład: (1) Otwieranie elementów w różnych ramkach

10 Definiuje ramkę wpisaną w obrębie strony WWW. </span> <span class='tr'>Definiuje ramkę wpisaną w obrębie strony WWW.</span> <span class='tr'>Ramki lokalne są umieszczane bezpośrednio na stronie</span> <span class='tr'>w postaci pojedynczych okienek o różnych rozmiarach.</span> <span class='tr'>Dzięki temu możemy do takiej ramki wczytywać inne</span> <span class='tr'>dokumenty.</span> <span class='tr'>Tekst "Twoja przeglądarka nie akceptuje ramek",</span> <span class='tr'>który można wpisać między znacznikiem otwierającym</span> <span class='tr'>(<iframe>), a zamykającym (), ukaże się, jeśli przeglądarka internetowa użytkownika nie akceptuje ramek lokalnych.(2) Otwieranie elementów w różnych ramkach

11 Przykład: Znacznik iframe </span> <span class='tr'></body></span> <span class='tr'></html></span> <span class='tr'>Otwieranie elementów w różnych ramkach</span></p><p><span class="span-circle-num"> 12 </span> <span>Opcjonalne atrybuty</span> <span class='tr'>Otwieranie elementów w różnych ramkach</span></p><p><span class="span-circle-num"> 13 </span> cols=„piksele|wartość%|*” <span class='tr'>Składnia:</span> <span class='tr'>cols=„piksele|wartość%|*”</span> <span class='tr'>Określa liczbę kolumn układu ramek i ich rozmiar:</span> <span class='tr'>w pikselach,</span> <span class='tr'>w procentach szerokości całego układu ramek,</span> <span class='tr'>względem pozostałych ramek.(1)</span> <span class='tr'>Otwieranie elementów w różnych ramkach</span></p><p><span class="span-circle-num"> 14 </span> rows=„piksele|wartość%|*” <span class='tr'>Składnia:</span> <span class='tr'>rows=„piksele|wartość%|*”</span> <span class='tr'>Określa liczbę wierszy układu ramek i ich rozmiar:</span> <span class='tr'>w pikselach,</span> <span class='tr'>w procentach szerokości całego układu ramek,</span> <span class='tr'>względem pozostałych ramek.(1)</span> <span class='tr'>Otwieranie elementów w różnych ramkach</span></p><p><span class="span-circle-num"> 15 </span> <span>marginheight Składnia: marginheight=„piksele” Określa szerokość marginesu w pionie. marginwidth marginwidth=„piksele” Określa szerokość marginesu w poziomie.(1)</span> <span class='tr'>Otwieranie elementów w różnych ramkach</span></p><p><span class="span-circle-num"> 16 </span> <span>frameborder Składnia: frameborder=„0|1” Atrybut odpowiedzialny za wyświetlanie obramowania (wartość 1) lub wyłączanie go (wartość 0) noresize noresize=„true|false” Umożliwia użytkownikowi zablokowanie zmiany rozmiarów ramki.(1)</span> <span class='tr'>Otwieranie elementów w różnych ramkach</span></p><p><span class="span-circle-num"> 17 </span> scrolling=„yes|no|auto” <span class='tr'>Składnia:</span> <span class='tr'>scrolling=„yes|no|auto”</span> <span class='tr'>Włączanie przewijania zawartości ramki. Odpowiednio</span> <span class='tr'>włączone, wyłączone lub automatyczne przewijanie, gdy zawartość</span> <span class='tr'>ramki tego wymaga.(1)</span> <span class='tr'>name</span> <span class='tr'>name=„nazwa”</span> <span class='tr'>Nazwa ramki. Atrybut bardzo przydatny razem z opcją target</span> <span class='tr'>wykorzystywaną w znaczniku <a>, która to umożliwia wprost określenie,</span> <span class='tr'>w której ramce chcemy wyświetlić zawartość strony WWW:</span> <span class='tr'><a target="strona" href="home.html" rel="nofollow">Strona główna</a></span> <span class='tr'>Otwieranie elementów w różnych ramkach</span></p><p><span class="span-circle-num"> 18 </span> <span>src Składnia: src=„nazwa_pliku|url” Źródłem jest tu plik z dokładną ścieżką dostępu, bądź też adres strony, której zawartość chcemy wyświetlić na ekranie.</span> <span class='tr'>Otwieranie elementów w różnych ramkach</span></p><p><span class="span-circle-num"> 19 </span> Literatura: - Tworzenie stron WWW – Ćwiczenia praktyczne<span class='tr'>Literatura: - Tworzenie stron WWW – Ćwiczenia praktyczne. Maria Sokół, wyd.2, Helion 2006,(1) -</span> <span class='tr'>Otwieranie elementów w różnych ramkach</span></p> </div> </div> </div> </div> </div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script>  <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button> <h3 class="modal-title">Sign In</h3> </div> <div class="modal-body"> <form action="https://slidepptx.com/login" method="post"> <div class="form-group form-group-lg"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group form-group-lg"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group form-group-lg"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> <i class="form-icon"></i> Remember Password </label> <label class="pull-right"><a href="https://slidepptx.com/forgot">Forgot Password?</a></label> </div> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign In</button> </form> <hr style="margin-top: 15px;" /> <a href="https://slidepptx.com/login/google" class="btn btn-lg btn-google btn-block"><i class="fa fa-google"></i> Login with Google</a> </div> </div> </div> </div>  <div class="footer-container" style="background: #fff;display: block;padding: 10px 0 20px 0;margin-top: 30px;"> <div class="footer-container-inner"> <footer id="footer" class="container"> <div class="row"> <div class="bottom-footer"> <div class="container"> Copyright © 2025 SLIDEPPTX.COM. All rights reserved. </div> <hr /> </div> </div> <div class="row">  <section class="block col-md-4 col-xs-12 col-sm-3" id="block_various_links_footer"> <h4>Information</h4> <ul class="toggle-footer" style=""> <li><a href="https://slidepptx.com/about">About Us</a></li> <li><a href="https://slidepptx.com/privacy">Privacy Policy</a></li> <li><a href="https://slidepptx.com/term">Terms and Conditions</a></li> <li><a href="https://slidepptx.com/copyright">Copyright</a></li> <li><a href="https://slidepptx.com/contact">Contact Us</a></li> </ul> </section>  <section id="social_block" class="col-md-4 col-xs-12 col-sm-3 block"> <h4>Follow us</h4> <ul> <li class="facebook"> <a target="_blank" href="" title="Facebook"> <i class="fa fa-facebook-square"></i> <span>Facebook</span> </a> </li> <li class="twitter"> <a target="_blank" href="" title="Twitter"> <i class="fa fa-twitter-square"></i> <span>Twitter</span> </a> </li> <li class="google-plus"> <a target="_blank" href="" title="Google Plus"> <i class="fa fa-plus-square"></i> <span>Google Plus</span> </a> </li> </ul> </section>  <div id="newsletter" class="col-md-4 col-xs-12 col-sm-3 block"> <h4>Newsletter</h4> <div class="block_content"> <form action="https://slidepptx.com/newsletter" method="post"> <div class="form-group"> <input id="newsletter-input" type="text" name="email" size="18" placeholder="Entrer Email" /> <button type="submit" name="submit_newsletter" class="btn btn-default"> <i class="fa fa-location-arrow"></i> </button> <input type="hidden" name="action" value="0"> </div> </form> </div> </div>  </div> </footer> </div> </div>  <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://slidepptx.com/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function (event, ui) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); $(document).ready(function() { $(".doc-share-btn").click(function() { var urlshare = $(this).attr('data-share-url'); window.open('http://www.facebook.com/sharer.php?u=' + urlshare, '_blank'); }); }); function download_submit() { $('#download_form').submit(); } </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-106734935-2', 'auto'); ga('send', 'pageview'); </script> </body> </html>