Welcome to the new How To Gurus Blog

Where you can always find my latest Demos and YouTube Videos. You will find samples taken from my Training DVDs and also exclusive videos created specifically for my online audience.

Friday, December 5, 2008

On Using DIV tag layers

"What my instructor had me do for that graphic placement issue in DW was just create a new CSS rule and create a DIV tag called #wrapper. Then I just positioned the graphic where I wanted it."


Using a DIV tag (creating a floating layer) works fine. If you follow my previous email you will see that the layer will be positioned above the background image, so that any image you place into the layer will appear on top of the background image.
The CSS rule is so that you can easily update the layer formatting in the future and the #wrapper is just a label for the layer (DIV tag). You can call the layer anything you want, if you don't name the layer then Dreamweaver will simply apply a number to the layer. The label allows you to easily find the coding for the layer and also allows you to refer to the layer in your code (for instance if you want to make a button that will hide or show the layer you would need a label for it). Personally I would have picked a name that exactly matched the image contents, so if the layer contained my logo I would call it something like this: #_logo_layer (the _ symbol is just being used as a spacer to make the name easier to read, you can't use spaces in label names so the _ character is a good alternative, I could also have used - but I prefer the underscore like this _ ).
If you look at the coding for the DIV tag (near the top of your code) you will first see the wrapper section (following the name that you gave the DIV tag), you will also see the x and y positions (measured from the top left corner of the page), whether the layer is relative or absolute (if it floats or is locked into a specific position relative to the upper left corner of the page) and you will also see a number for z-index. The z-index is the stacking order of the layer on the page. The larger the number the higher up in the stack the layer will be (like a deck of cards). Most likely your layer is showing a z-index of either 0 or 1. As you create more layers on the page Dreamweaver will give them a new z-index position above the previous layer. So if your original layer was z-index=1 then the next layer will be z-index=2. If you need to rearrange the order that the layers are on the page simply adjust the z-index number. Again think of the layers like a deck of cards numbered 1 at the bottom of the deck, changing the number on the card will change its position in the deck.

Wednesday, December 3, 2008

Images and Background Images in Dreamweaver

"With my form project I am having difficulty placing a saved graphic created in PS into/on top of a background image I also altered in PS and saved for Web and Devices and used this graphic as a backgrond under my body DIV TAG(not a Pseudo-Tag)."

Here are some basic ideas on the background image. When you put a background image into a web page it is inserted in the opening body tag, everything else on the page comes after that tag. You can only have one image in the body tag, so you can't put a logo graphic on top of a background image in the body tag. What you need to do is to create a table or other container right after the opening body tag, put your graphic in that container and center that container on the page. That will give you the effect you are looking for by placing the graphic in front of the background image. If you use a table you can go even further as your table can also contain a background image and then have graphic placed into a cel in the table.

So, think of it as a stack of pictures on a table. The background image is the bottom of the stack, the table is then placed on top of the background image. If you put a background image into the table that image will be on top of the page background image as well since it is in the table. You can then put an image into a table cell and that image would be on top of the table background, which is on top of the page background. You can go even further by using layer elements (DIV tags), these float above the page. You can use as many DIV tags as you like and they will also stack (like a stack of cards) depending on the number you give the tag. This is all explained more thoroughly in our Dreamweaver CS3 training.

Monday, November 24, 2008

Can I add Video to a Web Page using Fireworks?

On adding video to a web page using Fireworks, you can't do that. Fireworks is designed to create graphics for web pages, it is not designed to create actual web pages. Fireworks assumes that you will be interfacing with Dreamweaver to create the actual web page, so you will need to place any multimedia using Dreamweaver.
But, you can use Fireworks to lay out the page so that it is ready to accept video in Dreamweaver. What you need to do to make sure that your layout is not affected is to put in a placeholder image using Fireworks that is the same size as the video you want to insert using Dreamweaver, that will create a properly sized place for the video to go. Then simply replace the placeholder image with the video in Dreamweaver. If you open the Fireworks Help file and do a search for Video you will get step by step instructions on putting in a placeholder image.

Friday, October 31, 2008

Fixing palette and menu locations in Dreamweaver 8

Hi George:
I did something to dreamweaver and lost the side panel and properties director.
These things came up automatically. Also, when I did this, I could not expand the page to the side to see the files, css etc. Nor, Can I expand the file downwards.
Could you please let me know how to make this correction.

