Guest: Wayne Smith - Microsoft Expression Web

Wayne Smith - Microsoft Expression Web
Okay, so welcome to this little crush through Expression Web. My name is Wayne Smith. I'm the Product Manager for Expression Web, and I'm going to show you in five or six minutes all the sort of top features I can possibly think of for the tool. It's a Web Design Tool, it's based around standards and we've got some great support for things like Cascading Style Sheets, XML, XSLT; all of these cool things that people have wanted to do on the web these days using modern standards. There's loads to show you, download the beta release and play with it yourself, but I'm going to give a little bit of a guided tour here around that. I've got a demo site running within my interface here. What I want to do first of all though is point out, this is a tool aimed at designers, it's all about doing software designers, so there's all the things that you should expect from a designed surface all the (Inaudible) come rip off and document in any order you want them and then you can put them all back together again so, you can keep your interface nice and clean.

Firstly, I want to talk about its standards here. Let me just pull up a page and this is an ASP.NET site that we've actually created here, it's a demo site. And I'm going to pull up a master page, which just basically has a lot of content in it and you can see, there is the code view and if flip across into design view, I should expect the thing nicely renders. This is like the master page of the site, so we go around the edges here all the sort of content with the site and all the main content for each individual page you go in displays here. I want to talk about the standards though, it is the standards that really makes tall stand out.

You may not be able to see but down the bottom here, we're actually sharing here, that we're using them rendering this page in standards mode, that's because of the doc type. There is a lot of stuff in here to allow you to work with the standard that you want to work with. So, if you're going to (Inaudible) options here and into my altering tab in particular, you can see here a range of standards, I can use to base my entire sites around. This is what we sort of key on within the program to give you all the things like IntelliSense support, all the error reporting etcetera and indeed, how the designed surface itself renders, because if I nip into the code for a second and take off this doc type, this thing that actually tells any web browser, what it is we're working with? If I get rid of that and come back to Design View again, things have moved around, things aren't rendering quite the same because we are now rendering what's called Quirks Mode.

So, within this mode, we're basically rendering in how things were rendered in old fashioned browsers, specifically around IE5 and it gives the person, who is using that from a design sense, a real faithful representation of what they're going to dealing with within their browser, when the finally came to publish their page. So, the standard support is very, very important and if I flip over into code view now, somewhere around here, I don't know actually have any errors on the page because it's actually been built very, very nicely but, if you are importing a Legacy Site then this is one of things that we have to deal with the fact that not all the sites are created from scratch, some sites are all Legacy sites, and if you bring Legacy sites in and you look at them in Quirks Mode, you get all kind of errors popping up in red to tell you that actually this doesn't fall within the standard.

Okay, so that's a little look at the actually sort of overlying page around the standards, let's look at the CSS support within the tool. So, we know instead of show you how this thing was put together. I'm going to repair that little change I did, just by pasting that doc type back in the top of the document. So, here we are now and there we are nicely back in standards mode again and all the things have been rendered properly. So, it's just been put together with a whole range of Cascading Style Sheets. As I click around the interface, you can see on the right-hand side here, I've got a huge long list of all the rules that are being applied to this document, that are coming through from this external document here, fabricam.css. This is an external style sheet and one of things that we are really (Inaudible) on, let me just rip this and face off and make it a little bit bigger, so you can see it.

This is all the inner sides of how the design and this site works and this is one of things it's very difficult for people to deal within this age. We've got great support for altering the content and if you see the different colored dots here to identify, what are elements? What are IDs? What are classes? You can see very visually from here, what's the circle around each dot tells you that's being used on the page that you're working on, and to actually affect the Cascade, the order in which these rules are applied on the page, we can just pick the things up and drag them around to re-alter them, I'm going to sort of go into the source code and find the roller move it up and down, I can just do it from this very nice dialogue box here, so now we've to really see, what those styles are? And how they are actually affecting elements within the document again that's another thing that I've got a lot of support to actually help me here. If I click on particular elements and come across to the left-hand side here, in my CSS Properties, I can see all of the rules that applied to each individual element that I've got selected and that helps me to see what's going on within the document and it helps me to actually focus on what rules are applying to each individual elements?

