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 website 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 website. 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. 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. At first, the audience may only be 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. 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 website. The homepage typically display links to all the most important elements of the website. 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 websites
    • A return link to the top of the page
  3. Diagram the site's page and folder structure. Websites 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 your site and one diagram of the file folder structure. The folder structure ought to be similar to the page structure especially if other people are going to working with your 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 your folder structure has a clear relation to the structure of the website.
  4. Set up the folder structure for containing files. Open your file management program. Make a new folder named "Portfolio_YourName". This main folder, also known as a parent folder or root folder will hold all the files that you create in this class. 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. Most of your web pages will be stored in this folder. However, in later units you will begin to add images and other content to your web pages that require the use of supplemental files. For organizational purposes it's a good idea to store these supplemental files in separate subfolders. For your portfolio, create the following subfolders inside your main folder:
    • images
    • style
  5. Create a new file for the home page. Open your text editor program. Create a new file, and save the file in the root folder as "index.htm". For now, this is just a blank file but you'll add content to it in the next lesson.

About the filename index.htm:
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.