Try this. Go to the Window menu,
Scroll down towards the bottom
You will see Workspace Layout
Clicking on that will open up a flyout menu
Click on Designer in the flyout menu, that is the default for Dreamweaver
That should put everything back to the normal setting.

Wednesday, October 29, 2008

Some thoughts on Computer Monitors

"Hi George,
I'm starting to look for a new computer monitor that will be used primarily for Photoshop editing etc. There are a number of 20" to 22" inch widescreen LCD monitors in the under $300.00 range - however, I'm not sure if widescreen systems are the best choice for digital editing. I noticed some of the specs describe 1680 x 1050 resolution and a 16:10 aspect ratio. The small print in the specs also say if you use a resolution other than the recommended one, you may see degradation or other visual artifacts.
Any tips on what I should look for in a monitor or suggestions on specific models that you might have experience with would be greatly appreciated." ....

No specific recommendations, but I do have some general ones. First off, if you are looking for exacting color accuracy then you should be looking at a CRT and not an LCD. Most people don't need exact color match, but if you are working in the printing industry then this could be a consideration (designing magazine ads for instance). Any design work for the web or digital output (CDs, DVDs) really doesn't need the high color accuracy of a CRT, since you have no control over what monitor the image will be viewed on. Differences in viewing monitors will be much larger than any color inaccuracy in an LCD.
The more expensive the LCD, generally the better the color accuracy. I do all of my design work using a CRT, but I have an LCD as a second monitor on my system.
As far as screen resolution goes, it really doesn't matter. Basically the larger the resolution the smaller the images will appear on the screen, so with a large screen you can go for a large resolution. A smaller screen would require a smaller resolution so that the images (icons, text, etc.) would not get too small to be useful. Most CRTs can change resolution with no loss of quality. Most LCDs are limited to a small number of resolution settings and many are limited to one recommended setting. Changing resolutions on an LCD can cause a significant loss of quality, so you should stick with the recommended setting. A wide screen useful in a few cases: you can see a larger desktop on your computer (like taking a normal screen and stretching it out sideways to show more of the desktop). This would allow you to have more room on your screen to work with, which can be useful if you are creating wide images, like 2 page magazine spreads. Of course a wide screen will also show wide screen DVD movies more accurately, so if you plan on watching movies on your computer a widescreen LCD would be a good choice. Also if you are planning on editing video, then the same advantage applies. Most print design work is vertical so a wide screen would not be an advantage there. Basically with a wide screen you can have your program opened up normally and still have some space off to the side to show more stuff. But aside from that there is no real design advantage to having a wide screen.
As far as specific models, go with a well known name brand, my personal preference is for IBM and NEC but there are lots of other good name brands out there. Don't get a budget monitor, you will get what you pay for. There are many areas in the computer world where price and quality don't really matter, but Monitors are one of the few areas where it is worth spending a little more for better quality.

Thursday, September 4, 2008

Putting borders on tables in Dreamweaver 8


I Purchased you complete software program dream weaver 8. I am having a problem. When I want to create a new document Basic - HTML, I then put in a background display which is twinkling stars GIF. I go to insert and put in a layer. The layer box that shows is in blue. I then go to insert a table. When the table appears it does not show any rows or columns it is as if they are hidden. I know I programmed the table right giving it rows, columns etc. I don't understand why the table does not show the rows and columns. I must of done something to hide them and this pertains to all the tables that I sent up in my web site. I might of changed the visual and preferences but I am not sure. Please help me with this.


By default there is no border shown on tables in Dreamweaver. You can easily add a border using the Properties palette below the design window. You can also show a design outline for the table if you want to see the borders, but not have them showing on the web.
To put a border on the table that will show on the web:
Click anyplace inside the table,
Then below the design window you will see a line of text something like this: body table tr td
It won't necessarily be exactly the same, just similar.
Click on the table text that is furthest to the left, this will select the whole table on your page
Now in the design panel below the design window you will see the properties for the table, where it says Border with a box after it put a 1 in the box, this will add a 1 point border to your table. Try different numbers to see what happens.

To put a border on the table that only shows in Dreamweaver Design View, but does not show on the web:
Click on the View menu
Click on Visual Aids,
Then click on Table Borders.
This will put dotted lines around all of your tables, rows, and cells, making them easy to see while you work on your layout.
These dotted lines will not show up on the web, only in Dreamweaver Design View.


Wednesday, September 3, 2008

Using PageMaker to create interactivity

