Pages

Saturday, June 25, 2011

How to put video on a web page in Dreamweaver



Relying on a free service, like YouTube, can be very risky for a website. Recently, a bug is causing some YouTube users to be unable to log in to their channel, even with the username and password. This started happening in 2010, after Google took over YouTube. If you did the switch from a YouTube username and password to a Google username and password for YouTube then, you were all right. Those who didn't are locked out of their channel until YouTube, which is actually Google now, resolves this bug. I'm sure that this will happen, but in the meantime if you need to get to your channel and videos, and can't, there is no one to contact at Google. It's a free service and there is no paid support.

Which means that this is a good time to free yourself from reliance on YouTube and Google. If your website relies on videos, put them up yourself. And for simple videos, there is a simple solution in Dreamweaver.

You will need to save the videos as a .flv file. This is done with Adobe Media Encoder. If you have CS5 Design Premium, you have it. Yes, I know that it creates a Flash file, which was supposed to go away with HTML5 and the iPhone, but we have all been waiting since 2007 for this, and it's still not happening. In the meantime, the vast majority of people viewing your site will have the Flash Player on their computer. The only people who don't are iPhone and iPad users, as of this writing, and it should be on its way.

In Dreamweaver, select Insert>Common>Media:FLV. There are additional files that Dreamweaver creates automatically for you, and it guides you along to be sure to upload them. It works! No more need for YouTube!

If you would like to get personal on-site software training in Adobe Photoshop, Illustrator or Dreamweaver in the greater Phoenix, Arizona area, please contact me. Paypal accepted, morning appointments only.

Power tools in Adobe Photoshop, InDesign, Dreamweaver and Illustrator

Adobe Photoshop, InDesign, Dreamweaver and Illustrator all have something in common - there are ways to accomplish hundreds, even thousands, of tasks with just a few mouse clicks. Real pros know these, and it will make your work easier, make you hit deadlines with ease, and it will get you out the door at quitting time!

If you are a Graphic Designer, or a Graphic Design student, who "brags" about how many hours a project took, or how late you stayed working on something, you are probably just telling everyone that you don't know how to use Adobe's power tools. There are a lot of them and I would like to talk about a few here. It's all about learning these tricks and understanding that computers love to do what humans hate to do - repetitious tasks. In fact, if you are doing anything at all that is repetitious, you should ask yourself, is there any easier way? There probably is!

Here are a few power tools that you should know -

Photoshop - Actions. Actions allows you to record a complex series of tasks and then apply them with a single click. Even better - Batch. You will find Actions under "Window". Batch is under File>Automate. While you are there until midnight, a pro has created an action and a batch and was home before rush hour.

InDesign - Master Pages. Master pages let you not only place items on hundreds of pages with just a click, they allow you to change hundreds of pages with the same amount of clicks. New logo on every page of the 2,500-page manual? Click! Done.

Dreamweaver - Cascading Style Sheets file. When you go to use CSS for your typography in Dreamweaver, make sure that you create a separate file that links to all your web pages. Don't like those purple Helvetica 18 point headings? Change them on all of the pages in the whole site using the CSS page.

Illustrator - Symbols. Instead of drawing something and copying and pasting it, turn it into a symbol. If it repeats all over the drawing, and you can change it once and it changes in every instance. Need to change 275 six-pointed stars to eight-pointed stars? Do it once and it's done.

And this is just the beginning. Once you start learning these power tools, your productivity goes up like a rocket. And it's kind of fun. Zoom-zoom!

If you would like to get personal on-site software training in Adobe Photoshop, Illustrator or Dreamweaver in the greater Phoenix, Arizona area, please contact me. Paypal accepted, morning appointments only.


Using classes in CSS for typographic style in Dreamweaver

