January 11, 2008 at 6:03 pm · 261 views · Filed under portfolio, work
About dot Stompernet dot Com (about.stompernet.com)
is the new public (free) website from StomperNet. I helped implement this design and had to learn all about themes in Drupal. It’s still in beta, but it’s well on it’s way. It is an agglomeration site, where all the StomperNet Faculty’s feeds can be found and various other free content, like video in the Squambido player, and the Scrutinizer software.
Tags:
blog,
css,
dreamweaver,
drupal,
html,
php,
stompernet,
web design,
website,
work
December 11, 2007 at 6:00 pm · 2,689 views · Filed under tutorial
The Overview:
An interactive navigation bar using CSS with rounded corners. Just put the html as an unordered list and your navigation links as list items and the CSS will do the rest! As shown here! The css will tell the browser to display this special unordered list as the menu. This utilizes a technique to have one background image with three states: normal, hover and active. The css controls the placement of the background image so when you hover, the images is displaced to show only the hover state, and likewise for the active and then returns to the normal state. This is compatible in all the browsers I have checked so far, let me know if you find any issues [thanks].
The Steps:
1. First make the html. An <ul> full of <li> elements.
2. Make the desired backgrounds. Three part background (or two) . One part ‘Normal’ state and another ‘hover’ state and optionally an ‘active’ state. Add additional backgrounds if you want anything like rounded corners, or just a header.
3. The CSS to attach the two together
The Example:
verticalMenuCSS.html
As you can see this is a simple html unordered list with list items.
<ul>
<li class="top">My Site</li>
<li class="middle">Home</li>
<li class="middle">About</li>
<li class="middle">Biography</li>
<li class="middle">Portfolio</li>
<li class="bottom">Contact</li>
</ul>
Here’s the magic.
/*vertical Menu CSS style sheet*/
*{
list-style:none;
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
.sidemenu {
width: 150px;
border: none;
}
.sidemenu li a {
height: 18px;
text-decoration: none;
}
/*Top sidemenu Item (Header and rounded corners)*/
.sidemenu li.top a:link, .sidemenu li.top a:visited {
color: #828282;
display: block;
background: url(images/menuTop.png);
background-repeat:no-repeat;
padding: 1px 0 1px 0;
font-size: 1em;
font-weight: bold;
text-align: center;
}
/* Uncomment this if you want the header to be an interactive link
.sidemenu li.top a:hover {
color: #828282;
background: url(images/menuTop.png) 0 -22px;
}
.sidemenu li.top a:active {
color: #26370A;
background: url(images/menuTop.png) 0 -44px;
}*/
/*sidemenu Item Middle*/
.sidemenu li.middle a:link, .sidemenu li.middle a:visited {
color: #5E7830;
display: block;
background: url(images/menuMiddle.png);
background-repeat:no-repeat;
padding: 1px 0 1px 20px;
font-size: 0.8em;
}
.sidemenu li.middle a:hover {
color: #FFFFFF;
background: url(images/menuMiddle.png) 0 -22px;
}
.sidemenu li.middle a:active {
color: #FFFFFF;
background: url(images/menuMiddle.png) 0 -44px;
}
/*Bottom sidemenu Item (rounded corners)*/
.sidemenu li.bottom a:link, .sidemenu li.bottom a:visited {
color: #5E7830;
display: block;
background: url(images/menuBottom.png);
background-repeat:no-repeat;
padding: 1px 0 1px 20px;
font-size: 0.8em;
}
.sidemenu li.bottom a:hover {
color: #FFFFFF;
background: url(images/menuBottom.png) 0 -22px;
}
.sidemenu li.bottom a:active {
color: #FFFFFF;
background: url(images/menuBottom.png) 0 -44px;
}
verticalMenuCSS.html
The Download:
verticalMenuCSS.zip
Tags:
css,
dreamweaver,
html,
interactive,
open source,
tutorial,
web design,
website
October 25, 2007 at 6:16 am · 158 views · Filed under portfolio, work
A website (sales letter site) to order an engraved tile to be placed on a wall at you choice of NASCAR race tracks. Proceeds benefit Speedway Childrens’ Charities. Get yours today…
Site design with Dreamweaver using html and css. Incorporated flash elements for multiple video and audio players. Graphic Design in Fireworks and Illustrator.
Click to visit!
Tags:
actionscript,
css,
dreamweaver,
flash,
html,
video,
website,
work
June 15, 2007 at 10:01 am · 153 views · Filed under portfolio
2007 Summer Health Seminar Series to be held at Pinewood Estates North Library.
Krista Mullins, a Health Promotion and Behavior student is coordinating the seminars as a part of her internship experience with UGA’s International Public Service and Outreach department. Four seminars are planned throughout the summer on health issues for the latino community such as: diabetes, blood pressure, HIV/AIDS, and school immunizations.
I did the site design with Dreamweaver using html and css.
Click to visit!
Tags:
css,
dreamweaver,
html,
website
May 15, 2007 at 10:02 am · 175 views · Filed under personal, portfolio
Here is a website I made for an old band I was in, Reason. The site is all html. I tried to push to navigation in a unique direction, some call it annoying (hint: use the scroll bars). I also designed most art and band art (posters, fliers, album art, etc).
Reason website link, Check out the soundroom for some mp3 downloads!
Tags:
dreamweaver,
graphic design,
html,
interactive,
music,
photoshop,
website
March 15, 2007 at 10:13 am · 136 views · Filed under portfolio
Here’s my first portfolio website, from the archive in 2004. Some of the links are broken, but you get the idea. I made an interactive flash version and an html version with frames in dreamweaver.
Evanrude link
Tags:
animation,
as2,
dreamweaver,
flash,
html,
interactive,
self portrait,
website
March 10, 2007 at 12:07 pm · 104 views · Filed under portfolio
Circlecube HTML Website link.
Portfolio site done with simple HTML. very plain, clean look.
Tags:
circle cube,
css,
dreamweaver,
film,
flash,
html,
illustrator,
website
Loading ...