> Hello. I recently purchased the pagemaker training and found it very
> helpful, so thanks for that. However, I am trying to design an
> interactive manual, similar to the "How to Gurus" home page, where you
> have a listing on the left side of the screen and by clicking on a topic
> it will take you to that subject. Can that be accomplished in pagemaker?
> If so, I would like to know the best way to do it. Any help would be
> appreciated. ..............Thanks

PageMaker is designed for creating printed material, not interactive
materials. So you can't create the interactivity in PageMaker. What you can
do though is to do the design/layout in PageMaker, then save the file as
Adobe Acrobat (this would of course require that you also own the full
version of Acrobat). You can then put together the interactivity in Acrobat.
This is basically what I did for an e-Book that I am giving away on our home
page, the e-Book was designed in InDesign, but I didn't do anything that you
couldn't do in PageMaker. Once the e-Book was laid out I saved it as a PDF
file (Adobe Acrobat), opened it in Acrobat and then put in the interactivity
by creating links to the different pages. We don't currently have any
training on Acrobat, but it is pretty easy to use and has a good help file.
Go to www.howtogurus.com to get the free e-Book for an example of using a
page layout program (PageMaker, InDesign, QuarkXPress) along with Acrobat to
create interactivity.


Thursday, August 21, 2008

Photoshop Elements 5 saved Image location

I have purchased your training for Adobe Photoshop Elements 5 but still have a few questions.
I received an email from another person that has Adobe Photoshop Elements 5. It seemed like they were having trouble with having disconnected files and a hard time trying to burn them as a backup onto a CD. What method do I use to prevent that?
I have a file system on the computer where my pictures are organized. I have not moved all of them to Adobe Photoshop as yet especially after i heard this i was hesitant.
I was also confused with making a duplicate copy of all the pictures. When i have edited a picture it seems to make another copy and my original is still there. What is the need to make a duplicate copy?
Thanks Luella


Photoshop Elements always makes backup copies of files and works on the backup. It never edits the original file directly. This is a safety precaution. If you go into the Organizer side of Elements, then open up the Edit menu and click on Preferences, the click on Files (or click on General, then on Files) you will get a page which shows you the different preferences set for saving files in Elements. On the bottom of this page it will show you where Elements saves the catalog (thumbnails shown in Organizer) and where it saves the files that it is working on. You can change where Elements saves files by clicking on the Browse button and choosing a different folder. When you backup the files that you have worked on to a CD you need to backup the files in this folder. If you want to save a specific file to a specific folder location then open the file in Elements Editor and click on File/Save As, then navigate to the folder you want to save to.
My guess on your friend's problem is that they don't understand how Elements organizes files and they were backing up the wrong location. You are also able in Elements Organizer to Move the Files Offline (a file menu option), what this does is put the working files anywhere you choose and only keep a thumbnail in the Elements file folder. Then if you backup the Elements file folder you will only get the thumbnails, not the actual files.
My recommendation in Elements is to set the preferences (as described above) so that you know exactly where Elements is saving the files. Then all you need to do is save that file location. I admit this is one drawback in Elements, that it wants to use its own organization scheme, but as long as you understand what it is doing it should not be a problem.
So, real basic description: When you add images to Elements Organizer it simply creates thumbnails of your original images and displays the thumbnails. It saves the thumbnail images in a location displayed in Preferences/File. When you edit a file in Elements Organizer or Elements Editor it saves the edited version in a location displayed in Preferences/File and leaves the original alone. You can change the location of thumbnails and saved files using Edit/Preferences/File. And you can save a single file to a specific location using Elements Editor/File/Save As.

Do I need to learn ActionScript 3.0 to use the new Flash CS3

Do I need to learn ActionScript 3.0 to use the new Flash CS3 or can I still use ActionScript 2?

ActionScript 3.0 was a major change over previous versions, although the
basic programming language stays the same. The layout of 3.0 is different.
But, you can still program in ActionScript 2.0 if you are using Flash CS3
and there is no reason not to unless you are an advanced programmer. When
you open up the Actions pane in CS3 there is a drop down list that lets you
select which version of ActionScript you want to use. You can also decide on
which version you want to use when you create a new file.


Sound Controls using ActionScript

I installed a instrumental drum music on stage from the
library in flash CS2 and a layer of 2 buttons on the stage named "sound
on" and "sound off". I cannot get the correct scripting for shutting off
and on when pressing the relative buttons. I have also asked a few friends
and no luck. Please help. I have the music on "loop" and "stream".

The function you want to use is setVolume()

For no sound it should look like this setVolume(0)
For full sound it should look like this setVolume(100)

With the number being the percentage of sound.