Saffron Stroke - Your Web Design Resource » Expression Web

Draw 3D Text in HTML 5 Canvas and Expression Web

Minal — Sun, 18 Dec 2011 06:21:59 +0000

One of the most exciting additions to web pages by HTML5, is the Canvas element

You can draw graphics such as lines, arcs, curves, circles, shapes and create nice effects etc., directly into the canvas element. In this article, I will demonstrate how to draw 3D text in HTML 5 canvas. The source code link is given at the end of this article. We will be using Expression Web (with sp2) as our web editor. Make sure that the doctype is set to HTML 5.

Step 1: HTML

Here’s the HTML needed to declare a canvas element on our page

Here we have added the canvas tag to the HTML code and defined the height and the width attributes with the value 200 and 400, meaning that the canvas should be 200 pixels tall and 400 pixels wide

Step 2: JavaScript Code (onload function)

Write the following JavaScript code. I will explain the code in a bit. We have also defined a drawTextInCanvas function to draw the layers and cast shadow on these layers

On the onload function(), we first retrieve the canvas object using its id attribute value (3DCanvas) in the getElementById method. This allow us to get a reference to the 2D drawing context.

Note: “3D Context” is WebGL

Next we retrieve the height and width of the canvas object. We get a reference to the 2D drawing context and store it in the ctx variable. Once we have got a reference to the 2D context, we make a call to an HTML5 Canvas API function font, fillStyle and textAlign.

drawTextInCanvas() function

In the drawTextInCanvas function, we have used a loop to draw multiple layers of text one on top of the other, to create a 3D effect. The last parameter ‘4’ that you see in the drawTextinCanvas() function, represents the depth, where four layers are drawn one over the other.

The shadowBlur, shadowColor and shadowOffset is to apply a soft shadow beneath the text. Finally the fillText() call prints the text on the position specified and you should see the following

Download the 3D Text in HTML 5 and Expression Web source code

See a Live Demo

Expression Web 4 Service Pack 1 available!

Minal — Mon, 28 Mar 2011 10:53:00 +0000

Expression Web 4 Service Pack 1 has been released. The Service Pack 1 provides support for HTML 5, CSS 3 and PHP 5.3 in Code Editor and significant support in Design View. SP1 also has some major fixes and improvements to SuperPreview online service, IntelliSense for Extended Characters and file management.

To know more about the features in Expression Web 4 SP1 read What’s new in Expression Studio Web 4 SP1 and the Description of Expression Web 4 Service Pack 1

How to install the Service Pack?

Download the service pack from Microsoft Download Center by visiting this link.

How to determine whether Expression Web 4 SP1 is Installed?

In Expression Web 4, go to About Microsoft Expression Web.

If Expression Web 4 SP1 is not installed, the following version number appears:
(English language) Microsoft Expression Web 4 Version 4.0.1165.0 and (Non-English languages) Microsoft Expression Web 4 Version 4.0.1170.0

If Expression Web 4 SP1 is installed, the following version number appears:
Microsoft Expression Web 4 Version 4.0.1241.0

HTML 5 Add In for Expression Web 4

Minal — Sat, 26 Feb 2011 06:30:35 +0000

You must be aware of HTML 5 is going to be the all-in-one standard replacing HTML 4.01 and XHTML 1.0 So with HTML 5 becoming a web standard, the Microsoft team has come up with an add-in for EW4 that will enable the new HTML5 schema to check your code markup for errors and give IntelliSense for HTML5 tags, attributes and values in the code view.

EW 4 has a doctype for HTML 5. To use the HTML 5 doctype in Expression Web 4, follow these steps:

1. Tools > Page Editor Options… > Authoring tab.

2. Under the Doctype and Secondary Schema section, choose the Doctype and the secondary schema (from the drop down menu) as HTML 5.

So now all your new documents will have the HTML 5 Doctype and it is written as;

Now you can create HTML 5 pages by hand. The HTML5 Schema Configuration Add-In for Expression Web enables the new HTML5 schema to check your code markup for errors and gives IntelliSense for HTML5 tags, attributes and values in the code view.

