1 / 10

HTML/CSS Website Overview

HTML/CSS Website Overview. Dr. Lam. Typical Process. Learn HTML/CSS Complete information architecture Write, gather, edit content Create wireframe and/or design mock-up Build HTML/CSS site. Information Architecture. Description: Creating a “blueprint” for your website

leland
Télécharger la présentation

HTML/CSS Website Overview

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. HTML/CSS Website Overview Dr. Lam

  2. Typical Process • Learn HTML/CSS • Complete information architecture • Write, gather, edit content • Create wireframe and/or design mock-up • Build HTML/CSS site

  3. Information Architecture • Description: Creating a “blueprint” for your website • Outcome: You’ll know how many pages your site will have. You’ll also know what you’ll include on each page and how a user will navigate from one page to another. Usually web designers will create site maps at this stage. • What you should be working on NOW: Once you’ve made these decisions, you should begin writing and gathering your content. Content can be written in HTML, simple text documents, or Word documents.

  4. Site Map Example

  5. Create Wireframe (Required) • Description: A wireframe is a blueprint for a single page of your site (usually home page). It signals where each major element will go. • Outcome: You’ll know exactly what elements your page will consist of and where those elements will go. • What you should be working on NOW: Look at layouts that you are drawn to or impress you. Start hand drawing your wireframes. In lab, you’ll learn to create a wireframe in Photoshop.

  6. Wireframe Example

  7. Create Mock-up (Optional) • Description: A mock-up is what one page on your actual website will look like. • Outcome: You’ll know exactly what all of your elements will look like (e.g., colors, fonts, spacing, etc.). This is usually done in photoshop or some other graphic design software. • What you should be working on NOW: Nothing/

  8. Mock-up Example

  9. Suggested Deadlines • All final deliverables are due when the final project is due. However, to stay on track, I suggest the following deadlines for yourselves. • Wednesday, February 19- Two Personas • Monday, February 24- Wireframe • Wednesday, February 26- Draft of written copy

  10. Other Considerations Regarding the Project • Approximately 15% of your final project grade will be based on valid HTML5 and CSS • Valid HTML/CSS occurs when you follow the syntactic rules of each language (e.g., every tag that opens must close, tags close in opposite direction they open, images have alt tags, etc.) • Therefore, regularly test your HTML and CSS using the following sites: • http://validator.w3.org • http://jigsaw.w3.org/css-validator/

More Related