Chapter 16: PAGE LAYOUT WITH CSS
|
|
|
- Imogen Atkins
- 6 years ago
- Views:
Transcription
1 Disclaimer: All words, pictures are adopted from Learning Web Design (3 rd eds.) by Jennifer Niederst Robbins, published by O Reilly PART III: CSS FOR PRESENTATION Chapter 16: PAGE LAYOUT WITH CSS CSc2320 GSU
2 2 In this chapter Fixed, liquid, and elastic page layouts Two- and three-column layout templates Using floats Using absolute positioning Centering a fixed-width page Homework 8
3 3 Page Layout Strategies Nature of website design: no way of knowing exactly how wide, skinny, tall, or short a User s browser window will be. The precise size of any given web page is an unknown. no way of knowing how large your text will be. Liquid pages resize along with the browser window. Fixed pages put the content in a page area that stays a specific pixel width regardless of the browser s dimensions. Elastic pages have areas that get larger or smaller when the text is resized.
4 4 Liquid page design Liquid page layouts (also called fluid layouts) follow the default behavior of the normal flow;the page area and/or columns within the page are allowed to get wider or narrower to fill the available space in the browser window.
5 5 How to create liquid layouts Create a liquid layout by specifying widths in percentage values or not at all (auto). Example:
6 6 How to create liquid layouts Example
7 7 Fixed Layouts Fixed-width layouts stay put at a specified pixel width as determined by the designer. First, you need to pick a page width, usually based on common monitor resolutions. You also need to decide where the fixed-width layout should be positioned in the browser window.
8 8 How to create fixed-width layouts Advantages and disadvantages Fixed-width layouts are created by specifying width values in pixel units. Typically, the content of the entire page is put into a div (often named content, container, wrapper, page ) that can then be set to a specific pixel width. This div may also be centered in the browser window.
9 9 Elastic Layouts Elastic (also called jello) layouts expand or contract with the size of the text. If the user makes the text larger, the box that contains it expands proportionally.
10 10 How to create elastic layouts The key to elastic layouts is the em, a unit of measurement that is based on size of the text. For example, for an element with 12-pixel text, an em is 12 pixels. In Chapter 12, Formatting Text, we learned that it is always preferable to specify font size in ems because it allows the text to be resized with the zoom feature in all modern browsers.
11 11 Page Layout Templates
12 12 Multicolumn Layouts Using Floats The most popular way to create a column is to float an element to one side and let the remaining content wrap around it. One of the advantages of floats is that it is easier to start page elements such as a footer below the columned area of the page. The drawback of float-based layouts is that they are dependent on the order in which the elements appear in the source.
13 13 Two-column with footer Method: FLOAT Layout: LIQUID
14 14 Two-column with footer Method: FLOAT Layout: LIQUID
15 15 Three-column with footer Method: FLOAT Layout: FIXED
16 16 Three-column with footer Method: FLOAT Layout: FIXED
17 17 Layouts Using Absolute Positioning Absolute positioning can also be used to create a multicolumn page. The advantage is that the order of the source document is not as critical as it is in the float method, because element boxes can be positioned anywhere. The disadvantage is that you run the risk of elements overlapping and content being obscured.
18 18 Two-column with narrow footer Method: POSITIONED Layout: LIQUID Example
19 19 Two-column with narrow footer Method: POSITIONED Layout: LIQUID Example
20 20 Two-column with narrow footer Method: POSITIONED Layout: LIQUID Example
21 21 Three-column (narrow footer) Method: POSITIONED Layout: LIQUID Example
22 22 Three-column (narrow footer) Method: POSITIONED Layout: LIQUID Example
23 23 Three-column (narrow footer) Method: POSITIONED Layout: LIQUID Example
24 24 Three-column with rules and padding between columns Method: POSITIONED Layout: FIXED Example
25 25 Three-column with rules and padding between columns Method: POSITIONED Layout: FIXED Example
26 26 Three-column with rules and padding between columns Method: POSITIONED Layout: FIXED Example
27 27 Centering a Fixed-Width Page All of the fixed-width examples we ve seen so far have been aligned on the left side of the browser. In CSS, specify a width for the div element that holds all the page s contents, then set the left and right margins to auto. An alternative method uses negative margins to effectively center a containing block on the page.
HTML Organizing Page Content
HTML Organizing Page Content CSS for layout Examples http://www.shinybytes.com/newcss.html Generic Elements Used to create a logical grouping of content or elements on the page Can be customized to describe
HTML Organizing Page Content
HTML Organizing Page Content HTML 5 Elements Well supported by current desktop and mobile browsers (known issues with IE 8 and earlier) May be used to divide pages into major sections
Positioning in CSS: There are 5 different ways we can set our position:
Positioning in CSS: So you know now how to change the color and style of the elements on your webpage but how do we get them exactly where we want them to be placed? There are 5 different ways we can set
Chapter 12: FORMATTING TEXT
Disclaimer: All words, pictures are adopted from Learning Web Design (3 rd eds.) by Jennifer Niederst Robbins, published by O Reilly 2007. PART III: CSS FOR PRESENTATION Chapter 12: FORMATTING TEXT CSc2320
Cascading Style Sheets for layout II CS7026
Cascading Style Sheets for layout II CS7026 Understanding CSS float The CSS float property is also a very important property for layout. It allows you to position your Web page designs exactly as you want
FLOATING AND POSITIONING
15 FLOATING AND POSITIONING OVERVIEW Understanding normal flow Floating elements to the left and right Clearing and containing floated elements Text wrap shapes Positioning: Absolute, relative, fixed Normal
INFS 2150 Introduction to Web Development
INFS 2150 Introduction to Web Development 3. Page Layout Design Objectives Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout
INFS 2150 Introduction to Web Development
Objectives INFS 2150 Introduction to Web Development 3. Page Layout Design Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout
When you complete this chapter, you will be able to:
Page Layouts CHAPTER 7 When you complete this chapter, you will be able to: Understand the normal fl ow of elements Use the division element to create content containers Create fl oating layouts Build
What do we mean by layouts?
What do we mean by layouts? A layout is how you position the elements of your page You can have columns Move paragraphs and sections around And you can do this all without changing the content of your
COMSC-031 Web Site Development- Part 2
COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 13 13 Designing a Web Site with CSS In addition to creating styles for text, you can use CSS to create
Styles, Style Sheets, the Box Model and Liquid Layout
Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of
8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2)
Web Development & Design Foundations with HTML5 Ninth Edition Chapter 7 More on Links, Layout, and Mobile Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links
Table Basics. The structure of an table
TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that
HIERARCHICAL ORGANIZATION
A clearly defined home page Navigation links to major site sections HIERARCHICAL ORGANIZATION Often used for commercial and corporate websites 1 Repetition DESIGN PRINCIPLES Repeat visual elements throughout
Web Design and Implementation
Study Guide 3 - HTML and CSS - Chap. 13-15 Name: Alexia Bernardo Due: Start of class - first day of week 5 Your HTML files must be zipped and handed in to the Study Guide 3 dropbox. Chapter 13 - Boxes
Getting Started with Eric Meyer's CSS Sculptor 1.0
Getting Started with Eric Meyer's CSS Sculptor 1.0 Eric Meyer s CSS Sculptor is a flexible, powerful tool for generating highly customized Web standards based CSS layouts. With CSS Sculptor, you can quickly
Using CSS for page layout
Using CSS for page layout Advantages: Greater typographic control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control Increased accessibility
Chapter 7 BMIS335 Web Design & Development
Chapter 7 BMIS335 Web Design & Development Site Organization Use relative links to navigate between folders within your own site o Sometimes dividing your site into folders makes maintenance and updating
Responsive web design (RWD) CSS3 Media queries. Mobile vs desktop web sites. Web Development 1 CS1115/CS5002
1 of 13 CS1115/CS5002 Web Development 1 Dr Derek Bridge School of Computer Science & Information Technology University College Cork Mobile vs desktop web sites A few organization have two web sites, one
Create a three column layout using CSS, divs and floating
GRC 275 A6 Create a three column layout using CSS, divs and floating Tasks: 1. Create a 3 column style layout 2. Must be encoded using HTML5 and use the HTML5 semantic tags 3. Must se an internal CSS 4.
Creating Layouts Using CSS. Lesson 9
Creating Layouts Using CSS Lesson 9 CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control
Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links
Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
Web Site Design and Development Lecture 13
Web Site Design and Development Lecture 13 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Normalize.css Normalize.css is a useful project to incorporate into your web pages In their own words, Normalize.css
HTML and CSS a further introduction
HTML and CSS a further introduction By now you should be familiar with HTML and CSS and what they are, HTML dictates the structure of a page, CSS dictates how it looks. This tutorial will teach you a few
Using Dreamweaver CS6
Using Dreamweaver CS6 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
IDM 221. Web Design I. IDM 221: Web Authoring I 1
IDM 221 Web Design I IDM 221: Web Authoring I 1 Week 7 IDM 221: Web Authoring I 2 Page Layout Part 1 IDM 221: Web Authoring I 3 Part 1 because part 2 is coming next term (RWD, Flexbox, Grids) Posi%on An
The Importance of the CSS Box Model
The Importance of the CSS Box Model Block Element, Border, Padding and Margin Margin is on the outside of block elements and padding is on the inside. Use margin to separate the block from things outside
How to lay out a web page with CSS
How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).
3. Each of these mark examples contains an error. a. <input name= country value= Your country here. /> b. <checkbox name= color value= teal />
1. Decide whether each of these forms should be sent via the GET or POST method: A form for accessing your bank account online A form for sending t-shirt artwork to the printer A form for searching archived
COMM 2555: Interactive Digital Communication / Spring 2018 Lab 9: Basic layout techniques with CSS
COMM 2555: Interactive Digital Communication / Spring 2018 Lab 9: Basic layout techniques with CSS Goals Practice working with the CSS box model, positioning and layout Step 1. Create your infrastructure
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide MS-Expression Web Quickstart Guide Page 1 of 24 Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program,
How to lay out a web page with CSS
How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block
Create a Web Page with Spry Navigation Bar. March 30, 2010
Create a Web Page with Spry Navigation Bar March 30, 2010 Open a new web page by selecting File on the Menu bar, and pick Open. Select HTML as the page type and none from the layout list. Finally, we press
COMP519 Web Programming Lecture 8: Cascading Style Sheets: Part 4 Handouts
COMP519 Web Programming Lecture 8: Cascading Style Sheets: Part 4 Handouts Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University
Table of contents. DMXzone CSS3 Drop Shadows Manual DMXzone
CSS3 Drop Shadows Manual Table of contents Table of contents... 1 About CSS3 Drop Shadows... 2 Features in Detail... 3 The Basics: Basic Usage of CSS3 Drop Shadows... 13 Video: Using CSS3 Drop Shadows...
Chapter 10: Understanding the Standards
Disclaimer: All words, pictures are adopted from Learning Web Design (3 rd eds.) by Jennifer Niederst Robbins, published by O Reilly 2007. Chapter 10: Understanding the Standards CSc2320 In this chapter
CSS: Layout Part 2. clear. CSS for layout and formatting: clear
CSS: Layout Part 2 Robert A. Fulkerson College of Information Science and Technology http://www.ist.unomaha.edu/ University of Nebraska at Omaha http://www.unomaha.edu/ CSS for layout and formatting: clear
Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style
Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style precedence and style inheritance Understand the CSS use
Reference Services Division Presents. Microsoft Word 2
Reference Services Division Presents Microsoft Word 2 This handout covers the latest Microsoft Word 2010. This handout includes instructions for the tasks we will be covering in class. Basic Tasks Review
16A CSS LAYOUT WITH FLEXBOX
16A CSS LAYOUT WITH FLEXBOX OVERVIEW Flexbox terminology Flexbox containers Flow: Flow direction and text wrap Alignment on main and cross axes Specifying how items in a flexbox "flex" Changing the order
CS7026 Media Queries II. Different Screen Size Different Design
CS7026 Media Queries II Different Screen Size Different Design What You ll Learn We ll be restyling an entire page layout to work with different screen sizes and devices using Media queries to apply styles
Word Learning Technology and Training Services. Angelo State University
Word 2010 Angelo State University http://elearning.angelo.edu elearning@angelo.edu 942-2334 ext 6263 MCS-106 Overview Contents New Look... 4 File Menu... 4 Quick Access Toolbar... 4 Ribbon... 4 Document
VISA/APCO/STAC 2P61 WEBSITE CREATION Fall Term 2012
VISA/APCO/STAC 2P61 WEBSITE CREATION Fall Term 2012 CSS 4 TWO COLUMN LAYOUT MORE ON DIVS Last week: Applied margins borders and padding and calculating the size of elements using box model. Wrote CSS shorthand
Dreamweaver Tutorial #2
Dreamweaver Tutorial #2 My web page II In this tutorial you will learn: how to use more advanced features for your web pages in Dreamweaver what Cascading Style Sheets (CSS) are and how to use these in
Page Layout. 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning
Page Layout contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning 2 1 4.1
STUDENT NAME ECDL: EXCEL MR BENNELL. This is an example of how to use this checklist / evidence document
This part contains an instruction, task or a skill which you need to sow evidence of being able to do Once you have completed a task and shown evidence of it write the date underneath the task instruction
CSS worksheet. JMC 105 Drake University
CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html
Fixed-width. Liquid. Web Development 1 CS1115/CS5002. Types of layout. relative, fixed), CSS Flexbox layout or CSS Grid Layout
1 of 9 CS1115/CS5002 Web Development 1 Dr Derek Bridge School of Computer Science & Information Technology University College Cork Types of layout Fixed-width or liquid Set the width in pixels for fixed-width
ITSE 1401 Web Design Tools Lab Project 4 (Expression Web 4 - Units M, N, O, P) Last revised: 1/9/14
(Expression Web 4 - Units M, N, O, P) Last revised: 1/9/14 Directions: Perform the tasks below on your personal computer or a lab computer. Professor Smith shows the score points for each activity in parentheses.
Advanced Dreamweaver CS6
Advanced Dreamweaver CS6 Overview This advanced Dreamweaver CS6 training class teaches you to become more efficient with Dreamweaver by taking advantage of Dreamweaver's more advanced features. After this
Using Adobe Contribute 4 A guide for new website authors
Using Adobe Contribute 4 A guide for new website authors Adobe Contribute allows you to easily update websites without any knowledge of HTML. This handout will provide an introduction to Adobe Contribute
AGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES
CLASS :: 13 12.01 2014 AGENDA SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements TEMPLATE CREATION :: Why Templates?
Graduating to Grid. An Event Apart Orlando
Graduating to Grid An Event Apart Orlando 2018 And there was great rejoicing. https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid https://caniuse.com/#search=grid
How to set up a local root folder and site structure
Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where
CS193X: Web Programming Fundamentals
CS193X: Web Programming Fundamentals Spring 2017 Victoria Kirst (vrk@stanford.edu) Today's schedule Today: - Wrap up box model - Debugging with Chrome Inspector - Case study: Squarespace Layout - Flex
CSS Layout Part I. Web Development
CSS Layout Part I Web Development CSS Selector Examples Choosing and applying Class and ID names requires careful attention Strive to use clear meaningful names as far as possible. CSS Selectors Summary
Building Page Layouts
Building Page Layouts HTML & CSS From Scratch Slides 3.1 Topics Display Box Model Box Aesthetics Float Positioning Element Display working example at: h9ps://;nker.io/3a2bf Source: unknown. Please contact
Adding CSS to your HTML
Adding CSS to your HTML Lecture 3 CGS 3066 Fall 2016 September 27, 2016 Making your document pretty CSS is used to add presentation to the HTML document. We have seen 3 ways of adding CSS. In this lecture,
Taking Fireworks Template and Applying it to Dreamweaver
Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate
Introduction to HTML & CSS. Instructor: Beck Johnson Week 2
Introduction to HTML & CSS Instructor: Beck Johnson Week 2 today Week One review and questions File organization CSS Box Model: margin and padding Background images and gradients with CSS Make a hero banner!
Welcome Please sit on alternating rows. powered by lucid & no.dots.nl/student
Welcome Please sit on alternating rows powered by lucid & no.dots.nl/student HTML && CSS Workshop Day Day two, November January 276 powered by lucid & no.dots.nl/student About the Workshop Day two: CSS
E-Business Systems 1 INTE2047 Lab Exercises. Lab 5 Valid HTML, Home Page & Editor Tables
Lab 5 Valid HTML, Home Page & Editor Tables Navigation Topics Covered Server Side Includes (SSI) PHP Scripts menu.php.htaccess assessment.html labtasks.html Software Used: HTML Editor Background Reading:
AGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES
CLASS :: 14 04.28 2017 3 Hours AGENDA CREATE A WORKS PAGE [ HTML ] :: Open index.html :: Save As works.html :: Edit works.html to modify header, 3 divisions for works, then add your content :: Edit index.html
BORDER IMAGES THE BACKGROUND IMAGE PROPERTIES. Learning Web Design, 5e
BORDER IMAGES For use with: Learning Web Design, 5e by Jennifer Robbins Copyright O Reilly Media 2018 In this article, I ll give you a quick overview of the border-image properties for filling the sides
Introducing CSS Flexbox Layout
Introducing CSS Flexbox Layout PRESENTED BY Matthew Ellison, UA Europe MATTHEW ELLISON Consultant and trainer for User Assistance tools and technologies since 1993 User of MadCap products since 2006 Certified
-Using Excel- *The columns are marked by letters, the rows by numbers. For example, A1 designates row A, column 1.
-Using Excel- Note: The version of Excel that you are using might vary slightly from this handout. This is for Office 2004 (Mac). If you are using a different version, while things may look slightly different,
Assignments (4) Assessment as per Schedule (2)
Specification (6) Readability (4) Assignments (4) Assessment as per Schedule (2) Oral (4) Total (20) Sign of Faculty Assignment No. 02 Date of Performance:. Title: To apply various CSS properties like
Getting Started with CSS Sculptor 3
Getting Started with CSS Sculptor 3 With CSS Sculptor, you can quickly create a cross-browser compatible layout with custom widths, margins, padding, background images and more. Additionally, you can use
Chrysa Papazoglou IT Services. Part III: Mobile sites guidelines Chrysa Papazoglou
Chrysa Papazoglou IT Services Part III: Mobile sites guidelines Chrysa Papazoglou Do I need to go mobile? Considering the usage statistics, definitely But, I have already built the website a. Check it
Micronet International College
Name: /50 Class: Micronet International College Level 4 Diploma in Computing Designing and Developing a Website (DDW) Test 2 (20%) QUESTION 1 a) JPEG is a commonly used image file format on the web. What
Perceptive Document Composition
Perceptive Document Composition Supported Word Features Version: 6.1.x Written by: Product Knowledge, R&D Date: November 2016 2016 Lexmark. All rights reserved. Lexmark is a trademark of Lexmark International
CSS Mastery. Advanced Web Standards Solutions. Andy Budd with Cameron Moll and Simon Collison
CSS Mastery Advanced Web Standards Solutions Andy Budd with Cameron Moll and Simon Collison CSS Mastery: Advanced Web Standards Solutions Copyright 2006 by Andy Budd, Cameron Moll, and Simon Collison All
Using Dreamweaver CS6
Using Dreamweaver CS6 7 Dynamic HTML Dynamic HTML (DHTML) is a term that refers to website that use a combination of HTML, scripting such as JavaScript, CSS and the Document Object Model (DOM). HTML and
ADJUST TABLE CELLS-ADJUST COLUMN AND ROW WIDTHS
ADJUST TABLE CELLS-ADJUST COLUMN AND ROW WIDTHS There are different options that may be used to adjust columns and rows in a table. These will be described in this document. ADJUST COLUMN WIDTHS Select
CSS for Page Layout Robert K. Moniot 1
CSS for Page Layout 2015 Robert K. Moniot 1 OBJECTIVES In this unit, you will learn: How to use style sheets for layout Controlling text flow, margins, borders, and padding Controlling visibility of elements
Block & Inline Elements
Block & Inline Elements Every tag in HTML can classified as a block or inline element. > Block elements always start on a new line (Paragraph, List items, Blockquotes, Tables) > Inline elements do not
Intermediate Web Publishing: Working with Styles
Intermediate Web Publishing: Working with Styles Jeff Pankin Information Services & Technology Contents Introduction... 2 In this class you will:... 2 Set the Preferences... 2 General... 2 Invisible Elements...
Perceptive Document Composition
Perceptive Document Composition Supported Word Features PDC Version: 6.0 Written by: Product Documentation, R&D Date: August 2014 2014 Perceptive Software. All rights reserved Perceptive Software is a
Frontend guide. Everything you need to know about HTML, CSS, JavaScript and DOM. Dejan V Čančarević
Frontend guide Everything you need to know about HTML, CSS, JavaScript and DOM Dejan V Čančarević Today frontend is treated as a separate part of Web development and therefore frontend developer jobs are
Coach s Office Playbook Tutorial Playbook i
Playbook i The Playbook... 1 Overview... 1 Open the Playbook... 1 The Playbook Window... 2 Name the Chapter... 2 Insert the First Page... 3 Page Templates... 3 Define the Template Boxes... 4 Text on the
ITNP43: HTML Lecture 5
ITNP43: HTML Lecture 5 1 The Box Model Every HTML element (e.g. h2, p etc) lies within a virtual box: Margin area LEFT TOP This is just some text that flows onto two lines. Border RIGHT Padding area BOTTOM
Introduction to Cascading Style Sheet (CSS)
Introduction to Cascading Style Sheet (CSS) Digital Media Center 129 Herring Hall http://dmc.rice.edu/ dmc-info@rice.edu (713) 348-3635 Introduction to Cascading Style Sheets 1. Overview Cascading Style
HIGHER. Computing Science. Web Design & Development Implementation Tasks. Ver 8.9
HIGHER Computing Science MADRAS COLLEGE St. Andrews Web Design & Development Ver 8.9 Contents Introduction What s included in this Booklet? 2 Page Web 1 Setting up the Pages for the Student Cooking Website
CSS Selectors. element selectors. .class selectors. #id selectors
CSS Selectors Patterns used to select elements to style. CSS selectors refer either to a class, an id, an HTML element, or some combination thereof, followed by a list of styling declarations. Selectors
Produced by. Web Development. Eamonn de Leastar Department of Computing, Maths & Physics Waterford Institute of Technology
Web Development Produced by Eamonn de Leastar (edeleastar@wit.ie) Department of Computing, Maths & Physics Waterford Institute of Technology http://www.wit.ie http://elearning.wit.ie CSS: Box Model Worked
Learning to use the drawing tools
Create a blank slide This module was developed for Office 2000 and 2001, but although there are cosmetic changes in the appearance of some of the tools, the basic functionality is the same in Powerpoint
Perceptive Document Composition
Perceptive Document Composition Supported Word Features Version: 6.2.0 Written by: Product Knowledge, R&D Date: December 2017 Copyright 2008-2017 Hyland Software, Inc. and its affiliates. Table of Contents
Client-Side Web Technologies. CSS Part II
Client-Side Web Technologies CSS Part II Topics Box model and related properties Visual formatting model and related properties The CSS Box Model Describes the rectangular boxes generated for elements
Spreadsheet Software
Spreadsheet Software Objectives: Working with Spreadsheets Enhancing Productivity Using the Application Open, close a spreadsheet application. Open, close documents. Create a new spreadsheet based on default
Cascading Style Sheets Level 2
Cascading Style Sheets Level 2 Course Objectives, Session 1 Level 1 Quick Review Chapter 6 Revisit: Web Fonts Chapter 8: Adding Graphics to Web Pages Chapter 9: Sprucing Up Your Site s Navigation Begin
PCC Local File Viewer User Guide. Version /23/2015 Copyright 2015
PCC Local File Viewer User Guide Version 1.0 01/23/2015 Copyright 2015 Table of Contents PCC Local File Viewer User Guide... 1 Table of Contents... 2 1 - Introduction... 3 2 - Choosing File Associations...
CHAPTER 3 WEB DESIGN BASICS KEY CONCEPTS
BASICS OF WEB DESIGN CHAPTER 3 WEB DESIGN BASICS KEY CONCEPTS 1 LEARNING OUTCOMES Describe the most common types of website organization Describe principles of visual design Design for your target audience
NVU Web Authoring System
NVU Web Authoring System http://www.nvu.com/index.php Table of Contents Using Nvu as Your Web Page Authoring System: Getting Started Opening a page, saving, and previewing your work...3 Formatting the
Skill Area 323: Design and Develop Website. Multimedia and Web Design (MWD)
Skill Area 323: Design and Develop Website Multimedia and Web Design (MWD) 323.3 Create a Web page using tables and frames (7 hrs) 323.3.1 Insert and modify tables on a Web page 323.3.2 Merge and split
LECTURE 05 WEB DESIGN
MULTIMEDIA TECHNOLOGIES LECTURE 05 WEB DESIGN IMRAN IHSAN ASSISTANT PROFESSOR DESIGN FOR TARGET AUDIANCE CONSIDER THE TARGET AUDIENCE OF THESE SITES. WEB PAGE DESIGN BROWSER COMPATIBILITY Web pages do
ABOUT CSS Class Styles... 13
USC Marshall Information Services Expressions Web 4/HTML/CSS Page Layout The first workshop dealt primarily with HTML which we used to provide content. This workshops addresses formatting our content using
Back in the good old days type was set by hand using printing presses.
CSS LINE-HEIGHT What is leading? Back in the good old days type was set by hand using printing presses. Printed material was created by setting out letters in rows. Each letter was created on an individual
Unit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model
Unit 20 - Client Side Customisation of Web Pages Week 2 Lesson 4 The Box Model So far Looked at what CSS is Looked at why we will use it Used CSS In-line Embedded (internal style-sheet) External
ADOBE 9A Adobe Dreamweaver CS4 ACE.
ADOBE 9A0-090 Adobe Dreamweaver CS4 ACE http://killexams.com/exam-detail/9a0-090 ,D QUESTION: 74 You use an image throughout your Web site. You want to be able to add this image to various Web pages without