Creating Hyperlinks and applying Styles to them in Microsoft Expression Web
Posted by: Minal Agarwal ,
on 2/22/2009,
in
Category Expression Web
Abstract: A website is made up of multiple pages that are linked to each another. And this is achieved through hyperlinks. What are these hyperlinks, how to create them and change their look and feel dynamically through Expression Web? This article will throw light on all these aspects of web designing.
Creating Hyperlinks and applying Styles to them in Microsoft Expression Web
A website is made up of multiple pages that are linked to each another. And this is achieved through hyperlinks. Hyperlink is a link, reference or a navigation element (can be text or image) in a document to a place within the document or another document. In this article we would learn how to create hyperlinks in Expression Web and play around a bit with stylizing them.
In this example we have added two elements; a bit of text - ‘more...’and a green arrow image. As mentioned earlier we can create image or text as our hyperlink. Steps to create hyperlinks:
1. To insert hyperlink for the image, right click on the image and from the menu choose ‘Picture Properties’. In the General tab, the last section reads ‘Hyperlink’. See image below:
Browse to the file location by clicking on the ‘Browse’ button.
Select the page, file or go to the bookmarks in the same page (if you have created any) by clicking on ‘Bookmark’ and choose the same. Click on OK to close Edit Hyperlink window.
In the Hyperlink section of Picture Properties, you can choose the ‘Target Frame’ for this link by clicking on the small pencil like icon. Target frame defines where the linked (target) document will be opened. Choose the suitable option, click on OK to close first close the Target Frame window and then the Picture Properties window. Your hyperlink is ready for use. Save your page and preview it in the browser. You will notice a significant change in the image; it has got a blue outline. As you click on the image the linked page would be opened or you would be taken to another location in the current page (in case of bookmarks) depending upon where it is linked.
2. To assign a hyperlink to text, select the text, right click and choose ‘Hyperlink’ from the menu.
This would prompt the ‘Insert Hyperlink’ window which is similar to the ‘Edit Hyperlink’ window we saw earlier. Choose the page or bookmark to which you want to link and click on OK.
This was pretty simple, wasn’t it? Well now let us play around a little with these links. Switch to the Code view or Split view and take a look at the code. You would now notice that the image/text we entered in the page earlier is surrounded by <a></a> tags. A hyperlink is nothing but <a> tag, the anchor element with a ‘href’ attribute that references to the path of a document/bookmark in the same document. Before we proceed to changing the states and styles of the hyperlinks, let me take you through some basics of pseudo-classes.
What is a Pseudo-class?
A Pseudo-class lets you assign a style to structures that do not necessarily exist or are not deduced fromthe document tree. They can be static and dynamic. Here we will learn the static and dynamic pseudo-classes related to anchor elements.
Anchor Pseudo-classes
By looking at the markup of a link i.e. the anchor tag you cannot make out if the link is visited or unvisited. By default the colors of an unvisited link is blue with an underline and a visited link is purple. But you can change the appearance of these links. For this CSS 2.1 has defined different pseudo-classes;
Link pseudo-classes
|
:link
|
Refers to any anchor element that is a hyperlink (that has an ‘href’ attribute) and points to an address that has not been visited.
|
|
:visited
|
Refers to any anchor element that is a hyperlink to a visited address.
|
Dynamic pseudo-classes
CSS2.1 has defined three pseudo-classes that can change an element/document's appearance as a consequence of user actions. These dynamic pseudo-classes are usually used to style hyperlinks, but they can be used to change form of other elements too.
|
:active
|
Refers to any element that has been activated by user action. For instance, the link is active only for the time between which it was clicked by holding down the mouse button and releasing it.
|
|
:focus
|
Refers to any element that currently has focus activated by keyboard or any other user action.
|
|
:hover
|
Refers to any element over which mouse pointer is placed (hovered).
|
Ordering link styles
Whenever you define your styles for the anchor element, it is often recommended that you follow the below order:
:link {color: blue;} /* unvisited links */
:visited {color: purple;} /* visited links */
:hover {color: orange;} /* user hovers */
:active {color: red;} /* active links */
If this order is not followed the styles will always override each other. For example, if you order your styles as given below:
:hover {color: orange;}
:active {color: red;}
:link {color: blue;}
:visited {color: purple;}
None of the links will show hover or active, since the later two styles viz. link and visited styles override the hover and active rules. Mostly such conflicts arise only when all the states try to style the same property, say ‘color’ as seen in the above example. But if all the states are styling different properties then the order does not matter. For example,
:link { font-style: italic; }
:visited { font-weight: bold; }
:hover {font-size:16px;}
:active {background-color: silver;}
Though the order of ‘:link’ and ‘:visited’ styles can be interchanged it is always preferred to stick to the order ‘LVHA’ or ‘LoVeHA’ (easy to remember) since it is recommended by CSS2 specification.
Let us now define a style for all the anchor elements. In the Manage Styles/Apply Styles task pane, click on ‘New Style…’ to open the New Style window as shown below:
As shown in the above image, choose ‘a’ tag from the ‘Selector’ drop down box. The ‘Define in’ option lets you define the style in current page, create New style sheet or add in Existing style sheet. Choose the existing style sheet if you have already created an external style sheet by browsing to the location. As you proceed to the heading ‘Categories’ you have various options to choose from the given list. Each category has a number of properties and attributes that you can set in the other part of the window. For instance in Font category, choose ‘font-family’, font-size, color, and similar options. Set the desired style for your anchor and click on OK. The style will be applied to all the anchor tags in the document.
You can be more specific as to which anchor elements you want to style by providing the hierarchy (Descendant selectors) as shown below:
This style is defined for all the anchor elements (<a>) that are descendant of paragraph elements (<p>) and all anchor elements that are a part of list items (<li>) that are in turn a part of ordered list elements (<ol>).
Let us now see how to define pseudo-classes. Choose New Style in the Manage Styles/Apply Styles task pane as we did in the above example. In the New Style window, in the Selector box, type a:link, define all the properties and attributes you want to change. Similarly create styles for a:visited, a:hover and a:active in the same order as we have already seen. (LVHA)
Save and Preview the page in the browser and try these various actions.
Conclusion
In this article we have learnt how to create hyperlinks in Microsoft Expression Web. We also saw what pseudo-classes are and how to style the hyperlinks with these link pseudo-classes. I hope this article was helpful to you and I thank you for viewing it.
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (
SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called
Foodatarian.com. Follow her on twitter @
saffronstroke