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.
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
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.
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.
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
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
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
• 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
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
Style sheets are as old as desktop publishing. I first used them in "Pagemaker" back in the early nineties. They were, and still are, a real "power tool" for page layout. And, to me, it represents the best relationship between a computer and a creative person. Please let me explain.
A style sheet is just a bunch of instructions that the computer gets about how you, the creative person, want the pages of your document to look. Take a look at any brochure, magazine, or web page. It starts with what font to use, what color, what size. Flip through a magazine or go through the pages of a web site, you will see that there will be consistency and repetition. A computer can remember what size the fonts should be for the headlines, and what color, and on and on. Multiply that by many pages in a brochure, a magazine, or a website and you can see how difficult it would be for a mere human (especially a creative one) to remember all of that. If you are not using style sheets, you are doing the work of the computer.
To use a style sheet, you have to know what can be controlled by styles. On a typical page layout program, like InDesign, it's mostly the font size, or color, that sort of thing. On a web page, it goes much further, you can create styles for page elements, too. Yes, you can still use plain old HTML for most things that you need, but you could also stand on a street corner and just shout at me instead of calling me on a telephone. I prefer the new technology, myself.
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.
Beginning drop-down menu bars in Dreamweaver
 | |||
| CSS names in Dreamweaver |
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
• 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
• 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
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
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
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.
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.
0 comments:
Post a Comment