Web Design Final

What are the benefits of using navigation graphics?

graphics are appealing and can avoid language problems

What are the three special selectors that let you change link colors?

link, active, and visited.

In the following rule, what is the size of the vertical margins between paragraphs? p {margin-top: 15px; margin-bottom: 10px;}

15px

How many colors does GIF support?

256 colors

How many layers can you work with when designing pages?

3

How is the <img> element used in HTML? Describe each attributes associated with the <img> element.

<img> is a replaced element in HTML, meaning that the browser replaces the <img> element with the image file referenced in the src attribute. The <img> element needs only the src attribute for the image to be displayed in the browser, though using only the src attribute is not good coding practice. The alt attribute displays an alternate string of text instead of the image The height attribute specifies the height of the image in pixels The title attribute specifies a string of text that provides info about the image. The width attribute specifies the width of the image in pixels

Describe the advantages and disadvantages of flexible layouts

Adopting to the user's browser size. From a design viewpoint, this can be less desirable because of the wide range of monitor sizes and resolutions. With a flexible layout, your content has to adapt and look good at wide range of layout sizes which can be difficult to achieve. With a simple layout, flexible web sites resize gracefully, but with more complex content and page designs, you may want to restrict your design with the min-width and max-width properties

Explain how contextual links work

Allow users to jump to related ideas or cross-references by clicking the word or item that interests them.

Describe how you would center a fixed layout web design?

Another benefit of using a wrapper division to contain your layout is the ability to automatically center the layout horizontally in the browser. This is a great solution for wide-screen monitors, as your layout will always be centered regardless of the screen resolution. Automatic centering is a simple use of the margin property. In the following style rule for the wrapper division, the margin-left and margin-right properties are set to auto, telling the browser to automatically proportion the extra space in the browser window, resulting in a centered layout.

Briefly describe border properties. What are the available border styles?

Border properties let you control the appearance of borders around elements. The border area resides between the margin and padding. Border properties for each border side let you specify the style, width, and color of each border.

How is the default border color of an element determined?

By default the elements border color is the same color as the element content

Describe the normal flow of element and how floating elements affect it?

By default, the browser normally displays elements on the page one after the other depending on whether the elements are block-level or inline elements. Some elements float up to the left or right of other elements on the page. Element position can be affected by margin or padding properties, but generally the browser lays out element boxes from top to the bottom and left to right until all element that make up the web page have been displayed.

What is the CSS box model?

CSS box model describes the rectangular boxes that contain content on a web page. Each block-level element you create is displayed in the browser window as a box with content. Each content box can have margins, borders, and padding. The content box is the innermost box, surrounded by the padding, border, and margin areas. The padding area has the same background color as the content element, but the margin area is always transparent. The border separates the padding and margin areas.

Explain three ways you can help to limit information overload.

Create manageable information segments: break content into smaller files, and then link then together. 3 click rule Control page length: Do not make users scroll through never - ending pages. Long files also can mean long downloads. use hypertext to connect facts, relationships, and concepts: provide contextual linking to related concepts, facts, or definitions, letting the users make the choices they want.

What are the two methods of properly containing floats on a web page?

Either one column needs to be non floating, or a non floating footer must be used with the clear property set to both.

Describe some of the advantages of a fixed page layout.

Fixed layouts remain constant despite the resizing of the browser in different screen resolutions and monitor sizes. Many designers prefer fixed layouts because they have more control over the finished design. They can also build more complex layouts because they can fairly sure of consistent results. Fixed layouts are normally contained by a wrapper element that controls the page width and centers the page in a browser window. Within the wrapper, you can choose whether to contain only fixed-size elements, percentage elements, or a combination of the two.

Describe the float, clear, and overflow properties.

Float: lets you position an element to the left or right edge of its parent element. You can float an image to the left or right of text.

Which file formats support transparency?

GIF and PNG

Describe GIF

GIF: designed for online delivery of graphics. GIF uses a "lossless" compression technique, meaning that no color information is discarded when the image is compressed Color depth is 8 bit, allowing a palette of no more than 256 colors

Which image format should you use fir a photograph?

JPG

Which file format supports 24-bit color?

JPG and PNG

Describe JPG

JPG: format best for photographs or continuous-tone images. JPGs are 24-bit images that allow millions of colors. Do not use a palette to display color

What are the three possible values of the clear property?

Left, right, both

How are radio buttons different from check boxes?

Lets a user choose one value from a range of values; when radio buttons are grouped together with the same name, only one can be selected.

Describe how to use the <select> element?

Lets you create a list box or scrollable list of selectable options. The <select> element is a container for the <option? element. EXAMPLES

Explain lossy image compression

Lossy compression routines are specially designed for photographic images: when the image is compressed, some of the color information is discarded, resulting in a loss of quality from the original image.

What property would you use to add gutters between columns of text?

Margin property, specifically margin-left and margin-right

What is the default border weight?

Medium

How can you group multiple check boxes together?

Multiple check boxes can contain the same name, letting you group them together so that users can select multiple values for the same property.

What is the default border style?

NONE

Would you normally use the height property when designing web pages? Why and why not?

No, because content can overflow the height of the box.

What are the drawbacks of using navigation icons?

Not everyone agrees on their meaning. Especially with a worldwide audience, you never can be sure exactly how your audience will interpret your iconic graphics.

Describe PNG

PNG: format designed specifically for the web. royalty-free format that is intended to replace GIF. This lossless format compresses 8-bit images to smaller file sizes than GIF.

Describe the processes of removing the hypertext border from an image, aligning text and images, and adding white space around images.

Removing the hypertext border: add a style attribute with the border property set to "none" Aligning text and images: use vertical align property Adding white space around images: The margin property lets you add margins on all four sides of an image.

