Page 24 - Adobe Dream Viewer 2021

The HTML Insert Panel In Depth

The HTML Insert panel contains buttons for inserting frequently used items. Some of the terms and functions in the following
descriptions will make more sense as you use those tools to complete later projects.
• Div inserts sections (divisions) in a page, which are useful • Viewport sets the width of the visible area of a web
for inserting blocks of content that you want to format page on a user’s device to match the width of the device
independently from other blocks. You will work extensively screen.
with div tags in later projects. • The Script button can be used to add code from an
• Image opens a dialog box where you can defi ne the external fi le, which will be used by the browser to perform
source for the image you want to insert. an action when the page is accessed.
• Paragraph surrounds each selected paragraph with • The Email Link button opens a dialog box where you can
<p></p> tags, which is the proper HTML structure for a create links to email addresses.
paragraph of text. • HTML5 Video inserts a video element, which allows a
• Heading is used to assign predefi ned HTML heading video fi le to be played directly in an HTML5 page without
levels (h1 through h6) to selected text. the need for external browser plug-ins.
• Table inserts an HTML table into the page. • Canvas inserts a canvas element, which is a container for
• Figure inserts a properly structured HTML fi gure, graphics that are created directly in the page using scripts.
including the appropriate tags for the fi gure and a • Animate Composition places a defi ned Animate
caption. composition (OAM fi le) into the HTML page at the
• Unordered List creates a bulleted list from the selected location of the cursor.
paragraphs. Each selected paragraph is automatically • HTML5 Audio inserts an audio element, which allows an
tagged as a list item. audio fi le to be played directly in an HTML5 page without
• Ordered List creates a numbered list from the selected the need for external browser plug-ins.
paragraphs. Each selected paragraph is automatically • Flash SWF allows you to place an SWF fi le created from
tagged as a list item. a Flash animation. Keep in mind that SWF fi les require the
• List Item creates a new list item at the location of the Flash Player browser plug-in to function properly.
insertion point. No ordered or unordered list is created to • Flash Video allows you to place an FLV fi le, which is
surround the list item. a video format created from Flash professional. Again,
• Hyperlink opens a dialog box where you can create text this format requires the Flash Player browser plug-in to
or image links to another fi le, either in the same website function properly.
or an external one. • Plugin embeds a user-defi ned plug-in fi le into the page.
• Header, Navigation, Main, Aside, Article, Section, • Rollover Image opens a dialog box where you can
and Footer add the related HTML5 tags to the page. You defi ne the default image, as well as a different image that
have the option to determine exactly how the tags are will appear when a user’s mouse cursor enters into the
applied in relation to selected text, as well as defi ning an image area.
ID or class attribute for the resulting tag. • iFrame inserts an iFrame element, which allows you to
• Meta opens a dialog box where you defi ne a variety of embed one document into another.
page head information. When you type specifi c values in • Horizontal Rule inserts a solid line across the width
the name and content fi elds, the appropriate information of the page. This can be useful for visually separating
is added to the page head using the following structure: sections of text.
<meta name=”test” content=”123”> • The Date button inserts the current date and time. In the
• Keywords opens a dialog box where you can defi ne resulting dialog box, you can choose the date format, as
keywords in the page head. The keywords are added using well as an option to update the date and time whenever
the following structure: the fi le is saved.
<meta name=”keywords” content=”words”> • Non-Breaking Space adds a special character that
• Description opens a dialog box where you can defi ne a prevents a line break from appearing between specifi c
text-based description to the page head. The description is words in a paragraph.
added using the following structure: • Character is used to insert special characters, such as
<meta name=”description” content=”Text”> copyright symbols and foreign currency characters.

40 Project 1: Bistro Site Organization