CSCE 102 – Chapter 6 (Web Design and Layout) CSCE 102 - General Applications Programming Benito...

CSCE 102 – Chapter 6 (Web Design and Layout)

CSCE 102 - General Applications Programming

CSCE 102 - General Applications Programming

Benito Mendoza 123/4/20 Benito Mendoza 1

By

Benito Mendoza

Department of Computer Science & Engineering

Layout with StyleLayout with Tables

Frames and Multiple Windows

CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 223/4/20 Benito Mendoza 2

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.



CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 323/4/20 Benito Mendoza 3

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.



CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 4

Page elements are interpreted:Top to bottomLeft to right

Can control some placement with float property or align attributeposition property of style sheets provides specific placement information

Creating an Internal Style SheetExperimenting with ColorsChanging the Alignment



Normal flow


Layout with Style<style type=”text/css”> img.tower {position:absolute; top:75; left:150}</style>

…<img class=“tower” src=“eiffel.jpg” />…





Placement is relative to containing blockCould place image inside a paragraph that was itself positioned at some absolute set of coordinatesCaution – using position removes the image from the normal flow but not anything else!





Magazine style

Set height and width for most current monitors:

Height = 400-500 pixelsWidth = 600 pixelsNo scrolling required

See Figures 6.1 & 6.2, p. 144-145





Title

Image

Column 1 Column 2

Column 3

600 pixels

500 pixels





Using <div>Use <div> elementDefine a custom block-level element for each section of the layout





Layout with Style<style type=“text/css”> div.title {…} div.image {…} div.col1 {…} div.col2 {…} div.col3 {…}</style>





Layout with Style

<style type=“text/css”> div.title {position:absolute; top:0; left:0; height:60;

width:600 }</style>

…<div class=“title”> … </div>…





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

hiddenvisible





Nested TablesInsert <table>…</table> within an existing <td>…</td> element



<table><tr>

<td> </td> <td> </td>

</tr></table>

<table><tr>

<td> </td> <td> </td>

</tr></table>


TablesPlain table

Ch06-Ex-05.html

Nested tableCh06-Ex-06.html




Divide window into separate sections like <div>Each section displays the contents of a separate HTML documentFrames may:

Have scroll barsBe resized



FramesMultiple Windows


Frames

First define a layout or frameset document:<html> <head> </head> <frameset> </frameset></html>





Define structure using the frameset element

rows attributecols attribute

Units are:Percentage of window sizeNumber of pixelsRelative value





FramesPercentage of window size:<frameset rows=“30%, 40%, 30%”></frameset>

Number of pixels:<frameset cols=“80, 160, 50”></frameset>





Relative value:<frameset cols=“80, *, 80”></frameset>





Frames can be nested<frameset cols=“50%, 50%”>

</frameset>

<frameset rows=“50%, 50%”></frameset><frameset rows=“33%, 33%, 33%”></frameset>





<frameset> only specifies structure, not contentContent requires a <frame /> tagEach <frame /> tag may have seven attributes





src – The URL of the HTML document that will appear in the frameid – Assigns a name to the frame so it can be referenced by links in other framesmarginwidth and marginheight – The size in pixels of the frame’s margins





scrollingyes – The frame will always have scroll barsno – The frame will never have scroll barsauto – The frame lets the browser decide

noresize – The user cannot drag the frame edges to resize the frameframeborder=0 – hides the frame’s borders





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





<noframes> element in case user’s browser doesn’t support frames:

<frameset …> <frame …> <noframes>This Web page …

</noframes></frameset>





Refresh/Reload button:Reloads frame(s) contents butDoes not reload the layout (<frameset>) document

To reload a <frameset> have to use menu: File, Open, etc.





Linking between frames:Click link in one frameSee result in another frame

Add target attribute to <a> tag:<a href=“…” target=“left_frame”>Click here to …</a>

Otherwise content appears in current frameCh06-Ex-08





Eliminating framesFrameset hierarchy

Browser tracks framesetsBrowser window is at the “top”First <frameset> defined is “down” one level …

Browser window

1st frameset





Can set target to _top:

<a href=“…” target=“_top”>…</a>

Ch06-Ex-10





Multiple WindowsJust like specifying what frame in which to display a document:

<a href=“…” target=“fred”> … </a>

Ch06-Ex-11




Date post:	02-Jan-2016
Category:	Documents
Upload:	lee-hawkins
View:	218 times
Download:	3 times

CSCE 102 – Chapter 6 (Web Design and Layout) CSCE 102 - General Applications Programming Benito...

Documents