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.

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.

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

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

One 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.
But 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

In 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

I’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.

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

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.

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.

A month or so ago Microsoft contacted me and asked if I would write an article on Expression Web for their Expression Newsletter. How could I say no to such an opportunity? After some back and forth about the topic I landed on an article on how to create a Pure CSS Drop-Down menu. Over time I’ve encountered numerous solutions, most of which were clunky and didn’t work properly. So the tutorial demonstrates how to create a fully functional CSS-only drop-down menu utilizing the excellent CSS features in Expression Web.

That’s not to say you have to use Expression Web to get something out of the article though. You can follow the tutorial and get the same results even if you’re using Notepad to build your sites. It’s just that Expression Web makes it a hell of a lot easier to manage.

This article comes hot on the heels of my book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours which contains an expanded tutorial on the same topic that also covers a layers-based drop-down menu. If you are an Expression Web 2 user of if you are considering buying or switching over to this excellent web authoring and publishing platform I humbly suggest you pick up a copy for yourself. It’s a quick read and it gives you hour-by-hour instructions on how to create a web site from scratch with the application. And once you’re done, you’ll have a fully working and standards based web site at your disposal. I wrote it as the book I wish someone had written when I started out and from the response I’ve gotten so far people are learning a lot from it. Which is what I set out to do.

If you’re interested in a preview of the kind of content you’ll find in the book or you just want to know how to make a Pure CSS Drop-Down menu, you can read the full article, The No-Code Way to a Pure CSS Horizontal Drop-Down Menu with Expression Web, here or subscribe to the Expression Web Newsletter.

If you want to read more tutorials and articles on everything form Expression Web to CSS, design and WordPress customization, visit Design is Philosophy – the Pink & Yellow Media Blog.

I received two huge boxes full of copies of my book this morning. This means it’s only a matter of a few days before it hits shelves throughout North America and the internet. So smash that piggy bank and get ready!