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 HTML5

Pre-Coding Steps 1. Consider the site's purpose 2. Sketch the homepage 3. Diagram the site's page and folder structure 4. Set up your 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 each of these essential elements:  A main heading that reads "Web Portfolio"  A block of text containing information about you. At a minimum this should include your name and address.  A block of text containing information about the course. This might include information such as the name of the course, school, teacher, year, and period.  A paragraph that provides an overview of the content of your portfolio.  A sub-heading for each of the remaining units of this curriculum (Unit 2 through 7).  Some placeholder content beneath each sub-heading (something like "This section will be completed soon.") You have 10 minutes to sketch out 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 4 - Set up your folder structure Your portfolio will be a relatively uncomplicated site, so it will require only a couple of folders for your files. In “Documents” 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.

Pre-Coding Step 4 - Set up your folder structure 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  styles  scripts

Creating a file for your homepage… Create a new file for the home page.  Open Notepad++ If you don’t have Notepad++, please tell me!  Create a new file, and save the file in the root folder as "index.html“  Leave the file blank for today

Rest of Today Turn in the diagram of your home page. Create Directories and index.html as described in the slides. Show me the results for credit.