What are the benefits of using the alt attribute?

Repeating navigation options ensures that you meet the needs of a wide range of users, especially those that cannot or choose not to display graphics.

Explain why you would include both graphic and text-based links on a web page.

Text-based linking often is the most effective and accessible way to provide the navigation on your site. It can work in both text-only and graphical browsers, and it does not depend on whether your images are displayed properly or not. Use linked graphics for navigation because they are more appealing.

What is the CSS visual formatting model and what are the display type categories included in this model?

The CSS visual formatting model describes how the element content boxes should be displayed by the browser, for example, whether scroll bars appear and how text is wrapped based on the browser window size. The visual formatting model is based on the hierarchical structure of the HTML document and the element display type. In HTML, elements fall into two primary box sizes. Block and Inline

What is the default border color?

The default border color is the color of the element content.

How do you control the length of a user's entry in a text <input> element?

The default text box is 20 characters long, although this can be changed with the size attribute.

Explain how you can use the division element to create content containers?

The division element is your primary tool for creating sections of content in your web page designs. Using the box properties, you can create divisions that are any shape you need to contain and segregate sections of content. You can create a division element to contain an entire web page, often called a wrapper, to center a web page within the browser window, regardless of screen resolution.

Explain a file's color depth control.

The fewer colors you use, the greater compression and the smaller the file size. However, limited color depth means that files cannot adequately display photographs or more complex graphics that have gradations of color, such as shadows and feathering.

How do you allow a user submit a file?

The file input type object lets users select a file on their own computers and send it to the server. This type lets you create a text input area for the user to enter a filename. The length of the text input is specified with the size attribute.

What <a> tag attribute is associated with fragment identifiers?

The name attribute

What is the security problem with the password input type?

The password is only protected from unauthorized users looking at the screen. The password itself is sent to the server as plain text, and anyone with network access could read the password information.

Describe how text boxes and check boxes are created and used. Use examples

The text box entry is the most commonly used <form> element. Checkboxes: on/off toggles that the user can select. EXAMPLES

What is the default background image behavior?

Title across the background

Describe two instances in which creating a clickable graphic for a link is desirable over text-based navigation.

To provide navigation cues for the user: consistent placement and design also build users' trust and help them feel confident that they can find the info they want To minimize download time: After the graphic is downloaded, the browser retrieves it from the cache for subsequent pages rather than downloading it every time it appears.

List two reasons for standardizing graphics

To provide predictable navigation cues for the user, and to minimize download time.

How are color names, RGB color values, and hexadecimal color values used?

Using color values: let you quickly state color using common names Using RGB color values: used to specify numeric values that express the blending of the red, green, and blue color channels. Each of the three color channels can be specified from 0 to 100%, with 0 representing the absence of the color, and 100 the full brilliance of the color. If all are set to 0 = black If all are set to 100 = white Using hexadecimal color values: base 16 numbering system ranges from 00 to FF

What causes column drops?

When the overall width of the contained elements is greater than the width of the containing element.

Explain what questions effective navigation should answer?

Where am I? Where can I go? How do I get there? How do I get back to where I started? To allow users to answer these questions, provide the following info: The current page and the type of content they are viewing Where they are in relation to the rest of the site Consistent, easy to understand links Alternatives to the browser's back button

Describe the width and height page layout box properties.

Width: property lets you set the horizontal width of an element using either a length value or a percentage. The percentage value is based on the width of the containing element box. Height: lets you set the vertical height of an element. Height should only be used in situations where you know the exact height of the element content, such as an image.

Can you float elements within floating elements?

Yes

How do you change the default button image for the submit button?

You can choose an image file and use it instead of the default button image for the submit button. The src attribute contain the location of the image file.

What attributes let you specify the width and height of the <textarea> element?

You can specify the width and height of the text area with the cols and rows attributes.

To what type of elements can you apply a background color?

any element on a web page

How do you link to a fragment in an external file?

combine the filename with the fragment identifier

Give a brief overview of forms and how they work. Include a description of the Common Gateway Interface.

communications bridge between the internet and the server. Using programs called scripts, CGI can collect data sent by a user via the HTTP and transfer it into a variety of data-processing programs.

Describe the <form> element and the attributes associated with it.

container for creating a form action: The URL of the application that processes the form data; this URL points to a script file or an email enctype: The content type used to submit the form to the server; most forms do not need this. method: specifies the HTTP method used to submit the form data; default value is "get" other is "post" accept: A comma separated list of content types that a server processing this form can handle correctly; most forms do not need this. accept-charset: A list of allowed character sets for input data that is accepted by the server processing this form; most forms do not need this.

What are the preferred length units for margins and padding?

em

which space area is transparent

margin area

What are the three space area in the box model?

margins, borders, and padding

What is lossless file compression?

no color information is discarded when the image is compressed

Write a style rule for a <p> element that creates left and right padding of 1 em, a left margin of 30 px, and a left black medium double border.

p {margin-left: 30px; padding-left: 1em; padding-right: 1em; border-left: solid medium double; }

What three attributes should you always include in the image tag? why?

src, alt, and title

What button must be included on every form

submit

List three advantages of linking by using text instead of graphics

text hyperlinks are easy to create and add no extra download time. Also, some user cannot or will not view graphics on the web.

What property can be used to help position floating elements properly on a web page?

the clear property

Where is the padding are located

the padding area is between the element content and the border.

How do you force a check box to be selected by default?

to check a check box by default, you can use the checked attribute.

What are the percentage measurement values based on?

width of the containing box.

What is the common name for the content container for a web page

wrapper

How do you enter default text in a text <input> element?

you can constrain the user's entry of text with the maxlength attribute and supply a default value for the text with the value attribute.