Creating Web Sites with HTML and CSS

4,669 views
4,345 views

Published on

Published in: Spiritual
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,669
On SlideShare
0
From Embeds
0
Number of Embeds
1,234
Actions
Shares
0
Downloads
110
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Creating Web Sites with HTML and CSS

  1. 1. <ul>Web Sites with XHTML and CSS </ul><ul>Svilen Ivanov </ul><ul>Bulgarian Association of Software Developers </ul><ul>www.devbg.org </ul>
  2. 2. <ul>Table of Contents </ul><ul><li>From Image to XHTML+CSS: Step by Step
  3. 3. Floating DIVs and DIVs Behaving Like Tables
  4. 4. Vertical Alignment of DIVs
  5. 5. Centering Site Contents
  6. 6. Web Site with Frames
  7. 7. Web Site with Tables
  8. 8. Web Site with DIVs
  9. 9. Slice and Dice: Showcases </li></ul>
  10. 10. <ul>From Image to XHTML+CSS Creating Web Sites Step by Step </ul>
  11. 11. <ul>From Image to XHTML+CSS </ul><ul><li>Steps for converting a Web site image to XHTML + CSS ( + JavaScript ) </li><ul><li>Decide on the layout type
  12. 12. Fixed width – what resolution (800, 1024, …)?
  13. 13. Fluid width – which parts will resize?
  14. 14. Identify site sections
  15. 15. Header, main, footer, columns, navigation, etc.
  16. 16. Decide on the layout model
  17. 17. DIVs vs. tables (any good reason to use tables?) </li></ul></ul>
  18. 18. <ul>From Image to XHTML+CSS (2) </ul><ul><li>Steps for converting a Web site image to XHTML + CSS ( + JavaScript ) </li><ul><li>Distinguish between content and style
  19. 19. Text vs. images – which belongs to the content and which is part of the styling?
  20. 20. Create the page layout
  21. 21. Create the layout DIVs and define their CSS
  22. 22. Create the contents of each section
  23. 23. Test the site in different Web browsers </li></ul></ul>
  24. 24. <ul>Fixed vs. Fluid Layout </ul><ul><li>Page layout can be fixed or fluid
  25. 25. Fixed width </li><ul><li>Typical users use at least 1024 x 768 resolution
  26. 26. 900px-1000px page width is OK
  27. 27. Mobile devices have smaller screen </li></ul><li>Fluid width </li><ul><li>Ensure the main page content resizes correctly
  28. 28. Beware of very large screens (e.g. 1920 x 1200)
  29. 29. Fix the min-width for the main <div> </li></ul></ul>
  30. 30. <ul>Identifying Site Sections </ul><ul><li>Typical Web sites consist of header, main section and footer
  31. 31. The main content usually has some main section, sidebars or navigation controls
  32. 32. The main section could be split in columns </li></ul>Main section Header Footer Left Side Bar Right Side Bar Column 1 Column 2 Column 3
  33. 33. <ul>Frames vs. Table vs. DIVs? </ul><ul><li>Site layout with frames is old-fashioned
  34. 34. Using tables for columned design is incorrect! </li><ul><li>Tables are considered SEO unfriendly </li></ul><li>The other option is to use <div> tags </li><ul><li>To place them in columns they must be floating
  35. 35. When they are floating, you can fix their width, but height is determined by their content (or is fixed)
  36. 36. When height is determined by content, background may not be applied properly
  37. 37. Footer must also be floating with clear:left </li></ul></ul>
  38. 38. <ul>Frames vs. Table vs. DIVs? </ul><ul><li>Site layout with frames is old-fashioned
  39. 39. Using tables for columned design is incorrect! </li><ul><li>Tables are considered SEO unfriendly </li></ul><li>The other option is to use <div> tags </li><ul><li>To place them in columns they must be floating
  40. 40. When they are floating, you can fix their width, but height is determined by their content (or is fixed)
  41. 41. When height is determined by content, background may not be applied properly
  42. 42. Footer must also be floating with clear:left </li></ul></ul>
  43. 43. <ul>Floating DIVs </ul><ul><li>Floating DIVs are not part of their parent DIV </li><ul><li>Their height is the height of their content
  44. 44. The parent container's height can be less </li></ul></ul>left <div> Floating-right <div> Non-floating <div> The container <div> has height based on its non-floating content
  45. 45. <ul>Floating DIVs Live Demo floating-divs.html </ul>
  46. 46. <ul>DIVs Behaving Like Tables </ul><ul><li>display:table makes DIVs behave like table:
  47. 47. Supported in all W3C-compliant browsers </li><ul><li>Internet Explorer supports this since IE8 </li></ul></ul><ul><li>#container { display: table; }
  48. 48. #row { display: table-row; }
  49. 49. #left, #right, #middle { display: table-cell; } </li></ul><ul><li><div id=&quot;container&quot;>
  50. 50. <div id=&quot;row&quot;>
  51. 51. <div id=&quot;left&quot;>Left Column</div>
  52. 52. <div id=&quot;middle&quot;>Middle Column</div>
  53. 53. <div id=&quot;right&quot;>Right Column</div>
  54. 54. </div>
  55. 55. </div> </li></ul>
  56. 56. <ul>DIVs Behaving Like Tables Live Demo table-with-divs.html </ul>
  57. 57. <ul>Vertical Alignment of DIV </ul><ul><li>Aligning a DIV vertically is a complex task </li><ul><li>You need three nested <div> elements: </li></ul></ul><ul><li>#container { display: table; height: 400px; }
  58. 58. #row { display: table-row; }
  59. 59. #cell { display: table-cell; vertical-align: middle; } </li></ul><ul><li><div id=&quot;container&quot;>
  60. 60. <div id=&quot;row&quot;>
  61. 61. <div id=&quot;cell&quot;>Vertically Centered</div>
  62. 62. </div>
  63. 63. </div> </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd&quot;> </li></ul>DOCTYPE is important!
  64. 64. <ul>Vertical Alignment of DIVs Live Demo div-vertical-alignment.html </ul>
  65. 65. <ul>Distinguish between Content and Style </ul><ul><li>Separating content from presentation </li><ul><li>The HTML content is the essential information published in the Web page, e.g. text + images
  66. 66. The presentation is the layout and styles used to format the content or decorate it </li></ul><li>The content should live in the HTML
  67. 67. The presentation should live in the CSS
  68. 68. When the CSS is disabled, the site should look like an article with titles, lists and paragraphs </li></ul>
  69. 69. <ul>GIF, JPEG or PNG? </ul><ul><li>GIF, JPEG and PNG are the three most common image formats in the Web </li><ul><li>JPEG is used for large images, e.g. photos
  70. 70. GIF and PNG support transparency </li><ul><li>Used for bullets, icons and small images
  71. 71. Transparent PNG not supported by old browsers
  72. 72. PNG files are larger than GIF
  73. 73. GIF supports less colors than PNG
  74. 74. GIF supports animation </li></ul></ul></ul>
  75. 75. <ul>Centering a Fixed-Width Site </ul><ul><li>Several ways to center the content of the site: </li><ul><li>Placing it in <center> tag – deprecated
  76. 76. Using CSS text-align:center </li><ul><li>Will affect all child nodes too </li></ul><li>Using CSS margin:0 auto
  77. 77. The width of the content is fixed
  78. 78. The left and right margins are set to automatic </li></ul></ul><ul><li>width: 900px;
  79. 79. margin: 20px auto; </li></ul>
  80. 80. <ul>Centering Site Contents – Example </ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;>
  81. 81. <head>
  82. 82. <style type=&quot;text/css&quot;>
  83. 83. body { background-color: #CCCCCC; }
  84. 84. #site-contents {
  85. 85. width: 940px; margin: 20px auto; }
  86. 86. </style>
  87. 87. </head>
  88. 88. <body>
  89. 89. <div id=&quot;site-contents&quot;>
  90. 90. <h1>Welcome to our Web site!</h1>
  91. 91. ...
  92. 92. </div>
  93. 93. </body>
  94. 94. </html> </li></ul>
  95. 95. <ul>Centered Site Contents Live Demo ************ </ul>
  96. 96. <ul>Web Site Based on Frames </ul><ul><li>Web sites based on frames </li><ul><li>Easy-to-develop
  97. 97. Works for small and simple Web sites
  98. 98. Considered old-fashioned, not recommended! </li></ul></ul><ul><li><frameset rows=&quot;85,*&quot; cols=&quot;*&quot; frameborder=&quot;no&quot; border=&quot;0&quot; framespacing=&quot;0&quot;>
  99. 99. <frame src=&quot;header.html&quot; scrolling=&quot;no&quot;
  100. 100. noresize=&quot;yes&quot; />
  101. 101. <frameset cols=&quot;126,*&quot; frameborder=&quot;no&quot; border=&quot;0&quot;
  102. 102. framespacing=&quot;0&quot;>
  103. 103. <frame src=&quot;left.html&quot; name=&quot;leftFrame&quot;
  104. 104. scrolling=&quot;no&quot; noresize=&quot;yes&quot; />
  105. 105. <frame src=&quot;welcome.html&quot; name=&quot;mainFrame&quot; />
  106. 106. </frameset>
  107. 107. </frameset> </li></ul>
  108. 108. <ul>Web Site with Frames Live Demo ************ </ul>
  109. 109. <ul>Web Site Based on Tables </ul><ul><li>Web sites based on tables </li><ul><li>Easy to layout the page elements
  110. 110. Semantically incorrect, not recommended! </li></ul></ul><ul><li><table class=&quot;siteTable&quot;>
  111. 111. <tr class=&quot;headerRow&quot;>
  112. 112. <td class=&quot;logoCell&quot;>Logo</td>
  113. 113. <td class=&quot;headerCell&quot;>Header Text</td>
  114. 114. </tr>
  115. 115. <tr valign=&quot;top&quot;>
  116. 116. <td class=&quot;menuCell&quot;>Menu</td>
  117. 117. <td class=&quot;mainContentCell&quot;>Main Content</td>
  118. 118. </tr>
  119. 119. <tr class=&quot;footerRow&quot;>
  120. 120. <td colspan=&quot;2&quot;>Footer</td></tr>
  121. 121. </table> </li></ul>
  122. 122. <ul>Web Site with Tables Live Demo ************ </ul>
  123. 123. <ul>Web Site Based on DIVs </ul><ul><li>Web sites based on DIVs </li><ul><li>The best, semantically correct approach
  124. 124. Sometimes is hard to implement </li></ul></ul><ul><li><div id=&quot;header&quot;>
  125. 125. <div id=&quot;headerLogo&quot;>Logo</div>
  126. 126. <div id=&quot;headerText&quot;>Header</div>
  127. 127. </div>
  128. 128. <div id=&quot;container&quot;>
  129. 129. <div id=&quot;leftSidebar&quot;>Menu</div>
  130. 130. <div id=&quot;mainContent&quot;>Main Content</div>
  131. 131. </div>
  132. 132. <div id=&quot;footer&quot;>Footer</div> </li></ul>
  133. 133. <ul>Web Site with DIVs Live Demo ************ </ul>
  134. 134. <ul>Creating a Web Site Slice and Dice: Showcases </ul>
  135. 135. <ul>Slice and Dice Showcase </ul><ul><li>We should convert the following image to XHTML+CSS: </li></ul>
  136. 136. <ul>Layout and Style </ul><ul><li>Fixed width or fluid width? </li><ul><li>Fixed width will work well </li><ul><li>Need to center the content and use some background to fill the rest of the page </li></ul></ul><li>Frames, tables or DIVs? </li><ul><li>DIVs with table layout will work best </li></ul></ul>
  137. 137. <ul>Step 1 – Determine the Pieces </ul><ul><li>First step is to determine the parts of the design </li></ul>
  138. 138. <ul>Step 1 – Determine the Pieces (2) </ul>This is the logo – should be image tag the site header div This can be background image
  139. 139. <ul>Step 1 – Determine the Pieces (3) </ul><ul><li>3 columns design: Easiest way is – table, one row, three cells </li></ul>Menu cell Body cell Right cell
  140. 140. <ul>Step 1 – Determine the Pieces (4) </ul>Footer – div, center the text with CSS
  141. 141. <ul>Step 1 – Determine the Pieces (5) </ul>two separate lists in table or two floating divs DIV with links (A tags) Unordered lists, strong tags, links Article headings (H1 and H2 tags)
  142. 142. <ul>Step 2 – Which Parts are Image and Which HTML? </ul>All elements backgrounds and borders are solid so we can use css colors instead of images Browsers do not support such font and effects so we have to place this text using image This bullets can be either CSS background image or default list bullet
  143. 143. <ul>Step 3 – The Small Details </ul><ul><li>Look for the small details and decide if they should be in CSS, HTML or image </li></ul>Example: this images have border that should be defined in the CSS, not part of the image
  144. 144. <ul>Case Study </ul><ul><li>Example site design http://pypt.org/ </li></ul>
  145. 145. <ul>Case Study: Text or Image </ul><ul><li>Three ways to create the top part: </li><ul><li>Use text over background image, absolute positioned DIVs
  146. 146. Use table, slice the image to fit the needed rows and columns
  147. 147. Leave the text in the image </li></ul></ul>
  148. 148. <ul>Case Study: Two Backgrounds </ul><ul><li>To achieve the underline and the leaf image we can use only CSS. We need two tags: </li><ul><li>Outer tag has the leaf as background image, padding-left so the inner doesn’t cover it
  149. 149. Inner tag has the underline as background image, repeat-x, positioned in the bottom
  150. 150. Note: the underline background image is 1px wide to save bandwidth! </li></ul></ul>
  151. 151. <ul>Case Study: Rounded Corners </ul><ul><li>Rounded border corners are supported by CSS3 </li><ul><li>Not yet supported by most browsers
  152. 152. But soon will be
  153. 153. We can create them with multiple images in table
  154. 154. Too much code
  155. 155. jQuery to the rescue! </li></ul></ul>
  156. 156. <ul>Exercises </ul><ul><li>Create this with XHTML and CSS. Using tables and frames are not allowed!
  157. 157. See the file: site-sample.png </li></ul>
  158. 158. <ul>Exercises (2) </ul><ul><li>Create this with XHTML and CSS. Using tables and frames is not allowed!
  159. 159. See the file: architecture.psd </li></ul>

×