Download the HTML5 Schema Configuration Add-In for Expression Web and follow these steps for installation”:

1. Launch EW4.

2. Tools > Add-Ins… In the Manage Add-ins dialog box, click on Install.

3. In the Open Expression Web Add-in File dialog box, browse to the directory where the add-in was saved and click Open. The add-in will be installed.

4. Click ‘Yes’ when Expression Web asks you to enable the add-in. If the add-in has been installed correctly, it will be listed in the Manage Add-ins dialog box as shown here;

5. Close the session of EW4 and run it as Administrator (right click on EW4 icon and choose Run as administrator). An HTML 5 button will now appear on the Standard Toolbar, as shown here;

6. Click the button to configure the HTML 5 schema.

7. Click on Enable HTML 5 button to update the EW HTML 5 schemas. Close the dialog box and restart EW4.

8. Now set the Doctype and Secondary Schema to HTML 5 under Tools > Page Editor Options… > Authoring tab.

Expression Web 4 now provides IntelliSense for HTML 5 elements, attributes and their values.

Read more about the HTML 5 add-in over here.

Designing the Table Layout for Multiple Resolutions in Expression Web 4

Minal — Thu, 17 Feb 2011 06:00:09 +0000

With the advent of CSS layouts I prefer not to use tables for laying out my web sites. But there are many designers/developers who still go in for tables. Expression Web also gives you tools to build a layout using tables. Learn more about Table Layouts in Creating Layout Tables in Microsoft Expression Web

How will you make sure that your page is rendered properly in browsers using minimum screen resolution or using the highest resolution? Here are some tips of how you can achieve that.

a. Keep at least one column variable

If your layout is made up of 2 columns where in the left column has all navigation links. It is advisable to fix the width of this column and leave the right column to configure the rest available space. This can be applied to a 3 column layout too.

b. Use Stretch Layouts

If you are using the 1024 x 768 screen resolution while designing the page and you know there could be readers who may use a lower resolution, then set your main page content table to a width of anywhere between 90-95%. This will leave buffer space around the table helping it look clean in a lower resolution.

c. Make the lowest resolution as baseline to build websites

If you build your layout using the lowest resolution (800×600) so that the table fits well in it, when viewed in the higher resolution your page will still look nice. To give you a tip, you can set a contrast background color, or add border or a shadow effect to the table to make it stand out from the body. This can be used with the stretch layouts too.

Choose any one of these that suits your requirements.

SuperPreview Online Beta Service

Minal — Thu, 27 Jan 2011 06:30:13 +0000

The Microsoft SuperPreview online beta service extends the capability of SuperPreview to include more browsers and Operating Systems. You can activate the online service right inside SuperPreview. To know more about Expression Web 4 SuperPreview read Expression Web 4 SuperPreview – A closer look

To sign up for SuperPreview online service:

1. Launch SuperPreview and click on the Sign-up button on the toolbar. Access to SuperPreview online service is available only to users who have purchased or upgraded to Expression Web 4.

In the information box, read the information and click on Sign up.

2. Enter a valid email address and then click on Next.

The activation email will be sent to this email address. The activation wizard gives you an option to resend the email if you have not received it. Also check your Junk/Spam folder.

3. Login to your email account and open the activation email. Follow the instructions given to validate your email address.

4. Go back to the session of SuperPreview and Click Activate.

To deactivate SuperPreview online service:

1. Click on Options.

2. In the Options dialog box, click Deactivate.

To delete your SuperPreview online service account:

1. Click on Options.

2. In the Options dialog box, click Delete account.

NOTE: When you delete your SuperPreview account, all the instances on SuperPreview online service will be disabled. To enable it you will have to sign up again.

Most Popular Web and Graphic Design Posts of 2010 – SaffronStroke.com

Minal — Fri, 31 Dec 2010 05:00:30 +0000

