jump to navigation

Add a background sound to your web page in Microsoft Expression Web November 16, 2009

Posted by minals in Expression Web Tips and Tricks.
Tags: , , , , , , ,
1 comment so far

You must have come across websites that play sound (some music) while you are visiting it. Some design sites, personal sites of stylists or e-cards and gift sites usually have such background sound, sometimes on the home page or to all the pages. Personally, I find it irritating. Though you can actually specify how many times the sound should be played after the page is loaded or should it be continuously played in a loop. But if you would like to add some music to your website, here is how you can do that.

To add a background sound

  1. Open the website and then open the web page in Design View.
  2. Right click the page and choose Page Properties.
  3. In the ‘Page Properties’ dialog box (see image below), under the General tab, in the Background Sound section, browse to the location of the sound file and choose the file and click Open.

    4. pg_prop

  4. In the same window, to choose the duration of the sound, do either of the following:
    • Check the Forever checkbox, to play the sound continuously unless the window is closed.
    • Uncheck the above checkbox and enter/choose an integer to play the sound for a fixed number of times.

NOTES:

  • The background sound would be added only on the page you are configuring on. To add it on other pages, follow the same steps on the other pages.
  • The <bgsound /> tag is added when you add a sound to the page. This featureis not supported in Mozilla Firefox browsers.

To remove a background sound, in the General tab of the Page Properties window, delete the location under the Background sound.

TIP: As a good practice, provide the users with an option to turn off the sound.

Import custom code snippets from Expression Web 2 to Expression Web 3 November 11, 2009

Posted by minals in Expression Web Tips and Tricks.
Tags: , , ,
3 comments

In my earlier article Insert Code Snippets in Microsoft Expression Web 3, we saw how to use the built-in code snippets and create your own snippets to make your coding speedier. But the custom code snippets that you created in earlier version of Expression Web (EW 2) are not accessible in EW 3. A simple solution to this is to import the code snippet xml file to your EW 3 and use it.

The built-in code snippets are found in these locations:

In Expression Web 2

C:\Program Files\Microsoft Expression\Web 2\Templates\1033\Snippets12\FPSnippets.xml

In Expression Web 3

C:\Program Files\Microsoft Expression\Web 3\en\Snippets\snippets.xml

Any custom code snippets you add are stored into your roaming profile. In Expression Web 2, they were stored at:

C:\Users\User Name\AppData\Roaming\Microsoft\Expression\Web 2\Snippets\SnippetsCustom.xml

In Expression Web 3, they are located at:

Windows Vista

C:\Users\ User Name\AppData\Roaming\Microsoft\Expression\Web 3\Legacy\Expression\Web 3\Snippets\SnippetsCustom.xml

Windows XP

C:\Users\ User Name\Application Data\Microsoft\Expression\Web 2\Snippets\SnippetsCustom.xml

Both these ‘xml’ files are different. While working in EW3, when you add code snippets they will be stored in the ‘SnippetsCustom.xml’ in Expression Web 3 folder.

To continue using the SnippetsCustom.xml from Expression Web 2 in Expression Web 3, before you start working in Expression Web 3, replace it with the one in Expression Web 2 folder. You need not delete the SnippetsCustom.xml that was created by default in Expression Web 3 folder, just rename it, and copy-paste the Expression Web 2 ‘xml’ file over here. Now you can use all your older snippets from Expression Web 2 in Expression Web 3 and any more you add would be updated in this file itself.

Set HTML rules to help search text in your code in Microsoft Expression Web November 9, 2009

Posted by minals in Expression Web Tips and Tricks.
Tags: , , , , , , , , ,
2 comments

We often use the Find and Replace tool (CTRL + F) to search for words, in our context, tags, elements, properties and so on in our page. But the same dialog box offers a cool feature of setting HTML rules in your search. These HTML rules let you add conditions as to where in your code to search. Let us take a look at how that can be done.

