Namo WebEditor 2006 (Manual)

Copyright 2005 SJ Namo Interactive, Inc. All rights reserved.
. No part of this publication may be reproduced or transmitted in any form or by any means without the express written consent of SJ Namo Interactive, Inc. SJ Namo Interactive, Inc. Box 317 Kangnam Post Office Seoul, Korea, 135-603 Phone: +82-2-559-9333 Fax: +82-2-559-9334 Web: http://www.namo.com Namo WebEditor is a registered trademark of SJ Namo Interactive, Inc. All other trademarks mentioned in this publication are the property of their respective owners.
Contents
Contents ............................................................................................................. iii 1 Before You Begin ............................................................................................ 1
About this manual ..............................................................................................................................2 How to use this manual .................................................................................................................2 Typographical conventions............................................................................................................2 Glossary of common terms............................................................................................................3 System requirements ..........................................................................................................................6 Installing Namo WebEditor...............................................................................................................7 Getting technical support...................................................................................................................8 What's new in Namo WebEditor 2006..............................................................................................9
2 Namo WebEditor Fundamentals .................................................................. 19

Starting Namo WebEditor...............................................................................................................20 The visual authoring environment..................................................................................................21 Document windows .....................................................................................................................22 Viewing Edit and HTML modes simultaneously ........................................................................24 Toolbars and the Shortcut Bar .....................................................................................................25 The Inspector and other tool panels.............................................................................................28 The Tag Selector .........................................................................................................................30 The status bar...............................................................................................................................31 Rulers, layout guides, and layout grids........................................................................................32 Special marks in Edit mode .........................................................................................................34 The Resource Manager................................................................................................................35 Preferences and settings...................................................................................................................43 Setting image display options......................................................................................................43 Setting the default display fonts for Edit mode ...........................................................................43 Specifying default colors and character set for new documents..................................................44 Configuring editing preferences ..................................................................................................45 Configuring file saving and backup settings ...............................................................................47 Working with documents.................................................................................................................48 Creating new documents .............................................................................................................48
iii
Opening documents .................................................................................................................... 49 Previewing documents ................................................................................................................ 50 Saving documents ....................................................................................................................... 51 Saving a document as a template ................................................................................................ 54 Moving and renaming resource files........................................................................................... 54 Viewing transfer information...................................................................................................... 55 Printing documents ..................................................................................................................... 56 Basic document editing.................................................................................................................... 59 Inserting text ............................................................................................................................... 59 Editing text.................................................................................................................................. 60 Finding and replacing text .......................................................................................................... 61 Inserting special items................................................................................................................. 63 Working with local sites .................................................................................................................. 67 What is a local site? .................................................................................................................... 67 Creating a local site..................................................................................................................... 68
3 Laying Out Web Pages.................................................................................. 77

About page layout ............................................................................................................................ 78 Using layout boxes ........................................................................................................................... 79 Creating a layout box and layout cells ........................................................................................ 80 Resizing layout boxes and layout cells ....................................................................................... 81 Moving, duplicating, and removing layout cells......................................................................... 81 Aligning and distributing layout cells ......................................................................................... 82 Changing properties of layout boxes .......................................................................................... 83 Changing properties of layout cells ............................................................................................ 84 Converting between layout boxes and tables .............................................................................. 85 Using a table for layout.................................................................................................................... 86 Using frames..................................................................................................................................... 88 About frames and framesets........................................................................................................ 88 Creating a frameset ..................................................................................................................... 89 Setting a frame's initial document............................................................................................... 89 Saving a frameset........................................................................................................................ 90 Previewing a frameset................................................................................................................. 90 Printing a frameset ...................................................................................................................... 91 Resizing frames........................................................................................................................... 91 Adding and removing frames...................................................................................................... 92 Setting a frame's default target.................................................................................................... 93 Naming or renaming a frame ...................................................................................................... 94 Setting frame margins, scrollbars, and borders ........................................................................... 94 Modifying frameset document properties ................................................................................... 95 Adding "noframes" content......................................................................................................... 95 Using layers ...................................................................................................................................... 97
iv
Creating and positioning a layer..................................................................................................97 Resizing a layer .........................................................................................................................100 Adding content to a layer ..........................................................................................................101 Deleting a layer .........................................................................................................................101 Setting a layer's Z-order.............................................................................................................101 Setting a layer's initial visibility ................................................................................................102 Changing a layer's ID ................................................................................................................103 Setting a background color or image on a layer ........................................................................103 Setting borders, margins, and padding for a layer .....................................................................103 Aligning and distributing multiple layers ..................................................................................104 Using the Layers window..........................................................................................................104 Deciding which tag to use for layers .........................................................................................105 Using floating boxes........................................................................................................................106 Creating and positioning a floating box.....................................................................................106 Resizing a floating box..............................................................................................................107 Adding content to a floating box ...............................................................................................108 Deleting a floating box ..............................................................................................................108 Setting a floating box's initial visibility.....................................................................................108 Setting a background color or image on a floating box .............................................................109 Setting borders, margins, and padding for a floating box..........................................................110 Using a tracing image.....................................................................................................................110
4 Basic Page Content and Formatting.......................................................... 111

Text ..................................................................................................................................................112 Paragraphs .................................................................................................................................112 Headings....................................................................................................................................112 Lists ...........................................................................................................................................113 Preformatted text .......................................................................................................................116 Addresses ..................................................................................................................................117 Definition Lists..........................................................................................................................118 Images..............................................................................................................................................119 About Web images ....................................................................................................................119 Inserting images ........................................................................................................................123 Saving a document with images ................................................................................................126 Setting an image's display size ..................................................................................................128 Setting an image's alignment .....................................................................................................129 Setting image margins and borders ...........................................................................................130 Adding alternative text to an image...........................................................................................132 Specifying an alternative low-resolution image ........................................................................133 Creating an image rollover effect ..............................................................................................133 Applying image effects..............................................................................................................134 Setting a transparent color on an image.....................................................................................143 Slicing an image into pieces ......................................................................................................144 Changing an image's file format................................................................................................145
v
Hyperlinks and bookmarks........................................................................................................... 146 About hyperlinks....................................................................................................................... 146 Creating a hyperlink.................................................................................................................. 149 Setting a link's target window or frame .................................................................................... 151 Making a link open in a pop-up window .................................................................................. 152 Setting a tooltip on a link .......................................................................................................... 152 Assigning access keys to links .................................................................................................. 153 Setting hyperlink colors ............................................................................................................ 154 Changing the destination of a hyperlink ................................................................................... 156 Removing a hyperlink............................................................................................................... 156 Creating an image map ............................................................................................................. 157 Opening a linked document in Edit mode................................................................................. 158 About bookmarks...................................................................................................................... 159 Creating a bookmark................................................................................................................. 159 Renaming and removing bookmarks ........................................................................................ 160 Using bookmarks in hyperlinks ................................................................................................ 160 Tables .............................................................................................................................................. 161 Creating a table ......................................................................................................................... 161 Selecting parts of a table ........................................................................................................... 163 Resizing rows and columns ...................................................................................................... 164 Adding and removing rows and columns.................................................................................. 167 Copying and moving cells ........................................................................................................ 168 Deleting the contents of multiple cells...................................................................................... 169 Merging and splitting cells........................................................................................................ 170 Aligning content in cells ........................................................................................................... 171 Specifying cell spacing and padding......................................................................................... 171 Controlling the appearance of table and cell borders ................................................................ 173 Specifying other table and cell properties................................................................................. 180 Centering or right-aligning a table ............................................................................................ 183 Making other content flow around a table ................................................................................ 183 Splitting and joining tables ....................................................................................................... 184 Sorting and transposing tables .................................................................................................. 185 Performing table calculations.................................................................................................... 186 Converting between paragraphs and tables............................................................................... 187 Formatting content ........................................................................................................................ 189 About formatting and styles...................................................................................................... 189 Applying a single-instance format ............................................................................................ 190 Using style sheets...................................................................................................................... 191 Setting character-related properties .......................................................................................... 197 Setting paragraph alignment, indentation, and line height........................................................ 199 Setting margins, padding, and borders...................................................................................... 200 Setting background colors and images...................................................................................... 203 Using the Formatting panel....................................................................................................... 204 Understanding measurement units ............................................................................................ 209 Selecting colors......................................................................................................................... 210
vi
Copying and pasting formatting ................................................................................................213 Document properties ......................................................................................................................214 Setting a document's title...........................................................................................................214 Specifying keywords and other meta data .................................................................................214 Specifying a character set..........................................................................................................215 Setting a document's base URL .................................................................................................216 Setting a default target for hyperlinks .......................................................................................217 Setting default document colors ................................................................................................218 Setting document scrollbar colors .............................................................................................218 Setting a document background image......................................................................................219 Setting document margins .........................................................................................................220 Adding page transitions.............................................................................................................220 Adding a background sound ......................................................................................................221 Setting up an automatic refresh or redirect................................................................................222 Specifying a cache expiration date ............................................................................................223 Adding PICS labels to a document............................................................................................223 Adding custom meta tags ..........................................................................................................224
5 Spicing Up Your Site ................................................................................... 225

Adding multimedia objects ............................................................................................................226 Inserting video and audio files...................................................................................................226 Inserting Flash and Shockwave objects.....................................................................................229 Inserting other ActiveX, applet, or plug-in objects ...................................................................229 Using Smart ClipArt ......................................................................................................................232 Inserting a Smart ClipArt image................................................................................................232 Modifying Smart ClipArt images ..............................................................................................233 Converting a Smart ClipArt image to an ordinary image ..........................................................236 Managing Smart ClipArt ...........................................................................................................237 Using Flash Buttons........................................................................................................................238 Inserting a Flash Button.............................................................................................................238 Editing the text of Flash Button.................................................................................................238 Resizing a Flash Button.............................................................................................................239 Changing the background color of a Flash Button ....................................................................239 Creating a hyperlink on a Flash Button .....................................................................................240 Importing Flash files into the Flash Button library....................................................................241 Using themes ...................................................................................................................................242 About themes.............................................................................................................................242 Applying a theme ......................................................................................................................245 Creating a new theme ................................................................................................................247 Editing a theme..........................................................................................................................247 Creating photo albums...................................................................................................................251 Using the Photo Album Wizard.................................................................................................251 Understanding photo album styles ............................................................................................254
vii
Adding JavaScript effects.............................................................................................................. 256 Using the Script Wizard............................................................................................................ 257 Working with actions and events .............................................................................................. 271 Creating timelines ..................................................................................................................... 283 Adding interactive features ........................................................................................................... 289 Creating Web forms.................................................................................................................. 289
6 Working With Sites ...................................................................................... 303

Planning a site ................................................................................................................................ 304 Planning a site's folder structure ............................................................................................... 304 Planning a site's logical structure .............................................................................................. 305 Creating a local site........................................................................................................................ 307 Creating a site with the Site Wizard.......................................................................................... 307 Creating an empty local site...................................................................................................... 309 Adding files and folders to a local site...................................................................................... 309 Moving and removing files and folders on a local site ............................................................. 311 Saving a local site as a site template ......................................................................................... 311 Importing and exporting sites....................................................................................................... 312 Importing a site from the local file system................................................................................ 312 Importing a site from the Web .................................................................................................. 313 Exporting and importing a local site to/from a zip archive....................................................... 315 Site structure and navigation ........................................................................................................ 316 Building the site tree ................................................................................................................. 317 Adding dynamic navigation bars and trees ............................................................................... 324 Adding dynamic page banners.................................................................................................. 334 Adding a site map ..................................................................................................................... 335 Using the site library...................................................................................................................... 337 Collaborating on a site................................................................................................................... 339 Source control basics ................................................................................................................ 339 Connecting to a source control server....................................................................................... 341 Adding files to source control................................................................................................... 342 Checking files out and back in.................................................................................................. 343 Retrieving the latest versions of files ........................................................................................ 344 Removing files from source control.......................................................................................... 345
7 Publishing and Maintaining a Site.............................................................. 347

Defining remote sites for publishing............................................................................................. 348 Defining a remote site using FTP ............................................................................................. 349 Defining a remote site using Windows file copy ...................................................................... 350 Quick publishing ............................................................................................................................ 351
viii
Preparing to use Quick Publish .................................................................................................351 Using Quick Publish..................................................................................................................351 The Publish window .......................................................................................................................353 Understanding Site Mode vs. Explorer Mode ...........................................................................354 Selecting files for publishing.....................................................................................................356 Uploading to a remote site.........................................................................................................357 Downloading from a remote site ...............................................................................................358 Deleting files on a remote site ...................................................................................................359 Changing access permissions of remote files and folders .........................................................360 Opening and saving files directly on a Web server......................................................................362 Site maintenance.............................................................................................................................363 Finding files...............................................................................................................................363 Finding and replacing text throughout a site .............................................................................364 Finding broken links..................................................................................................................367 Finding orphan files...................................................................................................................368 Checking external links .............................................................................................................368 Changing character sets throughout a site .................................................................................370 Changing hyperlinks and file names to lowercase.....................................................................371 Viewing a site report .................................................................................................................371
8 Appendices .................................................................................................. 373

Utilities included with Namo WebEditor .....................................................................................374 Namo Capture............................................................................................................................374 Namo GIF Animator..................................................................................................................377 Namo Image Slicer ....................................................................................................................382 Keyboard shortcuts ........................................................................................................................388
Index ................................................................................................................ 395
ix
1 Before You Begin

In this section About this manual ........................................................................................ p.2 System requirements .................................................................................... p.6 Installing Namo WebEditor ......................................................................... p.7 Getting technical support ............................................................................. p.8 What's new in Namo WebEditor 2006 ......................................................... p.9
Namo WebEditor 2006 User Manual
About this manual

How to use this manual
How the contents are organized
The manual is organized into sections, a maximum of four levels deep. The top-level sections divide the manual into the broadest topics, while successive levels are progressively more specific. Here are descriptions of the top-level sections: Before You Begin: This section covers things that are helpful to know before you begin using Namo WebEditor. It also includes useful information about the help system, such as the page you are looking at now. Namo WebEditor Fundamentals: This section contains the most basic information about using Namo WebEditor, including an introduction to Namo WebEditor's user interface and information about working with files and sites. Laying Out Web Pages: This section is all about page layouthow to use features of Namo WebEditor to lay out visually interesting and user-friendly pages with the minimum effort. Basic Page Content: This section deals with the basic building blocks of Web documents, such as text, images, tables, and hyperlinks. It also covers various ways of formatting content. Spicing Up Your Site: In this section, you'll learn about tools in Namo WebEditor you can use to go beyond the basics and add exciting features to your sites, such as JavaScript effects and photo albums. Working With Sites: This section covers in depth the concept of Namo WebEditor's "local sites"how to create them and how to use them to make organizing and navigating your Web sites easier and more powerful. Publishing and Maintaining a Site: This section talks about publishing sites to the Web and managing them with Namo WebEditor's site maintenance tools. Appendices: This section is a catch-all for topics that don't comfortably fit in any of the other categories. It covers miscellaneous features of Namo WebEditor and includes a list of keyboard shortcuts and a troubleshooting FAQ.
Typographical conventions
The following typefaces and symbols have special meanings in this manual:
Program text
Words and phrases found in Namo WebEditor's user interface, such as menu items and button labels, appear in bold MS Sans Serif.
2 About this manual
Chapter 1: Before You Begin Window titles
The titles of windows and dialog boxes appear in bold Trebuchet MS. Keystrokes Keystrokes and keystroke combinations, such as Ctrl+E, appear in Arial. Code examples HTML and other markup or code examples appear in Courier New. Block examples additionally appear with a light background color. -Note -Browser note -Tip Notes, which contain important information such as warnings; browser notes, which contain information about a feature or function's compatibility with various browsers; and tips, which contain helpful supplementary information, all appear in italics and with a distinctive icon in the left margin.
Glossary of common terms

attribute Technically, a piece of information that modifies an HTML element in some way. An attribute consists of a name/value pair in the form name="value". For example, in the tag <table width="400">, the width attribute specifies the width of the table. The term is also used generally to mean any quality of an element that can be controlled by an author (aside from its content). author Someone who creates documents. A Web author is someone who creates Web documents. block element An element that is displayed with automatic line breaks before and after it. container An element that contains other elements.
About this manual 3
element The basic building block of an HTML document. An element generally consists of some content, such as a paragraph of text, and a pair of opening and closing HTML tags surrounding the content, such as <p> and </p>. Elements can contain other elements; for example, a paragraph (<p> element) can contain a hyperlink (<a> element). Empty elements have only a single tag and no content; an example is <img>, which causes an inline image to be inserted in the document. inline element An element that does not have automatic line breaks before or after it. An inline element is always contained in a block element. insertion point The blinking vertical bar that indicates the point in the current document at which content will be inserted or deleted. Also called the "cursor". intranet A private network that uses the same protocols and file formats as the public Internet. local files and folders Files and folders that reside on the local file system. local file system The collection of all hard drives, CD-ROMs, and other file storage devices connected to the user's computer, as well as any servers on the local area network. local site A collection of documents and resource files that exist in a local folder, are intended for publishing as a Web site, and are managed with Namo WebEditor's Site Manager. markup The parts of a document that control the presentation of content, as distinct from being content. HTML markup consists of tags that tell browsers how to organize or format the content within them. parent container The element, frame, or window that immediately contains the current element. pointer The arrow or other shape that moves when you move the mouse, indicating where something will happen when you click the mouse button.
4 About this manual
Chapter 1: Before You Begin
property Commonly used as a synonym for attribute or to mean any quality of an element that can be controlled by an author (aside from its content). Technically, however, a property is a quality that an element or class of elements can have, which is defined in the Cascading Style Sheets (CSS) standard for formatting Web content. Color, width, and border are examples of CSS properties. remote site A collection of documents and resource files, on a Web server, that constitute a Web site. root folder The "home" or top-level folder of a local or remote site; the folder that contains the site's home page or main index file. A root folder may contain subfolders in addition to documents. tag A unit of HTML markup, such as <p> or <img src="example.gif">. Most HTML tags come in pairs of opening and closing tags that surround some content; for example, <p>This is a paragraph.</p>. The combination of a pair of opening and closing tags and the content in between them is called an element. A tag may contain one or more attributes, name/value pairs that qualify the tag in some way, as the src attribute in the <img> example provides the location of the image. temporary document An open document that has never been saved. user Unless otherwise specified, "user" refers to someone who views your documents in a browser.
About this manual 5
System requirements
The following are the system requirements for Namo WebEditor 2006: Minimum Windows 98SE/Me/2000 Internet Explorer 5.0 Pentium III-550 MHz equivalent or faster 128 MB 80 MB 1024 x 768, 16-bit color Recommended Windows XP or newer Internet Explorer 6.0 or Firefox 1.0 or newer 1 GHz or faster 256 MB or more 150 MB or more
Operating System Web Browser CPU Memory Free Disk Space Display
In addition, if you plan to create dynamic documents using Namo WebEditor's Database Wizard, you must have Microsoft Personal Web Server (PWS) or Internet Information Server (IIS) installed on your computer, as well as access to an ODBC-compatible database. PWS is included on the Windows 98 setup CD. IIS is included with Windows 2000/XP.
6 System requirements
Installing Namo WebEditor

To install Namo WebEditor from a CD-ROM
1. 2.
3.
Insert the Namo WebEditor CD-ROM in your CD-ROM drive. In a few seconds, the setup program should start automatically. If the setup program does not start automatically, do the following: 1. On the Start menu, click Run. 2. Type D:\setup.exe and press Enter. (Substitute your CD-ROM drive's letter for the letter 'D'.) Follow the on-screen instructions in the setup program.
To install Namo WebEditor from a downloaded setup file
1. 2.
Double-click the downloaded setup file. Follow the on-screen instructions in the setup program.
Installing Namo WebEditor 7
Getting technical support

Generally, your primary provider of technical support for Namo WebEditor is the master distributor of SJ Namo Interactive's products in your country or region. Please find the appropriate support contact for your country or region on our Web site at http://www.namo.com/company/contact/world_contacts.html. You can also get help directly from SJ Namo Interactive. There are two ways to submit a question to our technical support team: Post your question on the Namo WebEditor Support Forum at http://www.namo.com/support/board/. This is the preferred method. You can choose to post either publicly (your question and our response can be seen by all forum users) or privately (only Namo support staff will see your question and respond privately). Please note that you must register your copy of Namo WebEditor online before you can create a forum account and log in. To register, please visit http://www.namo.com/support/register/. Technical support by phone is available by calling 1-408-914-2595 Monday through Friday from 8:30 AM to 4:30 PM Pacific Time. Long distance call charges may apply.
Before contacting technical support, we suggest that you first check the Namo WebEditor Knowledge Base on our Web site. To search the Knowledge Base, go to http://www.namo.com/support/. To view the troubleshooting section in Help, press F1 and click Troubleshooting in the Contents pane. In addition, you can easily check for program updates by selecting Namo WebEditor Updates in the Help menu. You must be connected to the Internet to check for updates. Please do not contact SJ Namo Interactive regarding non-technical issues, such as product delivery and billing. You should direct such questions to the reseller from which you purchased Namo WebEditor or the master distributor in your country or region.
8 Getting technical support
What's new in Namo WebEditor 2006

A list of the most important new and improved features of Namo WebEditor 2006.
New features Code Helpers.................................................p. 9 Quick Tag Editor...........................................p.10 Drawing on the Image...................................p.10 XHTML ........................................................p.11 Blog Posting..................................................p.11 Visual Aids....................................................p.12 Calculating Values in a Table .......................p.13 Tracing Image ...............................................p.13 Improved features Photo Album .................................................p.14 Tag Selector...................................................p.15 CSS................................................................p.15 Changing Size Units of Tables and Layers....p.15 Empowered Tag Cleanup ..............................p.16 Improved File Support...................................p.16 Site Library....................................................p.17 <PRE> tags....................................................p.17 Default File Name Extension ........................p.17 Syntax Highlighting ......................................p.18
Code Helpers
Quick-select menus appear when you start typing a tag, attribute, or CSS property in the HTML window. To enable code helpers, on the Tools menu, click Preferences. In the HTML Source tab, select Enable code helpers.
What's new in Namo WebEditor 2006 9
Quick Tag Editor
The Quick Tag Editor window lets you quickly edit the HTML code of selected content or insert new HTML code at the current location. To open the Quick Tag Editor window, press Ctrl+Q or, on the Edit menu, click Quick Tag Editor.
You can use the Quick Tag Editor in Insert HTML, Edit HTML, or Wrap HTML mode.
Drawing on an Image
In the Image Effect dialog box, you can easily add text to an image or draw lines, circles, and rectangles. You can also draw with a freehand pencil or brush.
10 What's new in Namo WebEditor 2006
XHTML
You can now save documents in fully standards-compliant XHTML format.
Blog Posting
You can directly post a document to your blog or manage existing posts. You can even download an existing post, edit it with the full power of Namo WebEditor, and then reupload it to your blog.
Visual Aids
When you work on a table, Namo WebEditor now optionally shows the widths of the table and its cells in a bar at the top of the table.
When you click an image in Edit mode, its display size and its actual size are optionally displayed below the image.
Calculating Values in a Table
Namo WebEditor 2006 can calculate a value based on numbers in table cells and then insert the result in another cell. The following calculations are available: Sum Average Maximum Minimum Number of cells Number of non-empty cells Variation Standard deviation
Tracing Image
You can place a tracing image "under" a document and use it to help lay out the document. A tracing image is invisible in browsers. You can specify tracing image settings in the Document Properties dialog box.
Photo Album
With the redesigned Photo Album Wizard, you can now save your settings when you create a photo album and then reuse them when you create another. The Photo Album Wizard has also been improved to offer a more user-friendly process.
The first step of Photo Album creation
When [Open Existing] selected
Tag Selector
When you select the Preview option, the Tag Selector displays tags formatted the way their content actually appears, including such attributes as color, font, border, etc. Also, the Tag Selector's right-click menu now includes more commands, including commands to open the Quick Tag Editor for a specific tag, quickly open the Style dialog box for more tag types, and open the HTML Reference directly to the appropriate page for a tag.
CSS
Namo WebEditor 2006 has much-improved tools for using Cascading Style Sheets. Here's a list of the most important changes: With some exceptions, the Formatting panel now lists all the styles (CSS classes) that are applicable to the selected element, not just those that are applicable to the current paragraph. The style list of the Styles dialog box can now lists styles from an external style sheet linked to the current document, not just from the document's internal style sheet. You can edit external styles just like internal ones, and Namo WebEditor will save the changes to the external style sheet. The Class/ID dialog box now lets you choose a class from a list of classes for which styles have been defined in all style sheets. You can reorder style sheets in the External Style Sheets dialog box to change their order of precedence. The style sheet list now includes the document's internal style sheet, so you can give external style sheets higher or lower priority than the internal one. The Style button in many element properties dialog boxes now includes an item in its drop-down menu to open the Class/ID dialog box directly.
Changing Size Units of Tables and Layers
When you resize a table or layer by dragging its border while holding down the Shift key, Namo WebEditor now changes its size unit from pixels to percent, or vice versa.
Empowered Tag Cleanup
Namo WebEditor is now even better at cleaning up tags in documents imported from Microsoft Office.
Before clenup Improved File Support
After cleanup
You can now open files in *.doc, *.xls, *.ppt, *.hwp, and *.gul formats directly from the Open dialog box.
Site Library
When no site is open, the Site Library panel now displays the file system of your computer, so you can open and insert documents and resource files more easily.
<PRE> tags
When you convert paragraphs to preformatted text (<pre>) elements, you can decide whether to convert each line to a separate <pre> element or convert the whole paragraph to a single <pre> with carriage returns between lines.
Default File Name Extension
You can specify the default file name extension for HTML documents as ".htm" or ".html" according to your personal preference.
Syntax Highlighting
In HTML mode, Namo WebEditor now applies source coloring to PHP, ASP, JSP, and Javascript code in addition to HTML. You can change the settings for coloring tags in the HTML Source tab of the Preferences dialog box.
2 Namo WebEditor Fundamentals

This section deals with the basics of working with Namo WebEditor 2006. Authors who are new to Namo WebEditor or to web authoring in general should especially read this section.
In this section Starting Namo WebEditor............................................................................ p.20 The visual authoring environment................................................................ p.21 Preferences and settings ............................................................................... p.43 Working with documents ............................................................................. p.48 Basic document editing ................................................................................ p.59 Working with local sites............................................................................... p.67
19
Starting Namo WebEditor

To start Namo WebEditor
Do one of the following: o On the Windows Start menu, point to Programs, point to Namo WebEditor 2006, and then click Namo WebEditor 2006. o Double-click the Namo WebEditor 2006 icon on your Windows desktop.
-The Namo WebEditor 2006 icon on the desktop will only be available if you chose to install it in Namo WebEditor 2006 Setup.
20 Starting Namo WebEditor
Chapter 2: Namo WebEditor Fundamentals
The visual authoring environment

Namo WebEditor is a visual, or WYSIWYG ("What You See Is What You Get"), Web authoring program. This means that what you see on the screen while you are creating or editing a Web page with Namo WebEditor closely resembles what you would see if you were to open the page in a Web browser. This visual orientation makes Namo WebEditor different from "code-oriented" HTML editors, in which you edit HTML code directly (although you can also do that in Namo WebEditor).
Namo WebEditor's main window
The largest part of Namo WebEditor's main window is taken up by the document window (p.22), the workspace where you create and edit a Web document. At first, when you start a new document, the document window is an empty white space. To build a Web document, you fill the window with content the elements that make up a Web pageby typing words, dragging and dropping image files from your hard disk, and so forth. Entering content into a Web document with Namo WebEditor works much like entering content in a word processing program. A blinking vertical bar, called the insertion point, indicates where text you type or images you insert will appear on the page. In a new document, the insertion point begins in the upper left corner of the document window. As you add content, the insertion point moves toward the right; when it reaches the right edge of the document window, it moves down one line and back to the left edge. Unlike a page in a word processing document, however, a Web page has no fixed size. As you add content, the page
The visual authoring environment 21
gets longer and longer. That's why Web browsers, and Namo WebEditor, provide a scroll bar at the right side of the windowso you can see an entire document, even if it doesn't fit on one screen. Note that you cannot simply click anywhere on an empty page and starting typing at that location. As in a word processing program, the insertion point cannot move beyond the end of the document's existing content. However, there are ways to place content at a specific location on a page, using layout boxes (p.79), tables (p.86), or layers (p.97). (These topics are discussed in the section Laying Out Web Pages, p.77.) At the bottom of the document window are a set of mode tabs, labeled Edit, Edit & HTML, HTML, and Preview. Use these tabs to switch among Namo WebEditor's three basic modes of operation: Edit mode is Namo WebEditor's normal mode, in which you edit documents visually. When Namo WebEditor starts, it is always in Edit mode. In HTML mode, the document window shows the HTML source code that underlies the current document. In this mode, experienced authors can work directly with HTML code to achieve advanced effects that may be difficult to realize in Edit mode. To quickly switch between Edit mode and HTML mode, press F6 on your keyboard. Preview mode displays the current document exactly as it would appear in the version of Internet Explorer that is installed on your computer. Use this mode as a quick alternative to previewing the document in a real browser. You cannot edit a document in this mode.
Clicking the Edit & HTML tab shows Edit mode and HTML mode simultaneously (p.24) in a split window. When you are working on a frameset (p.88), three more mode tabs are available: NOFRAMES Content, Frameset Source, and Frameset Preview. See Using frames, p.88 for information about these additional modes. (If all seven mode tabs are not visible when you are working on a frameset, click the View menu, point to Mode Tabs, and then click Show All Tabs.) The rest of this section covers the document window and other basic parts of Namo WebEditor's user interface in more detail.
Document windows
Working with multiple documents
By default, Namo WebEditor displays only one maximized document window at a time, even if you have more than one document open. To switch among multiple open documents, use the document tabs at the top of the document window. You can also press Ctrl+Tab to cycle through open documents.
22 The visual authoring environment
Use document tabs to switch among open documents
-If an open document has been modified but not yet saved, an asterisk appears next to the file name in its document tab. -Right-clicking a document tab reveals a shortcut menu containing commands for frequently-used operations on the corresponding document, like saving or closing. -Double-clicking a document tab opens the Document Properties dialog box for the corresponding document. -To hide the document tabs, on the View menu, point to Toolbars, and then click Document Tabs. If you want to see two or more documents at the same time, unmaximize the document window by clicking the Restore button at the far right end of the menu bar. When multiple document windows are visible, you can arrange them neatly using commands in the Window menu: Click Cascade to arrange windows in a staggered "waterfall". Click Tile Horizontally to tile the document window area with same-sized windows one on top of another. Click Tile Vertically to tile the document window area with same-sized windows side by side.
You can also minimize a document window to just a short title bar by clicking the Minimize button . If you minimize a window while it is maximized, other document windows will become unmaximized.
Two horizontally tiled and one minimized document windows
To view a list of open documents, on the Window menu, click Window List. You can bring a document to the front by double-clicking its path in the list.
Setting window magnification
You can set the magnification of the document window to "zoom in" closer to or "zoom out" farther from a document. Zooming does not affect how the document will appear in a Web browser. 1. 2. On the Standard Toolbar, click (Zoom In/Out). Select the desired magnification factor from the menu, or type a magnification factor and press Enter.
Alternatively, if you use a wheel mouse, you can zoom in and out by turning the mouse wheel while holding down the Ctrl key.
Viewing Edit and HTML modes simultaneously

You can view a document in Edit mode and HTML mode at the same time. When you do this, Namo WebEditor splits the document window into two panes. The top pane shows the document's HTML source code; the bottom pane, its WYSIWYG view. By viewing both modes at once, you can instantly see what effect changes you make in visual editing have on a document's source code, or what effect changes to source code have visually. This is especially useful when troubleshooting HTML problems or when you want to learn how HTML works.
-Changes you make in Edit mode are reflected instantly in the HTML pane. However, changes you make in HTML mode are not reflected in the Edit pane until you click inside the Edit pane.
Simultaneous Edit/HTML view To view a document in Edit and HTML modes simultaneously
Click the Edit & HTML mode tab at the bottom of document window.
To adjust the relative sizes of the Edit and HTML panes
Drag the border between the two panes.
To rearrange the Edit and HTML panes
1. 2.
On the Tools menu, click Preferences, and then click the Edit tab. Under Mode settings, next to Top pane in simultaneous mode, click either HTML or Edit.
-To synchronize the Edit and HTML panes so that they display the same portion of the document, click inside either pane.
Toolbars and the Shortcut Bar

About the toolbars
Namo WebEditor provides several toolbars so that you can execute any of a wide variety of commands with just one click. Initially, two toolbars are visible just below the menu bar: the Standard Toolbar and the Formatting Toolbar. Other toolbars are initially hidden. You can reveal or hide a toolbar through the View
menu: point to Toolbars, and then click the name of the toolbar you want to reveal or hide. Visible toolbars are shown with check marks next to their names in the menu. To find out the function of any toolbar button, move the mouse pointer over it. A description of the button's purpose will appear in the status bar at the bottom of the main window. By default, toolbars reside in the toolbar docka variable-size space reserved for toolbarsjust under the menu bar. When a toolbar is in this space, it is said to be "docked". You can move a toolbar within the dock by dragging its handle, a thin vertical line at the toolbar's left edge. You can "undock" a toolbar by dragging it off the dock. When a toolbar is undocked, it acts like a small, floating window: you can move it anywhere on the screen by dragging its title bar, and it always appears on top of other windows. To dock the toolbar again, drag it back to the toolbar dock or double-click its title bar.
The Image Toolbar (docked)
The Image Toolbar (undocked)
-If part of a docked toolbar is hidden because the dock is not wide enough to show all of it, click the chevron at the right end of the visible part to temporarily reveal the hidden buttons.
About the Shortcut Bar
The Shortcut Bar is the vertical bar with icons on the left side of the main window. It provides fast access to some of the most commonly used commands with easy-to-click buttons. The Shortcut Bar has three sets of buttons, labeled General, Insert, and Advanced. To select a button set, click the triangle at the top of the bar. You can also show all the buttons on the bar by clicking View All Tools. You can change the size of the icons on the Shortcut Bar. To change the icon size, click the triangle at the top of the bar and then choose either Large icons or Small icons. To hide the Shortcut Bar, click the column of dots in the middle of its right edge. Click it again to reveal the Shortcut Bar.
Hiding the Shortcut Bar Customizing toolbars
Each toolbar has a default set of buttons that are appropriate to the toolbar's overall purpose. You can customize a toolbar by rearranging its buttons, adding buttons for other functions, or removing buttons you don't need. To move a button on a toolbar While holding down the Alt key, drag the button to another location on the toolbar.
To move a button from one toolbar to another toolbar While holding down the Alt key, drag the button off the first toolbar and drop it on the second toolbar.
To add a button to a toolbar 1. On the View menu, point to Toolbars, and click Customize. 2. Click the Buttons tab. 3. Under Categories, click the category containing the command (button) you want to add. 4. Under Commands, choose the command you want to add and drag it to the desired toolbar. 5. When you are finished adding buttons, click Close. To remove a button from a toolbar While holding down the Alt key, drag the button off the toolbar and drop it anywhere except on another toolbar.
To restore a toolbar's default set of buttons 1. On the View menu, point to Toolbars, and click Customize. 2. Under Toolbars, click the name of the toolbar you want to reset.
3.
Click Reset. (Or click Reset All to reset all toolbars.)
-You cannot customize the Shortcut Bar.

Creating new toolbars
You can create a new, custom toolbar containing exactly the buttons you want. To create a new toolbar 1. On the View menu, point to Toolbars, and click Customize. 2. Click New. 3. Type a name for the new toolbar and click OK. A new, empty toolbar will appear at the bottom of the toolbar dock. 4. Click the Buttons tab. 5. Under Categories, click a category containing a command (button) you want to add to the new toolbar. 6. Under Commands, choose a command to add and drag it to the new toolbar. 7. Repeat steps 5 and 6 for each button you want to add to the new toolbar. 8. When you are finished adding buttons, click Close. To remove a custom toolbar 1. On the View menu, point to Toolbars, and click Customize. 2. Under Toolbars, click the name of the toolbar you want to remove. 3. Click Delete.
The Inspector and other tool panels

About tool panels
At the bottom and right side of the main window are two areas that contain various tool panels. These tool panels are initially visible. To reveal them, click (Show/Hide Panels) on the Shortcut Bar (p.25) or press Ctrl+/. You can also reveal just the bottom panel area or just the right panel area by clicking the row or column of dots in the middle of the appropriate border of the main window. Click the dots again to hide that set of panels. To resize the bottom panel area, drag its top border. To resize the right panel area, drag its left border.
Revealing the bottom tool panel area
The bottom panel area contains four tool panels: the Inspector and the Tag Selector (p.30), which are initially visible; and the Timeline and Results panels, which are initially hidden. The right panel area contains four more tool panels: the Formatting panel (p.204), the Actions panel, and the Site Library panel, which are initially visible; and the Layers panel, which is initially hidden. When a tool panel is hidden (while the panel area that contains it is visible), an icon representing the panel appears at the bottom of its home area. (If there is enough room, the panel's name also appears.) To reveal the panel, click its icon according to the table below, or, on the View menu, point to Panels, and then click the name of the panel you want to reveal. Icon Panel
Inspector Tag Selector Timeline Results Formatting Actions Site Library Layers
To hide a single tool panel, click the Close box at the right end of the panel's title bar. When all the panels in a panel area are hidden, the area collapses to its border only. You can rearrange the visible panels in a panel area by dragging one panel and dropping it above or below another. (To drag a panel, click and drag its title bar.) However, you cannot move a panel from its home area to the other panel area. You can "undock" a tool panel by dragging it completely away from its home area. An undocked panel "floats" on top of other windows. To dock it again, drag it back to its home area.
What the tool panels do
Inspector The Inspector provides a quick way to view and modify the properties (HTML attributes) of the current element in the current document, without having to open a dialog box. The controls in the Inspector vary depending on what kind of element is currently selected. Tag Selector The Tag Selector displays the HTML tags surrounding the insertion point. Clicking a tag in the Tag Selector selects the page element corresponding to it. (See The Tag Selector, p.30.)
Timeline Use the Timeline panel to create a timelinea kind of animation that uses layers and JavaScript to move page elements over time. (See Creating timelines, p.283.) Results The Results panel displays the results of the Verify HTML command. (See Validating source code, p.Error! Bookmark not defined..) Formatting Use the Formatting panel to quickly apply standard and custom styles (p.191) to selected elements. (See Using the Formatting panel, p.204.) Actions The Actions panel lists the Javascript actions (p.271) that have been attached to the current element, and lets you attach new actions. (See Working with actions and events, p.271.) Site Library Use the Site Library panel to insert and manage various resources that are common to the entire site to which the current document belongs , or if no local site is open, to browse the local file system and open files. (See Using the site library, p.337.) Layers The Layers panel lists any layers (p.97) that exist in the current document, and lets you manage them. (See Using the Layers window, p.104.)
The Tag Selector

The Tag Selector is one of the tool panels (p.28) available in the bottom panel area of the main window. It displays the HTML tags surrounding the insertion point or current selection. The Tag Selector provides several useful functions: It identifies the type of element in which the insertion point is located and the types of that element's "ancestor" elements. It reflects the formatting (such as font, text style, color, etc.) of the current element and its ancestors. By clicking a tag in the Tag Selector, you can select an element that may be difficult or impossible to select directly in the document window. By right-clicking a tag in the Tag Selector, you can quickly execute a commonly-used command on the corresponding element.
Right-clicking a tag in the Tag Selector
-If an element identified in the Tag Selector belongs to a class (p.191), the class name appears inside the tag, preceded by a period. For example, if the insertion point is in a paragraph (<p> element) whose class is "blurb", then the paragraph will appear as <p.blurb> in the Tag Selector.
To show or hide the Tag Selector
Do one of the following: o On the View menu, point to Panels, and then click Tag Selector. o Press Alt+5.
Commands in the Tag Selector's shortcut menu
Right-click a tag in the Tag Selector to execute any of the following commands that appear in the shortcut menu. (Depending on the element, some of the commands may not be available.)
Edit Tag: Opens the Quick Tag Editor so you can edit the HTML source code of the tag without
switching to HTML mode.

Remove Tag: Deletes the entire element associated with the tag. View Source: Switches to HTML mode and highlights the associated element. Style: Opens the Style dialog box for the associated element. If the tag already has styling (a
<style> attribute is present on the tag), a check mark appears to the left of this menu item.
Class/ID: Opens the CSS Class/ID dialog box so you can apply a class or ID to the tag. If the tag
already has a class or ID, a check mark appears to the left of this menu item.
HTML Reference: Opens the built-in HTML/CSS Reference to the appropriate page for the tag. Properties: Opens the Properties dialog box for the associated element.
The status bar

The status bar, at the bottom of Namo WebEditor's main window, displays useful information regarding the working environment.
The status bar (shown with collapsed bottom tool panel)
When the mouse pointer is over a menu command or toolbar button, the left side of the status bar displays a brief description of the command or button. The right side of the status bar contains four inset areas that display various kinds of status information. From left to right, these areas show: The modification state of the current document. If the document has been modified since you last saved it, the word Modified appears here. The typing mode. In the default Insert mode, whatever you type "pushes" existing text on the right side of the insertion point further right to make room for the new text. In Overwrite mode, whatever you type overwrites existing text on the right side of the insertion point. (To change the typing mode, press the Insert key. By default, however, the typing mode is locked in Insert mode. To unlock it, on the Tools menu, click Preferences, click the Edit tab, and then clear the Lock Insert key check box.) The write status of the current document. If the current document is read-only (meaning changes cannot be saved), the phrase Read-Only appears here. The current page number. When the current document window is in page layout mode, this area displays the number of the page where the insertion point is currently located.
To hide or reveal the status bar
On the View menu, point to Toolbars, and click Status Bar.
Rulers, layout guides, and layout grids

Namo WebEditor's visual authoring environment includes three optional design aids that can help you lay out Web documents more precisely. These are rulers, layout guides, and layout grids.
Rulers, guides, and grid Using rulers
When you need to know exactly how big or how far apart various page elements are, you can turn on the display of rulers in document windows. A horizontal ruler and a vertical ruler are available, both showing distances in pixel units. To show or hide both rulers: on the View menu, point to Rulers, and click Show All (or press Shift+Alt+R). You can also show or hide the horizontal and vertical rulers independently. Note that showing or hiding rulers applies to all open document windows.
Using layout guides
A layout guide is a thin, horizontal or vertical line that you can place across a document window to help align page elements. The guide is not a part of the document and does not appear in a browser or in Preview mode. When the Snap option is enabled, the edges of layers (p.97) "snap" to layout guides, making it easier to position or align the layers. In a table (p.161), cell borders also snap to layout guides when you resize cells by dragging their borders. To create a layout guide, click anywhere within the horizontal or vertical ruler and drag down or to the right. When the dotted line is at the desired position, release the mouse button, and the guide will appear. To move a guide, click and drag it to the desired position. To remove a guide, drag it back to the ruler. To remove all guides, on the View menu, point to Guides, and click Clear All. To hide all guides, on the View menu, point to Guides, and click Show. Use the same command to reveal hidden guides. To lock all guides in place so that they cannot be moved, on the View menu, point to Guides, and click Lock. To enable or disable snapping to guides, on the View menu, point to Guides, and click Snap. To change the color and/or line style of all guides, do the following: o On the View menu, point to Guides, and click Settings. o Under Guides, click the Color box and select a color (p.210). o To change the line style, click Solid or Dashed.
Namo WebEditor 2006 User Manual Using a layout grid
A layout grid is composed of thin, horizontal and vertical lines that run across a document window at regular intervals. A layout grid can help you align and distribute page elements more easily and precisely. The grid is not a part of the document and does not appear in a browser or in Preview mode. You can adjust the spacing between grid linesthe default spacing is 50 pixels. When the Snap option is enabled, the edges of layers (p.97) "snap" to grid lines, making it easier to position or align the layers. In a table (p.161), cell borders also snap to grid lines when you resize cells by dragging their borders. Between grid lines there are invisible subdividers, to which layers and cell borders also snap. To show or hide the layout grid for the current document, on the View menu, point to Grid, and click Show. To enable or disable snapping to grid lines and subdividers, on the View menu, point to Grid, and click Snap. To change the spacing between grid lines and/or invisible subdividers, do the following: o On the View menu, point to Grid, and click Settings. o In the Grid spacing box, enter the desired space between grid lines, in pixels. o In the Subdivisions box, enter the desired space between subdividers, in pixels. To change the color and/or line style of the layout grid, do the following: o On the View menu, point to Grid, and click Settings. o Under Grid, click the Color box and select any color, or click the Standard colors box and select one of the standard colors. o To change the line style, click Solid or Dashed.
Special marks in Edit mode

By default, Namo WebEditor displays various kinds of special "marks" in document windows that are in Edit mode. These marks, which are not part of a document and do not appear in a browser or in Preview mode, help to visually identify and locate various kinds of page elements or parts. You can enable or disable the display of any of these marks in the View menu. The most common marks are listed in the table below. (Note: space marks are not shown by default.) Mark Name Paragraph Mark Line Break Mark Space Mark List Begin Mark Bookmark Mark Layer Mark Description A backwards "P" with two vertical bars indicates the end of a paragraph. A carriage return symbol indicates the location of a manual line break. A gray dot indicates a space character. A red dot indicates a non-breaking space. A red arrow indicates the beginning of a numbered or bulleted list. A yellow bookmark icon indicates the position of a bookmark. A yellow layer icon indicates the position of a layer tag.
Mark
Name Floating Box Mark Table Gridlines Current Table Outline Layer Outline
Description A yellow floating box icon indicates a floating box. Dashed lines indicate the borders of cells in tables with invisible borders. A solid blue outline indicates the table containing the insertion point. A solid gray outline indicates the edges of a layer or floating box.
To hide or show special marks
On the View menu, point to Marks, and click the item corresponding to the type of mark you want to hide or show. (The Special Tag Marks item controls list begin marks, layer marks, and other yellow icons for special elements.)
-You can also toggle the display of paragraph marks, space marks, table gridlines, and special tag marks by clicking the appropriately-named buttons on the Standard Toolbar. -Special tag marks, with the exception of list begin marks, take up space in Edit mode. As a result, they can decrease the accuracy with which a document is rendered in Edit mode.
The Resource Manager

In Web authoring terminology, resources are various kinds of files that you can use in a document. Images and movie clips are well-known types of resources, but there are many other kinds as well. A common characteristic of resources is that they can be collected and then reused in many documents. Namo WebEditor comes with a library of ready-made resources that you can use in your documents. You access these resources through the Resource Manager. You can also organize resources and add your own resources to the library using the Resource Manager. To open the Resource Manager, on the Window menu, click Resource Manager.
The Templates tab of the Resource Manager
The Resource Manager has six tabs, corresponding to six kinds of resources: Templates, Clip Art, Color Sets, Smart ClipArt, Flash Buttons, and Themes. Under each tab you will see a list of categories (folders), a pane displaying the resources in the selected category, and several command buttons. The Import, Download More, and Close buttons are common to all tabs, while other buttons vary depending on the selected tab. Each tab also has its own shortcut menu that appears when you right-click a resource. The contents and special commands in each tab are described below.
The Templates tab
This tab includes templates for whole documents and insertable document sections. To create a new document based on the selected template, click New Document. To insert a section based on the selected template into the current document, click Insert. You can designate one template as the default template for new documents that you create by pressing Ctrl+N or clicking (New) on the Standard Toolbar. To do so, right-click the desired template and then click Set as Default Template. You can modify the title and/or description of a template by right-clicking it and then clicking Properties.
The Clip Art tab
This tab includes a wide variety of bitmapped (GIF and JPG) images that you can use in your documents, including background textures, buttons, banners, and so forth.
To insert a clip art image into the curent document, select it and click Insert. To use the selected image as the document's background image, click Insert as Background. You can filter the images shown in the resource pane by file type. Click the file type box below the category pane and select an item to view only GIF images, only JPEG images, only PNG images, or all images.
The Color Sets tab
This tab contains color sets, which are sets of complementary colors that are designed to be used together in a document or site. To make a color set available for use in your documents, select it and click Insert Color Set. The color set will then be available in any document when you click the color set menu on the Color Palette (p.210). You can add any individual color in a color set to the Custom Colors group in the Color Palette (p.210). To do so, right-click a color and click Add to Custom Colors. (Note that the Custom Colors group can hold a maximum of 36 colors. If you add more than this number, the oldest ones are dropped to make room.) To add a new color to a color set, right-click the color table, click New Color, and then select a color in the Color Picker (p.211). To change a color in a color set, right-click it and click Edit Color. To delete a color, right-click it and click Delete.
The Smart ClipArt tab
This tab contains a library of vector-based clip art in the Smart ClipArt (.tng) format. You can use Smart ClipArt in the same ways as ordinary, bitmapped clip art, but with the added advantage that you can resize or edit a Smart ClipArt image without loss of sharpness or information. To insert a Smart ClipArt image into the curent document, select it and click Insert. You cannot use Smart ClipArt as document background images. You can edit a Smart ClipArt image from within the Resource Manager. Right-click an image and click Modify. The image will open in the Smart ClipArt Editor (p.233). Note that any changes you make to a Smart ClipArt item from within the Resource Manager are permanent. If you do not want to permanently modify a Smart ClipArt image, you can modify a copy of it by right-clicking the image and clicking Modify As New.
-The Smart ClipArt Editor is not available if you do not have Namo WebCanvas installed. If Namo WebCanvas was not included in your Namo WebEditor 2006 package, it must be purchased separately and installed to enable the Smart ClipArt Editor.
The Flash Buttons tab
Flash Buttons are animated, vector-based images created in Macromedia's Flash (.swf) format. This tab contains a number of predesigned Flash Buttons meant to be used as buttons and banners.
To insert a Flash Button into the curent document, select it and click Insert. You can edit certain properties of a Flash Button image from within the Resource Manager. Rightclick a Flash Button and click Modify. The image will open in the Flash Button Properties dialog box. You can change the text on the image, its hyperlink properties, size, alignment, and background color. Note that any changes you make to a Flash Button from within the Resource Manager are permanent. If you do not want to permanently modify a Flash Button, you can modify a copy of it by right-clicking the image and clicking Modify As New.
The Themes tab
Themes are collections of formatting properties and graphical design elements that together form a harmonious visual design. You can apply a theme to a document, a set of documents, or an entire site, instantly changing its look. To apply a theme to the current document or site, select it and click Apply. Namo WebEditor will ask you if you want to apply the theme to the current document only, all open documents, all documents in the current site, or the current document and its child documents in the site. You can edit the styles (p.242) and objects (p.243) of a theme by selecting it and clicking the Theme Properties button. (For more information, see Editing a theme, p.247.) Note that any changes you make to a theme from within the Resource Manager are permanent. If you do not want to permanently modify a theme, first copy it by dragging it to a different folder in the left pane of the Resource Manager, and then edit the copy. To create a new theme from a basic theme template, right-click the category in which you want to put the new theme, and then click New Theme. (For more information, see Creating a new theme, p.247.)
-Another way to insert a template, clip art image, Smart ClipArt image, or Flash Button from the resource library into the current document is by dragging it to the document window. You can also apply a theme by dragging its thumbnail preview to the document window.
Managing resources
To move a resource from one category to another
1. 2. 3.
Right-click the resource and click Cut. Click the destination category. Right-click anywhere in the resource pane (the right pane) and click Paste.
To copy a resource from one category to another
Drag the resource to the desired category.
Chapter 2: Namo WebEditor Fundamentals To delete a resource
Right-click it and click Delete.
To rename a theme
Right-click it and click Rename.
To rename a category
Right-click it and click Rename.
To create a new category
Right-click an existing category and click New Folder. The new category will be created inside the selected category.
To delete a category
Right-click it and click Delete.
Adding resources to the resource library

Initially, the resources shown in the Resource Manager are the ones that come with Namo WebEditor. However, you can add your own resources to the resource library. When you add a resource to the library, it becomes available for use in all your Web documents, just like the resources that come with Namo WebEditor. -When you add a file to the resource library, the Resource Manager copies it to a special folder inside the Namo WebEditor installation folder. The original file is not modified in any way.
Adding document templates
You can create a template from any Web document and add it to the template library. Any images, style sheets, or other resource files used in the document will be included in the template. You can then use the template to create new documents that start with the template's content or to insert sections into existing documents. 1. 2. 3. 4. 5. 6. On the Window menu, click Resource Manager, and then click the Templates tab. Select the category (folder) in which you want to put the new template, and then click Import. Navigate to the folder containing the desired document, select the document, and click Open. In the resource pane, find the new template you just created. (It will have the title "No Title".) Right-click the thumbnail preview and click Properties. In the Title box, type a title for the template. If you want to add a description, type it in the Description box. Click OK.
-You can also add a document to the template library by dragging an HTML or MHTML file to the Resource Manager from Windows Explorer.
Adding clip art
You can add any GIF, JPG, or PNG image to the clip art library. 1. 2. 3. On the Window menu, click Resource Manager, and then click the Clip Art tab. Select the category (folder) in which you want to put the image, and then click Import. Navigate to the folder containing the desired image, select the GIF, JPG, or PNG image file, and click Open.
-You can also add an image to the clip art library by dragging a GIF, JPG, or PNG file to the Resource Manager from Windows Explorer.
Adding Smart ClipArt
You can add your own Smart ClipArt (.tng) images, and Smart Button (.npi) images from pre-5.0 versions of Namo WebEditor, to the Smart ClipArt library. 1. 2. 3. On the Window menu, click Resource Manager, and then click the Smart ClipArt tab. Select the category (folder) in which you want to put the image, and then click Import. Navigate to the folder containing the desired image, select the TNG or NPI image file, and click Open.
-You can also add an image to the Smart ClipArt library by dragging a TNG or NPI file to the Resource Manager from Windows Explorer.
Adding Flash Buttons
You can add your own Flash (.swf) animations to the Flash Button library. 1. 2. 3. On the Window menu, click Resource Manager, and then click the Flash Button tab. Select the category (folder) in which you want to put the Flash animation, and then click Import. Navigate to the folder containing the Flash (.swf) file, select it, and click Open.
-You can also add a Flash animation to the Flash Button library by dragging an SWF file to the Resource Manager from Windows Explorer.
Adding themes
You can add a new or modified theme that you have received from another Namo WebEditor user to the theme library. 1. 2. On the Window menu, click Resource Manager, and then click the Themes tab. Select the category (folder) in which you want to put the theme, and then click Import.
3.
Navigate to the folder containing the theme (.ntc) file, select it, and click Open.
-You can also add a theme to the theme library by dragging an NTC file to the Resource Manager from Windows Explorer.
Adding resources from a zip archive
Other Namo WebEditor users can send (p.41) you (or you can send yourself) a zip archive containing one or more resources. To add the resources from such a zip file to the resource library, do this: 1. 2. 3. 4. 5. On the Window menu, click Resource Manager. Click the tab corresponding to the type of resource in the zip archive. Select the category (folder) in which you want to save the new resources, and then click Import. Click the Files of type box and select Zip Files. Navigate to the folder containing the zip (.zip) file, select it, and click Open.
All resources of the appropriate type found in the zip archive will be added in a new subcategory of the category you selected. The name of the subcategory will be the same as the name of the category or subcategory from which the other user exported the resources.
Downloading new resources from the Internet
From time to time, SJ Namo Interactive may make available new clip art, themes, and other resources on its Web site for free download by registered Namo WebEditor users. To check if new resources are available and download them, do the following: 1. 2. 3. On the Window menu, click Resource Manager. Click the tab corresponding to the type of resource you want to download. Select the category (folder) in which you want to save the new resources, and then click Download More.
Your browser will open and go to SJ Namo Interactive's resource download page. Follow the instructions on that page to view and download any new resources that might be available.
Sharing resources with other people

If you work with other Namo WebEditor users in a team, it can be useful to share with them resources that you've created. Or, you might need to copy your custom resources from the computer on which you created them to another computer on which you use Namo WebEditor. Using the Resource Manager's Zip & E-Mail and Import commands, you can send resources to other people (or yourself) as compressed e-mail attachments and add resources other people have sent you to your resource library.
-When you send resources, all the resources in the category or subcategory you select are copied to the zip archive. If you only want to send some of the resources in the selected category, open the zip archive and delete the unwanted resources.
To zip and e-mail resources
1. 2. 3.
On the Window menu, click Resource Manager. Click the tab corresponding to the type of resource you want to send. Right-click the category (folder) containing the resources you want to send, and then click Zip & EMail.
Namo WebEditor will create a temporary zip archive containing the selected resources, and a new message window will open in your default e-mail program. The zip archive will be automatically attached. Now you can specify the recipient(s), enter a subject line, and send the e-mail. -If you just want to create a zip archive containing resources, without e-mailing it, right-click the desired category and click Zip. You will be prompted for the location in which to save the zip archive.
To add resources from a zip archive
1. 2. 3. 4. 5. 6.
On the Window menu, click Resource Manager. Click the tab corresponding to the type of resource you want to send. Select a category (folder). The new resources will be saved into a new subfolder of the selected folder. Click the Import button. Click the Files of type box and select Zip Files. Locate and select the zip archive containing the resources to be added, and then click Open.
Preferences and settings

You can configure many aspects of Namo WebEditor's interface and behavior in the Preferences dialog box. Other interface settings are controlled through the View menu.
Setting image display options

To hide all images in Edit mode
On the View menu, point to Image, and click View Images.
To hide the document background image in Edit mode
On the View menu, point to Image, and click View Background Image.
-This command does not affect the display of background images of tables, table cells, layers, floating boxes, and other containers.
To stop GIF animations in Edit mode
On the View menu, point to Image, and click View GIF Animations.
-This command does not hide animated GIF images. It only stops the animations from running.
Setting the default display fonts for Edit mode

When you have text in a document to which you have not applied a specific font, Namo WebEditor displays the text in one of the default fonts specified in the Preferences dialog box. There are two default fonts: a proportional font, used for most text, and a fixed-width font, used for <pre> and <code> elements. Initially, these default fonts are set to 12pt Times New Roman and 10pt Courier New, respectively, but you can change them to whatever font and size you wish. It is important to realize that the default display fonts only apply in Namo WebEditor's Edit mode. When a document that contains text with no specified font is viewed in a browser, the browser will display the text in its own default font, which may not be the same as Namo WebEditor's default font. If you want to make sure the text you see in Edit mode uses the same font as it will in a browser, you need to apply a specific font to iteither through the Font command on the Format menu or by applying a style (p.189).
Preferences and settings 43
Namo WebEditor 2006 User Manual To set the default display fonts for Edit mode
1. 2.
3.
On the Tools menu, click Preferences, and then click the Browser Defaults tab. Under Character set and fonts, do one or both of the following: o Click the Proportional font box and choose a font. Then click the size box and choose a point size. o Click the Fixed-width font box and choose a font. Then click the size box and choose a point size. Click OK.
Specifying default colors and character set for new documents

Specifying default colors
In the Preferences dialog box, you can specify the default colors that new documents will use for various items, including: ordinary text the document background unvisited hyperlinks visited hyperlinks "active" hyperlinks (a hyperlink is "active" when the mouse pointer is over it)
To specify default colors for new documents
1. 2.
On the Tools menu, click Preferences, and then click the Browser Defaults tab. Under Colors, click the color box for any desired item and select a color (p.210).
You can override any of these default colors either on the document levelby specifying different colors for the current document in the Appearance tab of the Document Properties dialog boxor on the element level, by applying a different color to selected content.
Specifying a default character set
If you use a particular character set (p.215) for most of your documents, you can save time by specifying it as the default character set for new documents. Initially, the default character set is set to user-defined, meaning unspecified, so new documents will not use any specific character set. But if you set the default to, for example, Unicode (UTF-8), then new documents will automatically use the Unicode character set. Of course, if you specify a default character set, you can still override that setting by specifying a different character set for a particular document in the General tab of the Document Properties dialog box.
44 Preferences and settings
Chapter 2: Namo WebEditor Fundamentals To specify the default character set for new documents
1. 2.
On the Tools menu, click Preferences, and then click the Browser Defaults tab. Click the Character set box and select a character set.
Configuring editing preferences

Use the Edit tab of the Preferences dialog box to configure various settings and behaviors that apply whenever you work in Edit mode.
General settings
Load most recent documents at startup If this check box is selected, the documents that are still open when you next quit Namo WebEditor will be automatically opened again when you next start it. If it is deselected, Namo WebEditor will open with a new, blank document. Display actual fonts in font menu If this check box is selected, the Font menu on the Formatting Toolbar will display font names in the actual font faces they correspond to. Lock Insert key If this check box is selected, pressing the Insert key on the keyboard will have no effect. If it is deselected, pressing the Insert key will toggle insert/overwrite mode. (See Inserting text, p.59.) Automatic link creation If this check box is selected, Namo WebEditor will automatically create a hyperlink when you type certain kinds of URLs in Edit mode. This feature works with the following kinds of URLs: URLs that start with "www" and have at least two dots URLs that start with "http://", "https://", "ftp://", "file://", "gopher://", "nntp://", or "wais://". e-mail addresses, such as "[email protected]"
Note that the link will not be created until you press either the space bar or the Enter key after the URL. Copy formatting of text on left side of cursor when typing If this check box is selected, when you insert text immediately (without any intervening spaces) to the left or the right of existing text to which character-level formatting (p.197) has been applied, the new text will "pick up" the formatting from the existing text. If it is deselected, the new text
will have the default character formatting of the paragraph. Note that text you insert in the middle of character-formatted text always picks up the existing formatting. Clip art folder This setting specifies the location of the folder containing Namo WebEditor's clip art library (p.124). If no location is specified, Namo WebEditor will look in the default location, which is a subfolder of the Namo WebEditor installation folder. However, if you chose not to install the clip art library when you installed Namo WebEditor, this folder will be empty. In that case, you can specify the location of the clip art folder on the Namo WebEditor installation CD-ROM (if you have one).
Mode settings
Open documents in Select the default mode in which to open documents. If you select Same mode as current document, Namo WebEditor will open the next document in whatever mode you are using to edit the document that is active at the time you open or create the new document. Top pane in simultaneous mode This setting determines whether the Edit pane or the HTML pane will be on top when Edit & HTML mode is active.
Spell check settings
Check spelling as you type If this check box is selected, Namo WebEditor will highlight misspelled words with wavy red underlines as you type in Edit mode. Hide spelling errors This option is only available if Check spelling as you type is enabled. If this check box is selected, Namo WebEditor will still check your spelling as you type in Edit mode, but misspelled words will not be highlighted. Spelling dictionary 1 Select the primary language for spell checking. Spelling dictionary 2 Select the secondary language for spell checking.
46 Preferences and settings
Configuring file saving and backup settings

Use the Save tab of the Preferences dialog box to configure settings related to saving and backup up files. Default file extension Specifies the file name extension that will be used by default when you save a new document without typing a file name extension. You can set this to ".htm" or ".html". Since both extensions are recognized as HTML documents by virtually all computers and Web browsers, the extension you choose is a matter of personal preference. Make backups If this check box is selected, whenever you resave a document, Namo WebEditor will rename the old version with a ".bak" file name extension instead of simply overwriting it with the new version. Thus, you can "undo" the saved changes in the latest version of a document by changing the backup file's extension to ".html" and opening it. Autosave interval If this check box is selected, Namo WebEditor will automatically save all open, modified documents at regular intervals of the specified length. Note that Namo WebEditor does not autosave to the original file but rather to a copy with a ".asv" file name extension in the same folder. If your computer crashes or Namo WebEditor unexpectedly quits for any reason while you have modified documents open, you may be able to recover some or all of your lost work by changing the autosave file's ".asv" extension to ".html" and opening it. Save Smart ClipArt, equation, and chart images in Specifies the path of the folder in which Namo WebEditor will save the bitmapped images it generates from Smart ClipArt (p.232) images, charts (p.Error! Bookmark not defined.), and equations. The default path, "images", means that these bitmapped images will be saved in an "images" subfolder of the document's folder. If you want, you can specify a different path relative to the document's folder, such as "../bitmaps". The new path will be used the next time you save a document that contains Smart ClipArt, charts, or equations.
Working with documents

Web documents, like most other documents you work with on your computer, are stored as files on your hard disk or other mass-storage device. This section covers the various commands in Namo WebEditor that deal with basic file-oriented aspects of authoring for the Web, such as creating, saving, and printing documents.
Creating new documents

To create a new document using the default template
Do one of the following: o o Click (New) on the Standard Toolbar. Press Ctrl+N.
-By default, the default template is a completely empty document. You can designate a different template as the default template in the Templates (p.36) tab of the Resource Manager.
To create a new document using a template
1. 2. 3.
On the File menu, click New. In the folder list on the left, click a template category. In the preview area, click a template, and then click OK.
Changing the default document template

When you create a new document by clicking (New) on the Standard Toolbar or pressing Ctrl+N, Namo WebEditor bases the new document on the default document template. Initially, the default template is a plain, blank document. You can choose another document template to be the default template, so that it becomes the basis for new documents that are created using the button or Ctrl+N.
To open a document on the local file system
1. 2. 3.
On the Window menu, click Resource Manager. Select the template you want to use as the default template. You can choose a template from any folder in the Templates group. Right-click the selected template and click Set as Default Template.
48 Working with documents
A check mark will appear on the top left corner of the template that you set as the default template.
Opening documents
To open a document on the local file system
1.
Do one of the following: o On the File menu, click Open. (Open) on the Standard Toolbar. o Click Find the file you want to open, select it, and then click Open.
2.
-You can open multiple files at the same time. In the Open dialog box, click each file you want to open while holding down the Ctrl key, and then click Open. -To quickly open one of the last ten documents you have opened recently, on the File menu, point to Recent Files, and then click the item corresponding to the file you want to open.
To open a document on the Web
1.
Do one of the following: o On the File menu, click Open. (Open) on the Standard Toolbar. o Click In the URL box, enter the URL of the Web document you want to open, and click Open URL.
2.
To open a document directly from a remote site
A remote site is a folder on a Web server that contains a Web site you have published. You can open a document on a remote site directly, instead of downloading it first and then opening the local copy. For more information about remote sites, see Defining remote sites for publishing, p.348. 1. On the File menu, click Open on Web Server. 2. In the Remote site box, dick the remote site that has the document you want to open. 3. Select the desired document and click Open.
To open the document currently open in a Web browser
On the File menu, point to Import, and then click the item corresponding to the browser that is showing the document you want to open.
-By default, Namo WebEditor is set up so that you can import an open document from Internet Explorer or Netscape. You can change the browsers from which you can import by editing the settings in the
Working with documents 49
Browsers tab of the Preferences dialog box. The first two browsers in the list are the ones you can import from.
Previewing documents
Although Namo WebEditor tries to display documents in Edit mode as closely as possible to the way they will appear in a Web browser, it's not perfect. That's why it provides two ways to preview most documents as they would actually appear on the Web. Namo WebEditor's built-in preview mode uses Internet Explorer's rendering engine to render HTML, so it can display a document almost exactly as the version of Internet Explorer you have installed on your computer would. However, it does have some limitations: it can only emulate the particular version of IE you have installed, and even so, there can be some minor visual differences from IE itself due to operating system and IE service pack issues. For the most realistic previews, use Namo WebEditor's View with commands to view documents in an actual Web browser installed on your computer. You can set up up to five different browsers with which to view documents, two of which are accessible with shortcut keys. Using a View with command is a much more reliable way to preview how a document will appear in a non-Microsoft browser, such as Mozilla or Opera, than using the built-in preview mode. -Some kinds of Web content cannot be previewed reliably without actually uploading the document to a Web server and viewing it through the Web. This includes most content that uses a server-side script (such as ASP or PHP) or server side includes (SSI). However, you can use Namo WebEditor's built-in preview mode to preview dynamic documents you create using the Database Wizard (p.Error! Bookmark not defined.), as long as you have either Internet Information Server (IIS) or Personal Web Server (PWS) installed on your computer.
To preview the current document in Namo WebEditor's built-in preview mode
Click the Preview tab at the bottom of the main window.
To preview the current document in a designated Web browser
On the View menu, point to Preview, and then click the item corresponding to the browser you want to use.
If the browser you want to use is not on the menu, you need to set up Namo WebEditor to use it in the
Preferences dialog box.
1. 2. 3.
On the View menu, point to Preview, and then click Define Browsers. If there is an empty slot in the list of designated browsers, click it. Otherwise, click one of the already designated browsers to replace it. Then, click Edit. In the Name box, type the name of the desired browser. (For example, "Mozilla 1.4".)
4.
5.
6.
In the Program file box, enter the path of the browser's main executable file. (For example, "C:\Program Files\Mozilla\1.4\mozilla.exe".) You can click Browse to locate and select the program file instead of entering the path manually. In the DDE name box, type the system name used by Windows to reference the browser program. This is usually the same as the name of the program file, minus the ".exe" extension. (For example, "mozilla".) If you don't know what to enter, leave the box blank. Click OK. Click OK again to close the previous dialog box.
Saving documents
To save a document
1.
Do one of the following: o On the File menu, click Save. o Click (Save) on the Standard Toolbar. If you are saving the document for the first time, in the File name box, type a name for the file, and then click Save.
2.
To save a document with a new file name or in a different location
1. 2. 3.
On the File menu, click Save As. Navigate to the folder in which you want to save the document. In the File name box, type the new name for the file, and then click Save.
To save a document directly to a remote site
A remote site is a folder on a Web server that contains a Web site you have published. You can save a document directly to a remote site, instead of saving it locally and then uploading it to the remote site. For more information about remote sites, see Defining remote sites for publishing, p.348. 1. On the File menu, click Save on Web Server. 2. In the Remote site box, dick the remote site on which you want to save the document. 3. In the File name box, type the desired file name for the document, and then click Save.
Copying resource files when saving a document
When you save a document after inserting new images or other resource files in it, the Resource File Handling dialog box (pictured below) may appear, offering you various options, including the option of copying the newly inserted resource files to the document's folder. This dialog box appears only if the resource files are located outside the folder containing the document itself. If you choose the default action (Copy the files to the document folder), Namo WebEditor will copy the resource files to the document folder and modify their paths in the document's source code to point to the copies.
Unless you have a specific reason to leave a resource file outside the document folder, you should choose the default option. This avoids potential problems later, when you publish the document, since you won't have to worry about keeping track of resource files located in other folders. If you want to copy some but not all of the newly inserted resource files to the document folder, choose Copy the files to another folder or choose action for each file and manually set the paths of the files you want to copy to the document folder.
Saving a document in XHTML format

Namo WebEditor supports saving documents in standards-compliant XHTML format. XHTML is a variant of HTML that conforms to the strict requirements of XML syntax. When you save a document as XHTML, Namo WebEditor adds the necessary XML declaration and !DOCTYPE tag to the document, checks the document for non-XHTML-conformant markup (such as capitalized or unclosed tags), and corrects any non-conformant markup automatically before saving the document. The XHTML documents that Namo WebEditor saves conform to the XHTML 1.0 Recommendation.
To save a document in XHTML format
1. 2. 3.
On the File menu, click Save As. Click the Save as type box and select XHTML files.. Enter a file name and click Save.
Exporting a document to MHTML

Sending a Web document to another person through e-mail or another medium can be tricky. If a document uses images, and the URLs of those images are not on the Web, it's not enough to just send the HTML file; you have to find all the image files and send them, as well. For a complicated document, you may wind up sending dozens of files, just so the other person can view one page. To simplify the process of sending an individual Web document through e-mail and other media, you can export the document as a MIME HTML (MHTML) archive. An MHTML archive combines an HTML document with all the resource files (images, multimedia, and so forth) that it uses, into a single file. MHTML is the same system e-mail programs use to store attachments in an e-mail message. Internet Explorerand browsers based on Internet Explorercan open and display MHTML files as easily as HTML files, so most people should have no difficulty viewing an MHTML archive you send them. The file name extension of MHTML archives is .mht. In Windows, .mht files are set up to open in Internet Explorer by default when double-clicked.
To export the current document as an MHTML archive
1. 2. 3.
On the File menu, click Save As. Click the Save as type box and select MHTML Files. In the File name box, type the desired file name for the MHTML archive, and click Save.
Specifying the default file extension for a template

Normally, when you save a new document and don't specify its file name extension in the Save As dialog box, the extension is automatically set to either ".html" or ".htm", depending on the setting of the Default file extension option on the Save tab of the Preferences dialog box. However, you can specify a different default file extension for a specific document template. This can be useful, for example, if you create a template for PHP documents: by setting the template's default file extension to ".php", you can avoid having to type ".php" at the end of the file name every time you save a document based on the template.
To specify the default file extension for a template
1. 2. 3. 4. 5.
On the Window menu, click Resource Manager. Select the template for which you want to specify the default extension. Right-click the selected template and click Properties. In the File extension box, type the desired file extension. For example, ".php" (without quote marks). Click OK.
Saving a document as a template

Although Namo WebEditor comes with a variety of predesigned document templates, it can be useful to create your own templates. You can save any document as a template, and it will appear with the original Namo templates on the Templates tab of the Resource Manager (which opens when you click New on the File menu). When you save a document as a template, any resource files (images and so forth) it uses are saved along with it in a single MHTML archive, so the same resource files will be present in new documents you create from the template.
To save a document as a template
1. 2. 3.
On the File menu, click Save As Template. Double-click the folder corresponding to the template category in which you want to save the template. (In most cases, use the "Document" folder.) In the File name box, type a file name for the new template, and click Save.
-When you add a custom template, it initially appears in the Resource Manager without a title or description. To give your custom template a title and/or description, right-click its thumbnail preview in the Resource Manager and click Properties.
To remove a custom template
1. 2. 3.
On the Window menu, click Resource Manager. Click the Templates tab, and then click the folder containing the template you want to remove. Right-click the desired template's thumbnail preview and click Delete.
Moving and renaming resource files

You can use the Resource File Manager to move or rename images and other resource files used in the current document. The following operations are supported: Moving a resource file to another location relative to the document Converting a resource file's URL from an absolute, file-type path (p.146) to a relative path (p.147), or vice versa Renaming a resource file
When you move or rename a resource file, Namo WebEditor also updates its URL in the document's source code to the new path. -When you move a resource file using the Resource File Manager, Namo WebEditor copies the file to the new location. It does not delete the file in the original location.
Chapter 2: Namo WebEditor Fundamentals To move a resource file
1. 2. 3. 4. 5.
On the Window menu, click Resource File Manager. Select the file you want to move. (To select multiple files, click each while holding down the Ctrl key.) Click Choose Folder. Select the folder to which you want to move the file(s), and then click OK. Click OK.
To convert a resource file's URL between absolute and relative
1. 2. 3.
On the Window menu, click Resource File Manager. Select the file whose URL you want to convert. (To select multiple files, click each while holding down the Ctrl key.) Click Absolute/Relative Path, and then click OK.
To rename a resource file
1. 2. 3. 4.
On the Window menu, click Resource File Manager. Select the file you want to rename, and then click Rename. Type the new file name and press Enter. Click OK.
Viewing transfer information

When creating a document that contains large images or multimedia resources like movies and background sounds, it's a good idea to keep an eye on the total size of the document and its resource files. Large documents can take an excessively long time to load over slow Internet connections. While it's not always possible to avoid this, you should be aware of it and perhaps warn your users before they try to open slowloading, resource-heavy pages. The Advanced tab of the Document Properties dialog box displays the current document's total size (including any images or other resource files) and its theoretical download time at various connection speeds. Keep in mind that Internet connections rarely reach their maximum theoretical speed, so actual download times are likely to be significantly longer.
To view transfer information for the current document
1. 2. 3.
On the File menu, click Document Properties, or press Ctrl+F2. Click the Advanced tab. In the Connection speed box, select a speed to see the document's minimum total download time at the selected speed.
Printing documents
To print the current document
1.
Do one of the following: o On the File menu, click Print. (Print) on the Standard Toolbar. o Click Specify the range and number of copies you want to print, and then click OK.
2.
-Since Web documents are generally designed for viewing in a browser rather than printing on paper, it's a good idea to preview how a document will look on paper before printing it. (On the File menu, click Print Preview.) Also, you may want to adjust page setup options before printing a document. (On the File menu, click Page Setup.)
Controlling page breaks

Web documents are generally meant for viewing with a browser, not printing on paper. As a result, when you print Web documents, the pages often break in awkward places. Fortunately, Namo WebEditor includes several features that help you control how page breaks will occur when you print a document: You can view and edit a document in page layout mode, which shows the document as it would appear if printed within Namo WebEditor (in the current font, font size, and paper size). This lets you identify potential pagination problems. You can insert manual page breaks. By inserting a manual page break at an appropriate place above the location where an undesirable automatic page break would occur, you can override the automatic break. You can force a page break before or after a specific paragraph, and you can prevent a page break before, after, or inside a specific paragraph. You can control the behavior of widows and orphanssingle lines that fall just before or after an automatic page break and are thus visually separated from the paragraphs to which they belong. You can prevent these unsightly occurences by specifying that a certain number of lines in a paragraph must fall before or after an automatic page break.
-You should use manual or forced page breaks only to control how a document prints in Namo WebEditor. Since other people who view your document in a browser may print it in a different font, font size, and/or paper size from the one you used, it is not possible to predict the effect of any manual or forced page breaks you have inserted in the document. In page layout view, Namo WebEditor displays your document as it would look if printed in Namo WebEditor. Dashed red lines appear wherever automatic page breaks would occur. If a page break occurs
in an awkward position, you can insert a manual page break at an appropriate location before it, overriding the automatic page break. Manual page breaks are visible as solid red lines.
Part of a document in page layout mode To switch to page layout view
On the View menu, click Page Layout.
To insert a manual page break
1. 2.
Place the insertion point in the line above which you want the manual page break to occur. Press Ctrl+Enter.
There are some things you should be aware of when you insert a manual page break with Ctrl+Enter: If you insert a manual page break in the middle of a paragraph, the paragraph will be split into two paragraphs. As a result, some empty space will appear above the line where you insert the break, and this space will be visible in a browser. To avoid this space, set both the bottom margin of the upper paragraph and the top margin of the lower paragraph to 0. (See Setting margins, padding, and borders, p.200.) If you insert a manual page break while the insertion point is in the first line of a paragraph, Namo WebEditor will insert an empty paragraph above the break. You should delete this empty paragraph to avoid the empty space it creates, which is visible both in a browser and in print. If you insert a manual page break within an item in a numbered or bulleted list, a new list item will be created. To avoid this, insert the page break above a list item and then delete the extra item that is created.
To force a page break before or after a paragraph
1. 2.
Place the insertion point anywhere in the desired paragraph. On the Insert menu, point to Page Break, and then click Page Break Properties.
3.
4.
Depending on whether you want to force a page break before or after the paragraph, click one of the following options under either Page break before or Page break after: o Always: Click this option to force a normal page break. o Left: Click this option to force one or two page breaks before (after) the paragraph, so that the next page is printed as a left page. o Right: Click this option to force one or two page breaks before (after) the paragraph, so that the next page is printed as a right page. Click OK.
To prevent a page break before, after, or inside a paragraph
1. 2. 3. 4.
Place the insertion point anywhere in the desired paragraph. On the Insert menu, point to Page Break, and then click Page Break Properties. Click the Avoid option under Page break before, Page break inside, and/or Page break after. Click OK.
To restore default (automatic) page break behavior for a paragraph
1. 2. 3. 4.
Place the insertion point anywhere in the desired paragraph. On the Insert menu, point to Page Break, and then click Page Break Properties. Click the Auto option under Page break before, Page break inside, and/or Page break after. Click OK.
To control widows and orphans
1.
2. 3. 4. 5.
Do one of the following: o If you are specifying widow/orphan settings for one paragraph, place the insertion point in that paragraph. o If you are specifying settings for multiple (adjacent) paragraphs, select the paragraphs. On the Insert menu, point to Page Break, and then click Widow and Orphan Control. To prevent widows, click Prevent widows and then specify the minimum number of lines of a paragraph that must fall before a page break. To prevent orphans, click Prevent orphans and then specify the minimum number of lines of a paragraph that must fall after a page break. Click OK.
Basic document editing

As with many other kinds of documents, much of the time spent in authoring Web documents is taken up with the mundane tasks of inserting and editing text. Fortunately, you will not have to learn anything new to work with text in Namo WebEditor. Its WYSIWYG (What You See Is What You Get) interface makes adding and editing text in Web documents as familiar as working with a word processing program.
Inserting text
Typing text
To add text to a document, just create or open it and start typing. Whatever you type appears in the document at the insertion pointthe blinking vertical bar that moves when you type. You can move the insertion point by clicking the mouse or pressing the arrow keys on your keyboard. Note, however, that you cannot move the insertion point beyond the end of the content that exists in the document. To start a new paragraph, press Enter. To break the line you are typing without starting a new paragraph, press Shift+Enter. You can reverse the functions of the Enter and Shift+Enter keys, so that pressing Enter inserts a line break and Shift+Enter starts a new paragraph. On the Editing tab of the Preferences dialog box (click Tools > Preferences), select Enter key inserts line break instead of starting new paragraph.
Pasting text from another program
If the text you want to insert into a Web document already exists in another documentsuch as a word processing document or a plain text fileyou can copy the text from the other program by selecting it and pressing Ctrl+C, and paste it into the Web document by pressing Ctrl+V.
Inserting a text file
You can also insert the entire contents of a text file into a Web document. 1. 2. 3. 4. Create or open the Web document in Namo WebEditor, if it is not already open. In My Computer or Windows Explorer, locate the text file whose contents you want to insert. Drag the text file into the document window in Namo WebEditor. Press Enter.
Using overwrite mode
Normally, when you type text at the beginning or in the middle of a line of existing text, the new text "pushes" the existing text out of the way. But you can also type "over" existing text, if you want. First, you need to unlock the Insert key:
Basic document editing 59
1. 2.
On the Tools menu, click Preferences, and then click the Edit tab. Deselect the Lock Insert key check box and click OK.
Then, to enter overwrite mode, press the Insert key. On the right side of the status bar, the word Overwrite will appear to indicate Namo WebEditor is in overwrite mode. To return to insert mode, press Insert again.
Editing text
Ways to select text
Position the mouse pointer at the beginning of the desired text, press the mouse button down, drag the mouse pointer to the end of the desired text while holding down the button, and then release the button. Click at the beginning of the desired text, and then, while holding down the Shift key, click again at the end of the desired text. Double-click a word to select it. Place the insertion point at the beginning of the desired text and then press the right arrow key and/or the down arrow key while holding down the Shift key until you reach the end of the desired text. Place the insertion point at the beginning of the desired text and then press the right arrow key and/or the down arrow key while holding down both the Shift and Ctrl keys until you reach the end of the desired text. (The selection will be extended one word at a time.)
Ways to delete text
Place the insertion point at the beginning of the text you want to delete, and then repeatedly press Delete until all the unwanted text is deleted. Place the insertion point at the end of the text you want to delete, and then repeatedly press Backspace until all the unwanted text is deleted. Press Delete or Backspace while holding down the Ctrl key to delete one word at a time. Select the text you want to delete, and then press either Delete or Backspace.
To copy text from one location or document to another
1. 2.
Select the text you want to copy. Do one of the following: (Copy). o On the Standard Toolbar, click o Press Ctrl+C. Move the insertion point to the place where you want to insert the text (after switching to the other document, if necessary). Do one of the following:
3. 4.
60 Basic document editing
o o
On the Standard Toolbar, click Press Ctrl+V.
(Paste).
To move text from one location or document to another
1. 2.
Select the text you want to move. Do one of the following: (Cut). o On the Standard Toolbar, click o Press Ctrl+X. Move the insertion point to the place where you want to insert the text (after switching to the other document, if necessary). Do one of the following: o o On the Standard Toolbar, click Press Ctrl+V. (Paste).
3. 4.
-You can also move a selection of text by dragging it with the mouse. Similarly, you can copy a selection of text by dragging it while holding down the Shift key.
To change the case of selected text
1. 2.
On the Tools menu, point to Change Character Format, and then click Change Case. Select the option corresponding to how you want to change the case, and then click OK.
Finding and replacing text

You can search for a specific word or phrase in the current document and optionally replace it with other text. The Find and Replace commands can also operate on all open documents, instead of just the current one. (To find and replace text in documents that are not open, use the Global Find & Replace (p.364) command.)
To find specific text
1. 2. 3. 4.
On the Edit menu, click Find (or press Ctrl+F). In the Find box, type the text you want to find. (Note that the word containing the insertion point is already entered for you.) Under Options and Direction and range, select the desired options. (See Options and settings for find/replace, p.62, below.) Click Find Next. The found text will be selected in the document window. If necessary, keep clicking Find Next until the desired occurrence of the search text has been found.
-After closing the Find/Replace dialog box, you can quickly search for the next occurrence of the search text by pressing F3.
To find and replace specific text
1. 2. 3. 4. 5.
On the Edit menu, click Replace (or press Ctrl+H). In the Find box, type the text you want to find. (Note that the word containing the insertion point is already entered for you.) In the Replace box, type the text you want to replace the search text with. Under Options and Direction and range, select the desired options. (See Options and settings for find/replace, p.62, below.) Do one of the following: o If you want to decide for each occurrence of the search text whether to replace it or not: 1. Click Find Next. 2. If a match is found, click Replace to replace it or Find Next to skip it. 3. Repeat step 2 until all occurrences of the search text have been found. o If you want to replace all occurrences of the search text at once, click Replace All.
Options and settings for find/replace
Options
Match case: Only finds occurrences that have the same capitalization as the search text. For
example, if this option is selected and you search for "hello", any occurrence of "Hello" will be ignored.
Match whole words only: Only finds occurrences that are whole words. For example, if this option is selected and you search for "art", words like "heart" will be ignored. Match in hyperlinks only: Only finds occurrences in the URLs of hyperlinks. For example, if this
option is selected and you search for "namo", all links to "www.namo.com" will match, but the word "namo" in text content will be ignored.
Match full-/half-width: Only finds occurrences that match the same "width" as the search text. This option only applies to documents using double-byte characters, such as Korean or Chinese characters.
Direction and range

Up: The current document will be searched starting at the location of the insertion point and progressing upward. The search will terminate at the top of the document. Down: The current document will be searched starting at the location of the insertion point and
progressing downward. The search will terminate at the bottom of the document.
Start at top of document: The current document will be searched starting at the top, regardless of the location of the insertion point.
Search all open documents: All open documents will be searched, starting at the top of the document that was opened first.
-The Find and Replace commands do not accept wildcard characters, such as "?" and "*".
Inserting special items

Inserting a non-breaking space
When a browser (or Namo WebEditor's Edit mode) displays a paragraph of text, it "wraps" the paragraph by automatically breaking it at the right edge of the window (or the paragraphs' parent container, such as a table cell) so that no line is wider than the window or container. This saves you and your users the trouble of scrolling the window horizontally to see all of a long paragraph. These automatic line breaks can occur wherever there is a space between words or characters. However, there may be occasions when you do not want an automatic line break to occur in a particular place, no matter what. For example, you may have a heading that you want to always be displayed on a single line, even if it means having to scroll horizontally to see all of it. In such cases, instead of inserting ordinary spaces between words, you can insert non-breaking spaces. If a browser encounters a non-breaking space in a paragraph, it will never break the paragraph at that space. To prevent a paragraph from breaking at all, you can insert non-breaking spaces between all of its words, as in the example below:
A heading with normal spaces To insert a non-breaking space
A heading with non-breaking spaces
Do one of the following: o On the Insert menu, point to Other, and click Non-Breaking Space. o Press the space bar while holding down the Ctrl key.
-If you have many or long paragraphs that you do not want wrapped, instead of using non-breaking spaces, it is more convenient to define a style (p.191) that includes the white-space property with the value "nowrap" and apply the style to the paragraphs. -To prevent wrapping in a table cell, you can apply the "nowrap" attribute to the cell. (On the Inspector, select No wrap.)
Inserting horizontal rules

A horizontal rule is a line used to visually divide sections of content in a document. By default, it stretches all the way across its parent container.
To insert a horizontal rule
1. 2.
Place the insertion point where you want to insert the horizontal rule. On the Insert menu, click Horizontal Rule.
-If you insert a horizontal rule in the middle of a paragraph, list item, or similar block element, the element will be split into two elements above and below the rule.
To adjust a horizontal rule's width, height, and other properties
1. 2.
Select the horizontal rule. On the Inspector, do any of the following: o In the Width and/or Height boxes, enter values for the rule's width and/or height and press Enter. Width can be specified in pixels or as a percentage of the parent container's width; height can only be specified in pixels. o Click the Alignment box and select the alignment of the rule with respect to its parent container. (This only has an effect if the rule's width is smaller than that of the parent container.) o Select the Solid check box to remove the rule's 3-D effect, making it a solid bar. o Click the color box and select a color for the rule. (If you specify a color, the rule becomes a solid bar regardless of the state of the Solid check box.)
Inserting symbols and special characters

Use the Symbol command to insert a symbol or special character that cannot be typed on the keyboard, such as the copyright symbol .
Chapter 2: Namo WebEditor Fundamentals To insert a symbol or special character
1. 2. 3.
On the Insert menu, click Symbol (or press Ctrl+F7). If the character you want to insert does not exist in the ASCII character set, click the Unicode tab. Double-click a character to insert it into the document. Repeat as desired. When done, click Close.
-If you insert a Unicode character, you must specify the character set of the document as Unicode; otherwise, the character will not display properly in a browser (or in Preview mode). To specify the document's character set: on the File menu, click Document Properties, click the General tab, and then click the Character Set box and select Unicode (UTF-8). -The Symbol dialog box is non-modal, so you can click on the document window and continue editing while the dialog box is open. In the dialog box, you can also click Copy to Clipboard to save the selected character in the clipboard for future pasting.
Inserting comments
In HTML, a comment is text that appears in the source code of a document but is not displayed in a browser and has no effect on the appearance of the document. If you are an advanced author and work directly with source code, inserting comments is a good way to remind yourself or other authors what particular sections of the source code are for. Although comments are usually inserted in HTML mode, you can also insert a comment in Edit mode. If ) will appear in Edit mode at the the display of special tag marks (p.34) is enabled, a comment mark ( location of the comment. In the HTML source code, a comment is surrounded by the character strings "<!" and ">".
To insert a comment
1. 2. 3.
Place the insertion point at the location where you want to insert the comment. On the Insert menu, click Comment. Enter the text of the comment and click OK.
-To enable or disable the display of special tag marks: on the View menu, point to Marks, and then click Special Tag Marks. Alternatively, click (Show/Hide Special Tag Marks) on the Standard Toolbar.
Inserting the current date/time

To quickly insert the current date and time as text in the current document, use the Date and Time command. You can choose among various date/time formats.
Namo WebEditor 2006 User Manual To insert the current date and/or time
1. 2.
On the Insert menu, point to Other, and click Date and Time. Select the desired date/time format and click OK.
-Namo WebEditor gets the current date and time from your computer's internal clock. If the clock is wrong, the wrong date and/or time will be inserted. To adjust your computer's clock, use the Date and Time icon in Windows's Control Panel.
Working with local sites

What is a local site?
A local site is a managed collection of Web documents, folders, and resource files on the local file system that you intend to publish as a Web site. A local site gathers local files into a cohesive whole and lets you manage them as a whole, with Namo WebEditor's Site Manager. A mere bunch of HTML and image files in a folder on your hard disk is not a local site, in the sense in which Namo WebEditor uses the term. A local site must be explicitly created through a command in Namo WebEditor, and its members (files) must be explicitly included.
Benefits of using a local site
Creating a local site makes possible several things that cannot be done with a simple folder full of files. The most important of these are automatic link updating, dynamic navigation bars, and a site library. Automatic link updating When you move or rename a file or folder in a local site, any paths or URLs that point to the file (or include the folder) can be automatically updated. For example, if several documents in a local site all link to an image whose path is "images/logo.gif", and you move the image to an images/logos folder, Namo WebEditor will offer to change all of the affected image paths automatically to "images/logos/logo.gif". Dynamic navigation bars If you've surfed the Web even a little, you'll be familiar with the concept of the navigation bara row or column of links that provide shortcuts to key pages on a site or to pages closely related to the current page. Often, the same navigation bar appears on many pages in the same site. Navigation bars are popular because site visitors find them useful, not because they are easy for site authors to create and manage: if you remove or add a page that a navigation bar link points to, or should point to, you may have to update the navigation bars on dozens, if not hundreds, of pages. You can avoid such headaches by using Namo WebEditor's dynamic navigation bars, which are made possible when you set up a site tree in a local site. A dynamic navigation bar updates automatically when you add or remove a page at the same level in the site tree as the other pages the bar links to. Site library In any medium-size to large site, there will be resourcesimages, blocks of text, hyperlinks, and so forththat are used repeatedly throughout the site. When you use a local site in Namo WebEditor, the Site Library panel presents categorized lists of all such resources in use in the site.
Working with local sites 67
Inserting an existing resource into a document that is part of the site is as easy as dragging it from the Site Library. Other advantages of using a local site include one-button publishing and the ability to use a source control system to prevent conflicts when more than one person edits the same set of documents. For all of these reasons, it is always a good idea to create a local site whenever you work on multiple documents that will be published to the same Web site.
Creating a local site

There are three ways to create a local site: You can use the Site Wizard to create a new site from a site template. The wizard automatically creates a local site, complete with a site tree (p.316), to contain the documents it generates. You can create an empty local site with the New Site command. After creating an empty site, you can add documents to it by dragging them from Windows Explorer or by creating them from scratch. You can create a local site from the contents of an existing folder on the local file system with the New Site command. (The folder contents may consists of files imported (p.313) from a Web site.) Any HTML documents and resource files in the folder and any subfolders will automatically be added to the local site, and Namo WebEditor will automatically generate a site tree (p.316) from the documents and subfolders.
-When you create a local site, Namo WebEditor adds a special file named site.wej and a special folder named _we_info5 in the local site's top-level folder. These special items store site information and internal resources. By default, these items are not visible in the Site Manager, although you can see them in Windows Explorer. Do not delete these items unless you want to delete the local site.
Creating a local site with the Site Wizard

Use the Site Wizard to create a complete site in seconds. Just choose a site template and a theme, and Namo WebEditor generates a local site for you, complete with ready-to-customize documents and a site tree that defines the navigational structure of the site. To start the Site Wizard, click the Site Wizard button on the Shortcut Bar or, on the File menu, point to Site, and click Site Wizard. The wizard walks you through the process of creating a site in four easy steps:
68 Working with local sites
Chapter 2: Namo WebEditor Fundamentals Step 1: Choose a site template
In the first step of the Site Wizard, you choose a site template on which to base your new site. The choice of template affects both the structure of the site (how many pages there are and how they are related) and the title and layout of each page. Select a template under Templates, and its site tree will appear in the Preview area. Keep in mind that a site template's initial structure (site tree) is only a starting point. You can always add, rearrange, or remove documents after you finish the Site Wizard. However, if you want to modify your new site's site tree right at the beginning, you can do so right in the Site Wizard by manipulating nodes in the Preview area and using the buttons below it. To move a node in the tree, drag it to the desired position. To add a node, select an existing node and click New. In the menu that appears, select a node type (p.317). A new node will be added as a child of the selected node. To copy a node, select it and click Duplicate. The copy will be given the same navigation name as the original, so be sure to rename it. To rename a node, select it and click Rename. To delete a node, select it and click Remove.
For more information about working with a site tree, see Building the site tree, p.317. -Modifying the template structure in the Site Wizard affects only the site you are currently creating; it does not modify the template itself. If you want to save changes to a site template so that future sites
based on the template inherit the changes, complete the Site Wizard, make the desired modifications, and then save the site as a new site template (p.311).
Step 2: Choose a theme
In the second step of the wizard, you choose a theme for your new site. A theme is a collection of formatting styles and graphical design elements that combine to give a consistent look to a site (or some documents in a site). Namo WebEditor comes with predesigned themes, and you can create new themes (p.247) of your own either from scratch or by customizing (p.247) the included themes. To see a preview of your new site with the selected theme applied, click Site Preview. Namo WebEditor will generate a temporary site based on the template selected in the previous step, apply the selected theme to it, and then open its index page in your default browser. While examining the temporary site in the browser, use the navigation bars on each page to jump to other pages.
Chapter 2: Namo WebEditor Fundamentals Step 3: Enter site information
In the third step of the wizard, you enter a few pieces of information that will be used throughout the new site, and specify the local folder in which to save the site. Title Type a title for your new site in this box. This title will not actually appear on any page in the site; it just makes it easier to tell what local site you are working on at any given time. Author Type your name in this box. Like the title, the author name does not actually appear on any page in the site. The only place it appears is in the Properties dialog box for the site. Administrator e-mail address The e-mail address you type in this box will appear near the top and/or bottom of every Site Wizard-generated page in the site. If you don't want any e-mail address to be automatically inserted on every page, leave this box blank. Copyright information Whatever you type in this box will appear near the bottom of every Site Wizard-generated page in the site. You can use it to specify copyright information or any other piece of text you want to appear at the bottom of every page. If you don't want any text to be automatically inserted at the bottom of every page, leave this box blank.
Save site in Enter the path of the local folder (a folder on your hard drive or somewhere on your local area network) in which to save the site. You can click the Browse button to locate and select an existing folder. Note that you must specify a local folder, not a directory on a Web server. You will upload the local site to a Web server later, using one of the publishing (p.347) commands.
Step 4: Specify a Web server
In the fourth and last step of the Site Wizard, you specify the Web server to which the local site will be uploaded, or published, once you are finished customizing it. If the server you want to use has not been defined yet, you can click New to define it now. However, this is not required; you can always define a Web server later using the Remote Sites command (see Defining remote sites for publishing, p.348).
Finishing the Site Wizard
Click Finish to complete the Site Wizard. If the folder you specified in the third step does not yet exist, Namo WebEditor will ask you whether it's okay to create it; click Yes. Then, Namo WebEditor will spend a few moments generating the new site and applying the selected theme to it. When it has finished, the Site Manager window will appear. Now you can start opening and customizing the generic documents the wizard has generated. To open a document for editing, double-click its icon in either the Site Files pane or the Site Tree pane of the Site Manager.
Creating an empty local site

If you plan to create a new Web site entirely or mostly from scratch, start by creating an empty local site with the New Site command. Creating a local site and adding new documents to itinstead of simply storing new documents in an ordinary Windows folderwill make it easier to manage the documents and make it possible to use automatic link updating, dynamic navigation bars, and a site library, among other benefits. After creating an empty site, you can add documents (p.309) to it by using commands in the Site Manager to create new documents, or by dragging existing documents to the Site Manager from Windows Explorer. You can also add other files, such as images, by dragging them from Windows Explorer.
To create an empty local site
1. 2. 3. 4.
On the File menu, point to Site, and then click New Site. In the Site title and Author boxes, enter a name for the site and your name, respectively. (This information will not appear on the Web site.) Click Create empty site, and then enter the path of the folder in which you want to store the site's files. (You can click ... to browse for a folder or to create a new one.) Click OK.
The Site Manager window will come to the front, with the new local site open and ready for you to add new (or existing) documents.
Creating a local site from files in an existing folder

If you already have a local copy of a Web site in a folder on your hard drive, and you want to manage the folder as a local site with the Site Manager, you can do so by creating a new local site in that folder. All files and subfolders in the folder will be automatically added to the local site. This provides a convenient way to let Namo WebEditor "take over" a site that you have created using other software.
To create a site from an existing folder
1. 2. 3. 4. 5.
On the File menu, point to Site, and then click New Site. Under Site information, enter a name for the new site and (optionally) the author's name. Under Site origin, click Import existing files in a folder, and then enter the path of the folder that contains the existing files. You can click the ... button to browse for a folder. Specify the file types, if any, you want the Site Manager to include in the site tree. (See "Generating a site tree automatically", below.) Click OK.
The Site Manager window will come to the front, with the new local site open and ready to use.
Namo WebEditor 2006 User Manual Generating a site tree automatically
When the Site Manager takes over an existing folder containing Web site files, it can optionally generate a site tree for the new local site, automatically populating the tree with nodes based on the files and subfolders in the folder. The Site Manager can create nodes from any of the following file sets: all Web documents (HTML/ASP/PHP/JSP/SHTML files) all image files (GIF/JPG/PNG/BMP files) all Web documents and image files all files, regardless of type
Before having the Site Manager autogenerate a site tree for the new local site, you should decide which file types you want the Site Manager to create nodes for. In most cases, choosing Documents only is the best choice. Note that the Site Manager will always create folder nodes from any subfolders in the site folder; this behavior cannot be disabled. To understand how the Site Manager constructs automatic site trees, consider the following, highly simplified file/folder structure for a hypothetical company site:
If you create a new local site in the www.namo.com folder and enable automatic site tree generation, the Site Manager will generate the following site tree. (Note: node titles have been changed from their defaults.)
Notice that the Site Manager has correctly identified index.html as the site's "home page", appropriately placing its node at the top (root) of the tree, just under the node representing the site itself. Each of the other two top-level documents, about.html and contact.html, becomes a child node of the home page node. The top folder's immediate subfolders, products and support, become folder nodes at the same level, while the contents of those subfolders become their child nodes, and so forth. The purpose of creating folder nodes in autogenerated site trees is mainly to provide a way to visualize the folder structure of the site. Folder nodes are not actually represented in dynamic navigation bars. If the toplevel index page in the above example contains a dynamic navigation bar linking to its child nodes, that bar will not include links to the products and support index pages, since those index pages are not immediate children of the top-level index page. To include the products and support index pages in the navigation bar, you would need to move (p.322) those nodes up, putting them on the same level as the "about" and "contact" pages. In fact, it often makes sense to eliminate folder nodes altogether, after moving their (document) child nodes to appropriate positions in the tree, as in this example:
(Note that the moved "index" nodes have been renamed to "products", "webeditor", and "support", respectively.)
3 Laying Out Web Pages

In Web documents as in printed documents, layout refers to the spatial arrangement of elementsusually text and graphicson a page. Besides being pleasing to the eye, good layout makes documents easier to read and understand. HTML provides several tools you can use to design an effective page layout, and Namo WebEditor makes using these tools as easy as possible.
In this section About page layout ........................................................................................ p.78 Using layout boxes....................................................................................... p.79 Using a table for layout ................................................................................ p.86 Using frames ................................................................................................ p.88 Using layers ................................................................................................. p.97
77
About page layout

In many ways, Web documents are like documents you create in a word processor. Content begins at the top left (or top right, depending on the language) corner of the page and proceeds toward the right (or left) and down in a single, continuous column. But a single-column layout is often not what Web authors want. For example, you may prefer to have a column of links on the left side of a page, a middle column for body content, and a third column on the right for supplementary content. Fortunately, HTML and cascading style sheets (CSS) offer the following techniques to create more useful and visually interesting layouts than the default single column: Tables (p.86) Tables are elements that arrange content in rows and columns. By creating a table that fills the entire page and placing all the page's content in it, you can create virtually any page layout. Frames (p.88) Frames are a way of dividing the browser window into two or more panes. Among other things, you can place links in one frame and have the links' destinations open in another frame. Frames scroll independently, so your links can remain always visible while the content frame is scrolled. Positioned elements (layers) (p.97) Normally, the position of an elementsuch as a paragraph or an imageis determined by its position within the sequence of all the elements on the page and the size of the elements that go before it. However, cascading style sheets provide a way to specify the position of an element in terms of absolute page coordinates, so you can position an element independently of other content. In addition, with Namo WebEditor's layout boxes (p.79), even beginning Web authors can start creating versatile layouts right away. When you drag layout boxes on a layout grid, Namo WebEditor automatically creates an invisible table that reflects the arrangement of your content.
78 About page layout
Chapter 3: Laying Out Web Pages
Using layout boxes

To overcome the limitations of the normal single-column flow of content in HTML, Web authors often use a table (p.161) to hold all the content of a page. The rows and columns of the table provide a convenient structure for authors to place content in specific locations on the page. However, setting up and managing a table for page layout is not easy, even for experienced authors. To make using tables for layout more accessible, Namo WebEditor includes a feature called layout boxes. A layout box is an invisible box that contains layout cells that hold content. Within a layout box, you draw cells using the mouse. You move cells by dragging them, and you can resize cells without affecting the size of other cells or of the layout box. By default, a layout box has a grid to help you align layout cells. When you create a layout box, Namo WebEditor automatically creates a borderless table in the underlying HTML source code with the same dimensions as your layout box. When you draw, move, resize, or remove cells in the layout box, Namo WebEditor automatically changes the table code to reflect your changes. Although you can see the layout box in Edit mode, it is invisible in browsers. You can do the same kinds of layout tasks with layout boxes that you can with ordinary tables, but layout boxes are easier to use.
A small layout box containing four layout cells, as seen in Edit mode
Using layout boxes 79
Creating a layout box and layout cells

To create a layout box for an entire page
1. 2. 3. 4. 5.
Create a new document (click (New) on the Standard Toolbar). On the Table menu, point to Layout Box, and then click Draw Layout Box. Click near the top left corner of the document and drag downward and to the right until the dotted rectangle is approximately the size you want for your page layout. Delete the empty paragraphs above and below the new layout box. If you want to adjust the size of the layout box, double-click it and enter new values in the Width and Height boxes.
-Note that even if there are no other elements above or to the left of a layout box, there will still be a small margin between the layout box and the top and left sides of the browser window. To remove this margin, define a style sheet rule (p.191) for the <body> element with the declaration: "margin: 0". Although in most cases you will probably want to use a layout box to contain all the content on a page, it is also possible to use a layout box for just part of a page. Any number of layout boxes can coexist in the same document. (However, a layout box cannot contain another layout box.)
To create a layout box for part of a page
1. 2. 3. 4. 5.
Place the insertion point in the line below which you want the layout box to appear. On the Table menu, point to Layout Box, and then click New Layout Box. Enter the desired dimensions in Width and Height. If you want content following the layout box to flow around it, click Alignment and select Left (Floating) or Right (Floating). Click OK.
To create layout cells
1.
Do one of the following: o On the Table menu, point to Layout Box, and then click Draw Layout Cell. (Draw Layout Cell). o On the Layout Box Toolbar, click For each layout cell you want to create, draw a box inside the desired layout box. When finished, press Esc to exit drawing mode.
2. 3.
Layout cells cannot overlap. While drawing a layout cell, if you move the pointer into another layout cell, the pointer will change to -, indicating that the layout cell cannot grow further.
80 Using layout boxes
Resizing layout boxes and layout cells

To resize a layout box
1. 2. 3.
Select the layout box by clicking its border or an empty space inside it. (The pointer should look like before you click.) Drag any of the box's resize handles. If you need to make fine adjustments to the size of the box, right-click the box, select Layout Box Properties, and then enter the desired dimensions in Width and Height.
To resize a layout cell
1. 2. 3.
Select the layout cell by clicking its border or an empty space inside it. (The pointer should look like before you click.) Drag any of the cell's resize handles. If you need to make fine adjustments to the size of the cell, double-click its border and enter the desired dimensions in Width and Height.
Resizing a layout cell does not affect the size or position of any other layout cell. Also, layout cells cannot overlap. As a result, you cannot increase the size of a layout cell beyond the borders of any adjacent cells. -While editing a layout box, it is possible to set the size of a layout cell so that all of its contents are not visible. Such a cell will appear with a red border in Edit mode. However, when the document is viewed in Preview mode or a browser, the layout cell will expand to show all its contents.
To adjust the size of a layout cell to fit its contents
1. 2.
Select the layout cell by clicking its border or an empty space inside it. (The pointer should look like before you click.) Do one of the following: o On the Format menu, point to Layout, and then click Fit to Contents. o On the Layout Toolbar, click (Fit to Contents).
If necessary, the layout box will be expanded to accommodate the resized layout cell. However, any adjacent cells will not be moved automatically, so the Fit to Contents command will be unavailable if it would require adjacent cells to be moved.
Moving, duplicating, and removing layout cells

To move a layout cell
Drag the cell to a new location. (If the cell is full, start dragging by clicking the cell's border.)
The pointer should look like
before you drag, and it will change to a hand while you drag.
If you drag a layout cell so that it overlaps any other layout cell, when you release the mouse button the cell will "snap" to the nearest position that avoids overlapping other cells. If you drag a layout cell beyond the layout box's right or bottom border, when you release the mouse button the layout box will expand to enclose the layout cell. If you drag a cell beyond the layout box's left or top border, the cell will snap to the nearest position that is completely within the layout box. You cannot move a layout cell from one layout box into another layout box. To duplicate a layout cell in another layout box, create a cell of the same size in the second layout box and then copy or drag the original cell's contents into it. -If you hold down the Shift key while dragging a layout cell, its movement will be limited to sideways and up-and-down movement only (no diagonal movement).
Duplicating a layout cell
Drag the cell to a new location while holding down the Ctrl key.
To remove a layout cell
Click the cell's border and then press Delete.
To remove several layout cells
1. 2.
Click each cell's border while holding down the Shift key. Press Delete.
Aligning and distributing layout cells

You can align, distribute, and resize layout cells with respect to each other using the Layout Toolbar or the commands in the Layout submenu of the Format menu. To reveal the Layout Toolbar, in the View menu, point to Toolbars, and then click Layout.
The Layout Toolbar To align two or more layout cells with each other
1. 2.
Select the cells by clicking each cell's border while holding down the Shift key. Click one of the alignment buttons (the first six buttons) on the Layout Toolbar.
The cells will be aligned with respect to the last selected cell. Depending on the arrangement of the selected cells, not all of the alignment commands may be available. Since layout cells cannot overlap, only those alignment commands that would not result in overlapping cells are available at any given time.
To evenly distribute three or more layout cells
1. 2.
Select the cells by clicking each cell's border while holding down the Shift key. On the Layout Toolbar, click (Space Across) or (Space Down).
If the Space Across or Space Down command is not available even though three or more layout cells are selected, there may not be enough space to distribute the cells. In the example below, the cells cannot be distributed horizontally because there is not enough space between Cell 1 and Cell 3 for Cell 2. Similarly, they canot be distributed vertically because there is not enough space for Cell 3 between the other two cells.
Example of undistributable cells To make two or more layout cells the same size
1. 2.
Select the cells by clicking each cell's border while holding down the Shift key. On the Layout Toolbar, click (Make Same Width), (Make Same Height), or Size).
(Make Same
The cells will be resized to the same size as the last selected cell. Cells are never moved automatically, so if there is not enough space to resize all selected cells, some or all of the resize commands will be unavailable.
Changing properties of layout boxes

To change the alignment of a layout box with respect to its parent element
1. 2.
On the Layout Box Toolbar, click (Layout Box Properties). Click the Alignment box and select Left, Right, or Center.
Namo WebEditor 2006 User Manual To make surrounding content flow around a layout box
1. 2.
On the Layout Box Toolbar, click (Layout Box Properties). Click the Alignment box and select Left (Floating) or Right (Floating).
To change the background color of a layout box
1. 2.
On the Layout Box Toolbar, click (Layout Box Properties). Click the Color box and select a color (p.210).
To add a repeating background image to a layout box
1. 2.
On the Layout Box Toolbar, click (Layout Box Properties). Enter an image file URL in the Image box.
To change grid spacing
1. 2.
On the Layout Box Toolbar, click (Layout Box Properties). Enter the desired horizontal and vertical distance between gridlines in the Horizontal and Vertical boxes.
To turn off snap-to-grid
1. 2.
On the Layout Box Toolbar, click (Layout Box Properties). Clear one or both of the Snap check boxes. (Snap-to-grid can be enabled or disabled independently for horizontal and vertical gridlines.)
To hide gridlines
1. 2.
On the Layout Box Toolbar, click (Layout Box Properties). Clear one or both of the Visible check boxes. (Visibility can be enabled or disabled independently for horizontal and vertical gridlines.)
Changing properties of layout cells

To change the horizontal alignment of the contents of a layout cell
1. 2.
On the Layout Box Toolbar, click (Layout Cell Properties). Under Alignment, click the Horizontal box and select an alignment type.
To change the vertical alignment of the contents of a layout cell
1. 2.
On the Layout Box Toolbar, click (Layout Cell Properties). Under Alignment, click the Vertical box and select an alignment type.
Chapter 3: Laying Out Web Pages To change the background color of a layout cell
1. 2.
On the Layout Box Toolbar, click (Layout Cell Properties). Under Background, click the Color box and select a color (p.210).
To add a repeating background image to a layout cell
1. 2.
On the Layout Box Toolbar, click (Layout Cell Properties). Under Background, enter an image file URL in the Image box.
To change a layout cell's margins
1. 2.
On the Layout Box Toolbar, click (Layout Cell Properties). Under Margins, enter new values in any or all of the Left, Right, Top, and Bottom boxes.
-Margins appear on the inside of a layout cell, so they affect the size of its content area but not the size of the cell itself. If a layout cell also has non-zero borders, the borders are drawn outside the margins.
To change a layout cell's borders
1. 2. 3.
On the Layout Box Toolbar, click (Layout Cell Properties). Under Borders, enter new values in any or all of the Left, Right, Top, and Bottom boxes. Click the Color box and select a color (p.210).
-Borders are drawn on the inside of a layout cell, so they affect the size of the cell's content area but not the size of the cell itself. If a layout cell also has non-zero margins, the margins appear inside the borders.
Converting between layout boxes and tables

To convert a layout box to a table
Right-click the layout box's border and select Convert Layout Box to Table in the shortcut menu.
To convert a table to a layout box
Right-click the table, point to Table on the shortcut menu, and then click Convert Table to Layout
Box.
Using a table for layout

Although novices and intermediate Web authors generally find it easier to use a layout box (p.79) than an ordinary table to create a multi-column layout, experienced authors may prefer tables for their familiarity or their greater flexibility. Creating a layout table is not difficult, but you do need to be aware of various behaviors of tables and cells and how they can affect your layout. Here are some guidelines for using layout tables:
Use the table drawing tools
Namo WebEditor's table drawing tools can greatly simplify creating a layout table. Use the Table Pencil to draw a single-cell table of the desired size, and then draw column and row borders to create cells for content. Use the Table Eraser to merge cells by "erasing" the border between them.
Align content with the tops of cells
If you don't specify the vertical alignment of content in a cell otherwise, most browsers put content in the middle of the cell. For a layout table, you'll probably want content to start at the top of most cells. To specify top vertical alignment in a cell, do this: 1. 2. Right-click the cell and select Layout Cell Properties in the shortcut menu. Click the Vertical alignment box and select Top.
You can select several cells and set the vertical alignment of all of them in one operation.
Pay attention to borders, margins, and padding
For layout tables, you'll usually want the borders to be invisible in browsers. After creating a layout table in Namo WebEditor, make sure to set the border width to zero (enter 0 in the Border box of the Inspector) to make the borders invisible. In most browsers, the default spacing between cells is 2 pixels, and the default cell padding is 1 pixel. This may interfere with your page design if your design calls for adjacent cells to contain images that have no space between them. On the other hand, you might want more space between cells that contain text, for better readability. You can adjust the cell spacing and padding values for a table in the Inspector. Note that these values apply to an entire table; pure HTML does not provide a way to control spacing and padding on a cell-by-cell basis. For greater control, set both cell spacing and cell padding to zero and use the padding properties of cascading style sheets on individual cells as needed. -To hide borders and set cell spacing and padding to zero in one step, click Inspector. (Hide Borders) on the
86 Using a table for layout
Chapter 3: Laying Out Web Pages Be careful when setting table and cell widths
When you create a table using the table drawing tools or the Create Table button on the Standard Toolbar, Namo WebEditor automatically sets column widths in absolute, pixel units. However, pixel units are not always appropriate for layout tables. If you use only pixel units, your table's width cannot grow or shrink in response to changing browser window sizes, so people who view your page in a small window may have to scroll sideways to see all your content. It's usually best to leave the width of at least one column unspecified, so that column can grow or shrink depending on the window size. In the example below, the "content" cell's width is unspecified, while the table's width is set to 100%. This allows the table width to shrink or grow while the width of the "navigation" cell remains fixed.
A layout table using both fixed and unspecified cell widths
Also, try to avoid specifying table and cell sizes that conflict with one another. Conflicting size settings can confuse browsers and lead to unexpected results. For example, avoid specifying a table width that is smaller than the combined width of its columns.
Don't rely on cell height
If you specify the height of a row or cell, keep in mind that browsers treat the value as a minimum value only. Browsers will always override the specified height of a cell when necessary to show all its contents.
Using a table for layout 87
Using frames
This section deals with creating and using frames. Like layout boxes and tables, Web authors can use frames to create complex page layouts. However, the most important aspect of frames is that authors can use them to display multiple documents in the same browser window.
About frames and framesets

On the Web, frames are used to display more than one document in the same browser window. Each frame in a frameset displays a different document (or different parts of the same document). Frames act almost like independent windows: they can be scrolled independently of other frames, and the document appearing in one frame can change without affecting other frames. A typical use of frames is to display a set of links together with the destination of one of those links. Clicking a link in the links frame loads its destination in the content frame. Since frames scroll independently, a viewer can scroll the content frame while the links in the links frame stay in place. Additional frames might be used, for example, to display a banner that always stays at the top of the window and a footer that always stays at the bottom of the window.
A frameset with banner, links, and content frames
Each frame in a frameset must have an initial document (p.89)the document that appears in the frame when the frameset is first opened in a browser. A frame's initial document may later be replaced by another document in the course of browsing the site. In the example above, the initial document of the content frame will be replaced by another document when the user clicks a link in the links frame. An initial document does not need to be located on your site; it can be any document on the Web.
88 Using frames
To open a frameset in a browser, you open the frameset documentthis is the document that contains the information the browser needs to display the frames and fill them with content from other sources. The frameset document itself normally does not appear in the browser window, although its URL appears in the browser's address bar. However, if a browser does not support frames, then it will display the contents of a <noframes> element (p.95) in the frameset document. -To link to a frameset, use the URL of the frameset document. Similarly, to use a frameset as the default document for a site, specify the file name of the frameset document in your Web server's default document setting (or rename the frameset document to index.html).
Creating a frameset
To create a frameset
1.
2.
Do one of the following: o On the File menu, click New, and then click the Frameset folder. o On the Frame menu, click New Frameset. Click a frameset template and then click OK.
-Namo WebEditor will not create a new frameset if one is already open. When you create a new frameset, Namo WebEditor opens the frameset in Edit mode and displays a new, blank document in each frame. At this point, you should specify the initial document (p.89) for each frame and then save (p.90) the frameset. If you have not yet created the initial documents, you can go ahead and compose them directly in each frame. When you save a document in a frame, Namo WebEditor automatically sets that frame's initial document to the saved document.
Setting a frame's initial document

Each frame in a frameset must have an initial documentthe document that appears in the frame when the frameset is first opened in a browser.
To set the initial document for a frame
If you are composing the initial document in the frame, simply save the document (p.90). The initial document URL will be set automatically. If you want to set the initial document to an existing document, do this: 1. Click inside the frame to make it active. (The active frame is shown with a blue border.) 2. On the Frame menu, click Open Document in Frame. 3. Select a local file or enter a URL in the URL box and press Enter.
Using frames 89
Each time you open a document in a frame, Namo WebEditor sets the initial document for that frame to the opened document.
To view the initial document URL for a frame
1. 2.
Click inside the frame to make it active. (The active frame is shown with a blue border.) On the Frame menu, click Frame Properties.
The initial document URL is shown in the Source path box. -The initial document URL for each frame is stored in the frameset document. Therefore, to save the initial document URLs, you must save the frameset document (p.90).
Saving a frameset
To save a complete frameset, you need to save both the frameset document and the documents in the frames, if any of them are local files.
To save the frameset document
1. 2.
On the Frame menu, click Save Frameset. If you have not previously saved the frameset, type a file name and press Enter.
To save a document in a frame
1. 2. 3.
Click inside the frame to make it active. (The active frame is shown with a blue border.) On the File menu, click Save. If you have not previously saved the document, type a file name and press Enter.
To save documents in all frames
1. 2.
On the Frame menu, click Save All Frames. For each document that was not previously saved, type a file name and press Enter.
Previewing a frameset
When you are working on a frameset, the Preview tab that normally appears at the bottom of the main window is replaced by the Frameset Preview tab. Click this tab to preview the entire frameset.
90 Using frames
Printing a frameset
To view a print preview of a frameset
1. 2.
On the Frame menu, click Frameset Print Preview. When done, click Close.
To print a frameset
1. 2.
On the Frame menu, click Print Frameset. Choose the desired options and click OK.
To print the document in a particular frame
1. 2. 3.
Click inside the frame to make it active. (The active frame is shown with a blue border.) On the File menu, click Print. Choose the desired options and click OK.
Resizing frames
To resize a frame using the mouse
Drag a frame border. (The pointer should look like
or
before you begin dragging.)
To specify an exact width or height for a frame
1. 2. 3. 4.
Click inside the frame to make it active. (The active frame is shown with a blue border.) On the Frame menu, click Frame Properties. Enter a number in the Frame width or the Frame height box. Click the corresponding units box and select a unit: o Select Pixels to specify a size in pixels. The frame size will stay the same if the browser window is resized. o Select % to specify a size as a percentage of the width or height of the browser window. The frame size will vary in proportion to the browser window size. o Select *(relative) to specify a size in relation to the sizes of other frames. Only integer values are accepted.
About relative sizes
When you specify frame sizes in relative terms, the size values act as relative proportions. In the example below, Frame A has a relative height of 2, so it is twice as high as Frame B, which has a relative height of 1. Frame C has an absolute height in pixels. If only some frames have relative sizes while others have
Using frames 91
absolute sizes along the same dimension, then the relatively-sized frames share the space that remains after subtracting the space occupied by the absolutely-sized frames.
An example of relative frame sizing
-If you specify the width or height of one or more frames in pixels, it is a good idea to set the size of at least one other frame to *1 in the same dimension, so that it can shrink or grow as needed for different browser window sizes.
Adding and removing frames

Although the frameset templates included with Namo WebEditor cover the most common frame layouts, you may still need to add frames to or remove frames from a frameset in order to meet your design goals. To add a frame, you simply split an existing frame in two. Removing a frame causes an adjacent frame to grow, filling the space previously occupied by the removed frame.
To add a frame above or below an existing frame
1. 2.
Click inside the frame above or below which you want to add another frame. On the Frame menu, point to Split Frame, and then click Top or Bottom (depending on whether you want the new frame to be above or below the existing frame).
To add a frame to the left or right of an existing frame
1. 2.
Click inside the frame next to which you want to add another frame. On the Frame menu, point to Split Frame, and then click Left or Right (depending on whether you want the new frame to be to the left or to the right of the existing frame).
92 Using frames
Chapter 3: Laying Out Web Pages To remove a frame
1. 2.
Click inside the frame you want to remove. On the Frame menu, click Delete Frame, and then click OK.
-You cannot undo a frame add or remove operation using the Undo command. To restore a removed frame, close the frameset without saving and then reopen it. Note that any other changes you made to the frameset will be lost.
Setting a frame's default target

The target (p.151) attribute of a hyperlink is used to instruct browsers where to open the link's destination. For example, the target of a link might tell browsers to open the destination in a frame named "article_view". If not specified, the target of any hyperlink is the window or frame containing the link. In a frameset, however, it is often desirable to have the destinations of hyperlinks in one frame open in another frame. Although it is possible to manually set the target for each hyperlink in a frame, it is much more convenient to set a default target for the frame. If a frame has a default target, every hyperlink in that frame will open in the specified target frame unless the link has its own, different specified target.
To set the default target of a frame
1. 2. 3.
Click inside the frame to make it active. (The active frame is shown with a blue border.) On the Frame menu, click Frame Properties. In the Default target box, type the name of a frame. To select a frame visually, click Target Frame). (Select
Four special targets can be selected if you click the triangle on the Default target box: _blank Links will open in a new window. _parent Links will open in the frame's "parent", replacing the frameset. The parent is usually the browser window, but if the frameset is being displayed in a frame of another frameset, then the parent is the containing frame in the higher-level frameset. _self Links will open in the current frame. _top Links will open at the topmost level of the current window (replacing all framesets).
To override the default target for a specific hyperlink
1. 2.
Double-click the hyperlink. In the Target box, enter the name of a frame. To select a frame visually, click Frame). (Select Target
Using frames 93
Naming or renaming a frame

Each frame in a frameset can optionally have a name, which is used when referring to the frame in the target attribute (p.151) of a hyperlink or the default target setting (p.93) of another frame. If you create a frameset using one of the templates supplied with Namo WebEditor, each frame already has a default name (which you can change). However, if you add a frame to a frameset, the new frame initially has no name; if you want to use the frame as a link target, you need to give it a name.
To name or rename a frame
1. 2. 3.
Click inside the frame to make it active. (The active frame is shown with a blue border.) On the Frame menu, click Frame Properties. Enter a name in the Name box. The name must begin with a letter (A-Z or a-z).
Setting frame margins, scrollbars, and borders

You can adjust the left and top margins of a frame (the empty space between a frame's borders and its content) in pixel units. If you don't specify the margins, Web browsers apply their own default margins.
To specify the left or top margin of a frame
1. 2. 3.
Click inside the frame to make it active. (The active frame is shown with a blue border.) On the Frame menu, click Frame Properties. Enter a number of pixels in either or both of the Left margin and Top margin boxes.
You can specify for each frame in a frameset whether it should have scrollbars. The Auto setting means scrollbars will appear only when necessary.
To specify scrollbars for a frame
1. 2. 3.
Click inside the frame to make it active. (The active frame is shown with a blue border.) On the Frame menu, click Frame Properties. Click the Scrollbar box and select an option.
You can specify the width of the border around every frame in a frameset, and whether users can resize a frame by dragging its border.
To set the border width (applies to all frames)
1. 2.
On the Frame menu, click Frame Properties. Enter a number of pixels in the Border thickness box.
94 Using frames
Chapter 3: Laying Out Web Pages To specify whether a frame can be resized
1. 2. 3.
Click inside the frame to make it active. (The active frame is shown with a blue border.) On the Frame menu, click Frame Properties. Select or clear the Enable frame resizing in browser check box.
Modifying frameset document properties

Like any other Web document, a frameset document has various properties that apply to the document as a whole. However, most of the properties of a frameset document have no effect in Web browsers that support framesmost of the properties are only relevant when a browser does not support frames and thus displays the content of the frameset document itself rather than the frames it defines. Some properties of frameset documents do take effect, even when the frameset is opened in a browser that supports frames. These properties are listed below. In the General tab: o Title The frameset document's title is displayed in the browser's title bar. o Author, Classification, Description, and Keywords Although these properties have no effect in a browser, they can be used by Internet search engines to find and categorize the frameset document. In the Styles tab: o Page transitions The selected effect will occur when the frameset is opened. o Background sound The specified sound will play when the framset is opened. In the Advanced tab: o Auto refresh/redirect When the frameset is opened, the specified URL will be opened automatically after the specified length of time.
To modify frameset document properties
On the Frame menu, click Frameset Properties.
Adding "noframes" content

When a frameset is opened in a Web browser that does not support frames, the browser will instead display the content of the <noframes> element in the frameset document, if present. The <noframes> element can contain anything that an ordinary document can containtext, images, and so forth. When you create a frameset, Namo WebEditor automatically adds a brief message as the noframes content. To change the noframes content, click the NOFRAMES Content tab at the bottom of the main window and
Using frames 95
enter the desired content. (This tab is initially hidden. To reveal it, on the View menu, point to Mode Tabs, and then click Show All.) To save the noframes content, save (p.90) the frameset. -You cannot preview noframes content in Namo WebEditor's Preview mode. To preview your noframes content, open the frameset document in a browser that does not support frames.
96 Using frames
Using layers
In HTML, a layer is a container for other elements, such as paragraphs, images, tables, and so forth. Layers have two noteworthy properties: The position of a layer is explicitly specified. Layers can overlap each other and other elements.
You can think of a layer as a movable box that you put content into and that you can place anywhere on a page. Layers are a powerful, yet intuitive way to create complex page layouts, since you can put anything in a layer and simply drag the layer wherever you want.
An example of a layer overlapping other content
Creating and positioning a layer

To create a layer
1. 2.
Place the insertion point anywhere in the document. Click (Insert Layer) on the Standard Toolbar.
A new layer will appear above the paragraph that contained the insertion point, and the insertion point will be moved inside the layer. Note that the layer's ID and its size are displayed on the blue title bar just above ) will indicate the location of the the layer. If the display of special tag marks is enabled, a layer mark ( layer tag in the document.
Using layers 97
The new layer has a transparent background (p.103), so if there is any content below the point where you inserted the layer, it will be visible through the layer. By default, in Edit mode, layers are shown with gray outlines so that you can see their boundaries. This outline is not visible when the document is viewed in a browser. To hide layer outlines: On the View menu, point to Marks, and then click Layer Outlines. -The location of the layer tag has no relationship to the position of a layer. You can insert a layer tag anywhere in a document, and you can move the layer to any position, independently of the layer tag. However, note that deleting the layer tag deletes the layer. -If you find layer marks distracting, you can hide them: Click Standard Toolbar.
To position a layer
(Show/Hide Special Tag Marks) on the
1. 2.
Click inside the layer to reveal its handlethe small box at the top left corner of the layer. (The handle is only visible when the layer is selected or the insertion point is inside it.) Drag the handle. A dotted outline of the layer follows the pointer. Stop dragging when the layer is in the desired position.
Positioning a layer by dragging its handle
-You can also drag a layer by its outline. When the pointer is over the outline, it turns into a hand to indicate that dragging is possible.
To move a layer one pixel at a time
1. 2.
Click the layer's outline or layer mark to select it. Press any of the arrow keys. Each keypress will move the layer one pixel in the corresponding direction.
98 Using layers
Chapter 3: Laying Out Web Pages To specify the exact position of a layer
1. 2.
Click the layer's outline or layer mark to select it. On the Inspector, enter numbers representing the distance of the layer from the document's left and top edges, respectively, in the Left and Top boxes.
By default, layers are positioned with respect to the document's left and top edges. However, a layer can also be positioned horizontally with respect to the document's right edge, and vertically with respect to the document's bottom edge. The effect will be that the layer's position with respect to other content on the page will depend on how wide (or tall) the browser window is.
To position a layer horizontally with respect to the document's right edge
1. 2. 3.
Click the layer's outline or layer mark to select it. On the Inspector, click the first Position box and select Right. Position the layer as desired.
To position a layer vertically with respect to the document's bottom edge
1. 2. 3.
Click the layer's outline or layer mark to select it. On the Inspector, click the second Position box and select Bottom. Position the layer as desired.
You can also leave a layer's horizontal or vertical position unspecified. In this case, the layer's position on the relevant axis will be determined by the location of the point at which you inserted the layer into the document, like any other element. However, unlike other elements, the layer will still not affect the position of any content that follows it.
To leave a layer's horizontal or vertical position unspecified
4. 5.
Click the layer's outline or layer mark to select it. On the Inspector, click the first Position box (for horizontal position) or the second Position box (for vertical position) and select (do not specify).
-You can enter negative values for a layer's X and/or Y position. This will place the layer partially or completely outside the document boundaries. To reposition a layer that is completely outside the document boundaries, click the associated layer mark and enter a new position in the Inspector. You can tell at a glance whether a layer is positioned with respect to the document's top-left corner, its bottom-right corner, and so on. The small, square icon on the layer's title bar indicates the layer's positioning method. See the table below.
Using layers 99
Icon
Positioning (H/V) left / top right / top left / bottom right / bottom left / unspecified right / unspecified unspecified / top unspecified / bottom unspecified / unspecified
Resizing a layer
To resize a layer
1. 2.
Click the layer's handle or outline to reveal its resize handles. Drag any resize handle.
Resizing a layer
The layer title bar (the blue bar just above a layer when the layer is selected or contains the insertion point) shows the current size of the layer.
To specify an exact size for a layer
1. 2.
Click the layer's outline or layer mark to select it. On the Inspector, enter numbers of pixels in the Width and Height boxes. You can also specify the width or height as a percentage of its parent container.
If you hold down the Shift key while dragging a layer resize handle, the layer's size units will change from pixels to percentages or from percentages to pixels.
100 Using layers
Chapter 3: Laying Out Web Pages To adjust the size of a layer to fit its contents
1. 2.
Click the layer's outline or layer mark to select it. Do one of the following: o On the Format menu, point to Layout, and then click Fit to Contents. o On the Layout Toolbar, click (Fit to Contents).
-You can specify any width for a layer, but you cannot set its height so small that all of its contents would not fit vertically. Even if you enter the height value in the Inspector or in HTML mode, Namo WebEditor will automatically readjust the height to fit the layer's contents vertically. If you resize a layer by dragging its resize handles, Namo WebEditor will not allow the bottom boundary of the layer to be moved above the bottom of the layer's contents.
Adding content to a layer

To start adding content to a layer, click inside the layer to place the insertion point in it. You can put any kind of content into a layer that you can put into a documenttext, images, multimedia, tables, forms, and so forth. You can also use most of the same methods to insert content into a layer that you can with a document, including typing, pasting, and drag-and-drop. As you add content to a layer, its height will grow automatically to accommodate the content.
Deleting a layer
To delete a layer
1. 2.
Click the layer's outline or layer mark to select it. Press Del.
When you delete a layer, Namo WebEditor replaces it with an empty paragraph. This paragraph is safe to delete.
Setting a layer's Z-order

Since layers can overlap each other, it is sometimes necessary to specify exactly in what order several layers should overlap. You do this by specifying each layer's Z-index. Z-indexes are positive or negative integers. A layer with a higher Z-index will display on top of a layer with a lower Z-index. If two or more
Using layers 101
layers have the same Z-index, their relative Z-positions are determined by the order of their layer marks in the document (that is, the order of their layer tags in the document source): the layer with the last layer mark is topmost.
To set a layer's Z-order
1. 2.
Click the layer's outline or layer mark to select it. On the Inspector, enter a whole number in the Z-index box.
Setting a layer's initial visibility

You can specify that a layer be initially invisible when the document is opened in a browser. Later, a script (p.256) can make the layer visible as a result of some event (p.271), such as the user clicking a link. You can specify any of four initial states for the visibility of a layer:
Show: The layer is initially visible. Hide: The layer is initially invisible. Inherit: The initial visibility of the layer is the same as that of its parent element. Default: (same as Show)
To set a layer's initial visibility
1. 2.
Click the layer's outline or layer mark to select it. On the Inspector, click the Visibility box and select an option.
To select a hidden layer
Do one of the following: Click its layer mark. Click its name in the Layers window. (To open the Layers window: On the Window menu, click Panels and then select Layers.)
-Although a hidden layer is invisible, it still "takes up space" in one sense: If a hidden layer extends beyond the bottom or right edge of the browser window, the browser's scrollbar(s) will be enabled as if the layer were visible. If you wish to avoid this, you can set the layer's display property to "none" in HTML mode instead of using the Visibility option.
102 Using layers
Changing a layer's ID
Each layer in a document can have a unique ID, which is used to refer to the layer in a script (p.256). Namo WebEditor automatically generates unique IDs for layers when you create them: layer1, layer2, and so forth. You can change the ID of a layer, for example to give it an ID that better describes its function. An ID must begin with a letter and may contain letters, digits, hyphens, underscores, colons, and periods.
To rename a layer
1. 2.
Click the layer's outline or layer mark to select it. On the Inspector, type a new ID in the ID box.
Setting a background color or image on a layer

By default, layers have transparent backgrounds, allowing any document content or background "under" the layer to show through them. You can change this behavior and make a layer opaque by assigning it a background color or image.
To set a background color on a layer
1. 2.
Double-click the layer's outline or layer mark. Under Background, click the Color box and select a color (p.210).
To set a background image on a layer
1. 2.
Double-click the layer's outline or layer mark. Enter an image path or URL in the Image box.
-If you set a background image that is smaller than the layer, the image repeats to fill the layer by default. If you do not want the background image to repeat, switch to HTML mode and insert the background-repeat cascading style sheets property with a value of "no-repeat" in the layer's style attribute.
Setting borders, margins, and padding for a layer

To set borders, margins, and padding for a layer
1. 2.
Click the layer's outline or layer mark to select it. On the Format menu, click Borders & Background.
Using layers 103
Aligning and distributing multiple layers

You can align, distribute, and resize layers with respect to each other using the Layout Toolbar or the commands in the Layout submenu of the Format menu. To reveal the Layout Toolbar, in the View menu, point to Toolbars, and then click Layout.
The Layout Toolbar To align two or more layers with each other
1. 2.
Select each layer by clicking its outline while holding down the Shift key. Click one of the alignment buttons (the first six buttons) on the Layout Toolbar.
The layers will be aligned with respect to the last selected layer.
To evenly distribute three or more layers
1. 2.
Select each layer by clicking its outline while holding down the Shift key. On the Layout Toolbar, click (Space Across) or (Space Down).
-Overlapping layers cannot be distributed. Please make sure no layers overlap before using this command.
To make two or more layers the same size
1. 2.
Select each layer by clicking its outline while holding down the Shift key. On the Layout Toolbar, click (Make Same Width), (Make Same Height), or Size).
(Make Same
The layers will be resized to the same size as the last selected layer. If a layer has its horizontal position set to "do not specify", it cannot be horizontally aligned with another layer, because its horizontal position is determined by the content that comes before it. Similarly, a layer with unspecified vertical position cannot be vertically aligned with another layer.
Using the Layers window

The Layers window displays a list of the layers in the current document. You can see basic information about all the document's layers at a glance, and you can click an item in the list to select the corresponding layer or double-click an item to access the layer's properties.
104 Using layers
To open the Layers panel: On the View menu, point to Panels, and then click Layers.
The Layers window
The layer list includes the name, Z-index, and visibility attribute of each layer. If a layer is a child of another layer (that is, its layer mark is inside another layer), the name of the layer will appear indented under the name of its parent. Click an item in the list to select the corresponding layer. Double-click an item to open the Layer Properties dialog box for the corresponding layer. If you select the Layers snap to each other check box at the top of the window, then layers will "snap" to each other when you drag themthat is, when you drag a layer within six pixels of another layer, the layer you are dragging will move automatically so that its boundary touches the boundary of the stationary layer.
Deciding which tag to use for layers

By default, Namo WebEditor represents layers using <div> elements in the document's HTML source. This behavior conforms to the World Wide Web Consortium's HTML 4.01 recommendation and is well supported by contemporary browsers. However, versions of Netscape browsers earlier than 6 do not correctly support the <div> tag. To work around this problem, Namo WebEditor gives authors the option to use <layer> elements to represent layers. The <layer> tag is a Netscape-only tag that is supported by Netscape 4.x browsers. Unfortunately, the <layer> tag is not supported by Netscape 6 and later, and it is not supported at all by Internet Explorer and other browsers. Therefore, use caution when choosing the <layer> tag to represent layers. You should prefer the default <div> tag and use <layer> only in documents that are designed specifically for users of older Netscape versions. -There is no way to force all layers to use <layer> tags in one step. If you have more than one layer in a document and you want all of them to use <layer> tags, you must follow the steps given above for each layer.
Using layers 105
Using floating boxes

A floating box is a container for content around which other content flows. The effect of a floating box is to "push" the content following it to the side. In the example below, the dark text is inside a floating box; the light gray text is in paragraphs before and after the floating box. A gray border has been added to the floating box to highlight its boundaries.
A floating box example
Floating boxes can be aligned on either the left or the right side, but not the middle, of the parent container. Note that a floating box only "pushes aside" content that follows it, not content that precedes it.
Creating and positioning a floating box

To create a floating box
1. 2.
Place the insertion point in the (first) paragraph you want the floating box to float next to. On the Insert menu, click Floating Box.
An empty box with a gray outline will appear in front of the paragraph that contained the insertion point, and the insertion point will be moved inside the box. If the display of special tag marks is enabled, a ) will mark the location of the floating box element in the document. floating box mark ( By default, in Edit mode, floating boxes are shown with gray outlines so that you can see their boundaries. This outline is not visible when the document is viewed in a browser. To hide floating box outlines: On the View menu, point to Marks, and then click Layer Outlines.
106 Using floating boxes
-If you find floating box marks distracting, you can hide them: Click on the Standard Toolbar.
To position a floating box
(Show/Hide Special Tag Marks)
1. 2.
Select the floating box by clicking its outline. On the Inspector, click the Position box and select Left or Right.
To move a floating box
1. 2. 3. 4.
Select the floating box by clicking its outline. On the Edit menu, click Cut. (Or press Ctrl+X.) Place the insertion point at the beginning of the (first) paragraph you want the floating box to float next to. On the Edit menu, click Paste. (Or press Ctrl+V.)
-When you paste a floating box, Namo WebEditor inserts a blank paragraph above it. You can safely delete this empty paragraph.
Resizing a floating box

To resize a floating box
1. 2.
Click the floating box's outline to reveal its resize handles. Drag any resize handle.
When you finish dragging, the content surrounding the floating box will reflow around it.
Resizing a floating box To specify an exact size for a floating box
1. 2.
Click the floating box's outline to select it. On the Inspector, enter numbers of pixels in the Width and Height boxes.
Using floating boxes 107
-You can specify any width for a floating box, but you cannot set its height so small that all of its contents would not fit vertically. Even if you enter the height value in the Inspector, Namo WebEditor will automatically readjust the height to fit the floating box's contents vertically. If you resize a floating box by dragging its resize handles, Namo WebEditor will not allow the bottom boundary of the floating box to be moved above the bottom of its contents.
Adding content to a floating box

To start adding content to a floating box, click inside the floating box to place the insertion point in it. You can put any kind of content into a floating box that you can put into a document?text, images, multimedia, tables, forms, and so forth. You can also use most of the same methods to insert content into a floating box that you can with a document, including typing, pasting, and drag-and-drop. As you add content to a floating box, its height will grow automatically to accommodate the content.
Deleting a floating box

To delete a floating box
1. 2.
Click the floating box's outline or floating tag mark to select it. Press Del.
When you delete a floating box, Namo WebEditor may replace it with an empty paragraph. This paragraph is safe to delete.
Setting a floating box's initial visibility

You can specify that the contents of a floating box be initially invisible when the document is opened in a browser. Later, a script (p.256) can make the floating box contents visible as a result of some event (p.271), such as the user clicking a link. You can specify any of four initial states for the visibility of a floating box's contents:
Show: The contents are initially visible. Hide: The contents are initially invisible. Inherit: The initial visibility of the contents is the same as that of the floating box's parent element. Default: (same as Show)
-Even if the contents of a floating box are invisible, the floating box takes up space exactly as if its contents were visible.
To set a floating box's initial visibility
1. 2.
Click the floating box's outline or floating tag mark to select it. On the Inspector, click the Visibility box and select an option.
To select a hidden floating box
You cannot select a hidden floating box by clicking its outline, because the outline is also hidden. To select a hidden floating box, click the corresponding floating box mark. (If the display of special tag marks is off, (Show/Hide Special Tag Marks) on the Standard Toolbar.) The floating box will turn it on by clicking become temporarily visible as long as it is selected.
Setting a background color or image on a floating box

By default, floating boxes have transparent backgrounds, allowing the document's background to show through them. You can change this behavior and make a floating box opaque by assigning it a background color or image.
To set a background color on a floating box
1. 2.
Double-click the floating box's outline or floating tag mark. Under Background, click the Color box and select a color (p.210).
To set a background image on a floating box
1. 2.
Double-click the floating box's outline or floating tag mark. Enter an image path or URL in the Image box.
-If you set a background image that is smaller than the floating box, the image repeats to fill the floating box by default. If you do not want the background image to repeat, switch to HTML mode and insert the background-repeat cascading style sheets property with a value of "no-repeat" in the floating box's style attribute.
Using floating boxes 109
Setting borders, margins, and padding for a floating box

To set borders, margins, and padding for a floating box
1. 2.
Click the floating box's outline or floating tag mark to select it. On the Format menu, click Borders & Background.
Using a tracing image

Namo WebEditor can display a tracing image on a document that you are editing. A tracing image is an image that is displayed "under" the content of a document while you are editing it but that does not appear when the document is viewed in a browser. By designing your document on top of a tracing image, you can make it easier to conform to a certain layout: for example, you might draw a rough sketch for a page layout with pencil and paper, scan the drawing into your computer, open the drawing as a tracing image for a blank document, and then build up the document's layout on top of the tracing image. Similarly, you might take a "screenshot" of a finished Web page for which you don't have access to the source code (or don't want to use the source code) and use it as a tracing image. When you set a tracing image, Namo WebEditor inserts a custom attribute on the <body> tag of the document. Since the custom attribute is not standard HTML, browsers safely ignore it. Also, tracing images are not uploaded to your remote Web site when you publish documents that use them. You can set the opacity of a tracing image from 0% to 100%. Reducing the opacity makes it easier to distinguish actual document content from the tracing image, but it makes the tracing image harder to see. You can also specify its offset from the top left corner of the document, in case you want to place the tracing image at a different position.
To set a tracing image
1. 2. 3. 4. 5.
On the Edit menu, click Tracing Image. The Document Properties dialog box will open to the Tracing Image Settings tab. Enter the path of the image file to use as the tracing image. Only local paths are supported; images on the Web will not work. Specify the opacity of the tracing image with the Transparency slider. Specify the offset of the tracing image from the top left corner of the document, in pixels. Leave the X and Y values at 0 if you want the tracing image to start exactly at the top left corner. Click OK.
4 Basic Page Content and Formatting

Multimedia and Dynamic HTML may be all the rage these days, but the most important content Web content still consists of the basics: text and images. Just as basic, and just as important, are the hyperlinks that connect everything on the Web. Another standard feature of many Web pages is tables, which give authors a way to present complex information in an organized and easy-to-read way. In this section, we'll take a look at all of these basic Web elements, along with ways to control the way they look in the browser window.
In this section Text elements ............................................................................................... p.112 Images.......................................................................................................... p.119 Hyperlinks and bookmarks .......................................................................... p.146 Tables........................................................................................................... p.161 Formatting content ....................................................................................... p.189 Document properties .................................................................................... p.214
111
Text
On the Web, not all text is created equal. Like a book, a Web page can contain not only ordinary paragraphs but also headings, bulleted or numbered lists, and so forth. Fortunately, HTML includes several kinds of text elements for different purposes. It's important to use the right kind of element for the job.
Paragraphs
Paragraphs are the most basic text elements in HTML. A paragraph is a block of text (although it may also include images and other inline elements) that, by default, has no special formatting. Whenever you enter text (by typing or pasting) in Edit mode without applying a particular HTML style, Namo WebEditor automatically creates a paragraph element to contain the text. Pressing Enter completes the current paragraph and starts another. By default, paragraphs are separated from each other and other elements by white space above and below. The exact size of this space is determined by the Web browser unless you specify a particular top and/or bottom margin (p.200). -To start a new line of text without starting a new paragraph, press Shift+Enter.
To modify common paragraph properties:
On the Format menu, click Paragraph.
Headings
A heading is a text block that is generally used as a title or label for content that follows it. For example, the word "Headings" above is the heading for this section of the Namo WebEditor documentation. HTML provides six heading levels, intended to distinguish different levels of content in a hierarchically-organized document. By default, browsers typically display headings in bold type. Level-1 headings use the largest font size, and successive heading levels use successively smaller font sizes. As with other text elements, all visual properties of headings can be altered using cascading style sheets (p.189).
To create a heading:
1. 2. 3.
Place the insertion point in an empty line. On the Inspector or the Formatting Toolbar, click the Element box and select any of Heading 1 through Heading 6. Type the heading.
112 Text
Chapter 4: Basic Page Content and Formatting To change the level of a heading:
1. 2.
Place the insertion point in the heading whose level you want to change. On the Inspector or the Formatting Toolbar, click the Element box and select any of Heading 1 through Heading 6.
To change a paragraph or other text element into a heading:
1. 2.
Place the insertion point in the text element you want to change to a heading. On the Inspector or the Formatting Toolbar, click the Element box and select any of Heading 1 through Heading 6.
Lists
A list in HTML is composed of two or more consecutive blocks of text (the list items) that have bullets or numbers automatically inserted at the beginning of each item. Items in ordered lists are preceded by numbers, while items in unordered lists are preceded by bullets. A list item may itself contain a list, thus allowing lists to be nested hierarchically.
A numbered (ordered) list. The third item contains a bulleted (unordered) list. In Edit mode, the beginning of each list is marked with a red arrow.
Creating lists
To create a numbered or bulleted list:
1. 2. 3. 4.
Place the insertion point in an empty line. On the Inspector or the Formatting Toolbar, click the Element box and select Bulleted List or Numbered List. Enter the text of each list item, pressing Enter after each item. Press Enter twice to exit the list.
Text 113
Namo WebEditor 2006 User Manual To convert paragraphs into a list:
1. 2.
Select the paragraphs you want to convert into a list. On the Inspector or the Formatting Toolbar, click the HTML Style box and select Bulleted List or Numbered List.
Creating nested lists

A list item can itself contain a list. Such a list-within-a-list is called a nested list. List items can be promoted (moved from a nested list to its parent list) or demoted (moved from a parent list to a nested list).
To create a nested list:
1. 2. 3.
Press Enter inside a list to start a new list item. On the Inspector or the Formatting Toolbar, click (Increase Indent). Enter the items of the nested list, pressing Enter after each item.
To promote a nested list:
1. 2.
Place the insertion point in the first item of the nested list. On the Inspector or the Formatting Toolbar, click (Decrease Indent).
To promote or demote one list item:
1. 2.
Place the insertion point in the list item you want to promote or demote. On the Inspector or the Formatting Toolbar, click (Increase Indent) or
(Decrease Indent).
Splitting and merging lists

A list can be split into two lists, and two consecutive lists can be joined into one list.
To split a list into two lists:
1. 2.
Place the insertion point in the list item you want to become the first item in the second list. On the Format menu, click Split List.
To merge two consecutive lists:
1. 2.
Place the insertion point in the first item of the second list. On the Format menu, click Merge Lists.
114 Text
Chapter 4: Basic Page Content and Formatting
Modifying bullets and numbering

HTML provides some control over numbering and bullet styles in lists. For numbered lists, the number format (e.g., 1-2-3 or I-II-III) can be changed for the whole list or for individual items. Also, the starting number of a numbered list can be changed, and the number sequence can be reset at any point in the list. For bulleted lists, the bullet style can be changed from the default disc to a square or a circle.
To change between bulleted and numbered lists:
1. 2.
Select the entire list. On the Inspector or the Formatting Toolbar, click (Bulleted List) or (Numbered List).
To change the number format or bullet type of a list:
1. 2. 3.
Select the entire list. On the Format menu, click List. Click the Style box and select a bullet type or number format.
To change the number format or bullet type of a single list item:
1. 2. 3.
Place the insertion point in the desired list item. On the Format menu, click List. Click the Style box and select a bullet type or number format.
To change the starting number of a numbered list:
1. 2. 3.
Select the entire list. On the Format menu, click List. Enter a number in the Start at box.
To reset the numbering sequence within a numbered list:
1. 2. 3.
Place the insertion point in the desired list item. On the Format menu, click List. Enter a number in the Start at box.
-Cascading style sheets offer greater control over bullet and number styles for lists and list items than HTML alone does. See list-style in the CSS reference for more information.
Using an image as a bullet

You can use an image file as a bullet in bulleted lists. The list in the example below uses small, diamondshaped images as the bullets.
Text 115
To use an image bullet for a whole list or selected list items:
1. 2. 3. 4.
Select the whole list or some list items. On the Format menu, click List. Under Type, click Image. In the Image path box, enter the path or URL to the image file.
Preformatted text
When displaying text, Web browsers normally compress multiple consecutive spaces into a single space and "wrap" paragraphs at the edge of the window so users don't have to scroll horizontally to see a whole paragraph. This behavior is usually convenient for both authors and users, but there are casessuch as poetry and code sampleswhere text needs to be displayed exactly as entered by the author. To accommodate such cases, HTML includes an element type called preformatted text. Preformatted text elements are text blocks that browsers display exactly as given in a document's source code. Multiple spaces are not compressed, and long lines are not wrapped at the window edge. Additionally, most browsers display preformatted text in a monospaced font by default, although you can specify any font you wish.
Preformatted text compared to normal text. To create a preformatted text element
1. 2. 3.
Place the insertion point in an empty line. On the Inspector or the Formatting Toolbar, click the Element box and select Preformatted text. Enter the text. To start a new line, press Enter.
116 Text
4.
When done entering preformatted text, press Ctrl+Enter to start a normal paragraph.
To convert paragraphs to preformatted text
1. 2. 3.
Select the paragraphs to convert to preformatted text. On the Inspector or the Formatting Toolbar, click the Element box and select Preformatted text. Click Yes if you want each paragraph to be converted into an individual preformatted text element; click No if you want all the paragraphs to be converted into a single preformatted text element with line breaks between the former paragraphs.
To change the font of some preformatted text
1. 2.
Select some preformatted text. On the Inspector or the Formatting Toolbar, click the Font box and select a font.
To change the font of all preformatted text in a document
1. 2. 3. 4. 5.
On the Format menu, click Define Styles. Click (Add). Click the Element box, select pre, and click OK. Click the Font box and select a font. If desired, specify other font properties such as size and style. Click OK.
-If you enter preformatted text in HTML mode, any line breaks within the <pre> element are preserved and displayed as entered.
Addresses
In HTML, an address element can be used to contain street addresses and other contact information. Address elements behave just like ordinary paragraphs, except that browsers typically display them in italics and without top and bottom margins, by default.
Address text compared to normal text.
Text 117
Namo WebEditor 2006 User Manual To create an address element
1. 2. 3. 4.
Place the insertion point in an empty line. On the Inspector or the Formatting Toolbar, click the Element box and select Address. Enter the address, pressing either Enter or Shift+Enter to begin new lines. When done, press Enter to begin a new line, click the Element box, and select Paragraph.
Definition Lists
In HTML, a definition list is a list of terms and their definitions. The list consists of one or more pairs of special block elements: the term and the definition. Unlike ordinary paragraphs, browsers usually render terms and definitions with no top or bottom margin, and definitions are indented.
A definition list with two pairs of term and definition. Boldface has been added to the terms. To create a definition list
1. 2. 3. 4. 5. 6. 7.
Place the insertion point in an empty line. On the Inspector or the Formatting Toolbar, click the Element box and select Defined Term. Enter the first term and press Enter. Click the Element box and select Definition. Enter the first definition and press Enter. Enter additional terms and definitions, following steps 2 through 5. When done, press Enter one last time to close the definition list.
118 Text
Images
Perhaps one of the most important reasons for the rapid rise in popularity of the Web since the mid-1990s is the inline image. By allowing authors to place photographs, illustrations, and other graphical content directly on the page next to text content, inline images turned bland text-only sites into the visually rich showcases that we take for granted today. The term inline image refers to an image that appears embedded in a Web document, rather than viewed separately as the result of clicking on an image file link. In this section, we'll see how Namo WebEditor makes inserting inline images as easy as possible and take a look at various things you can do with an image once it is in a Web document.
About Web images

How Web documents use images
When you insert an image into a Web document, the image datathe bits and bytes that represent the imageare not stored in the document. Instead, the Web document contains a link to the image. Like any Web link, an image link can refer to a file that is in the same folder as the document itself, or in a different folder, or on a different Web site altogether. For example, the link to the image in the document fragment below:
The African bee
is a feisty little critter.
might look like this in the document's HTML source: <p>The African bee <img src="images/bee.jpg"> is a feisty little critter.</p> In the example above, the image file (bee.jpg) resides in an "images" subfolder in the same folder as the document.
Images 119
When you publish a Web document, make sure to upload any image files that are used by the document in addition to the document itself. You should also make sure that the image files have the same path relative to the document on the Web server that they do on your local file system. If your document is part of a local site, Namo WebEditor takes care of these details for you.
Web image formats

The term image format commonly refers to the method by which an image is stored as a computer file. A variety of image formats are used on the Web; Namo WebEditor supports the most common ones. There are two broad classes of image formats: bitmap and vector-based.
Bitmap images
A bitmap image file stores an image as a two-dimensional array of pixels (dots). Each pixel has a certain color, represented by a number. An 8-bit image uses 8-digit binary numbers to represent colors, so each pixel can have any of 256 (2^8) possible colors. 16-bit and 24-bit images use larger numbers and thus can represent finer color distinctions for more accurate color rendition. The pixels that make up a bitmap image become obvious when magnified, as in the image below.
A bitmap image magnified to 400%
The bitmap image formats supported by Namo WebEditor are: GIF The Graphics Interchange Format (GIF) is probably the most common image format in use on the Web. GIF images are fairly compact because they are limited to 8-bit color and use lossless compression, which compresses repetitive visual information without discarding it. GIF is most appropriate for simple images with few colors, such as bullets and other design elements. GIF files use a .gif file name extension. All modern visual browsers support GIF.
120 Images
A special feature of GIF, not shared by the other common image formats, is that a GIF file can actually contain more than one image. In such animated GIF files, multiple images are displayed sequentially, as in a movie. JPEG The Joint Photographic Experts Group (JPEG) format is most commonly used for photographic images. Since it uses 24 bits to represent the color of each pixel, JPEG's color fidelity is much higher than that of GIF. JPEG uses lossy compression to keep file sizes downthis means that visual information is selectively discarded while maintaining as much fidelity as possible. When you save an image in JPEG format, you choose a quality level: the lower the quality level, the more information is discarded and the smaller the file size. JPEG files use a .jpg or a .jpeg file name extension. All modern visual browsers support JPEG. PNG The Portable Network Graphics (PNG) format is a relatively new image format that combines some of the strengths of GIF and JPEG. Like GIF, it uses lossless compression; but like JPEG, PNG supports 24-bit color (and even higherup to 48-bit color). Another strength of PNG is its support for alpha channels, which allow authors to assign a transparency level to any pixel. These features make PNG an excellent format for image editing and archival. However, high-color (24bit or higher) PNG images can have very large file sizes, so it is advisable to use PNG in Web documents only for low-color applications. PNG files use a .png file name extension. Most modern visual browsers support PNG.
Vector-based images
Rather than storing a bunch of pixels, a vector-based image stores an image as a set of mathematical descriptions of lines, curves, and fills. It could be said that a vector-based image stores a description of the image, rather than the image itself; the image "unfolds" when a program, such as a Web browser, interprets the description and renders the image. So, for instance, a circle would be described by its center coordinates, its radius, and the thickness and color of its curve, instead of being stored as an array of pixels.
Images 121
Examples of vector-based images. The screen captures on the right reveal the lines and curves that make up each image.
The mathematical nature of vector-based images makes them ideal for line art and illustrations, but illsuited to photographic images, for which a mathematical description would be extremely complicated and take up far more space than simply storing the pixels. However, some vector image formats support mixing vector-based content with bitmap content, taking advantage of the strengths of each. Unfortunately, no vector-based image format is universally supported by current browsers, limiting the usefulness of vectorbased images for the Web (although the recently-developed SVG format is rapidly gaining acceptance, thanks to the wide availability of browser plugins to view SVG images). Namo WebEditor has its own vector-based format, called TNG. Based on SVG, TNG is the format used by Namo WebEditor's Smart Clipart (p.232) (editable vector-based graphic elements). Some versions of Namo WebEditor 2006 include a standalone TNG editor, Namo WebCanvas, which can be used to create and edit Smart Clipart. WebCanvas can also export images to SVG format. To work around the lack of universal browser support for vector-based images, Namo WebEditor automatically rasterizes each TNG image to bitmap format. When you publish a document containing TNG images to the Web, the rasterized versions of the images are what is displayed by browsers. However, the TNG versions are retained in encoded form in the document's source code, so you can edit the images at any time.
Viewing estimated load times

A document that contains many or large images can take much longer to open in a browser than one with few or small images, especially over a slow Internet connection. When designing a document that use images or multimedia files, you should consider the probable load time for your target audience. Unless all
122 Images
of your users will load your document over a local area network or fast broadband connections, consider keeping the total size (in kilobytes) of all the resources in the document down to a level that will allow comfortable viewing by users with slow Internet connections. To view information about the total size of the resources used in a document: On the File menu, click Document Properties, and then click the Advanced tab. The same dialog box also displays estimated load times for various connection speeds. Click the Connection speed box to select a speed, and the estimated transfer time will be updated.
Inserting images
Namo WebEditor provides various ways to insert images into Web documents. In addition to image files on the local file system, you can use images copied from other programs, images on the Web, or any of the thousands of images in the clip art library included with Namo WebEditor. -Whenever you insert an image from a location other than the folder containing the document, or a subfolder of the document's folder, the next time you save the document, Namo WebEditor will ask whether you want to copy the image file to the document's folder. To avoid problems when you publish the document later, it is a good idea to let Namo WebEditor copy the image. For more information, see Saving a document with images, p.126.
Inserting an image from a local file

Much of the time, images you insert into your Web documents will come from your local file system, such as photographs you have taken with a digital camera or artwork you have created in a paint program. Namo WebEditor supports most popular image file types, including GIF, JPEG, PNG, and BMP.
To insert an image from a local file
1. 2.
Place the insertion point where you want to insert the image. Do one of the following: o o (Insert Image) on the Standard Toolbar. Click Press Ctrl+Shift+I. (Browse), select an image file,
3. 4.
In the Image path box, enter the path of the image file; or click and click Open. Click OK.
-The Open dialog box, which appears when you click the (Browse) button in the Image Properties dialog box, initially shows only GIF, JPEG, and PNG files. To show other types of image files, click the Files of type box and select All Files.
Images 123
-You can also insert a local image file by dragging it into the document window from Windows Explorer and clicking Insert File or Image.
Inserting an image from the clip art library

Namo WebEditor comes with a library of ready-made clip art images that you can use in your Web documents.
To insert an image from the clip art library
1. 2.
Place the insertion point where you want to insert the image. Do one of the following: o On the Insert menu, point to Image, and then click Clip Art. (Insert Clip Art) on the Standard Toolbar. o Click In the left pane, select the category and subcategory containing the desired type of image. In the right pane, select the desired image. Click OK.
3. 4. 5.
-You can also insert a clip art image by dragging it into the document window from the Resource Manager (p.35) and clicking Insert File or Image.
Inserting an image from the current site

If you are working with a local site and need to insert an image that is already in use anywhere in the site, you can select it from a list of site images instead of having to specify the image location explicitly. This can save time when you frequently reuse images in the same site.
To insert an image from the current site
1. 2.
Place the insertion point where you want to insert the image. Do one of the following: o o (Insert Image) on the Standard Toolbar. Click Press Ctrl+Shift+I.
3. 4. 5.
(Site) button to the right of the Image path box. Click the Select the desired image and click OK. Click OK again.
124 Images
Inserting an image from the Web

There are two ways to insert an image directly from the Web into a Namo WebEditor document: you can paste the image from a Web browser, or you can manually specify an image URL.
To paste an image from a Web browser
1. 2. 3. 4.
In the Web browser, right-click the desired image and click Copy. Switch to Namo WebEditor. Place the insertion point where you want to insert the image. Press Ctrl+V or click (Paste) on the Standard Toolbar.
To insert an image from a URL
1. 2.
Place the insertion point where you want to insert the image. Do one of the following: (Insert Image) on the Standard Toolbar. o Click o Press Ctrl+Shift+I. In the Image path box, enter the URL of the desired image (for example, http://www.example.com/example.gif). Click OK.
3. 4.
-When you save a document after insert an image from the Web in it, Namo WebEditor will suggest that you copy the image (p.126) to the document's folder. If you copy the image as suggested, the image source will become the local copy and will no longer be the original copy on the Web. If you do not copy the image to a local folder, the image source will remain the original copy on the Web, even after you publish the document.
Pasting an image from another program

Most graphics programs and some other types of programs support using the Windows clipboard to copy and paste images. You can take advantage of this fact to paste an image from a graphics program into a Namo WebEditor document, without having to save it in a file first. As long as the graphics program places the image on the clipboard in bitmap format, you can paste it into Namo WebEditor. When you paste the image, Namo WebEditor will save it as a GIF, JPG, or PNG file in the location you specify.
To paste an image from another program
1. 2. 3.
In the other program, use the appropriate command to copy the desired image to the clipboard. Switch to Namo WebEditor and place the insertion point where you want to insert the image. Press Ctrl+V or click (Paste) on the Standard Toolbar.
Images 125
4. 5. 6.
(optional) In the Save as box, enter the path and file name for the image file to be saved. Click the button corresponding to the desired format (p.120) for the image file and specify the desired options for the chosen format. Click OK.
Saving a document with images

When you insert an image into a Web document, the image itself is not actually saved in the document. Instead, an image tag is inserted into the document's HTML source code, and this tag specifies the location of the image file. The location might be specified in one of the following ways: as a relative path from the document's location to the image file's location (on the same drive) as a file-type URL (p.147) containing an absolute path to the image file, if it is on another drive or in a network folder as an Internet URL, if the image is on a Web site
When you open the document in a browser, the browser reads the image tag, finds the image file at the specified location, loads the image, and displays it in the document. This system of storing image files separately from the documents that use them generally works very well and allows for great flexibility, but it can lead to problems when you publish (p.347) a document that uses images, if you are not careful. These problems generally fall into three types: If you inserted an image from a folder on the same drive as the document, you must make sure to upload the image to the same relative location on the remote site (relative to the document). Otherwise, the image will not display. If you inserted an image from a different drive or from a network folder, the image will not display because the absolute path that specifies its location will be invalid with respect to the remote site's file system. If you inserted an image using an Internet URL, your users' Web browsers will always retrieve the image from that URL rather than from your own site. This can cause bandwidth problems for the site hosting the image and can lead to complaints from that site's owners if you did not receive permission to host the image on their site.
To help avoid such problems, when you first save a document after inserting one or more image files, Namo WebEditor may display the following dialog box, which lets you decide how Namo WebEditor should handle the newly inserted images:
126 Images
The Resource File Handling dialog box
The four options file handling options are described below:

Copy the files to the document folder: If you choose this option, Namo WebEditor will copy the images to the document's own folder and convert the image URLs to just the images' file names. (This is the default option.) Maintain existing URLs to the original file locations: If you choose this option, Namo WebEditor will not copy the images, and it will leave the existing image URLs as they are. Use relative URLs to the original file locations: If you choose this option, Namo WebEditor will not copy the images, but it will convert any absolute URLs to relative URLs wherever possible. (Note that file-type URLs pointing to files on another drive or a network folder cannot be converted to relative URLs.) Copy the files to another folder or choose action for each file: If you choose this option, Namo WebEditor will open the Resource File Manager dialog box, allowing you to specify another folder to which to copy all the images or to specify an action independently for each image.
In most cases, you should choose the default option, allowing Namo WebEditor to copy the image files to the document folder. This way, you can make sure the document does not contain any file-type URLs that will not work on the Internet. If the document includes images inserted from another drive or a network folder, it is strongly recommended that you choose either the first or the third option. -If you choose to copy an image file to the document folder, and you later remove the image from the document, Namo WebEditor will not delete the copied image file.
Images 127
Setting an image's display size

You can specify that an image display at a certain size other than its true size. Changing its display size does not actually modify the image in any way. Note that when you change the display size of a bitmapped image (p.120)especially when you increase its display sizethe image may appear blocky or pixellated. You can set an image's display size visually, by dragging its resize handles; or precisely, by entering pixel or percentage values in the Inspector or a dialog box.
The size indicator below this resized image shows both its actual size and its specified display size.
If you find image size indicators distracting, you can hide them. On the View menu, point to Marks, and click Image Info Bars.
About image size indicators
When an image is selected in Edit mode, its size is displayed in a light blue bar just under the image. Normally, only the image's actual size in pixels is shown on this indicator. However, if you have specified a display size, the display size is also shown, and the actual size is shown in parentheses.
To set an image's display size visually
1. 2.
Click the desired image. Do any of the following: o To reduce or enlarge the image while keeping its original proportions, drag any of the resize handles at the four corners of the image. o To reduce or enlarge the image without regard to its original proportions, drag any of the resize handles at the four corners of the image while holdiing down the Shift key. o To increase or decrease the width or height of the image, drag any of the resize handles centered on the sides of the image.
-When you place the mouse pointer over a resize handle, it will change to a double-arrow shape to indicate that you can click and drag to resize.
128 Images
Chapter 4: Basic Page Content and Formatting To set an image's display size as numbers of pixels
1. 2.
Click the desired image. On the Inspector, enter numbers of pixels in the Width and Height boxes.
To set an image's display size as a percentage of the available space
1. 2.
Click the desired image. On the Inspector, enter percentage values in the Width and Height boxes.
-When you specify an image's display size in percentage terms, the percentages are usually relative to the available spacethat is, the size of the image's parent container. However, when the image's parent container is something that has no defined vertical size, such as the entire document body, browsers may interpret a percentage height as being relative to the image's width. -If the Inspector is hidden, you can also specify an image's display size in the Image Properties dialog box. To open it, double-click the image. -To restore an image to its true size, click the Image Properties dialog box. button on the Inspector or Restore Original Size in the
-Some browsers, such as Internet Explorer 6, may automatically adjust the display size of images that are too large to fit in the browser window.
Setting an image's alignment

By default, the bottom of an inline images is aligned with the bottom of the line of content it is on. However, you can specify a different vertical alignment; for example, you can align the top of the image with the top of the line. Alternatively, you can specify that the image be forced to left or right side of the paragraph it is in and that other content after the image "flow" around it. Examples of each of the alignment options are shown below.
Images 129
To set an image's alignment
1. 2.
Click the desired image. On the Inspector, click the Alignment box and select the desired alignment option.
-If the Inspector is hidden, you can also specify an image's alignment in the Image Properties dialog box. To open it, double-click the image.
Setting image margins and borders

An image margin refers to empty space around the image. Normally the size of the margins is controlled by the browser, but you can specify the horizontal and/or vertical margins explicitly (in pixels) using the Inspector. Images can also have visible borders, although they have none by default. You can specify a uniform, solid border of a specific thickness (in pixels) around an image using the Inspector. If you need to specify margins and/or borders independently for any or all of the four sides of an image, you can do so using the Borders & Background command on the Format menu.
130 Images
Chapter 4: Basic Page Content and Formatting To set an image's horizontal and vertical margins
1. 2.
Click the desired image. On the Inspector, enter a number of pixels in either or both of the Horz. spacing and Vert. Spacing boxes, and then press Enter.
To set margins independently for each side of an image
1. 2. 3.
Click the desired image. On the Format menu, click Borders & Background. In the border selection box, select the side for which you want to set the margin. To select multiple sides at once, click each while holding down the Ctrl key. (See the examples below.) To select all four sides, click Select All. To deselect all sides, click in the middle of the box. By default, all four sides are selected.
Click a side to select it.
Click while holding down Ctrl to select multiple sides.
4. 5. 6.
Enter a number in the Margin box and then click the unit box next to it and select a unit. If you do not specify a unit (p.209), the value will be interpreted as pixels. Repeat steps 3 and 4 if you want to set a different margin size for another side. Click OK.
To set a uniform image border
1. 2.
Click the desired image. On the Inspector, enter a number of pixels in the Border box and press Enter.
To set borders independently for each side of an image
1. 2. 3.
Click the desired image. On the Format menu, click Borders & Background. In the border selection box, select the side for which you want to set the border. To select multiple sides at once, click each while holding down the Ctrl key. (See the examples below.) To select all four sides, click Select All. To deselect all sides, click in the middle of the box. By default, all four sides are selected.
Images 131
4. 5. 6. 7. 8.
Click the Style box and select a border style. Click the Color box and select a color (p.210). In the Width box, enter a number and then click the unit box next to it and select a unit. If you do not specify a unit (p.209), the value will be interpreted as pixels. Repeat steps 3 through 6 if you want to set a different border for another side. Click OK.
-If the Inspector is hidden, you can also set an image's margins and border in the Image Properties dialog box. To open it, double-click the image.
Adding alternative text to an image

Not all users can view images in Web documents. Some users use aural or other non-visual browsers, and some users disable images in visual browsers to reduce page load times. For these users, it is useful to supply a text description of an image that will stand for the image itself. Such text is called alternative text or alt text. Most visual browsers also display alt text when a user holds the mouse pointer over an image, possibly providing useful information about the image for ordinary users.
To add alternative text to an image
1. 2. 3.
Click the desired image. On the Inspector, in the Alt text box, type a brief description of the image. Click OK.
-When you insert an image from the clip art library or by dragging an image file from Windows Explorer, Namo WebEditor automatically add the image file name as alt text. -Do not add alt text to images that are merely decorative.
132 Images
-If the Inspector is hidden, you can also set an image's alt text in the Image Properties dialog box. To open it, double-click the image.
Specifying an alternative low-resolution image

Over slower Internet connections, loading a large image can take a significant amount of time. To give users something to look at while a large image is loading, you can specify an alternate, low-resolution image that browsers will load first. When the primary image has finished loading, it will replace the lowresolution image.
To specify an alternative low-resolution image
1. 2. 3. 4.
Double-click the desired image. Click the Advanced tab. In the Low res img box, enter the path of the low-resolution image, or click and select the low-res image file. Click OK. (Browse) to locate
-Most browsers do not support alternative low-resolution images. They begin loading the primary image immediately.
Creating an image rollover effect

In a rollover effect, one image is replaced by another when a user "rolls" the mouse pointer over the original image. The transition takes place when the mouse pointer enters the bounds of the original image; when the mouse pointer exits the bounds of the second image, the original image is restored. The most common use of rollover effects is to provide visual feedback when the user moves the pointer over an image that serves as a button. The button looks different when the pointer is over it, indicating that the image is indeed a button that can be clicked.
To create a rollover effect on an image
1. 2. 3.
Double-click the desired image. Click the Rollover tab. In the Second image path box, enter the path of the replacement image, or do one of the following: o o Click Click (Browse) to find and select an image file from your local file system. (Clip Art) to select an image from the clip art library.
Images 133
4. 5.
Click (Site) to select from a list of image files belonging to the current local site (if one is open). To preview the rollover effect, move the mouse pointer over the Preview pane. Click OK. o
To remote a rollover effect on an image
1. 2. 3.
Double-click the desired image. Click the Rollover tab. Click Remove Rollover, and then click OK.
Applying image effects

With Namo WebEditor's Image Effects tools, you can modify and apply effects to images in your Web documents in a variety of ways. You can: Crop and resize images Rotate and flip images Adjusting brightness, contrast, and sharpness Add text on an image Draw lines, rectangles, or ovals on an image Draw on an image with a freehand pencil or paintbrush Erase parts of an image with a freehand eraser Add a frame around an image Add a drop-shadow or beveled-edge effect
To apply an image effect, right-click the image, point to Image, and click Image Effects. You can apply more than one modification or effect without closing the dialog box. Effects are cumulative. To undo the (Undo). To reset the image to its original state, click Reset. After applying the last applied effect, click desired modifications and effects, click OK. When you click OK to save your changes, Namo WebEditor will prompt you for the path and file name under which to save the modified image. If you use the original path and file name, the original image file will be permanently replaced. If you do not want the original image file to be replaced, change the path and/or the file name. For information about a particular modification or effect, see the individual subsections within this section. -If you save the modified image under the same path and file name as the original image, you will not be able to undo the modifications.
134 Images
Cropping and resizing images

To "crop" an image is to remove unwanted portions of it. When you crop an image, you draw a rectangle around the part you want to keep, and then remove the areas around the rectangle. Resizing an image means simply making it bigger or smaller. Unlike changing an image's display size
(p.128), this operation permanently modifies the image itself. To crop an image
1. 2.
Select the image you want to crop. Do one of the following to open the Image Effects dialog box: o Right-click the image, point to Image, and then click Image Effects. o Click (Image Effects) on the Image Toolbar. (Crop). A rectangle with resize handles will appear around the image. On the toolbar, click Click and drag any of the resize handles so that the rectangle defines the area you want to keep. To preserve the rectangle's proportions while you size it, hold down the Shift key while dragging a corner handle. You can move the cropping rectangle by clicking inside and dragging. To start over, (Cancel Crop/Resize) and then click (Crop) again. click (Accept Crop/Resize). When the cropping rectangle surrounds the area you want to keep, click Click OK. In the Save as box, enter the path and file name under which to save the modified image. Initially, the box contains the original image's path and file name; if you want to replace the original image file, leave the path and file name unchanged. Under Save format, select the desired image format (p.119). Click OK.
3. 4.
5. 6. 7.
8. 9.
-To make the cropping area an exact size in pixels, enter the desired width and height in the W and H boxes on the toolbar. Then, drag the cropping rectangle so that it surrounds the area you want to keep. -You can round the corners of the cropping area by dragging the slider on the toolbar before clicking (Accept Crop/Resize). Drag the slider to the right to make the corners more rounded. If you round the corners of the cropping area, it's a good idea to select the Transparent check box to make the corners of the cropped image invisible. -You can "feather" the cropping area, causing the edges of the cropped image to blend with the background color specified in the BG color box. To feather the cropping area, enter a number in the (Feather) box before clicking (Accept Crop/Resize). The number represents the width of the feathered area in pixels.
Images 135
-It is possible to set the cropping area so that it is partially outside the original image bounds. In such a case, the outside area will effectively be added to the image, and it will have the color specified in the BG color box. To make the added area transparent, select the Transparent check box.
To resize an image
1. 2.
Select the image you want to resize. Do one of the following to open the Image Effects dialog box: o Right-click the image, point to Image, and then click Image Effects. o Click (Image Effects) on the Image Toolbar. (Resize). A rectangle with resize handles will appear around the image. On the toolbar, click Click and drag any of the resize handles until the rectangle is the size you want to make the image. To preserve the rectangle's proportions while you size it, hold down the Shift key while dragging (Cancel Crop/Resize) and then click (Resize) again. the corner handle. To start over, click (Accept Crop/Resize). When the rectangle is the size you want to make the image, click Click OK. In the Save as box, enter the path and file name under which to save the modified image. Initially, the box contains the original image's path and file name; if you want to replace the original image file, leave the path and file name unchanged. Under Save format, select the desired image format (p.119). Click OK.
3. 4.
5. 6. 7.
8. 9.
-To resize the image to an exact size in pixels, enter the desired width and height in the W and H boxes on the toolbar.
Rotating and flipping images

To rotate or flip an image
1. 2.
Select the image you want to rotate or flip. Do one of the following to open the Image Effects dialog box: o Right-click the image, and click Image Effects. (Image Effects) on the Image Toolbar. o Click On the toolbar, click any of the following buttons: o (Rotate Left) o (Rotate Right) o o (Flip Vertical) (Flip Horizontal)
3.
136 Images
4. 5.
6. 7.
Click OK. In the Save as box, enter the path and file name under which to save the modified image. Initially, the box contains the original image's path and file name; if you want to replace the original image file, leave the path and file name unchanged. Under Save format, select the desired image format (p.119). Click OK.
Adjusting brightness, contrast, and sharpness

To adjust an image's brightness, contrast or sharpness
1. 2.
Select the image you want to adjust. Do one of the following to open the Image Effects dialog box: o Right-click the image and click Image Effects. (Image Effects) on the Image Toolbar. o Click On the toolbar, click any of the following buttons: o o o o o (Lighten) (Darken) (Increase Contrast) (Decrease Contrast) (Sharpen)
3.
4. 5.
6. 7.
(Blur) o Click OK. In the Save as box, enter the path and file name under which to save the modified image. Initially, the box contains the original image's path and file name; if you want to replace the original image file, leave the path and file name unchanged. Under Save format, select the desired image format (p.119). Click OK.
-When you click more than one of these buttons, or the same button more than once, the effects are cumulative.
Adding text on an image

Using the Image Effects Text tool, you can superimpose text on an image using the font, color, and style of your choice.
Images 137
Namo WebEditor 2006 User Manual To add text on an image
1. 2.
Select the image on which you want to add text. Do one of the following to open the Image Effects dialog box: o Right-click the image and click Image Effects. (Image Effects) on the Image Toolbar. o Click On the tool palette, click (Text). Click at the location on the image where you want the text to start. In the Text box, type the desired text. In the Font, Size and Color boxes, specify the font, size and color for the text. Under Style, select the desired style(s). Click OK. (Text) again or press Esc. To exit text insertion mode, click If you need to reposition the text box, drag it to the desired position. Click OK. In the Save as box, enter the path and file name under which to save the modified image. Initially, the box contains the original image's path and file name; if you want to replace the original image file, leave the path and file name unchanged. Under Save format, select the desired image format (p.119). Click OK.
3. 4. 5. 6. 7. 8. 9. 10. 11. 12.
13. 14.
-After exiting text insertion mode, you can double-click a text box to reopen the Add Text dialog box and change the text and/or its properties. -If you want to specify an exact position for a text box, double-click it and enter X and Y coordinates (relative to the image's top left corner) in the Coordinates boxes. -You can enter only one line of text at a time. To add more than one line of text on an image, use multiple text boxes.
To remove text added on an image
Click the text box you want to remove, and then click Delete.
Adding a border around an image

Using the Image Effects Border tool, you can add a solid border around an image and control its width, color, and corner roundness.
138 Images
Chapter 4: Basic Page Content and Formatting To add a border around an image
1. 2.
Select the desired image. Do one of the following to open the Image Effects dialog box: o Right-click the image and click Image Effects. o Click (Image Effects) on the Image Toolbar.
3. 4. 5.
On the toolbar, click (Border). In the Width box, enter the desired width of the border in pixels. In the Roundness box, enter a number representing the degree of roundness of the border. A value of 100 produces a perfectly round border. 6. Click the Color box and select a color (p.210). 7. Click OK, and then click OK again to exit the Image Effects dialog box. 8. In the Save as box, enter the path and file name under which to save the modified image. Initially, the box contains the original image's path and file name; if you want to replace the original image file, leave the path and file name unchanged. 9. Under Save format, select the desired image format (p.119). 10. Click OK.
-To specify a border around an image without modifying the image itself, use the Borders & Background (p.130) command on the Format menu. Note, however, that you cannot create rounded corners with this method.
Adding a beveled-edge effect

Using the Image Effects Bevel Effect tool, you can add a three-dimensional effect around the edges of an image, making it appear raised above the page background.
To add a beveled-edge effect
1. 2.
Select the desired image. Do one of the following to open the Image Effects dialog box: o Right-click the image and click Image Effects. o Click (Image Effects) on the Image Toolbar. On the toolbar, click (Bevel Effect). Click the Style box and select the desired shape of the beveled edges. In the Width box, enter the desired width of the beveled edges in pixels. In the Angle box, enter the desired angle of the apparent light source in degrees. A value of 0 means the light is coming from the image's right. Click OK, and then click OK again to exit the Image Effects dialog box.
3. 4. 5. 6. 7.
Images 139
In the Save as box, enter the path and file name under which to save the modified image. Initially, the box contains the original image's path and file name; if you want to replace the original image file, leave the path and file name unchanged. 9. Under Save format, select the desired image format (p.119). 10. Click OK. 8.
Adding a shadow to an image

Using the Image Effects Shadow tool, you can add a shadow effect to an image, making it appear to float above or under the page background.
To add a shadow to an image
1. 2.
Select the desired image. Do one of the following to open the Image Effects dialog box: o Right-click the image and click Image Effects. o Click (Image Effects) on the Image Toolbar.
3. 4.
(Shadow). On the toolbar, click Click the Type box and select the desired shadow style: o Outer Shadow makes the image appear to float above the background, with the light source positioned to the top and left. o Inner Shadow makes the image appear to float under the background, with the light source positioned to the top and left. o Outer Glow makes the image appear to float above the background, with the light source positioned directly above the image. o Inner Glow makes the image appear to float under the background, with the light source positioned directly above the image. 5. In the Offset X and Y boxes, enter the desired width of the shadow in pixels. (The Y box is disabled if a Glow shadow type is selected.) 6. Click the Color box and select the desired color of the shadow. 7. In the Blur box, enter a number representing the desired blurriness of the shadow. A value of 0 produces a perfectly hard-edged shadow. 8. Click OK. 9. If you specified the shadow type as Outer Shadow or Outer Glow, click the BG color box and select the color that matches the background color of the document or other container where the image is located. (Use the eyedropper tool to copy the appropriate color from the document window.) 10. Click OK.
140 Images
11. In the Save as box, enter the path and file name under which to save the modified image. Initially, the box contains the original image's path and file name; if you want to replace the original image file, leave the path and file name unchanged. 12. Under Save format, select the desired image format (p.119). 13. Click OK.
Drawing and painting on an image

Using various tools in the Image Effects dialog box, you can draw lines, rectangles, or ovals on an image; draw with a freehand pencil, paint with a freehand brush, or erase parts of an image with a freehand eraser.
To draw a line on an image
1. 2.
Select the image on which you want to draw. Do one of the following to open the Image Effects dialog box: o Right-click the image, and click Image Effects.
(Image Effects) on the Image Toolbar. o Click 3. On the tool palette, click (Draw Line). 4. Click the desired line thickness on the options palette just below the tool palette. 5. Click the Stroke color box and select the desired color for the line. 6. Click and drag on the image to draw the line. 7. Click OK. 8. In the Save as box, enter the path and file name under which to save the modified image. Initially, the box contains the original image's path and file name; if you want to replace the original image file, leave the path and file name unchanged. 9. Under Save format, select the desired image format. 10. Click OK.
To draw a rectangle or oval on an image
1. 2.
Select the image on which you want to draw. Do one of the following to open the Image Effects dialog box: o Right-click the image, and click Image Effects. (Image Effects) on the Image Toolbar. o Click On the tool palette, click (Draw Line). On the tool palette, click (Draw Circle) or o Draw stroke only (no fill) o Draw stroke and fill o Draw fill only (no stroke) (Draw Square).
3. 4.
Images 141
Click the Stroke color box and select the desired color for the stroke (border of the shape), unless you chose the fill-only style. 6. Click the Fill color box and select the desired color for the fill (inside of the shape), unless you chose the stroke-only style. 7. Click and drag on the image to draw the shape. 8. Click OK. 9. In the Save as box, enter the path and file name under which to save the modified image. Initially, the box contains the original image's path and file name; if you want to replace the original image file, leave the path and file name unchanged. 10. Under Save format, select the desired image format. 11. Click OK. 5.
To draw on an image with a freehand pencil or brush
1. 2.
Select the image on which you want to draw. Do one of the following to open the Image Effects dialog box: o Right-click the image, and click Image Effects. o Click (Image Effects) on the Image Toolbar. (Pen) or (Brush).
3. 4. 5. 6. 7. 8.
On the tool palette, click
If you clicked , click the desired brush shape on the options palette just below the tool palette. Click the Stroke color box and select the desired color for the pencil or brush. Click and drag on the image to draw. Click OK. In the Save as box, enter the path and file name under which to save the modified image. Initially, the box contains the original image's path and file name; if you want to replace the original image file, leave the path and file name unchanged. 9. Under Save format, select the desired image format. 10. Click OK.
To erase part of an image with a freehand eraserSelect the image on which you want to draw.
1. 2.
Select the image on which you want to draw. Do one of the following to open the Image Effects dialog box: o Right-click the image, and click Image Effects. (Image Effects) on the Image Toolbar. o Click On the tool palette, click (Eraser). Click the desired eraser shape on the options palette just below the tool palette. Click the Background color box and select the color you want to "reveal" when you erase part of the image. Click and drag on the image to erase the desired part.
3. 4. 5. 6.
142 Images
7. 8.
Click OK. In the Save as box, enter the path and file name under which to save the modified image. Initially, the box contains the original image's path and file name; if you want to replace the original image file, leave the path and file name unchanged. 9. Under Save format, select the desired image format. 10. Click OK.
Setting a transparent color on an image

You can choose one color in any image in a Web document and make that color transparent. When an image has a transparent color, things "under" the imagesuch as the page backgroundshow through the transparent areas. In the example below, both Santa Claus images have white backgrounds, but the one on the right has been modified so that pure white areas are transparent. You may notice that the alpine background image also shows through those parts of the second figure's mustache and headgear that are pure white.
The figure on the right uses transparency
When you set a transparent color on an image, Namo WebEditor creates a copy of it in GIF format (p.120), which is the most popular Web image format that supports transparency. If the original image is not GIF, Namo WebEditor will convert it to GIF when it creates the copy. To avoid deleting the original image file, you should specify a different name or path for the transparent copy.
To set a transparent color on an image
1. 2. 3. 4. 5.
Click the image you want to make transparent. Do one of the following: Right-click the image, point to Image, and then click Set Transparent Color. (Set Transparent Color) on the Image Toolbar. Click Click an area of the image that is the color you want to make transparent.
Images 143
6. 7.
In the Save as box, enter the path and name of the transparent GIF file to be created. (Leave the path and name unchanged if you want to replace the original image file.) Confirm that the color shown in the Transparent color box is the one you intended to make transparent, and then click OK.
-When you paste an image from another program, you can immediately set a transparent color on it. In the Paste Image File As dialog box, click the Transparent color box and select the color to be made transparent.
Slicing an image into pieces

When an image in a Web document is large, it can be useful to break it up into several pieces, like the pieces of a jigsaw puzzle. Slicing an image in this way has several benefits, including the following: Browsers can download several pieces of a sliced image at the same time, causing the whole image to load faster. Slicing an image gives you more flexibility when placing the image in a table (p.161), since you can put pieces of the image into adjacent cells to suit your design requirements. You can create several variations of an imagefor example, with different text componentsby creating several versions of one piece of the image instead of editing the whole image. You can put hyperlinks on different parts of a sliced image without using an image map (p.157).
For an example of one way you can use image slicing, consider the table below.
To move the text from the top cell "into" the image in the bottom cell, we can slice the image into pieces as shown below, leaving the middle area empty to accommodate the text.
After exporting the sliced image parts to an HTML table, we insert the text in the empty cell, as shown below.
144 Images
You can slice images using Namo Image Slicer (p.382), a separate utility program that comes with Namo WebEditor. For more information, see Namo Image Slicer, p.382 or refer to Namo Image Slicer's online help.
To slice an image into several pieces
1. 2. 3. 4. 5. 6. 7.
Start Namo Image Slicer: On the Start menu, point to Programs, point to Namo Web Utilities, and then click Namo Image Slicer. On the File menu, click New. (Import Image). On the toolbar, click Locate the image file you want to slice, select it, and click Open. Using the Slicer Tool, draw boxes to define the desired image pieces.
On the toolbar, click (Export to HTML). In the File name box, type a name for the HTML document that will contain the table containing the image pieces, and click Save. 8. Switch back to Namo WebEditor and open the HTML file you saved in step 7. 9. On the Edit menu, click Select All, and then press Ctrl+C to copy the table containing the image pieces. 10. Open or switch to the document into which you want to insert the sliced image. 11. Place the insertion point at the desired location and press Ctrl+V.
Changing an image's file format

You can convert a bitmapped image from its original file format (p.120) to GIF, JPEG, PNG, or SIS format. -If you convert a JPEG or PNG image with many colors (such as a photograph) into GIF or SIS format, the resulting image may appear grainy or show banding.
To change an image's format
1. 2. 3. 4.
Right-click the image to convert, point to Image, and then click Convert Image Format. In the Save as box, enter the path and name for the converted image file. (Click Browse to select a folder.) Under Format, select the desired file format and specify the desired options. Click OK.
Images 145
Hyperlinks and bookmarks

Without a doubt, hyperlinks are the central reason the Web has become the huge success it is today. Thanks to hyperlinks (or just "links"), a Web user browsing one page or site can instantly "jump" to another page or site, just by clicking a word or an image. The power of hyperlinks to connect users to the information and resources they seek has made the Web the first truly universal communications network since the telephone system, and one that is arguably more powerful.
About hyperlinks
Essentially, a hyperlink is a tag on a word, phrase, image, or other page element, that tells the Web browser, "When the user clicks this, open X." X could be just about anything, including: another location on the same page another page on the same Web site a page on another Web site an image or multimedia file a downloadable program file ... and so forth.
The tag for a hyperlink only needs to give the browser one piece of information: the URL of the destination resource. Optionally, it can provide other information, such as the name of a frame or window (p.151) to open the destination in, or a brief text message (p.152) to display when the user holds the pointer over the link.
Link destination types

The most familiar type of hyperlink is the type that links to a Web page or site, such as "http://www.example.com". But there are other kinds, as well. Various link types are distinguised by the protocol identifier that appears at the beginning of the URL. Some common link types are listed below. http Hypertext Transfer Protocol: This is the usual link type for Web resourcesdocuments, images, and so forth. https Hypertext Transfer Protocol, Secure: The same as HTTP, but with the addition of Secure Sockets Layer (SSL), a protocol for transmitting sensitive material securely over the Internet.
146 Hyperlinks and bookmarks
ftp File Transfer Protocol: Links that begin with "ftp://" are for files and directories on FTP servers (Internet file servers). irc Internet Relay Chat: Links to an IRC channela virtual meeting place where users "chat" by means of instant text messages. IRC links require additional software (an IRC client) to open. news, nntp Network News Transfer Protocol: Links to a newsgroup or article on a network news server. gopher A less-sophisticated precursor of the Web, developed by the University of Minnesota. Although most Web browsers are able to display gopher documents, very few gopher servers still exist. telnet The telnet protocol allows users to access remote computers using a command line interface. It is typically used by administrators to access remote Unix servers. Telnet links require additional software (a telnet client) to open. mailto The protocol for e-mail links. Mailto links are not truly hyperlinks, since clicking a mailto link does not result in a connection to anything; it only tells the Web browser to create a new, blank email message with the specified "to" address. For the same reason, there is no such thing as a mailto URL. Mailto links take the form "mailto:[email protected]". file This type of link is used to point to a file on the local file system. In general, file links are only used temporarily, before a document is published to the Web, since users of remote computers cannot access files on your local file system. Namo WebEditor uses file links in temporary documents (documents that have not yet been saved) to point to images and other resource files, since the relative path to a resource is not known until the document is saved. When you save the document, Namo WebEditor offers to convert the file links to relative links based on the location of the document.
Relative vs. absolute links

A hyperlink that points to a Web document or resource may use either a relative URL or an absolute URL. The distinction has to do with how complete, or self-sufficient, the path pointing to the destination is.
Hyperlinks and bookmarks 147
Namo WebEditor 2006 User Manual Relative URLs
A relative URL consists of just a path that contains only enough information to locate a file in relation to the location of the document containing the URL. Using a relative link is like using your company's internal mail system. If you need to send a memo to someone in your own department, you can just address it to the person's name, such as "Betty Jones" (assuming there is just one Betty Jones in your department). To reach someone in another department, it might be sufficient to use the department name plus the person's name; for example, "Marketing/Betty Jones". You don't have to specify a street address, city, state, ZIP code, and so forth, since the company mail system assumes that an address that doesn't have these parts must refer to someone inside the company. Similarly, a relative URL only needs to provide a file name, or a file name plus a directory path. The Web browser (or Namo WebEditor) assumes that such a URL must point to a file in the folder structure of the same site as the containing document, and it interprets the URL accordingly. Here are some examples of relative URLs: Relative URL example.html images/example.gif images/photos/alice.jpg ../index.html ../../example.css
Absolute URLs
File Location the same folder as the document the "images" subfolder of the document's folder the "photos" subfolder of the "images" subfolder of the document's folder the parent folder of the document's folder the parent folder of the parent folder of the document's folder
Unlike a relative URL, an absolute URL does not depend on the location of the document containing it. To continue the analogy given above, using an abolute link is like mailing a letter with a full name and address through the national post. The name and address should uniquely identify the intended recipient, without ambiguity and without reference to the location of the sender. Whereas relative URLs are always local (they always point to resources on the same site as the document containing the link), absolute URLs can be either local or globalthey can point to resources anywhere on the Web. A local absolute URL consists of just an absolute path to the resource. It starts with a slash ("/"), indicating that the path starts at the root (or top) level of the Web site's folder hierarchy. Since the path starts at the root, it always points to the same file, regardless of where in the site's folder structure the document containing the link is. Here are some examples of local absolute URLs: /index.html /images/example.gif
/products/webeditor/tour/tour1.asp
A global absolute URLalso called a full URLis one that provides not just an absolute path, but also a site address. Thus, a global URL can point to a unique resource anywhere on the Internet. A global URL must start with the name of the protocol used to connect to the destination (such as "http:") followed by a double slash ("//"), the site address, and then the resource path. (If the resource path is not specified, the URL points to the root of the site, which may be represented by an index page at the root level.) Here are some examples of global absolute URLs: http://www.example.com/products/index.html http://www.example.com/ ftp://ftp.namo.com ftp://ftp.namo.com/public/webeditor_demo.exe
Notice that the second and third examples do not provide a path. In the case of the HTTP URL, the Web server will probably serve up the index page in the root folder of the site. In the FTP case, the FTP server will provide a listing of the server's root directory.
Creating a hyperlink
Virtually any bit of content on a Web page can be turned into a hyperlink, including words, phrases, single characters, entire paragraphs, and images. No matter what the content is, the process of creating a hyperlink on it is always the same: first, select the content; second, specify the destination of the linkthat is, what Web page, file, or other resource will be loaded by the browser when the link is clicked.
To create a hyperlink
1. 2.
Select the text or image you want to turn into a hyperlink. Do one of the following: o On the Insert menu, click Hyperlink. o On the Standard Toolbar, click (Hyperlink). o Press F9. In the URL box, enter the path or URL of the link's destination. (For example, "http://www.namo.com" or "photos.html". Do not include quotes. When entering a full URL, you must include the protocol string, such as "http:", and the double slash before the server name.) Alternatively, if the destination file is local, you can do one of the following instead of entering the path manually: o o Click (Browse) to select a file on the local file system. Click (Open Documents) to select among the documents that are currently open in Namo WebEditor.
3.
Click (Site) to select among the files that belong to the current local site. If no site is currently open, this button will be disabled.
4. 5.
o Click (New Document) to create a new document and link to it. If you are linking to a bookmark (p.159), enter the bookmark name in the Bookmark box. (If the bookmark is in the current document, you can leave the URL box empty.) Click OK.
-You cannot use the method described above to create a hyperlink on a Flash Button (p.238). To create a link on a Flash Button, double-click the Flash Button and enter the URL in the Link box of the Flash Button Properties dialog box.
"mailto" hyperlinks
A special kind of hyperlink, the mailto link, is not really a hyperlink at all, because it does not point to an Internet resource. When you click a mailto link, your browser opens your default e-mail program and tells it to create a new message addressed to the address specified in the link. The link can also provide the message title. To create a mailto link, do this: 1. Select the text or image you want to turn into a mailto link. 2. Do one of the following: o On the Insert menu, click Hyperlink. o Click (Hyperlink Properties) on the Standard Toolbar. o Press F9. Click (Email). In the Address box, enter the desired e-mail address (for example, "[email protected]"). (optional) In the Subject box, enter the desired title for the message. Click OK twice.
3. 4. 5. 6.
-Use the Hyperlink Toolbar to create a hyperlink quickly. After selecting the desired content, click the URL box (the longest box) on the Hyperlink Toolbar, enter the desired URL, and press Enter. If the Hyperlink Toolbar is not visible, you can reveal it by right-clicking the toolbar area and selecting Hyperlink Toolbar. -When you type a URL in the document window, Namo WebEditor automatically creates a link with that URL on the URL. For example, if you type "www.namo.com", Namo WebEditor will create a link to http://www.namo.com. You can disable this behavior on the Edit (p.45) tab of the Preferences dialog box.
Setting a link's target window or frame

Normally, when you click a link in a browser, the destination of that link (if it is something that can be displayed in a browser) opens in the same window or frame that displayed the document containing the link, replacing the original document. However, you can make the destination of a link open in a different window or frame from the one displaying the current document. You do this by specifying the link's target. For example, if you set a link's target to "frame2", the browser will try to open the link's destination in the frame named "frame2". If there is no frame by that name, the browser will then try to open the link in the window named "frame2". If there is no window by that name, then the browser will open the link in a new window and name the window "frame2". A link's target can be the name of a window, the name of a frame, or one of these special keywords: _blank: The link will be opened in a new, unnamed window. _parent: The link will be opened in the current frame's "parent", replacing the current frameset. The parent is usually the browser window, but if the current frameset is being displayed inside one frame of another frameset, then the parent is the containing frame in the higher-level frameset. _self: The link will be opened in the current frame or window. _top: The link will be opened in the current window. If the window is divided into frames, the link's destination will replace the frames.
-A window's name is not the same as its title, the words that appear in its title bar. If a window has a name, it is not visible to users, but the browser remembers it as long as the window is open. To create a browser window with a certain name, set the target of a hyperlink to the desired name. If you want the named window to be initially empty, set the link's URL to "about:blank". -In general, there is no reason to set the target of a single hyperlink to a named window. However, if you have several hyperlinks that you would like to open in a separate window from the current document, but you don't want a new window to be opened for each link, you can set all of the links' targets to one window name. When the first link in the group is clicked, the browser will create a new window and open the link in it. Then, when other links in the group are clicked, they will open in the same window.
To set a link's target
1. 2.
Double-click the link to open the Hyperlink Properties dialog box. In the Target box, type the desired frame or window name, or click the triangle and select one of the keywords or frame names (if a frameset is open). If a frameset is currently open, you can also click (Select Target Frame) to select a frame visually.
-You can also set a link's target using the Target box on the Hyperlink Toolbar. Type a window or frame name in the box or click the triangle and select one of the keywords or frame names.
Making a link open in a pop-up window

You can set up a hyperlink so that Web browsers will open it in a new window with the position, size, and other properties that you specify. Such pop-up windows appear on top of the window that is displaying the current document. They are often smaller than most browser windows, and certain parts that are usually visible can be hidden, such as the menu and the toolbar. You can specify the following properties for pop-up windows: name (useful when you want to reuse the same window) position relative to the top left corner of the screen width and height the visibility of its menu, toolbar, scroll bars, status bar resizability
To set a link to open in a pop-up window
1. 2. 3.
4. 5. 6. 7.
Double-click the link to open the Hyperlink Properties dialog box. Select the Open in new window check box, and then click Options. (optional) In the Window name box, enter the name you want the window to have. (You can have other pop-up links open in the same window by specifying the same name, or prevent other popup links from using the same window by specifying a unique name.) In the Left margin and Top margin boxes, enter the desired distance of the pop-up window from the screen's left and top edges, respectively, in pixels. In the Width and Height boxes, enter the desired width and height of the window, in pixels. Under Options, select the check boxes corresponding to the controls you want the window to display. Click OK twice.
-If you want a link to open in a new window, but you do not want to specify the window's size and other properties, set the link's target (p.151) to _blank and leave the Open in new window check box unselected.
Setting a tooltip on a link

The optional title attribute of hyperlinks allows authors to "attach" a hidden piece of text to a link, generally containing a brief description of the link's destination. Recent browsers display this text as a tooltip when a user holds the mouse pointer over the link for a few seconds.
Example of a tooltip for a hyperlink To set a tooltip on a link
1. 2.
Double-click the link to open the Hyperlink Properties dialog box. In the Tooltip box, enter the desired text of the tooltip.
-Netscape 4.x and earlier do not support tooltips on links. -If you set a tooltip on a link made from an image, and the image has alt text (p.132), Internet Explorer does not display the link's tooltip when the mouse pointer is held over the image. Instead, it shows the image's alt text as a tooltip. -Other elements besides hyperlinks can have title attributes as well, and recent browsers will display those titles as tooltips, just as with links. To add a title attribute to any element, do this: 1. 2. 3. 4. Place the insertion point in the desired element. On the Tag Selector (p.30), right-click the element's tag and then click View Source. Inside the element's opening tag, insert title="", adding the desired tooltip text inside the quotes. For example, <span title="hello">. Click the Edit tab to return to Edit mode.
Assigning access keys to links

Some users, such as blind people and people who browse the Web on a mobile phone, may find it difficult or impossible to navigate hyperlinks using a mouse. For such users, most browsers support navigating links using the Tab and Enter keys, but when a document has many links, this can be inconvenient. By assigning access keys to hyperlinks, you can make it easier for users to navigate them without a pointing device. An access key is a single characterusually a numberthat, when pressed in combination with the Alt key (or another, device-specific key that serves the same purpose), causes the browser to either activate or follow the associated link. For example, if a link has been assigned "2" as its access key, pressing Alt+2 will cause the browser to activate or follow that link.
The digits 0 9 make good access keys, but you should avoid letters, since ordinary Windows browsers use several Alt+letter combinations as menu shortcuts. For mobile phone users, you can also use "#" and "*" as access keys, since these characters are always present on standard keypads. When you assign an access key to a link, it's a good idea to add a note after the link to let users know about it. For example: News (press 1) Support (press 2)
-Do not assign the same access key to more than one link.
To assign an access key to a link
1. 2.
Double-click the link to open the Hyperlink Properties dialog box. In the Access key box, type the desired character, or click the triangle and select one from the drop-down menu.
Setting hyperlink colors

In modern visual browsers, a hyperlink can be displayed in any of three or four different colors at a given time. The normal color, blue by default, is used when a link has not yet been opened in the current browser session. A link's color changes to the visited color, purple by default, once it has been opened. The active color, red by default, is used in different ways by different browsers: Internet Explorer uses it for the link that has "focus"that is, the link that will be opened when the user presses the Enter key; while Firefox, Netscape, and Opera use it for a link that is in the process of being clicked. The hover color, which may or may not defined by default, is used for the link that is currently under the mouse pointer (without the mouse button being pressed). - Netscape 4.x does not support the hover color. You can override any or all of the default link colors at various levels: At the individual link level, you can set a single color for a specific link. The same color will be used regardless of the link's state (normal, visited, active, or hover). At the document level, you can specify different normal, visited, and active colors that affect all the links in a particular document. (However, you cannot specify a hover color at this level.) At the style sheet (p.191) level, you can specify different normal, visited, active, and hover colors that affect all the links in all the documents that use a particular style sheet.
-If you specify link colors at both the document level and the style sheet level, the browser will give priority to the style sheet colors (assuming the browser supports style sheets). If you specify a single color for a specific link, it will override all colors specified at other levels.
To specify a single color for a specific link
1. 2.
Select the link. Do not, however, select any adjacent content. On the Formatting Toolbar, click the triangle on the
(p.210).
(Font Color) button and select a color
To specify colors for all links in the current document
1. 2. 3. 4.
On the File menu, click Document Properties, and then click the Appearance tab. To specify the normal link color, click the Hyperlinks color box and select a color (p.210). To specify the visited link color, click the Visited links color box and select a color (p.210). To specify the active link color, click the Active links color box and select a color (p.210).
To specify link colors in a style sheet
1. 2. 3. 4.
On the Format menu, click Define Styles. Click (Add). Under Style type, click Other. Click the triangle on the Name box and select one of the following: o :link to define the normal link color o :visited to define the visited link color o :active to define the active link color o :hover to define the hover link color Click OK. Click the Font color box and select a color (p.210). Repeat steps 2 6 for each link color you want to define. (optional) If you want to save the style sheet externally so that you can use it with other documents, click (Save As External File), navigate to the desired folder, enter the desired file name, and click Save. Click OK.
5. 6. 7. 8.
9.
-You can change the default normal, visited, and active link colors for new documents on the Browser Defaults tab of the Preferences dialog box.
Changing the destination of a hyperlink

There are several ways to change the destination (URL) of a hyperlink. The method varies somewhat depending on the type of content on which the link is based.
To change the URL of a text-based link
Do one of the following: o Double-click the link, enter the new URL, and press Enter. o Place the insertion point inside the link, enter the new URL in the URL box on the Hyperlink Toolbar, and press Enter. o Place the insertion point inside the link, enter the new URL in the URL box on the Inspector, and press Enter.
To change the URL of an image-based link
1. 2. 3.
Select the image. On the Standard Toolbar, click (Hyperlink), or press F9. Enter the new URL and press Enter.
To change the URL of a Flash Button-based link
1. 2.
Double-click the Flash Button. Enter the new URL in the Link box and press Enter.
Removing a hyperlink
To remove a hyperlink on text or an image
1. 2.
If the link is text-based, place the insertion point in it. If it is image-based, select the image. On the Standard Toolbar, click (Remove Hyperlink), or press Shift+F9.
-To remove several nearby hyperlinks at once, select all the content surrounding them and then do step 2 above.
To remove a hyperlink from a Flash Button
1. 2.
Double-click the Flash Button. Delete the contents of the Link box and press Enter.
Creating an image map

You can place several different hyperlinks on a single image. You do this by drawing hot zones on the image, each hot zone linking to a different URL. A collection of hot zones is called an image map. For example, the image below has an image map with five hot zones, one for each continent. Clicking each zone will take the user to a different Web page. (Normally, the lines demarcating hot zones are invisible, but they have been made visible in this example.)
An image map
Namo WebEditor lets you create hot zones by simply drawing them with the mouse. Hot zones can be rectangular, circular, or polygonal with any number of sides. Tools for drawing the various hot zone shapes can be accessed easily on either the Inspector or the Image Toolbar. (To reveal the Image Toolbar, rightclick the toolbar area and click Image Toolbar.)
To create an image map
1. 2.
Select the image you want to create an image map on. Click any of the following buttons on either the Inspector or the Image Toolbar: o (Draw Rectangular Hot Zone) (Draw Circular Hot Zone) o o (Draw Polygonal Hot Zone) Draw a rectangle, circle, or polygon covering an area of the image that you want to make a link. (For a polygonal hot zone, click each point where you want to place a vertex, and then doubleclick the last point to close the polygon.) When you are finished drawing the hot zone, the Create Hyperlink dialog box will appear. Enter the desired URL for the hot zone and specify any other properties you want for the hyperlink, and then click OK. Repeat steps 2 4 for each area of the image you want to make a link. When you are finished drawing hot zones, press Esc to exit hot zone drawing mode.
3.
4. 5. 6.
-You can use the same steps above to add a hot zone to an existing image map.
To move a hot zone
1. 2.
Click an image that has an image map. Drag the desired hot zone to the desired location. (The mouse pointer will turn into the shape of a hand when it is over a hot zone.)
To resize or reshape a hot zone
1. 2. 3.
Click an image that has an image map. Click the desired hot zone. Resize handles will appear at the hot zone's corners or vertices. (For a circular hot zone, resize handles will appear at the corners of the circle's bounding box.) Drag resize handles as necessary to change the hot zone's size and/or shape.
To change the URL or other properties of a hot zone
1. 2. 3.
Click an image that has an image map. Double-click the desired hot zone. The Hyperlink Properties dialog box will appear. Edit the link properties as desired, and then click OK.
To remove a hot zone
1. 2.
Click an image that has an image map. Click the desired hot zone and press Delete. (Note: you may need to click on another part of the image before the hot zone's outline disappears.)
Opening a linked document in Edit mode

Namo WebEditor provides the ability to follow links in Edit mode. Thus, while you are editing one document, you can easily open another document that the first document contains a link to. To follow a link in Edit mode, click the link while holding down the Alt key. Alternatively, right-click the link and then click Open Hyperlink. If the URL of the followed link is just a path to a local document (p.148), Namo WebEditor will simply open the document. If, however, the URL is a full URL (p.148) that points to a document on the Web, Namo WebEditor will attempt to download a copy of the document from the Web. (This is the same as opening a document on the Web (p.49) by entering its URL in the Open dialog box and clicking Open URL.)
About bookmarks
A bookmark is a tag that identifies a location, within a document, that is to serve as the destination of a hyperlink. For example, if a document has a bookmark named "3.html" on its third heading element, a hyperlink on the same page can refer to "#section_3", causing the Web browser to jump to that location on the page, scrolling the document if necessary. A hyperlink on another document can refer to the bookmark by appending the bookmark name to the URLfor example, http://www.example.com/index.html#section_3. When a user clicks the link, the browser will open the document and jump to the bookmark location. Bookmarks are especially useful in long documents. For example, if you have a page that contains a long list of terms and definitions, you could put a unique bookmark on each term, and then use the bookmarks to link to individual terms from other documents, or from a term index and the top of the page. It is also common to insert a bookmark at the top of a long page, and then insert links to the top bookmark periodically throughout the page. This saves users the trouble of scrolling back to the top manually. Bookmarks are not visible in a browser. In Namo WebEditor's Edit mode, the location of a bookmark is just before the bookmark. If the display of special tag marks (p.34) is disabled, indicated by the icon bookmarks are completely invisible in Edit mode.
Creating a bookmark
To create a bookmark
1. 2. 3. 4.
Either select some content on the line where you want the boomark, or just place the insertion point anywhere on that line. On the Insert menu, click Bookmark; or press Ctrl+G. In the Bookmark name box, type the desired name for the bookmark. If you selected text in step 1, the text will automatically appear in the box; you can edit it or replace it as you wish. Click Add or press Enter, and then click Close or press Enter again.
) will appear where you inserted the bookmark, and, if you In the document window, a bookmark icon ( selected some content before creating the bookmark, that content will be shown with a dashed underline. If you can't see the icon/underline or you want to hide it, click (Show/Hide Special Tag Marks) on the Standard Toolbar. -The Bookmarks dialog box is non-modal, so you can keep it open while you continue working in the document window. You can create several bookmarks one after another, and then close the dialog box when you are finished.
Renaming and removing bookmarks

To rename a bookmark
1. 2.
Right-click the bookmark icon ( ) or the underlined content where the desired bookmark is, and then click Modify Bookmark. (Or just double-click the bookmark icon.) In the Bookmark name box, edit the bookmark name as desired and press Enter.
To delete a bookmark
1. 2.
Right-click the bookmark icon ( ) or the underlined content where the desired bookmark is, and then click Modify Bookmark. (Or just double-click the bookmark icon.) Click Remove.
-You can rename or delete several bookmarks at once while the Bookmarks dialog box is open. Just select each bookmark you want to rename or remove in the Bookmarks list, and then rename or remove it.
Using bookmarks in hyperlinks

To refer to a bookmark in the URL of a hyperlink, just append the "#" character, followed by the bookmark name, at the end of the URL. For example, to link to the bookmark named "8.html" in the document "regulations.html", you would use the URL regulations.html#section_8. If you want to link to a bookmark in the same document as the link itself, just use "#" followed by the bookmark name as the URL. For example, #section_8. -When you create a hyperlink using the Create Hyperlink dialog box, if you enter a path to a local document in the URL box, clicking the triangle on the Bookmark box will drop down a list of all the bookmarks that are in that document. You can just select a bookmark in the list instead of typing it in. (This only works if Namo WebEditor can find the destination document on the local file system, so it will not work if the URL is non-local or the document does not exist locally.)
Tables
In HTML, a table is essentially a box divided into cells. Each cell is a container; its contents can include text, images, and other elementseven other tables. Tables were originally intended for presenting textual information that is easiest to read in a row-andcolumn layout, such as baseball statistics. However, pioneering Web designers quickly discovered they could use tables to create multi-column page layouts that were otherwise impossible to achieve in HTML (before the introduction of layers (p.97)). Although authors can now design complex page layouts with less effort using layers, the majority of authors still prefer working with tables. -Using Namo WebEditor's layout box (p.79) feature, you can create a table for page layout by simply drawing container cells on a grid and then arranging them by dragging. Depending on your experience level, layout boxes can be easier and more intuitive than working with tables directly.
Creating a table
There are three ways to create a table in Namo WebEditor: Using the Create Table button on the Standard Toolbar Using the Draw Table command and "drawing" a table with the mouse Using the New Table command and specifying numbers of rows and columns in the Table Properties dialog box
To create a table using the Create Table button
1. 2. 3.
Place the insertion point where you want to insert the table. (Create Table). On the Standard Toolbar, click Drag the mouse down and to the right until the highlighted cells on the miniature table match the number of rows and columns you want in the table.
Creating a table using the Create Table button
Tables 161
-When you create a table using the Create Table button, Namo WebEditor automatically sets column widths so that each column is the same width and the whole table stretches across the current width of the document window. Table width is not specified, so the columns can automatically shrink when the document or browser window is made narrower.
To "draw" a table
1. 2. 3. 4. 5. 6.
Place the insertion point at the beginning of the line above which you want to insert a table. Press Enter to create a new, empty paragraph. On the Table menu, click Draw Table. The mouse pointer will turn into a pencilindicating table drawing modeand the Table Toolbar will appear. Click on the empty paragraph and drag the mouse until the dashed rectangle is the size and shape you want for the table. Click inside the border of the new table and draw lines to divide the table into rows and columns. When you are finished drawing the table, press Esc or click the Table Toolbar. (Escape Table Drawing Mode) on
"Drawing" a table with the mouse
-When you "draw" a table, Namo WebEditor automatically sets column widths and row heights to reflect the positions of the borders you draw. Table width is not specified, so the columns can automatically shrink when the document or browser window is made narrower. -You cannot "draw" a table inside another table.
To create a table through the Table Properties dialog box
1. 2. 3. 4. 5.
Place the insertion point where you want to insert the table. On the Table menu, click New Table. In the Rows and Columns boxes, enter the desired numbers of rows and columns for the new table. (optional) Enter the desired width and/or height of the table in the Width and/or Height boxes. Click OK.
-When you create a table using the Table Properties dialog box and you do not specify the table width, Namo WebEditor automatically sets column widths so that each column is the same width and the whole table stretches across the current width of the document window. Table width is not
162 Tables
automatically specified, so the columns can automatically shrink when the document or browser window is made narrower. Conversely, if you do specify the table width, column widths are not automatically specified.
Selecting parts of a table

To select a single cell
Do one of the following: o Click inside the cell while holding down the Ctrl key. o Right-click inside the cell and click Select Cell.
To select several adjacent cells
Do one of the following: o Click inside the first cell and drag the mouse pointer to the last cell. o Click inside the first cell and then click inside the last cell while holding down the Shift key.
To select several non-adjacent cells
Click inside each cell while holding down the Ctrl key.
To select an entire row
Click the left border of the row's first cell. (The mouse pointer should look like click.)
before you
To select an entire column
Do one of the following: o Click the top border of the column's first cell. (The mouse pointer should look like before you click.) o Click the column width indicator, just above the column. (The width indicator only appears when the insertion point is inside the table or part of the table is selected.)
Tables 163
Namo WebEditor 2006 User Manual To select an entire table
Do one of the following: o Right-click inside the table and click Select Table. o Click the table width indicator above the table. (The width indicator only appears when the insertion point is inside the table or part of the table is selected.)
To deselect a cell
Click inside the cell while holding down the Ctrl key.
Resizing rows and columns

Depending on how you create a table (p.161), Namo WebEditor may automatically set column widths and row heights to certain values. You can change row heights and column widths in two ways: by dragging borders with the mouse or by specifying heights and widths using numerical values. You can also set the overall height or width of a table using numerical values.
Resizing rows and columns using the mouse
To resize a column, drag its right border left or right. (The mouse pointer should look like while you drag.) Note that when you resize any column except for the last column in a table, the next column's width also changes to keep the table's overall width the same. If you want to resize a column without affecting other columns (but letting the table's overall width change), hold down the Ctrl key while you drag the column border. while you To resize a row, drag its bottom border up or down. (The mouse pointer should look like drag.) Note that when you resize a row, other rows stay the same height, and the table's overall height changes. If you want to resize a row without changing the table's overall height (but letting the next row's height change), hold down the Ctrl key while you drag the row border. You can also resize an entire table while keeping the relative widths of its columns (or the relative heights of its rows) constant. To do so, drag the table's right (or bottom) border while holding down the Ctrl key. - If you hold down the Shift key while dragging a column border, the table's width unit will change from pixels to percentage or from percentage to pixels.
164 Tables
-When you use a layout grid (p.32) and/or layout guides (p.32), and the Snap option is turned on, the borders of rows and columns will "snap" to guides and gridlines as you drag them.
Specifying row heights and column widths using numbers
You can set the height of a row or the width of a column numerically, either in pixels or as a percentage of the table's height (or width). You can also set the overall width and/or height of a table, either in pixels or as a percentage of the available space. To specify row height using numbers 1. Select the row you want to resize. 2. On the Inspector, enter a number of pixels or a percentage value in the Height box and press Enter. To specify column width using numbers 1. Select the column you want to resize. 2. On the Inspector, enter a number of pixels or a percentage value in the Width box and press Enter. To specify table width and/or height using numbers 1. Right-click inside the table and click Table Properties. 2. In the Width box and/or the Height box, enter a number and then click either pixels or %.
To equalize column widths or row heights
1. 2.
Select the columns or rows you want to make the same width or height. (The columns or rows must be adjacent.) On the Table menu, point to Cell Sizing, and click either Equalize Cell Widths or Equalize Cell Heights.
To clear all specified heights or widths in a table
1. 2.
Place the insertion point inside the table. On the Table menu, point to Cell Sizing, and click either Clear All Width Attributes or Clear All Height Attributes.
-The width or height attributes of all cells and the table itself will be cleared.
Notes about row and column sizing
Browsers respect specified column widths whenever possible. Specified row heights, on the other hand, are always disregarded when necessary to fit cell contents. You can specify the widths of some columns in a table and leave those of other columns unspecified. Any column without a specified width will be sized automatically, depending on its contents, within the available space.
Tables 165
You can use a combination of pixel values and percentages when specifying column widths or row heights in the same table. In such cases, the overall width or height of the table (as long as it is not specified) will be based on the pixel values. If you specify all column widths in percentages, and the percentages do not add up to 100%, the columns will be sized according to the ratios between their percentage values. The same holds true for rows and row heights. To set the width of a column or the height of a row, you only need to set the width or height of one cell in that column or row. If different cells in the same column or row have different specified sizes, the largest cell determines the effective column width or row height. Because of conflicts or limitations, the effective sizes of cells will often not match their specified sizes. If you want to change the specified sizes to match the effective sizes, on the Table menu, point to Cell Sizing, and click Apply Apparent Cell Sizes.
How specified row or column sizes interact with specified table sizes
When you set column widths in pixels and also specify the overall table width, the specified values may conflict with each other: that is, the sum of the column widths may not equal the specified table width. The same is true of row heights and overall table height. The following rules govern how modern browsers resolve conflicting cell and table sizes: If the sum of the column widths is not equal to the specified table width, the column widths are automatically adjusted to fit the specified table width. The proportions between column widths remain constant. If the sum of the row heights is less than the specified table height, the row heights are automatically adjusted to fit the specified table height. The proportions between row heights remain constant. If the sum of the row heights is greater than the specified table height, the table height is automatically adjusted to accommodate the specified row heights.
How specified row or column sizes interact with specified table sizes About table and column width indicators
When the insertion point is inside a table, or part of the table is selected, a light blue bar called a table info bar appears just above the table. The info bar's main purpose is to indicate the widths of the columns and the width of the table as a whole. Table info bars are only visible in the Edit window; they do not appear in preview mode or in Web browsers.
Table and column width indicators (table aid)
166 Tables
Each width indicator can display either or both of two different numbers: the specified width of the column or table, and its effective width. The specified width can be shown either in pixels or as a percentage, depending on what unit is actually used to specify the width; while the effective width is always shown in pixels. The rules regarding the numbers that a width indicator displays are as follows: Rule If the specified width is in pixels and is the same as the effective width, only one number is shown on the width indicator. If the specified width is a percentage, it is shown in parentheses, and the effective width (in pixels) is shown on its left. If the specified width is in pixels, and the effective width is different, the specified width is shown in parentheses, and the effective width is shown on its left. If the width is not specified, the effective width is shown with an empty pair of parentheses to its right. If you find table info bars distracting, you can hide them. On the View menu, point to Marks, and click Table Info Bars. Example
Adding and removing rows and columns

To add a row at the bottom of a table
1. 2.
Place the insertion point in the last cell of the table. Press Tab.
To insert rows
1. 2.
Place the insertion point somewhere in the table. Do one of the following: o On the Table menu, click Insert Rows or Columns. (Insert Rows/Columns). o On the Table Toolbar, click Click Insert rows. In the Number of rows box, enter the number of rows to insert. Under Insert position, specify whether to insert the row(s) above or below the current row. Click OK.
3. 4. 5. 6.
To insert columns
1. 2.
Place the insertion point somewhere in the table. Do one of the following:
Tables 167
o 3. 4. 5. 6.
On the Table menu, click Insert Rows or Columns.
(Insert Rows/Columns). o On the Table Toolbar, click Click Insert columns. In the Number of columns box, enter the number of columns to insert. Under Insert position, specify whether to insert the column(s) to the left or the right of the current column. Click OK.
To delete rows or columns
1. 2.
Place the insertion point inside the first row or column you want to delete. Do one of the following: o On the Table menu, click Delete Rows or Columns. (Delete Rows/Columns). o On the Table Toolbar, click Specify whether to delete rows or columns and how many to delete. Click OK.
3. 4.
-Alternatively, just select the rows or columns to delete and press Shift+Delete. -When you insert a row or column, the new cells inherit the attributessuch as alignment and background colorof the corresponding cells in the row or column that contained the insertion point. However, any text you insert in the new cells does not inherit the attributes of text in the adjacent cells.
Copying and moving cells

To copy and insert rows or columns
1. 2. 3. 4. 5.
6.
Select the rows or columns you want to copy. Press Ctrl+C. Place the insertion point in another row or column. Press Ctrl+V. If you are copying rows, click Insert above or Insert below, depending on where you want to insert the copied rows. If you are copying columns, click Insert left or Insert right, depending on where you want to insert the copied columns. Click OK.
To copy the contents of a block of cells to another block of cells
1.
Select the block of cells whose contents you want to copy. (The selection must be a rectangular block of cells.)
168 Tables
2. 3. 4. 5.
Press Ctrl+C. Place the insertion point in the first cell of the destination block. Press Ctrl+V. Click Paste contents only and then click OK.
-When pasting the contents of a block of cells to another block of cells, the target block must have at least as many rows and columns as the source block.
To move rows or columns
1. 2.
3.
4.
Select the rows or columns you want to move. Do one of the following: o Drag the rows or columns on top of another row or column. o Press Ctrl+X, place the insertion point in another row or column, and then press Ctrl+V. If you are moving rows, click Insert above or Insert below, depending on where you want to insert the rows you are moving. If you are moving columns, click Insert left or Insert right, depending on where you want to insert the columns you are moving. Click OK.
To copy or move a block of cells into another cell as a child table
1. 2.
3. 4. 5.
Select the block of cells you want to copy. (The selection must be a rectangular block of cells.) Do one of the following: o To copy the cells, press Ctrl+C. o To move the cells, press Ctrl+X. Place the insertion point in another cell. Press Ctrl+V. Click Insert as a child table and then click OK.
To create a new table by copying cells from an existing table
1. 2. 3. 4.
Select the block of cells you want to copy. (The selection must be a rectangular block of cells.) Press Ctrl+C. Place the insertion point outside the table. Press Ctrl+V.
Deleting the contents of multiple cells

To delete the contents of multiple cells
1.
Select the cells whose contents you want to delete.
Tables 169
2.
Do one of the following: o On the Table menu, click Delete Contents. o Press Del.
Merging and splitting cells

Merging cells means combining two or more table cells into one. Splitting a cell means dividing it into two or more cells. You can merge and split cells using either menu/toolbar commands or the Table Pencil and Table Eraser tools.
To split cells
1. 2.
Select the cells you want to split. Do one of the following: o On the Table menu, click Split Cell. (Split Cell). o On the Table Toolbar, click Specify whether to split the cells into rows or columns and how many rows or columns to split each cell into. Click OK.
3. 4.
To split cells using the Table Pencil tool
1.
Do one of the following: o On the Table menu, click Draw Table. (Table Pencil). o On the Table Toolbar, click Draw lines where you want to split cells. When finished, press Esc or click (Escape Table Drawing Mode) on the Table Toolbar.
2. 3.
To merge cells
1. 2.
Select two or more cells to merge. Do one of the following: o On the Table menu, click Merge Cells. o On the Table Toolbar, click (Merge Cells).
-The cells to be merged must comprise a rectangular block.

To merge cells using the Table Eraser tool
1.
On the Table Toolbar, click
(Table Eraser).
170 Tables
2.
Drag the eraser across one or more borders between cells.
Aligning content in cells

By default, the contents of a table cell are left-aligned and vertically centered within the cell. You can change a cell's alignment settings on the Inspector.
To set the horizontal alignment of the contents of cells
1. 2.
Select the cells whose content you want to align. On the Inspector, click the H alignment box and select Left, Right, or Center.
To set the vertical alignment of the contents of cells
1. 2.
Select the cells whose content you want to align. On the Inspector, click the V alignment box and select Top, Middle, Bottom, or Baseline.
-In theory, if one cell in a row has its vertical alignment set to Baseline, the content of all other cells in the same row should start at the same vertical position as that of the cell whose vertical alignment is set to Baseline. In practice, however, most browsers treat Baseline alignment the same as Top alignment. -You can override the specified horizontal alignment of a cell on a paragraph-by-paragraph basis by setting a different alignment (p.199) for individual paragraphs in the cell.
Specifying cell spacing and padding

Cell spacing is space between cells in a table. Cell padding is space between the border of a cell and its contents. You can specify a single cell padding value for a whole table, or you can specify a padding amount independently for each side of an individual cell. If you do both, individual cell padding values override the table-wide value. Cell spacing, on the other hand, can only be set for a whole table. Some examples of different spacing and padding values are shown below:
Tables 171
To set cell spacing and padding for a whole table
1. 2. 3. 4.
Right-click the table and click Table Properties. In the Cell padding box, enter a number of pixels. In the Cell spacing box, enter a number of pixels. Click OK.
To specify padding amounts for selected cells
1. 2. 3.
Select the cells for which you want to specify padding amounts. On the Format menu, click Borders & Background. In the border selection box, select the cell side for which you want to set the padding. To select multiple sides at once, click each while holding down the Ctrl key. (See the examples below.) To select all four sides, click Select All. To deselect all sides, click in the middle of the box. By default, all four sides are selected.
4. 5. 6.
Enter a number in the Padding box and then click the unit box next to it and select a unit. If you do not specify a unit (p.209), the value will be interpreted as pixels. Repeat steps 3 and 4 if you want to set a different padding value for another side. Click OK.
-If you set a table's cell spacing to 0, the borders of adjacent cells will overlap.
172 Tables
Controlling the appearance of table and cell borders

In an HTML table, each cell can have a visible border on any of its four sides, as can the table as a whole. If you do not specify otherwise, most browsers draw cell borders as 1-pixel lines that are dark gray on the top and left sides, and light gray on the bottom and right sides. Similarly, by default, most browsers draw table borders as 1-pixel lines that are light gray on the top and left sides, and dark gray on the bottom and right sides. (The exact colors depend on the browser and the user's operating system settings.) Most browsers also display, by default, a small amount of white space between cells. While this cell spacing (p.171) may appear to be part of or related to the cell borders, it is actually separate and independent. Below is a 3x3 table with default borders and cell spacing, as rendered by Internet Explorer 6 on a typical Windows XP computer:
By zooming in on one cell, we can more easily distinguish its borders from those of neighboring cells, and also see the two different colors that, in combination with the small space between cells, makes the borders appear "raised", like raised lettering on a book cover.
With Namo WebEditor, you can easily change the style, color, and width of cell and table borders. If you wish, you can specify different border settings independently for each side of a cell. You can also apply a single color (or pair of light and dark colors), style, or width at once to all the borders of a cell, group of cells, or table.
Applying border presets to an entire table

The simplest way to change the appearance of the borders in a table is to use a border preset. When you apply a border preset, Namo WebEditor changes several border-related attributes of an entire table at once,
Tables 173
and also removes any border-related attributes that were previously applied to individual cells. The four available border presets are described below. Normal Sets the table's border width to 1 pixel; removes all other border-related HTML attributes from the table; and removes all border-related CSS properties from all cells. Also resets the table's cell spacing and padding (p.171).
Thin Sets the table's border width to 1 pixel, dark border color to white, light border color to black, and cell spacing (p.171) to 0. Removes all border-related CSS properties from the table and all cells. Also resets the table's cell padding (p.171). Thick Sets the table's border width to 1 pixel, dark border color and light border color both to black, and cell spacing (p.171) to 0. Removes all other border-related HTML attributes and CSS properties from the table and all cells. Also resets the table's cell padding (p.171). Hide Sets the table's cell spacing and padding both to 0. Removes all border-related HTML attributes and CSS properties from the table and all cells. (If no border attributes are specified, browsers hide table borders.)
To apply a border preset to a table
On the Table menu, point to Borders, and then click one of the commands: Normal, Thin, Thick, and Hide.
-If you have specified a border color or pair of colors for any cell (p.175) using HTML attributes, applying a border preset to the table will not remove the cell border color(s). Also, if you have specified any border-related CSS properties for the table itself, applying a border preset will not remove those properties.
Specifying one or two border colors for an entire table

To specify a single border color for a whole table
1.
Right-click inside the table and click Table Properties.
174 Tables
2.
Under Borders, click the Color box and select a color (p.210).
To specify light and dark border colors for a whole table
1. 2.
Right-click inside the table and click Table Properties. Under Borders, click the Light border box and select a color. Then, click the Dark border box and select a color (p.210).
-Light and dark border colors are only supported by Internet Explorer.
To reset a border color to the default color
1. 2.
Right-click inside the table and click Table Properties. Under Borders, click one of the color boxes and, on the Color Palette (p.210), click Default.
Specifying one or two border colors for selected cells

To specify a single border color for one or more cells
1. 2.
Select the desired cells. On the Inspector, click the Border color box and select a color (p.210).
To specify light and dark border colors for one or more cells
1. 2. 3.
Select the desired cells. Right-click one of the cells and click Cell Properties. Under Borders, click the Light border box and select a color. Then, click the Dark border box and select a color (p.210).
-Light and dark border colors are only supported by Internet Explorer.
To reset a border color for one or more cells
1. 2. 3.
Select the desired cells. Right-click one of the cells and click Cell Properties. Under Borders, click one of the color boxes and, on the Color Palette (p.210), click Default.
Tables 175
Specifying border style, color, and width for a table or block of cells
You can control the style, color, and width of borders for a whole table or a block of cells using the Table Borders dialog box. The border properties you select in this dialog box apply to all the selected cells as a unit. For example, you could select a block of cells in the middle of a table and apply a distinct set of border properties to it as a block. In the example below, the middle block of four cells uses double outer borders and dashed inner borders, while the rest of the table uses single, solid borders.
Border properties applied to a cell block To specify complete border properties for a whole table or a block of cells
1.
2. 3.
Do one of the following: o If you want to apply border properties to an entire table, place the insertion point inside the table. o If you want to apply border properties to a block of cells, select the desired cells. On the Table menu, point to Borders, and click Advanced. In the border selection box, click to select the border for which you want to specify properties. To select multiple borders, click each while holding down the Ctrl key. (See the illustrations below.) You can also use the buttons under the selection box to select various groups of borders.
Click a border to select it.
Click another border while holding down the Ctrl key to also select it.
176 Tables
Click an intersection to select two borders.
Double-click anywhere to select or deselect all borders.
4.
5. 6.
Do any or all of the following: o Click the Style box and select the desired border style. (If you select None, the border is hidden.) o Click the Color box and select a color (p.210). o Enter a number in the Width box and select a unit in the unit box. Repeat steps 3 and 4 for each border or set of borders you want to change. Click OK.
-When you use the Table Borders dialog box with a particular table for the first time, Namo WebEditor sets the table's cell spacing (p.171) to 0. Also, if you use it to specify the borders of only part of a table, the rest of the table will be automatically changed to use solid, black, 1-pixel borders. -Namo WebEditor uses CSS properties to apply settings in the Table Borders dialog box. Please note that various browsers may support these CSS properties differently or not at all.
Specifying border style, color, and width for individual cells

You can control the style, color, and width of the border on each side of a cell independently, as in the example below, in which the middle cell uses a different border style and color on each side:
Example of independent cell borders
Tables 177
Namo WebEditor 2006 User Manual To specify complete border properties for one or more individual cells
1. 2. 3.
Select the desired cell(s). If you select more than one cell, the same border properties will be applied to each of them. On the Format menu, click Borders & Background. In the border selection box, select the cell border you want to change. To select multiple borders at once, click each while holding down the Ctrl key. (See the examples below.) To select all four borders, click Select All. To deselect all borders, click in the middle of the box. By default, all four borders are selected.
Click while holding down Ctrl to select multiple borders.
4.
5. 6.
Do any or all of the following: o Click the Style box and select the desired border style. (If you select None, the border is hidden.) o Click the Color box and select a color (p.210). o Enter a number in the Width box and select a unit in the unit box. Repeat steps 3 and 4 for each border or set of borders you want to change. Click OK.
-Namo WebEditor uses CSS properties to apply border settings in the Style dialog box. Please note that various browsers may support these CSS properties differently or not at all.
Managing conflicting cell borders

When a table's cell spacing (p.171) is set to 0, two borders of adjacent cells can conflict, because they both take up the same space. When this happens, browsers use a complicated set of rules to decide which of the overlapping borders will dominate. Unfortunately, since these rules are not well documented, it is difficult to predict how border conflicts will be resolved. In both of the examples below, all borders except for those of the bottom right cell are specified as solid, gray, 3-pixel borders. The bottom right cells in both examples have double black borders on all sides, but
178 Tables
the one in the second example has 4-pixel borders instead of 3-pixel. Because of this difference, the borders of the bottom right cell in the second example "win", while those in the first example "lose".
Double borders "lose"
Double borders "win"
To avoid an undesired outcome when adjacent borders conflict, you sometimes need to forcibly hide one of the conflicting borders. Alternatively, if you want all cell borders to be visible even when cell spacing is 0, you can use the border-collapse CSS property on the table to prevent border overlapping.
To hide one or more borders of a cell
1. 2. 3.
Select the cell. (Click it while holding down the Ctrl key.) On the Format menu, click Borders & Background. In the border selection box, select the cell border you want to change. To select multiple borders at once, click each while holding down the Ctrl key. (See the examples below.)
Click while holding down Ctrl to select multiple borders.
4. 5.
Click the Style box and select None. Click OK.
To prevent overlapping cell borders when cell spacing is set to 0
1. 2. 3.
Place the insertion point just before the table. (The <table> tag should be highlighted on the Tag Selector.) Click the HTML tab to switch to HTML mode. Examine the <table> tag on the highlighted line and do one of the following: o If the tag contains the inline style declaration style="bordercollapse:collapse;", change it to style="bordercollapse:separate;".
Tables 179
4.
o Otherwise, insert style="border-collapse:separate;" into the <table> tag. Return to Edit mode to see the effect of the change.
Specifying other table and cell properties

Various miscellaneous properties of tables and cells can be managed in the Table Properties dialog box or, often, on the Inspector.
Adding a caption to a table

Any table can have a captiona sentence or phrase that provides some information about the table, such as a description of its contents. Although you could use an ordinary paragraph for the same purpose, a true caption may be more convenient since it is actually part of the table and thus always stays with it. If you delete the table, the caption is also deleted.
To add a caption
1. 2. 3.
Place the insertion point in a table. On the Table menu, point to Caption, and then click Insert Caption. Type the caption.
To change the position of a caption
1. 2. 3.
Right-click a table that has a caption and click Table Properties. Under Layout, click the Table caption box and select the desired caption position. Click OK.
To delete a caption
1. 2.
Place the insertion point in a table that has a caption. On the Table menu, point to Caption, and then click Delete Caption.
-When you choose Left or Right for the caption position, Internet Explorer and Namo WebEditor display the caption on top of the table with left or right alignment. Netscape 6.x -7.x, Firefox, and Opera 8 display the caption on the left or right side of the table. Netscape Navigator 4.x displays the caption centered on top of the table. Opera 6 and lower do not support table captions.
180 Tables
Using background colors and images in a table

Each cell in a table can have its own background color or image, as can the table as a whole. You can also apply a background color (but not an image) to a particular row. Cell backgrounds override row backgrounds, which in turn override table backgrounds. On the same element, a background image overrides a background color. -Netscape Navigator 4.x does not correctly support table background images. If a table background image is specified, it is applied to each cell separately.
To apply a background color or image to a table
1. 2.
Right-click the table and click Table Properties. Under Background, do one of the following: (Browse) In the Image box, enter the path or URL of an image file. You can also click (Clip Art) to select an to find and select an image file from your local file system; click (Site) to select from a list of image files image from the clip art library; or click belonging to the current local site (if one is open). o Click the Color box and select a color (p.210). Click OK. o
3.
To apply a background color or image to a cell or cells
1. 2. 3.
Select the desired cell(s). Right-click one of the selected cells and click Cell Properties. Under Background, do one of the following: (Browse) In the Image box, enter the path or URL of an image file. You can also click (Clip Art) to select an to find and select an image file from your local file system; click (Site) to select from a list of image files image from the clip art library; or click belonging to the current local site (if one is open). o Click the Color box and select a color (p.210). Click OK. o
4.
-If you apply a background image to multiple cells, the image is applied separately to each cell; it does not span the group of cells.
To apply a background color to a row
1. 2. 3.
Right-click the row, click Table Properties, and then click the Row tab. Under Background, click the Color box and select a color (p.210). Click OK.
Tables 181
Namo WebEditor 2006 User Manual To remove a background color or image on a table, cell, or row
1. 2. 3.
4.
Right-click the table, cell, or row and click Table Properties. If you are removing a row background color, click the Row tab. Under Background, do one or both of the following, as appropriate: o Delete the path or URL in the Image box. o Click the Color box and then click Default. Click OK.
Using table header cells

A special kind of table cell is called a header cell. Text in header cells is automatically formatted with center alignment and bold type. Header cells are typically used as headings at the tops of columns, but any cell can be made a header cell.
To specify cells as header cells
1. 2.
Select the cells you want to be header cells. On the Inspector, select the Header check box.
To turn header cells into ordinary cells
1. 2.
Select the headers cells. On the Inspector, deselect the Header check box.
Controlling text wrapping in a table

Ordinarily, text in a table is automatically "wrapped" (broken into multiple lines) by browsers so that the width of the table does not exceed the width of the browser window. However, there may be instances when you do not want text in a particular cell or set of cells to be automatically wrapped, even if keeping the text on one line would require the table to be wider than the window. For example, the cells in the first column of a table may contain labels that you want always to appear on a single line, regardless of the size of the browser window. In such cases, you can specify that a cell be excluded from automatic text wrapping. If a cell has the nowrap attribute, browsers will always try to keep each paragraph in the cell on a single line. If necessary, cells in other columns will be made narrower, even if they have specified widths. If other columns can be shrunk no further, the browser will make the table wider, without regard to the width of the window. -If a cell has a specified width in pixels, text in the cell will be wrapped if necessary to respect the specified width even if the nowrap attribute has been set.
182 Tables
Chapter 4: Basic Page Content and Formatting To prevent text wrapping in selected cells
1. 2.
Select the desired cell(s). On the Inspector, select the No wrap check box.
-The effect of using the nowrap attribute is not apparent in Edit mode. To view the effect of nowrap, switch to Preview mode.
Centering or right-aligning a table

If a table does not fill the available horizontal space, it will be aligned by default on the left of the parent container. However, you can specify that it be centered or right-aligned, instead.
To center or right-align a table
1. 2.
Right-click the table and click Table Properties. Under Layout, click the Alignment box and select Right or Center.
Making other content flow around a table

If a table does not horizontally fill its parent container, you can make it "float", causing content following the table to flow around the table on one side.
Example of a floating table To make following content flow around a table
1. 2.
Right-click the table and click Table Properties. Under Layout, click the Alignment box and select Left (floating) or Right (floating), depending on whether you want following content to flow around it on the right or the left.
Tables 183
Namo WebEditor 2006 User Manual To adjust the space between a floating table and adjacent content
1. 2. 3.
Right-click the table and click Table Properties. Click the Style button and then click Borders & Background. In the border selection box, select the side on which you want to adjust the table margin. To select multiple sides at once, click each while holding down the Ctrl key. (See the examples below.)
4. 5.
Enter a number in the Margin box and then click the unit box next to it and select a unit. If you do not specify a unit (p.209), the value will be interpreted as pixels. Click OK, and then click OK again to close the Table Properties dialog box.
Splitting and joining tables

To split a table into two tables
1. 2.
Place the insertion point in the row below which you want to split the table. On the Table menu, point to Convert, and then click Split Table.
-Do not split a table at a row that contains part of a cell that spans two or more rows, as the results are unpredictable.
To join two adjacent tables
1. 2.
Place the insertion point in the first table. On the Table menu, point to Convert, and then click Merge Tables.
-The tables to be joined must have the same number of columns, and there must be no other content between them (including empty paragraphs). If the column widths of the two tables are different, the column widths of the first table will be applied to the joined table.
184 Tables
Sorting and transposing tables

Rows (or columns) in a table can be sorted in ascending or descending order according to the data in up to three columns (or rows). Cell data can be evaluated as numbers or as strings of characters. See the examples below. Name Age Joe Smith 26 Joe Smith 17 Alan Alcove 51 Christy Maer 9 Helen Haunt 101
Original
Name Age Alan Alcove 51 Christy Maer 9 Helen Haunt 101 Joe Smith 26 Joe Smith 17
Sorted by column 1
Name Age Alan Alcove 51 Christy Maer 9 Helen Haunt 101 Joe Smith 17 Joe Smith 26
Sorted by column 1 then by column 2
Name Age Christy Maer 9 Joe Smith 17 Joe Smith 26 Alan Alcove 51 Helen Haunt 101
Sorted by column 2 as number
Name Age Helen Haunt 101 Joe Smith 17 Joe Smith 26 Alan Alcove 51 Christy Maer 9
Sorted by column 2 as string
A table can also be transposed, swapping rows for columns and vice versa as in the following example: Color Sign John Green Gemini Mary Taupe Aries
Original
John Mary Color Green Taupe Sign Gemini Aries

Transposed
To sort a table or part of a table
1. 2. 3.
Place the insertion point in the table to be sorted or select the cells to be sorted. On the Table menu, click Sort. If you want to sort columns, click Sort left to right under Options. To sort rows, leave the option deselected.
Tables 185
4.
5.
6.
7.
Under Sort by, select the column (or row) according to which the rows (or columns) will be sorted; specify whether to evaluate the cell contents as strings or as numbers; and specify whether to order the rows (or columns) in ascending or descending order. (optional) If the column (or row) you selected under Sort by contains some cells that have the same contents, select another column (or row) as the second sort criterion under then by and specify its sort options. You can also specify a third column (or row) to sort by. Under Options, select the desired options: o To sort only selected cells, select Sort selected cells only. o To rearrange only the contents of cells without affecting the cells' properties, such as alignment and background color, select Sort contents only. o To exclude the first or last row in the table or selection from being sorted, select Exclude the first selected row or Exclude the last selected row. Click OK.
-You cannot sort a table that contains any merged cells.

To transpose a table
1. 2.
Place the insertion point in the table to be transposed. On the Table menu, point to Convert, and then click Transpose Table.
Performing table calculations

Namo WebEditor can perform a calculation on numerical values in a table and automatically insert the result in an empty cell. The available calculations are: sum, average, maximum, minimum, number of cells in selection, number of non-empty cells in selection, variance, and standard deviation.
To perform a calculation
1.
Select at least three adjacent cells, all in the same row or column. At least one of the cells must contain a number, and the last (right-most or bottom-most) cell must be empty.
2.
Right-click any selected cell, point to Calculations, and then click the calculation you want to perform.
The result of the calculation will be inserted into the empty cell at the end of the selection.
186 Tables
The result of a sum calculation is inserted in the last selected cell.
You can also perform a calculation without selecting any cells. Just right-click any cell in a row or column in which the last cell is empty, point to Calculations, and then click the calculation you want to perform. Namo WebEditor will ask you whether to perform the calculation on the row or the column. The result will be calculated from the entire row or column. The calculations Number of Cells in Selection and Number of Non-Empty Cells in Selection do not include the last selected cell.
Converting between paragraphs and tables

You can convert a block of text consisting of words, sentences, or paragraphs into a table. You specify the number of columns and the delimiter(s) that will determine how the content is divided among cells. You can also convert a table into a series of paragraphs. The table will be scanned from left to right and then top to bottom, and the contents of each cell will become a separate paragraph.
To convert a block of text into a table
1. 2. 3.
4.
5.
Select the desired block of text. On the Table menu, point to Convert, and then click Text to Table. In the Columns box, enter the desired number of columns for the table. (The Rows box will display the number of rows the table will have, based on the selected text and the selected delimiter. You cannot specify the number of rows.) Under Delimiter, click the appropriate option depending on how you want to divide the selected text among cells: o To put each paragraph into its own cell, click Paragraph breaks. o To put each paragraph or part of a paragraph following a line break into its own cell, click Line breaks and paragraph breaks. o To put each word into its own cell, click Spaces. (You can also use multiple spaces as delimiters by entering a value of 2 or higher in the box.) o To put the whole selection into a single cell, click No delimiters. o To use another delimiter or multiple delimiters, click Other and type the desired delimiter(s) in the box. Click OK.
Tables 187
Namo WebEditor 2006 User Manual To convert a table into paragraphs
1. 2.
Place the insertion point inside the desired table. On the Table menu, point to Convert, and then click Table to Text.
188 Tables
Formatting content
Generally speaking, in the context of Web authoring, formatting is the act of modifying the appearance of textual content in some way. (Although you can also modify the appearance of images and other nontextual content, most people do not call that formatting.) Every text element in HTML has a default appearance, which is how it looks if you don't apply any specific formatting to it. For example, most Web browsers display ordinary paragraphs in a medium-sized serif font, with left alignment, and with top and bottom margins. (The exact default appearance of any particular element depends on the browser, but it is based on commonly-accepted norms. Some browsers allow users to set up their own default styles for various elements.) To override an element's default appearance, you can format it in various waysfor instance, by changing its font or alignment.
About formatting and styles

Broadly speaking, there are two techniques that Web authors use to format content. Both techniques are familiar from popular word-processing programs.
Single-instance formatting
In the first technique, formatting is directly applied to a particular piece of content (such as a paragraph, a sentence, or a word). You select the content you want to format, and then you use commands in toolbars or menus to change, for example, its font, text size, margins, or borders. We can call this technique "singleinstance" formatting, because the formatting is applied to a single instance of some content. Of course, you might apply the exact same formatting to more than one piece of content, but then you have to select and format each in turn, repeating your actions for each piece.
Styles
The second technique is far more powerful. In this technique, you define a stylea collection of appearance properties and values. Once defined, you can apply a style to any piece of content by simply selecting the style from a menu. Alternatively, you can define a style that is automatically applied to all instances of a particular type of element. For example, if you are writing an online book, you might define a style for block quotes that appear at the beginning of each chapter. You could specify that these paragraphs be indented two centimeters on both sides, use an italic font, and have taller than normal line spacing. Having defined the style, you can apply it to a paragraph by selecting the style from the Style menu on the Formatting Toolbar. As another example, you could define a style for all bulleted lists, specifying that they use square bullets and bold text; then your style would be applied automatically to all bulleted lists.
Formatting content 189
Styles are contained in a style sheet (p.191). An internal style sheet is one that is part of a documentthe style sheet exists in the <head> section of the document's HTML source, and it can only be used by that document. An external style sheet, on the other hand, exists as a separate text file. Any document can link (p.193) to an external style sheet, making the styles defined in it available to the document. Linking to an external style sheet is an extremely powerful technique, since you can alter the formatting of a whole set of documents that are linked to the same style sheet by just editing one file. Single-instance formatting and styles both have their uses, and you can use both techniques in the same documenteven on the same piece of content. With a few exceptions, any format can be applied using either technique. Use styles when you want to apply the same formatting to many or all instances of an element. Use a single-instance format when you need to override default formatting for one piece of content or to override an applied style for one instance of a content class. -The distinction between single-instance formatting and formatting using styles is only partially related to the distinction between HTML formatting and CSS formatting. Although styles use only CSS properties (not appearance-related HTML elements or attributes), single-instance formats may use HTML elements and attributes, CSS properties, or a combination of both. If a single-instance format uses CSS properties, those properties are applied using an inline declaration.
Applying a single-instance format

A single-instance format is a format that is applied to a single piece of content, rather than one that is (or can be) applied repeatedly to many pieces of content through the use of a style (p.189). Examples of singleinstance formats include: making a word or a phrase bold setting the alignment of a paragraph to "center" changing a list item to use a square bullet and italic text
To apply a single-instance format
1.
2.
Select the content you want to format. You can select a block element (such as a paragraph or a table cell), several block elements, or part of a block element (such as a letter, a word, or a sentence). Do one or more of the following: o On the Format menu, click any of Font, Paragraph, Borders & Background, or List, depending on the type of formatting you want to apply. o Click a button on the Formatting Toolbar. o Click a button or modify a value on the Inspector.
190 Formatting content
-If you want to apply the same formats to many pieces of content, it is better to define a style (p.191). You can then apply the style to any similar piece of content by selecting the style from a menu, or the style can be applied automatically to every instance of the same element.
Using style sheets

A style sheet is a collection of styles (p.189) (also called "style rules", or just "rules"). Style sheets can be internal or external. An internal style sheet is one that is part of a documentthe style sheet exists in the <head> section of the document's HTML source, and it can only be used by that document. An external style sheet, on the other hand, exists as a separate text file. Any document can link (p.193) to an external style sheet, making the styles defined in it available to the document. To create an internal style sheet for the current document, you define (p.191) one or more styles. You can then apply (p.193) the styles you have defined from the Formatting Toolbar or the Inspector (or they may be applied automatically to all elements of specified types). You can also save (p.195) the style sheet as an external file for use with other documents.
Defining a style
Before you can apply a style to something, you need to define it. There are two steps in defining a style: 1. 2. Specify the style's selectorthat is, the element type, class, or ID that the style will apply to. (See the descriptions of style types below.) Specify the properties affected by the style, and the values for those properties.
Types of styles
It is useful to identify three kinds of styles, distinguished by the type of selector they use: Element styles use an element type as the selector; thus they apply to all instances of a specific element type (for example, all paragraphs). Class styles come in two varieties: o Universal class styles use a class name by itself as the selector; thus they apply to any element that belongs to the named class (for example, any element of class "funny"). o Element-specific class styles use an element type and a class name as the selector; thus they apply to instances of a specific element type that belong to the named class (for example, paragraphs of class "callout"). ID styles use an ID as the selector; thus they apply only to the element that has the specified ID
(p.194) (for example, the paragraph whose ID is "intro").
It is possible to define a universal class style and an element-specific class style that both use the same class namefor example, ".mystyle" and "p.mystyle". In such cases, the element-specific style takes precedence for the specified element type. To understand how browsers resolve other overlapping or conflicting style rules, please refer to Cascading and Inheritance in the online CSS reference.
To define an element style
1. 2. 3. 4.
On the Format menu, click Define Style. Click (Add). Click the Element box, select an element type, and then click OK. In the Character (p.197), Paragraph (p.199), and Borders (p.200) & Background (p.203) tabs, specify values for the properties you want the style to affect, and then click OK.
To define a universal class style
1. 2. 3. 4.
On the Format menu, click Define Style. Click (Add). In the Name box, type the class name for the style, and then click OK. In the Character (p.197), Paragraph (p.199), and Borders (p.200) & Background (p.203) tabs, specify values for the properties you want the style to affect, and then click OK.
To define an element-specific class style
1. 2. 3. 4. 5.
On the Format menu, click Define Style. Click (Add). Click the Element box and select an element type. In the Name box, type the class name for the style, and then click OK. In the Character (p.197), Paragraph (p.199), and Borders (p.200) & Background (p.203) tabs, specify values for the properties you want the style to affect, and then click OK.
To define an ID style
1. 2. 3. 4. 5.
On the Format menu, click Define Style. Click (Add). Under Style type, click ID. In the Name box, type the element ID that you want the style to apply to, and then click OK. In the Character (p.197), Paragraph (p.199), and Borders (p.200) & Background (p.203) tabs, specify values for the properties you want the style to affect, and then click OK.
To edit a style
1. 2.
On the Format menu, click Define Style. Select the style you want to edit on the Style list.
3.
In the Character (p.197), Paragraph (p.199), and Borders (p.200) & Background (p.203) tabs, specify values for the properties you want the style to affect, and then click OK
Applying a class style

How you apply a class style to an element depends on what the element is. If the element is one of these... paragraph heading list item preformatted block address term definition Apply a class style by doing this: 1. 2. Place the insertion point inside the element. Do one of the following: o On the Formatting Toolbar, click the Style box and select a style. o On the Inspector, click the Class box and select a style.
-Note that if you have defined any element-specific class styles, only those that match the current element will appear in the Style or Class menu. any other kind of element 1. Select the element. (If the element cannot be selected directly in the document window, use the Tag Selector to select it.) On the Format menu, click Class/ID. In the Class box, select a style. Select the word, phrase, or other element fragment. On the Formatting Toolbar, click the Style box and select a style.
2. 3. part of a block element (such as a word or a phrase) 1. 2.
-Although you can apply any universal style to an element fragment or an inline element, some of the style's properties may be ignored by browsers because those properties apply only to whole block elements. For example, if a style specifies 20-pixel margins on all sides, and you apply the style to a paragraph fragment, the fragment will have 20-pixel margins on its left and right sides but not above and below. The exact behavior of such block-oriented properties when applied to an element fragment depends on the browser. -Some block-oriented style properties do not display correctly in Edit mode when applied to an inline element or element fragment. To view these properties, switch to Preview mode.
Assigning an ID to an element
Any element in a document can be assigned a unique ID. Although element IDs can be used in a variety of ways, the two most common uses are: Referring to an element by its ID in a script (p.256) Automatically applying a distinctive style to one element by defining an ID style (p.191)
How you assign an ID to an element depends on what the element is. If the element is a... paragraph heading list item preformatted block address term definition any other kind of element Assign it a unique ID by doing this: 1. 2. 3. Place the insertion point inside the element. On the Format menu, click Class/ID. In the ID box, type a unique ID.
1. 2. 3.
Select the element. (If the element cannot be directly selected in the document window, use the Tag Selector to select it.) On the Format menu, click Class/ID. In the ID box, type a unique ID.
-An ID must begin with a letter and may contain letters, numbers, hyphens, underscores, colons, and periods.
Linking to an external style sheet

Instead of, or in addition to, creating an style sheet in a particular document, you can create a link in the document to an external style sheet file. When you do this, all the styles in the external style sheet become available to use in the document, just as if they were defined internally. By linking several documents to the same external style sheet, you can control the styles used in them by editing just the style sheet file. It is possible to create links to multiple external style sheets in the same document, if necessary. An external style sheet file is a plain text document with a .css file name extension. You can create (p.195) an external style sheet in a text editor such as Notepad, or you can save (p.195) an internal style sheet that you have created as an external file.
Chapter 4: Basic Page Content and Formatting To link to an external style sheet
1. 2. 3. 4.
On the Format menu, click External Style Sheets. (Add External File). Click Find and select the desired external style sheet (it must have a .css extension) and then click Open. Repeat steps 2 and 3 if you want to link to additional style sheet files, and then click OK.
-If you link to an external style sheet, make sure to include the style sheet file when you publish the document to the Web. If your document is part of a local site, Namo WebEditor takes care of this for you.
To remove an external style sheet link
1. 2. 3.
On the Format menu, click External Style Sheets. In the Linked style sheets list box, select an external style sheet. Click (Remove) and then click OK.
Saving an internal style sheet as an external style sheet

If you save an internal style sheet as an external style sheet file, you can create links in other documents to the style sheet, making its styles available in the other documents. -Saving an internal style sheet as an external file does not automatically create a link to the external style sheet file. Also, once you save an internal style sheet as an external style sheet, any changes you make in the internal style sheet do not affect the external style sheet.
To save an internal style sheet as an external style sheet
1. 2. 3.
On the Format menu, click Define Styles. Click (Save As External File). Navigate to the folder where you want to save the external style sheet, enter a file name, and then click Save.
Editing an external style sheet with a text editor

An external style sheet is a plain text file with a .css file name extension. Since it is plain text, you can edit it in any text editor, such as Notepad. An external style sheet contains one or more style rules. Each rule consists of a selector followed by one or more declarations within curly braces. An example is shown below:
A sample style rule for blockquote elements
For more information about the syntax of style rules, please refer to CSS Syntax in the online CSS reference. While an explanation of cascading style sheets is outside the scope of this guide, Namo WebEditor's online CSS reference includes full descriptions of all of the visual-oriented properties of Cascading Style Sheets Level 2 (CSS 2). The reference can help you understand how CSS rules are constructed, as well as what kinds of values can be used with each property.
To edit an external style sheet with a text editor
1. 2. 3.
On the Format menu, click External Style Sheet. In the Linked style sheets list box, select an external style sheet. Click (Edit Contents). The style sheet file will be opened in Notepad.
Working with multiple style sheets

A document can have only one internal style sheet, but it can contain links to any number of external style sheets. Using multiple style sheets can be beneficial for many reasons. For example, you could have a general style sheet that applies to all the documents in a site, a special style sheet that is used by a particular subset of documents, and finally an internal style sheet in a specific document that provides styles just for that document. Namo WebEditor has two features to help you use multiple style sheets in your documents: You can add, remove, or reorder linked style sheets for the current document with the External Style Sheets dialog box (click External Style Sheets on the Format menu). When you use the Styles dialog box (click Define Styles on the Format menu) to add or edit a style, you can use the style sheet selector to select the style sheet you want to add a style to or edit a style in. The selector lists both the document's internal style sheet and all linked style sheets.
When you use multiple style sheets, their order of precedence determines which style sheet will "win" if they happen to contain rules with identical selectorsThe part of a style rule that defines which element type, class, or ID it applies to. and conflicting properties. The order of precedence is determined by the positions of the <style> (for an internal style sheet) and <link> (for external style sheets) elements in the <head>
section of the document. Style sheets are given increasing priority from top to bottom. The lower a style sheet's position in the <head> section is, the higher its priority is. You can control the precedence order of multiple style sheets using the External Style Sheets dialog box. To raise a style sheet's priority, place it lower on the list.
To edit an external style sheet with a text editor
1. 2. 3. 4. 5.
On the Format menu, click External Style Sheet. In the Linked style sheets list box, select a a style sheet. (The document's internal style sheet is listed as "<style></style>".) Click (Up) to lower the style sheet's priority, or click (Down) to raise it. If necessary, repeat steps 2 and 3 until the style sheets are in the desired order. Click OK.
For more information about how conflicting style rules are resolved, refer to Cascading and Inheritance in the online CSS reference.
Setting character-related properties

Character-related formatting includes such properties as font, font size, font style, font decoration, and so forth. You can directly change the character properties of a text selection, or you can include character properties in a style (p.189) that you apply to elements or element fragments.
To change the character formatting of selected text
1. 2. 3.
Select the text you want to format. On the Format menu, click Font. Specify values for the properties you want to apply to the text. (See the property descriptions below.) -To quickly change the font, size, color, or background color of selected text, use the Inspector or the Formatting Toolbar.
To include character properties in a style
1. 2. 3.
On the Format menu, click Define Styles. In the Style list, select the style you want to modify. (Or create (p.191) a new style.) Click the Character tab and specify values for the properties you want to include in the style. (See the property descriptions below.)
Namo WebEditor 2006 User Manual General properties
Font Size Weight Style Font color Bg color

Decoration
Specifies the font family. Specifies the font size. If you do not specify a unit (p.209), pixels are used. Specifies the thickness of characters. A numeric value sets the font weight on a scale from 100 (lightest) to 900 (darkest). 400 is equivalent to "normal"; 700 is equivalent to "bold". Specifies the font style: normal, italic, or oblique. Specifies the text color. Click the box and select a color (p.210). Specifies the background color. Click the box and select a color (p.210).
Underline Upperline Strikethrough Blinking None
The text will be displayed with an underline. The text will be displayed with an overline. The text will be displayed with a line through the center. The text will blink periodically. (Netscape only) Clears all text decoration. This is useful when you want to override text decoration specified in a style.
Spacing
Letter Word
Specifies the amount of space between characters. If you do not specify a unit (p.209), pixels are used. Specifies the amount of space between words. If you do not specify a unit (p.209), pixels are used.
Additional character formats (only in Font dialog box)
If you are directly formatting selected text (that is, you are not defining a style), several more properties are available when you click the More button in the Character Styles dialog box. Citation Code Keyboard Blinking Definition Sample Strong Emphasis Variable Marks the text as a citation; displayed in italics by most browsers. Marks the text as a code sample; displayed in a monospaced font by most browsers. Marks the text as text to be entered by the user; displayed in a monospaced font by most browsers. Makes the text blink periodically. (Netscape only) Marks the text as the defining instance of a term; displayed in italics by most browsers. Marks the text as sample output from a computer program; displayed in a monospaced font by most browsers. Marks the text as strongly emphasized; displayed in a bold font by most browsers. Marks the text as emphasized; displayed in italics by most browsers. Marks the text as a variable; displayed in italics by most browsers.
Setting paragraph alignment, indentation, and line height

You can directly change the alignment, indentation and/or line height of a particular paragraph, or you can include these paragraph-related properties in a style (p.189) that you apply to some or all paragraphs. These properties also affect other block elements, including headings, list items, and preformatted blocks.
To directly set the alignment of a paragraph
1. 2.
Place the insertion point in the desired paragraph. Do one of the following: o On the Inspector, click the Alignment box and choose an alignment setting. o On the Formatting Toolbar, click (Align Left), (Align Center), or (Align Right). o On the Format menu, click Paragraph, click Text alignment, and then choose an alignment setting.
-The Justify alignment setting, which distibutes the words in each line of a paragraph so that both sides are even, is only available when you use the third method listed above.
To directly set the indentation of a paragraph
1. 2. 3. 4.
Place the insertion point in the desired paragraph. On the Format menu, click Paragraph. Under Indentation, enter the desired amount in either or both of the Left and Right boxes for left and right indentation, respectively. If you do not specify a unit (p.209), pixels will be used. If you want the first line of the paragraph to use a different indentation amount, enter the desired amount in the First line box. -To quickly change only the left indentation of a paragraph, click (Decrease Indent) on the Formatting Toolbar. (Increase Indent) or
To directly set the line height of a paragraph
1. 2. 3.
Place the insertion point in the desired paragraph. On the Format menu, click Paragraph. Under Spacing, do one of the following: o Click the Presets box and select a preset: Normal sets the line height to the default value determined by the browser Tight sets the line height to the default and the top and bottom margins to zero 150% sets the line height to 150% of the paragraph's font size 200% sets the line height to twice the paragraph's font size
4.
Enter a number in the Line height box. If you do not specify a unit (p.209), the value will be interpreted as a multiple of the paragraph's font size. If you want to specify the top and bottom margins for the paragraph, enter values in the Before and After boxes. o
-Specifying Before and After values has the same effect as specifying top and bottom margin (p.200) values.
To specify alignment, indentation, and line height in a style
1. 2. 3.
On the Format menu, click Define Styles. In the Styles list, select the style you want to modify. (Or create (p.191) a new style.) Click the Paragraph tab and specify values for the properties you want to include in the style. (See the instructions above for each type of paragraph property.)
Setting margins, padding, and borders

Margins, padding, and borders are properties that you can modify for any element, and also for parts of elements, such as words and sentences. All of these properties can be specified differently for each side of an element. Borders are lines surrounding an element. Borders come in various styles, widths (thicknesses), and colors. Margins are empty space surrounding an element. Margins increase the distance between an element and its neighbors. If an element has a visible border, its margins take up space outside the border. Padding is empty space between an element's contents and its borders.
The relationships among margins, padding, and borders can be visualized through a floating box example:
The relationships among margins, padding, and borders
You can directly change the margins, padding, and borders of a particular paragraph, heading, or list item. You can also include these properties in a style (p.189) that you apply to any element. -You cannot directly modify margins, padding, or borders for elements other than paragraphs, headings, list items, and preformatted blocks. To modify these properties for another type of element, include the properties in a style and apply (p.193) the style to the element.
To directly set a paragraph's margins and/or padding
1. 2. 3.
Place the insertion point in the desired paragraph. On the Format menu, click Borders & Background. In the border selection box, select the side for which you want to set the margin and/or padding. To select multiple sides at once, click each while holding down the Ctrl key. (See the examples below.) To select all four sides, click Select All. To deselect all sides, click in the middle of the box. By default, all four sides are selected.
4.
To set the margin, enter a number in the Margin box and then click the unit box next to it and select a unit. If you do not specify a unit (p.209), the value will be interpreted as pixels.
5. 6. 7.
To set the padding, enter a number in the Padding box and then click the unit box next to it and select a unit. If you do not specify a unit (p.209), the value will be interpreted as pixels. Repeat steps 3 through 5 if you want to set a different margin and/or padding value for another side. Click OK.
To directly set a paragraph's borders
1. 2. 3.
Place the insertion point in the desired paragraph. On the Format menu, click Borders & Background. In the border selection box, select the side for which you want to set the border. To select multiple sides at once, click each while holding down the Ctrl key. (See the examples below.) To select all four sides, click Select All. To deselect all sides, click in the middle of the box. By default, all four sides are selected.
4. 5. 6. 7. 8.
Click the Style box and select a border style. Click the Color box and select a color (p.210). In the Width box, enter a number and then click the unit box next to it and select a unit. If you do not specify a unit (p.209), the value will be interpreted as pixels. Repeat steps 3 through 6 if you want to set a different border for another side. Click OK.
To include margin, padding, and border settings in a style
1. 2. 3.
On the Format menu, click Define Styles. In the Styles list, select the style you want to modify. (Or create (p.191) a new style.) Click the Borders & Background tab and specify values for the properties you want to include in the style. (See the instructions above for each type of property.)
-You can set margins, padding, and borders all at the same time by specifying settings for each property before closing the Style dialog box.
Setting background colors and images

Any element can have a background color or image. For some elements, you can set these properties directly. You can also include these properties in a style (p.189) that you apply to any element.
To set a background color or image on a paragraph, heading, or list item
1. 2. 3.
4.
Place the insertion point in the desired paragraph. On the Format menu, click Borders & Background. Under Background, do one of the following: o Click the Color box and select a color. o Enter the path or URL to an image file in the Image box. To select a file on the local file system, click Browse. To specify options for the background image, click Options. Click OK.
-When you set a background color on a paragraph or similar element, the background fills the entire space between the left and right sides of the element's parent container (such as a table cell or the browser window), even if the element's content only takes up part of the space. To avoid this, select the text of the element and set the background color on the selection.
To set a background color on a text selection
1. 2.
Select the desired text. Do one of the following: o o On the Formatting Toolbar, click (Text Background Color) and select a color (p.210). On the Inspector, click the BG color box and select a color (p.210).
To set a background color or image on a table, row, or cell
1. 2.
3.
Place the insertion point in the desired table, row, or cell. On the Tag Selector, do one of the following: o Click <table> to select the table o Click <tr> to select the row o Click <td> to select the cell On the Inspector, do one of the following: o To set the background color, click the Background or Background Color box and select a color (p.210). o To set the background image, enter the path or URL of an image file in the Background (Browse). box. To select a file on the local file system, click
Namo WebEditor 2006 User Manual To set a background color or image on a layer or floating box
1. 2.
3.
Double-click the layer or floating box's outline. Under Background, do one of the following: o Click the Color box and select a color (p.210). o Enter the path or URL to an image file in the Image box. To select a file on the local file (Browse). system, click Click OK.
To set the document's background color or image
1. 2.
3.
On the File menu, click Document Properties. Do one of the following: o Under Colors, click the Background box and select a color (p.210). o Under Background image, enter the path or URL to an image file. To select a file on the (Browse). local file system, click Click OK.
To specify a background color or image in a style
1. 2. 3. 4.
On the Format menu, click Define Styles. In the Styles list, select the style you want to modify. (Or create (p.191) a new style.) Click the Borders & Background tab. Under Background, do one of the following: o Click the Color box and select a color (p.210). o Enter the path or URL to an image file in the Image box. To select a file on the local file system, click Browse. To specify options for the background image, click Options.
Using the Formatting panel

The Formatting panel, one of the tool panels on the right side of Namo WebEditor's main window, provides a quick way to apply a style or format to the current paragraph or selected content. It lists all of the styles, from both internal and external style sheets, that can be selectively applied to the current context, including both universal class stylesA style that can be selectively applied to any element or part of an element. and element-specific class stylesA style that can be selectively applied to instances of a specific type of element, such as hyperlinks.. It does not list styles that are automatically applied to all instances of a specific element type, nor does it list ID-based styles. The list of styles that appear on the Formatting panel is context-sensitive. Only the styles that can be applied in the current context are listed. As a result, the list of styles may change depending on whether, say, the insertion point is in a normal paragraph or you have selected a table cell.
Styles on the Formatting panel are listed by class only, including element-specific class styles. For example, a style with selector p.special will be listed as ".special". If there are multiple styles whose selectors include the same class but different element types, and all are applicable to the current context, they are combined into one listing on the Formatting panel. For example, if one style has selector .special and another has selector p.special, they will both be represented by a single listing, ".special", on the panel. The Formatting panel also lists the six standard heading levels. Clicking a heading level converts the current paragraph (or paragraph-like elementParagraph-like elements include headings, list items, preformatted text blocks, addresses, terms, and definitions.) to a heading. If you prefer not to see the heading levels on the Formatting panel, clear the Show heading levels check box at the top of the panel. Clicking Clear CSS Class at the top of the style list removes any class-based styles from the current paragraph or selected content. To reveal the Formatting panel: on the View menu, point to Panels, and then click Formatting. You can use the Formatting panel to: Quickly apply a listed style to the current paragraph or selected content Quickly change a paragraph or paragraph-like element to a heading Quickly remove all class-based styles from the current paragraph or selected content Add a new universal class style (optionally based on the formatting of the current paragraph or selection) Modify or delete a listed style Modify the style of a heading level
Applying a style or heading level with the Formatting panel

To change a paragraph into a heading
1. 2.
Place the insertion point in the paragraph or paragraph-like element you want to change into a heading. Click the desired heading level (H1 H6) on the Formatting panel.
If you apply a heading level to a list item in the middle of a list, the list will be split into two parts, one before and one after the affected item.
To apply a style to a paragraph
1. 2.
Place the insertion point in the paragraph or paragraph-like element you want to format. Click the desired style on the Formatting panel.
Namo WebEditor 2006 User Manual To apply a style to a text selection
1. 2.
Select the text you want to format. Click the desired style on the Formatting panel.
To apply a style to any element
If you want to apply a style to a non-paragraph element, such as a table cell, you must select it first. 1. Using the Tag Selector, select the element you want to format. 2. Click the desired style on the Formatting panel. You can apply multiple styles to the same content. Hold down the Ctrl key while clicking each additional style.
Removing styles applied with the Formatting panel

To remove styles from a paragraph
1. 2.
Place the insertion point in the paragraph or paragraph-like element from which you want to remove all styles. Click Clear CSS Class on the Formatting panel.
To remove styles from a text selection
1. 2.
Select the text from which you want to remove all styles. Click Clear CSS Class on the Formatting panel.
To remove styles from any element
1. 2.
Using the Tag Selector, select the element from which you want to remove all styles. Click Clear CSS Class on the Formatting panel.
The Clear CSS Class command on the Formatting panel works by removing the class assignment (if any) from the current paragraph or selection. The command does not remove any single-instance formats that you may have applied to the paragraph or selection.
Adding, editing, or removing a style in the Formatting panel

You can use the buttons at the bottom of the Formatting panel to add a universal styleA style that can be selectively applied to any element or part of an element. or a list style.
Chapter 4: Basic Page Content and Formatting To add a universal style
1. 2. 3. 4.
On the Formatting panel, click (Add). In the Name box, type a name for the new style. Under Type, select General, and then click Define Style. Specify the desired properties for the new style and then click OK. For information about setting style properties, see the following topics: o Setting character-related properties, p.197 o Setting paragraph alignment, indentation, and line height, p.199 o Setting margins, padding, and borders, p.200 o Setting background colors and images, p.203
To add a universal style based on an existing universal style
1. 2. 3. 4. 5.
Place the insertion point in a paragraph to which a universal style has been applied. On the Formatting panel, click (Add From). In the Name box, type a name for the new style. Under Type, select General, and then click Define Style. Specify the desired properties for the new style and then click OK. (The properties of the existing style will have been copied to the new style.) For information about setting style properties, see the following topics: o Setting character-related properties, p.197 o Setting paragraph alignment, indentation, and line height, p.199 o Setting margins, padding, and borders, p.200 o Setting background colors and images, p.203
To add a list style
1. 2. 3. 4. 5.
6. 7.
On the Formatting panel, click (Add). In the Name box, type a name for the new style. Under Type, select List, and then click Define Style. Click the Type button corresponding to the desired list type. Do one of the following: o If you selected Bullet or Number list type, click the Style box and select the desired bullet or number style. o If you selected Image list type, in the Image path box, enter the path or URL to the image file you want to use as the list marker. If you wish, specify the Left, Right, and/or First line margins for list items. Click OK.
Namo WebEditor 2006 User Manual To modify a style on the Formatting panel
1. 2. 3.
Point to the style you want to change in the Formatting panel, click the triangle, and then click
Modify.
Click Define Style. Make the desired changes to the style and then click OK. For information about setting style properties, see the following sections: o Setting character-related properties, p.197 o Setting paragraph alignment, indentation, and line height, p.199 o Setting margins, padding, and borders, p.200 o Setting background colors and images, p.203
To rename a style on the Formatting panel
1. 2.
Point to the style you want to rename in the Formatting panel, click the triangle, and then click Modify. In the Name box, type the new name, and then click OK.
To remove a style o the Formatting panel
Point to the style you want to remove in the Formatting panel, click the triangle, and then click Delete.
-If you modify or remove a style located in an external style sheet, Namo WebEditor cannot undo the operation. -You cannot remove any of the built-in heading levels that appear in the Formatting panel.
Modifying the default style of a heading level

To modify the default style of a heading level
1. 2. 3.
Point to the heading level you want to change o the Formatting panel, click the triangle, and then click Modify. Click Define Style. Make the desired changes to the style and then click OK. For information about setting style properties, see the following topics: o Setting character-related properties, p.197 o Setting paragraph alignment, indentation, and line height, p.199 o Setting margins, padding, and borders, p.200 o Setting background colors and images, p.203
Chapter 4: Basic Page Content and Formatting To reset the default style of a heading level
1. 2.
Point to the heading level you want to reset in the Formatting panel, click the triangle, and then click Reset. If the heading style is defined on more than one style sheet, select the style you want to remove, and then click Remove. Otherwise, just click Remove.
Understanding measurement units

In many cases, when you enter a number as the value of an attribute or propertyfor example, font size you are given the choice of what unit to use. The units you can use in Namo WebEditor are described below. -It is usually not necessary to specify a unit, even when the choice is given. If you do not specify a unit, the default unit will be used. The default unit depends on the property or attribute being modified, but most often it is pixels.
Common length units
These units are used in cascading style sheet (CSS) properties that take a length value, such as margins and borders. For more information, please refer to CSS Value Types in the online CSS reference. Unit inches points picas cm mm pixels em ex % Abbr. in pt pc cm mm px em ex % Meaning inches 1/72 of an inch 12 points centimeters millimeters pixels (units of screen resolution) a unit equal to the current font size a unit equal to the "x-height" of the current font percentage of base value*
*The base value for a % value depends on the property being modified. For font sizes, the base value is the calculated font size of the parent element.
Special font size values
These unitless values are used only for font sizes.
Unit 1~7 xx-small x-small small medium large x-large xx-large smaller larger
Notes Size on a scale from 1 (smallest) to 7 (largest). The exact size corresponding to each number depends on the browser, but "3" usually corresponds to 12pt. The exact size corresponding to each keyword depends on the browser.
Sets the font size one "step" smaller or larger than the font size of the parent element. The size of each step depends on the browser.
Selecting colors
Using the Color Palette
Any time you need to specify a color in Namo WebEditor, the primary interface is the Color Palette.
The Color Palette
Using the Color Palette is easy: just click a color. To restore the default color for the current item or property, click Default.
If the color you need is not on the palette, try one of these features: Color Picker button Click to open the Color Picker (p.211). In the Color Picker, you can select any 24-bit RGB color or define additional custom colors. Eyedropper Drag the eyedropper to any visible part of the screen to "pick up" the color underneath the pointer. Hex box Enter a hexadecimal color code in the box at the top left corner of the palette and press Enter. Color Set menu Click and select a color set. (The default color set is Web-Safe Colors.) You can also add more color sets to this menu from the Color Sets (p.37) tab of the Resource Manager. Click Manage Color Sets to do so. Custom Colors This area shows the custom colors you have defined. To add more custom colors, click the Color Picker (p.211). Recent Colors This area shows the colors you have used recently.
Using the Color Picker
to open
Use the Color Picker to select any 24-bit color.
The Color Picker
The Color Picker provides six ways to select or specify a color: HSB palette: Drag the slider on the vertical bar to select a hue, and then click inside the large gradient box to select a saturation and brightness level. Color palette: Click a color in the horizontal palette. Hex color code: Enter a hexadecimal color code in the HTML box. RGB values: Enter RGB values in the Red, Green, and Blue boxes. HSB values: Enter HSB values in the Hue, Saturation, and Brightness boxes. Eyedropper: Drag the eyedropper to any visible part of the screen to "pick up" the color underneath the pointer.
In addition, you can add any color to the palette of custom colors that is part of the Color Palette (p.210). To add a custom color: 1. Click one of the 36 custom color slots under Custom Colors. 2. Select or specify the color you want to save as a custom color. 3. Click Add to Custom Colors. -If you have already selected the color you want, clicking a custom color slot will replace your color with the color already in that slot. To avoid this, after selecting your color, press the Tab key until the keyboard focus is in the slot area, and then press the arrow keys to select the desired slot. Then, click Add to Custom Colors.
Copying and pasting formatting

You can use the clipboard to copy formatting from one element to another element. Items you can copy and paste include character formatting, paragraph formatting, image attributes, table properties, cell properties, hyperlinks, bookmarks, and chart properties.
To copy and paste formatting
1. 2. 3. 4. 5.
Place the insertion point in the paragraph, word, table, or table cell, or select the image, whose formatting you want to copy. On the Edit menu, click Copy Format, or press Shift+F2. Select the types of properties you want to copy, and click OK. Place the insertion point in the paragraph, table, or table cell, or select the text or image, to which you want to copy the formatting. On the Edit menu, click Paste Format, or press F2.
-When pasting a background color into a table, Namo WebEditor will prompt you to specify whether to apply the background color to the whole table, the current cell, or the whole document.
Document properties
Every Web document has certain properties that apply not to individual elements but to the document as a whole. These properties include the document's title, its default colors, meta tags, and so forth. In Namo WebEditor, you can view and modify these properties in the Document Properties dialog box: on the File menu, click Document Properties.
Setting a document's title

A document's title is the word or phrase that appears in the title bar of a browser window when the document is viewed. Besides giving users a hint about what they are viewing, the title is also used by Web search engines to identify a document in search results, and it is used by browsers when a user creates a bookmark or "favorite" for a document. Therefore, it's a good idea to give each document a meaningful title.
To set a document's title
1. 2.
On the File menu, click Document Properties, and then click the General tab. In the Title box, type the desired title.
-If you don't specify a title for a document before saving it for the first time, Namo WebEditor automatically generates one based on the first line of text in the document. You can change the generated title in the Title box of the Save As dialog box.
Specifying keywords and other meta data

In addition to the title, you can add several other bits of information to a document that may be useful for Web search engines or your own site management practices. If you specify this meta data, Namo WebEditor puts it in meta tags in a document's header. Meta tags are not normally visible in browsers, but they can be used by other software to help categorize and manage documents. The basic meta tags supported by Namo WebEditor include: Keywords Keywords can be used by search engines to help categorize documents according to content. For example, if you are creating a document about dinosaurs, adding the keyword "dinosaurs" can help a search engine add your document to the "dinosaurs" category of a Web directory. You can enter multiple keywords separated by commas.
214 Document properties
Author The "author" meta tag is used to provide the name of the person or organization that authored the document. Classification This meta tag can be used in a variety of ways by you or your organization. For example, if a company wants to categorize its intranet documents according to function, it could put a keyword like "product_data" or "personnel" in the "classification" meta tag of each document. Description The "description" meta tag can be used to provide a brief description of the contents of the document.
To specify keywords or other meta data
1. 2. 3.
On the File menu, click Document Properties, and then click the General tab. Enter appropriate meta data in any or all of the Author, Classification, Description, and Keywords boxes. Click OK.
Searching meta data
Once you have added meta data to several documents, you can search that meta data using Namo WebEditor's global find and replace (p.364) command or a search program. If you want to make sure that your search only matches words in a particular meta tag, use the following syntax in your search string: meta name="name" content="keyword" where name is the type of meta tag you want to search and keyword is the word or phrase you want to find. For example, to find all the documents in a site or a folder that have an "author" meta tag with the content "John Smith", you would use the following search string: meta name="author" content="John Smith"
Specifying a character set

A character set is a table of mappings from numerical codes to text characters. As you probably know, computers represent text using a distinct numeric code for each character, be it a letter, a numeral, a punctuation mark, or something else. However, there are many ways to map characters to codes. For example, in ISO-8859-1the standard Internet character set for computers running the U.S. English version of Windows, also known as Western European (ISO)the decimal code 92 represents a backslash ("\"), but in the EUC-KR character set, it represents the Korean currency symbol ( -).
Document properties 215
Because of the international nature of the Web, the character set in which a document is viewed by a particular user may not be the same as the character set in which it was written. If you live in the United States and compose in English, your documents probably use some variant of ASCII, such as ISO-8859-1. But if your document is viewed by a user in Korea using the Korean version of Windows, her browser probably expects the document to use a Korean character set. This can result in some characters not appearing correctly on the user's screen. To avoid this problem as much as possible, it's a good idea to specify the character set that a document uses. Doing so tells browsers to display your document in that character set. If you don't specify a character set, browsers will usually display your document in the default character set specified by the user, which may be very different from the character set the document was authored in. Note that specifying a character set doesn't actually change the character codes in a document. It just tells browsers how they should interpret those codes.
To specify a character set for a document
1. 2.
On the File menu, click Document Properties, and then click the General tab. Do one of the following: o Click the left Character set box and select a character set by its title (for example, Western European (ISO)). The right box will show the code name of the selected character set. The value User-defined means "Do not specify a character set." o Click the right Character set box and select a character set by its code name (for example, iso-8859-1). You can only select an item in this box if the selection in the left box is User-defined, and only a few character sets can be selected this way.
-If you compose documents in a non-Western European language, such as Korean, users who do not have fonts installed on their computers that are compatible with the fonts you use in your documents will not be able to view your documents correctly, even if you correctly specify the character set.
Setting a document's base URL

If a document contains relative hyperlinks (p.147), Web browsers by default interpret those links as being relative to the location of the document in the site's folder hierarchy. For example, if the document located at http://www.namo.com/products/index.html contains a link to an image file using the relative path "images/example.gif", then browsers will expand the URL to the image file as http://www.namo.com/products/images/example.gif, since they will take "images" to be a subfolder of the folder containing the document, which is "products". You can change the way browsers interpret relative links in a document by specifying a base URL for the document. If you specify a base URL, browsers will ignore the location of the document in the site structure and instead interpret relative links in relation to the specified URL. Following the example given
above, if the base URL of the index.html document is set to "http://www.namo.com/", then browsers will expand the relative link "images/example.gif" to http://www.namo.com/images/example.gif. When specifying a base URL, you must provide a full Internet URL, such as "http://www.example.com/", "http://www.example.com/photos/", or "http://www.example.com/photos/index.html". Partial URLs, such as "/photos", wil be ignored by browsers. Some browsers let you omit the leading "http://" from a base URL, but other browsers do not, so it's a good idea to always include it. If the URL includes a folder path after the site name (but no file name), make sure to include a final slash at the end.
To set a document's base URL
1. 2.
On the File menu, click Document Properties, and then click the General tab. In the Base URL box, type the desired base URL.
Setting a default target for hyperlinks

When you create a hyperlink, you can specify that its destination be opened in a particular window or frame. This window or frame is called the link's target (p.151). But it is also possible to set a default target for all the links in a document. If you do so, any link that does not have its own specified target will open in the target specified for the document.
To set a default target for the hyperlinks in a document
1. 2.
On the File menu, click Document Properties, and then click the General tab. In the Default target box, type the name of a window or frame.
Four special targets can be selected if you click the triangle on the Default target box: _blank _parent Links will open in a new window. If the current document is part of a frameset (p.88), its links will open in the frameset's parent container, replacing the frameset. The parent is usually the browser window, but if the frameset is being displayed in a frame of another frameset, then the parent is the containing frame in the higher-level frameset. Links will open in the current window (or frame, if the document is part of a frameset). Links will open in the current window (replacing the frameset, if the document is part of a frameset).
_self _top
To override the default target for a specific hyperlink
1. 2.
Double-click the hyperlink. In the Target box, enter the name of a window or frame. To select a frame visually, click (Select Target Frame).
-You can only set the default target to a particular window if the window has a name. In general, only windows that are created by scripts have names. Therefore, only a window created by a script can be a default target. One way to create a named window to use as a default target is to use a script that creates a new window as soon as the current document is opened. You can do this using the Script Wizard's Pop-up window script.
Setting default document colors

In the Appearance tab of the Document Properties dialog box, you can specify certain colors that apply to an entire document: Label Background Text Hyperlinks Visited links Active links Description The color of the document's background The default color of text The default color of normal hyperlinks The default color of visited hyperlinks The default color of the active hyperlink Default white black blue purple red
To change the background color, default text color, or default hyperlink colors of a document
1. 2.
On the File menu, click Document Properties, and then click the Appearance tab. For each color you want to specify, do one of the following: o Enter a hexadecimal color code. o Click the color box and select a color (p.210).
To copy the background color, default text color, and default hyperlink colors from another document
1. 2. 3.
On the File menu, click Document Properties, and then click the Appearance tab. Click the Copy Colors From button. Find and select the document you want to copy colors from, and then click Open. (You can also enter a URL in the URL box and click Open URL.)
Setting document scrollbar colors

Internet Explorer 5.5 and later versions support the ability to specify the colors used in document scrollbars and text boxes in forms. You can set these colors in the Scrollbar Colors dialog box. A total of eight different colors (one base color and seven colors for various parts of the scrollbar) can be specified, although you don't have to specify all of them.
Base color 3D light color Arrow color Dark shadow color Highlight color Face color Shadow color Track color
Specifies a single color for most parts of the scrollbar. Specifying a color for any part overrides the base color for that part. The outer highlight color of the scrollbar box and arrows The color of the small triangles in the scrollbar arrows The outer shadow color of the scrollbar box and arrows The inner highlight color of the scrollbar box and arrows The main color of the scrollbar box and arrows; also sets the color of the track if not separately specified The inner shadow color of the scrollbar box and arrows The color of the scrollbar track
To set a document's scrollbar colors
1. 2.
On the Format menu, click Scrollbar Colors. For each color you want to specify, click the corresponding color box and select a color (p.210).
The Preview box displays a preview of your selected colors. The Component box highlights the scrollbar part whose color you are modifying. -Scrollbar colors are only supported by Internet Explorer 5.5 or later. Other browsers will ignore the specified colors. -If you specify at least one scrollbar color, the new-style scrollbars used by Internet Explorer on Windows XP computers will revert to the pre-Windows XP style.
Setting a document background image

A document can have a background imagean image that lies "under" the document's content. A background image repeats to fill the document, no matter how large the window in which the document is open is.
To set a background image on a document
1. 2.
On the File menu, click Document Properties, and then click the Appearance tab. In the Background image box, type the path or URL to an image file, or do one of the following: o o o Click Click (Browse) to find and select an image file from your local file system. (Clip Art) to select an image from the clip art library.
(Site) to select from a list of image files belonging to the current local site (if Click one is open).
-Alternatively, you can set a document background image by using the background-image cascading style sheets property on the <body> element of a document. This method provides greater flexibility, since you can use the property in combination with the background-attachment, background-position, and background-repeat properties to control the background image's scrolling, starting position, and repetition characteristics.
Setting document margins

A document's margins are the blank space between its content and the left and top edges of the window. In most documents, the size of these margins is not specified, so browsers use their own default margins. However, you can specify the size in pixels of the left and top margins in the Styles tab of the Document Properties dialog box.
To set a document's left and top margins
1. 2.
On the File menu, click Document Properties, and then click the Styles tab. Under Margins, enter a number of pixels in either or both of the Left and Top boxes to specify the left and top margin, respectively.
Alternatively, you can set a document's margins by using the margin properties of cascading style sheets on the document's <body> element. This approach is more flexible, because you can specify the length unit for the margin size and specify margins also for the right and bottom edges of the document.
To set a document's margins using a style
1. 2. 3. 4. 5.
On the File menu, click Document Properties, and then click the Styles tab. Click the Add Style to <BODY> Tag button. Click the Borders & Background tab. Enter margin sizes for each side for which you want to specify a margin. (See Setting margins, padding and borders, p.200.) Click OK twice.
Adding page transitions

Internet Explorer supports a feature called page transitions. A page transition is a visual effect that occurs when a user enters or leaves a document or site, similar to the transition effects sometimes seen between scenes in movies and videos. Available effects include "wipes", "blinds", and so forth. There are four distinct events, or triggers, that you can specify to initiate a page transition: Page Entry: When the user enters (opens) the document
Page Exit: When the user leaves the document (by going to another document or closing the window) Site Entry: When the user enters the document from another site (but not from another page on the same site) Site Exit: When the user leaves the document and goes to another site
These events are not mutually exclusive, so (for example) you could specify one transition effect that occurs when a user enters the document and another effect that occurs when a user leaves the document. If one document specifies an exit transition and another document, linked from the first document, specifies a different entry transition, the entry transition takes precedence when a user clicks the link.
To add a page transition to a document
1. 2. 3. 4. 5. 6.
On the File menu, click Document Properties, and then click the Styles tab. Under Page transitions, click the Event box and select the trigger for the transition effect. Click the Effect box and select the desired effect. In the Duration box, enter the number of seconds you want the transition to take. If you want to add a transition effect for another event, click Apply and then repeat steps 2 through 4. Click OK.
To remove a page transition
1. 2. 3.
On the File menu, click Document Properties, and then click the Styles tab. Under Page transitions, click the Event box and select an event for which a transition effect was previously specified. Click the Effect box and select None.
-Page transitions are only supported by Internet Explorer 4.0 and later.
Adding a background sound

Internet Explorer supports the ability to play an audio file"in the background", so to speakwhen a document is opened. The supported audio file types are: WAVE (.wav), MIDI (.mid), AIFF (.aif, .aifc, .aiff), and AU (.au, .snd). You can specify how many times the sound should repeat, or that it should repeat endlessly.
To add a background sound to a document
1. 2.
On the File menu, click Document Properties, and then click the Styles tab. Under Background sound, enter the path or URL to an audio file in the Path box. Click Browse to browse for a file on your local file system.
3. 4. 5.
In the Repeat box, enter the number of times the sound should play, or select Repeat forever. If you want to listen to the sound file you specified, click . To stop playing the sound, click . Click OK.
-Background sounds are only supported by Internet Explorer.
Setting up an automatic refresh or redirect

For some kinds of time-sensitive documents, it might be desirable to instruct browsers to automatically reload a document at regular intervals. For example, if you have a document that displays local weather information collected from a frequently updated data source, you might want browsers to auto-refresh the page every ten minutes, saving users the effort of clicking the Refresh button. In other cases, after a browser loads a document, you might want it to automatically load (redirect the user to) a different document, possibly after a brief delay. An example is the common situation in which an author or webmaster has moved a document to a new location, but some users might still use links or "bookmarks" that point to the old location. In such cases, you might want to put a temporary document in the old location; the temporary document can advise users to update their links or bookmarks and then have the browser automatically jump to the new location. You can set up either action in the Advanced tab of the Document Properties dialog box.
To set up an automatic refresh interval
1. 2. 3. 4.
On the File menu, click Document Properties, and then click the Advanced tab. Under Auto refresh/redirect, in the URL box, enter the name of the current document. (Do not leave the box empty.) In the Delay time box, enter the number of seconds between refreshes. (For example, enter "300" for a 5-minute interval.) Click OK. -If there is a possibility that the document will be renamed later, enter a space instead of the file name in the URL box.
To set up an automatic redirect
1. 2. 3.
On the File menu, click Document Properties, and then click the Advanced tab. Under Auto refresh/redirect, in the URL box, enter the path or URL of the document you want the browser to redirect to. In the Delay time box, enter the number of seconds the browser should delay before loading the other document.
4.
Click OK.
Specifying a cache expiration date

Most Web browsers cache local copies of visited documents on the user's hard drive. If the user revisits a Web page she has visited before, the browser may display the local copy, which can be much faster than fetching the document from the Web. In general, browsers display cached copies if they have determined (perhaps by examining the modification date) that the original document has not changed since the copy was created. However, for some time-sensitive documents, you may want browsers to always retrieve a particular page from the Web server, overriding their cache policies. In other cases, you may want browsers not to use cached copies of a document after a certain date and time has passed. To override browser's cache policies and force them to retrieve a particular document from the Web, you can specify a cache expiration date for the document. This date can be in the past, which causes browsers to never use cached copies of the document.
To specify a cache expiration date for a document
1. 2.
On the File menu, click Document Properties, and then click the Advanced tab. In the Expires on box under Cache expiration, enter the date after which browsers should not use cached copies of the document. (Click Sample Date to see the correct date/time format.)
Adding PICS labels to a document

The Platform for Internet Content Selection (PICS) is a system for labeling Web documents with respect to their content. It was originally developed as a standardized method that could be used by Internet filtering products or Web browsers to identify and filter out content that users deem inappropriate for their children. The PICS system depends on Web authors or webmasters labeling their own documents according to some formalized rating or classification system. One example of such a rating system is the one developed by the Internet Content Rating Association. The ICRA Web site features a PICS label generator that you can use to generate a PICS label for a site or page, based on your answers to some content-related questions. Once you have a PICS label, you can easily insert it into a document using Namo WebEditor. (To apply a PICS label to an entire site, add it to the site's index page.)
To add PICS labels to a document
1. 2. 3.
On the File menu, click Document Properties, and then click the Advanced tab. In the Labels box under Platform for Internet Content Selection (PICS), type or paste each PICS label. Separate multiple labels with carriage returns (press Enter). Click OK.
-SJ Namo Interactive does not recommend or endorse any particular content rating system.
Adding custom meta tags

In addition to the common types of meta data that you can specify in the General and Advanced tabs of the Document Properties dialog box, you can add other meta tags through the Custom META Tags tab of the same dialog box. There are two kinds of meta tags you can add to a document: HTTP header equivalents (<meta http-equiv>) This type of meta tag is used to provide some special instruction to the browser. For example, the meta http-equiv="expires" tag gives the browser an expiration date for its cached copy of a document; if a browser respects this tag, it will reload the document from the server instead of displaying a cached copy. HTTP header equivalent meta tags are so called because they perform the same function as corresponding HTTP headers provided by some Web servers. User metadata (<meta name>) This type of meta tag is used to contain any author-defined meta data for any purpose. There are some common forms that are widely recognized, such as meta name="keywords" (used by search engines to help categorize documents), but authors are free to add any kind of meta data they wish.
To add or modify a custom meta tag
1. 2. 3. 4. 5. 6.
On the File menu, click Document Properties, and then click the Custom META Tags tab. Depending on the type of meta tag you want to add or modify, click the Add button or the Modify button under HTTP header equivalents or under User metadata. In the Name box, enter the desired http-equiv or name value for the meta tag. In the Content box, enter the desired content value, and then click OK. If you want to add another meta tag, repeat steps 2 through 4. Click OK.
To remove a custom meta tag
1. 2.
On the File menu, click Document Properties, and then click the Custom META Tags tab. Select the meta tag you want to remove and click Remove.
-The list boxes in the Custom META Tags tab also display any meta tags that have been added through the General and Advanced tabs, in addtion to any custom tags you have added. Most of these meta tags can be edited in this tab.
5 Spicing Up Your Site

In this section, we'll go beyond the basics of page content and learn how to enhance Web sites with multimedia, JavaScript effects, and more.
In this section Adding multimedia objects .......................................................................... p.226 Using Smart Clipart ..................................................................................... p.232 Using Flash Buttons ..................................................................................... p.238 Using themes................................................................................................ p.242 Creating photo albums ................................................................................. p.251 Adding JavaScript effects ............................................................................ p.256
225
Adding multimedia objects

Namo WebEditor 2006 makes it easier than ever to insert videos, audio recordings, Flash animations, and other multimedia objects into your Web documents. With the Media Wizard, you can add a video or audio file to any document and have it play right on the page using Windows Media Player, QuickTime, or RealOne Player, in just a few simple steps.
Inserting video and audio files

Use the Media Wizard to insert a video or audio file into the current document. The Media Wizard supports the following browser controls and plugins for playing multimedia content: Windows Media Player QuickTime Player RealOne Player (RealPlayer)
To insert a video or audio file
1. 2.
3. 4. 5.
On the Insert menu, point to Media and then click Media Wizard. Under Step 1: Select media file, enter the path or URL of the media file you want to insert, or click (Browse) to find and select a media file from your local file system. Once you specify a media file, the Media Wizard will automatically select the appropriate player based on the file's extension. Click Next. Specify the options and settings you want the player to use. (See the explanations below.) Click Finish.
-When using the Media Wizard, you cannot select the player to use, even if the specified media file's format is supported by more than one player. To use a player other than the one autoselected by the Media Wizard: on the Insert menu, point to Media, and then click the command corresponding to the player you want to use. Another way to insert a video or audio file is to drag it from Windows Explorer to the Edit window.
General options
These options apply to all media objects. All of these settings are optionalyou can leave them blank or accept the default values.
226 Adding multimedia objects
Chapter 5: Spicing Up Your Site
ID If you plan to use the media object in a script, enter an ID by which the object will be referred. The ID must begin with a letter and contain only letters, digits, hyphens, underscores, and periods. Width and Height Enter numbers to specify the width and height of the player either in pixels or as a percentage of the size of the parent container. Horizontal spacing and Vertical spacing You can specify the size of the margins on the sides (horizontal spacing) and/or above and below (vertical spacing) the media object, in pixels. Alignment You can specify how the media object will be aligned with respect to adjacent content. The alignment options are the same as those for images; see Setting an image's alignment, p.129 for examples. The default alignment is Bottom.
Play and screen options for Windows Media Player
These options are available for media objects that will be played with the Windows Media Player control. Auto start The media clip will begin playing as soon as the browser has finished downloading it. Show tracker The player will show a slider that allows the user to jump to a point in the media clip. (Note: the tracker will not be visible if the Show controls option is not selected.) Show controls The player will show controls for controlling the progress and sound volume of the media clip. Show goto bar The player will show a drop-down menu displaying a list of markers in the media file, if any have been defined. The user can select a marker to jump to the corresponding position in the media clip. Show info The player will show a panel containing information about the media clip, such as its name, author, and copyright notice. Show status bar The player will show a bar displaying status information.
Adding multimedia objects 227
Auto size The player will automatically adjust its size to fit the media clip.
Play and screen options for QuickTime
These options are available for media objects that will be played with the QuickTime plugin. Auto start The media clip will begin playing as soon as the browser has finished downloading it. Loop The media clip will play again from the beginning when its end is reached. Show controls The player will show controls for controlling the progress and sound volume of the media clip. Scale
Stretch to fit: The media clip will be stretched to fit the specified dimensions of the player. Keep aspect: The media clip will be scaled proportionally to fit the specified height of the
player, preserving its original aspect ratio.

Play and screen options for RealOne Player
These options are available for media objects that will be played with the RealOne (or RealPlayer) plugin. Auto start The media clip will begin playing as soon as the browser has finished downloading it. Loop The media clip will play again from the beginning when its end is reached. Center (auto size) The player will automatically adjust its size to fit the media clip. Main aspect The media clip will be scaled proportionally to fit the specified height of the player, preserving its original aspect ratio. Controls Click to select the controls you want the player to show.
Inserting Flash and Shockwave objects

To insert a Flash or Shockwave object in the current document
1. 2.
3. 4.
5. 6.
7. 8.
On the Insert menu, point to Media and then click Flash or Shockwave, depending on the type of object you want to insert. Locate and select the desired Flash or Shockwave file on your local file system and click Open, or enter the URL of a Flash or Shockwave file on the Internet in the URL to open box and click Open URL. (optional) If you will use the object in a script, type an ID for the object in the ID box. (optional) If you want to show the object in a size other than its original size, specify the desired size in the Width and Height boxes under Size and spacing. You can enter sizes in pixels or as a percentage of the parent container's size. (optional) Specify the margins on the sides and/or above and below the object in the Horizontal spacing and Vertical spacing boxes. Under Alignment, click the box and select the desired alignment of the object with respect to adjacent content. (See Setting an image's alignment, p.129 for examples of the alignment options.) The default alignment is Bottom. (optional) If you need to change any of the object's parameters, click the Parameters button, edit the parameters, and click OK. Click OK.
Another way to insert a Flash or Shockwave file is to drag it from Windows Explorer to the Edit window.
Notes
To be able to see Flash or Shockwave objects in Preview mode, your computer must have the appropriate player installed. You can download the Flash and Shockwave players from Macromedia's download page. Most Flash objects (those with .swf extensions) are shown in Edit mode as the first frame of the animation. However, Flash objects that have a .fla extension are represented by dashed rectangles in Edit mode. Shockwave objects are represented by dashed rectangles in Edit mode.
Inserting other ActiveX, applet, or plug-in objects

If you have a media file that is not supported by Windows Media Player, QuickTime, or RealPlayer, but you know an ActiveX control that supports it, you can still insert the media file into a Web document. Similarly, you can insert any media file that is supported by a Netscape-style browser plug-in. You can insert Java applets, as well.
Namo WebEditor 2006 User Manual To insert an ActiveX object
1. 2. 3. 4.
5. 6.
7.
On the Insert menu, point to Object and then click ActiveX Control. In the Class ID box, enter the classid attribute for the object, or click the triangle and select from the list of ActiveX controls installed on your computer. (optional) If you will use the object in a script, type an ID for the object in the ID box. (optional) If you want to show the object in a size other than its original size, specify the desired size in the Width and Height boxes under Size and spacing. You can enter sizes in pixels or as a percentage of the parent container's size. (optional) Specify the margins on the sides and/or above and below the object in the Horizontal spacing and Vertical spacing boxes. If you are inserting a media clip, click Parameters, enter the path or URL of the media clip in the appropriate field (for example, Source) and click OK. Also click Parameters if you need to specify any other object parameters. Click OK.
To insert a plug-in object
1. 2. 3. 4. 5.
6. 7.
8.
On the Insert menu, point to Object and then click Plug-In. In the Path box, enter the path or URL of the media file. You can click Browse to locate and select a media file on your local file system. (optional) In the Alt text box, enter a brief description or notice to be displayed in the browser if the supporting plug-in is not installed. (optional) In the Plug-in home box, enter the URL of a Web page from which users can download the plug-in if they do not have it. (optional) If you want to show the object in a size other than its original size, specify the desired size in the Width and Height boxes under Size and spacing. You can enter sizes in pixels or as a percentage of the parent container's size. (optional) Specify the margins on the sides and/or above and below the object in the Horizontal spacing and Vertical spacing boxes. Under Alignment, click the box and select the desired alignment of the object with respect to adjacent content. (See Setting an image's alignment, p.129 for examples of the alignment options.) The default alignment is Bottom. Click OK.
To insert a Java applet
1. 2. 3.
On the Insert menu, point to Object and then click Java Applet. In the Code box, enter the name of the applet's class file, or click Browse to locate and select a class file on your local file system. In the Codebase box, enter the path or URL of the folder that contains the class file. (If you select a file using the Browse button, the codebase is entered automatically.)
4. 5.
6. 7.
8. 9.
Notes
(optional) In the Alt text box, enter a brief description or notice to be displayed in the browser if the supporting plug-in is not installed. (optional) If you want to show the object in a size other than its original size, specify the desired size in the Width and Height boxes under Size and spacing. You can enter sizes in pixels or as a percentage of the parent container's size. (optional) Specify the margins on the sides and/or above and below the object in the Horizontal spacing and Vertical spacing boxes. Under Alignment, click the box and select the desired alignment of the object with respect to adjacent content. (See Setting an image's alignment, p.129 for examples of the alignment options.) The default alignment is Bottom. (optional) If you need to change any of the applet's parameters, click the Parameters button, edit the parameters, and click OK. Click OK.
Most ActiveX, plug-in, and applet objects are represented by dashed rectangles in Edit mode. To edit the properties of an object, double-click the dashed rectangle. To resize the object, click the rectangle once to select it, and then drag its resize handles.
Using Smart ClipArt

Namo WebEditor comes with a library of ready-to-use Smart ClipArt images that you can insert into your Web documents. Being vector-based (p.120), Smart ClipArt images are different from ordinary, bitmapped imagessuch as GIF and JPEG imagesbecause you can resize them without loss of sharpness and edit them, right inside Namo WebEditor, in an object-oriented fashion. For example, you can add a text object to any Smart ClipArt image, and then change or remove the text later without needing to restore the original, unedited image. Smart ClipArt images use the TNG format, Namo WebEditor's own vector-based image format. When you insert a Smart ClipArt image into a Web document, Namo WebEditor automatically creates a bitmapped version of the image in GIF format, so that it can be viewed in any visual browser without installing additional software. At the same time, the original vector-based image data is inserted into document's HTML source code, so that you can later edit the image without reinserting it. When you resize or edit the Smart ClipArt image, Namo WebEditor recreates another bitmapped version on the fly. If Namo WebCanvas is installed on your computer, you can edit a Smart ClipArt image within Namo WebEditor by double-clicking it. You can also use Namo WebCanvas to create your own Smart ClipArt images from scratch.
Inserting a Smart ClipArt image

To insert a Smart ClipArt image
1. 2. 3. 4.
Place the insertion point where you want to insert the image. On the Insert menu, click Smart ClipArt. (Or click the Smart ClipArt button on the Shortcut Bar.) Select a folder in the folder list on the left side of the Resource Manager. Select the desired image and click OK.
When you insert a Smart ClipArt image, Namo WebEditor saves a bitmapped version of the image in a temporary folder. It is the bitmapped version, not the original Smart ClipArt (TNG) image, that is actually shown in the document window or a browser. Later, when you save the document, Namo WebEditor moves the bitmapped image to the "images" subfolder of the document's folder. (If an "images" folder does not exist, it is created automatically.) When you publish the document, make sure to upload the "images" subfolder to the remote site, along with the document. You can change the default path for Smart ClipArt-derived bitmapped images by specifying a different path in Namo WebEditor Preferences. The path is always relative to whatever folder the document is saved in. For example, if you specify the default path as "../images", the bitmap images will be saved in the "images" subfolder of parent folder of the document folder.
232 Using Smart ClipArt
Chapter 5: Spicing Up Your Site To change the default path for Smart ClipArt-derived bitmap images
1. 2.
On the Tools menu, click Preferences, and then click the Save tab. In the Save Smart ClipArt, equation, and chart images in folder box, type the desired path (relative to the document folder).
-If you change the default path for Smart ClipArt images, Namo WebEditor will automatically move already-inserted images to the new path the next time you save a document that includes Smart ClipArt.
Modifying Smart ClipArt images

You can edit a Smart ClipArt image right inside Namo WebEditor using the Smart ClipArt Editor, a simplified version of the standalone Namo WebCanvas image editor that is included with some versions of Namo WebEditor 2006. To open the Smart ClipArt Editor, just double-click a Smart ClipArt image in a document. When you are finished editing the image, click OK. The subsections below describe a few basic editing tasks you can perform in the Smart ClipArt Editor. However, since the editor includes much of the functionality of the full Namo WebCanvas program, a complete description of its capabilities is beyond the scope of this document. For more information about what you can do with the Smart ClipArt Editor, please refer to the Help window in Namo WebCanvas.
Changing colors in a Smart ClipArt image

To change the color of an object in the image
1. 2. 3.
Double-click the Smart ClipArt image in the document window. On the side toolbar, click (Direct Selection Tool). Select the desired object by clicking it. (If it is difficult to select directly, you can also select it in the Layers panel.) The path of the selected object will appear in thin blue lines.
4.
On the Paint panel, click the triangle on either the Fill button or the Stroke button (depending on which part of the object you want to change) and select a new color. If the color you want is not on the palette, click (the palette menu) and select another palette, or click and select a color in the Color Picker.
Using Smart ClipArt 233
5.
Click OK to save the edited image.
-If an object's stroke is not at least 1 pixel wide, any color you give it will not be visible. To change an object's stroke width, click the Stroke tab and enter a value in the Width box.
To change the image's background color
Most Smart ClipArt images have a transparent white background. This works well when they are used in a Web document that also has a white background. But if a document has a colored background, the image may not match well. In such cases, you should change the Smart ClipArt image's background color to match that of the document. 1. Double-click the Smart ClipArt image in the document window. 2. Right-click the image editing area and click Canvas Properties. 3. Click the Color box and select the new background color. If the color you want is not on the palette, click (the palette menu) and select another palette, or click and select a color in the Color Picker. 4. If you want the background color to be transparent (so that the document's background shows through it), select the Transparent check box. 5. Click OK. 6. Click OK again to save the edited image.
Adding or editing text in a Smart ClipArt image

Adding text to, or modifying existing text in, a Smart ClipArt image is easy. You can edit the text itself and change its font, size, style, direction, and other properties.
Chapter 5: Spicing Up Your Site To edit an existing text object in a Smart ClipArt image
1. 2. 3. 4.
Double-click the Smart ClipArt image in the document window. Select the text object by clicking it. (If it is difficult to select directly, you can also select it in the Layers panel.) On the Text panel, edit or change the properties of the text object as desired. Click OK to save the edited image.
To add text to a Smart ClipArt image
1. 2. 3. 4. 5. 6. 7. 8.
Double-click the Smart ClipArt image in the document window. On the side toolbar, click (Text Tool). Click anywhere in the image editing area. In the Text box, type the desired text, and then configure the text propertiesfont, size, direction, and so forthas desired. Click OK. On the side toolbar, click (Selection Tool). Drag the text object to the desired position on the image. You can also resize it by dragging its resize handles. Click OK to save the edited image.
-When entering text, you can insert a line break by pressing Ctrl+Enter.
Changing the export area of a Smart ClipArt image

One of the strengths of the Smart ClipArt image format is that you can choose which part of an image is visible in the Web document by modifying its export area. The export area is a rectangular region that determines what part of the image will be saved in bitmapped format for display in the document. Each Smart ClipArt image that comes with Namo WebEditor has a predefined export area, and you can modify this in the Smart ClipArt Editor.
Original Example of reducing the export area
Reduced
Namo WebEditor 2006 User Manual To specify the export area of a Smart ClipArt
1. 2. 3.
Double-click the Smart ClipArt image in the document window. (Export Area Tool). On the side toolbar, click Do one of the following to define the export area: o Draw a box around the part of the image you want to be visible. o Click anywhere on the image editing area. In the Export Area dialog box, specify the desired Size and Position of the export area in numbers, and then click OK. If necessary, adjust the export area by dragging the resize handles on the dashed blue rectangle. Click OK to save the image with the new export area.
4. 5.
-Namo WebEditor can automatically set the export area to the minimum size that includes every object in the image. To set the export area automatically, right-click anywhere on the image editing area and click Auto Export Area.
Converting a Smart ClipArt image to an ordinary image

When you insert a Smart ClipArt image into a Web document, Namo WebEditor saves the original image data in the document itself, so that you can always edit the image later without needing to open another file. As a result, the file sizes of documents containing Smart ClipArt images can be significantly larger than those of similar documents that only use bitmapped images (which are always stored separately). If you need to minimize the file size of a document that includes Smart ClipArt images, and you do not plan to edit the images in the future, you can save space by converting the images to ordinary, bitmapped images.
To convert a Smart ClipArt image to a bitmapped image
1. 2. 3. 4. 5.
Right-click the image, point to Image, and then click Convert to Standard Image. Click Yes to confirm converting the image. In the File name box, enter the desired file name for the bitmapped image. Click the Save as type box and select the desired bitmap image format: GIF, JPEG, or PNG. Click Save.
-If the Smart ClipArt image has a transparent background color, select GIF format for the conversion. The other formats do not support transparency. -Once you convert a Smart ClipArt image to an ordinary bitmapped image, you cannot edit it with the Smart ClipArt Editor.
Managing Smart ClipArt

The Smart ClipArt library is managed through the Resource Manager (p.35). To open the Resource Manager: on the Window menu, click Resource Manager. You can perform the same types of management tasks with Smart ClipArt images as you can with other resources, including: Moving images from one category (folder) to another Deleting unwanted images Adding new images, such as those you create with WebCanvas Adding images from a zip archive Copying images to a zip archive and optionally e-mailing the archive to another person
(See The Resource Manager, p.35 for information on general resource management tasks.) In addition, you can permanently modify an image in the library, or modify an image and save it as a new image.
To permanently modify a Smart ClipArt image in the library
1. 2. 3. 4.
Open the Resource Manager. (On the Window menu, click Resource Manager.) Right-click the image you want to modify and then click Modify. Edit the image as desired. (See Modifying Smart ClipArt images, p.235.) Click OK.
To modify a Smart ClipArt image in the library and save it as a new image
1. 2. 3. 4.
Open the Resource Manager. (On the Window menu, click Resource Manager.) Right-click the image you want to modify and then click Modify As New. Edit the image as desired. (See Modifying Smart ClipArt images, p.235.) Click OK.
A modified copy of the original image will appear in the Resource Manager, in the same folder as the original.
Using Flash Buttons

Flash Buttons are brief, looping Flash animations that are meant to be used as navigation buttons, banners, or other design elements on Web pages. Unlike ordinary Flash files, Flash Buttons have a static text component that you can edit directly in Namo WebEditor. A variety of predesigned Flash Buttons are included with Namo WebEditor in the resource library, accessible through the Resource Manager (p.35). You can use Flash Buttons as standalone buttons and design elements, and also in dynamic navigation bars (p.324) and dynamic banners (p.334). Besides using the Flash Buttons that come with Namo WebEditor, you can add your own Flash files (ones you create yourself or that you download from the Web) to the library, so you can insert them conveniently into your Web documents.
Inserting a Flash Button

To insert a Flash Button
1. 2. 3. 4. 5. 6. 7. 8.
Place the insertion point where you want to insert the Flash Button. On the Insert menu, click Flash Button. The Resource Manager window will open. Select a folder in the left pane, select a Flash Button in the right pane, and then click OK. Edit the contents of the Text box as desired. (This is the static text that will appear on the Flash Button.) (optional) Select the desired font and font size for the static text. (optional) Using the Offset X and Y boxes, specify the desired position of the text relative to its default position, in pixels. (optional) Edit the URL in the Link box as desired. (See Creating a hyperlink on a Flash Button, p.240.) Click OK.
-You can also insert a Flash Button by dragging it to the document window from the Resource Manager.
Editing the text of Flash Button

To edit or format the text of a Flash Button
1. 2.
Double-click the Flash Button. Under Text, do any or all of the following:
238 Using Flash Buttons
3.
In the Text box, edit the text as desired. Click the Font box and select the desired font. In the Size box, enter the desired font size (in points). In the Offset X and Y boxes, enter the horizontal and vertical offsets, respectively, of the text from its default position (in pixels). Click OK. o o o o
-The preview area at the top of the Flash Button Properties dialog box displays the effect of any changes you make, so you can try different settings before closing the dialog box. -You cannot edit or format text in other Flash files through the Flash Button Properties dialog box.
Resizing a Flash Button

To resize a Flash Button
1. 2.
Click the Flash Button to select it. Drag any of the resize handles at the corners and sides of the button.
Resizing a Flash Button
Note that the foreground portion of a Flash Button always maintains its proportions (aspect ratio) when you resize the button. If you change the button's proportions, only its background area changes shape.
Changing the background color of a Flash Button

Each Flash Button has a white background by default. This is usually appropriate when the document background is also white, but if the document background is another color, a pattern, or an image, the Flash Button will not blend well with it. In such cases, you can solve the problem by changing the background color of the Flash Button or by making its background transparent. The examples below illustrate the effect of making a Flash Button's background transparent when the document background is gray.
Using Flash Buttons 239
White background
Transparent background
To change the background color of a Flash Button
1. 2.
3.
Double-click the Flash Button. Under Appearance, do one of the following: o Click the Background box and select a color (p.210). (To quickly match the document background, use the eyedropper tool .) o Select the Transparent check box. Click OK.
-The borders of some Flash Buttons may look ragged when you make their background color transparent. This may result from the way the buttons were made. In such cases, set the background color to the same color as the document's background instead of making it transparent. -Transparent Flash Button backgrounds are supported by Internet Explorer 4+, Firefox, Netscape 6+, and Opera 6+.
Creating a hyperlink on a Flash Button

Unlike with an ordinary image, you cannot create a hyperlink on a Flash Button using the Insert Hyperlink command. Instead, you enter a URL in the Flash Button Properties dialog box.
To create or edit a hyperlink on a standalone Flash Button
1. 2.
Double-click the Flash Button. Under Hyperlink, type the desired URL in the Link box, or do one of the following: o o o Click (Browse) to find and select a document on your local file system. Click (Open Documents) to select one of the documents that are currently open in Namo WebEditor. (Site) to select from a list of documents belonging to the current local site (if Click one is open).
240 Using Flash Buttons
3.
4.
(optional) If you want the link to open in another window or frame than the one containing the Flash Button, enter the name of the desired window or frame in the Target box. (See Setting a link's target window or frame, p.151.) Click OK.
-When you use Flash Buttons in a dynamic navigation bar, you do not need to manually assign a link to each button, because the button's links are determined by the structure of the site tree and the properties of the navigation bar itself. Any hyperlink assigned to a Flash Button in a dynamic navigation bar or dynamic banner through the Flash Button Properties dialog box will be ignored.
Importing Flash files into the Flash Button library

If you have Flash (*.swf) files on your local file system that you have either created yourself or downloaded from the Web, you can add them to Namo WebEditor's Flash Button library. Then, you can insert them into your documents as easily as you can the Flash Buttons that come with Namo WebEditor.
To import Flash files into the Flash Button library
1. 2. 3. 4.
On the Window menu, click Resource Manager, and then click the Flash Buttons tab. On the left pane, select the folder into which to import the Flash files. Click the Import button at the bottom of the window. Select one or more Flash files (files with a .swf extension) and click Open.
The newly imported Flash files will appear in the right pane of the Resource Manager window. You can now insert them into your documents as you can the included Flash Buttons. -You can also drag Flash files from Windows Explorer into the right pane of the Resource Manager window. (Make sure to click the Flash Buttons tab first.) -You cannot edit or format text in imported Flash files through the Flash Button Properties dialog box.
Using Flash Buttons 241
Using themes
Designing a good-looking Web site is no easy task. Fortunately, even the most aesthetically-challenged author can build a great-looking site with the help of Namo WebEditor's themes.
About themes
A theme is a collection of styles (p.189) and objects (graphic design elements, such as bullets, buttons, and banners) that combine to create a harmonious look. When you apply a theme to a document, the theme's styles are added to the document's own style sheet, and the theme's objects become available for use in the document. Namo WebEditor 2006 comes with predesigned themes you can use as they are or edit (p.247) and customize as you see fit. You can even create (p.247) completely new themes from scratch. To browse the themes that come with Namo WebEditor, open the Resource Manager (on the Window menu, click Resource Manager) and click the Themes tab.
What's in a theme?
Every theme includes a set of style definitions (p.191) and a set of objects, which are images that are intended for use as design and navigational elements and that have a consistent "look".
Styles included in a theme
The table below lists the default styles that every theme includes; the properties that each style defines by default; and the types of elements the styles apply to. Style name Document Heading 1 Heading 2 List 1 List 2 Table Default properties font-family, color, background-color font-family, font-size, color font-family, font-size, color font-family, font-size, color font-family, font-size, color border-top-color, border-right-color, borderbottom-color, border-left-color Applies to the entire document all level-one headings (p.112) all level-two headings (p.112) paragraphs of class (p.193) "namo-list" paragraphs of class (p.193) "namo-sublist" tables (p.161) of class (p.193) "namo-table"
242 Using themes
Style name Cell Header Cell Normal Hyperlink Visited Hyperlink Active Hyperlink Hover Hyperlink
Default properties border-top-color, border-right-color, borderbottom-color, border-left-color border-top-color, border-right-color, borderbottom-color, border-left-color, background-color color, text-decoration color color color
Applies to ordinary cells in tables of class (p.193) "namo-table" header cells (p.182) in tables of class (p.193) "namo-table" normal (p.154) hyperlinks visited (p.154) hyperlinks active (p.154) hyperlinks hover (p.154) hyperlinks
To view the properties of these styles for a specific theme, do the following: 1. On the Window menu, click Resource Manager, and then click the Themes tab. 2. Select the desired theme and click the Theme Properties button (at the bottom of the window). 3. Select the style whose properties you want to view. 4. View the properties of the selected style in each of the Character, Paragraph, and Borders & Background tabs. In addition to the styles listed above, each theme has two styles that do not appear in the style list for the theme as shown in the Theme Properties dialog box. These styles, when applied to list items (p.113), cause the list items to use image bullets. When you edit (p.247) a theme, you are not limited to the styles and properties that are defined by default. You can add other properties for the existing styles, and you can add new styles as well. For example, you could change the Heading 1 style of a theme to include the margin-top property if you wanted level-one headings to have more (or less) top margin. And you could add another style to define the appearance of level-three headings, using h3 as the style's selector.
Theme objects
The table below lists the objects (images) that every theme includes and describes their intended uses. Object name Banner Horizontal Button Vertical Button Bullet 1 Bullet 2 Cool Icon Hot Icon New Icon Intended use Dynamic banners (p.334) or static banners buttons in horizontal dynamic navigation bars (p.324) buttons in vertical dynamic navigation bars (p.324) bullet for list items (p.113) of class (p.193) "namo-list1" bullet for list items (p.113) of class (p.193) "namo-list2" for highlighting "cool" content for highlighting "hot" content for highlighting "new" content
Using themes 243
Object name Home Icon Up Icon Prev Icon Next Icon Horizontal Line Background
Intended use graphical link to site's home page graphical link to document's parent graphical link to document's previous sibling graphical link to document's following sibling graphical version of a horizontal rule (p.64) the document's background image
-The Horizontal Button, Vertical Button, and Background objects cannot be inserted (p.246) into a document in the same way as the other theme objects. The button objects can only be used in dynamic navigation bars (p.324) that you insert in a document that is part of a local site. The Background object is automatically applied to a document when you apply a theme (p.246). When you edit (p.247) a theme, you can replace any of its default objects with other images of your choosing. Also, some objects, being Smart ClipArt (p.232) images, can be edited with the Smart ClipArt Editor (p.233).
Files that are added when you apply a theme

When you apply a theme to a document or local site that did not previously have a theme, you should be aware that Namo WebEditor copies certain image files to the document/site folder or a subfolder, as follows: When applying a theme to documents in a local site The theme's background image file is copied to the site folder, or, if the site folder contains an "images" subfolder, it is copied to that subfolder. Image files corresponding to most theme objects (p.243) you insert into the site's documents are likewise copied to the site folder, or, if the site folder contains an "images" subfolder, it is copied to that subfolder. Image files corresponding to the buttons in any dynamic navigation bars (p.324) in the site's documents are copied to a new "nav" subfolder of the site folder. Image files corresponding to any dynamic banners (p.334) in the site's documents are likewise copied to a new "nav" subfolder of the site folder.
When applying a theme to a standalone document The theme's background image file is copied to the document folder, or, if the document folder contains an "images" subfolder, it is copied to that subfolder.
244 Using themes
If you insert any theme objects (p.243) into the document, you must decide the location of the corresponding image files at the time you save the document. (The Resource File Handling dialog box will prompt you to choose how to handle the image files.)
When you publish a site or document that uses a theme, make sure to upload the theme image files along with the document or the rest of the site files. Otherwise, the theme will not display correctly in a user's browser. (If you use the Quick Publish (p.351) command to publish an entire site, Namo WebEditor takes care of uploading these files for you.)
Applying a theme
To use a theme in a document or set of documents, you need to apply it. You can apply a theme to any of the following document sets: Just the current document All open documents Every document in the current local site The current document and its child documents, if any, in the site tree of the current local site
Before applying a theme, you must save all the documents to be affected. Namo WebEditor will prompt you to save the document(s) if necessary.
To apply a theme
1. 2. 3. 4.
On the Format menu, click Theme. In the folder list, select a theme category, and then select a theme in the selection area. (To get a better view of the selected theme, double-click it.) When you are satisfied with your selection, click OK. Specify what set of documents you want to apply the theme to, and then click OK.
-You cannot undo applying a theme. Once you apply a theme, you cannot return the document or site to a themeless state without manually deleting theme files and editing the document's source code. If you change a document or site's theme and you want to go back to the old theme, you need to reapply the old theme. -When you add a new document (p.309) to a site to which you have applied a theme, the new document does not automatically use the theme. You must explicitly apply the theme to the new document.
Using themes 245
Inserting theme objects

Once a theme has been applied to a document, you can easily insert most types of theme objects (p.243) into the document using the Theme Object submenu of the Insert menu. On the Insert menu, click Theme Object, and select the desired theme object from the submenu. In most themes, objects are ordinary, bitmapped images, and you can modify them in the same ways as other bitmapped images. (See the Images, p.119 section for more information.) However, objects in vectorbased themes (the themes in the Vector category) use Smart ClipArt (p.232) images. As with other Smart ClipArt images, you can edit these objects using the Smart ClipArt Editor. (Double-click the object to edit it.) If you insert a Banner theme object, it will initially have the text "Banner text" on it. To change the text, double-click the banner and enter the desired text. -The Horizontal Button, Vertical Button, and Background objects cannot be inserted into a document using the Insert Theme Object commands. The button objects can only be used in dynamic navigation bars (p.324) that you insert in a document that is part of a local site. The Background object is automatically applied to a document when you apply a theme (p.246).
Applying styles from a theme

When you apply a theme to a document, some of its styles (p.242) are applied automatically to the document's content, while othersthe List and Table stylescan be applied manually when desired.
Styles that are applied automatically
The styles that are automatically applied include: the Document style, which affects the font, text color, and background color of the whole document the Heading 1 and Heading 2 styles, which affect the font, size, and color of all level-one and level-two headings (p.112), respectively the Hyperlink styles, which affect the color of hyperlinks
Applying a list style from the current theme
There are actually two kinds of "list" styles in each theme. Styles of the first type are actually paragraph styles and can only be applied to ordinary paragraphs. They affect the font, size, and color of the paragraph. To apply one of these "list" styles: 1. 2. Place the insertion point in the paragraph to which you want to apply the list style. If you wish to apply the style to several consecutive paragraphs, select them. On the Formatting Toolbar, click the Style box and select namo-list or namo-sublist.
246 Using themes
Styles of the second "list" type are actual list-item styles and can only be applied to list items. They cause the list item to have an image bullet, using either the Bullet 1 or the Bullet 2 theme object (p.243). To apply one of these list styles: 1. 2. Select the desired list items. (Do not simply place the insertion point in the list item.) On the Insert menu, point to Theme Object, and then click Apply Theme To List 1 or Apply Theme To List 2.
Applying the current theme's table style to a table
Each theme has one table style. If you apply the style to a table (p.161), it affects the border and background colors of the entire table. To apply the table style: 1. 2. Place the insertion point inside the table to which you want to apply the style. On the Insert menu, point to Theme Object, and then click Apply Theme To Table.
Creating a new theme

Namo WebEditor includes a basic theme template from which you can create an entirely new theme. You can then apply (p.245) your new theme to a document or a site exactly as you would one of the themes that come with Namo WebEditor.
To create a new theme
1. 2.
3. 4.
On the Window menu, click Resource Manager, and then click the Theme tab. (optional) Create a new theme folder by doing the following: 1. Right-click an existing folder in the folder list (such as the top-level Themes folder) and then click New Folder. The new folder will be created inside the selected folder. 2. Rename the new folder by right-clicking it and clicking Rename. Right-click the folder in which you want to put the new theme, and then click New Theme. Type a name for the new theme and click OK.
The newly-created theme will contain the default styles (p.242) and objects (p.243) that all themes have, but these styles and objects will be "empty": no properties will have been specified for the styles, and no image files specified for the objects. To finish creating the new style, you need to edit (p.247) it and define the properties and image files for its styles and objects, respectively.
Editing a theme
You can edit, or modify, a theme in the following ways:
Using themes 247
you can change the character, paragraph, border, or background-related properties of any of its styles (p.242) you can add new styles you can replace the image file of any theme object (p.243) with another image file you can edit the Banner and Button objects, which are Smart ClipArt (p.232) images, using the Smart ClipArt Editor if the theme is vector-based (as are the themes in the Vector category), you can edit any of its objects using the Smart ClipArt Editor
-Once you edit a theme, you cannot reset it to its original state without reinstalling Namo WebEditor. Therefore, before editing a theme, it is advisable to make a copy (p.38) of the theme, and then edit the copy. -When you edit a theme, Namo WebEditor does not automatically update documents that use the theme. To apply the changes to the documents, you must reapply (p.245) the theme.
Editing a theme's styles

You can modify the properties of any of the styles (p.242) defined in a theme. Editing a theme style is the much the same as editing an ordinary style (p.189), except that you do it in the Theme Properties dialog box rather than the Styles dialog box. For a list of names and descriptions of the default theme styles, refer to Styles included in a theme, p.242.
To edit styles in a theme
1. 2. 3.
4.
On the Window menu, click Resource Manager, and then click the Theme tab. Select the theme you want to edit and then click the Theme Properties button (at the bottom of the window). For each style you want to edit, do the following: 1. Select the style in the style list. 2. In each of the Character, Paragraph, and Borders & Background tabs, modify the desired properties. When finished, click OK.
For information about specifying style properties, see the following topics: Setting character-related properties, p.197 Setting paragraph alignment, indentation, and line height, p.199 Setting margins, padding, and borders, p.200
248 Using themes
Setting background colors and images, p.203
Adding styles to a theme

By adding a style (p.189) to a theme, you make that style available to all documents to which you apply the theme in the future.
To add a style to a theme
1. 2. 3. 4.
5. 6. 7.
On the Window menu, click Resource Manager, and then click the Theme tab. Select the theme you want to edit and then click the Theme Properties button (at the bottom of the window). Click the Add button under the style list. Do one of the following, depending on the type of style you want to create. (See Defining a style, p.191 for explanations of the various style types.) o To create an element style, click the Tag box and select the desired element type. Do not enter anything in the Name box. o To create a universal class style, enter the desired class name in the Name box. Leave the Tag box set to (none). o To create an element-specific class style, click the Tag box and select the desired element type, and then enter the desired class name in the Name box. Click OK. In each of the Character, Paragraph, and Borders & Background tabs, specify the desired properties for the style. When finished, click OK, or click Apply if you plan to add another style right away.
For information about specifying style properties, see the following topics: Setting character-related properties, p.197 Setting paragraph alignment, indentation, and line height, p.199 Setting margins, padding, and borders, p.200 Setting background colors and images, p.203
Replacing theme objects

You can replace any theme object (p.243) in a theme with another image of your choosing. When replacing a theme object, keep in mind the following guidelines: The Banner, Horizontal Button, and Vertical Button objects in all themes are Smart ClipArt (p.232) images. You can only replace one of these with another Smart ClipArt image.
Using themes 249
Other objects in non-vector-based themes (all themes except those in the Vector category) are bitmapped images. You can replace any of them with another bitmapped image (GIF, JPEG, or PNG), or with a Smart ClipArt image. All objects in vector-based themes (all themes in the Vector category) are Smart ClipArt images. You can only replace one of these with another Smart ClipArt image. When replacing a Banner or Button object, make sure the replacement image is wide enough to contain the longest document title you plan to use in your site, at the font size used by banners or navigation bar buttons, respectively.
To replace a theme object
1. 2. 3. 4. 5. 6.
On the Window menu, click Resource Manager, and then click the Theme tab. Select the theme you want to edit and then click the Theme Properties button (at the bottom of the window). In the style list, select the object you want to replace. Click Import Image. Locate and select the desired replacement image, and then click Open. Click OK, or click Apply if you plan to replace another object right away.
Editing theme objects

The Banner, Horizontal Button, and Vertical Button objects (p.243) of all themes, and all the objects of vector-based themes, are Smart ClipArt (p.232) images. (The vector-based themes are the ones in the Vector category.) This means you can edit them using the Smart ClipArt Editor (p.233).
To edit a Smart Clipart-based theme object
1. 2. 3. 4. 5.
On the Window menu, click Resource Manager, and then click the Theme tab. Select the theme you want to edit and then click the Theme Properties button (at the bottom of the window). In the style list, select the object you want to edit. (Unless the theme is vector-based, note that only the Banner object and the two Button objects are editable.) Click Edit Image. In the Smart ClipArt Editor, make the desired changes, and then click OK.
250 Using themes
Creating photo albums

One of the most exciting uses of the Web is as a medium for sharing favorite photographs with family, friends, and others. With its built-in Photo Album Wizard, Namo WebEditor makes creating online photo albums as easy as possible. Just give it a list of image files and choose a few display settings, and the wizard takes care of creating thumbnails, organizing them in a table, and creating links to the original, fullsize images. You can choose how both the thumbnails and the original images are displayed (in the same window or separate windows, and so forth).
Using the Photo Album Wizard

Use the Photo Album Wizard to insert a gallery of thumbnail images in the current document that link to the full-size images that you specify. After you specify the image files to be included and a few display options, the wizard automatically generates thumbnail images with links to the original images and places the thumbnails in a table on the current page. Depending on your choice of photo album style, the wizard may also generate a separate document to hold each original image.
To start the Photo Album Wizard
1. 2. 3.
Open or create the document in which you want to insert the thumbnail gallery, and then save the document. Place the insertion point where you want the gallery to appear. On the Tools menu, click Photo Album Wizard.
The Photo Album Wizard can reuse album settings that you have saved from a previous occasion when you used the wizard. If you want to use saved settings, click Open Existing. Otherwise, click Create New. The Photo Album Wizard consists of either four or five steps, depending on the style of photo album you choose. The steps are described below.
Step 1: Selecting a photo album style
In this step, you choose a photo album style and configure a few settings specific to the selected style. When you're finished with this step, click Next.
Step 2: Selecting image files
In this step, you create a list of the image files you want to include in the photo album. You can add images to the list either individually or by selecting entire folders full of images. You can also specify caption settings for thumbnails and/or full-size images in this step.
Creating photo albums 251
To add individual image files, click Add Files. In the Open dialog box, navigate to the folder containing the desired image file(s), select the desired image file(s), and then click Open. (To select multiple sequential image files, click the first image file, and then click the last image file while holding down the Shift key. To select multiple non-sequential image files, click each while holding down the Ctrl key.) To add all the image files in a folder, click Add Folder. In the Browse For Folder dialog box, select the desired folder. If you want to include images in subfolders of the selected folder, click Include subfolders. Then, click OK. To remove some of the image files from the list, select them and click Remove Selected. To remove all image files from the list and start over, click Remove All.
To add captions to the thumbnails and/or the full-size images, click Captions. You can specify caption information independently for thumbnails and full-size images. Caption information is specified as a sequence of codes and characters. Each code stands for a piece of information about the image. For example, &w stands for the image size (pixel dimensions) and &d stands for its creation date. You can string several codes together; for example, "&w &d" will create captions showing both image sizes and creation dates. You can insert ordinary characters, such as spaces, commas, and periods, between codes to improve readability; for example, "&w - &d" will put a hyphen surrounded by spaces between the image size and the creation date. The available codes are defined below: &f image file name &e image file name extension &w image dimensions &s image file size &d image file creation date &n image sequence number (the position of the image in the photo album) One additional code, &b, inserts a line break in the caption. When finished adding image files, click Next.
Step 3: Specifying thumbnail options
(This step is skipped if you selected the Gallery (p.255) style in Step 2.) In this step, you specify options relating to the appearance of thumbnails. You can also specify resizing settings for the full-size images, if desired. Under Effects, select the desired border style for the thumbnails. Under Thumbnail size, specify either a uniform width and height (in pixels) for all thumbnails, or a percentage of each original image's size. If you select Uniform size and the Constrain proportions check box is selected, the size of the thumbnails will depend on whichever of width and height you specify last, while the other number is ignored.
252 Creating photo albums
Under Image size, specify size settings for the full-size images. By default, full-size images are shown at 100% of their original size (that is, not resized at all). If your original images are too large to fit in a typical browser window, you should consider resizing them. You can specify to resize to a percentage of each image's original size or to a uniform size for all images. If you select Uniform size and the Constrain proportions check box is selected, the size of the images will depend on whichever of width and height you specify last, while the other number is ignored. Under Background, choose whether you want thumbnails to have drop shadows. If drop shadows are enabled, you can specify their color, offset, and degree of blurriness. (Note that some border styles enable a drop shadow by default.) If you enable drop shadows or choose certain kinds of border styles, and your document has a non-white background, you may need to change the thumbnail background color from the default, which is white. Click the Background color box and select a color. If you want to apply the same effect (border style and drop shadow) to the full-size images as to the thumbnails, select Apply same effect to full-size images.
When finished specifying thumbnail options, click Next.

Step 4: Specifying layout options
In this step, you specify options relating to the table (p.161) that will contain the thumbnails (or the full-size images if you selected the Gallery (p.255) style in Step 2). Check the preview area at the bottom of the dialog box to see the effect of any changes you make. Specify the number of columns the table will have in the Columns box. (The number of rows is determined automatically depending on the number of images.) (optional) In the Table width and Table height boxes, specify the table's width and height in pixels or as a percentage of the available space. Note that if you set the table's width or height smaller than the size required to display the thumbnails, the specified size will be ignored. The default value of 0 for width and height means the table will be just big enough to fit the thumbnails. (optional) Use the Horz alignment and Vert alignment boxes to specify the horizontal and vertical alignment of each thumbnail and caption within its table cell. By default, thumbnails and captions will be centered both horizontally and vertically within their cells. (optional) In the Border type box, choose a preset style for the cell borders, or specify the border thickness (in pixels) in the Border width box. (For information about table borders, see "Controlling the appearance of table and cell borders".) (optional) Use the Border color, Light border, and Dark border color boxes to specify the color(s) of the cell borders. (optional) In the Bg image box, enter the path or URL of a background image for the table, or click the Bg color box and select a background color for the table.
When finished specifying layout options, click Next.
-You can always modify the properties of the thumbnail table after completing the wizard, in the same ways as with any other table.
Step 5: Specifying save options
In this step, you specify where to save the thumbnail image files, copies of the original image files, and the wizard-generated HTML files (if any). You can also choose whether to save the current photo album settings to a file so you can reuse them in the future. The location of the folder containing the current document is shown in Current document path. All of the save paths that are specified in this step are relative to the current document path. By default, thumbnails, full-size images, and generated HTML files are all saved in a new subfolder "PhotoAlbum1" under the document's folder. If necessary, you can change the save path for any of these items to another folder. Under Original images, specify where to save copies of the original images used in the photo album. The Photo Album Wizard always creates copies of your original images; it never uses the original copies. Under Thumbnail images, specify where to save the thumbnail images that the wizard will generate. You can also specify the image file format and naming convention for the thumbnails. Under HTML documents, specify where to save the HTML files that the wizard will generate. You can also specify the naming convention for these files. Some album styles do not use generated HTML pages, so this control section may be disabled. If you want to save the current album settings for later reuse, select Save album settings and specify the save location. You can use the saved settings in the future by clicking Use Existing on the first screen of the Photo Album Wizard.
When you're finished with this step, click Finish to close the wizard. Namo WebEditor will generate the photo album and insert it into the current document. Saved photo album settings do not include the list of images that are used in the photo album. If you reuse saved photo album settings, you will still need to specify the images to be used in the album.
Understanding photo album styles

The Photo Album Wizard can create photo albums in a variety of styles. The choice of album style mainly affects how your full-size images will be displayed. The available styles and their specific options are described below.
Slide Show
The wizard inserts a table of thumbnails into the current document. When the user clicks a thumbnail, the corresponding full-size image is displayed, either in the current window (replacing the current document) or in a new window.
254 Creating photo albums
The Window drop-down menu determines where to display the full-size images. The choices are:
Current window: The full-size image will open in the current window, replacing the document that
contains the thumbnail table. Optionally, you can specify a named window or frame in which to open the image using the Target box. If Add navigation links is selected, a set of "Previous", "Next", and "Up" links will be shown under the image. If Auto advance interval is selected, the full-size images will be automatically displayed one after another, starting with the image the user selects, with the specified number of seconds between images.
Separate new windows: Each time the user clicks a thumbnail, the corresponding full-size image
will open in its own new window. You can specify window settings, such as whether to show the browser's menu, toolbar, and so on.
One new window: The first time the user clicks a thumbnail, the corresponding image will open in
a new window. If the user clicks another thumbnail, its image will open in the same window as the first image, replacing it. You can specify the window size and its settings, such as whether to show the browser's menu, toolbar, and so on. ith the specified number of seconds between images.
Multi-View
The wizard inserts a table of thumbnails and the first full-size image, below the thumbnail table, into the current document. When the user clicks a thumbnail, the corresponding full-size image replaces the one being displayed. This style has no settings to configure.
Gallery
The wizard inserts a table containing the full-size images themselves into the current document. No thumbnails are generated. This style has no settings to configure.
Frame Style 1, 2, 3 and 4
The wizard inserts an inline frame into the current document; this inline frame contains a frameset in which one frame (the smaller frame) is used to display thumbnails, and the other (larger) frame is used to display the full-size image. The larger frame initially displays the first full-size image. When the user clicks a thumbnail, the corresponding full-size image replaces the one being displayed in the larger frame. The four Frame Style styles differ only in the relative positions of the two frames; for example, Frame Style 1 puts the thumbnail frame on the left, while Frame Style 2 puts it on the right. You can specify both the size of the inline frame (in pixels) and the relative sizes of the two frames inside it (in percentages). The default sizes are 800 x 800 pixels for the inline frame, 22% for the thumbnail frame, and 78% for the full-image frame. You can also specify whether the inline frame should display scrollbars always, never, or only when needed (auto).
Adding JavaScript effects

In the beginning, the kinds of things Web authors could do inside a Web page were quite limited. There was contentthe words and images that make up a document; and there was markupthe HTML tags that tell Web browsers how to present the content. As the Web grew and Web authors started wanting to do more with their pages, it became obvious that something was missing: a way to make Web pages dynamic. A dynamic Web page is one that can change in some way after it is opened in a browser. For example, a dynamic page might have a menu in which clicking an item reveals a submenu of links that were previously hidden. There is no way to create such a menu with pure HTML, since HTML provides no way for authors to instruct browsers to change something in a document in response to user actions (such as clicking a menu item). What is needed is the ability to program the browserto tell it something like, "If event X takes place, then do Y." JavaScript provides this capability. JavaScript is a scripting language designed for the Web. A script is a program that is stored as plain text and is "run" by a host program, such as a Web browser. Scripts written in JavaScript can be included directly within Web documents. When a browser that supports JavaScript opens a document containing a script, it loads the script into memory and executes it either right away or later, in response to some event. Although other Web-oriented scripting languages exist (most notably VB Script), JavaScript is the most widely supported by browsers and operating systems. These are just a few of the kinds of dynamic effects that JavaScript makes possible in Web pages: Replacing an image with another image when the user moves the pointer over it Revealing or hiding a block of content when the user clicks a button Displaying a message (dialog) box when the user clicks a hyperlink Moving an image along a predefined path Causing an image or text to follow the pointer as the user moves the mouse
Fortunately, you don't have to know how to program in JavaScript to be able to add useful scripts to your documents. Namo WebEditor provides three ways to add scripted effects without writing scripts. The Script Wizard The Script Wizard provides an easy, step-by-step interface for adding twenty of the most popular JavaScript effects to your page, from image rollovers to expanding menus. Actions and events Through the Actions window, you can "attach" any of eighty built-in scripts ("actions") to various kinds of page elements and specify the event that triggers the action. The built-in actions include applying an alpha effect, flipping a layer, inserting text, and many more.
256 Adding JavaScript effects
Timelines A timeline is a predefined sequence of movements and other changes (such as becoming hidden or visible) that apply to one or more layers (p.97) over a period of time. In other words, a timeline is a way to animate page content. Timelines are created in the Timeline window.
Using the Script Wizard

Use the Script Wizard to easily add a JavaScript effect to the current document. The wizard includes twenty effects, ranging from simple image rollovers to expanding, customizable navigation menus. To start the Script Wizard, do one of the following: On the Insert menu, point to Script, and then click Script Wizard. On the Main Toolbar, click (Insert Script Wizard Effect).
Script Wizard: Text menu

Text Menu is a menu where you select and click a word to move to a specific address (URL). Text menu is created in a layer, and the size of the layer you see in the Edit window will be the size of the entire text menu. You can also apply effects to the Text Menu to make it dynamic.
To create a text menu
1. 2. 3.
4. 5. 6. 7. 8.
On the Insert menu, point to Script, and then click Script Wizard, or select Script Wizard from the standard toolbar. In the Select a Script, select Text Menu from the Menus and Navigation folder. Click Next. In the Target layer drop-down menu, select the layer to insert the text menu in. You can either select an existing layer or create a new layer. To put the text menu it a new layer, select New from the Target layer drop-down menu. To add a new item in the text menu, press Add. In the Menu Item Settings dialog box, specify the Item name and the Link URL, then click OK. Click Next. The Format Menu dialog box will appear. Specify Background, Border color, Font, Font color, then click Next. In the Menu Action dialog box, choose the Action type, and then click Finish.
-To modify the existing text menu, right-click the layer containing the text menu to open the shortcut menu. Select Script Wizard Properties. You can also change the order of the items in the Text Menu dialog box by clicking Up/Down.
Adding JavaScript effects 257
-The text menu items are not visible in the Edit window, and only the layer will be shown. You can preview the text menu in the preview window. -In case you inserted the text menu in the existing layer, the background color set in the Layer Properties dialog box will not be displayed. To change the text menu background, right-click to open the shortcut menu, and then select Script Wizard Properties.
Script Wizard: Drop-down menu

If you click an item in the drop-down menu, the relevant URL will open. The drop-down menu is very useful when there is not much space for menu items.
Create drop-down menu
To create drop-down menu, specify drop-down menu items and the target frame to open linked pages in. 1. 2. 3. 4. 5. 6. in the On the Insert menu, point to Script, and then click Script Wizard, or click Script Wizard standard toolbar. In the list, select Drop-down menu in Menus and Navigation. Click Next. To add a drop-down menu, press Add. In the Menu Item Settings dialog box, specify Item name and Link URL, and then click OK. Specify Target to show the linked pages in. If you don't use any frame, then set it for '_self'(default). If you want the linked pages to open in the new window, then set it for '_blank'. In Height, specify how many rows of the menu will be shown. If you set it for '1', then the dropdown button will appear. If you set it for '2' or more, then the scrollbar will appear. Error! Objects cannot be created from editing field codes.
Height = '1'
Error! Objects cannot be created from editing field codes.

Height = '2'
7.
Click Finish.
-If you double-click the drop-down menu, or Form Element Properties in the shortcut menu, then Dropdown Menu Properties dialog box will appear. Here, you can add/remove/modify menu items.. -In the Drop-down Menu Properties dialog box, you can also specify the style, and select Allow multiple selections.
Script Wizard: Expanding navigation menu

When you click an item of the main menu, it will spread out a sub-menu below it. If you click again, it will do the opposite. When you click an item of the sub-menu, it will open the relevant URL. To create an expanding navigation menu, specify the items of the expanding navigation menu, and set the style. After all this precedure, an expanding navigation menu will be inserted into the document.
Create expanding navigation menu
1. 2. 3. 4. 5. 6. 7. 8.
9.
On the Insert menu, point to Script, and then click Script Wizard, or click Script Wizard in the standard toolbar. In the list, select Expanding Navigation Menu in the Menus and Navigation. Click Next. To add menu items to the menu, click Add. In the Menu Item Settings dialog box, specify the Item name, URL and Target. Click OK. To add sub-items, select an upper item, press Add, and then repeat step 4. After adding all items, click Next. Specify Font, Size and Color. If you want the item to change its color when the mouse pointer is over it, select Use rollover effect and set the Highlight color. Click Next. Choose how you want the menu to initially appear when the document is loaded in a browser: o Fold: Only the top level of items will initially be visible. o Expand: All levels will initially be visible. (The menu will be fully expanded.) o User-defined: Only the levels that you expand in the preview will be initially expanded. Click the + or - signs next to menu items to set up the menu the way you want it to initially appear. Click Finish.
-To modify or remove the expanding navigation menu, open the shortcut menu, select Script Wizard Properties. -To change the position and size of the expanding navigation menu, open the shortcut menu, select Layer Properties, and modify the position and size of the layer. Or you can directly adjust the handle of the layer. -The expanding navigation menu is not visible in the Edit window. Only the layer which contains the menu is visible. You can preview the expanding navigation menu in the preview window or the web browser.
Script Wizard: Background fade in/out

When you open the document or move to another one, the background color of the document will change. You can also adjust the speed of the background color change. With this effect, you can give various changes to the document.
Apply background fade in/out effect
1. 2. 3. 4.
5.
On the Insert menu, point to Script, and then click Script Wizard, or click Script Wizard in the standard toolbar. In the list, select Background fade in/out in Transitions. Click Next. In the Apply effect, decide when to change the background. Select Enable fade effect. In the Remote site information, set the Starting/Ending color. In the Number of steps, decide how many steps will take to change the background color. The larger the number is, the more slowly and gently the effect will take place. Press Finish.
Remove background fade in/out effect
1. 2. 3. 4.
Open the document which the effect is being applied to in the Edit window. On the Insert menu, point to Script, and then click Script Wizard, or click Script Wizard standard toolbar. In the list, select Background fade in/out in Transitions. Click Next. Deselect Enable fade effect, and Press Finish. in the
Script Wizard: Wipe effect

The screen or the layer will be wiped off a colored covering to reveal the contents. Using the Wipe effect, you can give a different feeling to the screen, or emphasize a layer. To apply Wipe effect to the layer, the layer must be inserted in advance.
Apply Wipe effect
1. 2. 3. 4. 5.
On the Insert menu, point to Script, and then click Script Wizard, or click Script Wizard in the standard toolbar. In the list, select Wipe effect in Transitions. Click Next. Decide whether you will apply the effect to the Entire window or the Layer. In case you select the Layer, select the layer to apply the effect to in the Layer box. Looking at the result in the Preview, select the Wipe effect type and Wipe color. Press Finish.
Chapter 5: Spicing Up Your Site Remove Wipe effect
1. 2. 3. 4.
On the Insert menu, point to Script, and then click Script Wizard, or click Script Wizard standard toolbar. In the list, select Wipe effect in Transitions. Click Next. Select No wipe effect. Press Finish.
in the
Script Wizard: Floating layer

When the user scrolls the document in a browser, the affected layer floats at the same position. If you apply this effect to the layer which contains the menu, the visiters can save their efforts to scroll back to see the menu again. To apply Floating layer effect, the layer must be inserted in advance.
Apply floating layer effect
1. 2. 3. 4. 5.
On the Insert menu, point to Script, and then click Script Wizard, or click Script Wizard in the standard toolbar. In the list, select Floating layer in Layer Effects. Click Next. Select the Target layer to apply floating effect to. Specify where the layer should be floating at. If you click Float at current position, the position of the layer will be fixed at the current position. Press Finish.
Remove floating layer effect
1. 2.
Select the layer which has the effect. Open the shortcut menu, and select Script Wizard Properties. Select No floating layer, and then press Finish.
Script Wizard: Sliding layer

When you place your mouse pointer on the edge of a hiding layer, the layer slides into the screen. You can put away the contents of the layer ouf of the screen, and withdraw it whenever you want. To apply the Sliding layer effect, the layer must be inserted in advance.
Apply sliding layer effect
1. 2.
On the Insert menu, point to Script, and then click Script Wizard, or click Script Wizard standard toolbar. In the list, select Sliding layer in Layer Effects. Click Next.
in the
3. 4.
Select the Target layer, and specify Slide layer poisiton and Sliding speed. The larger the Sliding speed number is, the faster it slides in. Press Finish.
-In case you select Original position for the Slide layer position, you must place the layer on the top or the left of the screen in advance.
Remove sliding effect
1. 2.
Select the layer which has the effect. Open the shortcut menu, and select Script Wizard Properties. In the Sliding layer dialog box, select No sliding effect, and then press Finish.
Script Wizard: Mouse trails

The layer trails the mouse pointer. In the preview window or web browser, the image or text inserted in the layer will trail the mouse pointer. To apply Mouse trail effect, you must insert the layer containing an image or text in advance.
Apply mouse trail effect
1. 2. 3. 4.
On the Insert menu, point to Script, and then click Script Wizard, or click Script Wizard in the standard toolbar. In the list, select Mouse trails in Layer Effects. Click Next. From the drop-down menu, select the target layer (the layer must be inserted in advance). Press Add to add the layer to the list. Press Finish.
-If you add two or more layers to the list, several layers will trail the mouse pointer. You can change the order of the layer by pressing Up/Down, or you can remove the layer out of the list by pressing Remove.
Remove mouse trail effect
1. 2. 3.
On the Insert menu, point to Script, and then click Script Wizard, or click Script Wizard standard toolbar. In the list, select Mouse trails in Layer Effects. Click Next. Press Remove Script, and then Finish.
in the
Script Wizard: Marquee

The text or image in a layer will scroll in the way you like. The starting point of this effect will be where the layer is located at. Therefore to change the starting point, change the position of the layer. To apply the marquee effect, you must insert the layer containing an image or text in advance.
Apply marquee effect
1. 2. 3. 4. 5. 6. 7. 8. 9.
On the Insert menu, point to Script, and then click Script Wizard, or click Script Wizard in the standard toolbar. In the list, select Marquee in the Scrollers. Click Next. Select the Target layer, and then specify the Scroll direction. Specify the scrolling type in the Behavior. Specify the scrolling speed in the Scroll stride. The larger the number is the faster it will scroll. Specify the repeat interval of scrolling in the Scroll delay. Specify the length of the scrolling in the Visible length. To adjust the visible lengh of scrolling to be identical with the size of the layer, click Fit to Layer . Specify how many times the scrolling will repeat in the Repetitions. Click Finish.
-When you select Bidirectional in the Behavior, you should set the Visible length bigger than the layer size. In case you select Unidirectional scroll, if you set the Repetitions as '-1', it will repeat infinitely. In case you select Sequential scroll, the scrolling object will disappear when it finishes repeating as specified.
Remove marquee effect
1. 2. 3.
On the Insert menu, point to Script, and then click Script Wizard, or click Script Wizard standard toolbar. In the dialog box, select No effect in the Scroll direction. Click Finish.
in the
Script Wizard: Scrolling text in a box

The scrolling text moves from right to left within an one-line text box repeatedly. The scrolling text keeps moving by specific periods.
Insert a scrolling text box
1.
On the Insert menu, point to Script, and then click Script Wizard, or select Script Wizard the standard toolbar.
from
2. 3. 4. 5.
In the Select Script, select Scrolling Text in a Box from the Scrollers folder, then click Next. Specify Form name and Form field name. You can use only the English alphabet, digits and underscores (_) for the name. The name must start with an alphabet. Enter text in the Scrolling text, then specify Scrolling period. The larger number the Scrolling period has, the slower the scrolling text moves. Click Finish.
-To adjust the length of the text box that contains the scrolling text, select the text box, then drag the left or right handle.
Modify scrolling text box
1. 2.
Double-click the one-line text box, or right-click to open the shortcut menu, and then select Scrolling Text in a Box. Modify the Scrolling text, and Click Finish.
Script Wizard: Scrolling text in the status bar

The scrolling text moves from right to left on the status bar of the web browser repeatedly.
Insert scrolling text in the status bar
1. 2. 3. 4.
On the Insert menu, point to Script, and then click Script Wizard, or select Script Wizard from the standard toolbar. In the Select Script, select Scrolling text in the status bar from the Scrollers folder, then click Next. Fill in Text 1, Text 2 and Text 3. The inserted texts will move on the status bar. Click Finish.
Remove the effect
1. 2. 3.
On the Insert menu, point to Script, and then click Script Wizard, or select Script Wizard from the standard toolbar. In the Select Script, select Scrolling text in the status bar from the Scrollers folder, then click Next. Press Remove Script. Click Finish.
Script Wizard: Image rollover

When you bring the mouse pointer over a rollover image, it will be replaced by another image. If you move the mouse pointer off the image, the first image will be restored. Therefore, you need two images to make a rollover image.
Chapter 5: Spicing Up Your Site Create an image rollover
1. 2. 3. 4. 5.
On the Insert menu, point to Script, and then click Script Wizard, or select Script Wizard from the standard toolbar. In the Select Script, select Image Rollover from the Rollover Effects folder, then click Next. Enter the Name of the rollover image. You can use only the English alphabet and digits for the Name. Set First image path and Second image path respectively. You can preview the rollover effect in the Preview window. Click Finish.
-You can also insert a hyperlink in the rollover image in the Image Rollover dialog box. Press Hyperlink to open the Hyperlink Properties dialog box, and then set the hyperlink to the rollover image.
Modify an image rollover
1. 2. 3.
Double-click the rollover image, or right-click to open the shortcut menu, and then select Image
Properties.
Select the Rollover tab. Modify Second image path, then click OK.
Remove an image rollover
1. 2. 3.
Double-click the rollover image, or right-click to open the shortcut menu, and then select Image
Properties.
Select the Rollover tab. Press Remove Rollover. Click OK.
Script Wizard: Animation effect

Images, texts and layers can have animation effects. When you don't use the layer, the whole paragraph where the cursor is placed will have the effect.
Apply animation effect
1. 2. 3. 4.
On the Insert menu, point to Script, and then click Script Wizard, or select Script Wizard from the standard toolbar. In the Select Script, select Animation effect from the Other folder, then click Next. Enter Animation layer name. The name must begin with an alphabet, and cannot have a space in itself. Looking at the Preview window, specify Starting position and Trace type.
5. 6. 7.
Specify Starting condition, Total steps and Delay. The larger number the Total steps has, the slower the animation will be. In the Internet Explorer section, specify Zoom text. If you select Word by word, the word will move individually. This effect is supported by Internet Explorer. Click OK. special tag mark will appear.
-Beside the layer which has the animation effect, the Script Wizard -The animation will stop where the layer is located at currently.
-The whole paragraph where the cursor is placed will have the effect. Therefore, to apply animation effect to a certain part only, you have to use the layer. Even when you break the line by pressing ShiftEnter, the new line still belongs to the paragraph, therefore will be affected by the effect.
Remove animation effect
1. 2.
Select the layer which has the animation effect, and right-click to open the shortcut menu, and then select Script Wizard Properties. Select No animation. Click Finish.
In case it is not the layer that you want to remove the effect from, but text or an image itself, do step 1-2 of "Apply animation effects", and then select No animation. - The animation effect is not supported by Internet Explorer 3.0 and lower or Netscape 3.0 and lower.
Script Wizard: Link button

When you click a Link Button, you will move to a previous/next page or a specific URL. You can simply insert "Forward/Back" buttons in the web document.
Create a link button
1. 2. 3. 4. 5.
On the Insert menu, point to Script, and then click Script Wizard, or select Script Wizard from the standard toolbar. In the Select a script, select Link Button from the Other folder. Click Next. Enter Button label. Specify the Destination(URL/Forward/Back). You can insert "Forward/Back" buttons as those of the web browsers. In case you select URL, you can select the target frame. Click Finish.
-In case the linked page has no frame, set the target frame value as '_self'. -You can set the style of the link button. Right-click the link button to open the shortcut menu, select Form Element Properties, and then click Style.
Modify a link button
1. 2.
Double-click the link button. Or right-click the link button to open the shortcut menu, and select Link Button. In the Link Button dialog box, modify Button label and Destination, and then click Finish.
Script Wizard: Banner rotation

A banner can rotate images. The banner displays the title of the document or advertises a website. When you click the banner, you will move to relevant page. To make a banner rotation, two or more images are needed.
Create a banner rotation
1. 2. 3. 4. 5. 6.
On the Insert menu, point to Script, and then click Script Wizard, or select Script Wizard from the standard toolbar. In the Select a Script, select Banner Rotation from the Other folder. Click Next. Press Add. In the Banner Rotation Item Settings dialog box, specify the path of the Image and Link URL of the page to link. If needed, set the target frame, and click OK. To add more images, repeat Step 3. Specify Rotation period of the banner rotation. The larger the number is, the later the next image will appear. Click Finish.
-In case the linked page has no frame, set the target frame value as '_self'.
Modify a banner rotation
1. 2. 3.
Select the image which has the rotation effect. In the shortcut menu, select Script Wizard Properties. Select the item to modify in the list. Click Modify. By clicking Up/Down, you can change the rotation order. You click Remove to remove the item. Click Finish.
Namo WebEditor 2006 User Manual Remove the rotation effect
1. 2.
Select the image which has the rotation effect. In the shortcut menu, select Script Wizard Properties. Press Remove Script. Click Finish.
Script Wizard: Pop-up window

When you open a document, or click an image, a new window may pop up. Usually, these pop-up windows are used to show an announcement when you open the first page.
Insert a pop-up window
1. 2. 3. 4. 5. 6. 7.
On the Insert menu, point to Script, and then click Script Wizard, or select Script Wizard from the standard toolbar. In the Select a Script, select Pop-Up Window from the Other folder. Click Next. Specify Target window name. You can use only the English alphabet, digits and underscores (_) for the name. The name must begin with an alphabet. Enter URL for the pop-up window. Specify the Position and Size of the pop-up window. In the Options section, select the item you want (Show toolbar, Show menu, Resizable, Show scroll bar, Show status bar). Click Finish. Check if the pop-up window works properly in the preview window.
Remove the pop-up window
1. 2. 3.
On the Insert menu, point to Script, and then click Script Wizard, or select Script Wizard the standard toolbar. In the Select Script, select Pop-Up Window from the Other folder. Click Next. Press Remove Script, and click Finish.
from
Script Wizard: Pop-up window cookie

A pop-up window can perform 'Do not open this window again today' function by using "Cookie". If you apply the pop-up window control Cookie, a form field and a check box will be inserted where the cursor is located. If the visitor select the check box in the web browser, the pop-up window will not appear again for a day.
Apply Cookie
1.
In the Edit window, open the document being used for the pop-up window.
2. 3. 4. 5.
6.
On the Insert menu, point to Script, and then click Script Wizard, or select Script Wizard from the standard toolbar. In the Select a Script, select Pop-Up Window Cookie from the Other folder. Click Next. In the Window name field, enter the name of the pop-up window to apply Cookie to. The name should be identical with the one you entered in the Script Wizard Pop-Up Window. In the Home URL field, enter the relative URL of 'index.html' of the website. For example, You may set a pop-up window (new.html) to appear when the visitor opens 'index.html', and publish those two documents to the website, 'http://www.namo.com'. If the absolute URL of 'index.html' is 'http://www.namo.com/index.html', then enter '/'. If the absolute URL of 'index.html' is 'http://www.namo.com/bbs/index.html', then enter '/bbs' in the Home URL field. Click Finish to insert the check box where the cursor is located. Type a sentence, 'Do not open this window today', beside the check box.
-Save the document, and check if the function works properly. When you select the check box, the pop up window will disappear. -To see the result, you must publish those documents first.
Script Wizard: Clock

You can create a clock that indicates current time and date. The clock appears as text and digits in an oneline text box.
Create a clock
1. 2. 3. 4. 5.
On the Insert menu, point to Script, and then click Script Wizard, or select Script Wizard from the standard toolbar. In the Select Script, select Clock from the Other folder, then click Next. Specify Form name and Form field name. You can use only the English alphabet, digits and underscores (_) for the name. The name must start with an alphabet. In the Time format list, select the kind you want. Click Finish. You can preview the clock in the preview window.
-To adjust the length of the text box that contains the clock, select the text box, then drag the left or right handle from side to side. To modify the name or the kind of the clock, right-click to open the shortcut menu, and then select Clock. -The time of the clock is based on the system time set by the computer. Therefore, if you change the system time, the clock time will also be changed. For this reason, the time of the clock displayed in the web browser may differ depending on the computer.
Script Wizard: Access information

When the visitor comes to the website, the script asks the visitor's name, or show last modification date and time, the visitors IP address, host name, etc. In case of asking the visitor's name, the script shows the prompt window where the visitor enter his/her name. Those information will appear in the one-line text box in the document.
Insert Access information
1. 2. 3. 4. 5.
On the Insert menu, point to Script, and then click Script Wizard, or click Script Wizard in the standard toolbar. In the list, select Acess information in Other, and then click Next. Specify the Form name and Form field name. The name can consist of English alphabets, numbers and underscores (_). The name must begin with the English alphabet. Select Information type. Click Finish.
-To modify the access information, select Access information from the shortcut menu. -Visitor's IP address and Host name appears only in Netscape.
Script Wizard: Cell rollover

If you bring the mouse pointer over a cell, the cell color and style will change. If you bring the mouse pointer off the cell, the original appearance will be restored. In case you create a layout for a document by using the layout box, you can easily apply the rollover effect to the area you want to. To apply the rollover effect to a cell, you must select the cell first.
Apply the rollover effect to a table cell
1. 2. 3. 4. 5. 6. 7.
Place your cursor inside the cell to apply the rollover effect to. in the On the Insert menu, point to Script, and then click Script Wizard, or click Script Wizard standard toolbar. In the list, select Cell rollover in Rollover Effects. Click Next. Press Add to open Style Name dialog box, and enter the style name in the Name field. In the Style dialog box, specify the cell style such as font, background color, style, etc. From the Rollover style list, select the new style name, and then preview the result in the Preview window. Click Finish.
-You can preview cell rollover effect in the preview window or in the web browser. -You can also modify the effect by using the shortcut menu. In the shortcut menu, select Cell Properties, and then Script Wizard.
Modify the table cell rollover effect
1. 2. 3.
In the shortcut menu, select Cell Properties. Press Script Wizard. Press Add to add a new rollover style, or Edit to edit an existing rollover style. Click Finish.
-In the Rollover styles list, if you select (none), the rollover effect of the relevant cell will be removed.
Working with actions and events

An action is a script that is executed as the result of some event, such as the user's clicking an image or the document's being opened by a browser. Actions are "attached" to events that occur with respect to certain kinds of page elements. For example, an action that reveals a hidden paragraph might be attached to a "mouse over" event on an image: when a user moves the pointer over the image, the action is executed and the hidden paragraph is revealed. You can attach more than one action to the same event on a given element. For example, clicking an image can reveal a hidden paragraph and set a timeline (p.283) in motion, at the same time. Similarly, you can attach actions to multiple events on an element. For example, the popular "rollover" effect involves having one action occur when the mouse pointer enters the boundaries of an element, and another, opposing action occur when the pointer exits those boundaries. Namo WebEditor includes over 80 built-in actions (p.272) and supports 17 event types (p.271). The Actions panel is where you attach actions to events on page elements (or the whole document). If any actions are already associated with the current element, they are listed in the window. To show the Actions panel: on the View menu, point to Panels, and click Actions (or press Alt+7).
List of supported events

Event OnClick OnDblClick Occurs when... the user clicks an element the user double-clicks an element Applies to any element any element
Event OnMouseDown OnMouseUp OnMouseOver OnMouseOut OnFocus OnBlur OnSelect OnChange OnKeyPress OnKeyDown OnKeyUp OnLoad OnUnload OnAbort OnError OnResize OnScroll OnFrame[n]
Occurs when... the user presses the mouse button while the pointer is over an element (but before she releases the mouse button) the user releases the mouse button while the pointer is over an element the user moves the pointer into an element's boundaries the user moves the pointer outside an element's boundaries a form field receives focus (becomes the target of key presses) or the document window is made active a form field loses focus or the document window is made inactive the user selects text in a form field the user edits text in a form field or changes the selection in a form menu the user presses a key while the insertion point is in a form field or a hyperlink has focus the user completes the down stroke of a key while the insertion point is in a form field or a hyperlink has focus the user completes the up stroke of a key while the insertion point is in a form field or a hyperlink has focus the browser finishes loading the document or an image the user leaves the document the user cancels loading the document or an image the browser encounters an error while loading the document or an image the user resizes the document window the user scrolls the document window the nth frame of a timeline is reached
Applies to any element any element any element any element form fields, documents form fields, documents text form fields text form fields, form menus text form fields, hyperlinks text form fields, hyperlinks text form fields, hyperlinks documents, images documents documents, images documents, images documents documents timeline frames
List of built-in actions

Image-related actions
Action Preload Image Replace Image
Description Preloads an image file that is not initially displayed Replaces a named image with another image
Notes Use to avoid a delay when a script inserts an image after the document has been loaded.
Action Resize Image Restore Image Set Background Image
Description Changes the display size of a named image Restores an original image after being replaced Sets or changes the document's background image
Notes
Layer-related actions
Action Clip Layer
Description Restricts the visible portion of a layer
Notes Takes four length parameters in pixel units, measured from the initial top left corner of the layer:
Top: the offset of the top edge of the visible portion of the layer from its initial top edge Left: the offset of the left edge of the visible portion of the layer from its initial left edge Right: the offset of the right edge of the visible portion of the layer from its initial left edge Bottom: the offset of the bottom edge of the visible portion of the layer from its initial top edge
Glide Layer
Causes a layer to "glide" from a starting position to a final position
The smaller the value of the Speed parameter, the faster the motion (0 is fastest). This value is relative; the actual speed depends on the browser and the computer. The Step parameter means the number of pixels the layer moves with each step. Negative values cause the layer to be moved toward the left and/or top.
Hide Layer Move Layer by
Move Layer to
Replace Contents of Layer
Hides a layer Moves a layer by the specified number of pixels from its initial position, horizontally and/or vertically Moves a layer to the specified position, measured in pixels from the top left corner of the page Replaces the initial contents of a layer with the specified text
Negative values are allowed.
The replacement contents must be text only.
Action Resize Layer
Description Changes the size of a layer
Notes If the specified size would make the layer too small to fit its contents, the layer will be auto-sized to fit its contents.
Set Background Color of Layer Set Background Image of Layer Set Z-Index Show Layer Show Layer as Tooltip
Sets or changes a layer's background color Sets or changes a layer's background image Sets or changes a layer's Zindex (p.101) Reveals a hidden layer Causes a layer containing the specified text to "pop up" at the specified offset from the mouse pointer's location
Can be used to create a "tooltip" for a page element. Requires an existing layer, which can be initially empty and hidden.
Action Wipe Layer
Description Causes a layer to seem to "grow" from the specified starting coordinates to the specified ending coordinates
Notes Takes eight length parameters in pixel units, measured from the initial top left corner of the layer:
Starting top: the offset of the top edge of the
visible portion of the layer from its initial top edge at the beginning of the wipe Starting left: the offset of the left edge of the visible portion of the layer from its initial left edge at the beginning of the wipe Starting right: the offset of the right edge of the visible portion of the layer from its initial left edge at the beginning of the wipe Starting bottom: the offset of the bottom edge of the visible portion of the layer from its initial top edge at the beginning of the wipe Ending top: the offset of the top edge of the visible portion of the layer from its initial top edge at the end of the wipe Ending left: the offset of the left edge of the visible portion of the layer from its initial left edge at the end of the wipe Ending right: the offset of the right edge of the visible portion of the layer from its initial left edge at the end of the wipe Ending bottom: the offset of the bottom edge of the visible portion of the layer from its initial top edge at the end of the wipe
Form-related actions
Action Move Focus to Reset Form Field Select Text in Form Field Validate E-mail Address
Description Moves the focus to the specified field Clears the contents of the specified text field Selects the entire contents of the specified text field Displays a message box with the specified message if the specified text field does not contain a valid email address
Notes Generally used with an onBlur event on another field
Generally used with an onBlur event on the specified text field
Action Validate Field Contains Number Validate Field Not Empty Validate Length Not Exceeded Validate No Field Empty
Description Displays a message box with the specified message if the specified text field does not contain a number Displays a message box with the specified message if the specified text field is empty Displays a message box with the specified message if the contents of the specified text field exceed the specified length Displays a message box with the specified message if any text field in the specified form is empty (including hidden fields)
Notes Generally used with an onBlur event on the specified text field Generally used with an onBlur event on the specified text field Generally used with an onBlur event on the specified text field Generally used with an onClick event on a submit button
Document/window-related actions
Action Close Window
Description Causes the browser to close the current window
Disable Shortcut Menu Expand Window
Flash Message in Status Bar Fly Message in Status Bar Move Window in Circles Open Two URLs Open URL After Delay Open URL in Fullscreen Window
Disables the shortcut (right-click) menu for the current window and displays a message box with the specified text Causes the window to grow from the specified starting size to the specified final size, from the center out Displays a flashing message in the status bar Displays a message in the status bar in which characters "fly" in, one at a time Causes the window to move in circles the specified number of times and then come to rest at the specified offset from the top left corner of the screen Simultaneously opens the first URL in the current window and the second URL in a new window Opens the specified URL in the current window after the specified delay time Causes the browser to open a URL in a new, fullscreen window without a title bar, menu bar, toolbars, or status bar
Notes The browser may ask the user to confirm closing the window. The message box is not optional. The final size must be larger than the starting size.
Use with caution; users may have difficulty closing the new window.
Action Open URL in New Window Open URL with Message Open URL Periodically Refresh Window Print Document Refresh Window Resize Window by Resize Window to
Description Opens the specified URL in a new window with the specified options Opens the specified URL in the current window after the user closes a message box containing the specified text Opens the specified URL in the current window Reloads the current document at the specified intervals Opens the Print dialog box for the current document Reloads the current document once Reduces or enlarges the current window by the specified number of pixels, horizontally and/or vertically Resizes the current window to the specified size
Notes
Both horizontal and vertical size must be specified.
Scroll Window Set Background Color Shake Window Show Last Update Timestamp Show Message Box Show Message in New Window Show Message in Status Bar Test Browser
Scrolls the window up or down by the specified number of pixels Sets or changes the document's background color Causes the window to "shake" (move rapidly up, down, left, and right) the specified number of times Replaces the contents of a layer with the last update date and time of the current document Opens a message window (dialog box) containing the specified text Opens a new window displaying the specified text with the specified options Displays a static message in the status bar Causes the browser to load one of two specified URLs depending on whether the browser is Internet Explorer or Netscape Causes the browser to load one of two specified URLs depending on whether the specified plugin is installed Causes the browser to load one of three specified URLs depending on whether the user's operating system is Windows, Mac OS, or Linux
Requires an existing layer, which can be initially empty and hidden.
Test for Plugin Test Operating System
Action Test Screen Resolution Wipe Message in Status Bar
Description Causes the browser to load one of two specified URLs depending on the user's screen resolution Displays a message in the status bar that "wipes" back and forth repeatedly
Notes
Frame-related actions
Action Break Out of Frame Open URL in Whole Window Open URLs in Three Frames Open URLs in Two Frames
Visual effects
Description Causes the current document, if it is in a frame, to take over the whole window Opens the specified URL in the whole window, replacing any frameset Opens a specified URL in each of three specified frames Opens a specified URL in each of two specified frames
Notes
Action Apply Alpha Effect
Description Applies an alpha transparency gradient to the contents of a layer
Notes Takes six numerical parameters:

Start opacity: the opacity level at the
beginning of the gradient

Finish opacity: the opacity level at the end of
the gradient Start X: the distance in pixels from the left edge of the layer to the beginning of the gradient Start Y: the distance in pixels from the top edge of the layer to the beginning of the gradient Finish X: the distance in pixels from the left edge of the layer to the end of the gradient Finish Y: the distance in pixels from the top edge of the layer to the end of the gradient
Action Apply Blur Effect
Description Applies a blur effect to the contents of a layer
Notes Parameters:
Blur radius: higher values increase the
"blurriness" of the effect

Shadow opacity: specifies the degree of
opacity or translucency of the layer contents when the Make shadow option is selected If the Make shadow option is selected, all opaque parts of the layer will be changed to a medium gray tone. The Strength parameter controls the size of the glow.
Apply Glow Effect Apply Shadow Apply Hard Shadow Apply Mask Effect Apply Motion Blur Apply Wave Effect
Makes the contents of a layer appear to "glow" Applies a soft-edged shadow to the contents of a layer Applies a hard-edged shadow to the contents of a layer Fills transparent areas in a layer with the specified color and makes opaque areas transparent Applies a "motion blur" effect to the contents of a layer Applies a sine wave distortion to the contents of a layer along the vertical axis
The Strength parameter controls the length of the "trails". Parameters:

Cycles: the number of cycles in the wave Phase: the point in the cycle at which the
wave begins Amplitude: the horizontal difference between the peaks and troughs of the wave, in pixels Lighting strength: the difference in brightness between the peaks and troughs of the wave; set to "0" to leave original colors unmodified
If you select the Combine option, the wavedistorted contents will be superimposed on the original contents instead of replacing them. Apply X-ray Effect Converts the contents of a layer to a negative black & white image
Action Change Colors to Grays Flip Horizontal Flip Vertical Invert Colors Make Color Transparent Remove Visual Effect
Description Replaces all colors in the contents of a layer with gray tones Flips the contents of a layer horizontally Flips the contents of a layer vertically Changes each color in the contents of a layer to its inverse Makes one color in the contents of a layer transparent Restores the contents of a layer to their original appearance after a visual effect has been applied
Notes
-The visual effect actions all require that the affected content be contained in an existing layer. -The visual effect actions require Internet Explorer 5.5 or later.
Other actions
Action Call Function Enable BLINK Tag
Hide Element Jump to Timeline Frame
Description Causes the specified JavaScript function to be executed Enables Netscape's <blink> tag to work in Internet Explorer, causing contents to blink. Hides the element whose ID you specify Causes the specified timeline to jump to the specified frame
Notes Use this action to run your own custom script functions.
The element to be hidden must have an ID attribute (p.194). The Max repetitions parameter specifies the maximum number of times the same event will trigger this action. This can be especially useful when the event that triggers this action is an onFrame event on a frame after the specified "jump to" frame.
Pause WMP Object
Pauses the video or audio in the specified Windows Media Player object
Action Play Timeline Play WMP Object Show Element Stop Timeline Stop WMP Object
Description Starts the specified timeline Plays the video or audio in the specified Windows Media Player object Reveals the hidden element whose ID you specify Stops the specified timeline if it is playing Stops the video or audio in the specified Windows Media Player object
Notes
The element to be revealed must have an ID attribute (p.194).
Attaching actions to events on elements

You can attach an action to an event involving any of the following types of elements: hyperlinks bookmarks images layers form controls
To attach an action to an event on an element
1. 2. 3. 4. 5.
Select the desired element. (If the element is a hyperlink or bookmark, you can just place the insertion point within it.) On the Actions panel, click (Add). In the Action Properties dialog box, select the desired Event and Action. Specify the Parameters for the selected action. Click OK.
-Although you cannot directly attach an action to an ordinary piece of text, you can create a bookmark (p.159) on the desired text and attach an action to the bookmark.
Attaching actions to events on a document

You can attach an action to an event involving a document as a whole, such as the document's being loaded by a browser.
To attach an action to an event on the current document
1. 2. 3. 4. 5.
Make sure no element is selected and the insertion point is not within a hyperlink or bookmark. On the Actions panel, click Add . In the Action Properties dialog box, select the desired Event and Action. Specify the Parameters for the selected action. Click OK.
Using the Script Manager

The Script Manager provides a convenient way to add, remove, or modify any action attached to any element in the current document. You can also use it to see which elements have Script Wizard effects associated with them, and to remove those effects. To open the Script Manager window, on the Window menu, click Script Manager. The left pane of the window displays a hierarchical list of all the elements in the current document to which actions or Script Wizard effects can be attached, starting with the document itself. Note that a parent element, such as a form, may appear in the list even though you cannot attach actions to it; it is there because one or more of its child elements can have actions attached. If an element in the list actually has an attached action, a small red circle appears on the top right corner of its icon. If it is associated with a Script Wizard effect, a small red letter "S" appears on the bottom right corner of its icon. The top and bottom panes on the right side of the window list the actions and Script Wizard effects, respectively, that are attached to the element currently selected in the element list. You can attach a new action to an element in the element list by selecting it and clicking Add. This has the same effect as selecting the element in the document window and clicking Add on the Actions panel. Similarly, you can edit or remove an attached action by selecting it in the action list and clicking Modify or Remove. Finally, you can remove an attached Script Wizard effect by selecting it in the effect list and clicking Remove.
Creating timelines
An important aspect of layers (p.97) is that you can position them freely anywhere on a page. Using JavaScript, it is even possible to change the position of a layer after the page has been opened in a browser. Timelines take advantage of this fact. By creating a timeline, you describe a sequence of positional changes, affecting one or more layers, that the browser will execute at some point after loading the page. You can set a timeline to start automatically when the browser has finished loading the page, or the timeline can be started by a script action (p.271) attached to some event (such as clicking a specific image). A timeline consists of a sequence of frames, like the frames of a movie. When a browser "plays" a timeline, it steps through each frame from first to last, one after another, at a certain speed. Each frame describes the state of one or more layers at a point in time. The state of a layer includes its position, size, visibility, and z-index. A timeline contains one or more sprites arranged in time, like notes in a musical score. Each sprite controls the motion or changing state of one layer across a certain number of frames.
An example timeline with four sprites
The example timeline pictured above contains four sprites (the lavender bars), named after the layers they control. As you can see, sprites can overlapmeaning that two or more layers are in motion or changing state at the same time. Two sprites can control the same layer, but then they cannot overlap. Each sprite has at least two keyframesframes at which the position/state of the associated layer is explicitly specified by you. Keyframes are indicated by large white dots on the sprite. The first and last frames of a sprite must be keyframes. You can add more keyframes anywhere in the sprite. In the frames between keyframes, the position/state of the layer is interpolated by Namo WebEditor. This fact lets you create a smooth animation by defining the position/state of a layer at just two points in time and letting Namo WebEditor take care of the in-between frames. In addition to controlling the position/state of one or more layers over time, a timeline can trigger actions (p.271) at specific frames. For example, when a timeline reaches the twentieth frame, it can trigger an action that causes the browser to start another timeline or reveal a hidden element.
Creating and editing timelines

Creating a timeline involves creating and arranging sprites on the Timeline panel. Each sprite controls the motion and/or changing state of one layer across a certain number of frames of the timeline. There are two basic methods of creating a sprite. We can call these the "drag method" and the "record method". Which one you should use depends on the nature of the animation you want to create: When you want a layer to move in straight lines between relatively few keyframes, or the motions of the layer must be tightly controlled, or you want the layer to not move at all but other aspects of its state to change over time, use the drag method. When you want a layer to move fluidly through a complex path, or you want to create a sprite quickly and the exact position of the layer at any given time is not important, use the record method.
To create a sprite with the "drag" method
1. 2. 3.
4. 5.
6. 7.
8. 9.
If the Timeline panel is not visible, press Alt+4 to reveal it. Select the layer you want to control by clicking its outline. Drag the layer by its handle into the Timeline panel. As the mouse pointer enters the panel, a sprite (lavender bar) should appear on the timeline. Release the mouse button when the sprite is in the desired position. Click the initial keyframe on the sprite (the white dot at the sprite's left end). In the document window, drag the layer to the position you want it to be in at the beginning of the animation. If necessary, double-click the layer's handle or outline and specify the exact position and other properties you want the layer to have at the beginning of the animation. Click the final keyframe on the sprite (the white dot at the sprite's right end). In the document window, drag the layer to the position you want it to be in at the end of the animation. When you release the mouse button, you should see a straight black line in the document window running between the layer's initial position and its final position, indicating the path it will take when the sprite plays. If necessary, double-click the layer's handle or outline and specify the exact position and other properties you want the layer to have at the end of the animation. If necessary, create additional keyframes (p.285) as desired and adjust (p.285) the layer's position/state at each, as described below. To preview the sprite, make sure the Auto start check box on the Timeline panel is selected, and then switch to Preview mode.
To create a sprite with the "record" method
1. 2. 3.
If the Timeline panel is not visible, press Alt+4 to reveal it. Select the layer you want to control by clicking its outline. Right-click inside the Timeline panel and click Record Path of Layer.
4.
5. 6.
In the document window, drag the layer through the path you want it to take, moving the mouse as smoothly as possible. As you drag, a series of asterisks will appear behind the mouse pointer, tracing its motion. When you release the mouse button, a black line representing the recorded path of the layer will appear in the document window, and a finished sprite will appear on the timeline. If necessary, adjust (p.285) the layer's position at specific keyframes or add/remove keyframes (p.285), as described below. To preview the sprite, make sure the Auto start check box on the Timeline panel is selected, and then switch to Preview mode.
To adjust a layer's position/state at a point on the timeline
1.
2.
Click the keyframe at which you want to adjust the layer's position and/or state. (Position and state can only be specified at a keyframe. If there is no keyframe at the point on the timeline where you want to specify these properties, you must add a keyframe (p.285).) Do any of the following, depending on what property of the layer you want to adjust: o To adjust the layer's position, first drag the layer to roughly the desired position. Then, if necessary, fine-tune the position by using the arrow keys on your keyboard to move the layer one pixel at a time, or by double-clicking the layer's handle and specifying the exact position relative to the document's top left corner, in pixels. o To adjust the layer's size, drag any of its resize handles. If necessary, double-click the layer's handle and specify its exact width and height in pixels. o To change the layer's visibility, z-index, or other properties, double-click the layer's handle.
Adding, moving, and removing keyframes
To add a keyframe, click the point on the sprite where you want the new keyframe, and then rightclick anywhere in the panel and click Insert Keyframe. Then, drag the layer to the desired position and/or set the layer's properties as desired for that point in the timeline. To move a keyframe, click the white dot representing it on the sprite and drag it left or right. The position of a keyframe determines when the layer reaches the position or state defined for that keyframe. Moving the beginning or ending keyframe of a sprite makes the sprite longer or shorter. You cannot move a keyframe beyond an adjacent keyframe. To remove a keyframe, click the white dot representing it, and then right-click anywhere in the panel and click Remove Keyframe. You cannot remove the beginning or ending keyframes of a sprite.
Moving sprites in time and space
To move a sprite in time, so that it starts at a different point in the timeline, drag it left or right on the timeline. You can also move a sprite to a different row on the timeline. Sprites on different rows can overlap, while sprites on the same row cannot. (However, note that two sprites that control the same layer can never overlap.)
To move a sprite in space, so that the entire path of the layer controlled by the sprite is offset from the original path, do the following: 1. In the Timeline panel, click the desired sprite at any frame that is not a keyframe. 2. In the document window, drag the layer in the direction and to the distance you want the path to be offset. When you release the mouse button, the black line representing the path will reappear at the new position. 3. If necessary, fine-tune the path's position by double-click the layer's handle or outline and specifying its exact position at that point. To remove a sprite, select it by clicking anywhere on it, and then press Delete.
Working with multiple timelines
One document can have multiple timelines, any of which can begin playing at the same time or at different times. For example, an action attached to a frame (p.287) in one timeline can start another timeline when the first timeline reaches that frame. To add a timeline, right-click anywhere on the Timeline panel and click Add Timeline. The new timeline will be named "timelineX", where X is the next available integer. To change the timeline being shown on the Timeline panel, click the combo box at the top left corner of the panel and select a timeline. To rename a timeline, select it, edit its name in the combo box, and press Enter. To delete a timeline, select it, right-click anywhere on the Timeline panel, and click Delete
Timeline.
Starting and stopping timelines

A timeline only starts playing when some event (p.271), such as the user clicking a particular image in the document, triggers a script that starts the timeline. If you want a timeline to start playing as soon as the document has been loaded, you can use an OnLoad event attached to the document itself. Selecting the Auto start check box on the Timeline panel does this for you. If you want a timeline to be started by some other event, you can use a Play Timeline action and trigger it with, for example, an OnClick event attached to a button image. Once a timeline is started, it will play through to its end unless stopped by a script. If started again by another event, the timeline will resume at the point where it was stopped. You can choose to have a timeline play just once or repeat endlessly.
To make a timeline start when the document loads
On the Timeline panel, select the desired timeline (if there is more than one) and then select the Auto start check box.
Chapter 5: Spicing Up Your Site To make another event start a timeline
1. 2. 3. 4. 5. 6.
Select the hyperlink, image, form control, or other element to which to attach the action that starts the timeline. (Add). (To reveal the Actions panel, press Alt+7.) On the Actions panel, click Click the Event box and select the event you want to start the timeline. Click the Action box and select Play Timeline. Under Parameters, click the Timeline box and select the desired timeline. Click OK.
To make an event stop a timeline
1. 2. 3. 4. 5. 6.
Select the hyperlink, image, form control, or other element to which to attach the action that stops the timeline. (Add). (To reveal the Actions panel, press Alt+7.) On the Actions panel, click Click the Event box and select the event you want to stop the timeline. Click the Action box and select Stop Timeline. Under Parameters, click the Timeline box and select the desired timeline. Click OK.
To make a timeline repeat indefinitely
On the Timeline panel, select the desired timeline (if there is more than one) and then select the Repeat check box.
Attaching actions to a timeline

Each frame in a timeline can have an action (p.271) attached to it. For example, the twentieth frame in a timeline might have an attached action that opens a new browser window; when the timeline reaches that frame, an OnFrame20 event occurs and the action is executed.
To attach an action to a timeline frame
1. 2. 3. 4. 5.
On the Timeline panel, click the column representing the desired frame. On the Actions panel, click (Add). (To reveal the Actions panel, press Alt+7.) Click the Action box and select the desired action. Under Parameters, specify values for any parameters the action may require, and then click OK. If you wish to attach another action to the same frame, repeat steps 2 through 4.
Namo WebEditor 2006 User Manual To remove an action attached to a timeline
1.
On the Timeline panel, click the column representing the frame that has the action you want to remove. On the Actions panel, select the action to remove, and then click Actions panel, press Alt+7.) (Remove). (To reveal the
1.
Adding interactive features

The Web is not a one-way street. From the beginning, it was designed to support interactive, two-way communication between Web sites and Web users. The simplest and most common example of interaction on the Web is the ever-popular "search box": a simple form in which users type in a word or phrase of interest and click a Search button, thereby telling a Web server to perform a search for the entered keywords. The common element in virtually all Web-based interaction is the form. A form is an area on a Web page that contains text boxes and other input controls by which a user can enter information to be passed to a script or program on the Web server. With Namo WebEditor, you can create and edit even complex forms easily, using the Form Toolbar and form-related dialog boxes. Namo WebEditor also includes several ready-to-use, form-related scripts you can use to do things like check whether a text box contains a valid email address before the user submits a form.
Creating Web forms

In Web documents, forms provide a means for users to submit information of some sort that is then processed by a Web server in some way. A form consists of a collection of controls (p.291), such as text boxes, drop-down menus, and buttons, through which users enter information. Usually, one button serves as a "submit" button, which the user clicks to have the browser submit the information to the server. More specifically, the form datawhich consists of both the information entered by the user and the identifying names of the form controlsis passed to a form handler, a server program or script that takes the form data as input and acts upon it in according to the intentions of the web developer. The form handler is specified in the form's action (p.297) attribute (p.297).
Example of a Web form
As an example, consider a form on a search page, like the simple form below, which consists of a dropdown menu, a one-line text box, and a submit button: Search in: Error! Objects cannot be created from editing field codes. For: Error! Objects cannot be created from editing field codes.
Error! Objects cannot be created from editing field codes.
Each control on a form has a name and a value. Names are assigned by the author, while values are provided by the user (either directly, as when the user enters something in a text box; or indirectly, as when the user selects an item in a drop-down menu or clicks a button). In the search form above, the name of the drop-down menu might be "area"; that of the text box, "query"; and that of the button, "button".
Adding interactive features 289
When the user selects a search area, enters a search term, and clicks the button, the browser sends the form data to the form handler, which for example might be http://deepsearch.namo.com/cgi-bin/mclient.cgi. The form data consists of one name/value pair for each control in the form. If the user has selected "Support" in the menu and entered "WebEditor" in the text box, the form data would be as follows: area = support query = WebEditor button = Search In this example, the program mclient.cgi then takes the query term and performs a search for that term on the documents in the specified area. When the search is complete, mclient.cgi generates an HTML document whose content is the list of search results, and the server returns this response document to the browser.
Steps to create a form
To create a Web form in Namo WebEditor, you simply insert one or more form controls in a document. You do not need to explicitly insert the <form> tag itself, since Namo WebEditor, by default, automatically inserts <form> tags around the controls you insert. In Edit mode, if the display of special tag marks (p.34) is enabled, the form will be surrounded by a dashed outline, as in the example below. (To toggle the display of special tag marks, click Show/Hide Special Tag Marks on the Standard Toolbar.)
A dashed outline surrounds a form in Edit mode
To ensure that a new form control belongs to the right form, make sure to insert it within the form's dashed outline. After inserting the form controls, make sure to specify the form's action (p.300) in the Form Properties dialog box. -Even if you have no script or program available on the Web server to handle a form, you can still make use of forms on your Web site by designating an e-mail address as the form handler. If you enter a mailto (p.147) link (p.147) such as "mailto:[email protected]" as the form's action, most modern browsers will send the form data to the specified e-mail address. So, for instance, you could create a form to receive feedback from your users, and the form would be useful even if you have no form handler on the server. Note: if you use a mailto action, you should also set the form's method attribute (p.297) to POST.
290 Adding interactive features
Inserting and editing form controls

Types of form controls
One-Line Text Box Lets users enter brief text, such as a name or one line of a street address. If the user leaves the text box empty, its name will still be sent to the form handler, but without a value. Text boxes of the special password subtype displays asterisks in place of the typed characters. Examples:
File Browser Same as a one-line text box, but with a "Browse" button attached. If the user clicks the Browse button, he or she can select a file on the local file system, and its absolute path will be automatically entered in the text box. (The user can still type arbitrary text in the box, however.) Useful for forms where the user is asked to specify a file to be uploaded to a server. Example: Scrolling Text Box Lets users enter long text with multiple paragraphs, such as a comment or the body of an e-mail message. If the user leaves the text box empty, its name will still be sent to the form handler, but without a value. You can specify the number of lines the text box will display at a time. Example: Error! Objects cannot be created from editing field codes.
Check Box Lets users answer a yes/no question by checking or unchecking a box. If the user does not check the box, no name or value will be sent to the form handler. You can control whether the check box is initially checked or unchecked. Examples:
Radio Button Lets users select one choice from two or more mutually exclusive choices. Radio buttons should always exist in groups of at least two. When the user selects a button, the button that was previously selected becomes deselected. Each button in the same group should have the same
name. You can control whether each radio button is initially selected or not, but only one button in a group should be initially selected. Examples:
Drop-Down Menu or List Box Lets users select one item or, optionally, multiple items from a list presented as either a drop-down menu or a list box. For each item the user selects, the name of the control and the value of the item will be sent to the form handler. If the user selects no item, no name or value will be sent. You can specify the height of the control (in rows) and whether multiple selections are allowed. Setting the height to 1 produces a drop-down menu; setting it to 2 or greater produces a list box. Examples: Error! Objects cannot be created from editing field codes. Error! Objects cannot be created from editing field codes.
Push Button A standard button that performs some action when clicked. The appearance of a push button depends on the browser and the operating system; generally, it looks the same as a button in a dialog box. There are three kinds of push buttons: submit: Sends the form data to the form handler. reset: Clears the form, returning it to its initial state. general: No predefined function. To make a general button do something, you need to attach a script action (p.271) to it.
Examples: Image Control An image that acts as a submit button, sending the form data to the form handler when clicked. Included in the form data are the x and y coordinates of the point the user clicked on the image. Thus, the form handler could do different things depending on where the user clicked on the image. Example: Hidden Field Provides a way to include information in the form data while keeping it invisible to users. The name and value of the hidden field are always included in the form data, even though the user cannot interact with the hidden field. Among other things, a hidden field could be used to provide the form handler with the URL of the page from which the form data was sent (and the form
handler could do something different depending on that information). In Edit mode, hidden fields (Show/Hide are indicated with this icon: . (If you cannot see hidden field icons, click Special Tag Marks) on the Standard Toolbar.)
To insert a one-line text box
1. 2.
3.
4.
Place the insertion point where you want the one-line text box. Do one of the following: o On the Insert menu, point to Form, and then click One-Line Text Box. o On the Form Toolbar, click (Insert One-Line Text Box). (optional) Modify the default settings as desired: o In the Name box, edit or replace the default name assigned by Namo WebEditor. Do not use the same name as any other control on the form. o In the Initial value box, enter the text that will initially appear in the box. o In the Width in characters box, enter the width of the box in characters. o In the Maximum input length box, enter the maximum number of characters that will be accepted. o Set Input type to Password if the text box will be used for password entry. (Typed characters will be displayed as asterisks.) Click OK.
To insert a file browser
1. 2.
Place the insertion point where you want the file browser. Do one of the following: o On the Insert menu, point to Form, and then click File Browser. (Insert File Browser). o On the Form Toolbar, click (optional) Modify the default settings as desired: o In the Name box, edit or replace the default name assigned by Namo WebEditor. Do not use the same name as any other control on the form. o In the Width box, enter the width of the box in characters. Click OK.
3.
4.
To insert a scrolling text box
1. 2.
Place the insertion point where you want the scrolling text box. Do one of the following: o On the Insert menu, point to Form, and then click Scrolling Text Box. o On the Form Toolbar, click (Insert Scrolling Text Box). (optional) Modify the default settings as desired:
3.
4.
In the Name box, edit or replace the default name assigned by Namo WebEditor. Do not use the same name as any other control on the form. o In the Initial value box, enter the text that will initially appear in the box. o In the Width box, enter the width of the box in characters. o In the Number of lines box, enter the height of the box in rows of text. Click OK. o
To change the scroll bars on a scrolling text box
1. 2. 3. 4.
After inserting a scrolling text box, double-click it. Click Scroll Bar. Specify the scroll bar colors as described in Setting document scrollbar colors, p.218. Click OK twice.
To insert a check box
1. 2.
3.
4. 5.
Place the insertion point where you want the check box. Do one of the following: o On the Insert menu, point to Form, and then click Check Box. o On the Form Toolbar, click (Insert Check Box). (optional) Modify the default settings as desired: o In the Name box, edit or replace the default name assigned by Namo WebEditor. Do not use the same name as any other control on the form. o In the Value box, enter the value that will be sent to the form handler if the user checks the box. (If you do not specify a value, the browser will send "On".) o Set Initial state to Checked if you want the check box to be initially checked. Click OK. Type a label for the check box.
To insert a radio button group
Repeat the steps below for each radio button in the group: 1. Place the insertion point where you want the radio button. 2. On the Form Toolbar, click (Insert Radio Button). 3. Make sure the name in the Name box is the same as that of every other button in the group, and different from that of any other control on the form. 4. In the Value box, enter the value that you want associated with the current button. 5. Set Initial state to Selected or Not selected. (Only one button in the group should be initially selected.) 6. Click OK. 7. Type a label for the button.
Chapter 5: Spicing Up Your Site To insert a drop-down menu or list box
1. 2.
Place the insertion point where you want the drop-down menu or list box. Do one of the following: o On the Insert menu, point to Form, and then click Drop-Down Menu. o On the Form Toolbar, click (Insert Drop-Down Menu). (optional) In the Name box, edit or replace the default name assigned by Namo WebEditor. Do not use the same name as any other control on the form. Repeat the steps below for each item you want in the menu or list. 1. Click Add. 2. In the Name box, enter the name of the item as you want it to appear in the menu or list. 3. In the Value box, enter the value that you want associated with the item. 4. If you want the item to be initially selected, select the Selected check box. 5. Click OK. In the Height box, enter the desired height of the control in rows. If you enter 1, the control will display as a drop-down menu; if you enter 2 or greater, it will appear as a list box in which the specified number of rows is visible at a time. If you want the user to be able to select more than one item, select the Allow multiple selections check box. Click OK.
3. 4.
5.
6. 7.
To insert a push button
1. 2.
3. 4. 5.
6.
Place the insertion point where you want the push button. Do one of the following: o On the Insert menu, point to Form, and then click Push Button. o On the Form Toolbar, click (Insert Push Button). (optional) In the Name box, edit or replace the default name assigned by Namo WebEditor. Do not use the same name as any other control on the form. In the Value box, enter the value associated with the button. The value also serves as the button's label (the text that appears on the button). Set the Button type to: o Submit, for a button that sends the form data to the form handler o Reset, for a button that clears the form, resetting it to its initial state o General, if you intend to attach a script action (p.271) to the button and only want the button to trigger that action. Click OK.
To insert an image control
1.
Place the insertion point where you want the image control.
2.
3. 4.
Do one of the following: o On the Insert menu, point to Form, and then click Image Control. o On the Form Toolbar, click (Insert Image Control). (optional) In the Name box, edit or replace the default name assigned by Namo WebEditor. Do not use the same name as any other control on the form. In the Image box, type the path or URL to an image file, or do one of the following: o o o Click Click (Browse) to find and select an image file on your local file system. (Clip Art) to select an image from the clip art library.
5.
6.
(Site) to select from a list of image files belonging to the current local site (if Click one is open). (optional) Under Size and Layout, specify the image properties as desired. (The options are the same as those available when inserting an ordinary image; see Images, p.119 for more information.) Click OK.
To insert a hidden field
1. 2.
3. 4. 5.
Place the insertion point where you want the hidden field. (Since it is hidden, its location does not matter, as long as it is within the form.) Do one of the following: o On the Insert menu, point to Form, and then click Hidden Field. o On the Form Toolbar, click (Insert Hidden Field). (optional) In the Name box, edit or replace the default name assigned by Namo WebEditor. Do not use the same name as any other control on the form. In the Value box, enter the value to be sent to the form handler. Click OK.
To edit a form control
Double-click the form control.
Changing the appearance of a form control
You can control many aspects of the appearance of most form controls. For example, you can change the character formatting (font, text color, and so forth) of a one-line text box, or the border properties of a button. To change the appearance of a form control, do this: 1. Double-click the form control. 2. Click the Style button and then click: o Character, to change character-related properties, such as font o Paragraph, to change paragraph-level properties, such as text alignment, line height, and so forth
Borders & Background, to change the control's borders, margins, padding, and background color or image.
For more information about using style properties, see the following topics: Setting character-related properties, p.197 Setting paragraph alignment, indentation, and line height, p.199 Setting margins, padding, and borders, p.200 Setting background colors and images, p.203
Note that not all control types are affected by a given style property. For instance, specifying the font for a check box or radio button has no effect, since those controls cannot contain text. (You can, of course, apply a style to a check box's label as you can to any other text, but the label is separate from the check box.)
Specifying a form's action and other properties

The most important part of a form is not visible to users: it is the form's action attribute, which specifies the URL of the form handlerthe script or program on the Web server to which the form data is passed and which acts on the form data. In all, each form has five attributes that you may need to specify values for, listed below. Only action must be specified; the other four are optional. Action The URL of the form handler. This is the only required attribute. If you do not specify an action, nothing will happen when a user clicks the submit button. Name The name of the form. This is only important if you plan to refer to the form in a script (p.256). Unlike the names of form controls, the name of the form itself is not sent to the form handler. Target The window or frame in which the document returned by the form handler will open. The default value is _self, meaning the response document will open in the same window or frame as the document containing the form. By changing the target, you can have the response document open in a new window, a specific named window, or a specific frame. The target types you can specify are the same as those for hyperlinks. (For more information about targets, see Setting a link's target window or frame, p.151.) Method The method of sending the form data to the form handler. There are two possible values: GET and POST.
If the method is set to GET, the browser will send the form data by appending it to the URL of the form handler; for example, "http://www.namo.com/search.php?area=support&query=WebEditor". If the method is set to POST, the browser will send the form data as an HTTP POST request. GET is the default method. The main advantage of the GET method is that, since the form data is included in the form handler's URL, users can bookmark the URL to make it easier to send the same request to the form handler in the future. For example, the user could bookmark the search URL in the paragraph above; each time the user uses the bookmark, the search engine would respond to the same query. However, the GET method is limited in that it does not support nonASCII form data, and the amount of form data that it can send is limited by the maximum URL length supported by the user's browser. The POST method does not have these limitations, so you should use it whenever users might enter non-ASCII characters (such as Chinese ideograms) in the form, or if the form data might be larger than 100 characters. You should also select POST if the form includes a file browser control (p.291). Encoding type The content type used to encode the form data when it is sent to the server. The default value is "application/x-www-form-urlencoded". Generally, you should not change this unless the form includes a file browser control (p.291), in which case set the encoding type to "multipart/formdata" and also set the method to POST. -If you enter a mailto (p.147) link (p.147) such as "mailto:[email protected]" as the action and set the method to POST, most modern browsers will send the form data to the e-mail address in the link. This can be a convenient way to view sample output from a form for testing purposes. -If you are designing a form that does not send information to a server but instead provides data for a client-side script (p.256), you do not need to specify a value for the action attribute.
To specify a form's action and other properties
1. 2. 3.
4.
Right-click anywhere on the form (within the dashed outline) and then click Form Properties. In the Action box, enter the URL of the form handler. (optional) Specify any other properties as desired: o In the Form name box, edit or replace the default name assigned by Namo WebEditor. o In the Target box, enter the name of the response document's target window or frame (p.151); or click the triangle and select from a list of special targets. o Click the Method box and select the desired transmission method for the form data. (If you do not specify a method, GET will be used.) o In the Encoding type box, enter an alternative encoding type for the form data only if necessary. If the form includes a file browser control, enter "multipart/form-data". In most other cases, you should leave this box blank. Click OK.
Chapter 5: Spicing Up Your Site Changing a form's style properties
You can apply various style properties to a form as a whole. For instance, you can change its background color, apply a background image, change its alignment on the page, and so forth. To modify a form's style properties, do this: 1. 2. Right-click anywhere on the form (within the dashed outline) and then click Form Properties. Click the Style button and then click: o Character, to change character-related properties, such as font o Paragraph, to change paragraph-level properties, such as text alignment, line height, and so forth o Borders & Background, to change the form's borders, margins, padding, and background color or image.
For more information about using style properties, see the following topics: Setting character-related properties, p.197 Setting paragraph alignment, indentation, and line height, p.199 Setting margins, padding, and borders, p.200 Setting background colors and images, p.203
Note that any style properties you apply to a form are applied only to the form itself; they are not "inherited" by the form controls within it. To change the appearance of the form controls, you need to edit their style properties (p.296) individually.
Using script actions with form controls

Namo WebEditor's collection of ready-to-use script actions (p.271) includes several form-related script actions to perform such tasks as checking whether a specific field contains a numerical value or whether there are any empty fields, before sending form data to a form handler. You can associate these script actions with events such as exiting a text box or clicking a submit button. The available form-related script actions are as follows: Script Action Move Focus to Reset Form Field Select Text in Form Field Description Moves the keyboard focus to a specific form control. Clears the contents of a specific text box. Selects the contents of a specific text box. Can be attached to text boxes, hidden fields text boxes, drop-down menus, list boxes all controls except hidden fields and file browsers
Script Action Validate E-mail Address Validate Field Contains Number Validate Field Not Empty Validate Length Not Exceeded Validate No Field Empty
Description Displays a pop-up message if the contents of a specific text box are not a valid e-mail address. Displays a pop-up message if the contents of a specific text box are not a number. Displays a pop-up message if a specific text box is empty. Displays a pop-up message if the contents of a specific text box exceed a specified length. Displays a pop-up message if any text box in the form is empty.
Can be attached to one-line text boxes
one-line text boxes one-line text boxes one-line text boxes one-line text boxes, check boxes, radio buttons, push buttons, image controls
To attach a script action to a form control
1. 2. 3. 4. 5. 6.
Select the desired form control. (Add). (If the Actions panel is hidden, press Alt+7.) On the Actions panel, click Click the Action box and select the desired action. Click the Event box and select the event (p.271) that should trigger the action. Under Parameters, confirm that the correct form is selected in the Form name box, and specify other parameters as required. Click OK.
To modify or remove a script action
1. 2.
Select the form control to which the script action is attached. On the Actions panel, double-click the script action you want to modify, or select it and click (Remove).
Creating a form in a table

To help lay out a form neatly, it is convenient to insert form controls and labels in the cells of a table. By doing so, you can ensure that controls and labels are nicely aligned with each other. Normally, however, if you insert form controls in table cells, Namo WebEditor will create a separate form inside each cell. This is usually not desirable, since the form controls will not be in the same form with each other. To avoid this problem and ensure that all the form controls in a table exist in the same form, follow the steps below when creating a form in a table:
1. 2. 3. 4. 5. 6.
Create a table with enough rows and columns to accommodate all the form controls you want. (You can add more rows or columns later, if necessary.) On the Insert menu, point to Form, and then click Insert With Form Tags to disable automatic <form> tag creation. (When disabled, no check mark appears next to the menu command.) Insert the desired form controls and text labels in the desired table cells. When you are finished inserting form controls, leave the insertion point inside the table. On the Format menu, click Form. Specify desired values for the form's properties and click OK, or just click OK if you plan to specify the properties later.
If the display of special tag marks (p.34) is enabled, you should now see a dashed outline around the entire table, indicating the presence of a form. -When you create a form in a table using the method described above, Namo WebEditor sometimes inserts an empty paragraph inside the form, below the table. You can safely delete this empty paragraph. To avoid inserting the empty paragraph in the first place, select any cell in the table before step 5.
6 Working With Sites

When you create a Web site, you first create a set of Web documents and related resource files on your computer, and then publish (upload) them to a Web server. Technically speaking, the Web site consists of the copies of your files on the Web servernot the original files on your local file system, since these are not available on the Web. There are two ways of managing these local files. First, you can manage them as you would any other set of files on your hard drive, using a file manager such as Windows Explorer. However, a more powerful way to manage them is to create a local site in Namo WebEditor to contain the local files. This approach has several advantages. In Namo WebEditor, a local site is a managed collection of Web documents, folders, and resource files on the local file system that you intend to publish as a Web site. A local site gathers local files into a cohesive whole and lets you manage them as a whole, with Namo WebEditor's Site Manager. There are five major advantages of creating and using a local site, as opposed to simply keeping all your local files in a folder and managing them with Windows Explorer: If you rename a file or folder that is part of a local site, Namo WebEditor can automatically update any links that refer to it. A local site can have a site tree (p.316), making it possible to use dynamic navigation bars (p.324) in your documents. You can manage shared resources (such as image files) in a site library (p.337). You can use Quick Publish (p.351) to publish the entire local site, or any part of it, in one step. If you work as part of a team on the same site, you can use source control (p.339) to prevent conflicts that can arise when multiple people edit the same document.
Creating a local site is easy. You can create one when you start building a Web site, or you can put an existing collection of files into a local site. If you create a site using the Site Wizard (p.307), Namo WebEditor creates a local site automatically. -When you create a local site, Namo WebEditor adds a special file named site.wej and a special folder named _we_info5 in the local site's top-level folder. These special items store site information and internal resources. By default, these items are not visible in the Site Manager, although you can see them in Windows Explorer. Do not delete these items unless you want to delete the local site.
303
Planning a site
Before you start building a Web site, you should take some time to think about how it will be organized, both with respect to the file system and with respect to the logical relationships between documents.
Planning a site's folder structure

Although it is possible to put every file of a site in a single folder, it usually makes more sense to group related files in subfolders within a top-level folder. There are many approaches to grouping site files. The examples below show two possible strategies: Example A Example B
Two methods of organizing files in folders
In Example A, files are organized according to site areas. For example, all the files for the Products area of the site go into the "products" folder, where they are further divided into subfolders according to specific products. Each folder might also have an "images" subfolder to contain image files. In Example B, files are organized according to type. All HTML files go into the top-level "My Web Site" folder. CSS files, image files, JavaScript files, and other resource files go into subfolders for each resource file type. The organizational strategy you choose depends largely on the kind of Web site you are creating and its size. For relatively small sites with no clearly defined areas, something like Example B can be convenient, since it limits the number of folders you have to manage. For large corporate sites, the folder organization is likely to be more like Example A, but far more complicated, since documents might be further organized by corporate division, international regions, and so forth.
304 Planning a site
Chapter 6: Working With Sites
Keep in mind that the folder structure of a site need not have any relationship to its logical structurethe hierarchy of "parent" and "child" pages. For example, the product description page for Namo WebEditor might logically be considered a "child" of the products index page, but the document does not need to reside in a subfolder of the products folder.
Planning a site's logical structure

The logical structure of a site is the map of relationships among the documents in the site. It is the hierarchy of "parent" and "child" documents. A site's logical structure can be visualized as a tree, like a family tree, although when describing Web sites the tree is commonly shown inverted, with its root at the top and branches and leaves below. A site's home (index) page is at the topmost level. Immediately below it are the home page's immediate "children"; in the case of a company site, these could be the index pages for Products, Services, Support, and so forth. In turn, each of these first-level children might have its own children, and so on.
Logical structure of a hypothetical small business site
Deciding on the logical structure of a site means deciding how to organize its documents into groupings and relationships that make sense to you and to your users. There are many ways to organize a site, and it is not always obvious which of two alternatives is best. Should there be two branches, one for Products and another for Services, or should both be combined in one branch? Should Updates fall under Support, or should there be a separate Updates page under each product? Of course, you can always put links in one document to any other document, regardless of their relative locations in the site tree. However, many sites can be organized into "natural" groupings: for instance, product pages naturally fall into a "Products" category. When deciding what the children of a particular document should be, ask yourself what the most important links in that page will be. In most cases, the children of that document should be the pages those primary links point to.
Planning a site 305
Namo WebEditor 2006 User Manual The site tree and dynamic navigation bars
In the case of an ordinary Web site, the site tree is a theoretical construct. It doesn't exist anywhere but in the mind of the developer, or perhaps in a planning document. But when you use a local site in Namo WebEditor, you can explicitly build a site tree for your site. This site tree serves a concrete purpose: its structure determines the destinations of the links in any dynamic navigation bars (p.324) you put in your documents. Unlike an ordinary hyperlink, which always points to the same document (by its path and file name) regardless of where the document is in the site tree, a link in a dynamic navigation bar points to whatever document is in a specific place in the tree. If you replace that document with another document (that has a different path and/or file name), Namo WebEditor automatically updates the link to point to the new file. For example, you might have a dynamic navigation bar in which the links point to the children of the current document. If you replace one of the child documentslet's say you replace superwidge.html with humunga.htmlNamo WebEditor will automatically change the link pointing to superwidge.html so that it now points to humunga.html. Namo WebEditor similarly updates dynamic navigation bars when you add or remove documents in the site tree. Dynamic navigation bars are powerful tools. If you plan and build your site tree with care, they can relieve much of the burden of updating links when you change the structure of your site.
306 Planning a site
Creating a local site

There are two ways to create a new local site that is not based on an existing site. If you are new to Web authoring or want to get a basic site up and running in the minimum time, use the Site Wizard (p.307). In just a few steps you will have a ready-to-customize site based on the structural template and visual theme of your choice. The wizard constructs a complete set of themed pages for you; all you have to do is fill them in with your own content. In addition, the wizard builds a structural tree (p.316) for the site and places dynamic navigation bars (p.324) on each page. You can, of course, add your own pages or remove ones you don't need at any time. If you need complete control over a new site from beginning to end, use the New Site command to create an empty local site (p.309), and then fill it with new or existing documents.
Creating a site with the Site Wizard

Use Namo WebEditor's Site Wizard to create a ready-to-customize Web site in just seconds, using your choice of structural template and visual theme. The wizard generates a complete local site, including HTML documents, predesigned graphics, navigation bars, and a complete site tree (p.316). Once you finish the wizard, all you need to do is fill in the content placeholders on each page with your own text, replace the placeholder images with your own images, and then publish (p.347) your site to the Web.
When (and when not) to use the Site Wizard
You should consider using the Site Wizard any time you need to get a basic site up and running on the Web with the minimum investment of time and effort. You might be a novice Web author who wants to quickly create a place to share information and images with family and friends, or a small business owner with no Web authoring experience who needs to "hang a shingle" in cyberspace as soon as possible. Since the wizard takes care of design, layout, and site structure for you, you can focus on content and get the job done faster. While the Site Wizard is a great tool for building a Web site quickly and easily, it has various limitations that you should consider before deciding to use it. If any of the following conditions applies, you'll probably be better off building a site from scratch (p.309): You need to build a large and/or complex site. The site templates used by the wizard contain from 7 to 16 pages. Although you can add as many pages as you want later, the simple structure of the wizard's templates may not easily support large numbers of pages. Rather than radically modifying the structure of a wizard-generated site, it probably makes more sense to build your own site structure from the ground up. You need precise control over page layout. Pages created by the Site Wizard use table-based layouts that cannot be modified within the wizard and may be difficult to modify afterwards.
Creating a local site 307
Your site needs to have a unique graphic design. Although the Site Wizard lets you choose from predesigned visual themes suitable for a variety of purposes, no predesigned theme can substitute for a truly unique visual design. If you already have, or plan to create, your own graphic design elements to use on your site, it can be easier to start the site from scratch rather than replacing a theme's built-in graphics.
Using the Site Wizard
To launch the Site Wizard: on the Shortcut Bar, click Site Wizard. Step 1: Template Choose a site template from the list on the left. The site template determines the mix of pages that will initially make up the site, as well as the relationships among them. The template's site tree is shown in the preview area. You can edit the structure of the new site by moving nodes in the site tree and using the buttons below it. Click Next to proceed to the next step. Step 2: Theme Choose a visual theme from the list on the left. Your choice of theme will determine the visual style of your site. Themes include both text styles and graphical elements, such as buttons, banners, and backgrounds. To preview the site with the selected theme applied, click Site Preview. Click OK to return to the Site Wizard. Click Next to proceed to the next step. Step 3: Information Fill in the boxes with the requested information: a title for your new site, your name, your e-mail address, and your copyright notice. The site title and author name will not appear anywhere except in the Site Manager, but the e-mail address and copyright notice will appear on every page. In the Save site in box, enter the path of the folder in which you want to store the new local site. (Click Browse to browse for a folder or to create a new one.) Click Next to proceed to the next step. Step 4: Publishing If you have already defined the remote site (p.348) to which you intend to publish the new local site, select it in the box on the left. Otherwise, you can click New to define a remote site now, or just ignore this step and define a remote site (p.348) later. Click Finish to exit the Site Wizard.
308 Creating a local site
The wizard will take a moment to generate the new local site, and then the site will be opened in the Site Manager.
Creating an empty local site

If the Site Wizard does not suit your requirements, you can create an empty local site and build it up with your own documents, new or existing.
To create an empty local site
1.
2. 3. 4.
Do one of the following: o On the File menu in the main window, point to Site, and then click New Site. o On the File menu in the Site Manager, click New Site. In the Site title and Author boxes, enter a name for the site and your name, respectively. (This information will not appear on the Web site.) Click Create empty site, and then enter the path of the folder in which you want to store the site's files. (You can click ... to browse for a folder or to create a new one.) Click OK.
The Site Manager window will come to the front, with the new local site open and ready to accept new (or existing) documents.
Adding files and folders to a local site

The Site Manager's Site Files pane lists the files and folders belonging to the current local site. It's also where you add files and folders to the site.
The Site Files pane of the Site Manager
Namo WebEditor 2006 User Manual To add a new (blank) document
1.
2. 3. 4.
In the Site Files pane of the Site Manager, select the folder in which you want to add a new document. To add a new document at the site's top (root) level, select the site icon at the top of the file list. On the Insert menu, click New Document. Select a document template and click OK. Type the file name you want to use for the new document.
-You can also add a new document to a local site by creating it in Namo WebEditor's main window and then saving it in the site's folder.
To add an existing document from outside the local site
Drag the document from Windows Explorer to the Site Files pane of the Site Manager and drop it on the folder in which you want to put it. To add the document at the site's top (root) level, drop it on the site icon at the top of the file list.
To add a new (empty) folder
1. 2. 3.
In the Site Files pane of the Site Manager, select the folder in which you want to add a new folder. To add a new folder at the site's top (root) level, select the site icon at the top of the file list. On the Insert menu, click New Folder. Type the name you want to use for the new folder.
To add an existing folder (and all its contents) from outside the local site
Drag the document from Windows Explorer to the Site Files pane of the Site Manager and drop it on the folder in which you want to put it. To add the document at the site's top (root) level, drop it on the site icon at the top of the file list.
-Documents you add to a local site through the Site Files pane are not automatically added to the site tree. For information about adding documents to a site tree, see Adding document nodes, p.317. -When you add a new document to a site to which you have applied a theme (p.242), the new document does not automatically use the theme. You must explicitly apply the theme (p.245) to the new document.
310 Creating a local site
Moving and removing files and folders on a local site

To move a file or folder
1.
2.
In the Site Files pane of the Site Manager, drag the file or folder you want to move and drop it on the folder in which you want to put it. To move the file or folder to the site's top (root) level, drag it to the site icon at the top of the file list. Namo WebEditor will ask whether you want to update any URLs that reference the moved file or folder. Click Yes.
-To move multiple items, select them first, and then drag any of them to the desired location.
To remove files or folders
1. 2.
In the Site Files pane of the Site Manager, select the files and/or folders you want to remove, and then press Delete. Namo WebEditor will ask you to confirm deleting the selected items. Click Yes.
-When you remove a document or folder that is part of the site's site tree, Namo WebEditor converts the document or folder node to a temporary node. You should delete (p.322) this temporary node if you do not plan to put another document or folder in its place.
Saving a local site as a site template

You can save a local site as a site template and then use the template in the future when you create a site using the Site Wizard (p.307).
To save the current local site as a site template
1. 2. 3.
Switch to the Site Manager. On the File menu, click Save as Site Template. Enter a name for the template and click OK.
Once you have saved a site template, your template will appear in the templates list, below the factory templates, in the first step of the Site Wizard.
Importing and exporting sites

You can create a local site from an existing site that was created without Namo WebEditor. How you do this depends on where the site's files are. If you have a copy of the site files in one folder on your local file system, you can simply use the New Site command to create a new local site in that folder. Namo WebEditor will automatically add all the files in the folder and its subfolders to the new local site. If you do not have a copy of the site on your local file system, but the site is on the Web, you can download the Web site to your local file system and then create a new local site in the download folder.
You can also export an existing local site to a zip archive and then import the archived site as a local site on another computer. -When you import a site that was not created in Namo WebEditor, the site tree for the site will initially be empty.
Importing a site from the local file system

To import a site from the local file system
1. 2.
3. 4. 5.
6.
Make sure all the site files (documents and resource files) are in a single folder or in subfolders of a single folder. If necessary, move them into a new folder. Do one of the following: o In Namo WebEditor's main window, on the File menu, point to Site, and then click New Site. o In the Site Manager window, on the File menu, click New Site. In the Site title and Author boxes, enter a name for the site and your name, respectively. (This information will not appear on the Web site.) Click Import existing files in a folder, and then enter the path of the folder containing the existing site files. (You can click ... to browse for a folder.) Under Create site tree using these file types, specify the types of files for which Namo WebEditor will create nodes in the site tree for the new site. o Select Documents to create nodes for HTML documents and other Web files, such as stylesheets and scripts. This is the recommended setting. o Select Image files to create nodes for GIF, JPG, and PNG images. o Select All files to create nodes for all files, regardless of type. Click OK.
312 Importing and exporting sites
Namo WebEditor will now create the new local site and automatically build a site tree based on the subfolder structure of the specified folder and the selected file types.
Importing a site from the Web

To import a site from the Web
1.
2. 3. 4. 5. 6. 7. 8. 9. 10.
Do one of the following: o In Namo WebEditor's main window, on the File menu, point to Site, and then click New Site. o In the Site Manager window, on the File menu, click New Site. In the Site title and Author boxes, enter a name for the site and your name, respectively. (This information will not appear on the Web site.)
(Import from Web). Click Import existing files in a folder, and then click Click Add. In the URL to import from box, enter the URL of the Web site to import. In the Store in folder box, enter the path of the local folder in which to save the imported site. Modify import options as desired (see below for details), and then click OK. Click Start to begin downloading the Web site. When Namo WebEditor has finished downloading the site, click Close. Under Create site tree using these file types, specify the types of files for which Namo WebEditor will create nodes in the site tree for the new site. o Select Documents to create nodes for HTML documents and other Web files, such as stylesheets and scripts. This is the recommended setting. o Select Image files to create nodes for GIF, JPG, and PNG images. o Select All files to create nodes for all files, regardless of type. 11. Click OK.
Namo WebEditor will now create the new local site and automatically build a site tree based on the folder structure of the downloaded site and the selected file types. The Import Settings dialog box contains a number of options to control the process of importing a Web site. These are explained below.
Import Settings General
Download images from this site Clear this check box to prevent downloading image files from the specified Web site.
Importing and exporting sites 313
Download images from other sites Many sites display images that are actually stored on other sites. Select this check box to allow downloading these image files. Don't follow external links Normally, Namo WebEditor ignores links to documents on other Web sites when importing a site. Select this check box to force Namo WebEditor to follow external links and download pages from other sites. Depth This setting controls the depth to which Namo WebEditor will follow links when importing a site. If set to 1, Namo WebEditor will download the document at the specified URL and all the documents to which links in the first document point, but no more. If set to 2, Namo WebEditor will also download the documents to which links in all the "level 1" documents point; and so forth. The maximum setting is 100. The default setting of 10 should be sufficient to download most Web sites in their entirety. Download all files / Skip previously imported files This pair of options controls whether Namo WebEditor will re-download files that have already been downloaded (and that still exist in the download folder).
Import Settings Authentication
Account information This area is for entering a user ID and password needed to access a site that requires login. Please note that Namo WebEditor's site import feature supports only basic HTTP authentication, not the more sophisticated forms of authentication supported by some Web servers.
Import Settings Advanced
Maximum individual file size If this check box is selected, Namo WebEditor will not download any file that exceeds the maximum size you specify. Maximum total file size If this check box is selected, Namo WebEditor will stop downloading files once the total size you specify has been reached. Maximum number of files to import If this check box is selected, Namo WebEditor will stop downloading files once the total number you specify has been reached.
314 Importing and exporting sites
Do not change links Normally, when importing a Web site, Namo WebEditor converts any full URL links (to pages or resources in the same site) into relative links. For example, if you are importing the page at http://www.example.com/index.html, and it contains a link to "http://www.example.com/image.gif", Namo WebEditor will normally change the link to "image.gif" in the downloaded copy of the file. To prevent changing links, select this check box. Include/exclude file types This set of options controls the file types Namo WebEditor will download: all file types, only the file types you specify, or all file types except the ones you specify. To add a file type to be included or excluded, type its extension in the Extension box and click Add.
Exporting and importing a local site to/from a zip archive

At times, you may need to copy or move a local site to another computereither yours or that of another person. Although you can do so using the file copying/moving functions of Windows, it can be easier and more convenient to use the commands built into Namo WebEditor to do the job. When you export a local site, Namo WebEditor automatically packages all its files into a compressed zip archive, so you only need to send or copy one file to the other computer. Then you or the other person can use the Site Manager to automatically unpack the zip archive and save the local site on the second computer.
To export a local site to a zip archive
1. 2. 3.
If the site to be exported is not open, open it and switch to the Site Manager. On the File menu, click Export Site. Navigate to the folder where you want to save the zip archive, specify a file name, and click Save.
To import a local site from a zip archive
1. 2. 3. 4.
5.
Open the Site Manager: on the Window menu, click Site Manager. On the File menu, click Import Site. Enter the path of the zip archive to import from, or click Browse to locate and select a zip archive. In the Save site to box, enter the path of the folder in which to save the local site, or click Browse to locate and select a folder. (Note that the site will be saved into a new subfolder of the specified folder.) Click OK.
Importing and exporting sites 315
Site structure and navigation

When you create a local site in Namo WebEditor, the site tree plays an important role: it forms the basis of all dynamic navigation bars in the site. The site tree is an explicit representation of the logical relationships among the documents of the sitethe hierarchy of parent and child documents. Below is an example tree for a very small site:
A small site tree
Each square represents a node in the tree. At the root (the top of the inverted tree) is the node representing the site itself. Any node can have zero or more children. Typically, the site node has exactly one child: the home (index) page of the site. In the example above, the home page has three children, two of which have children of their own. Except for the site node, each node has exactly one parent. Nodes that have the same parent are called siblings. The purpose of the site tree is to define the relationships between documentsto define "what goes where". This is useful as a visual aid in thinking about the site, but more importantly, it lets you create dynamic navigation bars that respond to changes in the site's organization. When you create a dynamic navigation bar, you don't specify which documents it links to. Instead, you specify a relationship between the current document and the linked documents. For example, you can create a navigation bar that links to the children of the current document. If the current document is the home page in the example given above (the page titled "Dark Matter"), then the navigation bar will link to the pages "About Me", "My Poems", and "My Stories". But if another document is added as a child of the home pagesay, "My Photos"Namo WebEditor will automatically update the navigation bar to include
316 Site structure and navigation
a link to the new child. If a child document is deleted, Namo WebEditor will automatically remove its link from the navigation bar.
Building the site tree

When you create a new local site (without using the Site Wizard), its site tree is initially empty except for one node, representing the site itself. Building the tree means adding nodes and arranging them to reflect the structure you want for the site. There are five kinds of nodes that can be in a site tree: Document nodes represent ordinary documents that are part of the local site. External Link nodes represent URLs that are external to the current site. Shortcut nodes are "virtual" nodes. A shortcut node links to a document node elsewhere in the site tree. Shortcut nodes are useful when you want a single document to appear in more than one place in the tree. Temporary nodes are placeholders. Use a temporary node to occupy a position in the site tree that you intend to fill later with a real node. Folder nodes are special nodes that represent subfolders of the site's root folder. Folder nodes are created automatically by Namo WebEditor when you create a local site in an existing folder that contains subfolders. You cannot create a folder node manually. Folder nodes are never included in dynamic navigation bars.
Adding document nodes

A document node represents a document that belongs to the local site. You can add a document node for an existing document in the site, or you can create a new document and add it to the site tree in one step. Each document in a site can only be represented by at most one document node. If you want a document to be represented by multiple nodes in different locations in the site tree, create a document node at the "natural" position in the tree and then create shortcut nodes (p.319) at the other positions.
To add a node for an existing document
1. 2. 3. 4.
Switch to the Site Manager. In the site tree, select the existing node under which you want to add the document node. (The new node will be a child of the selected node.) Press the Insert key, or, on Insert menu, click Insert Into Site Tree. Click the Type box and select either HTML document (if you are adding a node for an HTML document) or Dynamic document (if you are adding a node for an ASP, PHP, or JSP document).
Site structure and navigation 317
5.
In the file list, select the desired document, and then click OK.
-You can also add a document node by dragging a document from the Site Files pane onto an existing node. -If you add a node for a document that is already represented by a document node in the site tree, the new node will be created as a shortcut node (p.319).
To add a node for a new, empty document
1. 2. 3. 4. 5.
Switch to the Site Manager. In the site tree, select the existing node under which you want to add the document node. (The new node will be a child of the selected node.) On the Insert menu, click one of the following: New HTML File, New ASP File, New JSP File, or New PHP File, depending on the type of document you want to create. Type the desired file name and click OK. Type the desired navigation name for the new document and press Enter.
The new document will be saved in the site's root folder.

To add a node for a new document based on a template
1. 2. 3. 4. 5. 6.
Switch to the Site Manager. In the site tree, select the existing node under which you want to add the document node. (The new node will be a child of the selected node.) On the Insert menu, click New Document. Select the desired document template and click OK. Type the desired file name and click OK. Type the desired navigation name for the new document and press Enter.
The new document will be saved in the site's root folder. -When you add a new document to a site to which you have applied a theme (p.242), the new document does not automatically use the theme. You must explicitly apply the theme (p.245) to the new document.
Adding external nodes

An external node represents a document that is external to the current site. Usually this means a document on another Web site, although an external node could also represent a document on the local file system but which exists outside of the site's root folder.
Chapter 6: Working With Sites To add an external node
1. 2. 3. 4. 5. 6.
Switch to the Site Manager. In the site tree, select the existing node under which you want to add the external node. (The new node will be a child of the selected node.) On the Insert menu, click New External Link. In the URL box, type the URL of the external document. You can enter either a full Internet URL or a path to a local file. In the Navigation name box, type the desired navigation name for the external node. Click OK.
Adding shortcut nodes

A shortcut node represents a local document that is already represented by a document node (p.317) in the site tree. Shortcut nodes are useful when you want the same document to appear in more than one location in the site tree, thus allowing it to be included in navigation bars that link to different levels of the tree. For example, consider the simplified site tree below:
If there is a child-level dynamic navigation bar on the "Home" page, it will contain links to "Products" and "Support". And if there is another child-level navigation bar on the "Support" page, it will link to "Forum" and "FAQ". But suppose we want to include the "FAQ" page in the home page's navigation bar, as well. Normally, this would not be possible, since a dynamic navigation bar can only contain links to nodes on a single level of the site tree. However, if we create a shortcut node to the "FAQ" page at the home page's
child level, as in the example tree below, the "FAQ" page will then be included on the home page's childlevel navigation bar.
To add a shortcut node
1. 2. 3. 4. 5.
Switch to the Site Manager. In the site tree, select the document node for which you want to create a shortcut node. On the Insert menu, click New Shortcut Node. The shortcut node will be created as a child of the selected document node. Type the desired navigation name for the shortcut node and press Enter. (A shortcut node can have a different navigation name from the original node.) Drag the shortcut node to the desired location in the site tree. (See Moving, copying, and removing nodes, p.322.)
-You can only create a shortcut node for a document node. Other types of nodes (external and temporary) can be simply copied from one location in the site tree to another.
Adding temporary nodes

A temporary node is an "empty" node in the site tree. It does not represent any document, but, like other nodes, it can have child nodes. A temporary node can appear in a navigation bar or navigation tree, but the button or text will not be linked to anything. There are two uses of temporary nodes:
You can use a temporary node as a placeholder at a location in the site tree where you plan to insert a "real" node later. This lets you finish building the site tree even if some of the site's documents do not exist yet. When you are ready, you can convert the temporary node to a document or external node using the Convert Temporary Node command. If you use dynamic navigation trees (p.326) in your documents, you can use a temporary node as a "virtual parent" for a set of documents that you want to appear as children in the navigation tree, without having to have a "real" parent document.
To add a temporary node
1. 2. 3. 4.
Switch to the Site Manager. In the site tree, select the existing node under which you want to add the temporary node. (The new node will be a child of the selected node.) On the Insert menu, click New Temporary Node. Type the desired navigation name for the temporary node and press Enter.
To convert a temporary node into a document node
1. 2. 3. 4.
Switch to the Site Manager. In the site tree, select the temporary node. On the Edit menu, click Convert Temporary Node. Do one of the following: o o If you want to convert the temporary node to a node for an existing document, click (Browse), select a document, and then click Open.
5. 6.
If you want to convert the temporary node to a node for a new document, click (New), select a document template, click OK, type the desired file name, and then click OK. In the Navigation name box, edit the node's navigation name as desired. Click OK.
To convert a temporary node into an external node
1. 2. 3. 4. 5. 6. 7.
Switch to the Site Manager. In the site tree, select the temporary node. On the Edit menu, click Convert Temporary Node. Next to Node type, click External link. In the URL box, type the URL of the external document. In the Navigation name box, edit the node's navigation name as desired. Click OK.
Moving, copying, and removing nodes

Moving, copying, and removing nodes are all operations that change the navigational structure of a site. These operations do not have any physical effect on the files that make up the site.
To move a node
Do one of the following: o Drag the node to the desired location in the site tree. If the selected node has any child nodes, the child nodes will move with it. o Select the node, press Ctrl+X, then select the desired parent node and press Ctrl+C. o Right-click the node you want to move and click Cut on the shortcut menu. Then rightclick the desired parent node and click Paste.
To copy a node
Do one of the following: o Drag the node to the desired location in the site tree while holding down the Ctrl key. If the selected node has any child nodes, the child nodes will be copied with it. o Select the node, press Ctrl+C, then select the desired parent node and press Ctrl+C. o Right-click the node you want to copy and click Copy on the shortcut menu. Then rightclick the desired parent node and click Paste.
To remove a node
1. 2.
Select the desired node and press the Delete key. Click Yes.
-Removing a document node does not delete the document it represents.

To hide a node in dynamic navigation bars
You can cause a node to not appear in any dynamic navigation bars that would ordinarily include it, without removing the node from the site tree. 1. Select the node you want to hide. 2. On the Edit menu, click Enable Navigation. To unhide the node, repeat the command.
About folder nodes

A folder node is a special kind of node that is only created when you create a local site in an existing folder that contains subfolders. In such a case, each subfolder will be represented by a folder node at the appropriate level in the site tree, and any documents in the subfolder become child nodes of the folder node. Folder nodes never appear in dynamic navigation bars, and you cannot create folder nodes manually. For example, say you have a small collection of documents that you want to turn into a local site, and the documents are arranged in a folder and two subfolders as below:
When you create a local site in the acme folder, Namo WebEditor will automatically create the following site tree (shown here in vertical, small-node view):
In this example, photos and stories are folder nodes. The HTML documents (a.html, b.html, and so forth) in the corresponding subfolders are represented as child nodes of the folder nodes. If you were to insert a parent-level dynamic navigation bar in a.html, the bar would contain only a link to index.html. It would not contain links to the photos and stories folders, because folder nodes never appear in dynamic navigation bars. You may be wondering why Namo WebEditor creates folder nodes at all, since folder nodes cannot participate in dynamic navigation bars. The answer is simply that it does so as a convenience to authors. By creating a node for each subfolder and child nodes for each document in the subfolder, Namo WebEditor can ensure that every document in the collection is represented by a node in a predictable location in the site tree. You can then drag the document nodes to the desired locations in the tree and remove the folder nodes. This is easier than adding the documents to the site tree manually.
In the example above, if a.html is the "main" document in the photos folder, you could drag it "up" in the tree so that it is on the same level as index.html; and then drag b.html to a.html so that it becomes a child node of a.html. Finally, you could remove the photos node.
In short, you can think of folder nodes as temporary parents for nodes representing documents in subfolders when you create a local site in an existing folder hierarchy. Since folder nodes play no part in the navigational structure of the site, you should move their child nodes to the appropriate locations in the site tree and then remove the folder nodes from the tree.
Saving an image of a site tree

Sometimes, it can be useful to save an image of a site tree, such as for documentation purposes or when giving a presentation about a proposed site structure. You can use a built-in command in the Site Manager to do so. Unlike a standalone screen capture utility, the built-in command always captures the entire tree, even if the tree is too big to fit in the Site Manager window. You can save a site tree image in BMP, GIF, JPEG, or PNG format.
To save an image of the current site tree
1. 2. 3. 4.
Switch to the Site Manager. On the Tools menu, click Save Site Tree as Image File. Navigate to the folder where you want to save the image, and type the desired file name in the File name box. (You do not need to type an extension.) Click the Save as type box, select the desired image file format, and then click Save.
Adding dynamic navigation bars and trees

About dynamic navigation bars
A dynamic navigation bar is a set of dynamic links that point to nodes in the site tree of a local site. Such links are not fixed to particular documents; their URLs change if you change the site tree, for example by moving (p.322) a node out and replacing it with another node. Also, a dynamic navigation bar does not have
a fixed number of links. The number of links changes if you add or remove nodes in the set of nodes to which the bar links. When you insert a dynamic navigation bar in a document, you specify a set of nodes to which the bar will contain links. For example, a dynamic navigation bar might link to the child nodes of the current document, or to the document's parent node and its siblings. To illustrate, suppose a site has the following navigational structure (site tree):
If the Forum page contains a parent-level dynamic navigation bar, the bar will contain links to Products and Supportthe page's parent and the parent's siblings. The bar might look like this:
If the Forum page contains a sibling-level dynamic navigation bar, the bar will contain links to Forum, FAQ, and Contactsbut not to WebEditor and HandStory, because those nodes, while on the same level as Forum, do not share the same parent with that node. The bar might look like this:
Now, suppose we add another document as a child node of Supporttitled, for example, Knowledge Base:
Then, the sibling-level dynamic navigation bar on the Forum page will automatically change to include the new node:
Dynamic navigation bars can be either horizontally or vertically oriented. You also have a choice of using plain text, Smart ClipArt (p.232) buttons, or Flash Buttons (p.238) for the links in dynamic navigation bars.
About dynamic navigation trees
Dynamic navigation trees are similar to dynamic navigation bars; they too are sets of dynamic links that point to nodes in a site tree. Instead of being of a row or column of links, however, a dynamic navigation tree is a hierarchical menu of links that the user can expand and collapse, like the folder tree in Windows Explorer. The image below shows an example:
Another difference between dynamic navigation bars and dynamic navigation trees is the method of specifying the set of nodes the navigation tree will link to. Rather than specifying a set such as the child nodes of the current document, you specify any set of siblings, or the home page node by itself, to be the top-level link(s) in the navigation tree. All of their child nodes are automatically included in the navigation tree. Navigation trees are always vertically oriented. You can specify such formatting properties as the font, font size, and colors of the links. -Since dynamic navigation bars and trees contain dynamic links to nodes in a site tree, rather than fixed links to documents, you can only insert a dynamic navigation bar or tree in a document that is part of a local site, and then only if you have built a site tree (p.317) for the site.
Chapter 6: Working With Sites Where do the labels of the links in dynamic navigation bars and trees come from?
The labels of the links in dynamic navigation bars and trees, such as "Products" and "Support" in the examples above, come from the navigation names of the corresponding nodes in the site tree. Navigation names are not the same as document titles (what appears in the title bar of a browser when the document is viewed). You assign each node a navigation name in the Site Manager, usually when you add (p.317) the node. To change a node's navigation name, do the following: 1. Switch to the Site Manager. 2. Select the node whose name you want to change. 3. Press F2 (or, on the Edit menu, click Rename). 4. Type the new name and press Enter.
When are dynamic navigation bars and trees updated?
When you make changes to the site tree, dynamic navigation bars and trees in any of the site's documents that are currently open in Namo WebEditor are immediately updated. If a document is not open when you change the site tree, it will be automatically updated the next time you open it. You can also manually force all dynamic navigation bars and trees in all site documents to be updated with a Site Manager command: on the Tools menu, click Update Navigation Bars. Namo WebEditor cannot update dynamic navigation bars and trees in documents on a remote site. When documents in the local site are affected by changes in the site tree, you should re-publish (p.347) the affected documents to the remote site so that the copies there have up-to-date navigation bars and/or trees.
Types of dynamic navigation bars

Dynamic navigation bar types are distinguished by their node setsthe sets of nodes in the site tree to which the navigation bar contains links. The various types are listed below, along with descriptions of their node sets and examples. The examples are based on the following hypothetical site tree and assume that the current document (the document containing the example navigation bar) is the one entitled 2.1.2.
Example site tree for navigation bar examples
Type: Node set: Example:
Main level the child nodes of the site's main index page
Parent level the parent of the current document and the parent's siblings
Siblings the siblings of the current document
Children the child nodes of the current document
Type:
Path from home
Node set: Example:
the current document itself and all its direct ancestors
Type: Node set: Example: Note:
Previous/Next the siblings immediately preceding and following the current document The links in this type of navigation bar are always labelled "Previous" and "Next". If the current document does not have a preceding sibling, the "Previous" link is not included; if it does not have a following sibling, "Next" is not included. Previous/Up/Next the siblings immediately preceding and following the current document, and the document's parent The links in this type of navigation bar are always labelled "Previous", "Up", and "Next". If the current document does not have a preceding sibling, the "Previous" link is not included; if it does not have a following sibling, "Next" is not included. Previous/Home/Next the siblings immediately preceding and following the current document, and the site's main index page The links in this type of navigation bar are always labelled "Previous", "Home", and "Next". If the current document does not have a preceding sibling, the "Previous" link is not included; if it does not have a following sibling, "Next" is not included. Parent just the parent of the current document The single link in a parent-type navigation bar is always labelled "Up". Home just the site's main index page
Type: Node set: Example: Note: Type: Node set: Example: Note:
The single link in a home-type navigation bar is always labelled "Home".
Page number links the siblings of the current document Each link in the bar has a numeric label based on the sequence number of its corresponding node in the set of siblings of the current document. User-defined an arbitrary set of sibling nodes
You can specify any set of sibling nodes as the node set of a user-defined navigation bar, even a set of nodes that are "unrelated" to the current document (except through the root node). A user-defined node set must be a single, complete set of sibling nodes.
Inserting and configuring a dynamic navigation bar

To insert a dynamic navigation bar in the current document
1. 2. 3.
4. 5.
Place the insertion point where you want the navigation bar. On the Insert menu, point to Navigation, and then click Navigation Bar. In the Navigation bar type list, select the type (p.327) of navigation bar you want. (Look at the Site tree preview to confirm that the selected node set is correct.) o If you selected User-defined (p.330) as the bar type, click a node in the Site tree preview. The selected node and its siblings will be the node set of the navigation bar. Specify the desired options for the navigation bar as described below (p.330). Click OK.
Dynamic navigation bar options
Link style You can choose between text links and button image links. For button links, you can choose any Smart ClipArt (p.232) image or Flash Button (p.238) in the resource library. See Selecting a navigation bar button image, p.331 below. For text links, you can specify the separators between links, the line height (for vertical navigation bars), and the words for Previous, Next, Up, and Home links. You can also specify the maximum number of numbered page links for a page number links (p.330)-type navigation bar. To specify these options, click the ... button next to the Text option under Link style.
Orientation You can choose horizontal or vertical orientation. Include home page If the selected navigation bar type is User-defined, Main level, Parent level, Siblings, or Children, you can force the navigation bar to include a link to the site's home or main index page by selecting this option. The home page link will be the first link in the bar. Show popup submenus If you select this option, each link in the navigation bar to a node that has children will show a pop-up menu of links to that node's child nodes. You can customize the appearance of the pop-up submenu by clicking the ... button next to the option. This option is not available if the link style is set to Flash Button. Show sublevels For vertical navigation bars only, selecting this option will cause the navigation bar to show a second set of links, under the link to the current document's ancestor (if the link exists), to the ancestor's children. These ancestor's-child links are always text links, even if the bar's link style is Smart ClipArt or Flash Button. You can customize the appearance of the ancestor's-child links by clicking the ... button next to the option. Target Specifies the target window or frame (p.151) in which the navigation bar's links will open, except for the Home link (if any), which will open in the target specified in the Home target option. Home target Specifies the target window or frame (p.151) in which the Home link will open, if the navigation bar has one.
Selecting a navigation bar button image
For a dynamic navigation bar that uses button images for its links, you can specify an image of your choosing or just use the default image. The default image is selected as follows: If the links style of a dynamic navigation bar is set to Smart ClipArt and the current document has a theme (p.242) applied to it, the default button image is the Horizontal Button (p.243) or the Vertical Button (p.243) that belongs to the theme, depending on the bar's orientation. If the link style is set to Smart ClipArt and the document has no theme, the default button image is a generic Smart ClipArt button. If the link style is set to Flash Button, the default button image is a generic Flash Button button.
To specify a different button image, do the following:
1. 2. 3. 4. 5. 6.
In the Navigation Bar Properties dialog box, click the ... button next to either Smart ClipArt or Flash Button, depending on which type of image you want to use. Click Select. In the left pane, select an image category. In the right pane, select the desired image, and then click OK. (optional) If you want to modify the image, click Modify and edit the image. (See Modifying Smart ClipArt images, p.233, or Using Flash Buttons, p.238, for more information.) Click OK.
To modify an existing dynamic navigation bar
Double-click the navigation bar, edit its settings, and click OK.
-To change the font, font size, or other text properties of the buttons in a dynamic navigation bar that uses button images, you must edit the Smart ClipArt or Flash Button image the bar uses.
Inserting and configuring a dynamic navigation tree

To insert a dynamic navigation tree in the current document
1. 2. 3.
4. 5.
Place the insertion point where you want the navigation tree. On the Insert menu, point to Navigation, and then click Navigation Tree. In the Site tree box, select one of the nodes that you want to be at the top level of the navigation tree. The selected node's siblings, if any, will be automatically selected. (The top level of a navigation tree must always consist of a single, complete set of sibling nodes.) (optional) Specify the Text, Bullets, and Target settings as described below (p.333). Click OK.
Namo WebEditor will insert a layer (p.97) containing the dynamic navigation tree at the insertion point. If the display of special tag marks (p.34) is enabled, you will see the layer's outline and a navigation tree icon in the layer's lower right corner. (If special tag marks are not displayed, you can reveal them by clicking (Show/Hide Special Tag Marks) on the Standard Toolbar.) The layer will appear to be empty, because the navigation tree is actually created dynamically using JavaScript when the document is viewed in a browser. To preview the navigation tree, switch to Preview mode. You can move the navigation tree to any position on the page by dragging the layer outline. (See Creating and positioning a layer, p.97.)
If some of the nodes included in the navigation tree have very long navigation names, the corresponding links may be too long to fit the default width of the containing layer. In such cases, unless you make the layer wider, the links will "wrap" to two or more lines. But since the height of each link is fixed, this will produce undesirable results. Switch to Preview mode to see if this is happening; if it does, you should widen the layer by dragging its left-middle resize handle. (See Resizing a layer, p.100.) You can also modify other properties of the layer. Right-click the layer's outline and then click Layer Properties. See Using layers, p.97 for information about layer properties.
Dynamic navigation tree settings
Text Select the desired font, font size, normal font color, and highlight font color for the navigation tree. (The highlight color appears when the user moves the mouse pointer over a link in the navigation tree.) Bullets You can change the images used for the triangles that expand and collapse a parent node in the navigation tree. The triangle uses two images, one for when a node is collapsed, and the other for when it is expanded. You can change these independently. To specify an image, do any of the following: Click Click Click (Browse) to find and select an image file on your local file system. (Clip Art) to select an image from the clip art library. (Site) to select from a list of image files belonging to the current local site.
Target Specifies the target window or frame (p.151) in which the navigation tree's links will open. You can also specify whether the navigation tree should initially be fully expanded when the document is loaded in a browser. If you select Expand levels on load, every node of the tree will be initially visible when the document is loaded. Otherwise, only the top node will be initially visible.
To modify an existing dynamic navigation tree
Double-click the outline of the containing layer, edit the navigation tree's settings, and click OK.
Adding dynamic page banners

About dynamic page banners
A dynamic page banner is a page banner (that is, a banner, usually at the top of a page, that announces the page's title) in which the title is dynamically updated by Namo WebEditor when you change the navigation name of the document containing the banner. For instance, if you change the navigation name of a document containing a dynamic banner from "Our Mission" to "Our Vision", the title on the banner will automatically change accordingly.
To insert a dynamic page banner in the current document
1. 2. 3. 4. 5.
Place the insertion point where you want the banner. On the Insert menu, point to Navigation, and then click Banner. The Label box will display the current navigation name of the document. If you want to change it, edit the contents of the box. Select the banner style as described below (p.334). Click OK.
-Since a dynamic banner gets its text from the document's navigation name, you can only insert a dynamic banner in a document that is a node in a site tree.
Dynamic banner styles
You can choose between a text banner and an image-based banner. For a text banner, you can specify the characters, if any, that surround the title on either end. By default, the beginning and ending characters are the square brackets "[" and "]", respectively. To change them, click the ... button next to the Text option and then edit the contents of the boxes marked 1 and 6 under Separators. For an image-based banner, you can choose any Smart ClipArt (p.232) image or Flash Button (p.238) in the resource library. If you do not select an image, a default image will be used as follows: If the banner style is set to Smart ClipArt and the current document has a theme (p.242) applied to it, the default image is the Banner (p.243) image that belongs to the theme. If the banner style is set to Smart ClipArt and the document has no theme, the default image is a generic Smart ClipArt banner. If the banner style is set to Flash Button, the default image is a generic Flash Button banner.
To specify a different image, do the following: 1. In the Banner Properties dialog box, click the ... button next to either Smart ClipArt or Flash Button, depending on which type of image you want to use. 2. Click Select.
3. 4. 5. 6.
In the left pane, select an image category. In the right pane, select the desired image, and then click OK. (optional) If you want to modify the image, click Modify and edit the image. (See Modifying Smart ClipArt images, p.233, or Using Flash Buttons, p.238, for more information.) Click OK.
To modify an existing dynamic page banner
Double-click the baner, edit its settings, and click OK.
Adding a site map

A site map is a hierarchical list of links to every page of a site. You can quickly insert a site map in a document that belongs to a local siteA managed collection of documents, folders, and resource files on the local file system that you intend to publish as a Web site. by clicking Site Map on the Insert menu. Like a dynamic navigation bar or tree, a site map gets its links from the structure of the site treeThe explicitly defined logical structure (hierarchy) of a site, on which dynamic navigation bars are based. of the local site to which a document belongs. Unlike a dynamic navigation bar, however, the links in a site map are staticthat is, they do not automatically update when you change the site structure. On the other hand, a site map has the advantage that it can contain links to every page on the site, whereas a dynamic navigation bar or tree contains links to only pages on one level of the site tree.
An example site map for a small site
To insert a site map
1. 2. 3.
Place the insertion point where you want the banner. On the Insert menu and click Site Map. Specify options for the site map: o Under Link style, choose the type of list you want for the site map: bulleted or numbered.
o o
If you don't want to include the current document in the site map, deselect Include current
document.
4.
If you want to limit the depth of the site map to a certain number of levels, select Limit depth and enter the number of levels. "1" means include the top level (the home page) only. Click OK.
Since a site map is just a list of ordinary links, you can format it as you would any other content.
Using the site library

When you are working on a local site, the Site Library panel (shown by default at the bottom right corner of the main window) displays lists of various types of assets, such as hyperlinks, images, and shared content blocks (p.Error! Bookmark not defined.), that exist in the local site. You can insert a site asset into the current document by dragging it from the Site Library panel to the document window. This makes it as easy as possible to insert items that you might use many times throughout a site.
The Site Library panel (image list)
The panel has seven buttons above the file list, which are used to select the type of asset to be listed. Button Asset type HTML documents Hyperlinks Shared content blocks (NSC files) Images (bitmapped and Smart ClipArt) Flash files Style sheets (CSS files) Dynamic documents (ASP/PHP/JSP)
Things you can do with the Site Library panel
The following operations can be done to any asset type except hyperlinks. To insert an asset (except style sheet files) into the current document, do one of the following: o drag the asset into the document window and click Insert File or Image o right-click the asset and click Insert
Using the site library 337
To open an asset, double-click it. Documents and shared content blocks will open in Namo WebEditor, while other types of files will open in their own default programs. (The default programs for opening various file types can be set through the Folder Options icon in the Windows Control Panel.) To rename or delete an asset, right-click it and click Rename or Delete. To view an asset in a browser, right-click it and click View with [browser name].
You can drag files from My Computer, Windows Explorer, or the desktop to the Site Library panel to add them to the site.
Working with hyperlinks in the Site Library panel
The Site Library panel displays hyperlinks differently from other asset types, and available operations are somewhat different as well. When the panel lists links, instead of displaying file names, sizes, modification dates, and so forth, as for other asset types, it displays the following information: in the Name column: the URL of the link in the Document(s) column: the path (relative to the site's root) and filename of every document that contains the link in the Type column: whether the link points to a site document ("internal") or a Web URL ("external")
Actually, it may be more accurate to say the panel lists unique URLs, rather than links. If the current site contains, for example, ten links to SJ Namo Interactive's home page in five documents, the URL http://www.namo.com/ will only appear once in the list of links, but the entry in the Document(s) column for that URL will show the pathnames of five documents. As with other assets, you can insert a link into the current document by dragging it to the document window or right-clicking it and clicking Insert. Double-clicking a link in the list opens the Hyperlink Properties dialog box, so you can change the URL. If you do so, every link in the site that points to the old URL will be automatically updated to point to the new URL.
Using the Site Library panel when no local site is open
When no local site is open, the Site Library panel displays a tree of the drives, folders, and files on your computer. You can double-click a file on the tree to open it. If the file is of a type supported by Namo WebEditor, such as HTML, it will open in the Edit window; if not, it will open in the default program for its file type. You can also drag an image file or other resource file from the tree to a document in the Edit window to insert it.
338 Using the site library
Collaborating on a site
When you work on a large-scale website with other members of a team, it can be difficult to keep track of who is editing what. As a result, "collisions" can occur when two people try to edit the same document at the same time: when the document is saved, changes made by one or both authors may be lost. To help avoid such problems, Namo WebEditor can directly interface with a source control system that keeps track of documents being edited and prevents collisions from happening. Namo WebEditor supports two different source control systems: Microsoft Visual SourceSafe, and WebDAV. The same source control-related commands in Namo WebEditor are used for either system. The only difference in the way Namo WebEditor interfaces with SourceSafe vs. WebDAV is how you specify a source control server to connect to.
Requirements for using source control
In order to use Namo WebEditor's source control features, you and your computer must meet the following requirements. for SourceSafe Microsoft Visual SourceSafe client software installed on your computer a username and password for a SourceSafe database
for WebDAV a username and password for a WebDAV server
Also note that Namo WebEditor's source control features are only available when you work with a local site (a collection of files managed with the Site Manager).
Source control basics

When you collaborate with other people on documents that are under source control, the workflow is different from when you work alone with documents that belong exclusively to you. The basic ideas in source control are as follows: There is a set of "master" documents and resource files, somewhere in a database or folder that all the collaborators have (secure) access to. These master files are considered the definitive versions of the documentsthey may even be the actual published documents on the Web server. When an author needs to edit a document, he or she does not edit the master copy. Instead, the author checks the document outthat is, he or she copies the master document to the local
Collaborating on a site 339
computer and, at the same time, locks the master copy so that it cannot be replaced by another author. Then, the author edits the local copy. When the author is finished editing, he or she checks the document back in to the source control database, replacing the master copy with the edited local copy and, at the same time, removing the lock on the master copy. This process ensures that, at any given time, only one author can update a master document, thus avoiding the situation where two or more authors save "overlapping" versions of the same document to the central repository and lose their changes.
Preparing to use source control
The following tasks must be performed before your team can start editing source-controlled documents: 1. If the documents to be edited collaboratively are not already part of a local site, create (p.307) a local site on a client computer and then add (p.309) the desired documents to it. 2. Connect (p.341) to the source control server and add (p.342) every file in the local site to the source control project or folder. 3. Every other author on the team must now obtain a copy of the site files, so that he or she can open the local site on his or her own computer. However, at this point, the other authors will not be able to use Namo WebEditor to retrieve the site files, because the command is not available until the local site is open. To get around this paradox, the other authors must obtain the files another way. Here are some alternatives: o Use a standalone source control client program on each client computer to download the files from the source control server. (For SourceSafe, use Visual SourceSafe Explorer. For WebDAV, several open source and commercial clients may be found on the WebDAV Projects web page.) o If the source control server is also a file server on the local area network, simply copy the site files from the server to each client computer using Windows. o On the client computer that was used to create the local site, use the Site Manager's Export Site (p.315) command to save the site files in a zip archive. Distribute the zip archive to each team member (through email or any other method). On each client computer, use the Site Manager's Import Site (p.315) command to unpack the site to a local folder.
Overview of source-controlled workflow
The following outlines the tasks involved whenever you need to edit a source-controlled document: 1. Connect (p.341) to the source control server, if you are not already connected. 2. Check out (p.343) the documents to be edited. 3. Edit the documents. 4. Check the documents back into (p.343) the source control server.
340 Collaborating on a site
Connecting to a source control server

To connect to a SourceSafe server
1. 2. 3. 4. 5. 6. 7. 8. 9.
If the source-controlled local site is not already open, open it now. (On the File menu, point to Site, and then click Open Site.) Switch to the Site Manager. On the Source Control menu, click Connect to Source Control Server. Click the Source control type box and select VSS. Enter your SourceSafe user name and password in the appropriate boxes. Click Browse. Under Available databases, select the desired SourceSafe database and click OK. (If the desired database is not listed, click Add, locate the desired database, select it, and click Open.) Click OK. In the project tree, select the desired project, and then click OK.
-You can create a new project on the SourceSafe server by clicking New Project in the Select Source Control Project dialog box.
To connect to a WebDAV server
1. 2. 3. 4. 5. 6.
7.
If the source-controlled local site is not already open, open it now. (On the File menu, point to Site, and then click Open Site.) Switch to the Site Manager. On the Source Control menu, click Connect to Source Control Server. Click the Source control type box and select WebDAV. Click Browse. Under Available databases, select the desired WebDAV profile and click OK. If the desired profile is not listed, click Add and do the following: 1. Enter a name for the WebDAV profile. 2. Enter the URL of the WebDAV folder. 3. Enter your user name, passworld, and e-mail address. 4. Click OK. Click OK.
Once you are connected to the source control server, Namo WebEditor will compare the list of files in the local site with the list of files in the SourceSafe project. If any files in the local site are not found in the SourceSafe project, the Add Files to Source Control dialog box will appear. If you want to add files to source control now, select them and click OK. Otherwise, click Cancel.
Namo WebEditor 2006 User Manual To disconnect from the source control server
On the Source Control menu, click Disconnect.
-When you disconnect from the server, Namo WebEditor will ask whether you want to use the same source control server the next time you connect. If you click Yes, the next time you use the Connect to Source Control Server command, Namo WebEditor will connect immediately without prompting you to choose a server.
Adding files to source control

Before your team can start checking files out of the source control database for editing, the entire site the team is working on must be added (uploaded) to the source control project or folder. During the course of the project, you may need to add more files periodically, as well. Adding files to source control makes them available for you or other team members to check them out for editing.
To add site files to source control
1. 2. 3. 4. 5.
Switch to the Site Manager and connect (p.341) to the source control server. In the Site Files pane, select the files to be added to source control. (Note that any desired files in subfolders must be explicitly selected. Selecting the folder itself will not work.) On the Source Control menu, click Add to Source Control. Confirm that the desired files are selected in the file list. To exclude any file in the list from being added, deselect it. Click OK.
When the files have successfully been added to source control, a padlock icon will appear in the Source Control column of the Site Files list for each file that is under source control, as in the example below:
Files under source control are indicated with a padlock icon
-When you add new files to source control, other team members must use a standalone source control client program (such as SourceSafe Explorer) or another method to download the new files to their computers for the first time. Namo WebEditor cannot be used to retrieve files from the source control server that do not already exist in the local site on the client computer.
Checking files out and back in

Checking a file out means downloading the latest version of the file from the source control server and, at the same time, locking the master copy on the server so that other team members cannot replace it. When you have finished editing a checked-out file, you should check it back inthat is, upload the new version to the source control server, replacing the master copy and unlocking it.
To check files out
1. 2.
3. 4. 5.
Switch to the Site Manager and connect (p.341) to the source control server. In the Site Files pane, select the files to be checked out. (Note that any desired files in subfolders must be explicitly selected. Selecting the folder itself will not work. Also, you cannot check out a file that is not under source control.) On the Source Control menu, click Check Out. Confirm that the desired files are selected in the file list. To exclude any file in the list from being checked out, deselect it. Click OK. will appear in the Source
When the files have been successfully checked out, a padlock-and-key icon
Control column of the Site Files list for each checked-out file, as in the example below:
Checked-out files are indicated with a packlock-and-key icon To check files in
1. 2.
3. 4. 5. 6.
Switch to the Site Manager and connect (p.341) to the source control server. In the Site Files pane, select the files to be checked in. (Note that any desired files in subfolders must be explicitly selected. Selecting the folder itself will not work. Also, the files to be checked in must have check-out status, as indicated by a padlock-and-key icon .) On the Source Control menu, click Check In. Confirm that the desired files are selected in the file list. To exclude any file in the list from being checked in, deselect it. If you want to update the master copies on the server but keep the files checked out so that you can continue to work on them, select the Keep these files checked out check box. Click OK. in the Source Control column
When a file has been successfully checked in, the padlock-and-key icon of the Site Files list will revert to a padlock icon .
Retrieving the latest versions of files

At times, you may want to download the latest version of a file from the source control server without, however, checking it out (and thus locking it against replacement by other team members). This is useful when you want to inspect, but not edit, the most up-to-date version on your computer, or simply make sure your local copy is up to date.
To get the latest versions of files from the source control server
1.
Switch to the Site Manager and connect (p.341) to the source control server.
2.
3. 4. 5.
In the Site Files pane, select the files to be updated from the server. (Note that any desired files in subfolders must be explicitly selected. Selecting the folder itself will not work. Also, you cannot update a file that is not under source control.) On the Source Control menu, click Get Latest Version. Confirm that the desired files are selected in the file list. To exclude any file in the list from being updated, deselect it. Click OK.
Removing files from source control

To remove files from source control
1. 2.
3. 4. 5.
Switch to the Site Manager and connect (p.341) to the source control server. In the Site Files pane, select the files to be removed from the server. (Note that any desired files in subfolders must be explicitly selected. Selecting the folder itself will not work. Also, you cannot remove a file that is not under source control.) On the Source Control menu, click Remove from Source Control. Confirm that the desired files are selected in the file list. To exclude any file in the list from being removed, deselect it. Click OK. in the Source Control
When the files have successfully removed source control, the padlock icons column of the Site Files list for those files will disappear.
7 Publishing and Maintaining a Site

Publishing is the process of uploading Web documents and resource files that you have created on your computer to a Web server, so that people on the Internet (or your intranet) can view them. There are two ways to publish with Namo WebEditor: the Quick Publish (p.351) command and the Publish (p.353) window. Before publishing for the first time, you need to define a remote site (p.348) (a folder on a Web server). Namo WebEditor also includes several powerful site maintenance tools in the Tools menu. With these tools, you can search for files by filename, search and replace text throughout a site, change links throughout a site, find problems with hyperlinks, and so on. Namo WebEditor can also generate a site report, so you can view important facts about your site at a glance.
347
Defining remote sites for publishing

A remote site is simply a folder on a Web server, into which you upload the files that make up a Web site. Before you publish a Web site, you need to define at least one remote sitethat is, you need to tell Namo WebEditor where it should upload the local site to. The process of defining a remote site differs depending on the method you use to access it. Namo WebEditor supports two access methods: File Transfer Protocol (FTP) and Windows file copy (Win32). FTP is the standard method of transferring files from a computer to a Web server; it is the most commonly used method of uploading Web sites. Alternatively, if your Web server happens to be the same computer as the one you run Namo WebEditor on, or if it is on the same local area network as your computer, then you can also use the Win32 method, which uses the built-in file copying abilities in Windows (much the same as when you copy files from folder to folder in Windows Explorer).
Required information for defining a site
If you will access the remote site using FTP, Namo WebEditor needs the following information. (If you do not manage the server yourself, you should get this information from your Web hosting provider or network administrator.) Host name: The Web server's name as used when accessing the server by FTP. For example, "ftp.example.com". Port number: The port on which the server accepts FTP connections. This is usually 21. Directory: The path of the folder to which the site files will be uploaded. On many servers, this is either "/" or "/public_html", although it could be anything else. Leading and trailing slashes are optional. User name: The name you use to login to the FTP server. Password: The password you use when logging on to the FTP server.
If you will access the remote site using the Win32 (Windows file copy) method, Namo WebEditor only needs to know the path of the folder. On Windows servers, this is often "C:\Inetpub\wwwroot" or a subfolder of it.
Optional HTTP information
When defining a remote site, you can optionally enter the base URL that will be used to access the site in a Web browser. Namo WebEditor uses this information to associate the remote site with a particular Web (HTTP) URL. After you publish your site, if you open a document on it directly by entering its URL in the Open dialog box, and then save the document, Namo WebEditor will recognize the URL and automatically connect to the remote site to save the document directly to it. You do not need to enter an HTTP URL if you do not intend to open documents on the site directly by using the URL box in the Open dialog box.
348 Defining remote sites for publishing
Chapter 7: Publishing and Maintaining a Site
If you do enter an HTTP URL in a remote site definition, make sure to include "http://" at the beginning of the URL, and do not include a file name at the end of the URL. Example: "http://www.example.com/".
Defining a remote site using FTP
Defining a remote site (FTP access method) To define a remote site using FTP
1. 2. 3. 4. 5.
6.
On the File menu, click Remote Sites. Click Add. In the Site name box, type a name for this remote site. (The name can be anything you like.) Leave the Type box set to FTP. Under FTP target information, enter the FTP server's host name and port number; the path of the folder to contain the site files; and your user name and password for accessing the FTP server. (For more information about these items, see Defining remote sites for publishing, p.348.) o If you want Namo WebEditor to remember your password instead of prompting you for it every time you connect to the FTP server, select the Remember password check box. o If you need to connect to the FTP server using passive mode, select the Passive mode check box. (Your Web hosting provider or network administrator can tell you if this is necessary.) (Optional) Under HTTP information, enter the base URL that will be used to access the site in a Web browser. (See Defining remote sites for publishing, p.348.)
Defining remote sites for publishing 349
7.
Click OK, and then click Close if you are finished defining remote sites, or click to New to define another remote site.
Defining a remote site using Windows file copy
Defining a remote site (Win32 access method) To define a remote site using Win32
1. 2. 3. 4. 5. 6. 7.
On the File menu, click Remote Sites. Click Add. In the Site name box, type a name for this remote site. (The name can be anything you like.) Click the Type box and select Win32. Under Local/network information, enter the path of the folder that will contain the site files. (Click Browse to find and select a folder.) (Optional) Under HTTP information, enter the base URL that will be used to access the site in a Web browser. (See Defining remote sites for publishing, p.348.) Click OK, and then click Close if you are finished defining remote sites, or click to New to define another remote site.
350 Defining remote sites for publishing
Quick publishing
When you are working with a local site, you can publish one or more files in the local site to a prespecified Web site with a single command, called Quick Publish. When you use Quick Publish, Namo WebEditor immediately uploads the selected file(s) to the remote site without further interaction. Quick Publish is great for quickly updating modified files on a remote site after you edit them. Quick Publish is only available when you have a local site open in the Site Manager. Before using Quick Publish with a particular local site for the first time, you need to have defined at least one remote site and then specified the remote site to use for quick-publishing the local site. (See Preparing to use Quick Publish, p.351.) Once you've done that, all it takes is two clicks to upload the entire site or selected files to the remote site.
Preparing to use Quick Publish

Before using Quick Publish for any given local site, you need to do (or have already done) two things: Define the remote site to which the local site will be uploaded. (See Defining remote sites for publishing, p.348.) Specify the remote site to which the local site will be uploaded.
When you define a remote site, it is not associated with any particular local site. That's why you also need to specify the remote site to use for the current local site.
To specify a remote site for the local site
1. 2. 3. 4.
Switch to the Site Manager. On the File menu, click Site Properties. Click the Publish to box and select the desired remote site. (If you have not yet defined the remote site you want to use, click the ... button to define it now.) Click OK.
Using Quick Publish

Once you have prepared (p.351) Namo WebEditor to use Quick Publish for the current local site, you can publish the entire site, or selected files, with just two clicks.
Quick publishing 351
Namo WebEditor 2006 User Manual To quick-publish the current local site
1. 2.
In the Site Files pane of the Site Manager, click the icon or name of the currently open local site. On the File menu, click Quick Publish.
To quick-publish one file in the current local site
In the Site Files pane of the Site Manager, right-click the icon or name of the file you want to publish, and then click Quick Publish.
To quick-publish several files in the current local site
In the Site Files pane of the Site Manager, select each file you want to publish. (To select adjacent files, draw a box around them with the mouse. To select non-adjacent files, click each while holding down the Ctrl key.) On the File menu, click Quick Publish.
To quick-publish the current document in the main window
On the File menu, click Quick Publish.
-You can only Quick Publish a document that belongs to a local site.
352 Quick publishing
The Publish window

Use the Publish window to upload local files or an entire local site to a Web server. You can also download files from a Web server to your local file system. To open the Publish window, do one of the following: In Namo WebEditor's main window: o On the File menu, click Publish. o On the Standard Toolbar, click (Publish). In the Site Manager window: o On the File menu, click Publish. o On the toolbar, click (Publish).
The Publish window
The window is divided into several panes. The left side shows the local files and folders and a preview of the selected local file. The right side shows the files and folders on the Web server and a preview of the selected remote file. The bottom pane shows a running log of FTP commands and responses.
Basic steps to publish a local site
1.
Define the remote site (p.348) to upload the local site to, if you have not defined it yet.
The Publish window 353
2. 3. 4. 5.
Open the site in the Site Manager, if it is not already open. Click the Publish button or press F4. Click Connect Remote Site, and then double-click the desired remote site. On the File menu, click Publish Entire Site.
Basic steps to publish individual files
1. 2. 3. 4. 5.
Define the remote site (p.348) to upload the local files to, if you have not defined it yet. Click the Publish button or press F4. Click Connect Remote Site, and then double-click the desired remote site. In the local pane, select the files you want to publish. Click Upload or Mirror Upload, depending on how you want to upload the files (see Uploading to a remote site, p.357).
Understanding Site Mode vs. Explorer Mode

The Publish window has two modes: Site Mode and Explorer Mode. Which mode is initially active when you open the Publish window depends on whether a local site is open in the Site Manager. If a local site is open, the Publish window will initially be in Site Mode, but you can switch to Explorer Mode. If no local site is open, the Publish window will be in Explorer Mode, and you cannot switch to Site Mode.
Explorer Mode
In Explorer Mode, the local pane of the Publish window displays all the files and folders on one drive on your computer. (You can choose the drive using the drive box in the top right corner of the pane.) In this mode, you can upload any file or folder on your computer to a remote site. Even if you are not working with a local site managed by Namo WebEditor, you can publish your site files in Explorer Mode.
354 The Publish window
The local pane of the Publish window in Explorer Mode Site Mode
In Site Mode, the local pane of the Publish window displays only the files and folders that are part of the current local site. This makes it easier to find the files you want to upload, but the major advantage of Site Mode is that it enables the Mirror Upload command, which is not available in Explorer Mode. With Mirror Upload, you can select files and folders anywhere on the local site and, with one click, upload them to the matching locations on the remote site, without worrying about which folder you are in on the remote site. (See Uploading to a remote site, p.357.)
The local pane of the Publish window in Site Mode
Namo WebEditor 2006 User Manual To switch between Site Mode and Explorer Mode
Do one of the following: On the toolbar, click (Site Mode) or (Explorer Mode).
On the View menu, click Site Mode or Explorer Mode.
(You can only switch between modes if a local site is open in the Site Manager.)
Selecting files for publishing

The following are some tips for selecting files and folders in the Local pane of the Publish window. Once you have connected to a remote site and selected one or more local items, you can publish them by clicking the Upload button or the Mirror Upload button (available in Site Mode (p.354) only).
General selection methods
To select one item, click it. To select several adjacent items, draw a box around them with the mouse. To select several nonadjacent items, click each while holding down the Ctrl key. To select all items, press Ctrl+A.
Special selection commands
The following commands in the Publish window's Edit menu are always available.
Select All: Selects all files and folders Select Open Documents: Selects all documents that are open in Namo WebEditor Select Modified Documents: Selects all open documents that have unsaved changes Select Linked Files: Selects all documents and resource files to which the currently selected document(s) have links Select Transfer-Failed Files: Selects all files that could not be transferred in the last upload or
download operation
Invert Selection: Inverts the current selection (the currently selected items are deselected and the
currently unselected items are selected)

Additional selection commands in Site Mode
The following commands in the Publish window's Edit menu are only available in Site Mode (p.354).
Select Unique Local Files: Selects all files that exist on the local site but not on the remote site. Select Unique Remote Files: Selects all files that exist on the remote site but not on the local site.
Uploading to a remote site

The Publish window has three commands for transferring files from your computer to a remote site (a folder on a Web server): The Publish Entire Site command, available only in Site Mode (p.354), copies an entire local site to a remote site. The Mirror Upload command, available only in Site Mode (p.354), automatically copies selected local files and/or folders to their corresponding locations on a remote site, regardless of the current remote folder. For example, if the path (relative to the site's root folder) of a selected local file is "/global/images/example.gif", the Mirror Upload command will copy the file to the same location"/global/images/example.gif"on the remote site, no matter what the current remote folder is. If several local files in various folders are selected, the Mirror Upload command will copy each of them to its appropriate location on the remote site. The Upload command copies selected local files and/or folders to the current folder on a remote site. (See "Determining the current remote folder" below.)
With the Publish Entire Site command, you can transform the only files showed on the local pane to a remove site. If you want to upload temporary or backup files and/or site system files, then on the View menu, select Show Temporary/Backup Files and/or Show Site System Files.
To upload an entire local site
1. 2. 3.
If the Publish window is not open, press F4 to open it. On the toolbar, click (Connect Remote Site). Double-click the remote site to upload to. (If you have not defined any remote sites, click Add and define one as decribed in Defining remote sites for publishing (p.348).) Namo WebEditor will now connect to the remote site. On the File menu, click Publish Entire Site.
4.
To upload selected files and/or folders to a remote site
1. 2. 3.
If the Publish window is not open, press F4 to open it. (Connect Remote Site). On the toolbar, click Double-click the remote site to upload to. (If you have not defined any remote sites, click Add and define one as decribed in Defining remote sites for publishing (p.348).) Namo WebEditor will now connect to the remote site. In the Local pane, select (p.356) the files and/or folders you want to upload. (Mirror Upload). Namo WebEditor will copy the selected files to their corresponding Click locations on the remote site automatically.
4. 5.
Namo WebEditor 2006 User Manual To upload selected files and/or folders to a specific remote folder
1. 2. 3.
If the Publish window is not open, press F4 to open it. (Connect Remote Site). On the toolbar, click Double-click the remote site to upload to. (If you have not defined any remote sites, click Add and define one as decribed in Defining remote sites for publishing (p.348).) Namo WebEditor will now connect to the remote site. In the Local pane, select (p.356) the files and/or folders you want to upload. In the Remote pane, select the folder to which you want to upload the local items. (Note that the remote site's root folder is initially selected.) Click (Upload).
4. 5. 6.
Determining the current remote folder
Namo WebEditor uses the following rules to determine which remote folder is currentthat is, which remote folder will be the destination of an Upload command at any given time. (The current remote folder is not relevant when you use the Mirror Upload command.) When you connect to a remote site, the current folder is initially the site's root (top-level) folder. If a folder is selected (highlighted), it is the current folder. If a file is selected, the folder that contains it is the current folder. If items in multiple folders are selected, the last selected item determines the current folder. If no folder or file is selected, the current folder is the site's root folder.
Downloading from a remote site

In addition to using the Publish window to upload local files to a remote site, you can also download remote files to your computer. This capability is especially useful if you have accidentally deleted local site files on your computer. The Publish window has two commands for transferring files from a remote site to your computer: The Mirror Download command, available only in Site Mode (p.354), automatically copies selected remote files and/or folders to their corresponding locations on the current local site, regardless of the current local folder. For example, if the path (relative to the site's root folder) of a selected remote file is "/global/images/example.gif", the Mirror Download command will copy the file to the same location"/global/images/example.gif"on the local site, no matter what the current local folder is. If several remote files in various folders are selected, the Mirror Download command will copy each of them to its appropriate location on the local site. The Download command copies selected remote files and/or folders to the current folder on the local site or file system. (See "Determining the current local folder" below.)
Chapter 7: Publishing and Maintaining a Site To download selected files and/or folders to a local site
1. 2. 3. 4. 5.
If the Publish window is not open, press F4 to open it. (Connect Remote Site). On the toolbar, click Double-click the remote site to download from. Namo WebEditor will now connect to the remote site. In the Remote pane, select (p.356) the files and/or folders you want to download. (Mirror Download). Namo WebEditor will copy the selected files to their corresponding Click locations on the local site automatically.
To download selected files and/or folders to a specific local folder
1. 2. 3. 4. 5.
If the Publish window is not open, press F4 to open it. (Connect Remote Site). On the toolbar, click Double-click the remote site to download from. Namo WebEditor will now connect to the remote site. In the Remote pane, select (p.356) the files and/or folders you want to download. In the Local pane, select the folder to which you want to download the remote items. (In Explorer Mode, you can change to a different drive by selecting it from the box in the upper-right corner of the Local pane.) (Download). Click
6.
Determining the current local folder
Namo WebEditor uses the following rules to determine which local folder is currentthat is, which local folder will be the destination of a Download command at any given time. (The current local folder is not relevant when you use the Mirror Download command.) When you open the Publish window, the current folder is initially the local site or file system's root (top-level) folder. If a folder is selected (highlighted), it is the current folder. If a file is selected, the folder that contains it is the current folder. If items in multiple folders are selected, the last selected item determines the current folder. If no folder or file is selected, the current folder is the local site or file system's root folder.
Deleting files on a remote site

To delete files and/or folders on a remote site
1. 2.
If the Publish window is not open, press F4 to open it. On the toolbar, click (Connect Remote Site).
3. 4. 5.
Double-click the remote site containing the items you want to delete. Namo WebEditor will now connect to the remote site. In the Remote pane, select (p.356) the items you want to delete. On the toolbar, click (Delete).
-Be careful when deleting files on a remote site. Deleted remote files are generally not recoverable.
Changing access permissions of remote files and folders

-Namo WebEditor can only change access permissions on servers that run Unix or a Unix-like operating system, not Windows. On Web servers that run Unix or Linux, the operating system controls access to files and folders through a system of access permissions (also called file permissions). Administrators can permit or deny read, write, or execute access to each file or folder, and these permissions can be set independently for the owner of the file, the group of users to which the owner belongs, and others (everyone else). Files and folders that are part of a Web site must have these permissions set in such a way as to allow the Web server program to access them. If your Web site is hosted by a third-party provider, the administrator will most likely have set the permissions correctly when you opened your account, and no further action should be necessary. However, if you are setting up your own Web server, you may find it convenient to modify access permissions at the same time you upload your site files to the server. You can use the Change Permissions command in the Publish window to do so. A discussion of appropriate access permissions is beyond the scope of this user's guide. If you need to change access permissions but are not sure what the appropriate permissions are, please contact your Web server administrator or consult your Web server documentation.
To change the access permissions of a remote file or folder
1. 2. 3. 4. 5.
If the Publish window is not open, press F4 to open it. On the toolbar, click (Connect Remote Site). Double-click the desired remote site. Namo WebEditor will now connect to the remote site. In the Remote pane, select (p.356) the item or items for which you want to change access permissions. On the File menu, click Change Permissions.
6.
7.
Do any of the following to set the desired permissions: o Select and/or clear check boxes under Owner, Group, and/or Others. o Enter an octal code in the Octal code box. o Click a button under Quick Setup to quickly set one of three common permission modes. Click OK.
-Changing the access permissions of a folder does not affect the permissions of any files or subfolders in it. -If Namo WebEditor fails to set the specified access permissions, it may be because the Web server administrator has disabled permission changes by users.
Opening and saving files directly on a Web server

You can open a document on a Web server, edit it, and then re-save it directly to the server without manually downloading and uploading it. This only works if you have read/write permissions for the file on the server. The commands for opening and saving files directly on a Web server use the same list of remote sites (p.348) as the Publish window. Before you can use these commands, you must define at least one remote site.
To open a file on a Web server
1. 2. 3.
On the File menu, click Open on Web Server. Click the Remote site box and select a remote site. If you have not yet defined any remote sites, click the ... button to open the Remote Sites dialog box. Navigate to the desired file, select it, and then click Open.
To save a file directly to a Web server
1. 2. 3.
On the File menu, click Save on Web Server. Click the Remote site box and select a remote site. If you have not yet defined any remote sites, click the ... button to open the Remote Sites dialog box. Navigate to the desired folder and then click Save. (If the current file was opened from the same site, the original directory will already be displayed.)
-When you open a file directly from a Web server, Namo WebEditor copies the file to a temporary local file. If you edit the file and use the Save command (rather than Save on Web Server) to save your changes, Namo WebEditor will only save the temporary file and not upload the edited file to the server. To save your changes to the Web server, make sure to use the Save on Web Server command.
362 Opening and saving files directly on a Web server
Site maintenance
Namo WebEditor includes a host of site management tools, most of which can be found in the Tools menu in either the Site Manager or the main window.
Finding files
You can use the Find Files command to search a local site or folder for files that match a specified name or name pattern. If you search a local site, the search will automatically include all of the site's subfolders as well as the site folder. If you search a folder, you can choose whether to include subfolders. The Find Files command supports wildcard characters similar to those used in DOS commands: A question mark ('?') matches any single character. (Example: photo_?.html matches "photo_1.html" and "photo_2.html".) An asterisk ('*') matches any string of characters, including zero-length strings. (Example: photo*.htm* matches "photo.html" and "photo_3.htm".)
To search for files in the current local site
1. 2. 3. 4.
On the Tools menu, click Find Files. In the File name box, type the file name, partial file name, or pattern to search for; or click the triangle and choose from a list of recently searched items. Select site in Search in. (This option is only available if a local site is open.) Click Find.
The search results will be displayed in the result box at the bottom of the Find Files window. You can open a found document by double-clicking its file name in the list.
To search for files in a specific folder
1. 2. 3.
4. 5.
On the Tools menu, click Find Files. In the File name box, type the file name, partial file name, or pattern to search for; or click the triangle and choose from a list of recently searched items. Click Foler in Search in, and then enter the path of the desired folder in the box. You can click Browse to locate and select a folder, or click the triangle to choose from a list of recently searched folders. If you want to include subfolders of the specified folder in the search, click Include subfolders. Click Find.
Site maintenance 363
The search results will be displayed in the result box at the bottom of the Find Files window. You can open a found document by double-clicking its file name in the list.
Finding and replacing text throughout a site

Use the Global Find & Replace command to search for, and optionally replace, specified text in all the files in a local site or folder. If you search a local site, the search will automatically include all of the site's subfolders as well as the site folder. If you search a folder, you can choose whether to include subfolders. The Global Find & Replace command does not support the use of wildcard characters. Please use an exact search string. -Be careful when performing a global replace. This operation cannot be undone.
To search for text in the current local site
1.
2. 3. 4. 5.
Do one of the following: o On the Edit menu in the main window, click Global Find & Replace. o On the Tools menu in the Site Manager window, click Global Find & Replace. In the Find box, type the text to search for, or click the triangle and choose from a list of recently searched items. Click Find in site. (This option is only available if a local site is open.) Select the options to use for the search. (See Selecting search options, p.365 below.) Click Find.
The files containing the search text will be listed in the result box at the bottom of the Global Find & Replace window. You can open a document in the list by double-clicking its file name.
To search for and replace text in the current local site
1.
2. 3. 4. 5. 6.
Do one of the following: o On the Edit menu in the main window, click Global Find & Replace. o On the Tools menu in the Site Manager window, click Global Find & Replace. In the Find box, type the text to search for, or click the triangle and choose from a list of recently searched items. Click Replace with and type the replacement text, or click the triangle and choose from a list of recently used replacement items. Click Find in site. (This option is only available if a local site is open.) Select the options to use for the search. (See Selecting search options, p.365 below.) Click Replace.
364 Site maintenance
Namo WebEditor will ask you to confirm starting the operation. When the operation is finished, the affected files will be listed in the result box at the bottom of the Global Find & Replace window. You can open a document in the list by double-clicking its file name.
To search for text in a specific folder
1.
2. 3. 4. 5. 6.
Do one of the following: o On the Edit menu in the main window, click Global Find & Replace. o On the Tools menu in the Site Manager window, click Global Find & Replace. In the Find box, type the text to search for, or click the triangle and choose from a list of recently searched items. Click Find in folder, and then enter the path of the desired folder in the box. You can click Browse to locate and select a folder, or click the triangle to choose from a list of recently searched folders. If you want to include subfolders of the specified folder in the search, click Include subfolders. Select the options to use for the search. (See Selecting search options, p.365" below.) Click Find.
The files containing the search text will be listed in the result box at the bottom of the Global Find & Replace window. You can open a document in the list by double-clicking its file name.
To search for and replace text in a specific folder
1.
2. 3. 4. 5. 6. 7.
Do one of the following: o On the Edit menu in the main window, click Global Find & Replace. o On the Tools menu in the Site Manager window, click Global Find & Replace. In the Find box, type the text to search for, or click the triangle and choose from a list of recently searched items. Click Replace with and type the replacement text, or click the triangle and choose from a list of recently used replacement items. Click Find in folder, and then enter the path of the desired folder in the box. You can click Browse to locate and select a folder, or click the triangle to choose from a list of recently searched folders. If you want to include subfolders of the specified folder in the search, click Include subfolders. Select the options to use for the search. (See Selecting search options, p.365 below.) Click Replace.
Namo WebEditor will ask you to confirm starting the operation. When the operation is finished, the affected files will be listed in the result box at the bottom of the Global Find & Replace window. You can open a document in the list by double-clicking its file name.
Selecting search options
Find in HTML documents only: select this if you want to exclude non-HTML files (such as CSS
stylesheets) from the search.
Find in hyperlinks only: select this if you want to limit the search just to the URLs of hyperlinks.
This option is extremely useful for changing many links in one operation, without affecting other content. For example, you can search for links containing "www.example.com" and replace the site name with "www.namo.com", without replacing any instance of "www.example.com" that might exist in the text content of your documents.
Match case: select this if you want to exclude occurrences of the search text that do not match the
case of the specified text. For example, if you select this option and search for "Namo WebEditor", any occurrences of "namo webeditor" and "NAMO WEBEDITOR" will not be included in the results.
Match whole words only: select this if you want to exclude any occurrence of the search text that is
part of another word. For example, if you select this option and search for "photo", any occurrence of "photograph" will not be included in the results.
Match full-/half-width: select this if you are searching for double-byte Asian text and you want to exclude occurrences of the search text that are not the same width as the specified text. This option has no effect when searching ordinary (Western) text. Find in HTML sources: select this if you want Namo WebEditor to search the HTML source code of documents, rather than the text that is visible in Edit mode or a browser. For example, use this option if you want to search for the file name of an image that may be used in one or more documents.
Finding broken links

Use the Find Broken Links command to search a local site or folder for local hyperlinks that point to nonexistent documents or resources. The command will find both broken links and broken src references (such as in image tags). If any broken links are found, you can use the Global Find & Replace (p.364) command to replace them with valid links. -The Find Broken Links command does not check the validity of links that use full Internet URLs, such as "http://www.example.com/index.html". It only checks links that contain a path and a file name, such as "index.html" or "/images/example.gif". As a result, the command will not find any external links (links that contain a server name) that may be broken. To find broken external links, use the Check External Links (p.368) command.
To find broken links in the current local site
1.
2.
Do one of the following: o On the Tools menu in the main window, click Find Broken Links. o On the Tools menu in the Site Manager window, click Find Broken Links. Click Site, and then click Find.
Any documents in the current local site that contain broken local links will be listed in the result box at the bottom of the Find Broken Links window. You can open a document in the list by double-clicking its file name.
To find broken links in a specific folder
1.
2. 3. 4.
Do one of the following: o On the Tools menu in the main window, click Find Broken Links. o On the Tools menu in the Site Manager window, click Find Broken Links. Click Folder, and then enter the path of the desired folder in the box. You can click Browse to locate and select a folder, or click the triangle to choose from a list of recently searched folders. If you want to include subfolders of the specified folder in the search, click Include subfolders. Click Find.
Any documents in the specified folder that contain broken local links will be listed in the result box at the bottom of the Find Broken Links window. You can open document in the list by double-clicking its file name.
Finding orphan files

Use the Find Orphan Files command to search a local site or folder for "orphan" documents or resource files. An orphan document is one to which no other document in the same site has links. Similarly, an orphan resource file (such as an image) is one that is not used by any document in the site. The presence of orphan files can indicate a problem; for example, you may have renamed a document but neglected to update links pointing to it in other documents. Therefore, it's a good idea to check for orphan files before publishing a site. -If you have created a site using the Site Wizard, the Find Orphan Files command may find several orphan image and other resource files even if you have not changed or removed any links in the site. This is normal and is not a cause for concern.
To find orphan files in the current local site
1.
2.
Do one of the following: o On the Tools menu in the main window, click Find Orphan Files. o On the Tools menu in the Site Manager window, click Find Orphan Files. Click site, and then click Find.
Any orphan files in the current local site will be listed in the result box at the bottom of the Find Orphan
Files window. You can open a document in the list by double-clicking its file name. To find orphan files in a specific folder
1.
2. 3. 4.
Do one of the following: o On the Tools menu in the main window, click Find Orphan Files. o On the Tools menu in the Site Manager window, click Find Orphan Files. Click Folder, and then enter the path of the desired folder in the box. You can click Browse to locate and select a folder, or click the triangle to choose from a list of recently searched folders. If you want to include subfolders of the specified folder in the search, click Include subfolders. Click Find.
Any orphan files in the specified folder will be listed in the result box at the bottom of the Find Orphan
Files window. You can open a document in the list by double-clicking its file name.
Checking external links

Use the Check External Links command to find and check the validity of any external links in a local site or folder. When you use this command, Namo WebEditor will find and attempt to follow every link in the current site or the specified folder that points to an external document or resource file. Each external link
found will be listed, and either "Connected" or "Not Connected" will appear next to the URL in the results list, indicating whether Namo WebEditor succeeded in following the link. Generally, a failure indicates that the specified document or resource does not exist at the location specified in the URL. Note, however, that if your computer is not connected to the Internet when you use the Check External Links command, the results list will show "Not Connected" for every external link. Note that external links include not only links to files on another site, but any link that contains a server name, even if it points to a file on the current site. For example, if the main URL of the current site is "http://www.example.com/", the URL "http://www.example.com/images/example.gif" is considered an external link, even though the linked file is on the current site. -By default, the Check External Links command finds not only Web links (those that start with "http" or "https"), but also non-Web links, such as those that point to e-mail addresses and FTP resources. However, Namo WebEditor cannot check the validity non-Web links. As a result, any non-Web link found by the Check External Links command will appear with the result "Not Connected", even if the link is valid.
To check external links in the current local site
1.
2. 3.
4.
Do one of the following: o On the Tools menu in the main window, click Check External Links. o On the Tools menu in the Site Manager window, click Check External Links. Click Find in site. (optional) Click the Protocol box and select the type of link you want to find and check: o To find all external links (including non-Web links such as ftp and mailto), select ALL. Note, however, that only http/https links will be checked for validity. o To find and check only links to Web resources, select HTTP/HTTPS. Click Check Links.
Each external link of the specified type found in the current local site will be listed in the result box at the bottom of the Check External Links window, along with the path of the document that contains it, and the result of the connection attempt. Note that non-Web links will always show "Not Connected". You can open a document in the list by double-clicking its file name.
To check external links in a specific folder
1.
2. 3. 4.
Do one of the following: o On the Tools menu in the main window, click Check External Links. o On the Tools menu in the Site Manager window, click Check External Links. Click Find in folder, and then enter the path of the desired folder in the box. You can click Browse to locate and select a folder, or click the triangle to choose from a list of recently searched folders. If you want to include subfolders of the specified folder in the search, click Include subfolders. (optional) Click the Protocol box and select the type of link you want to find and check:
5.
To find all external links (including non-Web links such as ftp and mailto), select ALL. Note, however, that only http/https links will be checked for validity. o To find and check only links to Web resources, select HTTP/HTTPS. Click Check Links. o
Each external link of the specified type found in the specified folder will be listed in the result box at the bottom of the Check External Links window, along with the path of the document that contains it, and the result of the connection attempt. Note that non-Web links will always show "Not Connected". You can open a document in the list by double-clicking its file name.
Changing character sets throughout a site

Using the Change Character Sets command, you can search a local site or folder for documents that use a particular character set (p.215), and then optionally change them to use a different character set. -Be careful when using this command to replace character sets. This operation cannot be undone.
To find documents that use a particular character set
1.
2. 3.
4.
Do one of the following: o On the Tools menu in the main window, click Change Character Sets. o On the Tools menu in the Site Manager window, click Change Character Sets. Click the Find encoding box and select the character set you want to search for. Do one of the following: o To search the current local site, click In site. o To search a specific folder, click In folder, and then enter the path of the desired folder in the box. If you want to include subfolders of the specified folder in the search, click Include subfolders. Click Find.
Any documents using the specified character set will be listed in the result box at the bottom of the Change Character Sets window. You can open a document in the list by double-clicking its file name.
To replace one character set with another throughout a site or folder
1.
2. 3.
Do one of the following: o On the Tools menu in the main window, click Change Character Sets. o On the Tools menu in the Site Manager window, click Change Character Sets. Click the Find encoding box and select the character set you want to search for. Click the Replace with check box, and then click the adjacent box and select the new character set to apply to any found documents.
4.
5. 6.
Do one of the following: o To search the current local site, click In site. o To search a specific folder, click In folder, and then enter the path of the desired folder in the box. If you want to include subfolders of the specified folder in the search, click Include subfolders. Click Find. Any matching documents will be listed in the result box. Click Replace.
Changing hyperlinks and file names to lowercase

Many Web serversparticularly those running on Unix or Linuxare case-sensitive with respect to file and folder names. That is, they distinguish between uppercase and lowercase letters in file and folder names. This means, for example, that "example.html" and "Example.html" are not considered to be the same document by such Web servers. This is not necessarily a problem. If you always take care to specify URLs with exactly the same capitalization as the paths and names of the files they point to, case-sensitivity doesn't matter. But if you inadvertently create a link whose URL is capitalized differently from its destination, the link may not work once you publish the document to the Web, even if it seems to work in Namo WebEditor. (Windows is not case-sensitive with respect to file and folder names.) To avoid such potential problems, it can be a good idea to change all file names, folder names, and URLs within a site to lowercase. Namo WebEditor has a special command to do just that. Using it ensures that hyperlinks and their destinations will always match case. Of course, you don't need to do this if you never use uppercase in names and URLs.
To change all file names, folder names, and URLs in the current local site to lowercase
On the Tools menu in the Site Manager, click Convert File Names to Lowercase.
-This command is only available when you are working on a local site, and it cannot be undone.
Viewing a site report

In seconds, the Site Manager can generate a comprehensive site report that includes the following information: Site properties, such as folder path and last modification date The site's navigational structure List of HTML documents, including such details as size, modification date, title, and character set
List of broken links List of orphan files
To view a report for the current local site
On the Tools menu of the Site Manager, click Generate Site Report.
The Site Manager generates the site report as an ordinary HTML document, which is automatically opened in the main window. If you want, you can save the report as you would any document.
8 Appendices
This section contains information about miscellaneous features of and utilities included with Namo WebEditor, and a list of keyboard shortcuts.
In this section Included utilities........................................................................................... p.374 Keyboard shortcuts ...................................................................................... p.388
373
Utilities included with Namo WebEditor

When you install Namo WebEditor, various Web utilitiesNamo Capture, Namo GIF Animator, Namo Image Slicerare installed as well. With Namo Capture, you can capture the screen, a window, or some other selection on the screen and save it to an image file. With Namo GIF Animator, you can create GIF animations. With Namo Image Slicer, you can slice an image into several pieces and export the pieces to an HTML table. "Send" the captured image to Namo WebEditor
Namo Capture
Use Namo Capture to take still pictures of your screen or various parts of it, including windows, menus, arbitrary rectangular areas, and the mouse pointer.
To start Namo Capture
Click the Start button, point to Programs, point to Namo Web Utilities, and then click Namo
Capture.
Basic operation
Namo Capture is very easy to use. The basic method of operation is as follows: 1. 2. 3. 4. Specify the type of capture. Arrange your screen so that you can see what you want to capture. Press the Activate Capture hotkey. If the chosen capture type requires it, select the area to capture.
At the end of this process, you will see a new window inside Namo Capture's main window, displaying what you captured. You can then do any of the following: Zoom in to see the captured image in greater detail Copy all or part of the captured image to the clipboard Save the captured image to a file
Setting up the Activate Capture hotkey and other options
In the Capture Options dialog box, you can specify whether to use a right mouse click or a keypress to take a capture; how to cancel a capture, and whether to include the mouse pointer when capturing a screen area. 1. On the Capture menu, click Options.
374 Utilities included with Namo WebEditor
Chapter 8: Appendices
2.
3.
4.
5.
Under Activate Capture Hotkey, choose the method of triggering a capture. You can choose to use a right mouse click or a keystroke, which can be any letter key or function key (such as F2), with or without the Ctrl and/or Shift modifier key. Under Cancel Capture Hotkey, choose the method of cancelling a capture. You can choose to use the Esc key or another keystroke, which can be any letter key or function key (such as F2), with or without the Ctrl and/or Shift modifier key. (Use the Cancel Capture hotkey when you have started the capture process by specifying a capture type, but then you decide you don't want to go through with the capture after all. By cancelling the capture, you are telling Namo Capture not to intercept the next right mouse click or capture keystroke.) Select or deselect the Include mouse pointer check box to tell Namo Capture whether or not to include the mouse pointer when capturing a screen area. (Needless to say, this option has no effect when you are capturing the mouse pointer itself.) You can toggle this setting outside of the Capture Options dialog box by clicking Include Mouse Pointer on the Capture menu or on the toolbar. Click OK.
Specifying what to capture
The first step in taking a screen capture is specifying the type of capture you want to take. You can do so by selecting an item on the Capture menu or clicking a button on the toolbar. The capture types are described below. Button Capture Type Desktop Active Frame Window Menu Rectangle Ellipse Mouse Pointer Description Captures the entire screen. Captures the active main window. Captures a selected window or sub-window. Captures the pulled-down menu. Captures any rectangular region of the screen. Captures any elliptical (round) region of the screen. Captures the mouse pointer.
-Once you specify a capture type, Namo Capture will automatically hide its own window. This is to prevent its appearing in a full-screen capture.
Capturing the entire screen
1. 2. 3.
On the Capture menu, click Desktop. Arrange the windows on the screen as desired. Press the Activate Capture hotkey.
Capturing an entire window
1. 2. 3.
On the Capture menu, click Active Frame. Bring the window you want to capture to the front. Press the Activate Capture hotkey.
Utilities included with Namo WebEditor 375
Namo WebEditor 2006 User Manual Capturing a sub-window
The main window of a Windows program may contain several distinct regions, like panes or toolbars, that are technically windows in their own right. You can capture one of these "sub-windows" using Namo Capture. 1. 2. 3. 4. On the Capture menu, click Window. Bring the program containing the window or sub-window you want to capture to the front. Press the Activate Capture hotkey. The mouse pointer will turn into a reticle or gunsight shape to indicate window selection mode. Move the mouse pointer over the window or sub-window you want to capture. As you move the mouse, different windows or sub-windows will be highlighted with a solid black rectangle. When the window or sub-window you want to capture is highlighted, press the left mouse button.
-After pressing the Activate Capture hotkey, you can still switch to a different program by pressing Alt+Tab. Do not try to switch programs by clicking a button on the task bar, since that will cause the task bar itself to be captured.
Capturing a menu
1. 2. 3. 4.
On the Capture menu, click Menu. Bring the program containing the menu you want to capture to the front. Pull down the desired menu. Press the Activate Capture hotkey.
-If you capture a submenu, all of its ancestors are captured as well. If a menu item is highlighted (by having the mouse pointer over it) when you press the Activate Capture hotkey, that item will be highlighted in the captured image as well.
Capturing a rectangular or elliptical screen area
1. 2. 3. 4.
On the Capture menu, click Rectangle or Ellipse, depending on the shape you want to capture. Arrange the windows on the screen as desired. Press the Activate Capture hotkey. The mouse pointer will turn into a crosshair with a rectangle or an oval. Left-click and drag the mouse pointer over the desired area. A dashed rectangle or ellipse will appear, indicating the area that will be captured. Release the mouse button when the desired area is covered.
-When you capture an elliptical area, the area outside of the ellipse extending to the borders of the image will be white. There is no option to change this background color.
Capturing the mouse pointer
1. 2. 3.
On the Capture menu, click Mouse Pointer. Do whatever you have to do to change the mouse pointer into the shape you want to capture. Press the Activate Capture hotkey.
Chapter 8: Appendices Copying a captured image (or part of it) to the clipboard
After you capture something, the whole image is automatically selected. To copy the whole image to the clipboard, click Copy on the Edit menu or on the toolbar, or press Ctrl+C. To copy just part of the image, select the desired area before copying. To select an area of the image, click on the toolbar and then draw a box around the desired part of the image. You can restore the selection to the whole image by pressing Ctrl+A. It is often easier to select part of an image if you zoom in first. To do so, click on the toolbar and then click the image repeatedly until the desired magnification is reached. You can also zoom in by pressing the keypad + key on your keyboard. To zoom back out, press keypad -.
Saving a captured image to a file
To save the current captured image to a file, click Save on the File menu or on the toolbar. You can save in either GIF or BMP format; to choose the format, click the Save as type box in the Save As dialog box. -GIF format usually produces much smaller files than BMP, but it is limited to 256 colors. When saving a capture that contains many colors (such as a photograph or a gradient), choose BMP format for best results.
"Sending" a captured image to Namo WebEditor
You can conveniently insert a captured image into a Web document by "sending" it to Namo WebEditor. This will insert it into the current document or, if no document is open, into a new document. To send an image to WebEditor, click Send to WebEditor on the File menu. If you send an image to Namo WebEditor before saving it, Namo Capture will automatically save the image to a temporary file. Then, when you save the Web document in Namo WebEditor, you will be prompted to save the image normally.
Namo GIF Animator

The animation GIF file, when inserted into a web document, shows an moving image. The advantage of the animation GIF file is that it does not require any separate plug-in as in the case of Flash files, Shockwave files, etc. If you use Namo GIF Animator which is provided along with Namo WebEditor, you can easily make GIF animation with GIF or BMP files.
Starting Namo GIF Animator

To start Namo GIF Animator, click the Start button, point to Programs, point to Namo Web Utilities, and then click Namo GIF Animator. In case you use Namo GIF Animator frequently, it is recommended to register it on the "External Programs" list of Namo WebEditor so that you can use it conveniently.
To register Namo GIF Animator on the external programs list of Namo WebEditor
1. 2. 3.
4.
On the Tools menu, click External Programs. In the Preferences dialog box, select External Programs tab. At the Name in Program 3, enter "Namo GIF Animator", and click Browse to find the path. In case you install Namo WebEditor at "C:\Program Files", the Namo GIF Animator's path becomes "C:\Program Files\Namo\WebEditor 2006\bin\Tools\NamoAniGif.exe." Click OK to register it as an external program of Namo WebEditor.
Setting up the work environment

To zoom the canvas
You can zoom out the size of the canvas of the animation. 1. 2. 3. On the Tools menu, click Crop Canvas. Bring the mouse pointer over the frame. Drag it to select the area you want. The size of the canvas will be zoom outd to the size of the area you have cropped.
To zoom in/out the content of the edit window
On the View menu, click Zoom in or Zoom out. You can also use the toolbar. To zoom in the window, on the View menu, click Zoom in, or click on the toolbar. To zoom out the window, on the View menu, click Zoom out, or click on the toolbar. To see the actual view, on the View menu, click Actual Pixels, or click on the toolbar.
To show/hide the toolbar
To show/hide the toolbar, on the View menu, click Toolbar.

To show/hide the status bar
To show/hide the status bar, on the View menu, click Status Bar.
Creating an animation
The animation GIF file may seem as a single image. But, in fact, it is a combination of several images. When the GIF animation plays, the images are shown in sequence. Each of the image is called a "frame."
To create a new animation
1. 2. 3. 4. 5. 6.
In the menu, File menu, click New. On the Edit menu, click Insert Frame. Click Add. Select a GIF or BMP format image and click Open. Repeat steps 2 through 4 for each additional frame. Click OK.
When adding several images at once, you can change their order by clicking Move Up or Move Down in the Insert Frame dialog box.
Viewing and setting animation properties

To view or set the properties of a frame
1. 2.
Select a frame. In the Properties window, click the Frame tab.
-Frames are named according to their position in the animation sequence, starting from "Frame 1".
To view or set the properties of an animation
1.
In the Properties window, click the Animation tab.
Editing frames
You can change the order of the frames and edit its images. In case there is an unnecessary frame, you can cut it out, and keep the necessary ones. Besides, you can change the position of the image in a frame, and rotate it.
To change the order of frames
1. 2.
Select the frame to move. On the Edit menu, click Move Frame Up or Move Frame Down. You can also click toolbar.
or
on the
Namo WebEditor 2006 User Manual To crop a frame
1. 2. 3.
Select a frame. On the Tools menu, click Crop Image, or click on the toolbar. Draw a box around the part of the image you want to keep. When you release the mouse button, the rest of the image will be deleted.
To shift a frame
1. 2. 3.
Select a frame. On the Tools menu, click Move Image, or click on the toolbar. Click and move the frame to the desired position.
-To undo any change, press Ctrl+Z.
Setting a transparent color

You can set a transparent color for one or more frames of an animation, so that the background of a Web document can be seen "through" areas of those frames that have that color.
To set a transparent color
1.
2. 3.
4.
Select the frame or frames for which you want to set a transparent color. (To select multiple contiguous frames, click the first, and then click the last while holding down the Shift key. To select multiple non-contiguous frames, click each while holding down the Ctrl key.) On the Tools menu, click Select Transparent Color. Select the color you want to be transparent. You can select a color in the image by clicking on the image in the preview area. Use the button to zoom into the preview to make it easier to select a color. Click OK.
To hide transparent colors
To see the frames of the animation as they would appear on a Web page with a white background, on the View menu, click Hide Transparent Color, or click on the toolbar.
Editing colors
You can change one or more colors in one or more frames by editing their color palettes.
To edit the color palette of a frame
1.
Select a frame.
2. 3. 4. 5. 6. 7.
On the Tools menu, click Edit Palette, or click on the toolbar. Select a color that you want to change. (You can select a color in the image by clicking in the preview area.) Click Change Color. Select a new color and click OK. Click OK. Repeat steps 3 through 6 for each color you want to change.
Setting delay time and repeat

You can set the delay time, or interval between two frames, independently for each frame of an animation. You can also specify how many times an animation will repeat.
To set the delay time for a frame
1. 2.
Select the frame or frames for which to set the delay time. (Press Ctrl+A to select the whole animation.) On the Frame tab of the Properties window, in the Delay time box, specify the delay time in hundredths of a second.
Specifying repetitions
Repetitions are controlled on the Animation tab of the Properties window. To make the animation play just once, deselect the Repeat check box. To make the animation repeat a certain number of times, select the Repeat check box and then enter a number in the Repetitions box. To make the animation loop endlessly, select both the Repeat and Loop forever check boxes.
Previewing your animation

To preview the current animation, click Preview on the View menu or open the Preview window. on the toolbar, press F5. This will
In the Preview window, you can use the various buttons at the bottom to move through the animation. You can also jump to a specific frame by dragging the frame slider.
Saving your animation

To save the current animation
On the File menu, click Save, or click
on the toolbar.
Namo WebEditor 2006 User Manual To save a selected frame
1. 2.
Select the frame to save. On the Edit menu, click Save Frame, or click
on the toolbar.
Sending your animation to Namo WebEditor

When you have finished creating an animation, you can conveniently insert it into a Web document by "sending" it to Namo WebEditor. This will insert the animation into the current document in Namo WebEditor or, if no document is open in Namo WebEditor, into a new document.
To send an animation to Namo WebEditor
On the File menu, click Send to WebEditor. (Or press Ctrl+W.)
If you send an animation to Namo WebEditor before saving it, GIF Animator will automatically save the animation to a temporary file. Then, when you save the Web document in Namo WebEditor, you will be prompted to save the animation normally.
Namo Image Slicer

Use Namo Image Slicer to break an image up into several pieces, like the pieces of a jigsaw puzzle. Slicing an image in this way has several benefits, including the following: Browsers can download several pieces of a sliced image at the same time, causing the whole image to load faster. Slicing an image gives you more flexibility when placing the image in a table (p.161), since you can put pieces of the image into adjacent cells to suit your design requirements. You can create several variations of an imagefor example, with different text componentsby creating several versions of one piece of the image instead of editing the whole image. You can put hyperlinks on different parts of a sliced image without using an image map (p.157).
Creating a project and importing an image

Before slicing an image, you have to create new Namo Image Slicer project.
To create a new project
On the File menu, click New, or click
on the toolbar.
Next, import the image you want to slice.

Chapter 8: Appendices To import an image for slicing
1. 2.
On the File menu, click Import Image, or click Select the desired image and click Open.
on the toolbar.
Setting up export settings

Before exporting a sliced image to HTML, you should set up a few export settings the way you want. These settings are found on the Defaults tab of the Properties panel. (If the Properties panel is hidden, reveal it by clicking Properties on the Window menu.)
HTML options
Export as Namo layout box: Select this option if you want the image slices to be exported as a layout box (p.79) instead of an ordinary table. Use <spacer> tags: You may need to select this option to make a sliced image appear correctly in
some Netscape browsers.

Default image format
File format: Specify the default file format in which to save the image slices. (You can override (p.385) the default format for a specific slice, if you want.) If you select GIF format, the Color reduction box is enabled; click it and select one of the following color reduction methods: o Median Cut: Prioritizes colors in order of frequency in use. This option is best for images
with many colors, like photographs. o o

Octree: Preserves the original palette if the image source is a GIF file or an 8-bit PNG file. Popularity: If possible, the original palette will be preserved. Use this option if you want
the image to be as precise as possible with the fewest colors.

Image folder
This setting specifies the path of the folder where the image files created from the slices will be saved. The path is relative to the exported HTML file. For example, if the image folder path is "images\", and you export the HTML file to the folder "C:\web", the images will be saved in "C:\web\images".
Setting up snap and grid settings

Namo Image Slicer's snap and grid functions make it easier to slice images precisely. These functions are controlled through the Snap/Grid/Zoom tab of the Properties panel. (If the Properties panel is hidden, reveal it by clicking Properties on the Window menu.)
Namo WebEditor 2006 User Manual Snap settings
When snap-to-neighbors is enabled, the edges of a new slice "snap" to the edges of neighboring slices and to the image borders when the mouse pointer is close to a neighboring slice or an image border. Enabling snap-to-neighbors makes it easy to "tile" the image into slices precisely, without having to click and move the mouse precisely. To enable snap-to-neighbors, select the Snap to neighbors check box. The number in the Tolerance box specifies how close the mouse pointer must be to a neighboring slice or an image border before the edge of the new slice will snap to it.
Grid settings
When the grid is enabled, the image is covered by a virtual grid, like the lines on graph paper. The edges of new slices "snap" to the gridlines, making it easy to draw slices that are the same size or an even multiple of some base size. You can specify the horizontal and vertical grid spacing independently, and you can optionally offset the origin of the grid by some distance horizontally and/or vertically relative to the image's top left corner. To enable the grid and set its properties, do the following: 1. 2. Select the Grid check box. Specify the horizontal and vertical grid spacing in the Spacing X and Y boxes, respectively. (To specify different grid spacing values for the horizontal and vertical axes independently, deselect the Sync X-Y check box.) (optional) Specify the distance by which the origin of the grid is offset from the origin of the image using the Offset X and Y boxes. To enable snap-to-grid, select the Snap to grid check box.
3. 4.
-You must explicitly enable snap-to-grid by selecting the Snap to grid check box. It is deselected by default. -Snap-to-grid and snap-to-neighbors are mutually exclusive: enabling one will disable the other. -Snapping also works when you move and resize slices, not just when you create them.
Creating, moving, and resizing slices

To creating a slice
1. 2.
On the Tools menu, click Slicer, or click on the Work Tools bar. (The Slicer Tool is selected by default when you import an image.) Draw a box around a part of the image. When you release the mouse button, that part of the image is shaded green, indicating that it is now a slice.
Repeat step 2 for each slice you want to create.
Chapter 8: Appendices To move a slice
1. 2.
On the Tools menu, click Selection, or click on the Work Tools bar. Drag the desired slice to the desired position.
To resize a slice
1. 2. 3.
On the Tools menu, click Selection, or click on the Work Tools bar. Click to select the slice you want to resize. Drag any of its resize handles in any direction.
-You can temporarily switch from the Slicer Tool to the Selection Tool or vice versa by holding down the Ctrl key.
Reordering overlapping slices

When two or more sliced areas overlap, you can control their top-to-bottom order. This affects the way the overlapping slices are themselves sliced. 1. 2. 3. Switch to the Selection Tool. (Click on the Work Tools bar.) Select a slice that overlaps with another. Click any of the following buttons on the Work Tools bar: o (Bring to Front) to make the selected slice topmost o (Bring Forward) to "raise" the selected slice one level o (Send Backward) to "lower" the selected slice one level o (Send To Back) to make the selected slice bottommost
Deleting slices
To delete a slice
1. 2. 3.
Switch to the Selection Tool. (Click Select the slice to delete. Press Delete.
on the Work Tools bar.)
Specifying export options for a specific slice

You can change the export options of a specific slice through the Slice tab of the Properties panel while the slice is selected.
Namo WebEditor 2006 User Manual Changing the export type
Normally, Namo Image Slicer exports each slice as an ordinary image inside a table cell. However, you can specify that a specific slice be exported as the background image for its corresponding table cell, or that its corresponding table cell be left empty. To change this setting, click the Export the selected slice as box and select an option.
Overriding the default image format
You can specify that a specific slice be saved in a different image format from the default (p.383). To do so, do this: 1. 2. Under Image format, deselect Use default. Click the File format box and select a format. If you select GIF format, the Color reduction box is enabled; click it and select one of the following color reduction methods: o Median Cut: Prioritizes colors in order of frequency in use. This option is best for images with many colors, like photographs. o Octree: Preserves the original palette if the image source is a GIF file or an 8-bit PNG file. o Popularity: If possible, the original palette will be preserved. Use this option if you want the image to be as precise as possible with the fewest colors.
Specifying a file name
Normally, Namo Image Slicer names each exported image file automatically, by appending a sequential four-digit number to the project name. However, you can specify an arbitrary file name for any given slice. 1. 2. Under Filename, deselect Use autonaming. In the box, enter the desired file name. (Do not include an extension, since Namo Image Slicer will add one automatically.)
Dealing with undefined areas

When you slice an image, you don't have to cover the entire image with slices. You can leave parts of the image undefinedthat is, not covered by slices. By default, Namo Image Slicer will automatically divide undefined areas into the smallest possible number of slices and export them along with the slices you have explicitly created. However, you can change the way Namo Image Slicer exports undefined areas. To do so, click the Slice tab of the Properties panel while no slice is selected. The Export undefined areas as box has three options:
Normal images: Namo Image Slicer will automatically divide undefined areas into "implicit"
slices and export them in the same way as "explicit" slices.

Cell background images: The same as Normal images, except that the implicit slices will become
background images for the table cells they correspond to.
Empty cells: Namo Image Slicer will only export explicit slices. The table cells corresponding to
T
undefined areas will be empty.
Exporting a sliced image to HTML

When you have finished slicing an image, you can export it to HTML. What this means is: The image portion covered by each slice is saved as a separate image file. (In the case of "implicit" slices, an image file may or may not be saved, depending on the state of the Export undefined areas as (p.386) setting on the Slice tab of the Properties panel.)
HT TH T T T T T
Namo Image Slicer generates an HTML document and insert a table or layout box into it, depending on the state of the Export as Namo layout box (p.383) option on the Defaults tab of the Properties panel. This table or layout box is divided into a certain number of cells, one cell for each slice (including any "implicit" slices covering undefined areas of the original image).
HT TH T T T T T
Each saved image file is inserted into its corresponding table cell in the HTML document, either as a normal image (using an <img> tag) or as the cell's background image (p.181).
HT TH T T T
There are two ways to export a sliced image to HTML. You can use the Export HTML command to save the generated HTML document and image slices to a specified folder, or you can use the Send to WebEditor command to open the generated HTML document directly in Namo WebEditor. When you use this method, Image Slicer saves the HTML document and image slices to temporary files, which you must save normally in Namo WebEditor.
T T
To export a sliced image to HTML using the Export HTML command
1. 2.
On the File menu, click Export HTML, or click on the toolbar. Navigate to the folder where you want to save the HTML document, specify a file name, and then click Save.
T T T T T T T T T T T T
The new images will be saved in the folder specified in the Image folder box on the Default tab of the
Properties panel.
T T
To "send" a sliced image to Namo WebEditor
On the File menu, click Send to WebEditor, or press Ctrl+W. The generated HTML document will open in Namo WebEditor.
T T T T
After exporting to HTML, you can insert a sliced image into another HTML document by copying the table that contains the image slices and pasting it into the other document.
Keyboard shortcuts
File-related shortcuts
Keystroke Ctrl + D Ctrl + N Ctrl + O Ctrl + P Ctrl + S Ctrl + F4 Ctrl + F1 Function Save document as... New document Open document... Print... Save document Close document Document properties...
Window/panel/view shortcuts
Keystroke Ctrl + W Alt + Shift + R Alt + 0 Alt + 1 Alt + 2 Alt + 3 Alt + 4 Alt + 5 Alt + 6 Alt + 7 Alt + 8 Alt + 9 Ctrl + Q Ctrl + / Ctrl + Tab Function Window list... Show/hide rulers Results panel Site Manager window Inspector panel Document Outline Timeline panel Tag Selector Layers panel Actions panel Formatting panel Site Library panel Quick Tag Editor Show/hide panels Switch to next document
388 Keyboard shortcuts
Keystroke Ctrl + Shift + Tab F4 Ctrl + F4 F5 Shift + F5 F6 Shift + F6 F11 Ctrl+F11 F12 Ctrl+F12
Function Switch to previous document Publish window Close document window Auto-detect encoding / Revert to saved Refresh screen Cycle mode forward Cycle mode backward Preview document in Browser 2 (default: Internet Explorer) Preview document in Browser 1 (default: Netscape)
Text editing shortcuts

Keystroke Ctrl + A Ctrl + C Ctrl + V Ctrl + X Ctrl + Y Ctrl + Z Alt + Z Ctrl + Backspace Alt + Backspace Ctrl + Insert Shift + Insert Ctrl + Delete Ctrl + Home Ctrl + End Ctrl + Page Up Ctrl + Page Down Function Select all Copy selection to clipboard Paste from clipboard Cut selection to clipboard Delete line Undo Redo Delete word left Undo Copy selection to clipboard Paste from clipboard Delete word right Move to top of document Move to end of document Move to top of window Move to bottom of window
Keyboard shortcuts 389
Keystroke Ctrl + Left Ctrl + Right Shift + Ctrl + Left Shift + Ctrl + Right Shift + Up Shift + Down Home End Shift + Home Shift + End F3 F7 Shift + F7
Function Move to beginning of previous word Move to beginning of next word Extend selection to beginning of previous word Extend selection to beginning of next word Extend selection up one line Extend selection down one line Move to beginning of line Move to end of line Extend selection to beginning of line Extend selection to end of line Find again Check spelling Auto Correct...
Inserting shortcuts
Keystroke Ctrl + Shift + A Ctrl + G Ctrl + Shift + I Alt + Shift + I Ctrl + Space Ctrl + Enter Shift + Enter Ctrl + = Ctrl + F7 F9 Shift + F9 Function Insert layer Add bookmark... Insert image / Image properties... Image effects... Insert non-breaking space Insert page break Insert line break Quick Insert (after typing Quick Insert keyword) Insert symbol... Create hyperlink... Remove hyperlink
Formatting shortcuts
Keystroke Ctrl + B Ctrl + E Ctrl + I Ctrl + J Ctrl + L Ctrl + T Ctrl + U Ctrl + 1~6 Ctrl + 7 Ctrl + 8 Ctrl + 9 Ctrl + 0 (zero) Ctrl + [ Ctrl + ] Alt + Enter F2 Shift + F2 Ctrl + F6 F8 Shift + F8 Function Bold Clear character formatting Italic Apply last font color Font... Format paragraph... Underline Heading 1~6 Preformatted text Numbered list Bulleted list Normal paragraph Decrease indentation Increase indentation View properties of selected element Paste format Copy format... Define styles... Join lists Split list
Table-related shortcuts
Keystroke Tab Shift + Tab Del Shift + Del Ctrl + Shift + L Ctrl + Shift + T Function Move to next cell Move to previous cell Delete selected cell contents Delete selected cells Cell properties... Table properties...
Keystroke Alt + Shift + T Ctrl + F8 Ctrl + Shift + F8
Function Select table Merge cells Split cells...
Frame-related shortcuts
Keystroke Ctrl + Shift + N Ctrl + Shift + O Ctrl + Shift + P Ctrl + Shift + R Ctrl + Shift + S Function New document in frame Open document in frame... Print frameset... Frame properties... Save all frames
Utility shortcuts
Keystroke Ctrl + F Ctrl + Shift + F Ctrl + H Ctrl + R Ctrl + K Ctrl + M Ctrl + Shift + M Ctrl + Shift + 0 (zero) Shift + F11 Shift + F12 Function Find... Global find and replace... Find and replace... Find and replace... Assign temporary bookmark (press Ctrl + K followed by 1~9) Play key macro Record key macro / stop recording Key macro manager... Import document from Browser 2 Import document from Browser 1
Other shortcuts
Keystroke Alt + Click Alt + Shift + S Alt + Shift + W F1 Shift + F1 Alt + X Alt + F4 Function Open hyperlink destination Save site Script Wizard... Help HTML/CSS Reference Exit Namo WebEditor Exit Namo WebEditor
Index
A
A 146 absolute URL ..........................................................147 access key ...............................................................153 actions .............................................................271, 272 ActiveX controls .....................................................229 ADDRESS ..............................................................117 addresses .................................................................117 alignment ................................................................199 alt text .....................................................................132 animated GIFs.........................................................377 applets .....................................................................229 asset library .............................................................337 audio .......................................................................226 author ......................................................................214 brightness ............................................................... 137
C
cache expiration ........................................................... 223 character set...................................................... 44, 215 changing throughout a site ................................. 370 classification........................................................... 214 clip art ............................................................ 124, 232 collaboration........................................................... 339 color selecting ............................................................. 210 comments ................................................................. 65 contrast ................................................................... 137
D
date time ................................................................ 63, 65 DD.......................................................................... 118 default target for a document ................................................... 217 for a frame............................................................ 93 definition list .......................................................... 118 description .............................................................. 214 DIV .................................................................. 97, 106 document node ....................................................... 317 document properties ............................................... 214 auto redirect ....................................................... 222 auto refresh ........................................................ 222 background image.............................................. 219 background sound .............................................. 221 base location ...................................................... 216 character set ....................................................... 215 default colors...................................................... 218 default target ...................................................... 217 entry or exit effect.............................................. 220 expiration ........................................................... 223 keywords............................................................ 214 margins .............................................................. 220 meta tags ............................................................ 224
B
background color ....................................................203 background fade......................................................260 background image...........................................203, 219 background sound ...................................................221 banners....................................................................334 BASE ........................................................93, 216, 217 base location ...........................................................216 basic content ...........................................................111 images.................................................................119 text......................................................................112 basic editing ..............................................................59 editing text............................................................60 find and replace ....................................................61 inserting special items ..........................................63 inserting text .........................................................59 BGSOUND .............................................................221 bookmarks.......................................................146, 159 creating ...............................................................159 removing.............................................................160 renaming.............................................................160 using bookmarks in hyperlinks ...........................160 borders ....................................................................200
395
PICS labels......................................................... 223 scrollbar colors ................................................... 218 title ..................................................................... 214 documents.................................................................48 creating a new document......................................48 default document template ...................................48 opening.................................................................49 previewing............................................................50 printing .................................................................56 resource files ........................................................54 saving ...................................................................51 saving a document as a template ..........................54 saving in XHTML format.....................................52 viewing transfer information ................................55 DT........................................................................... 118 dynamic banners ..................................................... 334 Dynamic HTML ..................................................... 256 dynamic navigation bars ................................. 327, 330 dynamic navigation bars and trees .......................... 324 dynamic navigation tree.......................................... 332
E
encoding ................................................................. 215 entry effect.............................................................. 220 events...................................................................... 271 exit effect ................................................................ 220 expiration................................................................ 223 exporting exporting to MHTML...........................................53 external node .......................................................... 318
F
find and replace ................................................ 61, 364 Flash ....................................................................... 229 Flash Button............................................................ 238 floating box............................. 106, 107, 108, 109, 110 adding content .................................................... 108 background color................................................ 109 background image .............................................. 109 borders................................................................ 110 creating............................................................... 106 deleting............................................................... 108 margins and padding .......................................... 110 positioning.......................................................... 106 resizing ............................................................... 107 visibility ............................................................. 108 formatting ....................................................... 189, 190 background properties ........................................ 203 character properties ............................................ 197 copying and pasting formatting .......................... 213 margins............................................................... 200
paragraph properties ...........................................199 selecting colors ...................................................210 style sheets..........................................................191 units ....................................................................209 Formatting panel .....................................................204 forms .......................................................................289 action ..................................................................297 form controls ......................................................291 form handler .......................................................297 forms in tables ....................................................300 properties ............................................................297 scripting ..............................................................299 validation ............................................................299 FRAME.....................................................................88 frames .......................................................................88 adding ...................................................................92 borders ..................................................................94 default target.........................................................93 initial document ....................................................89 margins .................................................................94 previewing ............................................................90 properties ..............................................................94 removing...............................................................92 renaming...............................................................94 resizing ...........................................................91, 94 scrollbars ..............................................................94 framesets ...................................................................88 creating .................................................................89 noframes content...................................................95 previewing ............................................................90 printing .................................................................91 properties ..............................................................95 saving ...................................................................90
G
GIF animations........................................................377 global find and replace............................................364 glossary ...................................................................... 3
H
H1-H6 .....................................................................112 headings ..................................................................112 hiding images ............................................................43 horizontal rules..........................................................64 HR.............................................................................64 hyperlinks................................................146, 147, 156 access key ...........................................................153 bookmarks ..........................................................159 checking external links .......................................368 colors ..................................................................154 creating ...............................................................149
396
destination types .................................................146 finding broken links............................................367 image maps.........................................................157 linking to bookmarks ..........................................160 opening in a pop-up window ..............................152 relative vs. absolute ............................................147 removing.............................................................156 target...................................................................151 tooltips................................................................152
indentation.............................................................. 199 INPUT .................................................................... 291 Inspector................................................................... 28 installation .................................................................. 7 interaction............................................................... 289
J
Java applets ............................................................ 229 JavaScript ............................................................... 256 actions and events ...................................... 271, 272 timelines............................................................. 283
I
ID 194 image galleries ........................................................251 image maps .............................................................157 images .....................................................119, 120, 122 adding a beveled-edge effect ..............................139 adding a border ...................................................138 adding a shadow under an image........................140 adding text ..........................................................137 adjusting brightness ............................................137 alignment ............................................................129 alt text.................................................................132 borders................................................................130 converting image formats ...................................145 copying ...............................................................119 creating a rollover effect.....................................133 creating GIF animations .....................................377 cropping..............................................................135 Drawing and painting on an image .....................141 effects .................................................................134 Flash Button .......................................................238 flipping ...............................................................136 image formats .....................................................120 inserting..............................................................123 inserting from a local file....................................123 inserting from the clip art library........................124 inserting from the current site.............................124 inserting from the Web .......................................125 load time .............................................................122 margins ...............................................................130 pasting from other programs...............................125 resizing ...............................................................135 rotating ...............................................................136 saving a document with images ..........................126 setting display size..............................................128 slicing .........................................................144, 382 Smart ClipArt .....................................................232 transparency........................................................143 using a low-resolution alternate image ...............133 IMG ........................................................................119 import site .................................................................73
K
keyboard shortcuts.................................................. 388 keywords ................................................................ 214
L
language encoding............................................ 44, 215 layers .........................97, 100, 101, 102, 103, 104, 105 adding content.................................................... 101 aligning .............................................................. 104 background color ............................................... 103 background image.............................................. 103 borders ............................................................... 103 creating ................................................................ 97 deleting .............................................................. 101 DIV vs. LAYER ................................................ 105 ID 103 layer window...................................................... 104 margins and padding .......................................... 103 positioning ........................................................... 97 resizing............................................................... 100 visibility ............................................................. 102 z-order................................................................ 101 layout........................................................................ 78 table ..................................................................... 86 layout box................................................................. 79 alignment ............................................................. 83 background .......................................................... 83 converting to a table............................................. 85 creating ................................................................ 80 grid....................................................................... 83 properties ............................................................. 83 resizing................................................................. 81 layout cell ................................................................. 79 creating ................................................................ 80 resizing................................................................. 81 layout cells aligning ................................................................ 82 alignment ............................................................. 84 background .......................................................... 84
397
borders..................................................................84 margins.................................................................84 moving .................................................................81 properties..............................................................84 removing ..............................................................81 layout grid........................................................... 32, 34 layout guides....................................................... 32, 34 LI 113 line height ............................................................... 199 LINK ...................................................................... 194 links ................................................................ 146, 156 lists ......................................................................... 113 bullets and numbering ........................................ 115 creating............................................................... 113 definition lists..................................................... 118 image as bullet.................................................... 115 merging .............................................................. 114 nested lists .......................................................... 114 splitting .............................................................. 114 local site............................................................ 67, 303 adding files and folders ...................................... 309 creating.................................................................68 creating a local site............................................. 307 exporting and importing ..................................... 315 importing and exporting ..................................... 312 moving and removing files and folders .............. 311 saving a site template ......................................... 311 structure and navigation ..................................... 316
O
OL ...........................................................................113 OPTION..................................................................291 orphan files .............................................................368
P
P 112 padding ...................................................................200 page banners ...........................................................334 page breaks ...............................................................56 page layout................................................................78 paragraphs...............................................................112 Photo Album Wizard ..............................................251 photo album styles ..............................................254 photo albums...........................................................251 PICS........................................................................223 Platform for Internet Content Selection ..................223 plug-in objects.........................................................229 pop-up window .......................................................152 PRE .........................................................................116 preferences ................................................................43 default character set ..............................................44 default document colors........................................44 default fonts ..........................................................43 file saving and backup ..........................................47 for editing .............................................................45 image display........................................................43 preformatted text .....................................................116 previewing documents ..............................................50 printing documents....................................................56 controlling page breaks.........................................56 controlling widows and orphans ...........................56 program settings........................................................43 properties document ............................................................214 Publish window.......................................................353 publishing........................................................347, 353 defining remote sites...........................................348 deleting remote files ...........................................359 downloading .......................................................358 modes .................................................................354 Quick Publish .....................................................351 remote file permissions.......................................360 selecting files ......................................................356 uploading ............................................................357
M
margins ........................................................... 200, 220 META..................................................................... 224 meta tags................................................................. 224 MHTML ...................................................................53 MIME HTML ...........................................................53 mode tabs..................................................................21 multimedia.............................................................. 226 audio................................................................... 226 Flash................................................................... 229 Shockwave ......................................................... 229 video................................................................... 226
N
Namo Capture......................................................... 374 Namo GIF Animator............................................... 377 Namo Image Slicer ................................................. 382 Namo Web Utilities ................................................ 374 navigation bars........................................................ 305 navigation bars and trees ........................................ 324 new features................................................................9
Q
Quick Publish..........................................................351
398
R
redirection ...............................................................222 refresh .....................................................................222 relative URL ...........................................................147 remote site...............................................................348 FTP .....................................................................349 Win32 .................................................................350 requirements................................................................6 resource files .............................................................54 resource library .........................................................35 adding resources ...................................................39 managing resources ..............................................38 Resource Manager ....................................................35 resources ...................................................................35 sending .................................................................41 rollover effect..........................................................133 rulers ...................................................................32, 34
S
saving default file extension ............................................53 screen capture .........................................................374 Script Manager........................................................282 Script Wizard ..........................................................257 scripting ..................................................................256 actions and events.......................................271, 272 Script Manager ...................................................282 Script Wizard......................................................257 scripts timelines .............................................................283 scrollbar colors........................................................218 search and replace .............................................61, 364 SELECT..................................................................291 setup............................................................................7 sharpness.................................................................137 Shockwave ..............................................................229 Shortcut Bar ..............................................................25 shortcut keys ...........................................................388 shortcut node...........................................................319 simultaneous source view .........................................24 site.....................................................................67, 303 importing and exporting .....................................312 maintenance................................................347, 363 management........................................................363 planning ......................................................304, 305 publishing ...................................................347, 353 structure and navigation......................................316 site assets ................................................................337 site library ...............................................................337 site maintenance changing character sets.......................................370
changing links and filenames to lowercase ........ 371 checking external links....................................... 368 finding broken links ........................................... 367 finding files........................................................ 363 finding orphan files ............................................ 368 global find and replace....................................... 364 Site Manager .......................................................... 303 site navigation ........................................................ 316 site template ........................................................... 311 site tree ................................................... 316, 317, 322 Site Wizard....................................................... 68, 307 sitemap ................................................................... 335 Smart ClipArt ......................................................... 232 adding text ......................................................... 234 converting to bitmapped image.......................... 236 default path ........................................................ 232 editing Smart ClipArt......................................... 233 export area ......................................................... 235 inserting ............................................................. 232 managing............................................................ 237 source control ......................................................... 339 special characters...................................................... 64 starting Namo WebEditor......................................... 20 status bar .................................................................. 31 STYLE ................................................................... 191 style sheet ............................................................... 194 creating .............................................................. 195 external ...................................................... 194, 195 style sheets ............................................................. 191 styles................................................189, 191, 193, 194 applying ............................................................. 193 assigning an element ID..................................... 194 background properties........................................ 203 box properties .................................................... 200 character properties............................................ 197 creating an external style sheet .......................... 195 defining .............................................................. 191 linking to an external style sheet ........................ 194 paragraph properties........................................... 199 saving an external style sheet............................. 195 symbols .................................................................... 64 system requirements ................................................... 6
T
TABLE................................................................... 161 tables ...................................................................... 161 adding and removing rows and columns............ 167 aligning cell content........................................... 171 alignment ........................................................... 183 background color ............................................... 181 background image.............................................. 181
399
border colors .............................................. 174, 175 border conflicts................................................... 178 border presets ..................................................... 173 border properties ........................................ 175, 177 borders................................................................ 173 captions .............................................................. 180 converting a table to paragraphs......................... 187 converting paragraphs to a table......................... 187 converting to a layout box ....................................85 copying and moving cells................................... 168 creating............................................................... 161 deleting cell contents.......................................... 169 floating tables ..................................................... 183 header cells......................................................... 182 joining ................................................................ 184 margins............................................................... 171 merging and splitting cells ................................. 170 padding............................................................... 171 properties............................................................ 180 resizing rows and columns ................................. 164 selecting parts of a table ..................................... 163 sorting ................................................................ 185 splitting .............................................................. 184 table calculation ................................................. 186 text wrapping...................................................... 182 transposing ......................................................... 185 using for layout ....................................................86 Tag Selector..............................................................30 target....................................................................... 151 TD........................................................................... 161 technical support.........................................................8 templates saving ...................................................................54 temporary node ....................................................... 320 text.......................................................................... 112 addresses ............................................................ 117 definition list ...................................................... 118 headings ............................................................. 112
lists .....................................................................113 paragraphs ..........................................................112 preformatted .......................................................116 TEXTAREA ...........................................................291 themes .....................................................................242 applying ..............................................................245 applying styles from a theme ..............................246 components.........................................................242 creating ...............................................................247 editing.................................................................247 inserting theme objects .......................................246 timelines..................................................283, 284, 286 attaching actions .................................................287 title ..........................................................................214 TITLE .....................................................................214 tool windows.............................................................28 toolbars .....................................................................25 tooltips ....................................................................152 TR ...........................................................................161 typographical conventions ......................................... 2
U
UL ...........................................................................113 units.........................................................................209 user interface.............................................................21 utilities ....................................................................374
V
video .......................................................................226
W
windows ....................................................................22 Windows Media ......................................................226
X
XHMTL ....................................................................52
400

Namo WebEditor 2006 (Manual)

Uploaded by

Copyright:

Available Formats

Namo WebEditor 2006 (Manual)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Namo WebEditor 2006 (Manual)

Uploaded by

Copyright:

Available Formats

Copyright 2005 SJ Namo Interactive, Inc. All rights reserved.

2 Namo WebEditor Fundamentals .................................................................. 19

3 Laying Out Web Pages.................................................................................. 77

4 Basic Page Content and Formatting.......................................................... 111

5 Spicing Up Your Site ................................................................................... 225

6 Working With Sites ...................................................................................... 303

7 Publishing and Maintaining a Site.............................................................. 347

8 Appendices .................................................................................................. 373

Index ................................................................................................................ 395

1 Before You Begin

Namo WebEditor 2006 User Manual

About this manual

2 About this manual

Chapter 1: Before You Begin Window titles

Glossary of common terms

About this manual 3

Namo WebEditor 2006 User Manual

4 About this manual

Chapter 1: Before You Begin

About this manual 5

Namo WebEditor 2006 User Manual

Chapter 1: Before You Begin

Installing Namo WebEditor

To install Namo WebEditor from a downloaded setup file

Installing Namo WebEditor 7

Namo WebEditor 2006 User Manual

Getting technical support

8 Getting technical support

Chapter 1: Before You Begin

What's new in Namo WebEditor 2006

What's new in Namo WebEditor 2006 9

Namo WebEditor 2006 User Manual

Quick Tag Editor

10 What's new in Namo WebEditor 2006

Chapter 1: Before You Begin

You can now save documents in fully standards-compliant XHTML format.

What's new in Namo WebEditor 2006 11

Namo WebEditor 2006 User Manual

12 What's new in Namo WebEditor 2006

Chapter 1: Before You Begin

Calculating Values in a Table

What's new in Namo WebEditor 2006 13

Namo WebEditor 2006 User Manual

The first step of Photo Album creation

When [Open Existing] selected

14 What's new in Namo WebEditor 2006

Chapter 1: Before You Begin

Changing Size Units of Tables and Layers

What's new in Namo WebEditor 2006 15

Namo WebEditor 2006 User Manual

Empowered Tag Cleanup

Before clenup Improved File Support

16 What's new in Namo WebEditor 2006

Chapter 1: Before You Begin

Default File Name Extension

What's new in Namo WebEditor 2006 17

Namo WebEditor 2006 User Manual

18 What's new in Namo WebEditor 2006

2 Namo WebEditor Fundamentals