";s:4:"date";b:0;s:3:"url";s:153:"http://zde.am.affinity.com/www/delivery/ck.php?oaparams=2__bannerid=6145__zoneid=0__log=yes__cb=de05ea73fe__maxdest=http://www.ironspeed.com/DevShed.aspx";s:4:"type";s:12:"dev_standard";s:9:"relevancy";d:7.96560340000000000060254023992456495761871337890625;}i:1;a:5:{s:5:"title";s:242:"WebDesign & Development Online Learn HTML! Get your Bachelor's Degree in WebDesign in 21 Months.
";s:4:"date";b:0;s:3:"url";s:294:"http://zde.am.affinity.com/www/delivery/ck.php?oaparams=2__bannerid=5941__zoneid=0__log=yes__cb=f6ebca6fhttp://zde.am.affinity.com/www/delivery/ck.php?oaparams=2__bannerid=5941__zoneid=0__log=yes__cb=effc7a3dfb__maxdest=http://www.fullsail.edu/index.cfm?fa=landing.WDDO_1a&mnc=447&kw=Code Face-";s:4:"type";s:12:"dev_standard";s:9:"relevancy";d:7.95301499999999972345676724216900765895843505859375;}}}}
2007-02-28
Article Rating:
/ 3
| Table of Contents: |
| Rate This Article: | Add This Article To: |
|
( Page 1 of 2 )
Microsoft is now shipping their new web development tool, Expression Web. How good is it? What is it like to use? Professional web developer Jennifer Wood gives us her initial impressions.
There was a time when people who created web pages used either Front Page or Dreamweaver. Users who liked the familiarity of a Microsoft interface and didn't want to mess with the HTML code usually preferred Front Page while people who dreamed in HTML and wanted final control over the code were Dreamweaver junkies. I know people who started out with Front Page and moved to Dreamweaver once they understood the code better. But now Microsoft probably won't lose customers to Dreamweaver, thanks to their new product, Expression Web, which I take a look at here.
First impressions
My first impression when starting Expression Web was that it was extremely easy and intuitive to use. At the very top are a bunch of buttons that will look familiar to users of Word or most any Microsoft product – the standard Save, Open, and New buttons, and various formatting buttons such as Bold, Italic and paragraph justification. This should give web page newbies the feeling of "This is easy…just like creating documents in Word."
In the center panes, you have the page that you're working on. Like most editors, you can switch between Design view, Code view, or Split view. No matter which view you're in, you can click anywhere in the document and a diagram of where you are tag-wise will show up in the top rail. For example, when I click on a table cell with the CSS class "content," the top rail has <body><table><tr><td.content>. This lets me see at a glance how far into a nested table I am and what style is being used in the part of the document I'm editing. Also, if you click on something in design view then switch to code view, your cursor will be in the part of the document you were on in design view; much faster than hunting through code for the part of the document you need to edit.
On the right panes, you have a Toolbox that has some frequently-used tags. Click on one and it'll be placed in your document. Below the Toolbox is a box containing an Apply styles tab and a Manage styles tab. The Apply styles tab gives you a list of styles defined on the attached stylesheet, but the cool part is there's a slight preview of the styles. For instance, if the class "submenu" is dark blue text on a light blue background, the panel shows some sample text in dark blue on a light blue background. If a style is defined as having a background image, the styles area shows a bit of the background image. Similarly, the Manage styles tab has a list of all the styles on the stylesheet and a Selected Style Preview area where you can see what a style will look like; it even shows what the font family looks like. No more trying to remember how a particular style looked; you can see at a glance what applying a style will do and that will save you a lot of work.
Templates and Layout
Expression's template support is great, both for pre-built templates and the ability to create your own. In Expression Web, a template is a pre-built HTML page that you can base a web site off of. For instance, if you build a template with a custom header and navigation on the left side then attach it to a website, every page in the website that's based on the template will have the same header and navigation.
Expression Web has some nice-looking web site templates making it really easy for a novice to create a new web site. Simply click File⇒New⇒Web Site. A dialog box will pop up with choices for General (for a general blank web page) or Templates. When you click Templates you can select the template you like best. Finally, specify the folder where you'd like your website created on your hard drive, click OK and Bam! watch Expression Web create the pages for your site. Of course, then you can go in and edit the pages to customize them.
But of course you won't want your site to be based off of a pre-built template forever. (If everyone used the pre-built templates and kept them, eventually people might be able to look at your site and say "Oh, that was built from an Expression Web template," which was certainly the case with FrontPage sites. Also, the Internet would be a very boring place if all the sites looked alike.) Fortunately Expression Web has the tools to help you build your own original templates as well.
To start off, Expression Web supports dynamic web templates. If you create a template that the rest of your site is based off of, it makes maintenance a lot easier in the long run. For instance, if you make every page in a 10 page site have the same navigation, you can place the navigation content in the template itself. Then if you add another page to the site, you can add the link for the new page to the template, and Expression Web will automatically update every page that uses that template, saving you a lot of work.
One nice feature Microsoft has been really marketing is that Expression Web has tools that make customizing the overall look of the site easier. For instance, there is a selection of basic table layouts which make it easy to design a page, even if you don't know a lot about design. You can look at it and visualize things such as "a logo in this space, a header beside it, navigation down the left and content on the right side of the page." If you're a novice, you can simply type in the content in the appropriate areas. If you're an expert, it's a breeze to take that start and go in and modify the code to your specifications, such as specifying the width of the table cell containing the navigation or making a table cell a different background color.
Do you believe table layouts are passe and css layouts are the way to go? Expression has something for you too: If you click File⇒New⇒Page then select CSS Layouts in the dialog box that opens, you'll find a nice selection of layouts using DIV tags instead of TABLE tags to help you achieve the look you like. From there, you can type the content into the appropriate DIV areas, then click on the CSS Properties tab to provide formatting. Just like the table layouts, if you're no stranger to HTML you can modify the code so the page looks precisely the way you want it to.
If you want to do something special, Expression Web even has some built-in page transitions. Click Format⇒Page Transition and choose the variables for the event in the dialog that pops up. You can choose from Page Enter, Page Exit, Site Enter or Site Exit, duration (how long you want the effect to take place) and the effect. You have a lot of great options, from wipes to checkerboard effects to simple fades. It's a great way to add a little pizzaz to your site without having to mess with Flash or JavaScript.
 |
|
