1 / 14

Pre-Coding

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

alodie
Download Presentation

Pre-Coding

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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

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

  3. 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

  4. 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.

  5. 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

  6. Pre-Coding Steps • Consider the site's purpose • Sketch the homepage • Diagram the site's page and folder structure • Set up your folder structure

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

  8. 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.

  9. 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 email 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…

  10. 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.

  11. 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. 

  12. 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

  13. 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

  14. 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.

More Related