PixelMill - FrontPage

Expression Web Designer - Expected Release Update

A recent article about Microsoft's Expression family of products, including Expression Interactive Designer, Expression Graphic Designer, and Expression Web Designer, created some concern about the expected release date of Expression Web Designer. In the article, they reference an announcement by Microsoft that the Expression Suite is going to be pushed back until next summer and likely 2008.

Fortunately, this announcement does not include Expression Web Designer. Our sources at Microsoft reassured us that Expression Web Designer is still scheduled to be released before the end of the year. Microsoft has not set a specific release date for Expression Web Designer (or EWD as we like to call it), but remains confident that the product is still on schedule. From my experience with the products at Mix06 in March, it's apparent that EWD is not strictly tied to Expression Interactive Designer or Expression Graphic Designer, which are more dependent on each other. There are definitely elements that interact between the three products, but EWD can really stand on its own.

Based on this information, PixelMill will continue to move forward with developing and providing education and support information about EWD and continue further development of templates for EWD.

One update we have already made to the site is the addition of product specifications that allow PixelMill Product Developers to mark if a product is compatible with Expression Web Designer. You will start to see products marked as compatible with 'EWD' and/or 'Expression-ready'. These represent that the product has been tested to work with the current beta version of Expression Web Designer. You'll also see that many of these compatible products are also marked as compatible with 'SD 2007' (SharePoint Designer 2007) and/or 'SharePoint Designer-ready,' so these products have also been tested to work in the current beta version of SharePoint Designer 2007.

We hope this clears up any concerns about the expected release date of EWD. We are committed to keeping you informed about future developments with Expression Web Designer and SharePoint Designer 2007. Watch the newsletter and our blog for more.

Keeping XHTML-Validated Templates Validated

The scenario: You purchase a template from PixelMill that is marked as XHTML 1.0 validated. You add your content. You publish your site. You run your template through the W3C validator. You get a big red bar saying that your site isn't valid XHTML. What happened?

Unfortunately, FrontPage 2003 isn't very good at keeping your code XHTML-validated. (Expressing Web Designer and SharePoint Designer 2007, in contrast, are very good at keeping your code XHTML-friendly.) So here are a few common things that you'll need to do in your pages for valid XHTML. (There may be others not listed here - if you have a specific question, post a comment!)

