Expression Web Tips

How to adjust the spacing of the
paragraph tag using CSS

The tag defines a paragraph. The p element automatically creates some space before and after itself. The space is automatically applied by the browser, or you can specify it in a style sheet. Suppose you want to custom adjust the automatic spacing added around a paragraph of text in HTML. You can easily do that by creating style rules for the p tag itself or create a class with style rules to apply to the tag.

Example:

This style rule p { margin-bottom: 1em; margin-top: 1em; } added to your external style sheet, would add a top and bottom margin of 1em to ALL of your paragraphs.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus accumsan dolor ac orci? Pellentesque vitae libero in lacus tincidunt ultricies! Nam eleifend ultricies dui! Quisque mattis tempus ligula. Nulla non diam in arcu adipiscing porttitor. Nulla libero mi, suscipit id, semper eu, lobortis non, metus! Sed dui pede, consectetuer vitae, adipiscing et, posuere quis, nulla. Mauris ornare semper justo. Morbi at libero ut justo ultrices dignissim? Cras nunc. Sed metus quam, consequat vel, euismod et, pulvinar ut, sem. Vestibulum euismod massa posuere massa.

Example:

This style rule p { margin: 50px; } would add a top, right, bottom, and left, margin of 50px to ALL of your paragraphs.

Quisque imperdiet turpis vitae metus. Vivamus consectetuer mauris non massa. In pretium, turpis et adipiscing elementum, ligula ipsum elementum risus, eget rhoncus nunc orci vel mi. Cras nunc. In ac eros nec tellus blandit suscipit. Sed aliquet luctus lectus. Nunc eleifend iaculis arcu. Phasellus mollis elementum pede. Integer et quam eu velit interdum laoreet. Sed sapien dolor, gravida non, congue eget, consequat sed, enim. Sed bibendum orci in nisl. Suspendisse elit? Sed ut magna. In dignissim. Nulla ornare pharetra libero. Praesent nunc magna, placerat congue, pretium et, ultricies sit amet, elit? Morbi enim nisl, sagittis ut, lobortis eget, blandit tincidunt, urna. In rutrum, diam vel dignissim consectetuer, libero pede pulvinar tortor; semper tincidunt massa nibh quis ipsum. Donec id nisl nec nisl varius porta. Cras ac purus.

If you do not want the style rules to apply to all paragraphs within your site, then create a class and apply the class to the tag.

Example:

p.smspace {margin: 2px 0px}

Paragraph of text would go here.

Experiment with the various styles you create to get the look you want.

Expression Web 4 Step by Step Videos

Chris Leeds is the author of the newly published book, Microsoft Expression Web 4 Step by Step (Step By Step (Microsoft)) He also offers a companion website for the book on which he has posted a series of FREE videos Expression Web 4 Step by Step Videos. I have only watched the first three chapters so far but my first impression is very positive. Some of the chapters are for more advanced users but are well worth watching.

NOTE: The videos do require Silverlight to be installed. I have tested this in the five browsers installed on my computer – IE8, Firefox, Opera, Google Chrome, and Safari for Windows and it plays fine.

Chris says of the video series:

This video series is an informal collection of tips, tricks, and techniques based on the chapter exercises in Expression Web 4 Step by Step. While the videos are presented on a chapter by chapter basis, they’re not a formal video training course. I’d like feedback on the videos from readers/viewers because I would like to create a formal video training course based on reader recommendations.

The Expression Web 4 Step by Step Videos series includes the following:

Introduction – About the video series. Time: about 2 minutes
Chapter 1 – Understanding How Expression Web Works. Time: about 16 minutes
Chapter 2 – Capitalizing on Expression Web 4 Functionality. Time: about 16 minutes
Chapter 3 – Capitalizing on the Template Options in Expression Web 4. Time: about 13 minutes
Chapter 4 – It’s All About Content. Time: about 22 minutes
Chapter 5 – Understanding Validity and Accessibility. Time: about 8 minutes
Chapter 6 – Create a Web Site from Scratch. Time: about 37 minutes
Chapter 7 – Adding Client-Side Functionality. Time: about 20 minutes
Chapter 8 - Adding Functionality with JQuery and PHP. Time: about 10 minutes
Chapter 9 – Adding Functionality with ASP.NET and AJAX. Time: about 18 minutes
Chapter 10 – Managing and Publishing your work. Time: about 16 minutes

So head on over to Expression Web 4 Step by Step Videos and watch the video series. Make sure to bookmark the site so you can refer to it again and again.

About the Author

