Presentation is loading. Please wait.

Presentation is loading. Please wait.

CSCE 102 – Chapter 6 (Web Design and Layout) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-10-22 Benito Mendoza 1 By Benito Mendoza.

Published byLee Hawkins Modified over 9 years ago

Similar presentations

Presentation on theme: "CSCE 102 – Chapter 6 (Web Design and Layout) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-10-22 Benito Mendoza 1 By Benito Mendoza."— Presentation transcript:

1 CSCE 102 – Chapter 6 (Web Design and Layout) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-10-22 Benito Mendoza 1 By Benito Mendoza Department of Computer Science & Engineering Layout with Style Layout with Tables Frames and Multiple Windows

2 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 2 2015-10-22 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. Layout with Style Layout with Tables Frames and Multiple Windows

3 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 3 2015-10-22 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. Layout with Style Layout with Tables Frames and Multiple Windows

4 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 4 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 Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment Layout with Style Layout with Tables Frames and Multiple Windows Normal flow

5 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 5 Layout with Style img.tower {position:absolute; top:75; left:150} … … Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment Layout with Style Layout with Tables Frames and Multiple Windows

6 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 6 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! Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment Layout with Style Layout with Tables Frames and Multiple Windows

7 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 7 Magazine style 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 Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment Layout with Style Layout with Tables Frames and Multiple Windows

8 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 8 Title Image Column 1 Column 2 Column 3 600 pixels 500 pixels Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment Layout with Style Layout with Tables Frames and Multiple Windows

9 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 9 Using Use element Define a custom block-level element for each section of the layout Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment Layout with Style Layout with Tables Frames and Multiple Windows

10 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 10 Layout with Style div.title {…} div.image {…} div.col1 {…} div.col2 {…} div.col3 {…} Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment Layout with Style Layout with Tables Frames and Multiple Windows

11 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 11 Layout with Style div.title {position:absolute; top:0; left:0; height:60; width:600 } … Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment Layout with Style Layout with Tables Frames and Multiple Windows

12 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 12 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 Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment Layout with Style Layout with Tables Frames and Multiple Windows

13 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 13 Nested Tables Insert … within an existing … element Layout with Style Layout with Tables Frames and Multiple Windows

14 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 14 Tables Plain table Ch06-Ex-05.html Nested table Ch06-Ex-06.html Layout with Style Layout with Tables Frames and Multiple Windows

15 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 15 Divide window into separate sections like Each section displays the contents of a separate HTML document Frames may: Have scroll bars Be resized Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows

16 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 16 Frames First define a layout or frameset document: Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows

17 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 17 Define structure using the frameset element rows attribute cols attribute Units are: Percentage of window size Number of pixels Relative value Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows

18 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 18 Frames Percentage of window size: Number of pixels: Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows

19 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 19 Relative value: Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows

20 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 20 Frames can be nested Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows

21 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 21 only specifies structure, not content Content requires a tag Each tag may have seven attributes Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows

22 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 22 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 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows

23 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 23 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 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows

24 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 24 Include one tag for each frame: Ch06-Ex-07.html Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows

25 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 25 element in case user’s browser doesn’t support frames: This Web page … Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows

26 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 26 Refresh/Reload button: Reloads frame(s) contents but Does not reload the layout ( ) document To reload a have to use menu: File, Open, etc. Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows

27 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 27 Linking between frames: Click link in one frame See result in another frame Add target attribute to tag: Click here to … Otherwise content appears in current frame Ch06-Ex-08 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows

28 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 28 Eliminating frames Frameset hierarchy Browser tracks framesets Browser window is at the “top” First defined is “down” one level … Browser window 1 st frameset Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows

29 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 29 Can set target to _top: … Ch06-Ex-10 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows

30 CSCE 102 – Chapter 6 (Web Design and Layout) Benito Mendoza 30 Multiple Windows Just like specifying what frame in which to display a document: … Ch06-Ex-11 Layout with Style Layout with Tables Frames and Multiple Windows Frames Multiple Windows

Download ppt "CSCE 102 – Chapter 6 (Web Design and Layout) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-10-22 Benito Mendoza 1 By Benito Mendoza."

Similar presentations

Frames How to make a page that uses frames. Preview There used to be a time that frames were frowned upon because most browsers did not support them Nowadays.

Frames How to make a page that uses frames. Preview There used to be a time that frames were frowned upon because most browsers did not support them Nowadays.
Chapter 3 – Web Design Tables & Page Layout

Chapter 3 – Web Design Tables & Page Layout
Frames.

Frames.
Chapter 11 Creating Framed Layouts Principles of Web Design, 4 th Edition.

Chapter 11 Creating Framed Layouts Principles of Web Design, 4 th Edition.
Multimedia and the World Wide Web HCI 201 Lecture Notes #5A.

Multimedia and the World Wide Web HCI 201 Lecture Notes #5A.
Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.

Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.
COS 125 Day 25. Agenda  Assignment #7 Due  Final capstone progress report due next class  Assignment #8 Posted Due April 25 One more to go  Exam #5.

COS 125 Day 25. Agenda  Assignment #7 Due  Final capstone progress report due next class  Assignment #8 Posted Due April 25 One more to go  Exam #5.
Frames 1 Lecture HTML: Frames and Miscellaneous Tags.

Frames 1 Lecture HTML: Frames and Miscellaneous Tags.
XP 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial 5.

XP 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial 5.
XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 5 1 New Perspectives on Creating Web Pages with HTML Tutorial 5: Using Frames.

XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 5 1 New Perspectives on Creating Web Pages with HTML Tutorial 5: Using Frames.
Tutorial 8 Designing a Web Site with Frames. XP Objectives Explore the uses of frames in a Web site Create a frameset consisting of rows and columns of.

Tutorial 8 Designing a Web Site with Frames. XP Objectives Explore the uses of frames in a Web site Create a frameset consisting of rows and columns of.
The Power of Tables They aren't just for sitting stuff on anymore...

The Power of Tables They aren't just for sitting stuff on anymore...
Create a Web Site with Frames

Create a Web Site with Frames
Web Technologies Lecture # 5 : HTML Frames. Objectives n Create/control appearance & placement of frames n Control the behavior of hyperlinks on pages.

Web Technologies Lecture # 5 : HTML Frames. Objectives n Create/control appearance & placement of frames n Control the behavior of hyperlinks on pages.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: Frames © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design.

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: Frames © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design.
Chapter 6 Working with Frames.

Chapter 6 Working with Frames.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames.

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames.
Frameset. FrameSet With frames, we can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each.

Frameset. FrameSet With frames, we can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each.
Using Frames in a Web Site

Using Frames in a Web Site
XP Tutorial 5New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial.

XP Tutorial 5New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial.

Similar presentations

Ads by Google