Page 24 - Adobe Dream Viewer CC 2020

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 define the external file, 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 predefined HTML heading video file 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 figure, graphics that are created directly in the page using scripts .
including the appropriate tags for the figure and a • Animate Composition places a defined Animate
caption . composition (OAM file) 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 file 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 file created from
tagged as a list item . a Flash animation . Keep in mind that SWF files 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 file, 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 file, either in the same website function properly .
or an external one . • Plugin embeds a user-defined plug-in file 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 define 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 defining 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 define a variety of embed one document into another .
page head information . When you type specific values in • Horizontal Rule inserts a solid line across the width
the name and content fields, 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 define 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 file is saved .
<meta name=”keywords” content=”words”> • Non-Breaking Space adds a special character that
• Description opens a dialog box where you can define a prevents a line break from appearing between specific
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