Pre-Coding Web Design – Sec 3-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

Objectives The Student will:  Learn pre-coding design steps.  Apply the pre-coding steps to prepare to design a web portfolio site.

Before You Create a Website… Many people begin their web design by deciding what the web page should look like However, a more important first question is: What do I want my web page to say? We will be focusing on content first and “presentation” later

Presentation or Content? Content and structure must be kept separate from presentation. If you do that then…  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.

Your Web Portfolio 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 this semester. We will begin web page development by coding in XHTML

Pre-Coding Steps 1. Consider the site's purpose 2. Sketch the homepage 3. Diagram the site's page and folder structure

Pre-Coding 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.

Pre-Coding Step 2 – Sketch the Homepage Before sitting down to a computer it is sensible to make a sketch on 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.

Pre-Coding Step 2 – Sketch Your Homepage In your sketch be sure to include at least all these essential elements: 1. A heading that reads similar to this: John Smith’s Web Portfolio 2. A subheading with the name of the course, teacher and period 3. Another subheading: the school address (street, state and zip code) 4. Yet another subheading: your link 5. A picture of you 6. A brief biography pertaining to your computer experience 7. A list of completed assignments 8. A list of completed websites 9. A return link to the top of the page

Pre-Coding Step 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. 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.

Pre-Coding Step 3 - Diagram the site's page and folder structure Your portfolio will be a relatively uncomplicated site, so it will require only a couple of folders for your files. In “My Documents” make a new folder named "Portfolio_YourName“ (do not use spaces)  This main folder, also known as a parent folder or root folder will hold all the files that you create in this class.  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 your portfolio, create the following subfolders inside your main folder:  images  style

Creating a file for your homepage… Create a new file for the home page.  Open notepad or Wordpad.  Create a new file, and save the file in the root folder as "index.htm“  Leave the file blank for today

Rest of Today Take a sheet of graph paper Sketch out how you want your homepage to look.  Include all the information on the “Pre-Coding Step 2 – Sketch the Homepage” slide  Turn it in before you leave today. Create Directories and index.htm as described in the slides.