WYSIWYG Editors, Web Images,

1
WYSIWYG Editors, Web Images, HTML Tables
2
Netscape Composer

• Integrated with the browser environment
• WYSIWYG HTML editor (but not 100)

3
Opening/Creating Files in Composer

• Creating a new document
• choose FileBlank Page
• Editing the page youre browsing
• choose FileEdit Page
• saves the file (and related graphics!) to disk
• Editing an existing file
• choose FileOpen File
• select the file (URL or local)
• select the Composer button

4
Creating Links

• Highlight text or image, choose InsertLink or
  click the Link button on the toolbar
• Link dialog box
• link source
• displays the selected text to be used for a link
• link to
• type the local file name or remote URL

5
Linking to Targets in a Document

• Create a target in the document
• choose InsertTarget or click the Target button
• lta nametargetnamegtlt/agt
• Insert a link to the target
• lta hreftargetnamegtlink textlt/agt

6
Retrieving Inline Images from Other Web Pages

• Right-click on the image (on a Mac, click and
  hold)
• Select Save image as from the contextual menu
• Save image to your local disk

7
Inserting an Inline Image

• choose InsertImage or click the Image button on
  the toolbar
• Image properties dialog box allows you to specify
  various parameters
• the source location of the image (required)
• its alignment relative to text (optional)
• the amount of blank space you want around it
  (optional)

8
Image Alignment

• When aligning an image next to text, place the
  image code before the text you want next to it
• At the end of the text, use a ltbrgt code with a
  clear parameter
• ltimg srcimage.gif alignleftgtText that goes on
  the right.ltbr clearleftgt
• ltimg srcimage.gif alignrightgt Text that goes
  on the left. ltbr clearrightgt

9
Using Images as Links

• Images can be used as links instead of text
• Select the image before selecting the Link menu
  item

10
Background Images and Colors

• Specified in the BODY tag
• ltBODY BGCOLORnnnnnngt (nnnnnnhexadecimal
  number, or color name, e.g FFFFFF or black)
• ltBODY BACKGROUNDimage.gifgt
• Background images are tiled, so must be seamless
• Choose PropertiesDocument

11
Tables

• Allow you to align items on the page more
  precisely, use space more effectively
• To insert in Navigator Gold, choose InsertTable
  or click the Table button
• number of rows
• number of columns
• attributes
• table alignment

12
Table Formatting Tips

• Borderless tables are good for aligning things in
  a grid
• Cells can be data (lttdgt) or headers (ltthgt)
• Cells can be horizontally aligned left, right or
  center they can be vertically aligned top,
  bottom , or middle
• You can specify column width in pixels or
  percentages

13
Other WYSIWYG Editors

• Microsoft Word
• Well-integrated with Microsoft environment
• May add codes that other browsers do not
  interpret properly
• Editor free if you own Word
• Dreamweaver
• Similar interface to Macromedia Director
• Allows creation of platform-independent code
• Does not alter base HTML
• Very expensive (will be 499 currently 299)