I chose this excerpt because it is relevant not only to people who use Expression Web 3 but to anyone who does anything on the web. When I started out in this field I was often confused about why there were three different types of hyperlinks and how and when to use them. Well, here is a straight forward explanation with examples:

Absolute, Relative and Root-relative Hyperlinks – an explanation

As you are creating hyperlinks in Expression Web 3, you will notice that the syntax of the link address in the Code view changes depending on what you link to. There are actually three different ways of writing a hyperlink address, all of which are used for different purposes:

Absolute Hyperlinks

Absolute hyperlinks are complete addresses that contain all the elements of a URL. They always start with some version of http:// followed by the domain name (for example, www.designisphilosophy.com) and optionally a page/folder. Absolute hyperlinks are used when linking to pages outside of the current site that have a different domain name.

Relative Hyperlinks

Relative hyperlinks are addresses that are relative to the current domain or location. They only contain the name of the target page prefixed with any necessary folder moves (for example, default.html). The browser sees that this is a relative hyperlink and adds the domain and folder location of the current page to the beginning of the link to complete it. If you use relative hyperlinks and you want to navigate from a page stored in one folder to a page stored in a different folder you add the folder prefixes to the hyperlink. For instance, a relative link from a page in Folder 1 to a page in Folder 2 would be ../Folder 2/page.html, where the ../ tells the browser you want to go out of the current folder and into a new one. When you create hyperlinks between pages in Expression Web 3, they are always inserted as relative links so that the application can easily update them if you choose to move files around. However, if you move the files around on your computer outside of the Expression Web program, the hyperlinks break.

Root-relative Hyperlinks

Root-relative hyperlinks are a subset of relative hyperlinks in which all the links are assumed to start from the root folder (domain name) of the site. They differ from the relative hyperlinks in that the address is prefixed by a forward slash (for example, /default.html). The browser applies only the domain to the beginning of this link. Root-relative hyperlinks are used in place of relative ones in large sites in which there is a chance the files will be moved around without using an application such as Expression Web 3 to update them. Because they refer to the root of the site rather than the current location of the page they are placed in, they work regardless of where the file is placed as long as they remain under the right domain.

Related posts:

1. Expression Web 3 Service Pack 1 now available
2. Previewing Silverlight Applications in Your Browser With Expression Development Server
3. Expression Web – What? A Bug Already?

Why do I need a CSS Reset?

If you’ve never worked with a CSS Reset before I can pretty much guarantee that the question you are itching to ask is “why do I need a CSS Reset”. After all, you’ve designed or worked with numerous CSS-based sites in the past and even though they didn’t have a CSS Reset they work just fine. Right? Well, let me ask you this: If you’ve ever tried to design a site from scratch using CSS, and you’ve tried to make it cross-browser compatible, you’ve probably noticed that your styles don’t always look the same in different browsers even though they should. In most cases this has been a Internet Explorer vs. the rest type of battle and you’ve probably written it off as such and just picked a side. But that’s not the only, or right for that matter, solution. If you run into a browser incompatibility issue where CSS is concerned, it’s more often than not due to the fact you haven’t properly defined your styles leaving it up to the respective browser to make guesses as to what you want the site to look like.

To put it in simpler terms: If you don’t define all the default CSS parameters in your style sheet, the browser will use its default parameters instead. And since different browsers have different parameters your site will end up looking different depending on what browser you use.

What does the CSS Reset do?

As the name suggests, the CSS Reset resets all the default CSS parameters to a neutral position thus overriding any predefined assumptions at the hands of the browser. That’s a bit of a vague explanation so I’ve made a visual example that illustrates it perfectly:

The image above shows the same piece of basic HTML displayed when no CSS is defined and when the CSS Reset is applied. It is pretty obvious what happens: When you create a HTML page with some basic tags like <h1>, <p>, <blockquote> and <ul> without defining the styles of these tags with CSS, the browser applies its default stylesheet to these tags. But like I said earlier, different browsers have different standard stylesheets and as a result the page won’t look the same across all browser. And although this isn’t really a big problem when we’re talking super-basic stuff like what is displayed above, it becomes a serious pain in the neck when you create complicated CSS layouts.