Okay, let's, move on and talk a little bit about the support for XML and XML within the design surface. I'm going to close down my master page now and create a new page from that master, so this is the technique we use to actually keep the design of the site linked into one master page, it's an ASP.NET technology. I'm going to pull this master out, like so, here it is, fabrikam.master and I'm building a brand new page based on that. So, now you can see it looks the same, but around the edges here, I've got a little 'no go' symbol to tell me, I can't actually make any changes to this because that's part of the actual -- the master file itself. I'm going to save this quickly within my site and coming to this area here, my content area and I'm going to unlock that and make it empty for people to drag and drop and deal with content. So, how do we do with XML? Well, XML is a bit of a technology, how does it translate from XML through to the web? That's using a technology called XSLT and that can be Rocket Science, so the thing we said a little bit earlier on.

So, here I'm going to go into a list of products, this been represented as an XML file and remember XML is just data, it could be an RSS feed, it could be any kind of feed, it's just XML data. I'm going to drag that on to the design surface and straighter way that content is rendered as a table on the design surface. I've got some simple tools that I can use to go through into sortings, let me just do a quick sort on the 'Name' field for instance, and they're already ordered in a different way and all of these design decisions I'm making, I can go ahead and style it add colors and different fonts etcetera. What I'm dealing with here is an underlying technology, I'm creating a file alongside this one. If I go to 'Save,' there you can see it saying, "Hang on a second, you've got an XSL file embedded within this document here." Let's save that as well and now all the changes I've made to the design surface have been written away to this translation document. The designers don't want to deal with, they just want to deal with things visually.

So, we can go on keep making changes and of course, if you already have an XSL document, you can just simply pull that up, drag it on to the design surface and now, we've completely changed the overall look and feel of that data by linking into that style and it continues to work. Let me show you another quick feature here, visual control over the CSS box model. You can see around here over this area and I've got this graphic, it's pulled in the text there but it's wrapping underneath there and you can see underneath here, I've got a little shaded area. This is visually showing me as a designer, the visual margins and padding of the CSS box model. I can view it visually and I can also edit it. So, I can pull that, handled down and drag it underneath here to extend the box model down and that pushes all the text to right. And remember all this stuff that I'm doing very visually is being written back in code to this XXL sheet, if I pull Open here for a second it's all rocket science to me, I'm a designer, I don't care but this stuff is what translates the XML documents into what's visible through the web.

So, of course, you've been through, you doing all your design work, how directly then deploy it to the web? Well, the first thing you should of course is one, one of the many range of reports, reports around Accessibility, does your site work with Section 508, WCAG 1 or 2. Compatibility Reports for all browsers and more importantly of course CSS Reports. Yes, if you are using all the built-in Visual Tools, you shouldn't have any CSS errors but people muck up out with code, they get into code where they change things. So, you've got a way of going through checking for Errors and checking for Usage.

It may well be that you'll have lots of unused rules in your page, that you want to get rid of, you can use the usage report to find that stuff to really lean mean the document for you to upload it. And the final point really is, when we actually come through to deploying the website, we've got a range of tools that come under the heading of HTML optimization and using this particular tool here, I can go through, check all these boxes here and as we flow through the mechanism like FTP to upload to the site, all of the comments, all the white space can be stripped out, so what actually gets deployed on the server is very tight, very small and obviously then very efficient to download. So, that in about five minutes time here's all the top features for Expression Web. I hope you like, what you've seen and I do hope you'll go and download the Beta and the trial version when it comes because there's lots of great stuff we'd love you to see.

Copyright ©2006 PodTech.net. All rights reserved. Privacy policy