Nov 18
Read my article in the Microsoft Expression November Newsletter
.jpg "CSS Based Horizontal Drop-Down Menu")
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.
Nov 05
Introducing Design is Philosophy
After finishing a series of projects long overdue I finally had a couple of days to sit down and redesign my much neglected blog. Over the summer I’ve jotted down ideas and sketches for this blog but I’ve never really had time to get down to work. At the same time I’ve been telling everyone and their dog about how well Expression Web works as a blog design tool and how well WordPress works as a CMS. So I figured it was about time I put everything together to demonstrate that there is reality behind all the talk. And after 3 days of hard work, here is the result: A WordPress blog designed from scratch in Expression Design and Expression Web 2. Get the whole story
Oct 02
New WordPress based site: The Reader’s Companion
In conjunction with the release of my new book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours I have created a Reader’s Companion site where the readers can download lesson files, dive deeper into the world of Expression Web through further reading, find relevant links and interact with other readers. The site is a custom WordPress installation with a highly customized theme designed from scratch using Expression Web 2.
In the coming weeks I’ll post a series of articles and tutorials demonstrating how you can customize this amazing CMS (yes, I don’t consider WordPress a mere “blogging platform” any more) to create advanced, attractive and easily manageable sites. For now, let’s just take a look at the highlights:
Valid XHTML and CSS
Those of you who have (or will) read my book will know this: I put a lot of importance on the whole issue of valid code (yes yes, I know… this blog has more errors than a Sarah Palin interview but in my defence I haven’t had time to clean it up because I’ve been too busy writing a book and tutorials) and since the site is a bit of a showcase for what I teach in the book it better fit the bill. So even though it is a WordPress site with a lot of customization, it validates 100%.
TIP: Amazon.com links don’t validate!
Not surprisingly the site contains a couple of direct links to the Amazon.com page for the book so people can buy it straight from the site. Unfortunately the crazy Amazon.com links do not validate. To ensure that the site would validate anyway I therefore used a redirect service called TinyURL to create a small (and valid) URL directly to the page. TinyURL even offers the ability to create custom URLs so instead of the long and cumbersome Amazon.com link the book on the left hand side of the page points to http://tinyurl.com/styexpressionweb2.
Fancy Sliding Doors Header Buttons with Invisible Text
The original idea for the site was to provide a place where people could download the lesson files for the book. For this reason the button leading to the lesson files should be large, prominent and working properly across all platforms and browsers including text-only browsers. At the same time I didn’t want standard HTML text to ruin the appearance of the site.
The standard solution to this problem would be to create an image-based button. But I don’t like image-based buttons. Fortunately there is an alternate (and in my view much cleaner and more attractive) solution: A Sliding Doors CSS button with invisible text.
Sliding Doors for Dummies
If you are not familiar with the Sliding Doors principle, here is a short explanation: Sliding Doors refers to the use of one background image containing two or more button states that slide in and out of view depending on user interaction. You can read more about Sliding Doors and how to use them at A List Apart.
The problem with CSS buttons is that they depend on pure HTML text to work. But as always there is a way around it through some clever abuse of the text-indent attribute: By setting the position of the button to absolute and the text-indent to some very high negative number (for example -9999), the browser moves the text so far off to the left of the screen that it will never be visible. And since the text is hidden with CSS, any text-only browser will still display the text where it is supposed to be.
There are two such buttons on the site: The home button on the left and the lesson files button on the right. They both work in exactly the same way.
Current Page Menu Highlighting
If you use the correct classes you can make WordPress highlight the current page menu items through CSS. If you let WordPress handle the main menu (or any menu for that matter) it assigns two types of classes to the items depending on where you are on the site: Each menu item is given a number through the page_item class and the current_ page_item class is also applied to the current page (you can also set this up manually through php if you don’t want WordPress to manage your menus). On the Reader’s Companion site it looks like this:
<div id="menu"> <ul> <li class="page_item current_page_item"><a href="http://expression.pinkandyellow.com">home</a></li> <li class="page_item page-item-9"><a title="Lesson Files" href="http://expression.pinkandyellow.com/lesson-files/">Lesson Files</a></li> <li class="page_item page-item-11"><a title="About the Author" href="http://expression.pinkandyellow.com/about-the-author/">About the Author</a></li> <li class="page_item page-item-13"><a title="FAQ" href="http://expression.pinkandyellow.com/faq/">FAQ</a></li> <li class="page_item page-item-15"><a title="Further Reading" href="http://expression.pinkandyellow.com/further-reading/">Further Reading</a></li> <li class="page_item page-item-17"><a title="Contact" href="http://expression.pinkandyellow.com/contact/">Contact</a></li> </ul> </div>
As a result, to highlight the current page in the menu all you have to do is create a dedicated style class called .current_page_item.
Custom Page Templates
Another great feature of WordPress is the ability to create custom page templates that are assigned to different pages. In the Reader’s Companion site you see this in effect in the difference between the front page and the other pages. The front page template includes a left hand bar that displays the date of each post while the other template fills the entire left hand area with the page body itself.
Creating a custom page template is a fairly simple operation: All you have to do is find the template you wish to base the new one on, make any changes you need and then insert the following block of code at the top of the page:
/* Template Name: Page with no Sidebar */
When the new template php file is uploaded to the relevant theme directory, it automatically shows up in the page write panel under the heading Page Template. From here you can choose your template from a drop-down menu.
Tutorials Coming – Questions Welcome
Like I said earlier I am working on a series of tutorials to demostrate exactly how these different elements come together and how you too can create advanced custom WordPress themes with Expression Web 2. In the meantime take a closer look at the site, read over the CSS and if you have any questions or comments drop me a line in the comments below.
Oct 01
My book is finally here!
So I’m sitting in my couch tweaking the new web site I’ve created to supplment my upcoming book when the phone rings. FedEx is downstairs with something for me. When I get down to the lobby the guy is standing there with two huge boxes complaining about how heavy they are. It took me a few seconds to connect the dots but the Pearson Publishing sticker on the side made it all clear: The two boxes contained the 25 complimentary copies of my upcoming book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours. I was under the impression that the boxes wouldn’t arrive until after the book had hit shelves but it’s quite obvious now I was wrong.
Above are some nice cheezy photos of me and the book. And since Kenny the Squeeze Toy is heavily featured in the book itself I figured it would be appropriate to show that he is actually real.
So I guess there’s no doubt any more: The book is real and feels nice and solid. And since I have so many I’ll probably give some away so stay tuned!
Aug 03
Previewing Silverlight Applications in Your Browser With Expression Development Server
If you’ve tried placing a Silverlight application in a HTML page in Expression Web 2 (or any other web authoring application for that matter) and previewing it in your browser you know it doesn’t work. Here is a small exerpt from my upcoming book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours that explains how you can use the Expression Development Server to trick your browser into previewing Silverlight applications without having to run them off a server:
To make sure everything is working properly, you should preview the page in your browser. But if you do all you’ll see is an empty white page. This is because Silverlight is a server-side script that must be running on a web server to work properly. In other words technically you need to upload your files to a web server and test them from there. Fortunately there is a way around this problem: Because a big part of Expression Web 2 is the ability to create advanced dynamic websites using Microsoft’s server-side script language ASP.NET, the program comes equipped with a small application called Expression Development Server. This application creates a virtual server on your computer that behaves like a web server and lets you run server-side scripts in pages even though they are only stored on your computer. You will be introduced to the Expression Development Server in more detail in Hours 22, “Beyond the Basics: PHP in Expression Web 2,” and 23, “Beyond the Basics Part 2: Building a Site with ASP.NET.”
The problem at hand is that the Silverlight script will run only on a web server. So to be able to preview the application you need to make Expression Web 2 think that the page you are currently working with is actually an ASP.NET page. That way it will be previewed using Expression Development Server and the Silverlight script will run properly. Doing so is surprisingly simple: Open the HTML file that contains the Silverlight application you want to preview, select File, Save As on the menu bar, and change the file extension to .aspx – the extension for ASP.NET pages that can contain regular HTML code. Now when you open the page it will be previewed in the browser through Expression Development Server and the Silverlight application will run properly.
Clever eh? Now go crack open your piggybank and buy my book!