So all I’m doing is creating more work for myself?

Unfortunately the gut reaction from a lot of people when they see the image above is “Oh crap! Why would I ever do that? I just create tons of work for myself.” Well, that’s partly true: With a CSS Reset applied you do have to manually define all your styles unless you like the reset look (I don’t). But on the bright side that also means you are now in complete control of every aspect of your site and nothing is left to chance any more. And in my book the former far outweighs the latter.

If that doesn’t convince you, consider this: Before I startet using the CSS Reset in all my projects, I spent a lot of time trying to jury rig my code into playing nice in all browsers. This often included using IE hacks and JavaScript. After emplying the CSS Reset I only rarely encounter these problems, and when I do it’s usually because I made a mistake somewhere.

Alright, I’m sold. How do I start using the CSS Reset?

There are several CSS Resets available out there. The one I use is CSS guru Eric A. Meyer’s Reset Reloaded. It seems to be the most comprehensive reset and it is constantly being updated. To employ it I simply copy the code from the site and paste it in at the very top of my stylesheet. When it comes time to work on my own styles I make new ones leaving the CSS Reset intact. Cascading Style Sheets work as a cascade from the top down which means with the CSS Reset on top the browser will first read all the reset styles and then whatever styles I define below and apply them in order. That way the layout is guaranteed to be clean of browser junk and only shows my style code.

That really is all there is to it. So employ the CSS Reset and go forth and code.

Related posts:

1. Center a Page Horizontally Using CSS – An Expansion
2. Highlight current page in WordPress menus
3. Create a Twitter box in your sidebar

Code Snippets

The last half of the presentation centers around creating Custom Page Templates and Custom Fields for layout purposes. To help you along in your own WordPress site development, here are those code snippets ready to be cut and pasted into your templates:

Custom Page Templates in 5 lines of code

This block of code is inserted at the very top of the Custom Page Template file. To get started, simply open the page.php file, save it under a different name, paste these 5 lines of code at the top of the document, save and upload to your server. To activate the new Custom Page Template just select it from the Template menu under Attributes in the Page Editor within WordPress.

<?php /*
Template Name: Whatever 
*/ ?>

Custom Fields in one line of code

This code can be used in any template file including but not limited to page.php, any Custom Page Templates, index.php, archives.php, single.php etc etc. The code returns a string of text that matches the text inserted in the custom field. Remember to replace $key with the actual name of the custom field. You can read more about Custom Fields and how to use them in the WordPress Codex.

 <?php echo get_post_meta($post->ID, '$key', true); ?>

Custom Field that parses PHP code

This code is used to parse (interpret) PHP code inserted into custom fields. It is a bit wonky – for instance it terminates any other custom field code placed directly after it in a page – so use it with caution. Otherwise it works exactly as the code above.

<?php $boxContent = get_post_meta($post->ID, 'centerBox', true); ?> 
<?php eval('?'.'>'.$boxContent); ?>

Applications Used in the Presentation

After the presentation several people came up to me and asked what applications I used, so here is a short list:

BitNami WordPress Stack

The demo site I used in the presentation was actually installed and running locally within Windows 7. To achieve this I used an ingenious application named BitNami WordPress Stack. Once installed this application will run a fully functional version of WordPress with database entry, plug-ins, custom themes and everything else you want to throw at it right inside Windows (XP, Vista and Windows 7 supported) so you don’t have to keep uploading your files to a server or hassle through complicated XAMP installs to play around with WordPress while offline. You can even install several different WordPress and other open source CMS stacks on your computer simultaneously to further increase your productivity. I have no idea exactly how it works but BitNami works incredibly well. Just remember to set the IP address to “localhost” when you install it.
You can download the BitNami WordPress Stack here. For Mac users there is a similar application called MAMP but I know nothing about it.