Follow these steps to set HTML rules for searching -

  1. Do either of the following
    • To search within a single page, open the page.
    • To search the entire site, open the site.
    • To search more than one page in a website, open the site and in the Folder List panel or the Site View, select the pages. Else open all those pages you want to search.
  2. Go to the Edit menu and choose Find… to find text, and Replace… to replace text. Both would launch the same Find and Replace dialog box, with different tabs selected by default.

    3. find_1

  3. Click on the ‘HTML Rules…’ button. The HTML Rules dialog box would be prompted.

    4. html_rules

  4. Click on ‘New rule…’ In the drop down box (left bottom corner of the window, choose to set the rule ‘Inside tag’ or ‘Not inside tag’. In either case, select a tag, from the other drop down. The rule would be created.

    5. html_rules_1

  5. To configure the rule, click on the ‘New rule…’ (appears as a child under the rule we created above, in the tree view). Choose the options in the bottom left corner for the rule. They are as follows:
    a.       With attribute: to search inside a tag with the given attribute. For example, inside tag <p>, search for only those tags that have attribute class = content_text.
    b.      Without attribute: to search inside a tag without the given attribute. For example, inside tag <p>, search for all other tags except for the ones with attribute class = content_text.
    c.       Containing: to search only if it is in another text or tag that you specify.
    d.      Not Containing: to search only if it is not another text or tag that you specify.
    e.      Inside Tag: to search only if it is in a tag that you specify.
    f.        Not Inside Tag: to search only if it is not in a tag that you specify. 
  6. To delete a rule, choose ‘Delete rule’ and to delete all the rules, choose ‘Delete all’.

Create a watermark in Adobe Photoshop CS4 November 3, 2009

Posted by minals in Photoshop Articles.
Tags: , , , , ,
add a comment

A Watermark is a faint text or a lesser visible image, embedded in your document or work, to personalize it and to protect it from its illegal use. In this article, we will learn how to create a watermark in Adobe Photoshop CS4.

  • A.      Create a new document
    1. Go to File > New. The ‘New’ window would be launched.
    2. Enter a name for the document.
    3. Enter the width and height (ideal would be 1600×1200).
    4. Enter a resolution of 300pixels/inch.
    5. Change the Background Contents to Transparent.

    •       new_doc_window

  • B.      Create the text that is to be watermarked
    1. Choose the Horizontal Type Tool from the toolbox.

      2.       hori_type_tool   

    2. Click and drag, then release the key to draw the text box. Enter the text you want to use as a watermark
    3. Choose a color for your text, by selecting the ‘Set the color’ button from the Formatting toolbar at the top of the window.
    4. Set the opacity to anywhere from 45% to 65%.
    5. You can add effects like drop shadow, bevel and emboss, outer glow, or any other to the text. In this example we will add drop shadow and bevel to the text. Select the text layer in the Layers palette and choose the ‘fx’ button in the bottom of the same palette (or double click on the layer). This will display the Layer Style window. Check the box next to Drop Shadow and play around with the options. Similarly check the box Bevel and Emboss and explore individual options, until you are satisfied with the resulting image.
  •  
  • C.      Save the image (in formats like png, gif or jpeg) and your watermark is ready for use.

Useful Resources for Microsoft Expression Web October 27, 2009

Posted by minals in Expression Web Tips and Tricks.
Tags: , , , , , , , , , ,
1 comment so far

Here are some websites and blogs that offer very informative tutorials, articles, tips, tricks, trainings, ebooks and other resources for Microsoft Expression Web.

  1. http://expression.microsoft.com/en-us/cc197140.aspx for tutorials, videos, free Expression Web templates.
  2. http://any-expression.com - is owned by Tina Clarke, who is a fellow Expression Web MVP. The site features plenty of tutorials, tips, ebooks on Expression Web and FrontPage.
    Her blog http://www.expression-web.net/ also offers useful Expression Web resources.
  3. http://by-expression.com features excellent Tutorials and Sample Sites by Expression Web MVP, Cheryl D. Wise. She also conducts trainings for EW.
  4. http://www.expression-web-designer-help.com/ is a great site to seek help in MS Expression Web, run by Jim Davidson, MVP Expression Web.
  5. http://www.expression-web-tutorials.com/ and http://www.expression-web-tips.com/
    Owned by Expression Web MVP, Patricia Ann Geary, these sites include EW tutorials, templates, tips and news on EW as well as FrontPage tutorials.

Style toolbar in Microsoft Expression Web 3 October 7, 2009

Posted by minals in Expression Web Tips and Tricks.
Tags: , , , , , ,
1 comment so far

You must be familiar with the Apply Styles and Manage Styles panels (earlier known as Task Panes). The Style toolbar has fewer but similar functions. The Style toolbar enables you to quickly use class and ID selectors, create new styles and attach existing ones.

But if you have been using the Apply Styles and Manage Styles panel, I would not suggest you to continue using it. Since the panel has lots of functions and options than the toolbar, in addition to a visual illustration of the styles. If you do not want your panels to eat up most of your workspace or want to use only primary functions of the Style toolbar, then it is one handy toolbar.

To launch the Styles toolbar

Right click on any toolbar and select ‘Style’. The toolbar looks like;

style_toolbar 

The toolbar has four functions –

1.       Class drop down:

Lists all class selectors that are defined in the internal CSS, linked or imported external style sheets. Use to assign, remove, change, or add an undefined class.

2.       ID drop down:

Lists all the ID selectors defined in the internal CSS, linked or imported external style sheets. Use to assign existing ID, create unique ID or remove any ID.

3.       New Style button:

Launches the ‘New Style’ dialog box.

4.       Attach Style Sheet button:

Launches the Attach Style Sheet dialog box as shown here:

attach_css 

NOTE: The Class and ID drop down boxes display the selectors only when your current selection in the page uses a class and/or ID selector. Else the boxes appear blank. Click on the drop down arrow to view the defined or create new selectors.

I am a Microsoft MVP! October 1, 2009

Posted by minals in Misc Ramblings.
Tags: ,
8 comments

I am a Microsoft MVP – Expression Web!

I want to share a great news with all ’saffronstroke.com’ readers. I have been awarded with the Microsoft Most Valuable Professional (MVP) award today, and I am very glad to have received this award.

MVP award is given to outstanding members from technology communities around the world, who share their expertise with others. This is a token of appreciation from Microsoft. I feel proud!

I feel my efforts have been recognized. I have been contributing Microsoft Expression Web articles regularly on www.dotnetcurry.com and http://saffronstroke.com. As I would like to thank my husband Suprotim for being my inspiration and encouragement, this would not have been possible without your comments and support either. So I thank you all! Keep the feedback coming in.

To add a line height to a paragraph using CSS in Microsoft Expression Web 3 September 23, 2009

Posted by minals in Expression Web Tips and Tricks.
Tags: , , , , ,
3 comments

There are two ways to do this with CSS;

  1. By assigning a line height to all the paragraphs:

    2. In the Apply Styles or Manage Styles panel (task pane in earlier versions of Expression Web) click on ‘New Style’. In the selector box, type in ‘p’ and in the Block category, enter a value for line-height, say 20px.

    new_style_line_ht  

    Now all the paragraphs will have a same line height of 20px. 

  2. If you do not want a same line-height for all the paragraphs, define a class selector and assign a line-height value. The class selector could be generic (.line_ht) or specific to paragraph element (p.line_ht). (Both these concepts are explained later in the article.) To define these styles follow the same steps given above in pt. 1. Then apply the styles to the paragraphs. 

Difference between Generic Class Selectors and Specific Class Selectors

A generic class selector could be assigned to any element like <div class=” line_ht”></div>. Unlike this kind of class selector, the specific class selector will be applied only to those paragraph elements that have a class attribute containing the word ‘line_ht’, and no other elements. 

Take a look at these examples to make things more clear;

/*Element Selector */

p { line-height : 20px;}

<p>This paragraph will have a line-height of 20px</p>

<div> This paragraph will have the default line-height </div>

 

/* Generic Class Selector */

.line_ht { line-height : 20px;}

<p class=” line_ht”>This paragraph will have a line-height of 20px</p>

<span class=” line_ht”>This paragraph will also have a line-height of 20px</span>

<div class=” line_ht”>This paragraph too will have a line-height of 20px</div>

 

/*Specific Class Selector */

p.line_ht { line-height : 20px;}

<p class=” line_ht”>This paragraph will have a line-height of 20px</p>

<p> This paragraph will have the default line-height <p/> 

To automatically add form tags around form controls in Microsoft Expression Web 3 September 16, 2009

Posted by minals in Expression Web Tips and Tricks.
Tags: , , , ,
add a comment

When you create a form, you add form controls to the form. In other words, form controls like textboxes, radio buttons, and check boxes are grouped inside form tags. But if you add form controls directly to your page, they are not enclosed within the form. But you can set Microsoft Expression Web to automatically add form tags around any form control that you add to your page. This will take care of the form controls if they are not already enclosed within the form tags.

To automatically add form tags around HTML form controls, follow these steps:

  1. Go to the Tools menu > choose Page Editor Options.
  2. In the Page Editor Options dialog box, click the General tab.
  3. Select the checkbox: ‘Automatically enclose form fields within a form’.

    page_ed_opt

Customize the appearance of Code and Design View in Microsoft Expression Web 3 September 9, 2009

Posted by minals in Expression Web Tips and Tricks.
Tags: , , , , , , , ,
2 comments

As you create a new page and start adding content to it, or when you open an existing page, the way it appears in Code view or Design view is laid down by Expression Web. For instance, in Code view normal text appears in black, HTML comment appears in gray, in Design View Layout table border is green in color and so on .This is so that you can differentiate between the different elements and content on your page. But you can always customize them according to your liking.  

To customize colors and font in Code and Design View

  1. Go to Tools menu > Page Editor Options.
  2. In the Page Editor Options dialog box, switch to Color Coding tab.
  3. The default selection is Code View unless you changed it. Choose the view you want to customize.
  4. Choose an item from under the Display items box and select Item Foreground, Item Background and Font style.

    5.  page_ed_color_coding

  5. Click OK.