14 Steps: How to Use Divs: Dreamweaver Tutorial
August 20, 2009
This is a tutorial straight from the Tutvid.com newsletter!
We will take a look at a whole bunch of the things you want to be sure to know when starting to use Divs.
Learn all about placing and using Divs as well as styling them with CSS in Dreamweaver!
Twitter! http://www.twitter.com/tutvid
Linked Images WITHOUT Borders in Dreamweaver
August 19, 2009
One of the more annoying things in Dreamweaver-which still has not been dealt with by Adobe (not sure why…)-is the little blue border that appears around images when you link them to a web page.
This blue border of doom wreaks havoc especially on PSD based layouts where you have a lot of images. That little border pushes everything apart and sends you to your proverbial coding knees begging the powers that be, your own computer to fix the problem that has you seeing a psychiatrist.
While it probably is not that bad we don’t want to take any chances and personally I know that even when it is not destroying a PSD layout (which I NEVER do anymore) it is plain annoying when I need to adjust to accommodate or get rid of a border that appears around an image that has been linked. Today we fix it all and look at a short-term and a longer-term fix using HTML in one instance and CSS in another.
Short-Term Fix:
I call this the “Short-Term Fix” because you will not want to do it this way for very long before it gets even more tedious. It is still a nice way to know how it’s done so you can give a buddy a quick “do-it-this-way” without getting into all kinds of extra CSS talk.
Step one is to selected the plagued image and look to your Properties panel. Find the “Border” input text field and enter “0” that is a zero. Border = No More.
Long-Term Fix:
The #1 problem with the “short-term fix” is that you need to do that to EVERY image you link! I want to be able to type one thing and make it all go away!
Using a simple CSS Style in the <head> portion of your HTML page you can kill the border automatically every time an image is linked without you doing a thing! That’s what I’m talkin’ about!
Let’s check it out. Step one is entering dreaded “Code” view, but this time believe me, not scary at all. Look for the <head> tag and a few lines later you should see the closing </head>. Those tags are going to be within the first 10 lines or so of your code and all the “head” stuff goes in between these tags, that’s right let’s not get to complex or crazy.
Now enter the code you see in the screenshot above anywhere in between those tags.
Now in between those <style></style> tags we want to type our CSS code as I have in the screenshot above.
Basically all that CSS style is targeting are only <img> tags that are within <a> (anchor or Link) tags. This effectively dumps any border on any img that is linked to something else.
Now if you place that code in a .css file with the rest of your pages styles you will never even have to go and type that into the head area of all of you pages, just make sure you are linked to the .css page and your good to go!
LightBox 2: Simple JavaScript Image Gallery
August 13, 2009
I have received a ton of requests for Lightbox2 tutorials. I have gone ahead and created one using Dreamweaver and by the time you watch this video you will be able to setup and edit your very own LightBox 2 JavaScript Photo Gallery.
Download Lightbox 2 for free right here: http://www.huddletogether.com/project…
Twitter! http://www.twitter.com/tutvid
Symbols in Illustrator
August 11, 2009
I have been using Illustrator and Photoshop longer than any of the other Adobe Creative Suite programs I currently own, however in all my years of drawing and sketching and vectoring stuff in Illustrator it was not until I started using Macromedia’s Flash that I had any kind of appreciation for symbols and that was strictly Flash-only.
After a little while I began picking up more and more (and still am always picking up and learning new stuff) I more or less stumbled into this Symbol idea in Illustrator and it has much of the effect that it has in Flash.
Simply put The Symbol is a small package of graphics you have created in Illustrator that is set aside and saved in a library of symbols. Anytime you need that piece of artwork (be it a flower, tree, fence panel, button, or anything that can be reused) for an illustration or project you simply drag it out onto your art board.
Symbols are a bit more than that though, so let’s take a look at some of the things you can do with Symbols.
We will cover:
How to create a Symbol.
How to Use a Symbol.
How to Edit a Symbol.
Break one Apart.
The Symbol Sprayer.
Adobe’s Own Symbols.
How to create a Symbol.
The only two things you need are Artwork and The Symbols Panel. Open the Symbols panel by going Window>Symbols. Simple grab you Symbol and drop it into the Symbols Panel.
You have successfully created a symbol!
How to Use a Symbol.
Using a Symbol is a breeze. We will touch on the Symbol Sprayer later on, but for now just know that you can use any Symbol by simply dragging it out of the Symbols Panel onto the art board and there you have it!
Note: I have dragged multiple instances of that symbol out.
How to Edit a Symbol.
This is where things can get tricky, but they become oh-so-powerful! The first cool thing about Symbols is they are always linked back to the main Symbol in the Library so anytime you change that “Master” Symbol all the instances you have placed on the art board are changed automatically as well! You can also break the link to the Symbol back in the library so you can have independent artwork on the art board.
To edit the Symbol in the Symbol Panel simply double click it’s thumbnail, make your change and double click anywhere in the white or blank area of the art board! Here I made a gradient color change.
Here I have double clicked to get back to my grouping of stars, all nice and updated!
To break the link from the Symbol to the Symbol Library first select the instance of the symbol on the art board and then simply click the little Broken Chain Link icon at the base of the Symbols Panel. Here I have broken the link for two of the instances and then changed the color to an orange again.
The linked instances update, the non-linked artwork now is independent and changes only when you click it and edit it like you are accustomed to doing.
Break one Apart.
The first step to editing a Symbol independent of the Master Symbol is to break the link to the Symbol. You can select any instance of the Symbol and right click and hit “Break Link to Symbol”.
When you do that you can go ahead and Ungroup or go Object>Expand depending on how you created the artwork etc…
The Symbol Sprayer.
One of the coolest things you can do with Symbols, besides mass editing them, is using the Symbol Sprayer to randomize and tweak, rotate, resize, and screen symbols.
Simply grab the Symbol Sprayer and choose the Symbol you wish to spray and click and hold on the art board and you will see outlines appearing, let go with the mouse and there you have a bunch of symbols.
Just a couple tips for using the Symbol Sprayer:
-Double click on the tools icon in the Toolbox to edit settings such as; Intensity and Density
-Use the Symbol Shifter Tool to move them around
-Hold the Alt/Opt Key when using pretty much any of these Sprayer Tools to get the opposite effect i.e. Alt Click w/ Symbol Sizer makes Symbols smaller instead of larger etc…
-Checkout the coolness of the Symbol Screener Tool! (Also use Alt with this to add opacity!).
In a couple of clicks and drags I have this:
Adobe’s Own Symbols.
Adobe includes a ton of pre-made Symbol goodness for you to divulge in! Simply select the little fly-out menu at the top right corner of the Symbols Panel and select “Open Symbol Library…” and choose from one of the many Symbol Sets and go ahead and play with them!
The Kodak Zi6 (Zed-i-6?) has Arrived!
August 10, 2009
Well the Kodak Zi6 arrived over the weekend and until I got the camera I was sure I was going to use this for the rest of the month and then grab the Kodak Zi8 when Kodak releases that in September at a price of $179.95:
(Image Courtesy of Kodak)
The Zi8 shoots at 1080p HD and has built in image stabilization and apparently has better low-light shooting capabilities has an external Mic Jack (totally awesome!) all for under $200 which is a killer deal, but my initial reaction is that the low-light shooting down-fall of this Zi6 is just too-much. Don’t be scared away I will lay out the Pros and Cons in my brief (weekend long) use of this pocket-sized HD camera.
(Image Courtesy of Kodak)
Let’s take a look at the Zi6 Pros and Cons!
Pros:
-Size: Maybe twice as thick as my iPhone, it easily fits in my pocket. Probably would not fit comfortably in the same pocket with the iPhone however.
-Ease of Use: It comes with batteries and even a charger, pop a memory card in, turn it on and press the red button. Super easy to use, never had to open the manual.
-Screen size: Very easy to preview what you just shot on the Camera.
Pop- Out USB Arm and Tripod Mount: These two should go without saying, but they are a must anyway.
-Microphone is great considering the size: Even 20 feet away from the microphone (indoors) the audio sounds pretty good (not external Mic good, but not bad at all).
-VGA, HD 30fps, and HD 60fps Shooting Modes: 60 fps in HD is, really great just get an SD card that will not run out of space quickly (4GB, 8GB, or 16GB).
-Colors are Saturated Nicely: I love the color saturation on this camera, but as I will mention in the Cons, there is a bit too much yellow.
-HD & AV Output Ports: Quickly hook this thing up and watch in HD on an HDTV. NOTE: The HD port is not HDMI, just a standard (non-HDMI) HD connection.
-Picture Quality: Use this camera outdoors and use a Steadicam-type stabilizer or a tripod and you can get great still, or even walk/running HD shots.
-Record to SD Cards: The biggest knock I had against the FlipHD is the whole built in HDD thing. I want to have expandable memory and the SD card slot (up 32GB) makes the sky the limit!
-.MOV Format: I have heard complaining about the bundled software not being compatible with Mac, but heck, I almost never use bundled software anyway. This camera records to .mov format so I can use my Quicktime editor just fine right from the camera.
-Drag To Computer: When you plug the camera in it almost acts like a card reader and you can open it from “My Computer” and drag the .movs right over to your computer as if it was a normal camera card.
Cons:
-HandStrap Positioning: The Hand strap connector is right on the bottom of this camera so if you decide to attach it (like to keep you from dropping the camera in the river) you cannot stand the camera upright on a flat surface. This almost seems like an oversight on the part of the folks at Kodak. My solution: Don’t use the handstrap.
-No External Mic Jack: I praised the Mic on this camera, but it would still hav ebeen extra sweet to get an external Mic jack… kinda like the Zi8 will have 
-Yellowish?: It almost seems like the darker half of the brightness captured by this camera has a slight (noticeable) Yellow tint. Color Saturation however is excellent so I can’t complain too much.
-Frame Dropping: This Camera appears to jump and jerk and little bit under normal lighting situations, I have not checked it out closely, but even with my 16GB Class 6 SD card I see stuttering.
-Slowed Shutter?: When panning or filming in lower light areas this camera seems to drop to around 10-20 fps, really strange and not even new Firmware seems to help.
-Low Light Sucks: There is no way around this one, the low light capabilities are terrible. Very grainy and blurred, NOT HD looking at all. I am pretty much just going to use this outside only and just get the Sanyo or Canon HD camcorder(s) I have been looking at to tackle anything indoor without decent light.
The Bottom Line:
You can pick this camera up for about $125 from Amazon.com or even get it refurbished for about $100 so it is a great deal. If you want to do vieo blogs in HD on YouTube in a bedroom type setting you will not be pleased with the graininess of your video, but move outside and this thing packs a serious punch!
Great Light = Great Video Quality as well as Smooth Video.
Good Sound and 720p HD (theoretically) for around $100? If you want HD you can carry in your pocket I still recommend it.
If I get around to it this evening I will record a short video about the Zi6 and post it below so you can check out the quality (probably under outdoor light).
Web Design: To Code or Not to Code?
August 6, 2009
That really is the question!
What!?
Virtually anybody who is designing websites and doing coding work involving websites and databases etc… has seen this though process that demands you learn all of these coding languages and further that you code your websites and web projects in general by hand.
Using the term “by hand” I basically mean create the layout XHTML and CSS using a program such as NotePad or BBEdit something that is NOT MS Frontpage, Adobe GoLive, or Adobe Dreamweaver, or a slue of other HTML editors. A mentality that WYSIWYG editors are a very bad thing.
If you are a strict code purist (not a bad thing at all) you know as well as I do typically these programs can bulk up code and if you are a novice typically you don’t learn all of the quirks and funky tendencies of the languages you are working with nearly as quickly, but on the flip side you tend to be less frustrated (short-term) and less intimidated (also short-term). I think there is a very happy medium where a program like Dreamweaver becomes a very, very useful tool without becoming this suffocating strangle hold of feel good, bad code, confusing, and ignorance tolerating that destroys the integrity of your site.
What do you think?
I am curious to know your thoughts on this issue and I know some folks can get pretty adamant and volatile about the topic, so just try to keep your cool, but still give me your case for what you think is better.
My Bottom Line
My bottom line is that first and foremost the new guys should do what they feel comfortable with. Web design and Web development in particular can feel VERY intimidating when first starting and I think that getting that good jump is vital to becoming successful, but as soon as you overcome that intimidation and start feeling comfortable open yourself right back up and learn how to hand code in earnest and become comfortable with that ASAP.
Correct me if I am wrong but I am willing to let a student go ahead and create a website with tables if that is what they feel comfortable with, BUT I am also very clear in letting them know that this IS NOT what you want to do for clients in this era of Web Design, but again if you are not comfortable with coding and getting into that aspect, yes you will be frustrated early and often, but if you ignore the backend for now and make the jump into Web Design and learn how this stuff is actually working behind that design a little later you will have both the best of both worlds: A smooth induction into the Web Design AND a solid understanding of what the heck all that code is.
In a Word
In a word do what is comfortable to you now, but do not even think about getting into Web Design professionally without learning coding, a lot of coding!
Give me your thoughts guys!
A Couple of Spry Drop Down Menu Styling and CSS Tips
August 4, 2009
A Couple of Spry Drop Down Menu Styling and CSS Tips
Changing the way a Spry Drop Down Menu in Dreamweaver looks can be pretty tricky largely in part to the sheer number of different CSS rules that are created in the SpryMenuBarHorizontal.css (or SpryMenuBarVertical.css). All you need to worry about is selecting the rule that targets the tag you want changed, however that is easier said then done especially if you are not sure of how un-ordered lists work, or what list items are etc… No fear however we are going to tackle a few common issues folks have with Spry Menu Bars (aka Drop Down Menus) in Dreamweaver!
NOTE: As we go through this I am working from a horizontal Menu Bar so my CSS file and rules are named a little different then a vertical Menu Bar.
NOTE: We are selecting these CSS rules in the “CSS Styles” Panel. Window>CSS Styles
Change the Size of the Text within a Menu Button
You want to go ahead and double click the “ul.MenuBarHorizontal a” rule. Under the “Type” category try setting the size to something like 0.8em or give it a different color. You can also go under the “Block” category and set “Text-Align” to “center”, which will center up the text within each button.
Change the size of the buttons in the Menu Bar
To change the size of the buttons you want to target the list items within the initial un-ordered list, so the rule we are looking to target is “ul.MenuBarHorizontal li”. Go ahead and select the “Box” category and set the “Width” to whatever size you need/want.
Align the whole Menu Bar to the right of the parent div (Default is aligned to the right)
This is actually pretty easy, all you need to do is select the main the CSS rule that targets the main “ul” tag. Double click the “ul.MenuBarHorizontal” rule in the “CSS Styles” panel and choose the “Box” category and set “Float” to “right”. Your entire Menu Bar will now be pushed to the right of the parent or containing div.
Vertically Align Text within The Menu Buttons
Horizontal alignment with CSS is a real breeze, vertical alignment…ehhh… not so much. You can use padding to vertically align elements, but in the case of these Spry Menu Buttons I tend toward using the “Line-Height” option in the “Type” category. Go ahead and select the “ul.MenuBarHorizontal a” rule and under “Type” simply set the “Line-Height” to the height of the actual Menu Bar.
How can I “Reset” the look of the Spry Menu Bar on a new page?
This requires two things: A little foresight/pre-planning and a new .css file for the new, or reset Menu Bar. Here is how I would get it done:
When you create the initial Spry Menu Bar go into the “SpryAssets” folder and select the “SpryMenuBarHorizontal.css” file and simple hit Ctrl/Cmd + D to duplicate. You will now see “Copy of SpryMenuBarHorizontal.css” sitting below the rest of the files in that folder. Rename that .css file “SpryMenuBarHorizontalRESET.css” and leave it there.
Anytime you create a new page and want to style a Menu Bar with that default look and change the line of code like I show in both the screenshots below.
Change the line:
<link href=”…/SpryAssets/SpryMenuBarHorizontal.css” rel=”stylesheet” type=”text/css” />
to:
<link href=”…/SpryAssets/SpryMenuBarHorizontalRESET.css” rel=”stylesheet” type=”text/css” />
You now have a copy of the initial style sheet so anytime you create a new page and want the simple base default Spry look attach that style sheet. NOTE: If you want another style simply duplicate that .css file and go ahead and make your edits to the new .css file NOT the RESET css file.
TITLE Magazine
August 3, 2009
I love to help out other young and or new design related anything and anyone! The editor of TITLE Magazine recently contacted me about a couple different things and I checked out their publication (which at the time was two issues), they just put out the third installment of the magazine, which is a free online publication.
TITLE Magazine covers all kinds of design and artsy stuff from Design and Music, to Fashion and Art. Pretty cool magazine definitely worth your time to check this one out and even subscribe via Issuu! The magazine is published via Issuu so you get to check out the cool artwork, photos, music and more with Issuu’s cool flash virtual magazine online application.
Go check out the TITLE Magazine! Check out TITLE!
I just flipped through it with the song “What About Today” by “Daughtry” playing in the background and it went together very well… if only the song was a little longer.
Also check out these sceenshots from the latest issue and click any one of them to view the magazine online! Be sure to drop a comment or two to show some love!
Thanks for the magazine Catherine!
