Styling XForms Using CSS to make your forms look great Date: 10/9/2008 Dan McCreary President Dan McCreary & Associates (952) 931-9198.

Slides:

Advertisements

Similar presentations

Minnesota Department of Education Metadata Registry Case Study Date: October 31 st, 2008 Dan McCreary President Dan McCreary & Associates

Advertisements

Copyright © 2003 Pearson Education, Inc. Slide 4-1 Created by Cheryl M. Hughes, Harvard University Extension School Cambridge, MA The Web Wizards Guide.

Chapter 3 – Web Design Tables & Page Layout

Dynamic Forms How to use Tables. What is a Table? Usually you see a table on a form like this…. 3 columns X 3 rows with grey border lines But this could.

HTML – A Brief introduction Title of page This is my first homepage. This text is bold  The first tag in your HTML document is. This tag tells your browser.

Very quick intro HTML and CSS. Sample html A Web Title.

Session 4: CSS Positioning Fall 2006 LIS Web Team.

Cascade Style Sheet Demo. Cascading Style Sheets Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to.

ADVANCED CSS William Neely CEO, Piecewise.com. CSS FONTS AND TEXT CSS ‣ Line-height allows to indicate the amount of space between lines; allows for equal.

Murach’s ASP.NET 3.5/C#, C5© 2008, Mike Murach & Associates, Inc.Slide 1.

Technologies for web publishing Ing. Václav Freylich Lecture 6.

After attending this workshop, students should be able to complete the following tasks involving MS Word:

Using oXygen Using oXygen to build and execute XQuery applications on eXist Date: September 2008 Dan McCreary President Dan McCreary & Associates

HTML Tables and Forms Creating Web Pages with HTML CIS 133 Web Programming Concepts 1.

This is a 20 second slide, the asterisk below will appear after 15 seconds Add text, change font/size, change color and background, etc. *

Overview of XPath Author: Dan McCreary Date: October, 2008 Version: 0.2 with TEI Examples M D.

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.

Web Design Transparent Backgrounds. Why : Allow text to appear clearly above a graphic background image that still can be seen in the background. Without.

CHAPTER 11 Tables. How Are Tables Used Data Display  Very tidy and very useful Better Text Alignment  Putting text in tables allows you to format indents.

Tutorial #9 – Creating Forms. Tutorial #8 Review – Tables Borders (table, gridlines), Border-collapse: collapse; empty-cells: show; and rowspan, colspan.

Lesson 10: Working with Tables and Forms. Learning Objectives After studying this lesson, you will be able to:  Insert a table in a document  Modify,

Today’s objectives  Complete web page  Using xhtml & CSS  Adding CSS to documents Embed url(File);  CSS.

Sample Auto-generated XForms With XQuery Date: 1/17/2009 Dan McCreary President Dan McCreary & Associates (952) M D Metadata.

CHAPTER 10 Formatting Tables and Forms. Using Tables the Right Way  HTML and XHTML have a LOT of tags dedicated to building a table  If you have only.

CSS My favourite ICT lesson By Federico Boschi Cascading Style Sheets.

Cascading Style Sheets Tom Osman. Keep the content of a webpage separate from the formatting of the page. Structure (of content)  Headings  Sub headings.

Just A Few More Fun Objectives 1 Having Some Fun With Java Script 2 Using Style Sheets.

Metadata Management Case Study Date: 10/21/2008 Dan McCreary President Dan McCreary & Associates (952) M D Metadata Solutions.

CSS. HTML: Looking Back HTML dictates order, structure, and function Does very little to specify layout or visual rendering.

© 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 7 – Adding and.

EXist Indexing Using the right index for you data Date: 9/29/2008 Dan McCreary President Dan McCreary & Associates (952) M.

Recursive Functions Creating Hierarchical Reports Date: 9/30/2008 Dan McCreary President Dan McCreary & Associates (952) M.

Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.

Neal Stublen Course Road Map  Create web page layouts using CSS  Manage CSS  Test website validity  Create navigation menus using.

Auto-generation of Repeated Elements Part 2 of a series of XForms auto generation Date: 1/25/2008 Dan McCreary President Dan McCreary & Associates

Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes.

Part 4 Introduction to CSS. CSS Table Table Borders table, td, th { border:1px solid black; } Firstname Lastname Bader Ali Paul Manuel The example below.

Keyword Searching Weighted Federated Search with Key Word in Context Date: 10/2/2008 Dan McCreary President Dan McCreary & Associates

Web Foundations THURSDAY, OCTOBER 3, 2013 LECTURE 6: CSS CONTINUED.

XRX Basic CRUDS Create, Read, Update and Delete and Search XML Data Date: May 2011 Dan McCreary President Dan McCreary & Associates