First step - right-click in the Code View pane and choose Apply XML Formatting Rules. What this essentially does is to add closing slashes to empty tags -- for example, your
tags will be automatically transformed to
. This will probably fix 80% of the errors generated by the HTML validator that are along the lines of &qout;end tag for ... omitted, but OMITTAG NO was specified" It will also take any uppercase HTML code and make it lowercase.
Now, go through and click on each of your images (that are actually embedded on the page -- you will see the tag in code view). Look at the HTML code. If you see anything that looks like border="0", you will have to delete it. For example -- border="0" src="image.gif" alt="My Image Here" /> will need to be changed to . This should fix all of the "there is no attribute 'border'" errors.
Sometimes FrontPage will drop the closing paragraph tag (
). If you see errors that say: "end tag for 'p' omitted, but OMITTAG NO was specified," then look at the line and column number of the start tag (the validator conveniently lists it as the next item) to track down the opening of the paragraph. Then, in the HTML code, look for the end of the paragraph and manually type in the closing tag. For example, if you find code that looks like this:
This paragraph is causing errors!, you will want to add the closing paragraph tag at the end of the paragraph, which would be before the closing div tag in this example...
This paragraph is causing errors!
.
Did you add any FrontPage Link Bars to your template? If you did, they will not validate. You should remove the link bars and put in hard-coded links instead. (You might want to put those links into an Include Page for easier editing later.)
Did you add any Flash or Swish movies? If you pasted in the typical HTML code (it's a big block of code, with and tags all over the place), then it won't validate properly. Instead, use a solution like Deconcept.com's SWFObject embed solution. We have a tutorial on PixelMill that takes you through the basic steps of how to use it: http://www.pixelmill.com/support/al0/kb101619.htm .

By following the above steps, you should be able to get most of your site fully validated. There may be some other issues if you have used various scripts or components which will need to be dealt with on a case-by-case issue.

CSS Tableless Templates

Our selection of CSS tableless templates is growing, so I thought that now would be a good time to talk about the difference between tables-based templates and tableless templates.

Tables-based layout describes the use of HTML table tags to create columns and rows for a grid layout that then allows you to have a column layout and more complex interface graphics (like rounded corners or drop shadow info boxes) than you would be able to without a tables-based layout. You can tell if you have a tables-based layout by looking at the HTML code -- if you see a lot of

, , and

tags in the code, then you have a tables-based layout. Web developers began using tables to "force" layout because of the limitations in HTML for having cool designs. (HTML is primarily a "markup language," which means that it brings meaning by labeling things as paragraphs, headers, quotes, etc., but within just HTML there is no way to describe how something should then "look.")

With the advent of cascading stylesheets (CSS) a few years ago, however, and with all the major browsers finally implementing CSS, HTML could go back to doing what it was first intended to do -- provide meaning to the content of a site. CSS handles the layout, the colors, the fonts, the interface graphics. So now, we have what we call CSS-based layout, or table-less layout -- layouts that are designed and formatted completely with a stylesheet instead of with tables. CSS-based layouts are more flexible, more powerful -- one could easily make a layout change across your entire site by editing the stylesheet, whereas with a tables-based template one would have to go through each page and edit the code (or copy and paste the content from each page into the new layout). CSS-based templates provide cleaner code without all of the

and and

tags, which helps with better search engine ranking and accessibility.

At PixelMill, we are encouraging all of our developers to begin developing more and more CSS-based layouts instead of using tables, although we know it will be a slow transition. One of the biggest factors for developers continuing to use tables-based layouts is, frankly, the terrible CSS rendering that FrontPage 2003 Design View has, especially when it comes to relative font sizes (where the fonts can resize when the user changes the text size in their browser). Customers who are used to using tables-based layouts usually have a bit of a shock when they open their first CSS template, where columns sometimes appear below other columns instead of lining up neatly in a row. It takes a bit of a shift to get used to working to a CSS template, although the benefits (cleaner code, better accessiblity and validation, see above...) far outweigh the initial frustration. (Dreamweaver MX and MX2004 users may experience some frustration as well with shifting content areas, but Dreamweaver 8 is quite solid in its rendering of CSS layouts.)

With the coming release of Expression Web Designer and SharePoint Designer 2007, CSS templates should overtake tables-based templates. EWD and SD2007 were created with powerful CSS layout in mind, and come with many tools to help refine and edit the stylesheet. The templates display perfectly in Design View. Templates made for FrontPage 2002 or 2003 work just fine in EWD and SD2007 so upgrading shouldn't be a concern.

If you are looking for cleaner code, better search engine ranking, accessibility and validation, CSS templates are worth the look.

The Future of FrontPage

Many of you have probably heard that Microsoft has decided to drop FrontPage. This announcement has resulted in a number speculation articles and blogs that seem to have created more confusion in the market. I agree that the dialogue and viewpoints are important, but often they don't tell the whole story, just as my short article will only provide a brief viewpoint from the PixelMill perspective. As always, I encourage you to do the appropriate level of research and make the analysis you feel is best for your situation.

I have been asked a number of times, "What's PixelMill going to do now that FrontPage is going away?" and "What will happen to FrontPage sites?" My answer is "Don't worry." Microsoft has not left FrontPage users high and dry. In fact, they have done everyone a big favor and produced two new products that take advantage of the editing ease of FrontPage and combined it with the more important standards being developed by the web building community. SharePoint Designer 2007 and Expression Web Designer are both solid replacements to FrontPage. SharePoint Designer has been positioned as the enterprise solution to be used with Microsoft's SharePoint solution, and Expression Web Designer has been positioned as the new "designer's" tool.

In mid-March, I attended Microsoft's Mix06 event to learn more about these upcoming tools as well as many of the other updates coming from Microsoft later this year and early next year. I could write a novel about the many different elements of this conference, but I'll let you experience some of this yourself by viewing the Mix06 keynotes available at the Mix06 site.

The one important point I took away from the event, in relation to the changes with FrontPage, is that both new products are a natural progression for FrontPage users. Beyond the ease-of-use expected from FrontPage, both products will help users move away from the proprietary elements common with FrontPage, and both will do an excellent job of helping you build your site using Cascading Style Sheets with an integrated CSS editing environment, take advantage of Web Standards (i.e., HTML 4.01 and XHTML 1.0), and help you be compliant with Accessibility issues. Even better, the introduction of the two products now gives you more choices. In later issues, we'll go into more detail about both of these new tools and the benefits they introduce.

What will PixelMill Do?

PixelMill will support and build for both SharePoint Designer 2007 and Expression Web Designer. We feel that both products will have their own set of customers and that PixelMill can offer both groups valuable solutions tailored to their choice of editor. In the coming months we will be providing more articles about these products and how many of the newer templates we offer will likely work even better in these new editors.

What about existing FrontPage sites/users?

"Don't worry!" I say. ;-) We have been working with the new SharePoint Designer 2007 beta for a couple of months. We can say with 100% confidence that this product will work with existing FrontPage sites, and it also still maintains many of the familiar FrontPage tools. We have even tested a number of our oldest products with SharePoint Designer, ones that use Themes and FrontPage navigation bars, and they all worked as expected. There were a few small nuances, but that is to be expected from any upgrade. We still have six to twelve months before final release, but we're confident that any changes to the product will not affect the ability to work with existing sites. The information I received from the Mix06 event was inconclusive about how it would work with existing FrontPage sites, but my guess is that many of the older FrontPage features that support Themes, etc. will likely not be in the product. But, don't quote me on that. Either way, Expression Web Designer appears to be a solid solution and definitely geared to the graphic designer and Visual Basic developers. As soon as possible we will follow-up with additional information in regards to existing FrontPage sites in Expression web Designer.