There are a whole lot of limits when designing for the web, and as a Graphic Designer, what I want most is the ability to style my type a bit. You can do this much more now than the bad old days of plain HTML because of CSS (Cascading Style Sheets). The trick is to know what things are called in CSS (as opposed to the real typographic terms that Graphic Designers use). One of the ways to do this is by using classes.

A class allows you to finesse a bit of type without changing the underlying tag. On this page, I wanted to do something that you see a lot of in magazines, large introductory type at the beginning of an article. It's still a p tag, but I have added a class called intro.
It's a small refinement, where the Font-size has been changed to 20 and the Line-height (real Graphic Designers think of this as leading) is set to 32, and a color was added.

If you would like to get personal on-site software training in Adobe Photoshop, Illustrator or Dreamweaver in the greater Phoenix, Arizona area, please contact me. Yes, I will also do a training session on setting up your blog on Google Blogger. Paypal accepted, morning appointments only.


How to insert a div tag in Dreamweaver


Inserting a div at an insertion point on a page in Dreamweaver allows you to create a space that can contain an image and text. This works well for pictures with captions. To do this, place your cursor directly in front of the first word of the paragraph where you would like the div to go. Go to your insert panel, and select "Insert Div Tag".
That will pop up a dialog box asking you to name it with a class or an ID. You do not need to name a class, but it does need an ID. You can call it anything at all as long as there are no spaces. I recommend that, instead of clicking OK, click New CSS Rule and you can get right into formatting it the way you want it.

