Web Design Site Structure Site File Structure What

Web Design Site Structure

Site File Structure • What is a wireframe?

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

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

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

Site File Structure • Naming Conventions – In the past, systems imposed systems of naming files • eight-dot-three myfiles 1. doc – Because of this, confusing name files were created – Current naming conventions are more flexible – No reason to cryptic like names Old school Xmn 23459 cj. html A 003 xmnt. html New School my_pictures_page. html

Site File Structure • Web pages do not contain graphics! – <img src=“kitty. jpg” alt=“pet cat”> • 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

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_Luis. Toscano the_history_of_the_internet. html

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?

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

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

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

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

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

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

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

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

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