We're very excited about both of these new products. We like the direction that Microsoft is taking with both offerings, and we're confident that you'll be happy with PixelMill's decision to support both in our upcoming products and educational materials.

From the April 2006 - Part 2 PixelMill Newsletter

Paste Special

Scenario 1: You have a brand-new template, and you start copying your old web site content over to the new design. But then you realize that the fonts don't match -- the fonts from your old site don't match the fonts in the new site. Why not?

Scenario 2: You have a Word document with content that you want to place into your web site. So you start copying and pasting. You notice that the fonts from the Word doc are carrying over into your web site. Not only that, but when you view the HTML code, you see that there is a lot of excess, bloated code. Short of retyping all your content, how can you avoid this?

The answer to both problems: Use Edit > Paste Special > Unformatted Text.

When you paste content into FrontPage, FrontPage assumes that you want the text to be formatted fairly the same way that it was in the other application or web site. So, FrontPage will add lots of additional code to try to achieve the same formatting. This results in bloated code (i.e., longer download times) and inconsistent fonts between the original template design and your pasted text. Choosing Edit > Paste Special > Unformatted Text strips out all the excess formatting and puts JUST the text into your web page.

The one drawback to this method is that things like lists, bold, and italics will be lost. From personal experience, though, it's much easier to add those things back in than it is to try to strip out the excess formatting code.

So... use Paste Special, for cleaner, leaner pages.

Ignore the Preview button

When you open a page for editing in FrontPage 2003, the bottom bar has four buttons: Design, Split, Code, and Preview. My advice is to ignore the Preview button.

The Preview view pane is notorious for displaying certain types of sites incorrectly. Some viewers might see black or white boxes over their navigation buttons (that happens when the designer uses a transparent GIF for the button graphic). Others might see parts of their web page in the wrong place (that happens with some CSS-based layouts). Links may not work, Flash movies may not work properly. Basically, the Preview view may make you think that your site is "broken" when it's not.

So instead, get comfortable with the File > Preview in Browser command. PixelMill has support articles online to teach you how to use Preview in Browser, and how to add additional browsers to the selection list. Why waste your time in the Preview pane when you can see your site as it would actually look in a browser?

