Online Tips for the Work-At-Home Web Designer
Creating a CSS website layout in Dreamweaver can be super simple and save you a lot of time.
The tutorial pros over at TutVid.com put together a nice video tutorial to show exactly how this is done. It is a little bit on the long side (like 30 min.), but after watching and perfecting this, you will save tons of time on your future projects.
{ 1 comment }
I came across this sweet rap video on Youtube about web design coding. This guy describes how web standards and proper coding can affect how your site is rendered on different browsers and how it will be ranked in the search engines.
It’s very important stuff. Listen to the lyrics. Great Job Poetic Prophet (a.k.a. SEO Rapper).
{ 0 comments }
In this tutorial I will teach you how to make an image rollover using CSS and Adobe Illustrator. It’s pretty straightforward and shouldn’t take you more than a couple of minutes. I’ve included the HTML, CSS, and image below the video.
If you like this tutorial please make it known by bookmarking it and commenting below.
index.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Home Button</title>
<link type=”text/css” rel=”stylesheet” href=”style.css”>
</head>
<body>
<a class=”homebutton” href=”#”>Home</a>
</body>
</html>
style.css
@charset “UTF-8″;
/* CSS Document */
a.homebutton {
display:block;
width:120px;
height:40px;
text-indent:-5000px;
background:url(images/homebutton.jpg);
text-decoration:none;
}
a:hover.homebutton {
background-position: -120px 0;
}
{ 2 comments }
I remember when I first tried to create a professional web design portfolio for myself. Man…that was tough! I would do a “print screen”, then have to open it in an image editor, crop it, resize it, and resave it.
Ok…maybe doing all that wasn’t “the end of the world” tough, “but there has to be an easier way to save my websites as images”, I thought.
And there was.
It’s an easy-to-use plugin for Firefox called Screengrab!. Screengrab! allows you to capture the full website, the visible portion of the website, or a specific selection and save it as an image by simply pressing a button.
It’s super easy to use. Wanna see? Then watch the video below.
{ 0 comments }
I’ve had some pretty artsy clients before. They had a contemporary style and wanted their web design to show that.
Of course I would tell them that it was my specialty and that I would come up with a design that would knock their socks off. I would then go home and sweat bricks. How would I come up with contemporary designs? Would I have to draw everything on paper first? I’m not that great at drawing so that wasn’t an option.
What if there was a website I could download graphics from and then tweak them to use them in my projects? Well, I found just that site (in fact, one of many, but this one’s my favorite). Wanna know what it is?
Watch the video. (hint: it’s a great way to get free vector graphics).
{ 2 comments }