Well, it's time to bite the bullet. By now, at least in theory, you have the pieces you'll need to create a website: textual content, some images if relevant, and a map of the site itself. All these things are subject to change and evolve of course, but you should have enough material to make a start. The reality is that creating a site simply involves dragging text and images onto a page and arranging them. This lecture will hopefully serve to identify some of the issues and obstacles in doing just that, a few tips on doing it efficiently, and pointing out a few sites that can help along the way. I know there will be a lot of questions, problems and issues at this stage; we will try to work through them together. Since I can't guarantee that you're all using the same software to create a site, the lecture will have to be a little abstract - you'll have to delve into your tool more thoroughly on your own. Also, I will continue posting lectures over the next two weeks, but I am assuming that creating your site will take the bulk of the time for the rest of the course; the other lectures are on related issues that you'll eventually need to deal with as well.
****
Virtually all web pages are comprised of HTML (Hyper Text Markup Language); it's also possible to see pages that are built from Flash (a vectored graphic language), VRML (Virtual Reality Modeling Language), and XML (eXtended Markup Language, and essentially HTML's parent) to name a few, but HTML is what we will be dealing with.
There are two basic ways to build a web page, and two basic ways to build a web site. A page can be built "by hand," by literally coding the HTML directly. It can also be built with a page editor, or "wysiwyg" tool; I've named a few, and they include GoLive, Dreamweaver, Frontpage, BBEdit, Netscape Composer, Net Objects, Quark, and Microsoft Word (to name some common tools). My guess is that if you have a recent copy of Windows, you probably have a copy of Frontpage already. I recommend against using Word to build sites, but if you have nothing else at hand, it will have to do. If you're planning on buying software, I'd recommend GoLive ($399) or Dreamweaver ($299). Dreamweaver is probably the leading site creation tool. I am assuming that you are using some tool, and not coding HTML.
As with a page, a site can be built "by hand," page by page, or as a site in its entirety. It's for this last option that the tools really save you time - they help you create a look and apply it across many pages, allow you to create site maps, and keep your site files well organized. They can also help you publish your site to the web proper (the next lecture), create interactive menus, and many other things.
Essentially, you can see both a web page and a website as a "bucket,"into which you can throw content (and in some cases, functionality). This is, at its essence, what "object oriented" means - you may come across this term in just about any technical design field, and a lot of web design books will mention it. It means two things - thinking of information as groups of things, and inheritance. Inheritance means what it sounds like - objects can inherit properties and functions from each other in a hierarchical way. Look at one of the website maps submitted - they are each an object (a site, defined implicitly by the boundaries of the page), and contain many objects that are related to each other. Each inherits the property of being part of a particular site. Each page in a section inherits the properties and associations of that section.
I bring up inheritance and object orientation because it's an important and powerful idea when creating a website, and can have very practical benefits. As I mentioned above, you can build a website "in its entirety," or from the top down, instead of page by page. For instance, you can create what's called a style sheet (CSS, or Cascading Style Sheets are a part of the HTML 4.0 specification). A style sheet, at its simplest, can define aspects of a page's look and feel, such as the color of the primary text, the size and color of different types of headings, and what bold and italic fonts should look like. If you define such a style sheet up front, you can change those aspects of an entire site by editing a single page, and you can create a new page and already have defined a great deal about how it will look. Another such tool in the arsenal of site creation is a template - a blank HTML page that defines what each page of your site will look like. The point is that there are many tools and functions that are part of both site software and HTML that can help make site creation easier; it's a question of how much you want to learn or figure out as you set out to create and manage your site.
Whatever tool you use, the toughest part is frequently understanding how to get the tool to do what you want. Any bookstore will carry books on using whatever tool you choose, as well as on HTML, CSS stylesheets and more. However, you can also use the web pretty effectively - I recommend using google (best search engine on the web) and searching for "using dreamweaver to build website" (insert the name of your tool of course). You'll get a plethora of pages back, with brief descriptions. With a little persistence, you'll find a page / tutorial that appeals to your sensibilities.
How do you figure out what goes into a design on a particular page? This is a tricky issue: the design tools themselves don't necessarily have any limitations. However, the web itself currently has a great many constraints:
bandwidth Let's face it, this is the single biggest constraint on design today - most information has to be tailored fit over 56K modems in the home. A general rule of thumb is that the HTML and the images that constitute a page should be no more than 40K for fast download times. If the content is only being distributed over a local area network, this constraint is usually lifted, but it's hard to know for certain who will look at a web site. Site tools will usually tell you your page size, or you can save a page and load it into a browser to see how "large" it is. Note again that the page is the size of the HTML *plus* the images.
screen/display Although a computer monitor has a much higher resolution than conventional television, the information density on the screen is low - 72 pixels per inch. A photo-quality printer, by contrast, has about 3000 pixels per inch. Because of the monitor itself, the web doesn't lend itself to the kind of content you might put on paper. Since virtually every image is either a GIF or a JPEG (compression formats), yet more information is lost in the storage format. You should plan on your site being viewable within a 600x800 pixel area if you want "everyone" to be able to see it.
color The web palette is extremely limited (217 colors); subtle nuances and shading become extremely difficult — thus the trend in site design towards blocks of complementary and contrasting colors to delineate different areas and meaning, rather than subtle embellishment.
protocols HTML was never designed to lay out graphic pages, let alone with the precision that most design tools allow today. A designer has severe limits on how accurately things can line up and overlap. Images, for instance, can either be left, center, or right-justified. Again, this can be seen in the generally sparse way that pieces of information are scattered on the web page. Cascading Style Sheets (CSS), Flash, and soon Extended Markup Language (XML) all offer new ways to structure content on the page. CSS in particular will allow multiple layers, and (theoretically) to-the-pixel alignment. Unfortunately, there is a great deal of inconsistency in the support for these protocols across browsers and platforms, and as a result, it becomes extremely important to preview designs on a wide variety of machines and configurations before one can be certain of the desired result.
Creative use of tables, spacer-images, javascript, and other "tricks" (webmonkey is a good source for these things) allows more customized pages than would appear obvious at first glance, but again, this requires developing a specialized knowledge and set of skills which are certain to become obsolete as protocols evolve. In general, Lynda Weinman's book is probably the single best resource for designing and processing graphics for today's web.
By far the easiest way to build a web page is to steal someone else's. Simply find a page you like, and choose File / Save As, and grab the HTML that creates that page. There are even tools (Webwacker comes to mind) that will copy entire web sites onto a local drive for you. There are three good reasons to do this: you learn how someone else did it by example, you use something you don't necessarily know how to create, and, obviously, it's fast. Note that this technique works best on pages that are HTML-only; today, a page can use Flash, CSS, javascript and server-side processing, or rely on inheritance for some of its properties, so copying the source isn't guaranteed to work.
I'm not of course suggesting you simply steal someone's site, rather that you utilize another site's code to speed your implementation. There's a substantial difference between constraining your work to someone else's, and using someone else's work to facilitate your own. In the code development world, re-using code is actually encouraged and planned for, and works extremely well to speed development. Class inheritance is based on this premise, as are Cascading Style Sheets. Because the HTML is visible to the end user, it's a readily available resource for web site development.
The assumption here is that you've used another tool such as Photoshop, Illustrator or Quark to create your initial design; in point of fact no web editor (e.g. Dreamweaver) allows you to create images and designs the way graphic design tools do. Rather, WYSIWYG web editors allow you to take the pieces that comprise a web page, and assemble them into a finished page and site, without requiring you to know HTML.
1. The basic process is to take whatever you've designed, and flatten that design into two layers - background and foreground. The foreground then comes apart into pieces, much like cutting apart a newspaper or jigsaw puzzle.
(Refer to the Dreamweaver lecture for more specifics on how to set up a site) but as a rule, create a separate folder that will contain only GIFS, JPEGS and HTML files. Most projects actually set up an "images" folder inside the site folder, so this is a good practice to follow, but not required.
2. Lay out a page so that it can clearly be broken down into component pieces, which should align in a regular grid pattern, allowing the page to be divided up with straight lines. None of the pieces should encroach on or overlap the area of any other pieces. Probably the most basic HTML tag to be used is a Table, which can be broken down into rows of columns. Individual cells can be merged, but all the pieces are always rectangular in shape.
3. Since the web does not support many fonts (Arial, Helvetica, and Courier are about all you can guarantee), the design needs to allow for some text to in fact be part of an image (because of the typeface and the way the text is manipulated to desired affect, as in a button for instance). Actual text is used when content is likely to change more frequently, or when there is a large volume of text that is "stored" in a word processing format for editing and spelling purposes.
4. The layout is finalized by adding color, both for aesthetic reasons, and to define areas and meaning within the page. The colors should not be arbitrary, but selected from a web-safe color palette. Most graphic design tools today allow you to choose from a "web palette" of some kind, which contains only web-safe colors.
The final page image is then broken down into its component pieces, and each image is saved separately as a GIF or JPEG, as appropriate. These pieces are then inserted into a table in Dreamweaver. It's typically easier to create such a table first, and set its border size to "1" in order to see it and work with it before finalizing the page.
There's a lot to absorb here. The best strategy is to leap into the breach - start creating a web page. As you play with your page, your site, and the tools, you'll find a number of the above issues cropping up. Don't despair, you'll get there!