jump to navigation

Positioning Toolbar in Microsoft Expression Web 3 January 29, 2010

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

You can position elements on a page by setting their CSS-based properties in CSS Properties panel or the Positioning Toolbar. The Quick Tag Selector menu also has the Positioning option to help you quickly and precisely set the positioning style for a tag. Here we will explore the Positioning Toolbar.

Positioning toolbar can be made visible by right clicking on any toolbar and choosing Positioning from the menu. The toolbar looks like:

image

Let us explore each of these options:

1. Position Property button: Lets you set the position of the current element to absolute, fixed, relative, static or None.

2. Left, Top, Right and Bottom values: Use to position an element relative to its containing element.

3. Width and Height values: Use to set the dimensions.

4. Z-Index: To set the z-index of an element.

5. Bring Forward: To bring an element forward in the z-axis order by increasing its z-index value by 1.

Technorati Tags:

6. Send Backward: To move the element behind in the z-axis order by decreasing its z-index value by 1.

Add code bookmarks to your code in Microsoft Expression Web 3 January 16, 2010

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

The new Code View toolbar in Expression Web 3 or Edit > Code View submenu allows you to temporarily bookmark particular portions of code of your web page, so that you can quickly visit that location whenever you want. These code bookmarks are different from the HTML anchors. HTML anchors are hyperlinks to locations inside a page, other pages or site. But code bookmarks are temporary and they let you navigate throughout the code in your document. They can be added only in the Code view of a page and are deleted as soon as you close the page.

To add or remove a code bookmark

1. Switch to Code View or Split View in your Expression Web 3 workspace.

2. Place your cursor at the position where you would like to add a bookmark.

3. Do either of the following:

· Right click on any toolbar, choose Code View. In the Code View toolbar, click on the Toggle Bookmark clip_image002 button.

· Go to Edit > Code View > Toggle Bookmark.

· Key in the shortcut keys CTRL + F2.

To navigate through all the bookmarks

1. In Code View or Split View do either of the following:

· In the Code View toolbar, click on Next Bookmark clip_image004 or Previous Bookmark clip_image006 button.

· Go to Edit > Code View > Next Bookmark or Previous Bookmark.

To customize the color of the code bookmark

1. Go to Tools > Page Editor Options.

2. In the Page Editor Options dialog box, go to the Color Coding tab and follow these steps:

image

To remove all the code bookmarks from the page

1. In Code View or Split View do either of the following:

· In the Code View toolbar, click on Clear Bookmarks clip_image010 button.

· Go to Edit > Code View > Clear Bookmarks.

Change color scheme of Expression Web 3 SP 1 interface January 6, 2010

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

With Expression Studio 3, Expression Web 3 has got a new look with gray color scheme. I like it and I am not quite fond of changing the color scheme while working! But for people who like to change the interface color, SP 1 (Service Pack 1) for Expression Web 3 has given you an option to use your current Windows color scheme as your Expression Web color scheme. How do you do this? This is how;

1. Right click Desktop, choose Personalize.

2. In the Window Color, choose a color scheme that you like and click OK.

3. Close the dialog boxes.

4. In Expression Web 3 SP1 go to Tools > Application Options > General tab > General section > check the box -  ‘Use your current Windows color scheme’ > OK.

5. Similarly you can use any and all color schemes given for Windows in your EW3 SP1.

Create elegant gradient typography in Photoshop CS4 December 11, 2009

Posted by minals in Photoshop Articles.
Tags: , , , , ,
2 comments

In this article we will create a clean, elegant, gradient typography as shown below:

image

Follow these steps:

1. Launch Photoshop CS4.

2. Set the Background color (small overlapped square) in the Tools panel (docked to the left of the main window by default) is set to black. By default the Foreground color is black and background in white. Click on the double arrow sign next to the boxes to interchange the colors.

clip_image002[7]

But you can click on any of the boxes and choose a new color for foreground and background.

3. Key in CTRL + N or Go to File > New. In the New dialog box, specify the dimensions as Width – 300px and Height – 200px. Choose the Background Contents to Background color.

clip_image004

4. New document with a black background (or a background you have chosen).

5. To create a gradient effect on the background we can use two tools:

a. The Gradient tool

b. The Brush tool

In this example we will use the regular brush tool to create a light gradient to the document. Create a new layer by clicking on the Create a new layer icon in the Layers Panel.

clip_image006

Double click on the text Layer 1 and rename it to ‘Light Layer’. Keep the layer highlighted and follow the next step.

6. Set the background color to white. Choose the brush tool from the Tools Panel. In the Options bar at the top of the window, open the Brush Preset Picker by clicking on the small downward arrow and choose Soft Mechanical 500 pixels brush. Increase its Master diameter to around 615 px to get a better effect.

clip_image008

7. Now hold down the brush on the document, in the center or upwards, to adjust the angle of light as you want. Then reduce the opacity of the layer to get a subtle effect. See image below:

clip_image010

8. The background is now ready and it is time to add text to it. The text too will have a gradient effect. Choose the Horizontal Type tool from the Tools Panel and click on the document. Choose the font and other details in the Options bar. Start typing the text; in this case, we will just type ‘Some Text’.

image 

9. Now we would like to center the text; horizontally as well as vertically. For that, key in CTRL + A (to select all) or choose Select > All.

10. With the ‘Some Text’ as the active layer in the Layers Panel, go to Layers > Align Layers to Selection > Horizontal Centers. This would center the text horizontally in the middle of your document. Similarly to vertically center the text, go to Layers > Align Layers to Selection > Vertical Centers.

clip_image016

11. Now it is time to add the gradient and effects to the text. Double click the ‘Some Text’ layer to open the Layer Style dialog box. Click on Gradient Overlay.

clip_image018

Click on the Gradient box to open the Gradient Editor as shown below:

image

Choose the gradient by clicking on the small arrows and choose a gradient as shown above, which is white at the top and darkens to gray in the bottom of the text. Click OK in both the dialog boxes to exit. The gradient text is visible now.

clip_image022

Next we will add a shadow to the text to give it a raising effect. Again double click on the ‘Some Text’ layer and in the Layer Style window and click on Drop shadow. Choose the options as shown in the image given below:

clip_image024

Click OK to exit and we are done! The final document would look like this:

clip_image026

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: , , , , , , ,
3 comments

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: , , , , , , , , ,
3 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: , , , , ,
1 comment so far

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.