After clicking New CSS Rule, note that Dreamweaver knows to put in the hashmark (#) and defaults the contextual selector type to ID. From there, it's like editing any other element in CSS.

If you would like to get personal on-site software training in Adobe Photoshop, Illustrator or Dreamweaver in the greater Phoenix, Arizona area, please contact me. Yes, I will also do a training session on setting up your blog on Google Blogger. Paypal accepted, morning appointments only.


Updating to Adobe Dreamweaver CS5

I recently updated to Dreamweaver CS5. As expected, it can do even more stuff. Like most software programs, updates are responses to requests from users. Someone says, "hey, could make your software do this...." and Adobe responds with more features.

That's the good news. The bad news is that Dreamweaver is beginning to look like the dashboard of a 747. If you are daunted by how it looks, and you are a beginner, I understand. But there is a trick to making using this software program, and all graphics software programs, easier. I've been showing this to my students and clients since I started teaching in the late 90s.

Close all of the palettes. They are also called panels. In the menu, they are called Windows. I know it sounds confusing, but please remember, I didn't design this software, I just teach it. It would be so much easier if I could be pointing to the screen right now for you! Anyway, that's the first step. Getting rid of panels, palettes, etc. on the screen that you aren't using is like taking the roller-skates off of the stairs. I will make it so much easier to get around!

If you would like to get personal on-site software training in Adobe Photoshop, Illustrator or Dreamweaver in the greater Phoenix, Arizona area, please contact me. Yes, I will also do a training session on setting up your blog on Google Blogger. Paypal accepted, morning appointments only.


Why you shouldn't buy Adobe software in the download version

I finally got around to upgrading to Adobe Design Premium CS5 and I thought that it would be more convenient to download the software, instead of buying the physical discs. Big mistake! If you are tempted to do that, learn from my fail. It took over two hours, most of it on the phone to Adobe, where I got some very expert help, by the way. But you can avoid all of this by not downloading. Get in your car, drive over to Fry's Electronics and buy the box.

The problem arose when one of the software programs didn't download. If I had the physical discs, I could have fixed in a few minutes. Without the discs, I am helpless, at the mercy of Adobe tech support. And even though they are excellent (my tech support person assured me that he could stay with me for an hour), it is brutally hard on the nervous system.

I am a big believer of keeping up with technology, but downloading software like this isn't quite there yet. It's not like using iTunes. But someday it will be, and we will look back at these days and laugh.

If you would like to get personal on-site software training in Adobe Photoshop, Illustrator or Dreamweaver in the greater Phoenix, Arizona area, please contact me. Yes, I will also do a training session on setting up your blog on Google Blogger. Paypal accepted, morning appointments only.


How to learn any software program

If you would like to learn a software program, such as Adobe Illustrator, Photoshop, or Dreamweaver, I have some suggestions to make it easier and faster for you. It will soud simple enough, but you would be surprised at how many times people get this wrong and end up being frustrated.

• Find out what the software program is for. Think of a software program as a tool in your toolbox. If you really don't know what the software program was designed to do, chances are you will be flying blind. Look it up on the web. Ask people.

• Use the correct software program for a particular need. Once you know what different software programs were designed for, choose the correct tool. If you need to create web pages, the correct tool is Dreamweaver. If you know Photoshop, you possibly could try to create a web page using it, but it will be a world of frustration for you. I call this "hammering in a nail with a screwdriver".

• Keep it simple. There are always about a dozen ways to do any given task in a software program. In Photoshop there are usually much, much more. Find the way that makes sense to you and do it. Don't let someone talk you into some convoluted, complicated, way of doing a task. Stick with what works for you. If there is another way that you discover later that makes more sense to you, you can change at that time.

• Learn best practices. This is all I teach. If you have guessed your way through creating something in a software program, and you don't dare open the file up again, you have made a mess. Throw it away and create it correctly.

If you would like to get personal on-site software training in Adobe Photoshop, Illustrator or Dreamweaver in the greater Phoenix, Arizona area, please contact me. Yes, I will also do a training session on setting up your blog on Google Blogger. Paypal accepted, morning appointments only.


How to get your website listed on Google

Getting your website to appear on the first few pages of a Google search is the best thing that you can do for your service or business. A whole industry has grown up around it, calling it "Google Optimization". It makes it sound like it's something that you add onto your website after you are finished, but it isn't. It's something that needs to be built in right from the beginning.

When you begin the design of a web page, you have to consider both the viewers of the page, and the Google "bots", also called "spiders", that do the indexing. The good news is that if you do it right, it will work for both. If you do it wrong, the website may appeal to you, or your designer, but be virtually worthless to viewers, and virtually invisible to the Google bots.

If you would like to get a high ranking on a Google search, here is what you must do

• Create your website in Dreamweaver using best practices. Use CSS for structure. Use heading tags, use plain text whenever possible. Viewers and the Google bots can understand this. "Bells and whistles" give you nothing, it makes your website difficult to use and difficult for the Google bots to index. Don't put important content in jpegs.

• Use Flash only for decoration, never for content. Many devices can't read Flash, and many viewers, including me, hate it. If you absolutely have to have some psychedelic swirling animation on your site, that is a reason to use Flash. But why are you doing that? 

• Use descriptive hyperlinks. The Google bots love hyperlinks. Don't ever write, "Click here", write visit Brad Hall's website to learn more about Dreamweaver training. Viewers like this, too.

If you would like to get personal on-site software training in Adobe Photoshop, Illustrator or Dreamweaver in the greater Phoenix, Arizona area, please contact me. Yes, I will also do a training session on setting up your blog on Google Blogger. Paypal accepted, morning appointments only.

Contact Brad directly

Using Dreamweaver as a hub

Whenever you visit a website, you are seeing a lot more than just the page layout, as created in a web page program like Dreamweaver. There may be animation, videos, javascript, Paypal buttons, the list goes on and on. I describe this as using Dreamweaver as a hub, and it's the best choice for this. What this means is that Dreamweaver can be used for the simplest to the most complex web sites in the world.

If you are creating a web page just for fun, or for a hobby, go ahead and use a "click and build" web page generator. It is the cheapest, easiest, and fastest way to make a web page. A friend of mine, who is going to do a website for his church sent me this list of website creation software. In his instance, Dreamweaver is not appropriate.

Dreamweaver is appropriate for your business if you want your site to be able to grow without any limitations. And that is where the idea of the "hub" comes in. If your site is built using Dreamweaver, you will be able to add anything you want to it. It is as flexible as the web itself. There is absolutely nothing propriety about Dreamweaver, and that is part of the reason for its success. No one is going to say to you "No, you can't do that, or add that." If it's in Dreamweaver, you can.

Post about my introduction to Dreamweaver Training session is here

If you would like to get personal on-site software training in Adobe Photoshop, Illustrator or Dreamweaver in the greater Phoenix, Arizona area, please contact me.  Yes, I will also do a training session on setting up your blog on Google Blogger. Paypal accepted, morning appointments only.

Contact Brad directly

Beginning website design with Dreamweaver

Nothing is more complex, or changes more quickly, than website design. Watching the web grow in the past decade, you have seen a tangle of different ways to create web page, and web sites. There is HTML, XML, PHP, CSS, a regular "alphabet soup" out there! There are "click and build" sites, sites created in Flash animation, and dynamic web pages that flex with new information constantly. If you are getting discouraged about learning web site design, after seeing all that, I really can't blame you!

But the reality is that web page design is quite simple. I have had the good fortune to have seen it from the beginning, back in the nineties. The first class I taught for web design, called "The Art Of Web Page Design", was in 2001. Back then, software programs, like Dreamweaver, were not in widespread use, and for good reason. All you had to do back then to create a web page was to know a handful of "tags", for bold, italic, etc. and the different heading levels, and you could create a web page on NotePad or TextEdit. It was, and still is, a simple way of formatting a page to be read by anyone in the world. But it still required a lot of what I call "hand-coding", which I considered tedious. So when I first saw Dreamweaver, I was in heaven. There is a reason that no other web page design program comes close to it. Dreamweaver allows you to stay as simple, or get as complex, as you want. And it doesn't push.

I specialize in teaching beginning software. If you have never touched Dreamweaver, believe me, it's great. There is no need to worry about setting up a web site that will run NASA, just to get a presence on the web. And there is no need to turn the design and maintenance of your web site over to someone else, just because they wear a pocket-protector and have their glasses taped together (the nerds!). You can do it yourself, I can show you how. Stick with the basics and it will take you a long, long. way!

If you would like to get personal on-site software training in Adobe Photoshop, Illustrator or Dreamweaver in the greater Phoenix, Arizona area, please contact me.  Yes, I will also do a training session on setting up your blog on Google Blogger. Paypal accepted, morning appointments only.

Contact Brad directly

Training session - Introduction to Adobe Dreamweaver

Dreamweaver is a software program that makes web pages. The name "Dreamweaver" really doesn't have anything to do with designing web pages, I guess they didn't want to call the program "HTML Editor" or something boring like that.

And it's a good thing they didn't give it a more specific name, because what web pages are made with has changed since the invention of Dreamweaver. There's HTML, XML, PHP, CSS, all kinds of stuff. And Dreamweaver handles it all. That's the good news. The bad news is that there is so much of that stuff out there, and more is being invented all the time. If you want to jump into designing your own web pages, it can seem overwhelming. But I have a solution. I have been teaching beginning software for over fifteen years, and it's all about starting with the basics. With Dreamweaver we will

• Create a web page with HTML. No, that doesn't mean you have type in any coding, it's all done with a point and click. Basic web pages are surprisingly easy to create, and work very well on the web, sometimes better than more elaborate pages, which can get bogged down, or not index correctly in Google.

• Work with CSS. Cascading Style Sheets are the way to go. Dreamweaver has a lot of built-in stuff to make it easy. If you're doing "old school" tables, by the way, we need to talk.

• Design web pages for Google Optimization. Getting your web pages indexed by the Google "bots" means constructing the page correctly, it's as simple as that. If you want a great page ranking in a Google search, use the best practice techniques that I show you. It's not magic, it's just doing it right from the beginning. 

• Managing your web site. One of the best-kept secrets of Dreamweaver is that it will manage everything for you, if you let it. All you have to do is set it up correctly and Dreamweaver will take it from there. It's pretty cool.

To prepare for your Dreamweaver session, be sure that Dreamweaver is installed and running on your computer. No, it doesn't matter what version you have or whether it is on a Mac or a PC. Just let me know. Give yourself three hours of focused time by turning off your phone and telling people to leave you alone for a while. Don't worry, we will take breaks!

If you would like to get personal on-site software training in Adobe Photoshop, Illustrator or Dreamweaver in the greater Phoenix, Arizona area, please contact me.  Yes, I will also do a training session on setting up your blog on Google Blogger. Paypal accepted, morning appointments only.

Contact Brad directly

Monday, December 13, 2010

Creating a web page

There are lots of ways to create a web page. The easiest way is to use a "click and build" web page maker, such as at GoDaddy. The limitation with doing this is, of course, you are stuck with their templates. You could also just write it all from scratch using something like WordPad. This is how I first made web pages way back in 2001. And you can still do that, and many people do. I call it "hand-coding". But what I recommend is a software program called Adobe Dreamweaver.

Dreamweaver is a WYSIWYG (What You See is What You Get) software program that is much easier than hand coding, and much more flexible than "click and build". It is surprisingly easy to get started on, but it expands to allow all kinds of fancy stuff. It has a built-in FTP (File Transfer Protocol) program that makes it easy to upload pages to your site. Basically, it goes like this - you create the web page on your computer, then click a button to upload, and that's it.

The only other program that you absolutely have to have to create a decent web page is Adobe Photoshop. Photoshop handles images. If you are making a web page you should size and optimize in Photoshop. You can, of course, do a lot of other things in Photoshop, such as replacing the background of that photo of yourself in the backyard with a beach in Hawaii, but that isn't absolutely necessary.

If you would like to get personal on-site software training in Adobe Photoshop, Illustrator or Dreamweaver in the greater Phoenix, Arizona area, please contact me.  Yes, I will also do a training session on setting up your blog on Google Blogger! Paypal accepted, morning appointments only.



CSS, and understanding Style Sheets

Beginning drop-down menu bars in Dreamweaver

Drop-down menu bars are called "Spry" menus in Dreamweaver. Spry is the Javascript that makes them work. The good news is that Dreamweaver has done all of the hard work for you. When you create a drop down menu (a Spry menu bar), Dreamweaver gives you a folder with all of the stuff you need to make it work, in a folder called "SpryAssets". And making the menu items is a fairly straight-forward "fill in the blanks" interface in Dreamweaver. If you just fill in the blanks, and don't touch anything you don't understand, it will work. To get started, go to your insert panel, select layout, and choose Spry Menu Bar.

CSS names in Dreamweaver


If you want to modify the look of the menu item, you need a basic familiarity with editing CSS. Keep in mind that all a Spry menu bar is based on is an unordered list. If you are used to writing, and naming, your own CSS, this may look a little daunting. But keep in mind that all they are doing is trying to create a name that makes sense. In this sample I am showing the CSS for the horizontal menu bar. As usual, the names that Dreamweaver uses are excellent. Take a few minutes and look at them. Create a test file and make some small changes. Stay with what you know. You can change the font, or its size or color, or the background without harming anything. As you gain confidence, go ahead and make more changes.

Personally, I don't trust Dreamweaver's "Live View", so I create a test file, upload it, and view it there. By the way, if you are trying this for the first time and you just see something that looks like an unordered list, with bullets, you have forgotten to upload the CSS, and probably everything else that makes the Spry menu bar work. Upload the whole folder SpryAssets.

If you would like to get personal on-site software training in Adobe Photoshop, Illustrator or Dreamweaver in the greater Phoenix, Arizona area, please contact me. As of the writing of this post, November 3rd, 2010, my rate is $95 per hour with a three-hour minimum in the greater Phoenix, Arizona area (within 25 miles of Glendale 85302). The deposit is $140, which guarantees your appointment on my calendar. Yes, I will also do a training session on setting up your blog on Google Blogger. Paypal accepted, morning appointments only.


You just might need to update your web site if

You just might need to update your web site if

• Your pages stretch all the way across the width of the browser, which was fine in 1998, when most computer screens were smaller. Now it just looks ridiculous. Use a "div", which divides up pages now.

• You have important content in Flash. Even though there will be workarounds to support Flash in HTML 5, it's still a pretty old-fashioned technique. Google has trouble indexing it, users have trouble viewing it (if they haven't already blocked Flash content).

