Expression® Web Design

Adobe Photoshop Express

Thursday, March 27, 2008

Adobe announced they are offering a version of Photoshop at no charge on their web site.  I have not had the opportunity yet to take a test drive, but this might be useful to some users.  (By the way, on Opera 9.25 the test drive link had a few issues.

So if you were looking to use Adobe Photoshop and just could not afford it, here is a way for you to use some of the features of Adobe Photoshop at no charge.

They also seem to give you 2G of hard drive space as well at no charge

There's nothing sadder than a photo without a home. You hate to see that. Give your photos a free ride with Photoshop Express. Just sign up, then start uploading, polishing and showing off up to 2 GB of photo on our dime.

Now of course, one thing comes to mind with the brand Adobe Photoshop Express - FrontPage Express.  Maybe a coincidence, maybe names are now on the verge of running out, or maybe Adobe thinks Microsoft has a good naming convention?

404 Error Page -Not- Found

Tuesday, March 18, 2008

When creating a web site in today's time, it is imperative that you consider creating a 404 Error, Page Not Found.

Basically, a server has a list code, 18 in the 400 arena, that mean different things.  The 404 Page Not Found is one of the basic ones that is found a lot of times, no matter how large or small your web site is.  You might have accidentally linked to an image, and that image is no longer in your web site.  Now, the user won't see this page, but the server will tell the browser 404 on that file and the browser will stop trying to download the file.

Over the years, some 404 pages have be very comical and there is probably still a race going on somewhere to see who can great the funniest 404 Error page.

Proper 404 Pages

When a user goes to your web site, he / she excepts to see a certain page. After all, he clicked on a link from a search engine and your URL told him this was what he wanted.  However, when he clicked on it, that information is no longer on that page.  Maybe you re-did all your pages as a server-type so you could use Server Side Includes (SSI).  Maybe you re-did your web site so that it was easier for you to organize.

Helpful Web Sites

And of course there are web sites dedicated to 404 Error pages.  There is the 404 Research Lab and the 404 Lounge.

Using CSS to Customize Your Submit Button

Thursday, January 17, 2008

You can use CSS to customize your submit button, even on your FrontPage forms.  For example,

input.noborder
{
border: none;
background-color: #fff;
color: #000;
font-family:"Comic Sans MS"
}

And then you can apply this class to your button

<input type="submit" value="Submit" class="noborder" />

Will have your submit button look something like:   You can change the font family as needed along with CSS properties. 

If you change the the border properties to something like

border: solid #fff 2px;

This will add a border to the button and look something like . 

Embedding a Media File

Tuesday, January 15, 2008

Embedding a media file causes more problems than it is worth.  But people still would like their movie on the website.  There are a number of ways to do this - some code might not work in all browsers though.  I recommend converting the media to Flash and then embedding Flash into your HTML document.  This is the program that I used in this example.

For all purposes of this post, I am using Windows Vista Ultimate (all patches installed) and tested the code in Microsoft Internet Explorer 7.0.6000.16575; Opera Version 6.25, Build 8827; and Firefox 2.0.0.11.

Embedding Flash into HTML

There are even a few ways to do this even.  Adobe's method of embedding a Flash movie into your web site is something like

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,40,0" width="550" height="400">
<param name="movie" value="media/lorikeets.swf" />
<param name="quality" value="high" />
<embed src="media/lorikeets.swf" quality="high" 
width="550" height="400" name="myMovieName" 
type="application/x-shockwave-flash" 
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed></object>

You will probably see this OK in Firefox.  In Microsoft Internet Explorer (MSIE), you might see "Click to Activate".  Now in my opinion, this had to do with large corporations not playing nicely in the sandbox.  However, in April, Microsoft should be releasing a fix IE Automatic Component Activation (Changes to IE ActiveX Update). 

So what's a web developer like yourself supposed to do in the meantime?  You could check out the SWFObject: Javascript Flash Player detection and embed script.  Here is an example using the SWFObject to embed Flash.

Also keep in mind that if you are on a *NIX server, file names are case sensitive - meaning filename.SWF is not the same as filename.swf.  On a Windows server, it does not matter.

Embedding a WMV File

Embedding another type of media file, like MPG, AVI, or WMV will be difficult since some browsers do not recognize the <object> element.  However, this code

<object id="MediaPlayer" width="550" 
height="450" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" 
standby="Loading Microsoft Windows Media Player components..." 
type="application/x-oleobject" 
codebase="http://activex.microsoft.com/activex/controls/mplayer/
en/nsmp2inf.cab#Version=6,4,7,1112">
<param name="filename" value="media/lorikeets.mpg">
<param name="autoStart" value="true">               
<param name="showControls" value="true">
<param name="ShowStatusBar" value="true">
<param name="Autorewind" value="true">
<param name="ShowDisplay" value="false">   
<embed src="media/lorikeets.mpg" width="550" 
height="450" type="application/x-mplayer2" 
name="MediaPlayer" autostart="1" 
showcontrols="0" showstatusbar="1" 
autorewind="1" showdisplay="0">
</embed></object>

will seem to work with MPG, WMV, and AVI files.  You will see there are two references to the media (MPG, AVI, WMV) file.  Let's try to keep this simple.

<object id="MediaPlayer" width="550" 
height="450" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" 
standby="Loading Microsoft Windows Media Player components..." 
type="application/x-oleobject" 
codebase="http://activex.microsoft.com/activex/controls/mplayer/
en/nsmp2inf.cab#Version=6,4,7,1112">
<param name="filename" value="media/lorikeets.mpg">
<param name="autoStart" value="true">               
<param name="showControls" value="true">
<param name="ShowStatusBar" value="true">
<param name="Autorewind" value="true">
<param name="ShowDisplay" value="false">   
</object>

helps to embed the media file into Internet Explorer, while

<embed src="media/lorikeets.mpg" width="550" 
height="450" type="application/x-mplayer2" 
name="MediaPlayer" autostart="1" 
showcontrols="0" showstatusbar="1" 
autorewind="1" showdisplay="0">
</embed>

will help to embed the video into other browsers.  This is why it is important to make sure the path is updated in both places.  To locate the path, look for the src attribute.

File Sizes

File size is something else to consider when embedding videos.  For example, you probably have seen me attempting to feed the lorikeets at the Denver Zoo by now.  In Flash (SWF), the file size is about 3.54 MB and the original height is about 400 pixels and width is 725 pixels.  The MPG is about 14.3 MB in size.  The AVI is the largest and is 690 MB.  The WMV file 889KB.  The WMV is the smallest but you will also see that the height and width was reduced as well (for people who are on dial-up).

Embedding Media File Examples

• Embedding a MPG File
• Embedding a WMV File
• Embedding a AVI File

Embedding YouTube

Since YouTube is pretty popular, some people will upload their videos there.  And YouTube will actually give you code to use to embed the video on your own web page. 

And of course you can see the file on YouTube's website.

The code will look something like

<object width="425" height="355">
<param name="movie" value="http://www.
youtube.com/v/FKNIgPpw-i4&rel=1"></param>
<param name="wmode" 
value="transparent"></param>
<embed src="http://www.youtube.com/v/FKNIgPpw-i4&rel=1" 
type="application/x-shockwave-flash" wmode=
"transparent" width="425" height="355">
</embed>
</object>

So now you might be wondering which way you would like to use?  Flash is probably be best way - most browsers have Flash installed.  If you would like, I can help you convert your media file to Flash.

XML Sitemaps for live.com

Friday, January 11, 2008

Hopefully by now you have added an XML Sitemap to your website.  And you added the sitemap location to your robots.txt file

Sitemap: http://www.loudexpression.com/sitemap.xml

This is how most of the search engines will locate your XML Sitemap. 

However, as I previously gave you some suggestions on adding your XML Sitemap to Google and Yahoo, you can now add your XML Sitemap to Live.   You can sign up at Live Search Webmaster Center.  They will ask you to enter a META tag or upload an XML file to verify you are the site owner.  Once this is done, you will be able to see some information on your website like

• Summary:  This will give you your website address, when the site was last crawled, a domain rank, and Top 5 pages.
• Profile: This will give you the website address, the sitemap address, how they verified the site is yours (XML file or a META tag), and contact information to notify you of about any changes or problems when live.com crawls your website. 
• Keywords: Here you can enter some keywords to see how the page performs in search results.
• Top Links From:  You probably have some outbound links, this will show you ten that are performing the best in Live search.
• Top Links To:  This will show you the top ten incoming links that are performing the best in Live search.
• Sitemap:  This page gives you some general information on a n XML Sitemap.  It also tells you that you will get the best indexing results by using the robots.txt autodiscovery.

Robots.txt File

A robots.txt file is very simple to create.  You can view the LoudExpression's robots.txt file.  You can easily create this file with Expression Web by hitting CNTL-N.  Now, in the source code, delete everything and enter

Sitemap: http://www.loudexpression.com/sitemap.xml

And make sure that you change the absolute path to the path of your XML Sitemap.  The robots.txt will go in your root folder (the same folder where you have your "home" page). 

Sitemap vs XML Sitemap

A lot of times when you hear sitemap, people thought about something like this sitemap.  Now though, a lot of us think of an XML Sitemap.  Whichever one it is, both will help users and search engines.  Consider having both on your website.

Later we can discuss on how to set up a Google, Yahoo, and Live account to submit your sitemaps manually.  If you want help in creating an XML sitemap, contact me and send me your URL.  I'll try to send you one as soon as possible.

Types of Hyperlinks

Thursday, January 10, 2008

Whenever you create a hyperlink or add an image to your website, there is a bit of code in there that you might refer to as a path.  This path basically points to your the hyperlink or image.  And there are basically three types of paths that you will usually use when creating a website:

• Relative
• Virtual
• Absolute

All of them have pros and cons of using them in your website.  And you might decide to use all three in your webpage depending on what you need to do.

Relative Path

FrontPage and Expression Web will actually help to manage most of your relative paths in your website.  For example, if you decide to move a page from your root folder to a folder called about, any paths to images and hyperlinks contained in this page will be corrected.

So if you had something like

<img alt="Arrow" src="images/arrow.gif">

And you moved this page to a folder called about, the source code would be changed to

<img alt="Arrow" src="../images/arrow.gif">

This is one advantage of relative paths in your source code when using FrontPage and Expression Web.  And if you rename the image from arrow.gif to arrow1.gif, FrontPage and Expression Web should rename the paths in your website to arrow1.gif. 

From time to time, you will find some problems with this, i.e. maybe Expression Web might not update the path.  In Expression Web, it might be a good idea to go to Site - Recalculate Hyperlinks sometimes.  This will help correct any corrupted data.

Virtual Paths

This is the type that I tend to use a lot.  It looks something like

<img alt="Arrow" src="/images/arrow.gif">

You will notice the slash in the beginning of source.  This basically pushes the path back to the root of the website and then over to the images folder.  This is very useful if you are using any type of server side includes and have multiple folders.  No matter how many folders you are in, the path will go back to the root and over to the images folder.

Currently though, Expression Web does not fully support the virtual paths.  This means that if you use a virtual path to display an image, you might see something like this.  This is because there is not a website designated on your computer.  However, when you publish the page, you will see the image - no matter what folder you have the page in as long as you have the arrow.gif in the images folder.

Absolute Paths

You probably use absolute paths more than you realize, especially if you are directing people over to another website.  An example of an absolute path would be something like

<a href="http://www.loudexpressions.com/">Expression Web Blog</a>

A lot of people might use an absolute path for images.  Some companies will allow you to do this.  This way, if they change the image, the company can change the image on their server and users do not need to re-download a new image.  However, some websites do not allow this - this is called hotlinking.  Hotlinking costs users thousands of dollars a year in bandwidth.  Before linking directly to an image, contact the site owner to see if this is permitted.


The biggest problem with using absolute paths on your website is changes.  If you change your domain name, you will then need to change the path in the source code.  Expression Web has a function though in their replace feature (CNTL-H) - you can set it to search source code and change the domain name.  Before making any massive changes like this to your website, you should Create a Backup Copy of Your Website.  This way, if you accidentally make a mistake in the Replace with, you can refer back to your old copy. 

Your choices for the Find where are

• All Pages - this will make changes in your entire website
• Open Page(s) - this will make the changes in whatever pages you have opened at the time
• Selected Page(s) - this will make the changes in the pages you have selected.  You can select the pages by highlighting a specific folder, using the CNTL key and choosing the pages, or using the SHIFT key to select all the pages between a range.
• Current Page - this will make the changes to the current page you are working on.

Under the Advanced part, you can choose Find in Source Code which will apply the change(s) in your source code.

By now, you can probably see that the title "Types of Hyperlinks" is not the proper title for this post, but I felt that it might help others when searching.  It is actually called an URI (Uniform Resource Identifier).  If you have more question on an URI, please ask International Web Developers Network.

Comments Are Fixed

Tuesday, January 08, 2008

In my attempt to help cut down on spammers posting on this blog, I inadvertently prevented all comments from being shown to me unfortunately.  While I think I have a decent reader base, I had wondered why no one left any comments.  Heck, I see questions posted all the time in the forums about some of the problems. 

Hopefully though this will answer any questions on why your comments did not show up and hopefully I will see a few comments from time to time.

Some Input Fields Are Yellow

Sunday, December 30, 2007

Sometimes when you view your form in a browser, you might notice that your input fields are yellow.  This usually has nothing to do with Expression Web or FrontPage.  It is actually Google that is causing this problem.  I have it disabled on Internet Explorer. 

To check the settings, go to the Google Toolbar Settings button - and Options.  In the dialog box that comes up, uncheck the Autofill in the Features tab.  This should fix this issue on your computer.  You can also read more about the Google Toolbar on Google's website.

My Changes Are Not Showing Up

Friday, December 07, 2007

Sometimes when you make changes on your web page, you do not see those changes because of your temporary Internet cache settings.  Basically, when you go to a website, images and files are cached locally to help speed up the loading of that page.  Even sometimes a refresh might not show your changes.

Clear Your Temporary Internet Cache

You can clear your temporary Internet cache by going to Tools - Internet Options on Microsoft Internet Explorer.  In the General tab, you should see Browsing history.  Choose the Delete Files button.  This will bring up another dialog box.  Under the Temporary Internet Files, choose the Delete Files button to clear your temporary Internet cache.  Make sure you are on on your website when you do this.  Now choose Close and hit OK.

Another way to do this is while you are on your web page is choose CNTL-F5 to do a "hard refresh" of the page.

Another Contest from LoudExpressions

Wednesday, December 05, 2007

Christmas is around the corner.  You might need Expression Web for your New Year's Resolution?  If so, we have it for you.  Create a blog about Expression Web and link back to LoudExpressions.  Once you write your blog, send the (perma)link over to me.

Deadline for Contest

The deadline for the contest is 28 Dec 2007, midnight Mountain Time.  The winner will be announced that following Monday.  So maybe you have a New Year resolution to move to a program that will help you create better and compliant HTML and XHTML coding? 

Miscellaneous Information for the Contest

You can be entered only once. You can check out our Private Policy and the Terms of Service.  The contest will be ran much similar to the last contest.

XML Sitemaps

Saturday, November 24, 2007

More and more search engines are relying on XML sitemaps to help spider your website.  There are many ways for you to create an XML sitemap.  One of the programs I use is the Google Sitemap Generator.  One of the better things about this program is that there is no limit to the number of pages. 

Google offers an easy way to submit your XML sitemap via their Webmaster Tools.  In Yahoo!®, you can use their Site Explorer.  And on ask.com, you can submit your XML sitemap by entering http://submissions.ask.com/ping?sitemap=http://www.loudexpressions.com/sitemap.xml into your address bar (of course replacing the path to your XML sitemap.

And one way that most search engines are relying on to locate your XML sitemap even if you do not submit it, is via the robots.txt file.  Enter:

Sitemap: http://www.loudexpression.com/sitemap.xml

into your robots.txt file (once again replacing the path to your XML sitemap).  This autodiscovery of your XML sitemap will make it easier. 

I still rely heavily on Google Webmaster Tools and Yahoo!® Site Explorer to help ensure the websites are updated.

BlogRush

Wednesday, October 31, 2007

It seems to be something similar to MyBlogLog. If you think this is something you might be interested in, please contact me so I can refer you.  They give some type of credit if for the referrals so it would be appreciated.  And I promise even though I might be busy since the Internet was down, I will get to those messages as soon as possible.

You might want to check my Twitter account as well just to make sure I am at home.  It seems like Twitter can be fun at times, especially if you have a life.  I don't really, but then again, it seems like I am always so busy.

Also, you can learn more about BlogRush on their FAQ page.

How Coordinates are Chosen in an Image Map

Saturday, October 06, 2007

When you look at the source code of your HTML image map, you will see something like

<map name="FPMap0" id="FPMap0">
<area href="home.htm" shape="rect" coords="7, 8, 51, 39" />
<area href="faqs.html" shape="rect" coords="58, 9, 90, 40" />
<area href="contact.htm" shape="rect" coords="101, 7, 136, 44" />
</map>
<img alt="Image bar" src="images/image-bar.jpg" style="width:
150px; height: 48px" usemap="#FPMap0" />

The coordinates are chosen on the image. For example, in the above example, the rectangle starts at seven pixels over and eight pixels down.  Then it ends are fifty-one pixels over and thirty-nine pixels down.  You can see how this is counted using an imaging program, such as Photoshop, Fireworks, GIMP, etc.  When you use Frontpage or Expression Web to create the image map, you might not create the rectangle on the starting on the same pixel or ending on the same one.  However, understanding some HTML, you can edit the settings and the area elements will be the same.

<map name="FPMap0" id="FPMap0">
<area href="home.htm" shape="rect" coords="7, 9, 51, 40" />
<area href="faqs.html" shape="rect" coords="58, 9, 90, 40" />
<area href="contact.htm" shape="rect" coords="101, 9, 136, 40" />
</map>
<img alt="Image bar" src="images/image-bar.jpg" style="width:
150px; height: 48px" usemap="#FPMap0" />

Changing just a few numbers in the source code will have the area elements on the same row to have your image map a bit more perfect.  Now they all start nine pixels down and end at forty pixels over. 

If you have questions on how an image map is done in Expression Web or Frontpage, please ask at Expression Web and Frontpage Forum.  For HTML / XHTML questions, please ask at the International Webdeveloper's Network.

New Feed Added to Microsoft Expression Web Blog

Thursday, September 27, 2007

I could not decide what category to place this post in, so I finally chose the Miscellaneous category since I was thankful to Michael Duz of Search Engine Optimization for Site Owners and Small Businesses for pointing this out.

A post on Michael's blog, QR Codes, helps to explain this technology.  Now I can hope that since my T-Mobile Wing has a camera that at some point we might even see this hit the United States.

Free Expression Web Tool

Thursday, August 23, 2007

LoudExpressions is running a contest!  We are asking our readers to announce our blog in your blog.  We would like for you to write a blog linking to our website: http://www.loudexpressions.com.  Once you link to us, send us an email giving us the (perma)link.  This will be counted as four "points".

I Don't Have a Blog

If you don't have a blog, that's OK also.  We will also you a few ways to get more "points".

MyBlogLog

Thanks to MyBlogLog for offering a pro account to LoudExpressions, you join our MyBlogLog community and receive two "points".

Technorati

You can get one "point" by tagging us on Technorati.

Deadline

The deadline to enter the contest is 30 Sep 2007, 12 Noon Mountain Standard Time.  We hope that you will keep us tagged and you will stay in our community in MyBlogLog after this date.

Determining a Winner

We will export all the emails that we receive, review Technorati and check MyBlogLog for all the people who have joined.  We will then place these email addresses / users into a spreadsheet and allow Microsoft Excel to choose a random user.  Your email address will not be shared with anyone outside our blog. 

A winner will be announced on / about October 3, 2007.  This gives us time to verify all the links and emails.  The winner will be announced on the forum with a link to his / her blog or MyBlogLog Community if appropriate.  The winner will be contacted by LoudExpressions via email with a serial number to Expression® Web.

Miscellaneous

You can have up to seven "points" - one for the blog, two for MyBlogLog and one for Technorati.  Please also check out our Privacy Policy and Terms of Use.

LoudExpressions is Looking for Bloggers

If you like to write about Microsoft®, Expression® Web, Expression® Studio, Expression® Blend, Expression® Design, or Expression® Media, please contact us.  We will be happy to set up an account for you to add your posts to.  We prefer blogs relating to Microsoft® and the Expression® products.

If you would like, we will try to even do a video of your example to help others learn the Expression® Suite.

What's In It For You?

You will get promoted on our website and you will be able to help people with adjusting from Frontpage to Expression®.