Dreamweaver MX 2004

1
Tutorial 3 Adding and Formatting Text
2
Adding and Formatting Text

• In this tutorial, you will
• Type text into a page
• Copy text from a document and paste it into a
  page
• Check for spelling errors
• Create hyperlinks
• Examine HTML tags for hyperlinks

3
Adding and Formatting Text

• In this tutorial, you will (contd)
• Explore CSS styles and style sheet
• Modify HTML tags
• Create custom style classes
• Create styles for the ltagt tag selectors

4
Adding and Formatting Text

• In this tutorial, you will (contd)
• Create an external style sheet
• Attach an external style sheet to a Web page
• Edit styles
• Delete styles
• Examine the code for styles and style sheets
• Examine HTML tags used to format text

5
Adding Text to a Web Page

• Text is very important to your Web page and
  should be error free and clear.
• You can add small amounts of text by typing right
  in the Dreamweaver work area of the Document
  window.
• You can add larger amounts of text by cutting and
  pasting from another program such as a word
  processor that does a better job of clearing
  errors.
• Dreamweaver also has a built in spell checker.

6
Adding Text to a Web Page
Text copied from a Word Document
7
Adding Text to a Web Page
Spell checking the entered text
8
Formatting Text Using the Property Inspector

• Text formatting in Dreamweaver is similar to text
  formatting in a word processor except that
  Dreamweaver adds CSS styles that control the look
  and layout of the text.
• Text formatting is done using the Properties
  inspector.
• There are several groups of attributes
• Format attributes list of HTML tags for text
  formatting, including paragraph and heading tags.
• Font attributes list of available fonts.

9
Formatting Text Using Font Tags

• There are several groups of attributes (Contd)
• Font size attributes list of available font
  sizes.
• The list is relative to a base font size
  (defaults to size 3)
• There are seven absolute font sizes (1 to 7)
  where 7 is the largest.
• There are also fourteen relative font sizes which
  add or subtract from the base font size.
• Relative font sizes are usually best because they
  keep the fonts proportional in all browsers.
• Font color attributes available colors

10
Formatting Text Using the Property Inspector
Properties Inspector for Unformatted Page Name
Text
11
Formatting Text Using the Property Inspector
Formatted Page Name
12
Creating Text Hyperlinks

• Hyperlinks allow you to navigate between pages in
  a Web site and to other Web sites.
• Once the hyperlinks are created, you will copy
  the links to the rest of the pages in the site.
• To add more than one space between words you will
  need to use a nonbreaking space, which are
  special, invisible characters used to create more
  than one space between text and other elements.

13
Creating Text Hyperlinks
Link Text Typed in the Bands Page
Fig. 3-8
14
Creating Links from Text

• When your links are in place and formatted, you
  can then convert them to hyperlinks by using the
  Properties inspector to associate the text with a
  particular file or Web page.
• If you know it, you can also type the URL into
  the Link text box.
• Within your Web site, you will use document
  relative links which only specify the path from
  the current page.

15
Creating Links from Text

• Site root relative links specify a path from the
  root folder to the linked document. These are
  used on more complex sites.
• When you link to a page in another site, you will
  use an absolute link which includes the entire
  URL.
• When you copy the navigation system to other
  pages of the site, you will not have to create
  additional links.

16
Creating Text Hyperlinks
Select File Dialog Box
17
Creating Text Hyperlinks
Label text converted to a hyperlink
18
Creating Text Hyperlinks
Creating a hyperlink using the Point to File
Button
19
Exploring HTML Tags for Hyperlinks

• HTML tags come in pairs surrounding the text
• lttaggtSome textlt/taggt
• Tags can be used together, or nested
• lttag2gtlttaggtSome textlt/taggtlt/tag2gt
• Tags can also contain attributes within the
  opening tag
• lttag colorx sizexgtSome Textlt/taggt
• Reference sites for HTML tags include
• Hotwired.lycos.com/webmonkey and w3.org

20
Exploring HTML Tags for Hyperlinks

