Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Layout with Style Layout with Tables Frames and Multiple Windows CSCE 102 - General Applications Programming By Benito Mendoza Department of Computer Science & Engineering 2017/5/23 Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 1 Layout with Style Layout with Tables Frames and Multiple Windows The goal of this chapter is to learn how to segment content in the browser window. Three different methods exist: style rules, tables, and frames. All can be used to create complex layouts like the often-used magazine-style configuration. 2017/5/23 Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 2 Layout with Style Layout with Tables Frames and Multiple Windows Curiously, tables, are used by many web designers to organize information on the page because of their near universal support. The concept of frames is introduced which allows more than one document to be loaded and viewed in the browser window at the same time. Finally, we show how to open new document windows. 2017/5/23 Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 3 Layout with Style Layout with Tables Frames and Multiple Windows Normal flow Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment Page elements are interpreted: Top to bottom Left to right Can control some placement with float property or align attribute position property of style sheets provides specific placement information Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 4 Layout with Style Layout with Tables Frames and Multiple Windows Layout with Style Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment <style type=”text/css”> img.tower {position:absolute; top:75; left:150} </style> … <img class=“tower” src=“eiffel.jpg” /> … Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 5 Layout with Style Layout with Tables Frames and Multiple Windows Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment Placement is relative to containing block Could place image inside a paragraph that was itself positioned at some absolute set of coordinates Caution – using position removes the image from the normal flow but not anything else! Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 6 Layout with Style Layout with Tables Frames and Multiple Windows Magazine style Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment Set height and width for most current monitors: Height = 400-500 pixels Width = 600 pixels No scrolling required See Figures 6.1 & 6.2, p. 144-145 Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 7 Layout with Style Layout with Tables Frames and Multiple Windows Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment Title Image Column 3 Column 1 500 pixels Column 2 600 pixels Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 8 Layout with Style Layout with Tables Frames and Multiple Windows Using <div> Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment Use <div> element Define a custom block-level element for each section of the layout Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 9 Layout with Style Layout with Tables Frames and Multiple Windows Layout with Style Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment <style type=“text/css”> div.title {…} div.image {…} div.col1 {…} div.col2 {…} div.col3 {…} </style> Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 10 Layout with Style Layout with Tables Frames and Multiple Windows Layout with Style Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment <style type=“text/css”> div.title {position:absolute; top:0; left:0; height:60; width:600 } </style> … <div class=“title”> … </div> … Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 11 Layout with Style Layout with Tables Frames and Multiple Windows Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment Padding and Overflow padding – number of pixels between border and text (padding n or padding x y) overflow – whether or not text outside the borders is visible hidden visible Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 12 Layout with Style Layout with Tables Frames and Multiple Windows Nested Tables Insert <table>…</table> within an existing <td>…</td> element <table> <tr> <td> </td> <td> </td> </tr> </table> Benito Mendoza <table> <tr> <td> </td> <td> </td> </tr> </table> CSCE 102 – Chapter 6 (Web Design and Layout) 13 Layout with Style Layout with Tables Frames and Multiple Windows Tables Plain table Ch06-Ex-05.html Nested table Ch06-Ex-06.html Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 14 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows Divide window into separate sections like <div> Each section displays the contents of a separate HTML document Frames may: Have scroll bars Be resized Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 15 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows Frames First define a layout or frameset document: <html> <head> </head> <frameset> </frameset> </html> Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 16 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows Define structure using the frameset element rows attribute cols attribute Units are: Percentage of window size Number of pixels Relative value Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 17 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows Frames Percentage of window size: <frameset rows=“30%, 40%, 30%”> </frameset> Number of pixels: <frameset cols=“80, 160, 50”> </frameset> Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 18 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows Relative value: <frameset cols=“80, *, 80”> </frameset> Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 19 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows Frames can be nested <frameset cols=“50%, 50%”> <frameset rows=“50%, 50%”> </frameset> <frameset rows=“33%, 33%, 33%”> </frameset> </frameset> Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 20 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows <frameset> only specifies structure, not content Content requires a <frame /> tag Each <frame /> tag may have seven attributes Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 21 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows src – The URL of the HTML document that will appear in the frame id – Assigns a name to the frame so it can be referenced by links in other frames marginwidth and marginheight – The size in pixels of the frame’s margins Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 22 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows scrolling yes – The frame will always have scroll bars no – The frame will never have scroll bars auto – The frame lets the browser decide noresize – The user cannot drag the frame edges to resize the frame frameborder=0 – hides the frame’s borders Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 23 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows Include one <frame> tag for each frame: <frameset rows=“50%, 50%”> <frame id=“upper” src=“fred.html” /> <frame id=“lower” src=“sam.html”/> </frameset> Ch06-Ex-07.html Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 24 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows <noframes> element in case user’s browser doesn’t support frames: <frameset …> <frame …> <noframes>This Web page … </noframes> </frameset> Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 25 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows Refresh/Reload button: Reloads frame(s) contents but Does not reload the layout (<frameset>) document To reload a <frameset> have to use menu: File, Open, etc. Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 26 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows Linking between frames: Click link in one frame See result in another frame Add target attribute to <a> tag: <a href=“…” target=“left_frame”> Click here to … </a> Otherwise content appears in current frame Ch06-Ex-08 Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 27 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows Eliminating frames Frameset hierarchy Browser tracks framesets Browser window is at the “top” First <frameset> defined is “down” one level … Browser window 1st frameset Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 28 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows Can set target to _top: <a href=“…” target=“_top”>…</a> Ch06-Ex-10 Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 29 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows Multiple Windows Just like specifying what frame in which to display a document: <a href=“…” target=“fred”> … </a> Ch06-Ex-11 Benito Mendoza CSCE 102 – Chapter 6 (Web Design and Layout) 30