• You have old "javascript" tricks on it, like falling snowflashes, or a "tail" on the pointer tool. Nobody has done this since the 20th century.

• You have a counter with the number of visits on it. That is so 20th century!

• Your links say, "click here", instead of what the content is, such as "find out about ABC Widgets". Google indexes hyperlinks, you know.

• You have annoying, moving, flashing, animations. This was an old trick to try to get the attention of your readers. Now it just makes them click away.

If you would like to learn Adobe Photoshop, Illustrator, or Dreamweaver, please contact me. I do personal on-site training sessions in the greater Phoenix, Arizona area.


The difference between an on-site training software session and a class

There are many ways to learn the latest software from Adobe. How you do it depends on your learning style, that is, what you are comfortable with. I have been teaching and training Adobe software since 1996, at a private college - The Art Institute of Phoenix, at a community college - Glendale Community College, at private training companies such as LearnIt! and Roundpeg, and I also do on-site training. All of these approaches are valuable. The only wrong decision that you could make is to not learn the latest software, thereby leaving yourself behind and frustrated. Please let me explain the differences between all these approaches.

• A private college, such as The Art Institute of Phoenix, is the most appropriate for you if you are just starting out and want the very best foundation. Yes, it takes time and money, but it is well worth it - I've seen the graduates!