Web Developer Add-On for FireFox

FireFox is my absolute favourite browser and I use it for browsing as well as in the design process. One of the main advantages of FireFox is the myriad of add-ons you can install that make web site development a lot easier. The one I use the most is the Web Developer Add-On. This small application within an application lets you see and mess with CSS, turn styles and JavaScript on and off and do tons of other stuff that makes it easier to dissect and troubleshoot buggy web pages. Combine it with the HTML Validator add-on and you have a true powerhouse in a small browser window.

Microsoft Expression Web 2

My web development platform of choice is Microsoft Expression Web 2. This new offering from Microsoft is what enables me to build custom WordPress themes and web sites like AnnyChih.com from scratch in less than 24 hours. There are many great things you can talk about with Expression Web 2 but for WordPress theme development the two main features is full PHP support, unrivaled CSS integration and Standards Based CSS generation right out of the box. If you want to know more about Expression Web 2 or want to learn how to use it you can read more on this blog or pick up a copy of my book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours. It’s a good read, I promise.

Related posts:

1. Code snippets from my WordCamp presentation
2. WordCamp Whistler Pitch: Moving Beyond the Blog – Building Web Sites with WordPress as the CMS
3. Speaking about WordPress as CMS at WordCamp Whistler – What do you want me to cover?

Custom Page Templates in 5 lines of code

<?php
/*
Template Name: Whatever
*/
?>

Custom Fields in one line of code

<?php echo get_post_meta($post->ID, '$key', true); ?>

Custom Field that parses PHP code

<?php $boxContent = get_post_meta($post->ID, 'centerBox', true); ?>
<?php eval('?'.'>'.$boxContent); ?>

Related posts:

1. Using WordPress in Alternate Configurations – My WordCamp Whistler 09 Presentation
2. Using Conditional Custom Fields for Advanced Layouts
3. WordCamp Whistler Pitch: Moving Beyond the Blog – Building Web Sites with WordPress as the CMS

Understanding custom fields

You can add custom fields to any WordPress post or page through the custom fields interface found right underneath the main text area. The custom field contains two elements; a name and a value. These are pretty self explanatory: When the template asks the server for the name, the value is returned. But this also means that unless the template actually asks for the field by name, nothing is returned. An example to show how this works in real life:

A web site for an art gallery requires each artist page to have a series of sub-pages containing an artists statement, bio, CV and image gallery. Although adding an unordered list directly to the text body of the page would work, it would require the addition of style elements and tags – something WordPress doesn’t like very much. Not to mention it’s also cumbersome and messy. A better solution is to place all the style tags in the template and then just feed the menu in the form of a standard unordered list from a custom field, in this case with the name “artistMenu”. Then all that’s left is to get the template to call for the info in the custom field like this:

<div id="artistMenu">
	<?php echo get_post_meta($post->ID, "artistMenu", true); ?>		
</div>

When the template is opened, the content of the custom field named “artistMenu” is placed as a string inside the artistMenu div. (To understand exactly how the php code works you can read about the get_post_meta template tag in the WordPress Codex.)

Making the custom fields conditional

The problem with the example above is that even if there is no custom field defined, the div is still placed in the page taking up space. Not a big problem when it’s just a horizontal menu but if you use a custom field to populate something larger, like an image gallery or a text box, it will look weird if the box is left empty. One way of avoiding this is to make two separate templates, one with the custom field code and one without, but that can quickly become complicated. And the whole idea here is to make things simpler, not more complicated. A better way is to make the code and the call for the custom field conditional on whether the custom field has been defined in the first place. This can be done with a simple if statement:

<?php  if((get_post_meta($post->ID, "artistMenu", true))) { ?>
	<div id="artistMenu">
		<?php echo get_post_meta($post->ID, "artistMenu", true); ?>		
	</div>
<?php } ?>

Using conditional custom fields as design elements

