HTML Tutorial (10) - Multi-window page (Frames)

xiaoxiao2021-03-06  106

Multi-window page (Frames)

With the HTML file designed by the Frames structure, you can divide the entire window into several separate small windows, each window can load different files, which is pleased, each window can communicate with each other. Sometimes it is just right, it feels great. This is a very easy-to-use skill, but the learning content is also a lot, let's learn from the basic language!

Frames structure basic format

...

In the HTML file with the frames structure, the overall structure of the Frames file is:

</ title> </ head> <frameset> <frame src = "url"> <frame src = "url"> ... </ frameset> </ html></p> <p>Each URL value in the frames structure specifies a file (this file must be done in advance), which will load the corresponding window.</p> <p>Size setting of each window</p> <p>We split the window into several pieces, transversely divided by ROWS properties, longitudinally divided into a cols property, each piece of size can be implemented by the value of both attributes.</p> <p><frameset cols = #> Example: <frameset cols = "100, 200, 300"> <frameset rows = #> example: <frameset rows = "10%, 20%, 70%"></p> <p># 的 值 为 一 一 引 括 括 括 括 括 表示 表示 表示 表示 表示 表示 表示 表示 隔 隔 隔 隔 隔 隔 隔 隔 隔 隔 表示 表示 表示 表示 表示 隔 隔 隔 隔 隔 隔 隔 隔 隔 隔 隔 隔Of course, any of these numbers can also be replaced by "*", which means that the size is automatically set by the browser. Such as: <frameset cols = "100, 200, *"> <frameset cols = "100, *, *"> Average 100 pixels is allocated with the average of <frameset cols = "*, *, *"> divide the window into three equals Copy</p> <p>Frame targets</p> <p>The content of several windows from Frames is not still constant, and the content of a window is often changing with the requirements of another window, which increases the value of Frames. In order to complete the interoperability between the windows, we must start a name for each window, which is defined by attribute Name.</p> <p>Frame Name <frame src = url name = "window name"> For example: <frame src = "frame / a.html" name = "left"> Defines the window name, and there should be Target to cooperate. The Target property specifies which window that is displayed in the link. The value of Target can be the tired tip defined by Name, and the rhyme filter is hungry? / P></p> <p><a href=url target=_blank> Display a new window <a href=URL target=_sel> Displayed in the same window <a href=URL target=_parent> window <a href = URL TARGET = _top> Display Other properties of the entire browser window FRAME</p> <p><frame frameborder = #> # = yes, the setting of each window border, yes indicates a border, NO means that there is no border <frame marginwidth = # marginheight = #> # value of the pixel point sets the upper and lower left and right boundary widths of each window. If not set, automatically determine by the browser. <frame scrolling = #> # = yes, no, auto scroll bar setting, yes indicates that NO means no, auto represents automatic setting by the browser, # = default is Auto <frame noreSize> NORSIZE property to set the invariant Box side</p> <p>Method: HTML method:</p> <p>According to my own learning experience, I summed up a few learning methods for your reference:</p> <p>1. It does not have to be forced to remember if it is not necessary, and it will be skilled in the time when it is used.</p> <p>2. Just start, you can first choose a few good web pages to imitate, and make your own homepages.</p> <p>3. See a good web page, you can choose "Source File" in the "Edit" menu of the browser. At this time, we can see some methods and techniques of some people to make the webpage, sometimes through this The way can learn that there is nothing on the book, and some new features can also be first appeared in your web page.</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-98825.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="98825" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.046</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'KrTBdMKiLpOEbgX7PG4gLeDHvq3gl5YAZ9pyIFqL4n8onGT26D4DOtdeaCgQ_2Bgjd3YBSoXGPVHrn8M_2Ft'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>