The ceramics photo is inserted directly in the HTML code, as a normal image. Then, make your browser window smaller, noticing how the photo and logo shrink in size.īack in Dreamweaver, take a look at Code View to see how this is done. Go to File > Preview in Browser, expanding your browser window to its full size. Content images can't be cropped as easily as background images, but they can be set to resize.ĭownload the penland folder from the course downloads area and move it into your local root folder. Product photos, charts, diagrams, and other informative visuals are considered to be part of the page content, and should be inserted in the HTML source code. Setting the background-position to "right" ensures that the the right side of the image remains intact, while the left side is cropped.ĭecorative images like banner photos, border graphics, background textures and patterns can (and should) be inserted as background images using an external style sheet. The right side of the ANAO banner image is important because it contains the ANA0 logo. The banner image is inserted as a normal background image in the header div, set to "no-repeat", position "right". This decorative banner image is used in the Amigos del Órgano Web site.Īt a small screen size, only part of the image is visible.Īt a larger screen size, you can see the full image.
If a large, decorative background image is too large to fit a div, the browser crops it automatically. The browser will do some of the image sizing for you. However, they do pose a problem: when the content areas vary in width, how should you size the images? Let's take a look. Liquid layouts make perfect sense in a fluid medium like the Web. In Dreamweaver's 2 column liquid, left sidebar, header and footer layout, the sidebar div is set to 20%, and the content div is set to 80%.Īt large screen sizes, the sidebar is wide. The max-width and min-width properties make liquid layouts easier to design, but both settings are optional. If the user makes his or her browser window extra-small, the container div will hold at 780 pixels and a horizontal scrollbar will appear. The min-width: 780px property stops the layout from becoming too narrow. The max-width: 1260px property prevents the container div from expanding any larger than 1260 pixels wide, even on a super-large monitor. Two additional properties are applied to the. The width of the container div expands in relation to the browser. In Dreamweaver's 1 column liquid, centered, header and footer layout, the width of the container div is set to 80%.Īt a standard 1024 x 600 screen resolution, the layout looks likes this: the container div is 80% of the width of the browser window.ĭreamweaver's liquid layouts use percentage widths rather than pixel widths.Īt a larger 1600 x 900 screen resolution, the container div expands horizontally, continuing to fill 80% of the width of the browser window. Resizing the page to normal width, the page still looks good.
0 kommentar(er)
