TAILIEUCHUNG - Learning Web Design Third Edition- P35

Learning Web Design Third Edition- P35:Everything you need to know to create professional web sites is right here. Learning Web Design starts from the beginning defining how the Web and web pages work and builds from there. By the end of the book, you'll have the skills to create multi-column CSS layouts with optimized graphic files, and you'll know how to get your pages up on the Web. | Page Layout Templates Layouts Using Absolute Positioning Absolute positioning can also be used to create a multicolumn page. The advantage is that the order of the source document is not as critical as it is in the float method because element boxes can be positioned anywhere. The disadvantage is that you run the risk of elements overlapping and content being obscured. This makes it tricky to implement full-width elements below columns such as the footer in the previous example because it will get overlapped if a positioned column grows too long. When working with absolute positioning remember that every element you position is removed from the normal flow. If content you expect to be at the bottom of the page is sitting at the very top it s because you positioned and thus removed all the elements above it that were holding it down. This is something to keep in mind while troubleshooting. Two-column with narrow footer Method POSITIONED Layout LIQUID The example in this section creates a right sidebar column using absolute positioning. The resulting layout is shown in Figure 16-12. Note that the footer design has been modified for the sake of simplifying the template full-width footers are problematic as mentioned earlier . Footer appears only under the main content. Figure 16-12. Two-column layout with absolute positioning. 326 Part III CSS for Presentation Page Layout Templates The Markup div id header Masthead and headline div div id main Main article. div A div id extras List of links and news div div id footer Copyright information div Markup Notes This style sheet absolutely positions the extras div element against the right side of the page and 100 pixels down from the top to leave room for the header element. The main content div is given a right margin wide enough to make a space for the newly positioned box. WARNING Because this template places columns a specific pixel measurement from the top it may not be appropriate for pages with headers that may .

• Đồ họa - Thiết kế - Flash
• thiết kế web
• vẽ layout
• giáo trình css
• kĩ thuật cắt html
• giáo trình photoshop
• Thiết kế trang web
• hướng dẫn Thiết kế trang web
• kinh nghiệm Thiết kế trang web
• tài liệu Thiết kế trang web
• cẩm nang Thiết kế trang web
• kỹ thuật Thiết kế trang web
• Bài giảng Thiết kế Web
• Đại cương Thiết kế Web
• Tổng quan Thiết kế Web
• Môn học Thiết kế Web
• Mục tiêu Thiết kế Web
• Giáo trình Thiết kế giao diện web
• Thiết kế và quản lý website
• Thiết kế giao diện web
• Nhận dạng các trang web
• Cấu trúc trang web
• phương pháp thiết kế trang Web
• kỹ thuật thiết kế Web
• thiết kế web nhanh
• thực hành thiết kế web
• thiết kế web đẹp
• tài liệu về thiết kế web
• thủ thuật thiết kế web
• mẹo dùng web
• học thiết kế web
• Thiết kế web động
• tài liệu Thiết kế web động
• hướng dẫn Thiết kế web động
• kinh nghiệm Thiết kế web động
• cẩm nang Thiết kế web động