Organizing and planning

535 views

Published on

Organizing & Planning for website or web product HTML & CSS

Published in: Design, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
535
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Organizing and planning

  1. 1. Organizing and Planning HTML + CSS
  2. 2. HTML Introduction • HTML : Hyper Text Markup Language • HTML is not Programming Language - It's a Markup • Language is a set of markup tags to describe web pages • History of Markup Language Originally markup was used in the publishing industry.. margins, typeface, style and size, image
  3. 3. HTML Division • Structural (<Table>, <ul>, <ol>, <BR>, <HR>...) • Presentation ( <b>, <big>, <em>, <sup>, <sub> ... )
  4. 4. Benefits of Cascading Style Sheets • Powerful and flexible way to specify the formatting of HTML elements • Share style sheets across multiple documents or entire Web site • Rules are applied in a hierarchical manner • General form of rule selector { property: value }
  5. 5. Organising and Planning • • • • Understaning Project User workflow wrieframing Check all GUI / UI Screen Organizing HTMl + CSS – – – – liquid layout Fixed layout Gide Levels of Headings, Design Elemnts • Draw Diagrams • Make Calculations
  6. 6. Organizing and Planning • Grouping CSS – General Styles • • • • • Body style Reset Headings Links Others – Buttons – Helper Style • Forms elements • Notification • Error
  7. 7. Organizing and Planning • Grouping CSS – Page Components • • • • Sidebar Header Navigation Footer – Page Specification • Diffrent Type of layput - Price page – Overrides
  8. 8. Organizing and Planning • Semantic markup – Page Header – H1, H2, H3 – Naming convention – ID’s and Class • #body-container (width, background & color) • #head – – – – .logo .main-nav ul, .sub-nav ul .search
  9. 9. Organizing and Planning • Semantic markup • #content – .page-head h1 – .col-one » .col-one . subhead h2 » .list ul » .list ul li – .col-two – .col-three • #sidebar • #footer • Comments • Sprites
  10. 10. Use the Cascading • HTML multi class • CSS cascading in stylesheet
  11. 11. Benefits • • • • • Faster development Less effort to code, smaller files Easier to maintain Easy to add new elements Easier to hand over 
  12. 12. Resorcess • • • • http://alistapart.com/ http://960.gs/ html5boilerplate.com http://css-tricks.com
  13. 13. Thank you 

×