The web is a medium for Graphic Design, just like magazines, billboards, and t-shirts. To build a site correctly, you need an understanding of how elements are positioned on the page, and why elements look the way they do. You have to be able to understand the code behind the page. This is a bit of a different approach than how you've learned print design, but the web is a different medium.
What we're going to do here is just touch the tip of the iceberg on how to read and write the code necessary to build a website. I have built a few simple templates for you to build upon. You don't need to understand how they all work, but I hope to give you enough information over the class period that you will at least have the resources to figure out as many of the details as you want on your own.
There are four types of coding lanugages that make up websites:
These languages say what elements ARE. For example, the following:
and I'm a paragraph.
looks like this in the HTML:
<h6>I'm a headline</h6>
<p>and I'm a paragraph</p>
In English, those tags say the first line is a "Heading [priority 6]" and the second line is a "paragraph.". Markup Languages are simply ways of describing what to do with text. There's a start and finish to each element. All of the tags in HTML tell the browser how to treat elements. For example, Headings are always H1 to H6, Paragraphs are P, and images are IMG.
If you want to learn more about HTML, the W3C has a great tutorial. For now,
note from issac: XHTML is what we use at Servee, it's a little more structured than HTML, and that means that it's a little less ambigious as to what's wrong and what's right to do, which makes for a little easier time trying to figure out some of the more annoying nuances. Overall XHTML and HTML look and act very simmiliarly
CSS Tells the browser what to do with the markup. This is what web designers spend most of their day in. Once you have your content finished in perfectly coded markup, then you can begin to manipulate how it appears in the browser. All web browsers have default displays. Most of them display type in black Times New Roman, with a white background. With every line of CSS you add, you are overriding browser defaults to display your webpage how you want it. For example, this same line:
and I'm a paragraph.
is styled in the CSS like this:
h6 {
color:#666666;
font-size:18px;
font-weight:bold;
line-height:18px;
margin-top:18px;
}p{
font: 13px/18px Helvetica, Arial, sans-serif;
color:#333333;
}
In English, that says "Do all these things to the H6, and these other things to the P. Notice the string for the P element is much shorter than the string for the H6. That's because I used CSS shorthand. That's just a way to say the same things in fewer lines of code, but it only works for a few elements. You can learn more about CSS in general, again, at the W3C. To decipher more of my CSS shorthand, you can see a list of shorthand properties here.
CSS not only describes how to display the text styles, but it also sets things like layout, background images, borders, alignment, etc. This is the multi-tool for the web-designer.
The best way to learn HTML/CSS is to download Firefox and install Firebug, then click around on some of your favorite sites. The more you look at these languages, the less they look you're staring into the matrix.
Basically, where HTML says what an element IS, and CSS says how an element LOOKS, Javascript tells an element how it should ACT, and it does it after downloading a file to the user's computer. This can be as simple as an animated mouse hover, or as complicated as pulling HTML from other locations via AJAX. For today, this isn't important.
Like Javascript, these are actual programming languages. The difference is that they are never downloaded to the client's machine. Rather, they do things like build HTML pages from multiple databases based on variables, and THEN, sends a dynamically-created file to the end user.
note from Issac: If you'd like to know more about Client or Server Side Programming, especially with Servee, let me know! There are lots of easy ways to get started.
I'm giving away my software to your class for a couple of reasons.
I'm giving away our $8/month package to all of you for free, for a year. That includes a subdomain on our site (yoursite.sites.servee.com). If you'd like to upgrade to the $18 plan, you can have that for half-off, or $9/month. That includes a domain name and a bit more storage.
In addition, if you bring a paid client site to Servee, I'll give you the $18/month plan for free for as long as you've got a client paying for their site. Without further ado...
At this point, we'll get familiar with the program. I'll walk you through a good bit of it, but I've got several good tutorials already written here.
To edit the design elements for your template, you need to get into the backend of the site with Dreamweaver (or any other FTP program).
In your templates folder, I have installed three variations of the same template. I designed these templates with easy customization in mind. Just by changing two image files and a couple of colors in the code, you can make these sites look however you want. You can see all three templates here:
The images that you need to chage are images/htmlBG.jpg and images/logo.png. Right-click on the images to open in photoshop. Alternatively, each template folder has a folder called PSD files. Open those files in photoshop, make your edits, and select File/Save For Web. For the background image, make it a JPG with the compression at 40 or 50. For the logo image, select PNG 24.
To change type colors and fonts, open typography.css and navigation.css. Hit Command+F and search for "#". This will show you all of the color values used in the styles of your template. Change these to any hex value to change your colors.
That's it! That's all you need to edit your template.