As we bid adieu to the year 2010, it is time to sum up the posts on SaffronStroke.com, based on their popularity. So here is a list of 25 top tutorials and posts of 2010.

Adobe Photoshop Tutorials

1. Transform a Picture into a Watercolor Painting using Photoshop CS5

Cool watercolor effect using Photoshop CS5, in easy steps.

2. Create Water Drops in Photoshop CS5

Create realistic water drops using Photoshop CS5.

3. Create a Page Curl Effect using Photoshop CS5 in 5 easy steps

The tutorial explains the method to create a page curl effect in just 5 easy steps.

4. Simple Lighting Effect in 3 steps using Photoshop CS5

Add simple lighting effect to focus on one point of the picture, using the ‘Render filter’.

5. Layer Styles in Photoshop CS5

Layer Styles are special effects applied to individual layers in Photoshop. Explore Preset Layer Styles and create Custom Later Styles in this tutorial.

Adobe Illustrator Tutorials

6. Create 3D Text using Adobe Illustrator CS5

You do not always need a 3D application to create beautiful 3D text. Adobe Illustrator and Adobe Photoshop has tools that can do the needful. This tutorial explores the tools to create a 3D text in Illustrator CS5.

7. Create an Abstract Wallpaper in Adobe Illustrator CS5

You must have seen and used abstract wallpapers on your desktop. Windows Vista comes with such cool abstract background too. I thought of creating one myself. This was my first attempt and I am quite impressed with it (though certainly not my best) You can use your own creativity and art to create such interesting wallpapers using the method given in this tutorial.

8. Tracing Artwork using Adobe Illustrator CS5

You may need to trace an image or a picture to create your own graphic based on it. Adobe Illustrator has a ‘Live Trace’ command that helps you automatically trace the artwork. Or you can always manually trace the artwork by using the base artwork as a ‘template’ and then using the pen or brush tool to draw. In this tutorial, you will learn both these methods.

9. Glossy buttons in Adobe Illustrator CS5

I have come across many clients who want a Web 2.0 style buttons, icons and logos. Though I haven’t found any specific features in a Web 2.0 button or logo but the objects are usually elegant, clean, with lots of gradients, shiny and they stand out. In this tutorial we are creating a Web 2.0 button (if it falls in that category) or should I say a glossy button.

10. Create a 3D Push Pin using Illustrator in 10 simple steps

This is a simple Illustrator tutorial on how to create a 3D push pin in 10 easy steps.

11. 3D Fruit Bowl in Adobe Illustrator CS5

This tutorial explains how to create a 3D Fruit bowl and place 3D fruits in it.

12. Creating Scatter Brushes in Adobe Illustrator CS5

Scatter brushes as the name suggests, scatter a pattern along a path. You may use scatter brushes to create an artistic background. In this tutorial, learn how to create a scatter brush. You may also like Create an Art Brush in Adobe Illustrator CS5 and Make Vector Pattern Brush in Adobe Illustrator CS5.

13. Create a mirror effect using Opacity Mask in Adobe Illustrator CS5

These days graphic designers and other digital artists create classy mirror or reflection effects in their art work. Mirror effect looks pretty nice and elegant for logos. In this tutorial, learn how to add mirror effect to your logo using the Opacity Mask in Adobe Illustrator CS5.

14. Placing Text in Adobe Illustrator CS5 document from other Word Processing Programs

To place text into your Illustrator documents, you can always open the source document, copy and paste the text into Illustrator. Another way to do this without taking the trouble of opening the source document, is by importing the documents in Illustrator. Learn how to import other documents into Illustrator in this tutorial.

Expression Web Tutorials

15. Add templates to Expression Web

Expression Web comes with a set of built-in templates that help you create your own website, without requiring many efforts. Although some tweaking is required! To design professional websites you ought to have plenty of site templates for your use. You can create your own or purchase them from other websites. Add these templates to Expression Web and keep them handy. In this article you will see how to add downloaded templates to Expression Web.

16. Free Expression Web Template for Small Business

