Page Break CSS

Before or after

You can put a break on a web page like you can in a document.
A Cascading Style Sheet makes it simple

"The stub-ends left when paragraphs end on the first line of a page are called widows. They have a past but not a future, and they look foreshortened and forlorn."

Orphans are parts of a paragraph that begin on the previous page. An orphan has a future, but no past.

The only paging properties supported by Internet Explorer 7, Safari 3 and Firefox 2 are page-break-before and page-break-after.
The page-break-before and page-break-after properties enable you to say that a page break should occur before or after the specified element. The following example starts a new page every time an h1 heading is encountered and after every .section block.

h1 {
page-break-before:always }
.section {
page-break-after:always}

Etiquette of Pagination


See all Topics internet

Themes and Templates

Need a look?

Themes are a collection of design elements and color schemes that can be applied to your web site to give it a unified appearance.

Templates include themes and layout modules to aid in quickly creating a web site. Templates can be purchased through the web, but here is one of the locations that provide free design help.

FreeLayouts.Livejournal.com

"Want a great new look for your website? Free Layouts.com offers you just that - select from our huge database of complete "look and feel" designs. Professional, sports, technical and others - they are all here. Free Web Templates are available for you to download now.

Look around and download your favorite page layouts - for free. Also, submit templates of your own and increase traffic to your website greatly. Currently over 500 free HTML templates and 50 Flash templates for you to download!"

See all Topics internet

Low Down Footer

CSS code

How to create a CSS footer that remains at the bottom of the page, regardless of content.

CSSStickyFooter.com


See all Topics internet

Plan for Your Site

Outline then do

Always a good idea. Pre-plan and then do. Too often projects are started without a plan and too often plans are made and not carried through.

"When creating a website there are several different tools and methods available, but it is important to plan the steps. This guide will help outline the important steps required for website creation and promotion. Information in this document should help readers avoid many pitfalls and save time throughout the process."

1. Inception and Planning
   
   
2. Design
   
   
3. Construction
   
   
4. Promotion

CompTechDoc.org:
Website Creation Tutorial


See all Topics internet

Relative Font Sizes

What size are your relatives?

Relative font sizes make websites more accessible and easier to read - but they're not much help unless the person using the site can find a way to actually change text size.

Here's a simple solution for text resizing:

Power To The People: Relative Font Sizes
Article by Bojan Mihelac

Original link from Lockergnome


See all Topics internet

Border Magic with CSS

Consistent formatting

Cascading Style Sheets can be helpful in applying dependable format characteristics to web sites. Like Styles, CSS provides a reference point when a certain look is called for.

Stu Nicholls provides directions for "Fluid" borders:

"If you resize your browser window you will see that these borders are fluid and stay in shape. Resize the text and they will also stay in shape."

Even in this static shot, you can see some nice possibilities.

Fluid Borders to with CSS


See all Topics internet

Form Design

Fancy functionals

Here is a discussion about how to design a form for use on the web.

"Computers are supposed to make our lives easier, not more difficult. As usability-conscious designers, we can make our users' lives easier by thinking about the way people interact with our websites, providing clear direction, and then putting the burden of sorting out the details in the hands of the computers—not the users.

It's that last part that we're going to focus on here. We've all heard and read about big usability mistakes time and time again: "Don't use images or flash for navigation," "Don't use Javascript for links," and I certainly hope we're all applying those lessons in our work. It's often the smallest usability quirks, however, that create the biggest annoyances for users, especially when it comes to HTML forms. Follow these guidelines, and you'll be off to a good start."

• Use the right field for the task
  
• Give them room to type
  
• Shorten your forms and question "mandatory" fields
  
• Mark mandatory fields clearly
  
• Provide descriptive labels for all of your fields
  
• Let the computer, not the user, handle information formatting
  
• Use informative error messages
  
• Don't return users to an altered form

Sensible Forms
Brian Crescimanno


See all Topics internet

Design Patterns

More suggestions


Martijn van Welie of Welie.com, has a collection of designs for web sites, GUI designs, and MobileUI designs.

Patterns

Some topics covered are:

• Site Types
  
• Ecommerce
  
• Navigation
  
• Basic Page Types
  
• Managing Collections
  
• Page Elements
  and
  
• Visual Design

See all Topics

Low Vision

Screen-magnification or zoom

Creating a Web site that accommodates people with low vision should be a goal of designers. Accessibility laws require it in some cases.

The online magazine AListApart.com, has some interesting articles:

Big, Stark, & Chunky

"[Participants] told us that they often copied and pasted material into Word where they could enlarge the font even more and make it bold, thus rendering it easier for them to see."

"We have not done a good job of catering to these screen-magnification or zoom users. Using CSS, it's easy to do, as we shall soon see. And moreover, using CSS to develop zoom layouts is almost exactly what developers of handheld and PDA browsers are doing in their quest for small-screen rendering of wide, multicolumn web pages."

Also:


Web Accessibility


See all Topics internet

Dynamic Web Templates

DWTs

"FrontPage 2003 introduced Dynamic Web Templates, a new and sophisticated type of Web page template that enables you to share a layout among several pages in a site, preserve specific regions of content from unwanted changes, and save time when you begin to manage the Web pages on your Web site.

By creating a Dynamic Web Template, you can make regions on attached pages available for other authors to add and modify content, while preventing changes to other regions on the same page. This provides you with control to preserve the layout of the pages and the template itself. When you update the content in a Dynamic Web Template, you can update the attached Web pages simultaneously."

Microsoft:
Create a Web page layout
by using Dynamic Web Templates

Change the master page layout
by using Dynamic Web Templates
Also:

Dynamic Web Template Interchange Guidelines

"The Dynamic Web Template Interchange Guidelines have been established by a consortium of web designers and developers in an effort to provide webmasters using a third party DWT the ability to cross over from one design to another with relative ease. The goal of the DWTIG is not to standardize design; rather, to standardize the method in which the content is added to a DWT through Editable Regions within the design."

Expression Web:
Dynamic Web Template Packages



See all Topics internet

Color Pickers

Formatting tools

Colorcode Generator

Color Scheme

Color Schemer

Iconico

Irfanview

Kira's Web Toolbox

Pagetutor.Com

Visbone



Also:
More Color Matching Tools


See all Topics internet