(And here's some advance information... the next Microsoft products that will replace FrontPage have gotten rid of the Preview button altogether! So you might as well be ahead of the curve and ignore it now.)

Learn how to preview your page in a browser

Learn how to add additional browsers to your preview list

Why use include pages?

Include pages are a feature of FrontPage that allow you to "include" the content of one page into other pages. What this means is that you can have repeated content on multiple pages, but only have to edit the content in one place.

Many of our FrontPage templates use include pages for areas that are common across different pages, including the logo area or header area, the copyright or footer information, and menus or submenus. But include pages aren't limited to these layout features. You can implement include pages on your own site for repeated content such as:

News items - put a news box on relevant pages
Featured specials - put featured specials on your home page, catalog page, and other relevant pages
FAQ - Put your top five FAQs in an area and display it on relevant pages

To learn how to create, insert, and edit include pages, visit PixelMill's support articles about Include Pages.

My Favorite FrontPage 2003 Feature

There are many valuable features in FrontPage 2003, but my favorite is the "Split View". This feature allows a user to see the HTML code being generated when working in the Design View. A user can also easily switch from editing in Design View to editing the raw code in Code View without leaving either.

In the above example, you can see that the highlighted HTML code in the top Code View corresponds with the selected 'Hot Topic Area' box in the bottom Design View. The sample also shows the simplest way to start Split View is by clicking the "Split" option in the bottom left of the Edit View.

Split View has been a feature of Dreamweaver for many versions, but the historical position by Microsoft has been to make difficult tasks easier by hiding code behind their user interface. As the web continues to grow and more people start building web sites, Microsft has made the appropriate decision to make it easier for FrontPage users to start to see what's under-the-hood. The idea that a web site can be built "effectively" without working in the code is just not realistic.

The reason I like split view best is because it not only makes certain tasks easier, but more importantly it helps teach users about the HTML code. Yes, any of us can pick up a book and go through hundreds of pages to learn a small subset of working with HTML. But, nothing beats applied learning. Split view is the most valuable applied learning tool for FrontPage users. It gives you the ability to see almost exactly what impact your changes create.

Beyond learning more about HTML, Split View also helps you better understand the growing uses of CSS, JavaScript, DHTML, ASP, XML, etc. that can only be seen from within the HTML Code View.

We encourage existing FrontPage 2003 users to use this feature as often as possible. If you have an earlier version of FrontPage, we highly recommend upgrading now. FrontPage 2003 is an excellent transition version for FrontPage 12, and the benefits gained by the features of FrontPage 2003 will provide a return on your investment in the upgrade.

FrontPage upgrades can be purchased at your local software store, or through web sites like Amazon or TigerDirect.

New "FrontPage Features" Blog Category

Announcing a new blog category for our FrontPage blog.

We have added a "FrontPage Features" category for our FrontPage blog. Some may wonder why we are doing this now since FrontPage 2003 has been out for going on three years and FrontPage 12 is due out by year end.

We feel it is important that PixelMill, as an industry leader in FrontPage products, push the FrontPage community to not only build better web sites, but to also prepare them for the future of web site development.

We have found many customers still using earlier versions of FrontPage, including 98, 2000, and 2002. Many of those customers don't know about the substantial changes in FrontPage from 2002 to 2003. FrontPage 2003 added a number of new features that not only allow for building better web sites, but also help push FrontPage users to become more confident in using and working with the HTML code.

More importantly, we have seen that FrontPage 12 (currently in beta) will again add more tools and features that build upon the updates in 2003. We don't want FrontPage 2000 and 2002 users to become concerned about all of these changes, but rather understand that they will only make them a better and more knowledgeable web site builder.

Over the coming year, PixelMill will be building and sharing a number of blogs, tutorials, and instructional videos that will help you better understand the beneficial enhancements provided in FrontPage 2003, and prepare you for the coming improvements in FrontPage 12.

We hope you enjoy this new category.

FrontPage Hosting Advice

If you are using Microsoft FrontPage, please, do yourself a favor; host with a company that has a specialty in running Microsoft Server and the Microsoft IIS Web Server. You will have far fewer problems publishing your web site and you will have all of the extended functionality available with FrontPage. There is good synergy generated by using a mix of Microsoft Windows Server, Microsoft IIS Web Server, .asp or .aspx (asp.net) scripting and the Access, SQL Express or MS SQL Database. If you’re adventurous and ready to break into more intense projects, Visual Studio provides a very capable coding environment for High End Jobs and there is even a New Web Development suite coming soon: Microsoft Expression.

FrontPage users will sometimes choose to host on Unix servers because they tend to be slightly less expensive, but the hassles you may experience may outweigh the dollar savings. There are FrontPage Extensions available for servers running Unix and its variations like Linux that will allow you to use the FrontPage Navigation and Publishing Features. However, you will have limited or no access to extended FrontPage functions and tools. For example: Access, MSSQL and SQL Express Database connectivity features in FrontPage will not be available on any Unix platform. Another reason to go with a Microsoft server is because most Unix system administrators do not like the FrontPage Extensions that Microsoft provides for Unix and its variants. While there are some valid security concerns with the Unix extensions, my experience has shown that there is also a general dislike on the part of many Unix system administrators for most things Microsoft. It can be difficult for you to solve FrontPage problems or deploy new functions given this attitude. If you desire to stick with a Unix/Linux server, you can adapt your FrontPage Web to not require the extensions by avoiding the FrontPage Navigation components and other server extension features, and using an FTP client to move your files to the Web server… this is best done with FrontPage 2003. Open your web site. Go to Tools > Page Options, and click the Authoring tab. Check or uncheck the boxes under "FrontPage and SharePoint technologies." This will grey out the options in FrontPage that you cannot use.

Web Editor: Microsoft FrontPage or, coming soon, the Microsoft Expression™ family:

Platform: PC

Operating System: Windows

Server Environment: Microsoft Windows Server with Microsoft IIS Web server

Dynamic Page Technology: .asp or .aspx (.NET).

Database: Microsoft Access or Microsoft SQL Server /SQL Express

Advantages: Modest learning curve and a Web Editor capable of very good design and very rapid Web site deployment. FrontPage helps you build and manage the Navigation Structure in a Web, decreasing the knowledge, skill and time required to finish a job. On the Server Side, Windows Server and IIS Web Server combine with FrontPage to offer many easy to deploy advanced features that would be hard for most people to build themselves with Dreamweaver/*nix. A great deal of inexpensive or free .asp and .aspx code is available on line. Access Database Engine runs as a part of Windows Web Server and allows for easy Database Integration with FrontPage:

Disadvantages: FrontPage does not provide the design and coding flexibility that Dreamweaver currently does, particularly when a professional is at the helm. Server Side: Commercial Software and Tools for the Windows Platform are almost always more expensive than the world of open source. Not as many hosting companies have a Windows Web Server specialty. MSSQL Database or SharePoint Hosting is an added cost. Performance, Stability and Security are not up to the standards of well run Unix hosting in most cases.

Conclusion: When you are operating under cost constraints, limited technological resources and short deadlines the FrontPage/Windows Web Server combination makes a lot of sense. If you are small to mid size business without an IT staff and would like to quickly and economically deploy a highly functional and attractive Web presence, your Web development goals will best be served with a combination of FrontPage/ Windows Web Server / ASP / Java and Access Database, SQL Express or MSSQL.

Software Links

Web Editor and Design

- Microsoft FrontPage 2003 running on Windows XP on the PC Platform
- Microsoft Visual Studio
- Microsoft Expression "Quartz Web Designer"

Server Side Software

Operating Systems: Microsoft Windows Server

Web Server: Microsoft Windows IIS Web Server

Dynamic Page Technology:
- ASP
- ASPX or ASP.NET

Databases:
- Microsoft Access
- Microsoft SQL Server 2005 Express Edition
- Microsoft SQL Server 2005

Note: FrontPage Server Configuration Options and Features

Links to More Information:

- FrontPage Server Issues Article

- FrontPage Server Extensions Article

- Hosting info from W3 Schools

- Complete Guide To Hosting from SitePoint: Part 1 Part2

- Creating FrontPage Sites without Extensions

- Overview of FrontPage Server Extensions 2002 from Microsoft

Creating a New Page

We often receive questions from customers about adding a page to their site. Yes, FrontPage makes it simple to create a new blank page, File...New...Page. But, there are a couple of different ways to add a page when you're dealing with a FrontPage template.

In years past, many of the templates included a page template that took advantage of the 'page template' features in FrontPage. This would allow a template user to select File...New...Page and they would select the corresponding page template for their site. This was slick, but we quickly found that it was not an ideal solution for the customer or the developer.

There is a better way......

It's an old concept, but it's simple, easy to do, and saves a lot of headaches. File...Save As, Yep, that's right. ;-) It's our recommendation to open the page you wish to use as the layout for your new page, select File...Save As, and name the new file to the desired name of the page. Then, you would simply modify the content on the new page to meet your needs. Don't forget to change the page title and any meta tags.

You will find that this process is much easier to use. Plus, it ensures that your new page carries over any CSS, Includes, etc.

The following are a few links from our support area that may help further:

Creating a New Page by Saving an Existing Page
Creating a Page With a Page Template - Keep in mind, most of our newer products do not use 'page templates'.
Creating Web Pages in FrontPage

New FrontPage blog

Welcome to the new FrontPage blog from PixelMill.

In our growing effort to provide PixelMill customers and the web building community valuable support resources, we have started a series of blogs focused on different topics, web editors, and solutions. This FrontPage blog will be focused on News, Support, and Tutorials specific to Microsoft FrontPage. We hope you enjoy and find value in our posts. Please don't hesitate to provide feedback and comments to help us make this a better resource for you.

Stay tuned...we will be adding a few quick blogs over the next couple days to get the ball rolling.

If you would like to see any specific posts, please provide feedback using the comment tool.

Thank you for your continued support and participation.

Best Regards,
Jason Reckers
PixelMill