• A community college is the best place to go if you want to get a little without paying a lot. This is by far the least expensive way to go. And, if you don't like the class, you can drop it. The drawbacks, of course, are, well, dealing with the community college, which is, after all, a government organization not unlike the DMV. Filling out forms, standing in line, etc. is part of what you have to do.

• Taking a training session from a private company, such as Roundpeg, is a great way to go for a busy professional. There are no grades, no lines to stand in, no nonsense. You just show up and start learning. And you get free coffee and bagels! You can take a half-day session, or sign up for multiples. The only drawback to this approach is that you have to take time off from work and go there. If you're working for a company, this can be a very pleasant way to learn new software. If you own the company, you may not want your people to be away all day.

• A personal training session means that the trainer comes to you. I do this, and most training companies can arrange for this, too. This is the most appropriate for you if you want to learn something specific about a piece of software, have no interest in dealing with a school, and would prefer not to leave your office. If you know exactly what you would like to do, for example, using Adobe Illustrator to create a brochure, this is what you want. A personal training session is custom-made for you. The way I do it is you work on your own computer and I sit next to you.

If you would like to learn Adobe Photoshop, Illustrator, or Dreamweaver, please contact me. I do personal on-site training sessions in the greater Phoenix, Arizona area.


How to keep your web site current

Designing a web site is truly like hitting a moving target. Even if you've tested it in all browsers and on all platforms, things can change. Your web page may have been fine in 2008 but now it's having troubles. The best thing that you can do is add a link to the page that says, "Contact webmaster".

