Add code bookmarks to your code in Microsoft Expression Web 3 January 16, 2010
Posted by minals in Expression Web Tips and Tricks.Tags: code bookmark, Expression Web 3, Expression Web code view, temporary bookmark
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
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
or Previous Bookmark
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:
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
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: color scheme, Expression Web 3, Expression Web 3 Service Pack 1, interface, SP1, windows color scheme
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: CS4, gradient effect to text, gradient typography, Photoshop, text, typography
2 comments
In this article we will create a clean, elegant, gradient typography as shown below:
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.
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.
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.
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.
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:
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’.
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.
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.
Click on the Gradient box to open the Gradient Editor as shown below:
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.
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:
Click OK to exit and we are done! The final document would look like this:
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: add media to web page, add sound to web page, Expression Web, Expression Web 2, Expression Web 3, Expression Web Tips and Tricks, HTML, website
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
- Open the website and then open the web page in Design View.
- Right click the page and choose Page Properties.
- 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.
- 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: code snippets, Expression Web 2, Expression Web 3, import code snippets from Expression Web 2
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: Expression Web, Expression Web 2, Expression Web 3, find, HTML, HTML rules, Microsoft, replace, set HTML rules, set HTML rules to find
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 -
- 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.
- 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.
- Click on the ‘HTML Rules…’ button. The HTML Rules dialog box would be prompted.
- 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.
- 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. - 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: articles, CS3, CS4, Photoshop, Photoshop tutorials, Tips and Tricks
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
- Go to File > New. The ‘New’ window would be launched.
- Enter a name for the document.
- Enter the width and height (ideal would be 1600×1200).
- Enter a resolution of 300pixels/inch.
- Change the Background Contents to Transparent.
- B. Create the text that is to be watermarked
- Choose the Horizontal Type Tool from the toolbox.
- Click and drag, then release the key to draw the text box. Enter the text you want to use as a watermark
- Choose a color for your text, by selecting the ‘Set the color’ button from the Formatting toolbar at the top of the window.
- Set the opacity to anywhere from 45% to 65%.
- 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: css, Expression, Expression Suite, Expression Web, Expression Web 2, Expression Web 3, HTML, Microsoft, tips, tutorials, website
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.
- http://expression.microsoft.com/en-us/cc197140.aspx for tutorials, videos, free Expression Web templates.
- 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. - http://by-expression.com features excellent Tutorials and Sample Sites by Expression Web MVP, Cheryl D. Wise. She also conducts trainings for EW.
- 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.
- 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.







