View
215
Download
0
Category
Tags:
Preview:
Citation preview
Chapter 8
HTML Editors
Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-2
Text Editors
• No single method
• Notepad
• Textpad, Notetab, and EditPad
Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-3
Text Editors (cont’d…)
• Programming Editors – Designed for writing code
in specific languages
– Color coded tags, scripts, browser preview
• Ex: CoffeeCup HTML Editor– www.coffeecup.com
– Download
– Look at Features
Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-4
Text Editors (cont’d…)
• Adding a Hyperlink– Drag elements
from one pane to another
– Add a link from the campingplain.htm page to the campinginfo.htm page by dragging
Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-5
Text Editors (cont’d…)
• Basic Formatting Tags1. Create a page from scratch2. Title the page 3. Use Tag Library to display HTML tags4. Save 5. Preview6. Type style sheet link tag as in Fig. 8.87. Add the paragraph of text as in p. 2348. Format the paragraph9. Enhance the fonts
Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-6
Text Editors (cont’d…)
• Inserting an Image
– Add an image to your document
– Use Images folder
– Explore options in Image dialog box
– Look at the Thumbnail version of your image
– Center the image
Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-7
Text Editors (cont’d…)
• Using Tables
– To place text, form items and other elements use a table
– Grid of rows and a column of cells
– Each cell can contain text, an image, a form item or another HTML element
– Create a table that has four columns and 4 rows…
Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-8
Text Editors (cont’d…)
• Adding a Remote Hyperlink – Add a remote hyperlink-- link to a page
– Create a link back to the main page
– Insert Tags
– Add a comment tag to identify author
– Finally, link campingplain.htm page to the swimming.htm page
– As can be seen programming editors help
Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-9
WYSIWYG Editors
• WYSIWYG – (What you see is what you get)
Used for years with respect to application packages such as word processing and spreadsheet packages. It means that you see the complete document, including formatting, as it would look when it is printed or displayed
Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-10
WYSIWYG Editors (cont’d…)
• Word Processing Applications– They do the job, but generate a lot of code
• Netscape Composer– Free, Suitable for single pages and
medium-sized Web sites
• Basic Formatting– Similar to word processing, Highlight and
change
Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-11
WYSIWYG Editors (cont’d…)
• Using a Table for Layout– Use a table to align an image with a list of
items
– Table will keep elements together in a block and can be flexible
– Use Netscape composer to align an image with a list of items
– Cell width changes as you add text
Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-12
WYSIWYG Editors (cont’d…)
• Table and Cell Alignment – Table, table
properties
– Cells tab
– Preview
Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-13
WYSIWYG Editors (cont’d…)
• Hyperlinks– Adding a
remote hyperlink
– Adding a local hyperlink
Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-14
WYSIWYG Editors (cont’d…)
• Macromedia Dreamweaver• when websites become more complex
• Use a template
• Use synchronization (recent updates are stored locally and updated to the server)
• Install and open Dreamweaver
Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-15
WYSIWYG Editors (cont’d…)
• Basic Formatting• Property inspector
• Paragraph format, color, font, alignment and others
• Properties of the image
• See the design panel
• Style sheet
• Formatting
Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-16
WYSIWYG Editors (cont’d…)
• Adding an Image• Images folder
• Drag and select
• Align
• Adding a Table• Add store hours, Save, Preview
Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-17
WYSIWYG Editors (cont’d…)
• Remote and Local Hyperlinks in Dreamweaver
– Add a remote hyperlink
– Add a local hyperlink
– Add a title and comment
– Preview in Web Browser
Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-18
WYSIWYG Editors (cont’d…)
• Microsoft FrontPage• FrontPage and Dreamweaver have
similar features
• Similar to
Microsoft Office
Recommended