Chris Leeds is a Web enthusiast who has been a Microsoft Most Valuable Professional (MVP) for Microsoft Office FrontPage and then Expression Web for eight years. He is also the developer of a software product called ContentSeed ( a Content Management System) with which users can create Web pages that can be edited and managed by using only a browser.

Chris was a technical reviewer for FrontPage 2003 (The Missing Manual), the author of Microsoft Expression Web Step by Step, Microsoft Expression Web 2 Step by Step (the previous version of this book), co-author for Microsoft Expression Blend 4 Step by Step, has developed several tutorials about FrontPage, and hopes to continue helping the user community through the Web site www.ExpressionWebStepByStep.com, from which he’ll try to answer questions regarding the book and Microsoft Expression products.

HTML 5 and Expression Web

*** IMPORTANT UPDATE ***

This Add-in is now superseded by Expression Web 4 SP1! Service Pack 1 adds many more features than just HTML 5 intellisense, including support for the CSS3 draft specification! If you’ve downloaded this HTML 5 Add-In the past, it’s no longer needed and can be be removed.

*************

If you wish to use the HTML 5 doctype in Expression Web AND have the Intellisense help for HTML 5 available, you will need to install the HTML5 Schema Configuration Add-In for Expression Web available for download in the Microsoft Expression Gallery. The HTML5 Schema Configuration Add-In for Expression Web enables the new HTML5 schema to check your markup for errors and provide IntelliSense for HTML5 tags, attributes and values in code view.

Download HTML5 Schema Configuration Add-In for Expression Web from the Gallery. Remember where you saved the file on your computer. Follow these instructions for Installing Expression Web 4 Add-ins.

If the add-in is correctly installed, it will appear in the Manage Add-In dialog, and the Standard toolbar will display a new “HTML5” button.

Manage Add-ins Dialog Box.

Standard Toobar with HTML5 button.

Using the HTML5 Schema Configuration Add-In

Before you can use the HTML5 Schema, you will need to configure it.

To do this you will need to restart Expression Web 4 with administrative privileges (Right-Click the EW4 program icon and select“Run as Administrator”).
Click the HTML5 button on the standard toolbar (pictured above). The Configure HTML 5 Schema dialog box allows you to enable or disable the new HTML5 schema.
Enable HTML5 Schema.
Click the Enable HTML 5 button to update the Expression Web HTML 5 schemas. Close the dialog box.
Restart Expression Web 4. Click the HTML5 button on the standard toolbar and you will see the schemas are now enabled.
HTML5 schema has been configured.
To change your page editor options choose Tools > Page Editor Options. On the Authoring tab, set both the Document Type Declaration option and Secondary Schema options to HTML5.
Page Editor Options for HTML5 schemas.

Once you have changed the Page Editor options Authoring tab to reflect the HTML5 schemas, whenever you create a new web page in Expression Web, the new page contains the HTML5 doctype which is:

<!DOCTYPE html>

Now, when you edit an HTML5 document in code view, Expression Web 4 now provides IntelliSense for HTML 5 elements, attributes and their values.

There are some known issues with the add-in which you can read about on the MSDN Blog post Add HTML5 support to Expression Web 4! and scroll down to “Known Issues.”

Review: Expression Web 4 LiveLessons by Morten Rand-Hendriksen

I’ve just spent a part of the last three days watching Morten Rand-Henriksen’s latest offering on Expression Web 4, his LiveLessons Video Training. The video is shipped on one DVD with over six hours of materials. I preordered Microsoft Expression Web 4 LiveLessons (Video Training) when it was first offered. The price then and now (on sale) is $20.00 and is well worth every penny.

Morten presents each section and lesson so that it is clear and understandable. There is sample code included for some of the lessons. He does not cover setting up the program before you start to use Expression Web 4 so you may wish to download Tina Clarke’s FREE Setting Up Expression Web 4 EBook for instructions on how to do that first.

NOTE: You can easily pause the video and go back and repeat something if you do not understand it the first time around. I would encourage you to watch the entire series of lessons before you start working on your site.

The beginning of each part gives an overview of the Learning Objectives and then proceeds to a series of Lessons.