• Hyperlinks are created in HTML using an anchor
• tag formatted
• lta hrefabsolute or relative pathgtLink Textlt/agt
• Absolute, document relative, and site root
  relative links have different paths of
  information in the hypertext reference (href)
  attribute.

21
Exploring HTML Tags for Hyperlinks
Anchor Tags for Absolute and Relative Links
Link Anchor tag Description Absolute lta
hrefhttp//www.websitename.comgt Specifies the
absolute or Text link to a Web page outside
current site lt/agt complete path to the linked
page. Document Relative lta hrefanotherpage.htm
gt Text link to another Specifies the location of
the linked page page within current
sitelt/agt relative to the current page. Commonly
used. Site Root Relative lta
href/subfolder/anotherpage.htmgt Text Specifies
the location of the linked page link to
another page within current sitelt/agt relative to
the root folder. Used sometimes when sites
have a lot of subfolders within the root
folder and change frequently.
22
Exploring HTML Tags for Hyperlinks

• The target attribute specifies where the link
  opens- in the current browser window or a new
  browser window.
• The default is for the new page to be opened in
  the current browser window, replacing the page
  from which you linked.

23
Exploring HTML Tags for Hyperlinks

• You can also specify the Name attribute in an
  anchor link, associating a name to a specific
  named location within a Web page
• lta nameanchor_namegtSome Textlt/agt
• Anchor_name is your name for the anchor
• Some Text is the text being named as the anchor.

24
Exploring HTML Tags for Hyperlinks

• This type of name is used to do things like jump
  from the end of a page back to the top, or to
  skip around on a page.
• The format for the anchor tag to link to a named
  anchor on the same page is
• lta hrefanchor_namegtLink Textlt/agt
• To link to a named anchor on another page
• lta hrefabsolute or relative
  pathanchor_namegtLink Textlt/agt

25
Exploring HTML Tags for Hyperlinks
Anchor Tag in the Bands Page
26
Understanding Cascading Style Sheets

• Because of the limitations of HTML styles,
  Cascading Style Sheets (CSS) were created.
• A CSS style is a rule that defines how an element
  appears either through modifying an HTML style or
  setting up a custom one.
• CSS styles have more parameters than HTML, for
  instance custom list bullets.
• A CSS style can be defined in one place and used
  to modify text in many places.
• Unlike HTML styles, if you change a CSS style,
  all text using that style is also changed.
• CSS styles were developed with HTML 4 and
  therefore is not compatible with older browsers.

27
Creating CSS Styles

• If you are using CSS styles, it is important to
  view your Web site in all browsers you will be
  supporting.
• When you create a CSS style, you will choose
• - Type there are three choices
• A redefined HTML tag - where you modify an
  existing tag
• A custom style where you create an entirely
  new style
• The advanced style used to redefine
  formatting for a group of tags or for all tags
  that contain a particular ID attribute (most
  commonly used to customize the appearance of
  text links)
• - Name/Tag/Selector the name for
  whatever type of style you selected above
• - Define in internal or external style
  sheet (affects current page or entire Web site)

28
Understanding Cascading Style Sheets

• Then choose the attributes for the CSS style
• Type font tag attributes such as font, size,
  color, etc.plus new attributes such as line
  height and decoration.
• Background a color or image appearing behind a
  page element over the Web page background.
• Block Spacing attributes, between letters,
  words, lines of text. Also includes horizontal
  and vertical alignment and indentation of the
  paragraph.
• Box controls the characteristics of the
  selection box that surrounds text elements.
• Border dimensions, color and line styles of the
  box that surrounds text elements.
• List format of bullets and bulleted lists.
• Positioning currently available only as a
  custom style, controls the placement of text on
  the screen.
• Extensions controls printing page breaks,
  pointer appearance as it hovers over objects and
  special affects. This is not supported in many
  browsers.

29
Modifying HTML Tags

• The easiest way to create a CSS style is to
  redefine an existing HTML tag because tags often
  are automatically inserted.
• Dreamweaver provides a list of available tags
  where you can edit existing attributes or add new
  ones.
• When you modify the attributes associated with a
  tag, the changes you make will apply to every
  instance of that tag.