Now for the really cool stuff: Because we can make custom fields conditional, and because we can populate them with pretty much anything, we can use them not only to add images or text but also to add all new design and layout elements. In the site I built for Sablok & Salbok Notaries Public I used this technique to create a header element that only appears if the custom field is populated by an image or text. The actual appearance of the element is controlled by standard CSS. You can see this layout element as the blue horizontal area in the image and on the front page of the site.

In this particular example the custom field can be populated by an image. Rather than forcing the user to input all the image code in the custom field manually I added some extra code in the template that gathers the width and height of the image and creates the proper element code. As a result all the user has to do is provide the URL for the image. There is also an or condition in the if statement so that the custom field code in the template is triggered either when an image field or a text field is defined:

<?php  if((get_post_meta($post->ID, "image", true)) || (get_post_meta($post->ID, "text", true))) { ?>
	<div id="subheader">
 
		<?php if(get_post_meta($post->ID, "image", true)) {
		$size = getimagesize(get_post_meta($post->ID, "image", true)); ?>
		<img src="<?php echo get_post_meta($post->ID, "image", true); ?>" alt="" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" />
		<?php } ?>
 
		<?php if(get_post_meta($post->ID, "text", true)) {?>
		<?php echo get_post_meta($post->ID, "text", true); ?>
		<?php } ?>
 
	</div> <!-- END SUBHEADER -->
<?php } ?>

Related posts:

1. Code snippets from my WordCamp presentation
2. Using WordPress in Alternate Configurations – My WordCamp Whistler 09 Presentation
3. BCIT Class Materials

In this tutorial we’ll look at how to utilize the built in current page styling, how to create a menu like the one you see above and also how to hard code the functionality into a menu that is not generated dynamically by WordPress.

Identifying the custom styles

If you view the source code of a WordPress blog with a menu like the Reader’s Companion you’ll see that the menu items have been given different classes automatically by the CMS:

<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>

The important classes here are page_item which styles all the menu items and current_page_item which is only applied to the current page item. By styling these two classes independently you can get some very nice results. To demonstrate how far you can take this I’ve made a mock-up page that simulates the end output of a WordPress menu with custom styling. You can find it here.

By taking a closer look at the CSS you’ll see that the page_item and current_page_item classes have different styling. The remainder of the code is set up to make the button backgrounds expand and contract in accordance with the Sliding Doors technique from A List Apart.The CSS code on the demo page is identical to the CSS code being used to style the page itself:

page_item styles:

.page_item a {
float: left;
display: block;
background: url("img/right-over.png") no-repeat right top;
padding: 6px 15px 7px 6px;
text-decoration: none;
font-weight: bold;
color: #DDDDDD;
text-transform: uppercase;
}
 
.page_item a:hover {
color:white;
}

current_page_item styles:

.current_page_item {
float: left;
background: url("img/left-selected.png") no-repeat left top;
margin: 0;
padding: 0 0 0 8px;
}
 
.current_page_item a, .current_page_item a:hover {
float: left;
display: block;
background: url("img/right-selected.png") no-repeat right top;
padding: 6px 15px 7px 6px;
text-decoration: none;
font-weight: bold;
color: #C7532D;
text-transform: uppercase;
}

If you already have your menu up and running properly, all you need to do is style these two classes and you’ll automatically have the current page highlighted in your menu. But this only applies to dynamic menus generated by WordPress. What happens when you hard code your menus yourself?

Assign dynamic styles to hard-coded menus

To get the same effect when you create a hard-coded menu you need to apply some clever PHP code to each of your menu items.

If you don’t understand what I mean by “hard-coded menu” consider this: By default your menu is called by a function within WordPress that lists all of your pages plus the Home page. This call usually looks something like this:

<?php wp_list_pages('title_li=&depth=1'); ?>

But this function lists all your pages. If you only want certain pages listed you have to take this function out and create a manual list yourself. This is a hard-coded menu.

