1. Web Design Site Structure

2. Site File Structure What is a wireframe?

3. Site File Structure Visible aspects of navigation User interface Content organization File and directory structure Naming conventions All of these topics/items should be discussed when planning a site

4. Site File Structure Understanding Flexibility Accessibility Search Optimization Future Growth and Change Follow protocol and you will have no problems in these areas.

5. Site File Structure What is semantic organization? Consistency is the name of the game Fundamental point: – Develop systematic rules for naming every component of your site, everyone should follow the rules, use plain language whenever possible

6. Site File Structure Naming Conventions – In the past, systems imposed systems of naming files eight-dot-threemyfiles1.doc – Because of this, confusing name files were created – Current naming conventions are more flexible – No reason to cryptic like names Xmn23459cj.html A003xmnt.html my_pictures_page.html

7. Site File Structure Web pages do not contain graphics! – Web servers act as the interpreter for these codes to deliver pictures of content related to that link They are assembled by the browser Think of a browser as a mixing bowl where all ingredients are put together to give you the final product

9. Site File Structure 早上好，再见 The point is, use plain-language that anyone can understand Use plain language when naming files Use hyphens to divide long file names portfolio_LuisToscano the_history_of_the_internet.html

10. Site File Structure Search Engines will be able to rank your site better based on the plain language used on your URL What is a URL? DO you know its components?

12. Site File Structure Structure your site for efficiency and maintainability – Well designed sites contain elements that repeat across pages Examples would be menus, link positioning, contact information, footers, email addresses, etc. – You don’t have to change these in every file HTML, CSS and web servers typically do the work for you

13. Site File Structure What is a “include file”? They are handy for repeating standardized content – Payment policies – Privacy policies – Or any other information that is repeated in many places throughout a larger site

14. Site File Structure Cascading Style Sheets – An extendable system – Set of CSS instructions spread across multiple files – TWO major elements Cascade hierarchy Shared across many pages

15. Site File Structure CSS Cascade Hierarchy with regards to code – General (shared by all pages) – Specific to a file or page – Embedded in specific HTML tags Allows you flexibility in setting general styles for the site

17. Site File Structure Shared CSSS across many pages – All pages share code via links to master CSS files – Advantages If all pages share the same master file (one change will take care of all pages) – Packaging CSS files applies to complex sites Complex sites of CSS code can be 100’s of lines long, often times are subdivided

18. Site File Structure CSS “Skin” files for specific graphics treatments – Used only if you do not want every page or section of the site to look the same – Skins provide Specific graphics Colors Header treatments for all pages in a site section Files move from general to more specific ones

20. Site File Structure Cascading Styles Sheets – Another advantage of CSS is the ability to provide context-appropriate designs using media style sheets – It is possible to adapt a layout Hide navigation elements Adapt it to the devices

21. Site File Structure Semantic structure for HTML content containers – In the planning process, take into account Semantic HTML CSS – Well designed pages include subdivisions and spans These label functional areas of a web page Make sure that you name them carefully and include and ID attribute

22. Site File Structure Named divisions and spans are crucial for these reasons: – Unique names give you more programmatic control – Uniquely named page divisions allow you to apply CSS – They will give you more options in the future, if your pages are contained in consistent page divisions it will make it easier to transform your site