Expression Web 4 LiveLessons lesson files

FAQ, LiveLessons | No Comments

Microsoft Expression Web 4 LiveLessonsIt has come to my attention that there are some missing lesson files in the DVD version of my Microsoft Expression Web 4 LiveLessons video training series. Though these files are not of vital importance to the learning experience we are working to resolve this issue immediately.

The lesson files, including the ones missing from the DVD, are all available as a free download directly from the QUE Publishing website (http://www.quepublishing.com/title/0789747227).

To get access to the files click the “Register your product – get bonus material or coupon” link. I will also upload the lesson file batch to this site later today.

For reference, the files missing from the DVD are:

Lesson 7: One generic image
Lesson 21: A cleaned copy of default.html, styles.css and a 50% transparent PNG image

None of these files are vital for the completion of the course but are provided as helping tools.

New Expression Web 4 Book and LiveLessons on the way

News | No Comments

Over the summer I’ve been working on a rewrite of my Sams book for the release of Expression Web 4. In addition I’ve created a LiveLessons video series on the same topic. The book and new video series are great compliments to each other as both cover items that are not covered in the other. In particular the video series covers some simple CSS3 tricks as well as more advanced use of drop-down menus while the book delves deeper into the different functions of the application itself. Both are slated for release in October.

Sams Teach Yourself Microsoft Expression 4 in 24 Hours

Earlier this summer Microsoft released version 4 of Expression Studio. The new version brough major upgrades to Expression Web and as a result my hugely popular book Sams Teach Yourself Microsoft Expression Web 4 in 24 Hours had to be updated. That meant I had to go through every nook and cranny of the new version to find all the new goodies, come up with new examples to show them off and then rewrite whole chapters to reflect these changes. It may come as a surprise, but revising a book like this is almost as much work as writing it from scratch. Which means once v5 comes out I am likely to do a complete rewrite. But that’s a different story.

The new book, scheduled to be released end of October, features updated and extended examples, new features, removal of deprecated features. New content worth noting is an extended chapter on the new and improved Expression Web SuperPreview which now includes full support for IE6, 7, 8 (compatibility mode) and 8 as well as a new feature called Remote Browser Testing that allows for testing on external browsers like Safari for Mac and an entire chapter on the new Search Engine Optimization (SEO) Checker tool.

Expression Studio 4 and Expression Web 4 comes as a free upgrade if you already own version 3. That means if you have version 3 you should upgrade right away. And if you alredy have my version 3 book you should get the new version once it comes out. I’m not saying this because I want to sell more books but because there are some new features in there that are important to understand and get the full use out of.

Microsoft Expression Web 4 LiveLessons (Video Training)

In addition to the book I’ve also created a colossal 27 lesson video series clocking in at around 5 hourscalled Microsoft Expression Web 4 LiveLessons (Video Training) for those of you who either don’t want to read a book or who want more hands-on training using Expression Web. The LiveLessons series features an entirely new example project based on the 12×12 Vancouver Photo Marathon website and provides a best-practice model for how to create professional, rock solid and stylish websites using standards-based HTML and CSS. The LiveLessons series is complementary to the Sams book so there are things that are covered in the videos that are not covered in the book and vice versa. Thus even though you’ll get a lot out of each item alone you’ll get a much better and more in-depth understanding by getting them both. Again, this is not a sales pitch – I’m being honest here. The combo really is the better deal.

The video series will be available on DVD early October and I believe it will also be available for download or online viewing on InformIT’s website (tba).

How far you can push the MyKipple Project?

Tips, WordPress | No Comments

By Land, Sea or Air

Since the first book came out I’ve gotten a lot of emails from readers asking me how far it’s possible to go with the MyKipple project and what they learn from the book. My answer has always been the same: With the knowledge you get from the book you should be able to do pretty much anything you want (within reason of course). The reason for such an evasive answer is that more often than not it isn’t the skill but the creativity or vision that is lacking when people get stuck. And trust me, I get stuck all the time.

With the new book I’ve created a new and better example project and once again I’ve gotten plenty of emails asking me how you can “take the design further” and how far it can be pushed. Instead of answering in words I took the end project from the book, created new graphics and turned it into a WordPress theme to be used on my new travel blog called ByLandSeaOrAir.com.

This site was built on top of the MyKipple project. For the most part all I’ve done is switch out the background graphics, messed around with the fonts and changed the CSS box sizes. The new elements are all based on the same techniques used throughout the book and should be easy for any reader to descipher. If you open the site in Expression Web 3 you’ll see that you recognize both the layout elements and the styling that’s been done in the site.

So, to answer the question: There really is no limit to how far you can push the MyKipple project except your own immagination. So rather than looking for boundries, go forward assuming there are none and do whatever you want.

Common Question: Importing Hour 2 Lesson files

FAQ | No Comments

I’ve had three different readers ask me this question so I figure it’s worth going over one more time to avoid any further confusion. So here is a complete run-through of how to download, set up and import the finished myKipple site as in hour 2 of the book:

  1. Download the lesson files for Hour 2 by clicking here or going to the dedicated lesson files page.
  2. Extract the contents of the hour2lessonfiles zip archive to a location on your computer. One way to do this is to simply drag-and-drop the “hour 2 lesson files” folder out of the archive and onto your desktop. In the end you should have a regular folder named “hour 2 lesson files” somewhere on your computer.
  3. In Expression Web 3 click Site on the main menu and select General -> Import Site Wizard.
  4. Under Location in the same dialog set the location of your site (for example C:\Documents\My Web Sites\myKippleFinal\) and click OK. This opens the Import Site Wizard dialog.
  5. Under Connection Type select File System. Under Location use the Browse button to navigate to the MyKippleFinal folder found under the hour 2 lesson files folder you extracted in step 2. In my case the location path looks like this: C:\Users\Morten\Desktop\hour 2 lesson files\MyKippleFinal. Click Next.
  6. The second dialog asks where you want to create your local copy. You already defined this in the earlier dialog and the Add to current site box should already be checked. Click Next to continue.
  7. The dialog should now say “Congratulations!” and the green bar be at 100%. If so, click Finish to close the dialog.
  8. Now you should have the Site View open with a blank slate on the left and a series of files and folders just like in the figures in the book on the right. Click the blue arrow pointing to the left in the middle of the screen and Expression Web 3 imports all the files from your downloaded folder into your newly established site.

That’s all there is to it.

First photo of the Expression Web 3 book

News | No Comments

FedEx just dropped off a hardcopy version of my new book Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours along with what’s called an “F&G” (Folded and Gathered) copy for corrections in prep for the first reprint. That means you can go get your hands on this hot-off-the-presses volume right now!

New Expression Web 3 book – new lesson files

News | No Comments

xweb3My new book Sams Teach Yourself Microsoft Expression 3 in 24 Hours is now available in stores. With it comes a new set of lesson files to help you learn all the ins and outs of the new and drastically reworked version of the application. The new book comes with a completely new work project as well as new chapters and information.

The lesson files for the new book are available by clicking here.

Announcing Expression Web 3

News | No Comments

Expression Web3

This post was also published on my main blog DesignIsPhilosophy.com

Expression Web 3 is now available for trial download directly from Microsoft. Click here to join in on the fun!

It’s no secret that I’ve been playing around with various pre-beta and beta versions of version three of Microsoft Expression Web for the last few months, all in preparation for the release of my new book Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours which is available for pre-order from Amazon.com right now (even though it’s not finished yet!) So for all this time I’ve had to keep my mouth shut about my new toy and what it can do. Well, no more. I just got the all clear from the development team to talk about the application publicly and share some screenshots of what you can expect when it goes public in the next couple of months.

So, without further ado, here is a quick rundown of the new features, the new appearance and my innitial thoughts on the new member of the Expression Web family.

New Flat-tastic User Interface

The first thing you’ll notice (apart from the new logo in the splash page of course) when opening Expression Web 3 is the new UI skin. The application looks very different from its two prior iterations in that the team has moved away from the classic fake 3D/embossed look to a 2D/3D inspired look with flat surfaces and drop-shadows. The interface is also a lot darker than the prior ones with a dark gray being the predominant colour. The new look makes me think of new media applications like TweetDeck and DestroyTwitter and there is little doubt in my mind that much of the inspiration was taken from what I want to refer to as the post-web2.0 look.

As you can see in the graphic at the top of this article the new look is very clean and sharp and makes icons, toolbars and panels pop out. This dark flat-tastic look has already been used in Expression Design and Expression Blend and I think it is a welcome change that not only links Expression Web to it’s application siblings. It also visually separates the new application from those of the past and signals a new beginning of sorts. Not to mention that to me at least it is much easier on the eye (I tend to do a lot of design work in the dark).

AutoHide Panels

AutoHide PanelsOne of the things that really irks me with design applications in general is all these toolbars and task panes that take up valuable screen space. To curb my frustrations I prefer to work on a dual-monitor setup where I can stash all the tools and task panes on one monitor and leave the application on the other. But this doesn’t work when I’m on my laptop (which is where I’m at most of the time these days). And in Expression Web 1 and 2 even with a widescreen monitor the task panes ate up a lot of real estate. As a result I kept turning the task panes on and off all the time – a process that was a real time waster. In response to complaints and suggestions to do something about the task panes, the dev team introduced a simple AutoHide feature that lets you collapse the panels (they’re not called “task panes” anymore) to the sides from where you can open them by hovering over their names. In practical terms that means you can leave all your favourite panels on the workspace without having them take up tons of room in the process.

The AutoHide feature is easily toggled on and off with a pin logo (seen in the upper right-hand corner of the grab to the right). When the pin is lying sideways as in the grab, the panel is pinned to the wall (AutoHide on). When it’s in the upright position, the panel is a permanent part of the workspace. It’s a simple feature but it makes a world of difference, especially because you can pin individual and rarely used panels to the sides for easy access if you were to need them.

New and improved publishing options

It’s no secret that the publishing options, and especially the FTP publishing option, in Expression Web 1 and 2 were less than stellar. It was so bad in fact that I urged the readers of my book to not use them. Well, without breaking any deals with my publisher I can tell you that my recommendation in the new book is quite different. Not only has the troll that was messing with the FTP been slaughtered but two all new publishing methods have been added to the list providing more secure transfers and options. The list of publishing options now features SFTP (Secure Shell File Transfer Protocol), FTPS/SSL (File Transfer Protocol over Secure Socket Layer) as well as the original FTP, FrontPage Server Extensions, WebDAV and File System.
publishingBut that’s not all. Expression Web 3′s publishing option has been rebuilt from scratch and features a whole new range of functions including the ability to define multiple publishing locations for one site so you can push your files to a backup storage as well as publish them online, or publish them to multiple servers, or set up a testing server and a main server within the same project. This again is a seeminly minor but actual major improvement that makes life a lot easier for people like myself who do a lot of server testing and cross-publishing.

In-application Browser Previews with Snapshot

Expression Web 3 Snapshot panelIn addition to alterations and improvements to the old versions of the application, Expression Web 3 introduces some new features that are going to make your life as a designer/developer a hell of a lot easier. They are connected at the hip but I’d rather deal with them independently. The first one is the Snapshot panel. Like the name suggests, Snapshot takes a real-time browser shot of your current page and displays it in a panel inside your workspace. This means you now have a quick and easy way to see what your recent changes will look like in different browsers, including Internet Explorer 6 and 7 and Firefox, without having to actually run the page in a real browser.

Snapshot’s output is just that – a snapshot – and does not provide functional links and the like. But it does generate JavaScript, CSS, HTML, PHP and whatever else you want to throw at it and gives you a true representation of what your page looks like in the different browsers.Like the other panels you can undock the Snapshot panel and place it somewhere else, for instance on your second monitor.

SuperPreview – Browser Testing Made SuperSimple

Expression Web SuperPreviewI’ve written about SuperPreview before both here on DesignIsPhilosophy.com and in the official Microsoft Expression Newsletter but it can’t be repeated enough: Expression Web SuperPreview could one of the most important innovations in web development of the last several years. SuperPreview is the powerful big brother of Snapshot – a stand-alone application that lets you perform cross-browser testing that lets you compare true output from multiple different browsers with onion skinning and side-by-side preview. To identify incompatibilities, problems and even tiny shifts the application also features simultaneous box highlighting of individual elements and even provides full FireBug-like DOM trees to give you as much info as possible about what’s going on when things go wrong.

I’m not going to go into too much detail here – the application will be better served with a tutorial video that shows how it actually works in real-time – but I will say one thing: Even if I was still a DreamWeaver user, I would buy Expression Web 3 just to get the full version of SuperPreview. And that says a lot cuz’ I’m a cheap guy. With alligator arms.

For more info on Expression Web 3 microsoft just published Expression Web 3: An Overview on the official Microsoft Expression website.

For another take on the new version check out fellow Microsoft MVP Cheryl D. Wise’s blog.

Get Microsoft Expression Products 50% off for the Holidays!

News | No Comments

Just before the Holidays this dropped into my inbox. It’s a great deal made even better by the fact that the Microsoft Expression line is already competitively priced. Add to that the great review Expression Web 2 got form PCMag.com and you have the perfect last-minute or belated gift for yourself or the web designer / developer in your life:

For a limited time (exact timeframe is TBD), there is a 50% off discount on Microsoft Expression Studio, Expression Blend and Expression Web through the new Microsoft Online Store. *This is US Only*

http://store.microsoft.com/microsoft/design-developer/category/6
http://store.microsoft.com/microsoft/design/category/601

Lesson Files: Woes and Solutions

Uncategorized | No Comments

Some readers have been having problems downloading and extracting the lesson files. As a result I have changed the Lesson Files page to include direct links to both the full archive of all the lesson files and also links to the files for each individual chapter.

If you are one of the readers who has been having trouble with these files, please go to the new page and try downloading the files from the alternate location.

Having problems with your free online edition?

News | No Comments

I’ve gotten a couple of emails from people having problems getting the free online edition of the book. For those of you who don’t know, at the very last page of the book there is a code you can use to get 1 month of free access to the online version of the book at Safari Books Online. But aparently people have been having trouble getting the code to work.

I went to Safari Books Online and entered the code myself to see what all the fuss was about and to my surprise I got an error message. But the surprise was short lived when I took a seccond look at the code in the book: Because of the upper case typeface it looks like the first four keys of the code are “R61G” but inreality they are “r6ig”. And with that small correction, the code works just fine.

So, if you’ve been having trouble getting this to work, try substituting the “1″ for an “i” and give it one more shot.

CSS and Design Links