© 2008 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice Niranjan Damera-Venkata HP Labs Design.

Slides:



Advertisements
Similar presentations
Use Tables for Layout Control Day 7. You will learn to: Understand Tables Create a Simple Table Modify Your Tables Appearance Create Page Layouts with.
Advertisements

Chapter 3 – Web Design Tables & Page Layout
Pages and boxes Building quick user interfaces. learning objectives o Build a quick UI with pages and boxes o understand how pages and boxes work o click.
KompoZer. This is what KompoZer will look like with a blank document open. As you can see, there are a lot of icons for beginning users. But don't be.
Cascading Style Sheets
Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
McGraw-Hill Technology Education © 2004 by the McGraw-Hill Companies, Inc. All rights reserved. Office Word 2003 Lab 3 Creating Reports and Tables.
Creating a Web Page with Tables. Objectives Create a text table with preformatted text Create the basic structure of a graphical table Organize table.
Document Layout. Creating Whitespace2 n Horizontal space –Within line of text –Netscape – – –If no room, will shorten the space to fit on current line.
COMPREHENSIVE Excel Tutorial 2 Formatting a Workbook.
CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.
1 The Structure of a Web Table beginning of the table structure first row of three in the table end of the table structure table cells You do not need.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Excel Part 2 Formatting a Workbook. XP Objectives Format text, numbers, and dates Change font colors and fill colors Merge a range into a single cell.
ITP 104.  While you can do things like this:  Better to use styles instead:
Web Technologies Website Development Trade & Industrial Education
Lesson No:9 MS-Word Tools, Mail Merge and working with Tables CHBT-01 Basic Micro process & Computer Operation.
Word Tips. Objectives Open and close MS Word Learn the parts of the Word window Learn the toolbar, their buttons, and what they do Create and save a new.
Website Development with Dreamweaver
CNIT 132 – Week 7 HTML - Tables. Tables on the World Wide Web A table can be displayed on a Web page either in a text or graphical format. A text table:
Session 1 SESSION 1 Working with Dreamweaver 8.0.
Domain 3 Understanding the Adobe Dreamweaver CS5 Interface.
Microsoft Publisher 2010 Chapter 4 Creating a Custom Publication from Scratch.
XP New Perspectives on Microsoft Word 2002 Tutorial 31 Microsoft Word 2002 Tutorial 3 – Creating a Multiple-Page Report.
Designing a Web Page with Tables. A text table: contains only text, evenly spaced on the Web page in rows and columns uses only standard word processing.
© 2008 The McGraw-Hill Companies, Inc. All rights reserved. WORD 2007 M I C R O S O F T ® THE PROFESSIONAL APPROACH S E R I E S Lesson 14 Tables.
© 2012 The McGraw-Hill Companies, Inc. All rights reserved. word 2010 Chapter 3 Formatting Documents.
Tutorial #6 – Creating Fixed Width Layouts. Tutorial #5 Review – Box Model Every html element is surround by a box Content, Padding, Border, Margin Can.
Computer Information Technology – Section 4-12 Some text and examples used with permission from: Note: We not endorsing or promoting.
Copyright 2006 South-Western/Thomson Learning Chapter 12 Tables.
© 2008 The McGraw-Hill Companies, Inc. All rights reserved. WORD 2007 M I C R O S O F T ® THE PROFESSIONAL APPROACH S E R I E S Lesson 15 Advanced Tables.
This eCPIC Quick Guide has been developed to assist System Administrators with creating Hierarchy Grids in eCPIC. The Hierarchy Grid functionality allows.
McGraw-Hill Career Education© 2008 by the McGraw-Hill Companies, Inc. All Rights Reserved. Office Word 2007 Lab 3 Creating Reports and Tables.
Tables Sacramento City College Engineering Design Technology.
CIS234A- Lecture 7 Instructor Greg D’Andrea. Tables A table can be displayed on a Web page either in a text or graphical format. A text table: – contains.
Guide for Mahara My Views PY1 team 3 - Yihong Huo, Jian Ren, Poonam Kala 1Guide of My Views - Team 3.
ATN GIS Support ArcGIS: ArcCatalog.
© 2008 The McGraw-Hill Companies, Inc. All rights reserved. ACCESS 2007 M I C R O S O F T ® THE PROFESSIONAL APPROACH S E R I E S Lesson 8 – Adding and.
1 Lesson 13 Organizing and Enhancing Worksheets Computer Literacy BASICS: A Comprehensive Guide to IC 3, 3 rd Edition Morrison / Wells.
Spacing between the Body and the Figures and Tables. There should be 3 blank spaces in between the Figure’s caption and the content of the thesis and dissertation.
Updated on: September 4, 2010 CIS67 Foundations for Creating Web Pages Professor Al Fichera.
1 Chapter 7: Customizing and Organizing Project Results 7.1 Combining Results 7.2 Updating Results 7.3 Customizing the Output Style (Self-Study)
Managing Text Flow Lesson 5. Setting Page Layout The layout of a page helps communicate your message. Although the content of your document is obviously.
Introduction to Drafting and Design In order to begin our drawing we have to set the drawing limits or the paper size.
CONTROLLING Page layout
Web Site Development - Process of planning and creating a website.
Tutorial 5 Working with Web Tables. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Learn and Apply the structure of.
This screen may be skipped altogether if the user chooses a report from the server and clicks Ad Hoc or Edit or whatever. Also, the next screen would ordinarily.
MANAGING TEXT FLOW Lesson 5. OBJECTIVES SOFTWARE ORIENTATION The Page Layout tab contains groups of commands that will produce a formatted document’s.
Word Processing & Desktop Publishing Software Business Computer Technology Curriculum Guide 2003.
Made with OpenOffice.org 1 Beyond the Single Page Steve Oualline OpenOffice Writer.
© 2004 The McGraw-Hill Companies, Inc. All rights reserved. The Advantage Series Microsoft Office Word 2003 CHAPTER 4 Printing and Web Publishing.
Laying out Elements with CSS
Edge Printing capabilities in HP SmartStream Designer
CSS Layouts: Grouping Elements
Microsoft Office 2007-Illustrated
Webpage layout using CSS
Working with Tables: Module A: Table Basics
Project Objectives Lay out Web pages Create layers
MANAGEMENT OF DASHBOARD MODELS
Microsoft Word: Tables
Controlling Layout with Style Sheets
Tutorial 3 – Creating a Multiple-Page Report
DREAMWEAVER MX 2004 Chapter 3 Working with Tables
Floating and Positioning
Microsoft Publisher 2016.
Layout Terms Visual Hierarchy
Welcome To Microsoft Word 2016
TERMS AND CONDITIONS   These PowerPoint slides are a tool for lecturers, and as such: YOU MAY add content to the slides, delete content from the slides,
Presentation transcript:

© 2008 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice Niranjan Damera-Venkata HP Labs Design Interface for the creation of variable page layout templates and styles

Goals of the variable page template creator  Design variable page templates effortlessly  Specify relative positions of elements ( title, text streams, figures, advertisements)  Specify optimization paths and text flow groups (multi-column, sidebars)  Set parameters controlling image scaling and whitespace on the page  Auto-generate xml stylesheet  Doc/Element style properties can be directly edited with a visual UI  Once edits are saved XML style-sheets can be auto-synthesized  Auto-generate template xml and template libraries  Allows XML generation for individual page templates, and creation of collection and library groupings  Simulate parameter settings on test data  Both page level and document level simulations are performed to validate parameter settings, with test data

Setup document properties  First, document properties are set in a UI  Allow user defined “textwidths” that are essentially MACRO definitions derived from fundamental doc attributes like page dimensions, margins etc. These MACROs can then be reffered to by name.  Sample XML generated from this step is shown below.

Place elements on a page template  A blank page template is created from doc properties and presented as a canvas to the designer  Each design element is created and positioned as a block on the page (overlap is handled with a layer attribute)  Element types include: Title, text stream, figure, advertisement Title Figure Text stream 1 Text stream 2 Example template for rendering the first page of a report with 1 figure

Edit element properties  Clicking on an element brings up the property editor appropriate for that element!  Example text stream properties include:  Fixed text width (typically set with a MACRO so that it can adapt to page dimensions)  Allowed text stream elements (head,subhead,para,list,inlinefig)  Font properties for the allowed elements  Text stream properties for main body streams are global for the whole document (any edits are applied globally to the collection stylesheet).  Text streams within sidebars may have distinct properties  Figure properties include:  Min and Max heights and widths  Caption property (set similar to text stream element properties above)

Specify optimization paths  Designer draws vertical and/or horizontal lines across the page to indicate system optimization that works to properly fit the content along each cut to the page dimensions Title Figure Text stream 1 Text stream 2 Example shows 2 vertical paths 1 horizontal path

Specify variable path parameters  System highlights (see blue segments) potential variable elements along path  Whitespace between elements  Figures along path Title Figure Text stream 1 Text stream 2 By clicking on each highlighted variable element, designer provides: min and max parameter values mean and variance equality constraints among parameters (ex: top space = bottom space) Min/max values of certain elements such as margins are automatically populated Distinct variarbles are indicated with numbers

Multi-column text groupings  When text is to flow from one column to the next, the two columns may be jointly optimized by setting a multi-column text group Title Figure Text stream 1 Text stream 2 Example shows 1 vertical path group consisting of 2 paths 1 horizontal path group consisting of 1 path By default, ungrouped paths are included in a distinct path group

Sidebar groupings  Groups of elements may be grouped into a “sidebar”  No flow of sidebar text is permitted to blocks outside a sidebar Title Figure Text stream 1 Text stream 2 Example shows 2 vertical path groups Second vertical path group includes a sidebar Horizontal path group also includes the sidebar

Splitting variables  Whitespace variables may be split into two variable to enforce a synthetic margin/boundary between blocks  Simply right-clicking a variable gives the option to split it Title Figure Text stream 1 Text stream 2 Example shows Highlighted variable elements in the horizontal grouping red cross indicates split position

Save Template and generate library XML file  Template level properties are set including name, (firstpage (yes/no), lastpage (yes/no), page-number (yes/no), side (odd/even/both)  Template is added to one/more libraries (annual report, newsletter etc.) and collections (ex: appendix, table of contents etc.)  Once all templates and collections for a library are saved an XML file encapsulating the template library can be synthesized by navigating the hierarchy shown below Collection 1 Library Collection 2 Collection n T 11 T 21 T 12 T 22 T 1n T mn

Generate collection style-sheet XML files  Inspect templates in each collection and pull together page styles, main body text stream styles, distinct sidebar styles and page number styles into a single XML file that encapsulates all the style definitions for that collection  Attached xml documents show synthesized Style files and template library for the annual report example.