30
Modifying HTML Tags
Modifying an HTML tag using the CSS Styles Panel
31
Modifying HTML Tags
Modifying an HTML tag using the new CSS Style
Dialog Box
32
Modifying HTML Tags
Modifying an HTML tag Completed CSS Style
definition
33
Creating and Applying Custom Style Classes

• You can also create new custom style classes
  (CSS).
• A CSS name should begin with a period (.) and
  contain no spaces or special characters.
• In addition to font, size, and color, youll
  include a background color in the custom style
  class.
• Once you create a custom style class, you must
  apply it to the text you want to format.
• You apply the style to selected text by selecting
  the style from the Style list in the Property
  inspector.
• To help you remember what a style looks like,
  each style name in the Style list in the Property
  inspector is formatted with the attributes for
  that style.

34
Using the Advanced CSS Type to Customize Anchor
Tag Pseudoclasses

• You can create CSS styles manually using the
  advanced style.
• When you create an advanced style, you redefine
  the formatting for a group of tags or for tags
  containing a specific ID attribute.
• When you define the parts of the anchor tag
  manually, you must define them in the order in
  which they appear in the CSS Selector list
  alink, avisited, ahover, aactive.

35
Using the Advanced CSS Type to Customize Anchor
Tag Pseudoclasses

• To make text links act and look the way you want
  them to, you need to use a CSS Selector.
• The CSS Selector allows you to change the
  formatting for a group of tags for instance to
  change the anchor tag colors for active, hover
  and visited.
• To use CSS Selectors, click the New CSS Style
  button in the CSS Styles panel and then click the
  CSS Selector button.

36
Using the Advanced CSS Type to Customize Anchor
Tag Pseudoclasses
Bands Page with Customized Link Styles Previewed
in a Browser
37
Using External Style Sheets

• Applying CSS across a Web site requires the
  creation of an external style sheet.
• Using an external style sheet enables you to make
  site-wide stylistic changes by updating one file.
• You can either create the styles in the external
  style sheet, or export them to it if they are
  already created.
• To export styles to an external style sheet the
  Web page where the styles are located must be
  open.

38
Using External Style Sheets
External Style Sheet Displayed in the Files Panel
39
Using External Style Sheets

• Once you have created an external style sheet,
  you must delete the styles from within the
  document in order to avoid duplicates and
  confusion.
• To delete, click the Minus button, then click the
  appropriate name and the Delete CSS Style button.
• By deleting unused styles, you are eliminating
  unnecessary materials from the site, reducing the
  size of the files, and eliminating clutter.
• Now you will want to apply the external style
  sheet to the Web pages that you want to format
  with those styles.
• You use the same methods already learned to apply
  the external style sheet formatting to a page.
• You can add new styles to the external style
  sheet at any time by choosing the style sheet by
  name when creating the new style.

40
Using External Style Sheets
Attach External Style Sheet Dialog Box
41
Examining Code for CSS Styles

• As CSS styles are added, Dreamweaver adds
  information to the head of a Web page between the
  head tags. The head of a Web page is the portion
  of the HTML between the head tags.
• When you attach an external style sheet to a Web
  page, a link tag is placed in the head portion of
  the HTML code for that page.
• When you use an internal or embedded style sheet,
  the styles are embedded in the head tag for that
  Web page.

42
Examining Code for CSS Styles

• Embedded code will usually look like this
• ltstyle typetext/cssgt
• lt! - -
• name attribute-name attribute value
  attribute2-name attribute2 value
• - - gt
• lt/stylegt
• where name is the style, HTML tag, or tag and
• pseudoclass name.

43
Examining Code for CSS Styles

• Style definitions appear inside the style tags
• ltstyle typetext/cssgtstyle definitionslt/stylegt
• Where type indicates the style format that
  follows.
• The comment tag is nested within the style tag
• lt! - - style definitions - -gt
• Comment tags are used to hide the style
  definitions from older browsers and

44
Examining Code for CSS Styles

• The format for the style definition is
• name attribute-name attribute value
  attribute2-name attribute2 value
