Creating Web Sites with HTML and CSS
•Download as ODP, PDF•
3 likes•4,641 views
The document provides steps for converting an image-based website design into XHTML and CSS code. It discusses identifying sections, deciding on a layout type, distinguishing content from style, and creating the basic page structure with appropriate HTML tags. Floating DIVs and DIVs that behave like tables are described as options for multi-column page layouts. Centering content, vertical alignment, and image formats are also covered.
![[object Object],[object Object],[object Object],[object Object]](https://image.slidesharecdn.com/htmlandcss-110302100414-phpapp01/85/Creating-Web-Sites-with-HTML-and-CSS-1-320.jpg)
![[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
More Related Content
What's hot
Similar to Creating Web Sites with HTML and CSS
Similar to Creating Web Sites with HTML and CSS (20)
More from BG Java EE Course
More from BG Java EE Course (20)
Recently uploaded
Recently uploaded (15)
Creating Web Sites with HTML and CSS
- 3. Floating DIVs and DIVs Behaving Like Tables
- 4. Vertical Alignment of DIVs
- 6. Web Site with Frames
- 7. Web Site with Tables
- 8. Web Site with DIVs
- 9. Slice and Dice: Showcases
- 12. Fixed width – what resolution (800, 1024, …)?
- 13. Fluid width – which parts will resize?
- 15. Header, main, footer, columns, navigation, etc.
- 16. Decide on the layout model
- 17. DIVs vs. tables (any good reason to use tables?)
- 19. Text vs. images – which belongs to the content and which is part of the styling?
- 20. Create the page layout
- 21. Create the layout DIVs and define their CSS
- 22. Create the contents of each section
- 23. Test the site in different Web browsers
- 26. 900px-1000px page width is OK
- 28. Beware of very large screens (e.g. 1920 x 1200)
- 29. Fix the min-width for the main <div>
- 31. The main content usually has some main section, sidebars or navigation controls
- 32. The main section could be split in columns Main section Header Footer Left Side Bar Right Side Bar Column 1 Column 2 Column 3
- 35. When they are floating, you can fix their width, but height is determined by their content (or is fixed)
- 36. When height is determined by content, background may not be applied properly
- 37. Footer must also be floating with clear:left
- 40. When they are floating, you can fix their width, but height is determined by their content (or is fixed)
- 41. When height is determined by content, background may not be applied properly
- 42. Footer must also be floating with clear:left
- 44. The parent container's height can be less left <div> Floating-right <div> Non-floating <div> The container <div> has height based on its non-floating content
- 48. #row { display: table-row; }
- 54. </div>
- 55. </div>
- 58. #row { display: table-row; }
- 62. </div>
- 67. The presentation should live in the CSS
- 68. When the CSS is disabled, the site should look like an article with titles, lists and paragraphs
- 71. Transparent PNG not supported by old browsers
- 72. PNG files are larger than GIF
- 73. GIF supports less colors than PNG
- 77. The width of the content is fixed
- 81. <head>
- 83. body { background-color: #CCCCCC; }
- 84. #site-contents {
- 85. width: 940px; margin: 20px auto; }
- 86. </style>
- 87. </head>
- 88. <body>
- 90. <h1>Welcome to our Web site!</h1>
- 91. ...
- 92. </div>
- 93. </body>
- 94. </html>
- 97. Works for small and simple Web sites
- 101. <frameset cols="126,*" frameborder="no" border="0"
- 106. </frameset>
- 107. </frameset>
- 114. </tr>
- 118. </tr>
- 121. </table>
- 127. </div>
- 131. </div>
- 146. Use table, slice the image to fit the needed rows and columns
- 147. Leave the text in the image
- 149. Inner tag has the underline as background image, repeat-x, positioned in the bottom
- 150. Note: the underline background image is 1px wide to save bandwidth!
- 152. But soon will be
- 153. We can create them with multiple images in table
- 154. Too much code
- 155. jQuery to the rescue!
- 157. See the file: site-sample.png
- 159. See the file: architecture.psd