To make the current_page_item class apply only to the current page item you need to add a small piece of PHP to each of your menu items. This line of code looks like this:

<?php if (is_page('home')) { echo "current_page_item"; }?>

and is applied inside the li tag of each item. To give a concrete example I have added this code to the list items in the list example at the beginning of this tutorial:

<div id="menu">
<ul>
	<li class="page_item <?php if (is_page('home')) { echo "current_page_item"; }?>"><a href="http://expression.pinkandyellow.com">home</a></li>
	<li class="page_item page-item-9 <?php if (is_page('Lesson Files')) { echo "current_page_item"; }?>"><a title="Lesson Files" href="http://expression.pinkandyellow.com/lesson-files/">Lesson Files</a></li>
	<li class="page_item page-item-11 <?php if (is_page('About the Author')) { echo "current_page_item"; }?>"><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 <?php if (is_page('FAQ')) { echo "current_page_item"; }?>"><a title="FAQ" href="http://expression.pinkandyellow.com/faq/">FAQ</a></li>
	<li class="page_item page-item-15 <?php if (is_page('Further Reading')) { echo "current_page_item"; }?>"><a title="Further Reading" href="http://expression.pinkandyellow.com/further-reading/">Further Reading</a></li>
	<li class="page_item page-item-17 <?php if (is_page('Contact')) { echo "current_page_item"; }?>"><a title="Contact" href="http://expression.pinkandyellow.com/contact/">Contact</a></li>
</ul>
</div>

When the page is loaded the PHP script looks to see if the page name matches the name in the is_page section and if it does, the current_page_item class is applied. Therefore the name you put in the is_page section of the PHP script must match the name of the page as created in WordPress exactly. If it does, the current page item will be highlighted dynamically.

Related posts:

1. New WordPress based site: The Reader’s Companion
2. Create a Twitter box in your sidebar
3. Center a Page Horizontally Using CSS – An Expansion

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.

Related posts:

1. Pure CSS Drop-Down Menu tutorial – a slight omission
2. In rewrite mode: New version of my book on the way!
3. My book is featured in the Canadian User Experience Blog

the only thing I would like to change is the time aspect (23 days ago // 4 hours ago). Is there a css code to hide that link without taking away the links from the original twitter message?

What TheN2S is refering to is the tail end of each Twitter message that reads either “less than a minute ago”, “a few minutes ago” etc up to “X days ago”.

Careful inspection of the JavaScript that generates the Tweets for the application (found here) shows that the time information is a core function of the Twitter system so it is coded into the main structure of the application itself. Therefore it is hard to siply remove it unless you want to create your own custom JS. But TheN2S is on the right track in asking if it can be removed by way of CSS.

Lifting a random tweet off my own site I found that the main body the JS spits out is contained within a span tag while the tail end with the time info is not:

<li>
   <span>@<a href="http://www.twitter.com/webb_art">webb_art</a> DropBox works well for me and is platform independent: <a href="http://www.getdropbox.com/">	http://www.getdropbox.com/</a></span>
   <a href="http://twitter.com/mor10/statuses/1003495851" style="font-size: 85%;"> about 15 hours ago</a>
</li>

That means we can use CSS to hide the content not in the while maintaining the visibility of the content that is. That requires some additions to the original CSS code:

#twitter_div ul li span {
	visibility: visible;
}
 
#twitter_div ul li span a {
	color: #D78E42;
	visibility: visible;
}
 
#twitter_div ul li a {
	visibility: hidden;
}

The first two single out the regular and link contents within the span specifically and set their visibility to visible. This is done because the last style sets the visibility of all anchors within list items under the twitter_div ID to hidden. So we are really working backwards – first hiding everything and then unhiding it in particular cases.

By adding these three style elements the time information will be hidden by the CSS while everything else shows up normally.

Related posts:

1. Create a Twitter box in your sidebar
2. Twitter Sucks!
3. Expression Web 2 Webcast June 5th – What do you want to know?