Telling someone that their web site isn't displaying properly, like the one about the 1970s pictured, or links are dead, or go to the wrong place, or search engines don't work, is a basic courtesy of people, like me, who design web pages. It's no more trouble to me than telling someone that they have left their sunglasses at a checkout line.

As I surf, when I see a problem with a web site, I look for the "contact webmaster" link and send a cheery note. It usually goes something like, "hi guys, I noticed that...." I sign it "Brad" and with my signature as a link BradHallArt.com. I'm not trying to sell anything and I don't expect anything back. Sometimes a webmaster will write back with a "hey, thanks!", which makes me feel good. Hopefully if anyone sees a problem with a web page of mine, they will take a few seconds and write to me.

Unfortunately, some web pages, even very professional ones, don't have a "contact webmaster". And sometimes, even when they do, I get a message back that says "It looks fine to me", or some other argument. The bottom line is, have a way for someone to contact you on your site. If someone sees a problem with their site, they may take a few moments to let you know, and that small kindness can keep your site from looking stupid.


How to design a modern web page

The modern trend in web page design is to narrow down the readable area. This makes sense. In the last few years, computer screens have gotten really wide. When you consider the width of a page from a book, or a magazine, or even an article in a newspaper, you should see that making your web page span across the entire length of someone's computer screen is just poor design.