The ‘Small Business’ template as I call it, is a simple website template, built using CSS (Cascading Style Sheets) and DWT (Dynamic Web Template). The template suits best for a small business firm as well as for personal use. The template is completely customizable, so you can change the appearance as you like.

17. Get rid of the dotted border from a focused hyperlink

You must have observed this behavior that when you click on a hyperlink it is surrounded with a dotted border. But you can get rid of this temporary border with a very small piece of code. Learn about it in the article.

18. Publishing Settings in Expression Web

Microsoft Expression Web supports different publishing settings. You can choose to work on your own computer and then publish your site/changes to your site onto the remote production web server or you can work on a remote staging server and publish on the production web server or work directly on the remote production web server. .Learn about it in the article.

19. Add or remove metadata in Expression Web

Microsoft Expression Web requires metadata to maintain a whole bunch of cross-page dependencies features like hyperlinks, DWTs and some site reports. Learn how to add or remove metadata in Expression Web in this article.

Create Custom Toolbars in Expression Web 4

Minal — Fri, 10 Dec 2010 14:33:20 +0000

You could customize toolbars and menus in the earlier version of Expression Web. Expression Web 4 comes with eleven toolbars, which are populated with most of the commands we may require like the Code View, Style, Style Application and Dynamic Web Template. So you may need customization only if you often use commands from various toolbars, and you do not want all those toolbars eat up unnecessary space in your application.

Free Custom Toolbars add-in for Expression Web 4 lets you create your own toolbars to organize your commands and buttons.

Let us see how to install and use the add-in.

1. Download the add-in here

2. Make sure the Expression Web 4 application is closed before you begin the installation process. Double click the ‘ExpressionWeb4CustomToolbars.msi’ file and follow the instructions to install the add-in.

3. Start Expression Web 4 and you should be able to see the ‘Customize Toolbars’ button as shown below:

This button is nothing but your Favorites Toolbar. It should be visible as soon as you install the add-in, but if not visible already, do either of the following:

a. View > Toolbars > Favorites

b. Right click on any existing toolbars and choose ‘Favorites’.

All I know about the Favorites Toolbar is, that you can use it to create Custom Toolbars and it does nothing else but keeps sitting there unless you turn it off. I would prefer to turn it off by following steps (a) or (b) given above.

4. To create a custom toolbar, click on the ‘Customize Toolbars’ button (if already open) or Tools > Customize Toolbars…, to open the ‘Customize’ window as shown below:

as shown below:

5. Click on ‘New’ and enter a name for the toolbar. Click OK to close the New Toolbar box.

6. In the Customize dialog box, choose the items you want to place on the toolbar from the left column and click Add. Remove and Remove All buttons will help you remove an item from you list. The up and down arrows will help you reorder the items on the toolbar. When done, click OK to exit.

Your custom toolbar will now appear below the other toolbars already open in Expression Web 4 and will be ready to use.

I hope you found this article useful and I thank you for reading it.

Manage websites using hidden metadata files in Microsoft Expression Web

Minal — Wed, 15 Sep 2010 06:06:48 +0000

In case of local websites, when you update a DWT (Dynamic web Tempate) and save it, only the open pages that are linked to the DWT are updated. Closed pages will not be updated. But if ‘Manage the web site using hidden metadata files‘ option is turned on, then with the help of the hidden metadata files, all the related pages will be updated.

Pages will not be updated if hidden metadata is not allowed. So to turn that on;

Go to Site > Site Settings > General tab. Check the box next to the option ‘Manage the web site using hidden metadata files’.

Once the hidden metadata is enabled, even if you move the files within your website, the links (in both open and closed pages) to these files will be automatically updated.

In case of live sites, if you are using FTP with Expression Web then you should be able to enable hidden metadata files in the same way as you did in local websites.

FP Cleaner Utility for Expression Web 4

Minal — Mon, 06 Sep 2010 07:08:02 +0000

FP Cleaner Utility Tool has been created by MVP Steve Easton. It has been updated to work with Expression Web 4 (along with the earlier versions). You can download it here.

