Adobe Dreamweaver CS3 Unleashed- P7

Adobe Dreamweaver CS3 Unleashed- P7: The good news is Dreamweaver provides numerous windows, panels, inspectors, and toolbars forstreamlining the way you build websites. The bad news, unfortunately, is that Dreamweaver providesnumerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. Why somany windows, panels, and so on, Dreamweaver is unprecedented in the feature set it provides, allowingdevelopers complete control when building websites and applications....
Nội dung trích xuất từ tài liệu:
Adobe Dreamweaver CS3 Unleashed- P7Part II: Static Web Page Development CHAPTER 5 Web Page Structuring Using Tables CHAPTER 6 Page Formatting Using Cascading Style Sheets CHAPTER 7 Page Structuring Using Cascading Style Sheets CHAPTER 8 Working with Frames and Framesets CHAPTER 9 Working with HTML Forms CHAPTER 10 Using Dreamweaver BehaviorsChapter 5. Web Page Structuring Using TablesIN THIS CHAPTER Inserting and Working with Tables Selecting Table Elements Modifying Table Properties Using the Property Inspector Modifying Cell Properties Using the Property Inspector Working with Tables in Expanded Tables Mode Inserting and Working with Tables in Layout Mode Drawing Tables Drawing Cells Importing Tabular DataOne of the biggest complaints print designers have, when moving from print design to web design, is thefact that HTML is so finicky. More specifically, the placement of elements within your web pages is limitedbecause of the lack of tools available to control the organization of text, images, and media within the page.Although this may be true to a certain extent, HTML is, in fact, extremely flexible and offers many richelements that can be used to control the organization of components. As the book unfolds, youll learn aboutvarious elements and technologies Dreamweaver offers to control the pinpoint accurate placement ofelements on your page. Technologies such as CSS and options such as AP Elements and tables can be usedby web developers who strive for the fluid look print design programs have offered for years. The trick islearning the intricacies of the elements and how Dreamweaver allows you to work with them within itsframework.In this chapter, well begin to move from the simplicities of inserting and modifying elements on the page toa richer topic that involves structuring and placing elements on the page using HTML tables. As youll beginto see, tables offer a flexible and simple alternative to the basic formatting techniques weve covered thusfar for controlling the placement of elements within your web pages.To work with the examples in this chapter, visit www.dreamweaverunleashed.com to download the exercisesfiles used in this and other chapters. Place the files located in Chapter05ExercisesBeginningVectaCorp, into a folder on your computer so that theyre easy to reference. Illplace mine in C:VectaCorpChapter05. You may need to update the site definition so that it points to thenewest (more recent) path.Inserting and Working with TablesIf you remember, in Chapter 2, Building a Web Page, the development of our Vecta Corp web page wasseverely limited to inserting text and images in a vertical, linear fashion. Elements on the page wereorganized so that we inserted text and images, followed by a line break, then either more text or anotherimage, and then repeated the process until the page looked somewhat presentable. Although this processmay work for simple web pages, it reveals drawbacks that become immediately obvious when large amountsof text are added to the page. As you can see from Figure 5.1, the background image that we added to thepage begins to repeat itself near the bottom of the companydirectory.html page.Figure 5.1. The background image begins to repeat itself near the bottom when theres too much text on the page. [View full size image]The reason for this flaw may not seem immediately clear, but it begins to reveal itself with someexplanation. The image we used for the background (header_bg.gif) is 1 pixel wide by 2000 pixels high.The positive side is that the image always tiles horizontally no matter how wide we make the page. Thedownside is that the image is 2000 pixels high, and because the natural viewing of pages is such that usersnavigate up and down, if the page exceeds that 2000 pixel height, the image will tile vertically as it doeshorizontally. Another problem, visible in Figure 5.2, is that no definitive break exists between paragraphs.Depending on how the pages width is resized, the text and images may run together. Figure 5.2. Because theres no definitive break between paragraphs, text and images may run together. [View full size image]Although these design flaws are minor, they begin to demonstrate the complexity that our designs couldpotentially hold. As your web pages become more intricate and complex, structuring your web pages usingelements such as tables becomes a viable alternative.Working with tables in Dreamweaver can be a complex process depending on how intricate your designbecomes. To walk you through all the table-based features exposed by Dreamweaver, we ...