Cascading Style Sheets (CSS) is a simple way to define styles (e.g. fonts, colors, spacing) on Web pages.
Of course there is coding involved. Here is a printable cheat sheet you can keep close at hand.
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."
Here is a collection of well designed sites that make use of CSS.
How do you pick the sites?
Well first they have to be done in CSS. Tables can only be used for tabular data. Second they just have to look good to me. Beauty is in the eye of the beholder so I do not expect every site that is posted to be liked by everyone or even anyone. Also do not expect a site to be posted just because you sent it in.
With the large amount of submissions I get daily and the increasing number of showcase sites, getting your site into the Vault will now be more challenging. I look for use of color, typography, whitespace, IA and how they all fit overall in the site's structure.
Blogging has spread throughout the internet. It's not just geeks yelling in an echo room or kids babbling in MySpace. Corporate blogging is a reality.
What should the guidelines be?
Michael Hyatt has put together some suggestions for his company:
Like many companies, we have struggled with what guidance to give to our bloggers. I personally checked with several companies. None had formalized a set of blogging rules or written guidance.
One Microsoft blogger told me that the only rule his company provided was, "Be smart." I thought we probably needed a little more guidance than that, so several of us cooked up a list of "Blogging Terms and Conditions." Our corporate counsel has also had a crack at it.
All right, when this was posted, August was just put to bed. Still if you are going to do something for the holidays, you might want to start now.
37signals.com has a good selection of suggestions, tutorials, and links the will help you decorate your site. Elves are extra.
37signals is here to help. In these pages you'll find dozens of ideas for improving the holiday customer experience at your site. Each idea is accompanied by examples taken from top retail sites (we've visited hundreds of sites over the past two holiday seasons seeking smart techniques).
If you find the need for Armed Forces photos and art, here is the place to look.
Regardless of your opinion about their present mission, the military does present a spectacular visage.
"06/17/06 - An F/A-18E Super Hornet aircraft sits at the ready as storm clouds pass overhead aboard the Nimitz-class aircraft carrier USS Ronald Reagan (CVN 76) in the Philippine Sea June 17, 2006.
(U.S. Navy photo by Photographer's Mate 2nd Class Aaron Burden)
All of these files are in the public domain unless otherwise indicated. However, we request you credit the photographer/videographer as indicated or simply "Department of Defense."
Under the belief that more information leads to more understanding, here is a site that may help you round the corners of web design and function. Besides CSS templates there are PHP code nibblets.
In 2003 artypapers was created by R. Marie Cox as a springboard for ideas and a working space of technical implementation -- a place to test and build an extendable collection of core classes (alliteration!) that acts as an application framework for a diverse set of projects and applications.
It's actually just a simple table with a couple of additions. (free)
HTMLCAL is a Web calendar maker and editor that lets you maintain a group calendar for your Web site or intranet.
This software will let you maintain live calendars on your site that anyone can view or update from any Web browser. ($25)
HTML Calendar Maker Pro was designed with ease of use in mind. Now you can type your events quickly and easily and they will be transformed into a customized and professional monthly calendar within seconds. Simply follow the on-screen tutorial to create your calendar and then place the finished web page on your site. It's perfect for planning for the weeks ahead or noting past historic events. ($26.50 +)
Do you remember all of the clip art that was available locally with Office XP?
When you have an Internet connection, you have access to the Office Online collection, but if you would like more clip art installed on your machine:
A small amount of sample clip art images was included The 2007 Office systems and Office 2003 and is part of the "local collection" that is searched when you do not have Internet access to the Microsoft Office Online Clip Art and Media Web site. Office 2003 no longer included a media content CD with additional clip art. However, the Microsoft Office XP Media Content CD can still be installed locally or on a network share.
The Office XP Media Content CD contains approximately 35,000 clips that are a subset of the clips that are available on the Microsoft Office Online Clip Art and Media Web site. The Office XP Media Content CD was included with Microsoft Office XP Professional, Microsoft Office XP Standard, and Microsoft Publisher 2002 Deluxe Edition.
To install the contents of the Office XP Media Content CD on a computer, follow these steps:
Exit all programs that are running
Insert the Office XP Media Content CD into the CD drive or into the DVD drive
(Hold down the SHIFT key to prevent the program from automatically starting. If Microsoft Windows Installer automatically starts, click Cancel)
Click Start, click Run, type the following command, and then click OK:
msiexec.exe /i CD_drive:\CAG.MSI ADDLOCAL=ALL /qb
(CD_drive is the letter of the drive that contains the Office XP Media Content CD)
Daniel Will-Harris is a designer and author. He has put together a web site with step-by-step instructions about how to set up your own web site.
" Everyone and their dog needs to build a web site these days. But even with the best software there's all sorts of stuff a mammal has to understand before it can create a truly useful site.
eFuse.com offers information, inspiration, and assistance written in plain English by professional writers and designers so it's easy to understand and use. eFuse.com is for everyone who wants to build a more attractive and effective web site. Learn what you need, painlessly. No experience necessary. You'll be web-savvy in no time.
"Cascading Style Sheets separate the presentation from the structural markup of a web site. By applying a CSS style you have the ability to keep the structure of your document lean and fast, while controlling the appearance of the content.
HTML was intended as the structural markup language. This language focuses on the roles that the different elements of a document have to play, not how they have to look. CSS has been invented and developed for the Internet. It is not an adapted tool from print or programming, but a means of enhancing HTML."
CSS Creator site is a place for you to learn about and create CSS, Cascading Style Sheets. The CSS Forum is a place where you can discuss CSS page layouts, positioning, bugs and just about anything related to cascading style sheets. The forum is new, free and most of all needs people like you to create a community. Talk about CSS, ask questions, find solutions, and help each other learn at the CSS Forum.
The original CSS Creator is a CSS generator, which you can use to create styles and test them on your site. If you are learning CSS have a look and see how changes will affect your site and generate the styles. The CSS Creator has been used tested on 5266 urls.
The CSS Layout Generator will generate layouts with a flexible center column and fixed width left and or right column. All columns will be the same length, the layout can be centered on the page or full width and a header and footer can be easily added. 10545 CSS Layouts have been generated.
A Useful CSS Links page has been added to the site and contains great links to CSS tutorials, tools, tips from all over the web.
You've seen them before; web forms that accept input and then take you to another page for more data entry.
Here is a step by step tutorial:
This article describes how to create a multipage form in Microsoft Office FrontPage 2003. Each page of the form contains navigation buttons to move to the previous page or the next page. Additionally, the last page of the form contains a Submit button and a Reset button.
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.
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
If you like the idea of building your own RSS feed, read on.
"Learn about RSS and how to programmatically create an RSS file for your FrontPage 2003 Web site. The download that accompanies this article contains a VBA project and an XSLT file that you can use to generate and display RSS feeds.
If you spend any time on the Internet, you have probably heard of RSS, and you may decide that you need an RSS feed for your Web site. An RSS feed is an Extensible Markup Language (XML) file that people can use to keep up to date with the content on a Web site. RSS feeds are frequently associated with weblogs (blogs), but you can use them for any Web site.
If you have a Web site that contains content that you frequently update, such as articles or stories, you may want an RSS feed to help your customers keep up with your updates. This article explains the XML behind RSS and provides a Microsoft Office FrontPage 2003 Visual Basic for Applications (VBA) project that you can use to programmatically generate an RSS feed for your FrontPage Web site. The download for this article includes an Extensible Stylesheet Language Transformation (XSLT) file that you can use to display the RSS XML file in a browser."
A San Francisco company called Learn the Net has produced a basic on-line tutorial about the Internet.
If you need a fundamental primer, this might be a place to look.
It is not a series of scaled down "baby talk" lessons. You can drill down though the meaning of 403/404 error codes and links to WW3 Generic URI Syntax (RFC 2396) standards.
That is if you know how to drill down.
"Throughout Learn the Net--in fact on most web pages--you will see words that are in color and often underlined. By clicking on these words, known as hypertext, you jump to other places on the page, to other pages on the site, or to other resources on the Internet."
If you include an email address it can be read be the evil robot of the web. Nexodyne.com will create a free email icon graphic to be used in place of a mail hyperlink.
(user in this case would be "MyJunkMail.Place"
mydomain would be "Gmail.com")
user = "myaddress";
domain = "mydomain";
document.write('<a href=\"mai' + 'lto:' + user + '@' + domain + '\">');
document.write(user + '@' + domain + '</a>');
// End -->
One of the reasons the Web has expanded so rapidly is the ease of writing simple HTML.
When you want to add more bells and sirens, FrontPage has some built in tools to ease the process.
"In the early 1990s, Web sites were simple. Basic HTML allowed programmers to design sites that relayed basic information to Internet users but that could do little else.
Today, Web sites are often sophisticated and complex. Rather than a static place to present information, Web sites frequently act like business partners, performing complex tasks that can help run and even improve a business or personal endeavor.
To take full advantage of a Web site and truly make it work for you, you need professional coding tools. Microsoft Office FrontPage 2003 provides several new, powerful coding tools that will help you to create dynamic, interactive sites that can do more for you.
FrontPage 2003 coding tools (also Expression Web)can help you to generate clean, efficient code, while also giving you more control over the code. These tools can also help you to increase and apply your knowledge of coding languages.
This article will introduce you to the FrontPage 2003 coding tools and show you how you can use them to code faster and more accurately."
The operative line is:
<meta http-equiv="REFRESH" content="3; URL=http://WWW.MiniByteTech.com">
The value of content is in seconds.
The new location for this web site is WWW.MiniByteTech.com! You will automatically be redirected in 3 seconds. If your browser doesn't automatically load, click <a href="http://WWW.MiniByteTech.com">HERE</a>.
Open your Microsoft Office FrontPage 2003 Web site.
On the File menu, click Import.
In the Import dialog box, click Add File.
In the Add File to Import List dialog box, browse to the Microsoft Office PowerPoint presentation that you want to import, select it, and then click Open.
"You can use the Web to give others access to your presentation by publishing it to a Web server or another computer that is accessible to those you want to view the presentation with a Web browser. When you publish a presentation, a copy of it is created in a file location you choose. You can publish from a presentation that is in .ppt format or that is saved as a Web page or Single File Web page."
"Links to numerous pages on the Web where home users can find software and information relevant to Windows PC privacy and security.
It also contains a rudimentary "checklist" of basic steps that home PC users can take to enhance their privacy and security while using the Internet.
Finally, you'll find a set of resources developed by the author of this site to help you protect your privacy and security on the Internet, including information about Pretty Good Privacy (PGP) and the Gnu Privacy Guard (GPG)."
"Transactional email can be a website's customer service ambassador, but messages must first survive a ruthless selection process in the user's in-box. Differentiating your message from spam is thus the first duty of email design.
Email is one of a website's most powerful tools for strengthening customer service and increasing users' confidence and trust in the site. Confirmation messages and other automated transactional email can complete the user experience: they reach out to customers in ways that are otherwise impossible for websites, which must sit still and wait for users to approach."
"Once you choose a blogging service and set up an account, you will be provided with a standard blog template. But this template will suffer from a cookie-cutter design, and if you don't personalize it your blog may become lost. To be noticed your blog needs to make a splash - as there are more than ten million blogs out there. So what we'll concentrate on here is working with some design elements that can help you add more zing to your blog."
"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!"
"There are many Web technologies, from simple to complex, and explaining each in detail is beyond the scope of this article. However, to help you get started with developing your own Web sites, beyond simple WYSIWYG designing of Web pages in FrontPage, this article provides brief definitions of the major Web technologies along with links to sites where you can find more information, tutorials, and reference documentation."
..."the personal website of Matt Pfeffer. It is an experiment more than anything. An attempt to learn a thing or two, get some exercise, maybe have a laugh now and then. Everything here is either trivial, or wrong."
"The guidelines this document describes will tell you how to improve the user experience on your site. They apply to web copy generally - both marketing copy and navigational (or instructional or "guide") copy - and their value is indirect but significant: Observing them will improve your site's ability to do its job well. "
"This style guide seeks to serve as a resource for anyone writing or editing web copy, and to document some of the conventions that distinguish good writing, as published on the web, from writing published in other media."
"Cascading Style Sheets (abbreviated CSS) add a new dimension to our pallet of Web design tools. They have the potential to allow a webmaster to control the appearance of countless web pages with one single file.
This file, known as a "Style Sheet", can be referenced by any number of web pages to define how certain areas of text appear on those pages.
With a simple change to this style sheet (to the font face, color, size, highlighting, border, or other properties), any page in the entire web site can instantly and easily be altered, eliminating the need to go through and change every single HTML tag.
In addition, style sheets add a number of other features, such as being able to specify text size in terms of points, highlighting text, using borders without the hassle of tables, defining paragraph indents, margins, and object positioning. They even provide the ability to layer elements over one another!"
"This site documents my attempts at understanding and exploring the possibilities of CSS. From standard navigation links to my more bizarre experimental techniques.
"You will no doubt come across many quirky layout issues when building a site with CSS. You'll end up banging your head against a wall time and again. This is an attempt to make the design process easier, and provide a quick reference to check when you run into trouble."
"The old-timers had to figure out the hard way all the tricks and techniques we now take for granted; lucky folks who came in later (myself included) can benefit from their sweat and tears.
In the end, when your skill using standard-based design eclipses your skill using old-school table-based methods, you’ll look back and marvel at how much more sense it makes to layout a page with CSS."
"This Style Guide for the Branch Libraries of the New York Public Library explains the markup and design requirements for all Branch Libraries web projects, along with various standards and best practices."
The rules of XHTML as compared to HTML—an easy transition
What is XML?
A brief introduction to the foundation of XHTML
Four key benefits of converting from HTML to XHTML
XHTML Authoring Tips & Tools
Simplifying the work process—includes tips on thinking structurally, and tools for hand-coders and Dreamweaver users
XHTML Accessibility Tips
Making sure your pages can be read by all visitors, browsers, and devices
Ensuring interoperability by avoiding errors and sticking to standards
Tips on authoring and linking to Style Sheets
Steal These Style Sheets!
Style Sheets for your use in Library projects
Ensuring that your Style Sheets are error-free (same as XHTML validation)
"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."
"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."
This is significantly simpler than linking to named destinations because it doesn't require any special steps to be taken in the preparation of the PDF file. I personally favor the page-linking method for this reason. In order to link through to a specific PDF page, begin with the domain, as you would for any web link:
Then add the name of the PDF document:
Then append "#page=" followed by the desired page number. For example, if you were looking to link to page 7:
You can add information from other RSS or Atom sites to your own web page.
FeedSweep from Howell Developments takes care of the scripting. You only have to paste a short piece of code on your page. You can choose which feeds to display.
RSS 1.0 and variants
RSS 2.0 and variants
"Including up-to-date information from other web sites and news services bolsters your site's content and lets your visitors know they can come back to get updates on topics that are related to their interests. FeedSweep is a new, free service that allows anyone to include news feeds on his or her web site.
Create a Basic FeedSweep to browse and preview any of these styles, or create an Advanced FeedSweep and make your own style.
"As a Web designer and HTML builder, one of the first places I visit on a Web site is the site map. The site map shows an entire overview of the structure of the site, and more importantly, indicates how much effort was put into usability testing during the site's construction.
"27 percent of users turn to site maps when asked to learn about a site's structure. If your site map is poorly designed, you may lose 27 percent of your Web visitors. That could translate into millions of dollars of missed sales for an e-commerce site, or a massive amount of missed leads for a service company."
(A Site Map is a guide to a web site used by visitors. A Sitemap is a file used by search engines to index entries on a site. )
"Accessibility, the design of HTML documents for accessibility by people with disabilities, is such an important aspect of the Internet today that the Worldwide Web Consortium (W3C) has adopted a set of guidelines for designing accessible Web sites. The Web Content Accessibility Guidelines (WCAG) closely follow Section 508 of the U.S. Rehabilitation Act.
For some Web sites, adherence to the WCAG is not optional; it is a necessity. Expression Web/FrontPage 2003 has tools for evaluating the accessibility of an entire Web site, identifying elements that violate the guidelines, and finding ways to correct the violations. The accessibility checker provides all of this functionality in a single dialog box.
To access the accessibility checker on the Tools menu click Accessibility (Accessibility Reports). You can use the accessibility checker to check a single page or an entire Web site. The accessibility checker checks for varying levels of accessibility and specifically for adherence to Section 508 of the U.S. Rehabilitation Act. You can check for errors or warnings, and you can add a manual checklist."
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.
There are no text files to save and reload. Just write a few lines of text, a few tags, even paste some text in the box from some other application if you want. When you press the button, it will show you how what's in the box will look when run through the web browser your using now.
HTML Preview Preview HTML in a new window by entering it into the form. This script allows you to pass anything to a new window. Instructions help you create a preview on your own web page.
Here are the Save As choices available in an application such as Word:
Web Page, Complete means that the contents of the page (including any pictures) will be saved into a folder as separate files, similar to those on the server hosting the site.
Web Page, HTML only means that only the HTML information will be saved. This option and Web Page, Complete will enable you to open the file for viewing in Internet Explorer (or any other browser) at a later time, even when you are offline.
Web Archive means that the page will be saved, along with any images it contains, as a single file. You can view a Web Archive later without being connected to the Internet.
Text File means that only the text on the page will be saved, not the HTML (or any other) formatting, including graphics.
This is a tool that lets you see how different typefaces will look on the screen. It also allows you to compare three fonts at once.
"The Typetester is an online application for comparison of the fonts for the screen. Its' primary role is to make web designer's life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated."