Posts Tagged ‘HTML’

Redefining HTML tags with CSS

Monday, September 14th, 2009

As we discussed in our first lecture looking at HTML code, all HTML tags have a default set of visual rules defined by the browser. A significant part of Web design is redefining those rules so those HTML tags look good, even damn good, in our sites.

The example we used in class was to look at the common paragraph, or p tag. Paragraphs unless told otherwise, are black, left aligned, 100% wide (as defined by their enclosing element), have a margin in between them, are displayed in Times or Times New Roman, and are 16 pixels (1 em) tall.

It is quite easy to write the selector for an HTML – just write the name of the tag:

p

The above tag will control all paragraphs on the page. To be honest, you will likely find it much more practical to use contextual selectors to redefine most HTML tags.

Tags: , , , , ,
Posted in Web Design |

Buttons that link to URLs

Tuesday, October 14th, 2008

For your assignment to create Flash navigation for an otherwise standard HTML/CSS site, you’ll need buttons that link to various pages. The following example is for a button with the instance name “menuBtn” that will link the user to the index.html (home page).  This example assumes all of the files are in the same folder: the swf; index.html; and all additional HTML pages.

Basically, you create a function called handleMenuLink (and for additional buttons, you need to rename the function for each button). The function detects if the menuBtn is pressed, creates a variable called “request” that holds the link, and then opens the link in the same window.

Additionally, there is an event listener for menuBtn that listens for the click, and calls the handleMenuLink function.

Things you need to customize for additional buttons: all references to the instance name (menuBtn); the URL; and function names in the function and event listener.

function handleMenuLink(pEvent:MouseEvent):void
{
if (pEvent.target == menuBtn)
{
var request:URLRequest = new URLRequest("index.html");
navigateToURL(request, "_top");
}
}
menuBtn.addEventListener(MouseEvent.CLICK, handleMenuLink);

Tags: , , , , ,
Posted in Interactive Design |