Using oXygen 12 with XQuery Using oXygen to build and execute XQuery XQuery applications on eXist Date: April 2011 Dan McCreary President Dan McCreary.

Cascading Style Sheets (CSS). A style sheet is a document which describes the presentation semantics of a document written in a mark-up language such.

Internet Technology Dr Jing LU Updated Dr Violet Snell / Dr Kalin Penev 1 Internet Technology (week 6)  Recap: Validating HTML  Page Layout.

CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, you will learn:  CSS properties for margin  CSS properties for dimensions (width,

Web Technologies Lecture 2 HTML and CSS. HTML Hyper Text Markup Language – Describes web documents – Made up of nested HTML markup tags – Tags are the.

XQuery Labs Basic Reporting Date: 9/29/2008 Dan McCreary President Dan McCreary & Associates (952) M D Metadata Solutions.

Coding with HTML/CSS Quiz { } Play as a PowerPoint slideshow for answers.

OV Copyright © 2008 Element K Content LLC. All rights reserved. Working with Web Pages  An Introduction to Cascading Style Sheets  Format a Web.

Word 2010 Edit Page Layout In this lesson, you will learn how to insert columns and page breaks. How to change the page orientation, paper size, page margins,

1 CS428 Web Engineering Lecture 07 Font, Text & Background (CSS - II)

NAVIGATION USING HTML TO SET UP THE BASIC STRUCTURE OF A NAV BAR.

CONFIGURING COLOR AND TEXT WITH CSS Chapter 3. Cascading Style Sheets (CSS) Used to configure text, color, and page layout. Launched in 1996 Developed.

Creating and Processing Web Forms

Laying out Elements with CSS

Google fonts CSS box model

Objectives Design a form Create a form Create text fields

Dan McCreary President Dan McCreary & Associates (952) M D

IBM Kenexa BrassRing on Cloud Responsive Apply: Visual Branding Tool

Table CSS Create a new CSS called tablestyle.CSS Green Background

Fixed Positioning.

Sequences in XQuery Core data structure of XQuery Date: 8/25/2009

Training & Development

Add text, change font/size, change color and background, etc.

CSS and Class Tools.

Cascading Style Sheets

XRX Diagrams Application Architecture Diagrams Date: Aug 21st, 2008

Presentation transcript:

Styling XForms Using CSS to make your forms look great Date: 10/9/2008 Dan McCreary President Dan McCreary & Associates (952) M D Metadata Solutions

M D Copyright 2008 Dan McCreary & Associates2 Outline Why use CSS? XForms namespaces Field alignment Changing control dimensions

M D Copyright 2008 Dan McCreary & Associates3 Why CSS? XForms is a w3c standard CSS is a w3c standard Don’t reinvent the wheel

M D Copyright 2008 Dan McCreary & Associates4 Background Web form layout is different from paper form layout Paper forms we designed to reduce the amount of paper needed Forms were “dense” Online users want clear labels, hints, examples and hints

M D Copyright 2008 Dan McCreary & Associates5 Challenges One of the most difficult part about learning XForms is learning CSS Option: use someone else’s XForms stylesheets

M D Copyright 2008 Dan McCreary & Associates6 XForms xf url(" … xf|input {} Note that the “:” is already in use.

M D Copyright 2008 Dan McCreary & Associates7 Terminology Label – the text that identifies a control Control Value – the area that the user enters the data

M D Copyright 2008 Dan McCreary & Associates8 Simple Form Layout Labels Control Values

M D Copyright 2008 Dan McCreary & Associates9 Layout issues Wide full-text descriptions Selection lists

M D Copyright 2008 Dan McCreary & Associates10 Block Controls /* All form controls appear on their own line with a 5px margin above and below between controls */ xf|input, xf|select, xf|select1, xf|textarea { display:block; width:100%; margin:5px 0; } Margin above and below.Margin left and right.

M D Copyright 2008 Dan McCreary & Associates11 Right Align Labels xf|input > xf|label, xf|select > xf|label, xf|select1 > xf|label, xf|textarea > xf|label { text-align:right; padding-right:10px; }

M D Copyright 2008 Dan McCreary & Associates12 Select1 and Inputs You can adjust the vertical separation

M D Copyright 2008 Dan McCreary & Associates13 Required Field Options /* Differentiate between required fields and non-required fields */ xf|input:required {font-weight: bold;} xf|input:required.xf-value {background-color: yellow;} /* This adds a red asterisk after the required input fields */ *:required::after {font-weight:bold; font-size:1.5em; content: "*"; color: red; }

M D Copyright 2008 Dan McCreary & Associates14 Thank You! Please contact me for more information: Native XML Databases Metadata Management Metadata Registries Service Oriented Architectures Business Intelligence and Data Warehouse Semantic Web Dan McCreary, President Dan McCreary & Associates Metadata Strategy Development (952)