Expression Web is a web editor from Microsoft that was released December 4, 2006 and is the successor to MS FrontPage. Cheryl Wise is the author of Foundations of Expression Web: The Basics and Beyond and is the instructor for this four week course which begins April 5, 2009.
Introduction to Expression Web – This class is newly updated for Expression Web 2 but you may take this class using either version of Expression Web.
Are you ready to take the plunge and move to a standards based web editor?
This class has been restructured to get you up and running with Expression Web in just 4 weeks. While you will not be an expert on Expression Web or a professional web designer you will be able to create and manage small websites and, with practice, be able to expand on the skills you learn to create more complex websites using Expression Web.
Prerequisite:
Expression Web – You may download the 60 day trial version from the Microsoft Expression Web Site our class is 4 weeks long so the 60 day trial is adequate. If you choose to take this class with the trial version make sure that you obtain and use the registration key or your trial will end before the full trial period.
Prior Experience:
No prior web design experience required but will be useful.
Book:
The book required for this class is Foundations of Expression Web: The Basics and Beyond available at Amazon or a bookseller near you. ( There will be reference to sections of this book that will help you better understand CSS.
Introduction to Expression Web – The Class
This course covers the fundamentals of standards based web design, including xhtml and css:
Week 1 – Getting Started
Why Worry About Standards
Why CSS Layouts?
Website Planning
Installing Expression Web
Interface
Configuring Expression Web
Site Settings
Page Editor Options Overview
Version 1
Version 2
CSS Tab
Font Family Tab
File Menu
Page Properties
Semantic HTML – Structuring Your Page
Publishing
Week 2
CSS Basics
CSS Tools
Fonts
Block
Background
Box
Positioning
Options in the New-Modify Styles Dialog box
Float vs Positioning
Lists & Tables
Applying Styles
Week 3
Contextual Selectors
Creating Page layouts
Layout Examples
Week 4
Dynamic Web Templates
Creating the DWT
New Pages and DWTS
Editing a DWT
Detaching or Changing a DWT
Preparing an Existing Page for a DWT
Site Reports
Report Options
Slow Pages
Hyperlinks
Accessibility Report
Compatibility Reports
CSS Reports
External Stylesheets
By the end of the 4week course you will have a simple multi-page website that will work on all modern browsers. You will have an understanding of the underlying principles of effective web design that will look good.
If you are interested in taking this class, you can read more about Introduction to Expression Web and register for the class at Start To Web. Cost of the Class is $89.95. Readers of this blog can obtain a 10% discount by using the coupon code PGfriends.
The next class will begin on April 5, 2009 and will last four weeks. The eBook is included as part of the class. Readers of this blog may obtain a 10% discount on the $79.95 cost of the class by using the code PGfriends when you register. REGISTER NOW so you can start at the beginning.
If the class does not fit into your current schedule, you may purchase the eBook separately.
Migrating from FrontPage to Expression EBook $29.00
==============
Perhaps you are using FrontPage 1998, one of the earliest versions of FrontPage to design your websites. Maybe you are using a later version 2000 or 2002. Are you still using Themes, Shared Borders, and the Navigation Bots? Have you upgraded to FrontPage 2003 but still using the formatting toolbar which adds all of those <font> tags? Is your site accessible to those visitors who cannot “see” you site?
Do you already have Expression Web or maybe you are thinking of getting it? Perhaps you have it but have decided the process of cleaning up your site is just “too much.”
(Did you know you can upgrade for less than $99 if you have a qualifying application which includes many of the Microsoft products?) Not in your budget right now?
You still might consider taking Migrating from FrontPage to Expression Web. Why? In the class we teach you to use many of Expression Web’s clean up tools and EW does help where FrontPage simply cannot. Some of cleanup can just as easily be done with other third party tools or using FrontPage 2003 in particular. Microsoft does provide a free 30 day trial of Expression Web so you can test out the software, but the software may expire BEFORE you have completed the class. We are also teaching you how to make use of accessibility features.
The cost for class has is $79.95 AND you will receive a copy of the eBook which contains additional material, lots of screenshots, and a selection of templates you can use. While the book is an excellent resource, the class gives you two Microsoft MVPs to hold your hand and answer your questions while you are migrating. What more could you want?
To register go to http://starttoweb.com/classes/fp-ew.php and start learning how to clean up your code. Remember, using cleaner coding methods means easier maintenance and easier maintainance me
Are you new to CSS? Confused about box models and how to create a CSS based page layout? This Introduction to CSS class is for you. You must be able to write or at least read HTML and familiar with the terms of web design to participate in this class.
Introduction to CSS is another class offered by Cheryl Wise at Start to Web and will begin April 5, 2009
Prerequisite:
Any CSS or text editor (code view of many popular HTML editors qualifies) maybe used in this class but the ability to work directly in the code is required.
Prior Experience:
Must be able to write or at least read HTML and familiar with the terms of web design. Minimum experience the equivalent of “The Language of Web Design” short class.
Book:
The book for this class is Cascading Style Sheets Separating Content From Presentation. There will be reference to sections of this book that will help you better understand CSS during this class so you should order it in time to receive it prior to the start of your class.
Other Requirements:
Web space to upload assignments. Minimum of 3 browsers for your operating system, recommended browsers: Firefox, Opera and either Internet Explorer 6 or Safari depending on your operating system.
Class Syllabus:
Week 1 Overview and Basic Concepts
What is CSS?
Types of Styles
Inline
Document Level
Linked or External
Order of the Cascade
Class, ID and Element Selectors
Attributes
Values
Units of Measurement
Colors
Shorthand
Pseudo Classes
Week 2 Fonts, Text Properties and Positioning
Font Families, Style, Weight and other font values
Spacing
Text-Decoration
Box Model
Margin
Padding
Borders
Size
The Box Model Differences
Between Browsers
How Doctype affects the box model.
Flow
Absolute
Relative
Floats
Week 3 & 4 Contextual Selectors & Pulling it All Together
What is a “contextual selector”?
Why and when you should use them.
menus
footer
content columns
How to write “contextual selectors”.
Media Type Styles
Creating page layouts
Final project – assigned week 3 for completion week 4
You can read more about Introduction to CSS and register for the class at Start to Web. Cost of the class is $89.95. Readers of this blog may obtain a 10% discount by using coupon code PGfriends.
I have been using WordPress for blogging for a couple of years now. Ever since taking Cricket Walker’s SEO Training Course and one of the lessons was The Benefits of Blogging. I moved the blog I had from blogger.com to my own server and installed WordPress following her tutorials. I wanted it to look more like my own creation so I started playing around with various themes and quickly learned not all of them are created equal.
My next step was working on an eBook on with my fellow MVP Tina Clarke on Launching a WordPress Blog which is offered F REE to anyone interested. It is soon to be revised to cover the latest version of WordPress 2.7.
Today I had the opportunity to watch a video produced by fellow MVP, Morten Rand-Hendriksen
Using WordPress in Alternate Configurations – My WordCamp Whistler 09 Presentation. After watching it I am again excited about WordPress and what I can do with it. Morten suggest using it more like a CMS which is the abbreviation for Content Management System. He shows you how using WordPress and Expression Web 2, you can customize your site so it looks more like a web site and less like a blog yet still functions as a blog. The site he uses in the tutorial is one he did AnnyChih.com which is fantastic. You can watch Using WordPress in Alternate Configurations – My WordCamp Whistler 09 Presentation and see for yourself how it is done. He also provides the code snippets you will need to try out his suggestions.
Welcome to Web Design+. This is, in no particular order, an amalgamation of web-standards solutions for common web development issues and problems - a way to tackle development in the cleanest, most accessible and semantic way possible. By using Web Design+, the aim is to standardise practices throughout an organization; from accessibility to hacks, Web Design+ covers the best ways to tackle a variety of dev problems.
The idea of Web Design+ is not to force techniques and methods onto developers, but to offer the best known ways of getting round problems, and generally better coding and developing standards in terms of accessibility, maintainability, usability and longevity.
Most of the tips here I have picked up along the way and have been of massive help to me - though I wish I had learn them all right away, which is why I’ve decided to collate them all for use by up-and-coming developers.
He starts with:
!DOCTYPE
The correct !DOCTYPE depends on the project. If you are starting a new project use the Strict !DOCTYPE, if you are appending or modifying an existing project use the Transitional !DOCTYPE.
Markup
The fundamental aspect of a maintainable project is well structured and semantic markup. Proper indentation, semantic ID and class names and valid markup all lead to better code.
Validating you markup is not required BUT it is certainly advisable. Valid code will eliminate the majority of broken layouts and visual discrepancies, making cross browser compatibility much simpler.
It is important to use semantic and relevant names for ID and class attributes. As a general rule, only use a class if it is likely to appear more than once, and IDs for unique items such as container <div>s.
It’s always a good idea to define a series of generic class names in each new project that will be used frequently to achieve mundane tasks.
CSS Resets are the topic of much debate. They are used to create a level playing field across different browsers in one go.
Diagnostic CSS is incredibly useful during the build phase as it allows you to visually recognise errors in your markup as you build.
It is a good idea to have a preset list of generic classes in your stylesheets to carry out repetitive styling.
Navigation
Designers and developers wrongly categorise navigation and menus as being one and the same. Navigation is a means of navigating an entire site, whether that be through the main menu, sidebar links, breadcrumbs or content links. A menu however (which is often incorrectly referred to as the ‘navigation’ or simply ‘nav’) is the main body of links often located at the top of a document, and is usually consistent throughout the whole site.
Links
Phrases and naming – Never use phrases such as ‘Click Here’ for link text. ‘Click Here’ means very little to someone using a screen reader.
Attributes - Links come with several ‘obvious’ and widely used attributes such as href=”" and title=”". The former meaning ‘hypertext reference’ and the latter being a title used to describe the link’s function/behaviour.
Fragment Identifiers – It’s possible to use IDs and anchors to link to specific parts of a page (used extensively here), these are known as fragment identifiers. This is a valid means of navigation, especially in one page websites.
Images
Embedding in a Page – If the image serves no informational/content purpose to the page it should be added using CSS as a background image. If however it is a product page, where a product is described with an accompanying image,then insert the image into your html code.
Attributes - The <img> tag comes with several specific attributes, the most important (and mandatory) of which being the alt=”…” attribute.
Divs
<div>s are the building blocks of CSS developed sites but should not be heavily overused.
Forms
He covers only the most relevant in terms of accessibility and semantics.
Type
Whenever styling text on the web, it is advisable to use ems - a relative measure defined as “A unit of measurement used in typesetting, approximately the width of the letter “m”". Font sizing on the web is extremely flexible, but anything smaller than 10px is generally too small to read comfortably.
If you are moving from using FrontPage as your web editor to Expression Web, then this is the book for you. Our EBook will help you achieve your dream of an easy maintenance, trouble free, standards compliant website. Included with the EBook are Expression queries to help you with the cleanup process and seven free templates to get up started. Techniques and tools to make the cleanup process easier will be covered. Access details for the companion web site which includes some CSS lessons and the f ree templates is included in the eBook.
Today is also the last day to obtain Expression Web 2.0 from the Microsoft online store at half price. Buy Expression Web 2 Upgrade for $49.95. Offer good for US purchases only.
I’ve noticed recently that many of the techniques used by top designers are actually quite simple. It’s how these simple elements are pieced together that makes a design brilliant. Today we’ll be looking at the first one of these highly effective, yet strikingly simple design methods with the use of CSS borders.
Borders have a lot more impact than most people realize. They can make a design look miles better with only minutes of work. The little characteristics like weight, style, and color have big effects on either drawing elements out or making them fit into the background.
The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design… directly from Woork!
The book contains articles with code sections, images, illustrations and links to the original articles on woork.You can choose to download The Woork Handbook in pdf format or read it online.
Would you like to be able to add a rounded corner box to your web page to display news items, sales items or just about anything but dread the thought of trying to create the corners with your graphics program? Never fear, help is close by.
RoundedCornr – This generator will allow you to create basic rounded corners, rounded corners with gradients, rounded corners with borders
curvyCorners – curvyCorners is a free JavaScript program that will create on-the-fly rounded corners for any HTML DIV element, that look as good as any graphically created corners.
CSS Round – Creates a text page with round corner. You can define your own options : Radius value, Round color, Background color, Text color and size of round content you want. After generating the corners, you will get the 4 corners iamges, the html and css code in a ZIP file.
Corner Shop – Once you have entered your chosen values, click Create Graphics. The four images, CSS code, and HTML code are generated that you can use to make your own rounded-corner boxes.
If you need a place to select some of the colors to use, check out Colour Lovers or Adobe Kuler. If you have a site where you are using rounded corners, send me the url of your site. I would love to give some real life examples.
Lists are a perfect way to display content and information in a very easy to scan, easy to read method. List are found on blogs to list posts, comments, and links. Lists are used on web pages within the content area as well as used as menus.
So what makes a list “good?” Is it the color? Spacing? Background? Style? In truth, it is a mixture of all of these things. Without one element, a list may suffer in terms of usability and aesthetics.
Lists are simple in their form – simply putting one excerpt or one line of text below another. If your lists become overly complicated or lose their simplicity, you will have lost the essence of the list and will lose your visitors’ interest as well. . . . .There are thousands of ways to customize a list using varying typographic elements, colors, spaces, images, icons and more.
There are plenty of examples given of various lists on various sites. The items he mentions are:
Color - can be used to help draw readers’ eyes to information that may be most relevant to them
Spacing - The effective use of white space is also a critical element of a list when it comes to legibility, scannability, and down-right good looks.
Dividers - While white space can easily double as a divider, it never hurts to have some sort of visual element to help separate items in a list.
Typography - Typographic changes can make all of the difference in the world when it comes to being able to quickly and efficiently scan a list. Using a bold or bright title helps each list item stand out in a crowd.
Icons - The final element to take in consideration when designing your lists is the inclusion of icons or images with each list item. Icons can be aesthetically appealing, add visual cues to readers, and help distinguish each list item from one another.
You can read How To Design The Perfect List in its entirety with many examples of various lists on various sites and some sample code for lists.
Genealogy Tips & Tutorials is the sister site of Genealogy Web Creations. Both were originally started to help those in the genealogy community who wanted/needed help in getting their genealogy information online. Much of the information will be of use to anyone who is wants to design and maintain their own website whether or not they are interested in genealogy.
(affiliate link.)