The FP Cleaner is very helpful in cleaning up the temporary files and any issues that may occur while using Expression Web. FP Cleaner does not require any installation and can be run from desktop. The interface looks like this:

Roll over each option to know more about it. Lets take a look at the interface;

a. Restore Default Toolbars and Menus – This option is not available in Expression Web 4 since the feature of customizing toolbars is no longer available in Expression Web 4. However you can use this option in the earlier versions of EW.

b. Change the “Open Last Web” Setting – This options lets you change the Open Last Web setting, if you have set EW 4 to open up the last edited web when the program starts. In case the web has any problems, it can cause the program to open and freeze. So this way you can make sure the last edited web is not opened.

c. Clear the Hidden “Temporary” Files – The option first checks for existence of any Temporary directory for the logged on User and if it exists, clears the directory by sending the files to the Recycle bin.

d. Clear the Hidden Cache (*.web) Files – There is web cache file (*.web) for each web and for each web location you create. If these files corrupt then you could face problem opening or closing or publishing your web site. This option deletes these files and forces creation of new clean files when each web is opened or published.

d. Clear the Find Replace MRU List – clears the Most Recently Used ( MRU ) list of Find/Replace entries that are saved the system Registry every time you use Find/Replace to replace words or HTML items using Expression Web.

e. Start – Will launch Expression Web 4.

f. Close – Closes the FP Cleaner program without running it.

g. Info – Displays the basic information about the program (as seen in the above image).

h. Properties – opens the Windows file properties dialog for EWFPCleaner.exe.

You can download the FP Cleaner for Expression Web 4 for free.

Expression Web Community Toolbar

Minal — Tue, 31 Aug 2010 03:00:45 +0000

What is an Expression Web Community Toolbar?

The Expression Web Community Toolbar is a tool which makes it very easy to access all important Expression Web related links and resources. This toolbar is created by fellow MVPs Tina Clarke and Pat Geary and is free for download.

The toolbar includes all of the Expression Web versions 1, 2, 3 and 4 as well as these Expression applications;

- Expression Design
- Expression Blend
- Expression Encoder

The toolbar has different categories in which chosen Expression Web sites (sites that provide you with quality information about Expression Web) are grouped and organized into:

- Expression Web links
- Expression Web Blogs
- Expression Web Tweets
- Web Design Links

Each of these sections will expand to show sub-categories and links within them.

What is included in the Expression Web Community Toolbar?

Expression Web Links:

Expression Web Blogs:

Expression Web Tweets:

Tweets from the Twitter id expressionweb where 3rd party links to tutorials are posted and you might find them helpful.

Web Design Resource Links:

help you with Web Design in general.

It also includes links for Contests, Giveaways and special offers for Expression Web 3.0 and 4.0. If you want to know what Expression Web Communities, Webcasts and Live Events might be available? Those are included too.

NOTE: A ticker will display latest breaking news or special offers.

There are some additional options on the toolbar which will allow you to add other applications to the toolbar. Click on the black arrow next to Expression Web and choose ‘Toolbar options’. Then choose ‘Useful Components’ tab. Check the applications you’d like to show on toolbar and click OK.

How will the toolbar benefit me?

What do you do when you need information or tutorials about Expression Web? You either search them on various search engines or scan your bookmarks for any sites you visited earlier and have bookmarked them. What if you have not bookmarked them? Then you will have to spend good amount of time in searching for the resources. Here the toolbar would come to your rescue.

What could be more convenient than having everything in one place so everyone can freely access latest news, articles and tutorials. The Expression Web Community toolbar is updated regularly with the latest tutorials, links, news, updates. Look for “NEW LINKS – LOOK HERE FIRST” with a date for the newest offerings.

How do I download and install this toolbar?

You can download the toolbar over here.

Then run the executable file, follow the wizard and the toolbar would get installed on your default browser (that’s what it did on my Windows 7 machine).

Can I also add a resource to the toolbar?

Of course you can. Read more about the Expression Web Community Toolbar.