Part One: Microsoft Expression Web 4 Basics consists of six separate lessons and covers the layout and customization of the program itself, panel and toolbars, using the folder list and site view as well as how Expression Web interacts with the “outside world.” Morten takes you on a brief tour of the final project he will be using in the lessons and show you some of the other sites he has built in Expression Web. He discusses the five browsers you MUST have installed on your computer to thoroughly test your site before making it available for the entire world to see and how to download those browsers and get them working with Expression Web. Next he covers how to create a new site and how Expression Web handles site management and the whys and wherefores of working inside Expression Web versus working in Windows. Finally you will create and preview your first web page(s). You will learn how to work with text in Design View, how to style and format the text, and how to import text from MS Word and other sources. Pay particular attention here as Word can add quite a bit of unnecessary code to your web pages. Next you will learn how to import pages into your site, how to work with hyperlinks bother within your site and the outside world. The last lesson in Part One covers Page Properties and Meta Tags which you will use on all of your pages. Remember, if you do not understand something, you can rewind and watch that section again.

Part 2: Working with Images in Microsoft Expression Web 4 consists of three separate lessons and will teach you how to import your images into Expression Web the correct way, how to place the images on your page and how to use the Picture Properties tool bar. While I normally work with images using a graphic editor so they are ready to use on my pages, Morten gives some good tips for you to use. Throughout the tutorials, also he gives some good tips on best practices on working with and organizing your site. You will also learn how to work with external images – those not actually located within your website. Also covered is how to use the Pictures Toolbar, creating thumbnails and adding image hotspots. Hotspots are not s feature I have really worked with but I want to give it a try on a couple of my sites.

Part 3: HTML and Code View in Microsoft Expression Web 4 consists of two lessons and covers the basics of HTML code – HTML tags and syntax and how Expression Web can help you learn HTML by working in Split View. His explanation was easy to understand but is not an in-depth discussion of HTML code. For this you will need to do some research on your own using the resources available And finally, you will learn how to use the Code View Toolbar which is one tool I have not done much with but will certainly be doing more with it in the future after the tricks Morten shows you. And lastly, understanding the Quick Tag Selector, Intellisense, and a brief look at the Tag Properties panel.

Part 4: Cascading Style Sheets (CSS) Basics in Microsoft Expression Web 4 consists of four lessons and is just the beginning of Morten’s discussion and tutorials on CSS. Here you will get an introduction to using CSS as part of your website and some tips on best practices you can follow. He also covers using the CSS tools within Expression Web and gives you practical examples for using CSS. One lesson is an excellent discussion of the CSS Reset, what it is and how to use it. Wish I had this when I first started. Another lesson is an excellent discussion on the CSS box model including padding, margins, borders and floats. You really need to understand this to work with CSS. The last lesson in this section allows you to work with practical examples to style your project.

Part 5: Advanced Cascading Style Sheets (CSS) in Microsoft Expression Web 4 consists of three lessons and covers creating actual layouts using the boxes model and then adding the styling for the layouts. Morten also covers positioning and CSS inheritance in this series of lessons. You really need to understand these concepts to create your layouts.

Part 6: Cascading Style Sheets (CSS) Menus in Microsoft Expression Web 4 consists of three lessons and covers adding menus to your layouts, both vertical, horizontal, and horizontal with dropdowns. He also touches on using some of the enhancements offered with CSS3 but allows them to gracefully degrade for older browsers. For both the horizontal menus he demonstrates, he uses absolute positioning which to me is more advanced and if not understood, can break the menu.

Part 7: Dynamic Web Templates and Microsoft Expression Web 4 consists of two lessons and covers the creation and use of Dynamic Web Templates. He also discusses using a DWT for site management. When I watched this section fo the video, I thought he had left something out which he did and I even fired off an email to tell him so. Alas, as I watched the final part of the video series, I realized why it was not included. You will see to if you watch the series.

Part 8: Beyond the Basics of Microsoft Expression Web 4 consists of four lessons and covers inserting Flash and other media content into your pages. He also answered my question on why I could not get me pages to validate when using Flash so that I will no longer worry so much about it. He cover browser testing your site and using both Snapshot and SuperPreview. Finally, he covers using the Search Engine Optimization features of Expression Web 4 and publishing your site to the Web. I picked up some good tips here.

All in all I found it an excellent resource in learning Expression Web even though I had been using the program from when it was first released as a Beta product. I would highly recommend Microsoft Expression Web 4 LiveLessons (Video Training). I just checked (12-07-2010) and it is still available for $20. with free shipping.

Great job Morten!!

Project Seven CSS Express Menus in Expression Web

One of my favorite menus to use is the Project Seven CSS Express Menus. I have quite often recommended this menu it if you need a dropdown menu and as an alternate to some of the commercial Expression Web add-ins. You can see an example of its use on my free Springtime Dynamic Web Template.

Cheryl Wise has posted a tutorial on her by-expression blog Project Seven CSS Express Menus in Expression Web. That same post also includes how to make changes to the graphics that are part of the menu.