Graphics Programs Reference
In-Depth Information
15. In the Document window, select sprytextarea1, and then, in the Property inspector,
change sprytextarea1 to
commentsfi eld
, check the Required check box, if necessary,
and then set Max char to 300.
16. In the form area, add a new line below the commentsfi eld, insert a Submit button,
and then enter
Submit
as ID, select Wrap with label tag as the style, and then select
Before form item as the position.
17. Save the page, and then preview the page in a browser.
18. Fill out the form and click the Submit button to test the form. The form test shows
what you submitted.
19. Close the form_test page, and then fi ll out the form again, typing
cheese
in the Email
Address box. The Invalid format message appears, indicating that the validation is
functioning. Close the browser.
20. Upload the site to your remote server, and then preview the site over the Internet.
21. Submit the fi nished fi les to your instructor.
Create alternate
print styles
within the main
style sheet for
the Web site of a
life coach.
Case Problem 3
There are no Data Files needed for this Case Problem.
Success With Tess
1. Tess received feedback from users that they like to print pages from her site for informa-
tional purposes. Tess wants you to add alternate styles to the main style sheet that for-
mat the pages for print media. First, you will add a media type attribute of screen that
will surround the existing styles. Then, you will create a media type attribute of print
that will contain an alternate print style that removes selected elements from display.
2. Open the
Success With Tess
site you modifi ed in Tutorial 7, and then open the
index.
html
page in Design view.
3. On the Related Files toolbar, click the tess_styles.css button, and then switch to
Code view.
4. Add a blank line before the fi rst style in the page. In the blank line above the fi rst
style, type
@media screen {
to insert the opening code for the screen media type
attribute, add a blank line at the bottom of the style sheet below the last closing
bracket, and then, in the blank line, type } to insert the closing bracket of the screen
media type attribute.
5. On a new blank line below the closing bracket of the screen media type attribute,
type
@media print {
to insert the opening code for the print media type attribute,
press the Enter key twice to add two blank lines, place the insertion point at the left
of the second blank line, if necessary, and then type
}
to insert the closing bracket of
the print media type attribute. Save the style sheet, and then return to Design view.
6. Use the Style Rendering toolbar to view the page in the Render Screen Media Type
view and then in the Render Print Media Type view. The print version of the page
displays with no styles because you have not created any print styles.
7. Switch to Code view, click in the blank line between the opening and closing brack-
ets of the print media tag, and then, using the CSS Styles panel, create a new rule with
a class selector type, named
.print
, and defi ned in this document only (because this
document is the external style sheet). In the Block category, set the display to none.
8. In the style sheet, drag the new .print rule to the blank line between the opening and
closing print media tags. Save the style sheet, switch to Design view, and then view
the page in Render Print Media Type view.
9. In the Document window, select the tess_head.jpg graphic, switch to the Render
Print Media Type view, and then, in the Property inspector, select print from the
Class list. The image disappears from the page.
Search WWH ::
Custom Search