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 content is and how it is organized. 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, images are IMG, and links (technically 'anchor' links) are A.
If you want to learn more about HTML, the W3C has a great tutorial. For now, we'll move on…
CSS Tells the browser what to do with the markup. This is the code that 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. If you learn these, it will save you some time later… but it's not a bad idea to learn it the other way first. You just need to know what it looks like when you're looking at other people's (my) code.
CSS not only describes how to display the text styles, but it also sets things like layout, background images, borders, alignment, etc. Anything that describes what you SEE should be specified in CSS.
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. Once you have Firebug installed, click the bug in the bottom corner of your browser and click the HTML tab. In the left column, you'll see the markup for the page, and in the right column, you'll see the CSS. Now this is where it gets easy: In the top left corner of the Firebug window, there's a box with a cursor in it. Click that, and then click on an element on your page, such as a headline. Both of the Firebug windows will display the code that describes the element you just clicked. You can see the markup, and all of the styles associated with it. If you want to make edits to the styles, it even gives you the file name and line number that you need to edit.
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. This is an actual programming language – HTML and CSS are markup languages. But I digress. 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. Most designers (myself included) don't ever mess with this stuff on any sort of serious level.
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.