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 }
Sometimes you want that stylish CSS menu…but you don’t want to code it and make sure that it’s cross-browser compatible.
Solution: use a generator.
Here is a list of the top 7 easiest CSS menu generators.
1.) CSSMenuMaker
2.) WebmasterToolkit
3.) IzzyMenu
4.) CSSMenuGenerator
6.) CSS Menu Builder
7.) Tabs Generator
{ 1 comment }
It’s amazing what you can accomplish CSS. Now I’m not simply referring to styling-wise or design-wise.
I’m also talking about resource-management-wise.
There are very efficient ways to optimize your sites with CSS allowing them to load faster and cleaner.
In today’s edition of FriDizeo Soup we wanted to share some very helpful and insightful CSS tutorials and cheatsheets.
50 Extremely Useful And Powerful CSS Tools | CSS | Smashing Magazine
We love useful stuff. For months, we have been bookmarking interesting, useful and creative CSS tools and related resources. We have been contacting developers, encouraging them to improve their tools and release their handy little.
Top 10 CSS buttons tutorial list
I was just recently looking for some inspiration on css buttons, and found some of these, but not all. Nice job. 3 – Melbourne Hotels on Jul 9, 2008, 2:52 am:. Great resource! Loving the scalable buttons. 4 – Todd on Jul 11, 2008, …
10 Resources for When You Need Help with CSS | Vandelay Website Design
From time-to-time there will probably be situations where you could use some help or guidance with CSS during your web design and development work. While there are plenty of great CSS resources available, I would like to point out 10 …
The Last Guide to CSS Layout You’ll Ever Need :: Searchlight Digital
The first thing to decide when you come to convert your design to XHTML and CSS is whether you’re going to make it fixed or fluid. Nowadays, it’s increasingly rare to find fluid-based layouts, simply because they reduce the control you …
CSS Cheat Sheets and Quick Reference
Modifying CSS or creating CSS is always a painful task. It required lot of patience and utmost care and precision. To make a slight change in the layout of your website somtimes seems to be herculean task and frustrating also. …
Improve your css skill, right now!
Styling css is just follow the rules, if you run with the rule, you can get a good working, but sometime, you forgot that in these rule, you miss something that can make you better in styling css. This entry is just a bit experiences i …
Rapid CSS Development Tools | Blog Oh Blog
Most of the coders like to write CSS manually, but sometimes the availability of useful tools can make coding simpler and easier. These tools can prove to be helpful if you want to do some rapid CSS development. …
Creating easy and useful CSS Sprites | CSS Globe
Let’s start with the basics. What are CSS sprites? CSS sprites are a way to combine images to improve our page loading time, reducing the number of requests our server does. In this article I will teach you how to make them.
How to: CSS Large Background | Web Designer Wall
Since I posted the huge collection of Large Background Websites, I received several email requests on how to make a large background site with CSS. So, I thought it would be a good idea to share my techniques on designing large background websites.
{ 0 comments }
Adobe Dreamweaver is a great tool to help you build websites.
Although many a web designer/coder prefers to code by hand in a text editor, using Dreamweaver can be very time-effective as it helps you by suggesting code and providing a WYSIWYG editor.
Ever wish you could get a little more from Dreamweaver?
Here are 10 top-notch tutorials that can help you do that.
Adobe Dreamweaver Tutorial | External Style Sheets | Print Web …
Set up your external style sheets to print pages effectively with your web style sheets.
Dreamweaver Tutorial – CSS Basics
http://www.hyperteach.com – See over 70000 high quality video tutorials on Dreamweaver, Photoshop, InDesign and 1000s of other subjects.
How to Create a Menu in Dreamweaver – List Menus
List Menus and Drop Down Menus are a great way to save space on your site if you have a lot of links. You can create these menus in Dreamweaver and this tutorial will walk you through the steps of creating List and Drop Down Menus.
Dreamweaver Tutorial: Flash Text-Use Your Own Fonts in Web Design
flash text in dreamweaver! remember to check out http://www.tutvid.com for more videos and downloads! tags: how to start a web design business, web design and development, professional web site design, web site design.
Dreamweaver Tutorial Build a nice Tabbed Navigation bar!
View this video at a higher quality here: http://www.tutvid.com/tutorials_pages_subs/DREAMWEAVER/onsiterials/nav_bar.html?v=zVhKBI_UKp0. Learn how to build a tabbed navigation bar using Dreamweavers Navigation Bar builder. …
Free Spry Menu Download – Bonus Website Evaluation HTML Form …
The How to Add Button Image to Dreamweaver Spry Menu tut unveiled the fact that people are looking for something more than a tutorial. I wouldn’t dare call the.
Dreamweaver Tutorial – CSS Positioning
postioning an image with css in dreamweaver. correctly positioning an image with css against a block of text can be quite challanging to the novice web designer. fortunetly it’s very easy to accomplish, and in this dreamweaver tutorial …
Adobe Dreamweaver Tutorial | Creating Rollovers | Rollover States …
Rollovers let your users know that they are interacting with the web page. In this tutorial, we will use Photoshop to create images to be used in both states of the rollovers and Dreamweaver to create the rollovers themselves.
Dreamweaver: How To Link Thumbnail Images | Dreamweaver Tutorial
In this video, a web assist, is introducing a new way on How To Link Thumbnail Images. She is going to tell you what are the things and manuals that are require.
Dreamweaver Tutorial Designing with Divs, Layers, & CSS Styles!
Watch the dreamweaver video and learn designing with Divs Layers & CSS styles.
Once you’ve watched, read, skimmed through these tutorials I recommend that you leave a comment on their respective websites. Thank these people for the time that they’ve put in producing them.
If you have a tutorial you’d like to share with us…drop us an email or comment on this post.
{ 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 }
