Lesson 1: Pre-coding
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.
At the completion of this exercise:
- you will have learned pre-coding design steps.
- you will have applied the steps listed below as you prepare to design you own web portfolio site.
The following are the initial pre-coding steps to take in preparing to design your web portfolio site.
- 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
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.
- 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
- 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.
- 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:
- 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.
Show your instructor your the sketch of the homepage and the completed file structure before starting the next module.
Copyright © 2005-2008 by University of Washington.
Permission is granted to use these materials in whole or in part for
educational, noncommercial purposes provided the source is acknowledged.
This product was created with support from the National
Institute on Disability and
Rehabilitation Research of the U.S. Department of Education (grant
#H133D010306), and is maintained with support from
the National Science Foundation (grant #CNS-0540615). The contents do not
necessarily represent the policies of the U.S. federal government, and you
should not assume their endorsement.