The idea is not to destroy it or burn it or harm it in any other way. Instead use your iPad as an informational screen.

Make the iPad post RSS feed, weather, maybe play news etc. BUT while it`s hanging on the wall. I would be scared too, to hang $600 piece of electronics on the wall, well not including my TV, I would be. However, Yanko design had solved this, or so they say.

Imagine a cellphone display, MP3 player display just as simple as a bracelet. The information scrolls around on it. I can see this being useful to runners because who wants to run around with iTouch or any other big screen sized device.

Get a small cellphone, bluetooth, and the bracelet, and voila as compact as possible. I would get one just for the sheer annoyance of looking at my cell or MP3 player to see what`s going on, who texted me, what`s playing etc. If it had OLED screen, which I am sure that in future it will, then we are in for some crazy inventions, but for now this will have to suffice.

I came across this cellphone, well iPhone maybe even an iTouch, holder. Pretty cool, hope it will be on sale somewhere soon.
Made by Yanko Design

Imagine just a small box, not even micro ATX. Smaller than that, and imagine it not bothering you anywhere, just being in the wall like a regular power outlet.

Well, you are in luck. The technology exists, it`s new, and still boring white. If you ever get hold of one of these get a spray paint and make it look better, at least that is what I would do

The Scoop

It is slower than your off-the shelf netbooks, but also 5th the size. Nevertheless, I could see using this maybe as a guest pc (for the guests whom I don`t like) maybe kids for homework. the specs of it make me not want it at all. At last there is the price. For whopping $300 (google prices)

Imagine instead of white, Ferrari red or Lamborghini yellow. That would make the walls pop.

I will rather hack my wall to accept the netbook, which is

A) cheaper

B) FASTER

C) has a screen (even if it is small)

Given the sales nowadays, I know you can get a netbook for half of the Jack PC price, yet it will be faster.

I appreciate the idea,

I bet they will have many restaurants as customers.

Lastly,

I thought of a different concept, where the only computer in the house will be in the basement or closet, something pretty powerful, and all you have to do is to install Usb ports and monitor port in the walls around the house, something like Jack Pc, but lot more practical because where ever in the house you are, all you have to do is login. No need to turn on pc, drag flash drives or worry about updates on all computers.

I am sure the readers of DavePCGuy have been wondering about this very long absence of articles. Well, the story is long and tedious but basically, all summed up, it’s because I have had TOO much to do. I’ve come up with an SEO system for my blogs so they get noticed as much as possible (ie. the use of proper plugins, ad placement, stuff like that). I’ve launched some of them but with minimal content.

I’ll be writing an SEO article on my finds later on this week, which will include the proper set up as well as use of those plugins. I’ll also get into editing WordPress themes to suit your needs. Here are a few types of blog themes most people are not aware of.

The Blog “types”

the tweak

Well, last week, I launched a new blog. Check it out.

As you can see, there is a twitter and subscribe button on the top right. Well, the twitter button was not there. I added it manually, it may not seem like much, but these little additions here and there will change the look of the WHOLE theme. Little changes such as:

• custom footers
• extra buttons (like the twitter button)
• font color tweaks
• background tweaks
• adding CSS3

And other, will improve the over-all appearance in ways you can’t imagine. It’s really nice when you know how to tweak the files right. I’ll show you the method in an upcoming article!

light weight

Another thing I want to talk about is the use of graphics in websites. I’ve always been all about light-weight coding and minimal graphics. Well, I’m saying, screw that. Here is an example of a light-weight blog theme:

This blog contains only four different graphics. One is a pile of cash, the next one is the header, another is the background book shelves (a single one repeated, naturally), and the last one is a hover image for the header, and one more is on the bottom. The rest is CSS3. As you can see, I went all out with CSS3, trying out all the different effects in very different ways. My favorite so far is the content area where the blue lines seem to tighten around a certain area. I absolutely love it. I’ll talk about creating this effect in an upcoming post as well.

graphic-heavy

I was talking about the graphics, wasn’t I?

Well, here is an example of a graphic “heavy” blog theme:

I say “heavy” in quotations because it is not as heavy as it may look. This blog theme is naturally meant for iPad-related content. It is made up of a repeating wood texture, the main iPad (the black part as well as the silver-ish border), the dock (just the grey part), the content background (ie. the apple), and the home button on the buttom and its hover. That may seem like a lot, but when you load the page, you’ll notice that it loads fairly quickly. The button on the bottom can be done entirely with CSS as can most of the shadows in the theme. The button actually uses a gradient background but that’s only because of the problems with internet explorer.

Again, the little things like the search bar on the bottom right ADDS a lot to the whole feel of the site. It’s actually my favorite part, and the easiest to code.

the average blog

The last type of a blog that I launched (just out of curiosity), is the average-looking blog. It’s not graphic-heavy nor is it very light-weight. I constructed it from the ground up so there is none exactly like it.

As you can see, it’s simple, it’s nice. And it’s meant for READING! It’s not cluttered. This blog is just…perfect for every day writing. Just like Dave PC Guy, it looks fancy enough but the most important part of this blog is the CONTENT.

There are many more blog types out there including those for magazines and such, but these are the most prominent among regular bloggers.

I’ll post on how to create these blog themes and such so enjoy!

kuler

Kuler is a great tool for all designers. It’s really similar to the Color Scheme Designer in the aspect that it composes several colors for you to use in your design.

It has several other features that make it even BETTER than CSD but there are tons of features missing too. Let’s start with the good stuff

What’s good

• pre-made themes including “random”, “newest”, “most popular”, and “highest rated” categories
• RSS feed for the “highest rated”
• Ability to create theme from an image (upload an image, or choose an image from flickr and select colors)
• community
• Presets for uploading an image (called “moods”)
• Ability to register and sign in to save and share themes

What’s not so good

• there are some reservations about the interface
• rather confusing color picking interface

What’s missing

• export features (you can’t export to PSD, CSS, or HTML as you can in CSD)
• no example sites (CSD allows you to look at example coloring)
• VERY limited color options
• no permalink

“What’s missing” seems not to be such a big deal, but it actually is. The “example site” feature on CSD is amazing and very useful. It can kick-start your imagination and it’s just really cool.

I don’t use the export features but it’s nice to know they’re available. Also, the color options in CSD are virtually LIMITLESS. There are TONS of presets while Kuler does not really have any of those great presets.

Kuler is great if you’re looking for pre-made color schemes and themes but it’s nothing compared to the Color Scheme Designer.

One feature though, that could win me over, is the “Create From An Image” ability that lets you use an image for the scheme. I will definitely try that out and report on it.

Remember a couple weeks ago I mentioned I would be making a website for a chiropractor? Well, here it is. I finally got my client to approve the hosting and the domain. I’m using JustHost for the hosting and I installed a preliminary wordpress template. It’s the easiest way to start up a website. I used a free template I found online.

My client does not wish to have a blog, of course, so I’ll be creating a static website soon enough. Anyways, one of the things my client wants me to do is make coupons, so let’s do that!

My plan is to hopefully create a nice vector coupon design in illustrator, make a PHP script that will send it to a recipient’s e-mail with THEIR name on it. I’m not sure how I’ll be able to do that cross-browser and all that but we’ll make it together!

Coupon

Let’s start with the design. I want it to be large enough so that it basically renders a print page useless. If it’s too small, I always feel like I’m wasting a lot of paper just to print one thing so if it’s large enough, it doesn’t feel like such a waste. I’m thinking it should be about as large as an index card, maybe a bit larger.

Document Setup

I created the new document with a 4×6 dimensions (6×4 when viewed this way). I started up with the little rectangle that signifies the size of my image. Now, let’s turn on the grid by going to view > show grid, and view > snap to grid.

Rounded Rectangle Tool

Next, let’s make an actual rectangle in the image. I used the rounded rectangle tool. Because of the “snap to grid”, you’ll be able to start exactly on the top-left corner and drag all the way to the bottom-right corner in one single stroke. Leave your mouse clicked and press either the top or bottom arrow to make the corners more or less rounded. I like them rounded just enough so that they leave one square of the grid uncovered in the corners. Let go and you’ll have a nice rectangular base we can start working on.

no fill

Click on the rectangle and switch to no-fill (the circled square above) while clicking on the fill palette. This makes sure there will no background. Make sure your stroke is black (palette to the right) and 1pt wide. This should be your result so far:

progress 1

Ah, the hard part is over! Haha, just kidding. Alright, well you see the square grid? Let’s add a couple of elements. I want to include a small text on the bottom that will explain limits of the coupon. I created a guide that’s two squares from the left and another guide two squares from the right. To create a guide, go to view>rulers and then simply drag from the left or the top, right or down, and you should see a guide. Leave it where you please. I started typing the small texts four squares from the bottom (no guide required). I used Myriad Pro and a 12pt font with a center alignment. Tip: start typing where the middle grid-line is. I typed two lines of text and here’s my result:

small text

Next let’s add the title of the company. I created another guide that’s right where the first grey grid line from the top is or the 3-inch marker. I started the text one square below the top and the text-box one square from each side. Text is center-aligned, Myriad Pro, and with a 36pt value. After I added the title, I added a second part of the title. The name of the company is”Georgia Chiropractic Group”, and the name of the practice is “at Sixes Road.” I added this text one square to the left of the center vertical line and one square above the guide. I used Myriad Pro, left aligned, and with a 24pt font. Next, I added a circle with its origin five and a half squares to the left of the right side and on the guide line and it’s three and a half squares long in its radius. Here’s the result:

title

Let’s add the name part. I want to create a custom coupon for each customer (using a php script and some CSS in my next tutorial) so I need to create a name field. Originally, I intended to have the name above a line, but I found it cumbersome, especially with the use of CSS and PHP so I think all I need for now is just a place holder. I used a rectangle with a one point stroke and placed it one square below our horizontal guide and started the rectangle two squares right from the left side (our left vertical guide). The box reaches the second thicker grid-line left from the right side. I added a name and the underline for demonstrational purposes only. Here’s the result:

name box

So far so good, now let’s added the phone number and the address of the business. If, for some reason, your business does not have a single address or a phone number, you can add  mock barcode. If you need the barcode AND the address, you’ll probably have to shrink the box where the name goes, and shrink the “purpose-text” of the coupon as well. I want the coupon to say “$25 Adjustment”, if your coupon is supposed to say “$25 off”, it will take up less space and thus allow you to fit in the barcode. Another alternative way is to shrink the logo, or put the logo as a background to the name box, or any other part of the coupon, such as the “purpose text” itself.

Anyways,  I added the address two squares below the textbox and the phone number two squares below the address. And again, I followed the left vertical guide we set up earlier. Here’s the result:

address

Also, note that I don’t remember the address nor the phone number of the business, and I’ll have to change that later. Now to the right, I propose I add that “purpose text” I was talking about. As you can see so far, I don’t want to add any color nor any special effects. I might later on, but not at the moment, it makes it easier this way. It’s far too hard to describe where I placed the text so just check the picture below.

purpose text

It’s done with a 40pt font, Myria Pro, center-aligned. Now let’s add some “fun” to the coupon because now all it is is just text and a circle that will become a logo later on. Go to a barcode generator. Use any barcode mode you wish to, I used the default and its default settings. Click generate, and open the picture below in PNG (click on PNG right above the barcode), transfer the picture into Illustrator. Next, stretch and shrink it, making it non-usable but still just as much fun, and put it under the purpose-text. Here’s what I got:

barcode

And here’s my final result:

final

That’s it though, save the picture as a .png file and upload it to your website. In my next tutorial, I’ll cover how to add custom names through some PHP and CSS knowledge. Don’t forget to erase the textbox and the name from the coupon. (ie Alexander, the line below it, and the box around it) We’ll add all that with CSS later.
I hope you enjoyed my tutorial!

• CSS Vertical Navigation

  • The List
  • The CSS
  • Sub-Menu

Finally! Let’s check out vertical navigation. This tutorial will cover different tips and tricks on creating the vertical navigation bar. You can read my article on Color Theory and about Color Scheme Designer for more info on picking colors for your navbar. Most navbars, as I’ve heard, depend on javascript for the more hardcore effects but I’ll show you how to create some dazzling, amazing navbars WITHOUT the knowledge of javascript. Which is great, because I don’t know javascript at all.

The List

First we need to set up the navigation using lists and divs with unique id’s we’ll use in the CSS part. This is what it should look like:

<div id=”navdiv”>
<ul id=”navlist”>
<li><a href=”link1.html”>link one</a></li>
<li><a href=”link2.html”>link two</a></li>
<li><a href=”link3.html”>link three</a></li>
</ul>
</div>

Here we set up a container “div” to which you can apply numerous properties. But anyways, we have a nice list set up. Here’s what the same navbar would look like if you wanted a sub-menu to appear:

<div id=”navcontainer”>
<ul id=”navlist”>
<li><a href=”link1.html”>link one</a>

<ul id=”subnavlist”><li><a href=”link1a.html”>link one a</a></li>

<li><a href=”link1b.html”>link one b</a></li>

</ul>

</li>
…..
</ul>
</div>

The whole process can be done without id’s but if you want to implement this in your website, it may cause some confusion.

The CSS

#navdiv {

160px;

}

Result so far:

List

Let’s talk about the navlist and set up the appropriate margins then:

#navlist {

margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid black;

}

Result so far:

List 2

I’ve just basically reset some of the margin and padding values used as a default (it’s always good to include a general reset sheet at the beginning of the CSS file). I’ve also removed the bullet points from the side so that it’s an unordered list without any markings. I’ve set up the font-family (again, a reset) and put a border around our navigation.

Next, we’ll set up a couple values for the “a” element, that is all the hyperlinks involved will follow the style:

#navlist a
{
display: block;
padding: 3px;
background-color: #FFFFFF;
}

Result so far:

List 3

We’ve made it so that not only the WORDS of the hyperlinks will serve as a link but the whole block inside the division will be the hyperlink. It’s a sort of a nice effect. Check the final version to see what I mean.The padding of 3px is essential so that the navbar won’t be clumped together.

Next, we’ll tackle the a:link and a:visited:

#navlist a:link, #navlist a:visited
{
color: #0000CC;
text-decoration: none;
}

Result so far:

List 4

We used these two pseudo classes and look where it’s gotten us. The links are no longer underlined (a success!) and they will also not change color once clicked which, I think, is highly desirable in a navbar. One more effect to go and then we’ll move onto the sub-menu:

#navlist a:hover
{
background-color: #369;
color: #fff;

}

Result so far:

Here’s a nifty effect. When you hover over the link, not only will it show up as a block (defined above) but it will also change color of the background as well as the text. If you delete the sub-menus from the list, you’ll get a nice clean navigation. If you keep the sub-menu items, you’ll get the result above.

Sub-Menu

Sub-menus, yay! Currently, only one sub-menu is supported which sucks but then again, who uses more than one sub-menu? Not me, that’s for sure. Let’s focus though. Here’s initial code concerning sub-menus:

#navlist li>ul{
display: none;
position: absolute;
width: 100px;
margin-top: -1.6em;
margin-left: 157px;

}

Result so far:

List 6

First of all, this is how your navigation bar will look like without sub-menus. Second, this is what it will look like when the sub-menus are not shown.

Ah, so here we go. By using li>ul, we’re only defining lists listed under other lists, now that’s a mouthful. The “display: none” makes the sub-menu invisible for the moment. The position is absolute so when placing this on your website, make sure to change the values accordingly. The only part that will need changing is probably “margin-left”. If you set a different width for the original list, you’ll have to adjust for that. Let’s look at why we need the “margin-top” in the negatives. This is what a simple list looks like:

• one
  • one A
  • one B
• two

See what happened? The nested list has moved down and right. What we want though, is to have the list right NEXT to its parent list item like this:

• one
  • one A
  • one B
• two

The usual value is about -1.4em for margin-top to get the lists lined up but you’ll have to experiment if you added any padding, margins, and such. Like in the list we’re making, I had to adjust by putting -1.6 em. For margin-left, The value here is 40px.

Let’s make the sub-menu appear:

#navlist li:hover>ul {
display: block;
}

And that’s it. We’re finished, this last piece will make the sub-menu appear when the original list is hovered over. There are many ways to re-make this navigation bar to make it prettier but these are the basics. Try experimenting with borders, padding, backgrounds, and such and see what you get.

Final result:

Final List

Here’s the final code:

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=’text/css’>
/* NAVIGATION */
#navcontainer {
width: 160px;
padding: 100px;
}

#navlist
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid black;

}

#navlist a
{
display: block;
padding: 3px;
background-color: #FFFFFF;
}

#navlist a:link, #navlist a:visited
{
color: #0000CC;
text-decoration: none;
}

#navlist a:hover
{
background-color: #369;
color: #fff;

}

#navlist li>ul{
display: none;
position: absolute;
width: 100px;

margin-top: -1.6em;
margin-left: 158px;

}

#navlist li:hover>ul {
display: block;
}

</style>
</head>

<body>
<div id=”navcontainer”><ul id=”navlist”>
<li><a href=”link1.html”>link one</a>
<ul id=”navlist”><li><a href=”link1a.html”>link one A </a></li>
<li><a href=”linkoneb.html”>link one B </a></li>
</ul>
<li><a href=”link2.html”>link two</a></li>
<li><a href=”link3.html”>link three</a></li>
</ul>
</div>
</body>

Setting up (Part 2)

We’ve talked about setting up a XAMPP server and WordPress already in my previous tutorial. Now let’s focus on setting up Photoshop and Dreamweaver for Web Development. If you don’t have Dreamweaver, don’t worry about it. This is not only for PHP but it’s also a basic set up for all Web-Development. Different developers prefer different program.s

A little background on all of this. Adobe Photoshop is by far the best photo editing software out there. A nice alternative for photo editing would be GIMP; unfortunately when it comes to web development, it’s basically useless. It’s a pretty expensive piece of software but for a good reason. Photoshop is just amazing.

Now, about Adobe Dreamweaver. A lot of web-developers do not like this software. It’s one of those “what you see i what you get” types of software. If you learn to work, you’ll find out that it’s pretty good but when it comes to JavaScript and PHP, there are a lot of better alternatives. I use Dreamweaver simply because PHP is not all I do.

Here’s a small list of other code-editors:

• jEdit
• Notepad++
• here’s a list of HTML editors
• here’s a comparison of many different HTML editors

Here are some specialized PHP editors:

• Zend (this is the best known PHP editor)
• UltraEdit
• Here’s a list of PHP editors

I recommend you use Zend if you’re solely going for PHP and if not then try to get Dreamweaver. It has a nice interface and it’s easy to use. If you can’t, and don’t have the money, check out the lists and comparisons and choose the one for you, there are many free options. I’m not a specialist over all these programs, and one day, I will have to try them out but for now, I will use my beloved Adobe products.

Photoshop Setup

I use Photoshop CS4, so bear with me if you have an older version. Most of the set-ups should be the same, and if there’s a discrepancy, message me and I’ll help you out.

Photoshop CS4

Click on the picture to see the whole thing. As you can see, Photoshop has a basic set up.

1. Tools – Here are all the basic tools you can use with Photoshop. Keep it one column because you need as much as you can get. If you have a large monitor, then don’t worry about it and make the toolbar two-column by pressing the following button.
2. Work Area- This is where you’ll be working. This is your canvas. You can either make a blank canvas or have the canvas filled with a color. I recommend these settings for web development:
   

   Canvas Preset

   The 1300 x 1200 ratio is the best I think. Click on Save Preset and save it. This will save you some time when creating the document. If you find the height of the document is inadequate, use the crop tool:

   

   Crop

   While using the crop tool, simply drag the rectangle down and press enter, this will extend your canvas. Also, I know 1300 width seems like a lot but it’s a good working area. While using Photoshop for a template, try to keep all your work centered. Just as in most websites, the center is the key and the rest around is usually the background.

3. Setting - This part of photoshop is meant for tool settings. I’m not going into detail about this section because there are a lot of settings, and I assume you have some Photoshop experience. If not, there are plenty of tutorials that can teach you all that.
4. Pallets – Here are the pallets. They’re basically more tools and useful adjustors in Photoshop. You have the layers pallet, the most important one I think, and many other ones that are concerned with color and all that. While designing and creating new graphics, though, you’ll certainly make use of the adjustment layers and the brushes pallet. The “adjustment layers” are there by default as are the “layers” and “swatches”. If you double click on the name in the sidebar, the pallet will enlarge or minimize. Click on the “brushes” pallet, it should show up in another sidebar next to the default one. Minimize that with the arrows on top, the same ones as in the toolbar. Before I forget, click on view>>rulers. This will show you the rulers which are very useful.
5. The Menu – Here are all the menus at your disposal, from the file options to the filters and windows. Here’s where most of the setting up takes place. Go to edit>>menus. This is not mandatory but it’ll speed up the process of making a template:
   

   Menus

   Okay, you can collapse and expand these with the triangle on the let by a.. Here’s the set-up, under a. are the names of the menu choices. b. is the visibility, ie. if the given menu choice will be visible and with c. you can assign a color to the menu choice. Choose the tools you think you’ll be using the most such as under the edit menu, I highlighted: Define Brush Preset, and Define Pattern.

I have my own workspace set up that you can use, here. Download and copy the file to this location:

C:\Documents and Settings\”your username”\Application Data\Adobe\Adobe Photoshop CS4\Adobe Photoshop CS4 Settings\WorkSpaces

The pathway may be different when you use Vista so if you can’t find it, simply search your computer for “Adobe Photoshop CS4 Settings” and it should come up. Then, while under Photoshop, go to window>>workspace and find the file name (Alexander’s Web). Click yes when it asks you about the menu and you’re done.

Two more things to do and your photoshop will be all set-up. You’ll need a grid plugin for your photoshop. I’ve found two really good ones. One is the Grid-Generator and the other is the Grid-Maker. They’re both free so I installed them both. Download the Grid-Generator and install it in your plug-ins folder under C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-ins

Here under Grid-Generator, you’ll actually be creating a new separate layer with a grid. You can choose how many lines, or partitions, you want of the picture and the transparency of the black background or the white lines. You can choose the color of the lines as well.

Save the Grid-Maker under: C:\Program Files\Adobe\Adobe Photoshop CS4\Presets\Scripts

With the Grid-Maker, you can choose to only show vertial, horizontal, or both guides. The “Configuration” shows where the grid lines will be. “3, 64″ means that after the first three pixels will be made a guide, and 64 pixels later another guide, then the process will be repeated for the maximum width of 1024.

The Grid-Generator will show up in the filter menu in photoshop under “Richard Rosenman” and the Grid-Maker is under File>Scripts.

Anyways, that’s it for photoshop. It’s not much but it will increase your workflow. You’ll find it easier to find the filter you’re looking for and the different menu selections. Also, this setup is meant to show the most workspace area. The grid plug-ins are the most essential part to webdevelopment because with these, you can create a column system, even a gutter and that will help you create a nice clean web design.

DreamWeaver

Dreamweaver set up is a lot more fun when compared to photoshop. You don’t need any plug ins and all you really have to do is set up a new website. So here we go, load up your Dreamweaver. I use Dreamweaver CS3:

Click on the picture to enlarge:

1. SplashScreen: This is what you’ll get when your Dreamweaver starts up. You have a choice to open a recently used document, create a new document, and create a new document from a sample. Once you have your document open, you’ll get this screen:Here, you see that you have a tab on top. When you open multiple documents, you can switch between them using the tabs (same concept as in Photoshop CS4 and Opera). Then you can switch views between only code, split, or design. When you’re doing PHP, don’t expect to see any results when you click on design, it will only show you a PHP icon so when using php, stick to the “code” view.
2. Properties: The properties vary according to what you select. It gives you the option to change fonts, implement CSS, you can mess around with your PHP using the properties bar but all in all, it’s like an options docked pallet that will show you all you can do while selecting something.
3. The Docks: Same concept as in photoshop, you have a bunch of docks that serve different functions. The mainly used one is “files” which will show you all the files in a given folder. You have an option create a “website” wherein DreamWeaver will manage that site’s folder. You can also mess around with the CSS and do all kinds of things using the Docks.
4. Tools: Here we have the tools. All interesting stuff that adds to the “What you see is what you get”. I’m honestly not to concerned with this part because I try to do all the coding myself but just in case you forget how to code something in HTML, or wants some help, the tools are available to you. They can create forms, divs, well just about anything you want in HTML. The “PHP” tab is honestly of no help at all so ignore it.

That’s it for DreamWeaver overview, I’m sure I didn’t teach you much of anything and that’s because you don’t really need to know. If you want to master DreamWeaver, check out the DreamWeaver tutorials. I personally like to use DreamWeaver because it’s neat and efficient. Plus, it came with the Web-Design Custom Suite from Adobe.

So what do we need to actually set-up? Our website and folders!

Go to the top and click on site>>New Site.Site Name: that’s the name of your site. Like this site would be Dave Pc Guy

Local Root Folder: that’s the folder you want to store all your files in. Your directory should look similar if you followed my last tutorial.

You don’t have to set up the images folder right now, I usually don’t but here’s the example.

And here’s a setup for the Testing Server, you can omit this part and just open up the files independently of DreamWeaver.

And that’s it, here’s the result:Your files dock will look similar to this one (devoid of all those files I put there). Now every time you boot up DreamWeaver, you can start working on your files immediately, switching between them, opening multiple files etc.

Well, I hope this helped out some of you on how to set yourself up for learning PHP and HTML!

As I’ve talked about in my last article,  choosing the right colors for your template is one of the major components in making your website design successful. And as I’ve promised, here’s an article explaining how to use the Color Scheme Designer 3.

CSD overview

Type of Color Coordination (1.): You can choose between six different color coordinations or settings. For ever color you choose, under any setting, you will get five different color settings. Two of lighter shade, two of darker shade, and the original color

• The first is Monochromatic which will give you appropriate lighter and darker versions of the original color
• The second is Complement which will show you two monochromatic interpretations. One for the original color and the second for its complement color, the color on the opposite side of the color wheel.
• The third is Triad where you will have an option to choose the main color, and two more colors. Imagine the complementary colors, if you connect the two dots, they will make a cross section of the color wheel. The two other colors are always away from each other at the same angle in respect to the cross-section line. The angle is adjustable from 90 to 180 degrees away from the original color.
• The fourth option is Tetrad which basically features two Complementary pairs of colors.
• The fifth is Analogic, which works similar to the Triad except now you can choose colors 0 – 90 degrees away from the original color
• The last one is Accented Analogic which is the same as analogic except it features a fourth color which is the Complementary color to the original color.

The Color Wheel (2.): The Color Wheel is the most essential part of this website. Here you have a range of hues that you can choose from and set the first color and the others.  Here are its features:

• In the upper left corner is the Hue number which can be used in photoshop when color picking
• In the upper right corner is the Angle in degrees. This number is invisible in Mono and Complement color options
• In the center is the actual color wheel with the signs “cold” and “warm” to indicate the type of color present. You’ll be able to move the grey dot on the slider around the circle to choose the hue you want
• In the bottom left corner is the RGB breakdown of the color you’ve chosen. It’s set to percent and you’ll be able to plug these number into photoshop and other application to get the color you’ve chosen
• In the bottom right corner is the Hex value of the number.

Color Wheel Options (3.): This part of the website will let you choose to adjust the scheme and/or get the color list of the colors you’ve chosen.

• Adjusting the scheme:

Adjusting the scheme

I won’t go into much detail about this section because I rarely ever use it but for you creative minds, I will enlighten you about some of the basics. This part of the website lets you adjust the colors, both the original and the rest. As you can see, there’s a preset drop-down menu. Here you have an option to choose the contrast you want among the color variants you chose. Play around with it and see what you can come up with. On the left side here, you can see the Saturation/Brightness graphing plane. As you shift around the grey dot, you will add or subtract brightness of the colors, or you can shift around the saturation from super-saturated to black and white, and everything in between. On the right is the Scheme Contrast graphing plane. Here, you’ll be able to adjust the color variants (the darks and lights of the original color). If you click on the “adjust variants” tab, you’ll see that you can adjust the saturation/brightness for each individual color of the scheme you’ve created so far. But that’s it, the best way to learn your way around this part of the website is just to play around. There is no way to really say what’s the best way to adjust your colors or what to do.

• Color List:

Color List

Here’s the color list. I used the Tetrad option for the color-picking. Each color variant has its hex number present as well as its little square preview. The colors correspond directly to the scheme preview.

Scheme Preview (4.): The Scheme Preview will show you the original colors you’ve chosen through any Color Coordination option. On the left side are the light variants and on the right side are the darker variants. This is not true for all color options though. If you choose anything other than the Monochromatic option, the lighter and darker variants will switch and/or cycle. Sometimes, you’ll see the dark on the right, and sometimes there will be a light and a dark color on the left. The Color List (shown above) will give you all the hex color values shown here. The first color is the upper left, the second is bottom left, then the middle, then the upper right, and lower right for each Main Color that is set. If you hover over the individual colors, you’ll see the hex value as well. One more thing, there’s a check button on the bottom right corner which will let you preview what white, grey, and black text would look like against all the color variants

Examples (5.): I love this feature. If you click on the light example, a preview webpage will pop-up that uses the colors you’ve just spent all that time setting. This example will feature lighter colors and white while the dark example will show you the version featuring the darker colors and more black. You can preview this any time you want during the process. It’ll also give you an inspiration on how to use the colors.

These are the most important parts of the website. But let’s take a quick over-view of the rest. Right above the “Scheme Preview” are five boxes once again showing the colors but more importantly, they’ll show you the scheme ID. Here’s how you use it, when you type in http://colorschemedesigner.com/ add a “#” and the scheme ID, and here you go, you can favorite this scheme or bookmark it and you’ll have all your settings saved. For example, the ID for a scheme I just put together is “#2m127w0w0w0w0″ the URL address for that would be http://colorschemedesigner.com/#2m127w0w0w0w0 or you can just click on the link that shows your ID and it’ll take you to the URL address that you can favorite or bookmark.

Above that are more options such as “Undo” and “Redo” which are pretty self-explanatory. There’s a “Random” option which will process a random color scheme. There’s also a “vision simulation”, use that only if you have a vision problem such as colorblindness. You can also “Export” your colors and settings into an HTML+CSS format, a text file, and other. Finally, there’s a help button. And don’t forget about the “Instant Designer Shop” which is an online store for Website Templates, Logos, and other services.

Anyways, that’s it, that’s all you need to know about the Color Scheme Designer 3 and I hope you start using it as soon as possible, it’s an amazing tool!