UNIT 2 > MODULE 1

Lesson 1: Pre-coding

Overview

In Unit 2, you begin your introduction to web design techniques. By now you may already have ideas about what you want your web pages to look like. However, a more important first question is: "What do I want my web page to say?" In Unit 2 we will be focusing entirely on content (i.e., figuring out what we want to say). Later, in unit 3, we'll focus on how we want to present that message visually.

The heart of this design philosophy is the notion that content and structure must be kept separate from presentation. When this is true, the content and structure of a web page can be delivered to all sorts of web-enabled devices, not confined by browser, operating system, screen size, or type of device. The same content can be presented in different ways for these different devices and configurations, but it's still the same content.

In the current unit, you will construct a web site that will serve as a portfolio for displaying the work that you complete in this course. This portfolio will continue to play a key role throughout the course.

You will begin with the nuts and bolts of web page development: coding in XHTML. Before you code, however, there is some planning to do. Just as there are pre-writing steps that ought to be done prior to writing an essay there are pre-coding steps to do before you code a web site. Planning ahead will reduce the number of mistakes you'll make while constructing the site saving you time and money if it were the world of work.

Learner Outcomes

At the completion of this exercise:

Activities

The following are the initial pre-coding steps to take in preparing to design your web portfolio site.

  1. Step 1 Consider the site's purpose. If you are clear about the site's purpose (to sell, to inform, to entertain, etc.) and who you are communicating to, you are much more likely to create a better site. For this web portfolio the purpose is simply to inform an audience about what skills you are developing. The audience may be just your instructor, but you may want make it more general so that it could be modified into a resume. In which case the audience would be prospective employers.
  2. Step 2 Sketch the homepage. Before sitting down to a computer it is sensible to make a sketch on paper (preferably graphing paper) of the home page that includes the key elements of your web site. The homepage typically display links to all the most important elements of the web site. In your sketch be sure to include at least all these essential elements:
    • A heading that reads similar to this: Joe Helling's (replace with your name) Web Portfolio
    • A subheading with the name of the course, teacher and section
    • Another subheading: the school address (street, state and zip code)
    • Yet another subheading: your email link
    • A picture of you
    • A brief biography pertaining to your computer experience
    • A list of completed assignments
    • A list of completed web sites
    • A return link to the top of the page
  3. Step 3 Diagram the site's page and folder structure. Web sites are a collection of linked files. Files need to be organized into a system of folders, especially if you are building a complex site. Your portfolio will be a relatively uncomplicated site, so it will require only a couple of folders for your files. You don't need to diagram the portfolio site. If it were a larger site, you would be wise to draw two diagrams on paper: one diagram displaying the page structure of you site and one diagram of the file folder structure. The folder strucure ought to be similar to the page structure especially if other people are going to working with you files. If you hand the site to a client or have others assisting you in the construction of the site, they'll be able to locate files faster if yor folder structure has a clear realtion to the strucure of the web site.
  4. Step 4 Set up the folder structure for containing files. Open your file management program. Make a new folder named "Portfolio_YourName". This main folder or parent folder will hold all the HTML files. Note that there should not be any spaces in file names or folder names. The underscore is a common convention for indicating separations between words in a folder or file name. Servers may be case sensitive so be consistent about capitalization.Open that folder up to make a subfolder for holding images. Name the subfolder "images".
  5. Step 5 Create a new file for the home page. Open your text editor program. Create a new file. Save the file as "index.html". When browsers attempt to load a website where the URL does not include a filename (for example, www.somedomain.com), the server automatically looks for index.html first, and sends that file to the browser if it's available. If it's not available the server has a short list of other filenames it will try (e.g., index.htm, index.shtml, default,htm, etc.) but these vary by server. The .htm extension on web pages came about in the early days of the World Wide Web, when developers using certain operating systems were limited to file extensions with three characters. Some continue the practice of the shorter extension. It is important to use one, either html or htm, consistently to avoid confusing others and causing yourself to mix up files. There are many other types of files that browsers open.

All done?

Show your instructor your the sketch of the homepage and the completed file structure before starting the next module.