• The style name indicates whether it is a custom
  style, a redefined tag, or an advanced style tag.
• . Name custom style
• Tag name redefined tag
• Tag name followed by a colon and the pseudoclass
  advanced style

45
Examining Code for CSS Styles

• An external style sheet can be used whenever the
  Web page contains a link to it in its head and
  the styles are located in the style sheet.
• The general format for link tags is
• ltlink relstylesheet hrefstylesheeturl.css
  typetext/cssgt
• Link identifies the type of tag
• Rel indicates relationship between the link and
  the page
• Href is the URL of the linked document
• Type is the form of the content that will follow

46
Examining Code for CSS Styles
Code for the External Style Sheet in the Band Page
47
Viewing Style Tags

• When you select text and apply a custom style
  class, HTML code is added in one of three ways
• Adding attributes to an existing tag if the
  text already has attributes, the new attributes
  are added.
• Applying a custom style class to a block of text
  when there were no attributes, the entire block
  is surrounded with the div tag and the custom
  style attributes.
• Applying a custom style class to a text selection
  when the selection is less than a block of
  text, the selection is surrounded by the span tag
  with the custom attributes.

48
Editing CSS Styles

• The ability to edit styles is one of the more
  powerful aspects of Cascading Style Sheets.
• When you edit a style, the changes are applied
  automatically across the Web site wherever that
  style was used.
• You can control the look and the consistency of
  the entire Web site from one centralized set of
  specifications.
• You can edit styles in the CSS Style Definition
  dialog box.
• The changes you make will override the original
  style attribute selections.
• You can view the new page style by clicking the
  Apply button in the CSS Style Definition dialog
  box and viewing the page in the Document window.

49
Editing CSS Styles

• You can also examine and edit CSS styles by using
  the Tag inspector, located in the Tag panel
  group.
• Styles are listed in hierarchical order styles
  that are closer to the text are displayed at the
  bottom of the list.
• Any changes made in the Tag inspector are
  immediately applied to the page.

50
Editing CSS Styles

• You can change the appearance of selected text
  with the Property inspector by applying an
  existing style to the text or changing attributes
  of the text.
• Changing the attributes of selected text in the
  Property inspector does not edit the CSS styles.
• It is important to keep site files and styles
  organized create a new style only when necessary.

51
Exploring HTML Tags Used with Text

• Several HTML tags are used with text.
• When you create Web pages in Design view,
  Dreamweaver places the appropriate HTML tags
  around the text for you.
• To see the HTML tags, you need to switch to
  either Code view or Split view.

52
Exploring HTML Tags Used with Text
Reference Panel for Selected HTML Paragraph Tag
53
Exploring HTML Tags Used with Text

• It is not a good idea to add CSS styles to Web
  sites created in an older version of HTML.
• You can modify these pages in a number of ways
• Creating the code manually in Code view
• Set preferences so Dreamweaver uses only HTML
  tags to format pages
• Select text and use the Font Tag Editor to edit
  selected text with font tags.

54
Exploring HTML Tags Used with Text

• The attributes and process for formatting text
  using the HTML font tag are not the same as the
  ones for formatting text using CSS styles.
• The attributes for text formatting are similar to
  those in a word processing program, except HTML
  tags are added in the background of formatted
  text.
• Text formatting attributes include format, font,
  font size, font color, emphasis, alignment,
  lists, and indents.

55
Updating a Web Site on a Remote Server

• When pages are changed, they should be updated on
  your remote server.
• To update
• Connect to the remote server using the Connects
  to Remote Host button on the Files panel toolbar
• Click View list and Local View.
• Select the updated files and then the Put Files
  button
• Click the View list and then Remote view
• Disconnect from Remote Host using the Files panel
  toolbar

56
Tutorial Summary

• You should now be able to
• Add text to a Web Page
• Create and format font and text links
• Read and write underlying HTML code for text
  formatting
• Create and edit HTML styles and cascading Style
  Sheets
• Export CSS styles to an external style sheet
• Update the Web site on the remote Web server