In this tutorial you’ll learn how to easily create a fancy box that displays your latest Twitter rants in your sidebar without having to turn to clunky plug-ins that bog your blog down.

Get your Twitter Badge

To start off with you need your Twitter Badge. This is the official Twitter JavaScript that passes your latest tweets to wherever you want. You can get your badge at twitter.com/badges. Twitter has custom badges for MySpace, Blogger, Facebook and TypePad but surprisingly nothing for WordPress. That doesn’t really matter because it’s actually easier to just make one of your own.

Select Other and you are taken to page two which presents three options:

1. Flash (Just Me) – hideous
2. Flash with Friends – even more hideous
3. HTML/JavaScript – great for people with eyes

Select the last option (HTML/JavaScript) and you are taken to page 3 where you can customize the code by defining how many tweets you want and what the Badge title should be. I chose 2 tweets and turned the title off. This provided me with the following code:

<div id="twitter_div">
	<ul id="twitter_update_list"></ul>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/mor10.json?callback=twitterCallback2&amp;count=2"></script>

(This code will of course differ depending on your settings.)

Paste the code in wherever you want on your site or your blog.

Style your Badge

The Twitter Badge comes equipped with JavaScript that injects the tweets into your badge in the form of unordered list items as well as built in style elements. They are: #twitter_div (styles the badge wrap), .sidebar_title (styles the title) and #twitter_update_list (styles the unordered list).

Before you start styling, you have to fix the generated code to make it validate. Since it is the JavaScript that actually generates the list items, browsers and validators get all cranky about the code because there are no list items within the unordered list in the markup itself. Therefore you need to insert an empty list item just to please the W3C gods:

<div id="twitter_div">
	<ul id="twitter_update_list">
		<li></li>
	</ul>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/mor10.json?callback=twitterCallback2&amp;count=2"></script>

Once that’s settled you can start styling your elements. Again because of the JavaScript you have to stick with the names Twitter provides, but that shouldn’t cause any problems. For my Twitter Badge I created a background PNG much larger than what I actually needed to accommodate a future situation where I would add more than 2 tweets at a time (which you can see by clicking here). The background graphic is cut off by a matching blue bottom border. The whole style package looks like this:

#twitter_div {
	background-image: url('img/twitterBG.png');
	background-repeat: no-repeat;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #5AA5BC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	margin-top:10px;
	padding-top: 30px;
	padding-right: 5px;
	padding-left: 5px;
}
 
#twitter_div ul li {
	color: #0C93BA;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #A1E8F7;
}
 
#twitter_div ul li a {
	text-decoration: none;
	color: #DDA84E;
}
 
#twitter_div ul li a:hover {
	text-decoration: none;
	color: #D78E42;
}
 
#twitter_div p {
	text-align: right;
	padding-right: 6px;
	padding-bottom: 10px;
}

Add a link for future followers

The observant reader will notice that there’s still one element missing: The Follow me on Twitter link in the bottom right corner. That’s the reason for the p style in the CSS code as well. So with the follow link, the final HTML markup looks like this:

<!-- TWITTER -->
<div id="twitter_div">
	<ul id="twitter_update_list">
		<li></li>
	</ul>
	<p><a href="http://twitter.com/mor10" title="Follow me on Twitter" target="Twitter">Follow me on Twitter</a></p>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/mor10.json?callback=twitterCallback2&amp;count=2"></script>
<!-- END TWITTER -->

And with that you have a fancy Twitter box you can put in your sidebar without bogging your blog down with plug-ins.

Read the second half of this tutorial, in which you learn how to hide the time stamp at the tail end of the Tweets.

Related posts:

1. Create a Twitter Box in Your Sidebar – Part II
2. Selected Pages – an answer for Beal
3. Fancy Interactive Pure CSS List Boxes with Hover Effect

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!

Related posts:

1. Posting a Silverlight Application – Major Headache
2. Silverlight Posting Issues – Solved
3. Silverlight in Opera (but no Silverligth 2 – at least not yet)