Translating pixels into inches, your page shouldn't be much wider than 10 to 12 inches. Using CSS, you can set the width of your container to no more than 1,000 pixels. For reference, 720 pixels equals ten inches. In the page that I did for Phoenix, Arizona, rising out of the ashes, the page that is centered on a background is 880 pixels. The left column is 250 pixels, which leaves the main reading area about 630 pixels. This is plenty wide.

Pages that span the entire width of a browser can be very difficult to navigate. The screen on my computer is 15 inches, and the only time I want all of that space used is when I'm watching a wide-screen movie.

So, set your width to a comfortable reading size. If you feel that you need more width for all the stuff you are trying to put on the page, maybe you need to re-think your design.

If you would like to learn Adobe Dreamweaver, Photoshop or Illustrator, please contact me. I do on-site training sessions in the Phoenix, Arizona area.



Using absolute positioning (AP) divs for web page design

I have been teaching computer graphics software for fifteen years now and I promote "best practice". For web design, that means steering my clients towards practices that will work, and away from those that are either out-of-date or too new to be stable.

An example of a practice that is out-of-date is using "frames" to design web pages. Here is an example of a page I created in the late 90s. You don't see this "antique technique" much any more, and for good reason. It just plain stinks. I stopped teaching this technique in the early 2000s.

A practice that is still, unfortunately, in use these days is the use of "tables" to create structure. This was a very clumsy way to create page structure, and was replaced by CSS (Cascading Style Sheets).

But CSS has its problems, too. The most widely-used browser, Internet Explorer, has always had trouble displaying pages created with CSS. For years now, any page that is created in CSS must contain "hacks", which is special coding to compensate for Internet Explorer.

A couple of years ago I updated all of my pages from table page structure to CSS page structure. To be sure that all of the "hacks" were in, I used the Dreamweaver templates, and I recommend that to my clients. I don't recommend trying to build CSS pages from scratch and I don't recommend using absolute positioning (AP) divs. Most web pages look and work better with structure. AP divs allow you to "scatter" things all around the page. Actually, it's kind of fun. Here is a page that I created for my dog, using AP divs.

Customizing hyperlinks in CSS.

Using CSS to create your hyperlinks, and especially your menu buttons, is very important for your Google indexing. Google puts a high priority on text in hyperlinks on web pages and can easily read text but has terrible trouble with jpegs - even if they have "alt" text. But that doesn't mean that you are stuck with having boring hyperlinks!

The example shown here is a rollover hyperlink in a box with a nice shaded background. When you roll the mouse over the words, they change from white to orange. You can, of course, also change the background on rollover. What you need to know is that the "a" (anchor) tag for hyperlinks has many states. They are: "a" - what you see when the page loads, "a:hover" - what you see when you mouse over, "a:active" - what you see when you click the link, and "a:visited" - what you see when you come back to the page.

In CSS you can customize all of those states. On the example I customized a: and a: hover only. The background is a jpeg that fades from black to dark blue. The box and the type colors are done with CSS.

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...