Creating Hyperlink Styles In Freeway

Unique hyperlink styles can be applied as a page-wide style, a general site-wide style, to an individual HTML item, or even to a specific class style. Currently there are four link states. These states are known as link, visited, hover, and active. What I mean by states is the way in which the hyperlink serves its current purpose on the page. It's more along the lines of the way they appear and function within a website. Let's go into a bit more detail with what each state means.

link - The link state will be how a hyperlink looks normally on the page. The link state is the first initial, un-hovered, un-visited, un-bothered state on the web page or website. This is what people see first.

hover - The hover state comes into play when a user puts their mouse over a link. The link can change it's appearance when hovered from a simple color switch to a change in font and size.

visited - The visited state occurs after a user has clicked on an item, went somewhere with it, and then came back. Often these share a similar styling with the link state, but can be changed to show visitors where they have been and where they still need to go.

active - The active state is inbetween a hover and letting go after you've clicked down. If you hovered over a hyperlink and then clicked on it, the part between clicking down on the mouse button and letting go of it, and being redirected to wherever the link takes you, is considered the active state.

Surprisingly there is an easy way to style page-wide links states in Freeway. You'd first start by having nothing selected on your page and then going to your Inspector palette and under the paint brush icon (1), you'll see a drop down for Links. You'll then be presented with the names of the four link states, except the link state is named Normal. You can then select your colors and choose whether you want them to be underlined or not.

Let's say you've created page-wide or even site-wide link styles and you want a particular HTML related item in your design to have different link state styles. To do this we'll need to select that HTML related item (1), for example a layered HTML item, and then go to our Inspector and follow the steps we used in the previous step. By setting link states for that individual item you will be able to incorporate multiple link styles within a web page and fortunately Freeway handles the code part.

Now things get a bit tricky. Let's say you've built a site that has 100's of pages and you want to style all the link states to look the same site-wide, but you don't want to have to go through and style each page individually. Here's a CSS tip for you. If you're using Freeway Pro, switch to your CSS palette and open up your CSS window by clicking on the Ay icon. Now in the upper right hand corner of this window you have two text-fields named Tag (1) and Name (2). You'll then want to click the + in the lower left hand corner and under the Tag field (1) click on the drop-down arrow (3) and you'll notice a list pops up which includes our four link states. You can then choose any of the four and apply styling properties and values to them. You will also need to delete the name in the Name field to leave it blank. These styles will affect any hyperlinks (without any existing individual link state styles attached to them) site-wide and can be very useful for keeping a consistent visual signature.

NOTE: Link state styles created in the CSS palette must have a status of Permanent (4) or else they won't stay in your list and won't be published.

You can also apply link state styles for individual class styles. For instance if you created a class style (which is essentially just giving your style a name in the Name field and then applying it to some text) and wanted to give any word or phrase that had that style applied to it a special appearance as a hyperlink you could do that as well. To do so you'd have to first create a class style, apply it to some text, word, or phrase and then you'd write out in the tag field: .nameofstyle a:link and then rinse and repeat for the other link states. This tag would then scour your site for any element that had a class style of the name you've chosen and if any of the styled element had any links to it then this style would handle its link states. This way would be beneficial if you used a specific style multiple times in multiple locations on multiple pages. This would also save time over having to style individual HTML items. That's it, enjoy!