Beginners Guide 55 Web

Namo WebEditor 5.
5 Beginner’s Guide
Copyright  1997 – 2003 Namo Interactive Inc.
All contents of this manual and the Namo WebEditor software itself are protected by the copyright laws
of the Republic of Korea and international intellectual property treaties. No part of this book may be
reproduced or transmitted in any form or by any means without the express written consent of Namo
Interactive Inc.
Namo Interactive Inc.

P.O. Box 317
Kangnam Post Office
Seoul, Korea, 135-603
Phone: +82-2-5599-334
Web: http://www.namo.com
Namo WebEditor is a registered trademark of Namo Interactive Inc. All other product names contained
in this book are registered trademark of their respective owners.
Namo WebEditor contains compression code licensed from info-ZIP.

Contents
About This Beginner’s Guide ......................................................................................5
Planning a Homepage ...............................................................................................6
1. Installing Namo WebEditor 5.5...............................................................................7
2. Using the Site Wizard .......................................................................................... 10
3. Changing the Site Structure ................................................................................. 13
4. Changing the Filename ........................................................................................ 14
5. Entering the Text................................................................................................. 15
6. Changing the Paragraph Formats ......................................................................... 16
7. Modifying the Character Formats.......................................................................... 17
8. Creating Hyperlinks ............................................................................................. 18
9. Creating Tables.................................................................................................... 19
10. Inserting Images ............................................................................................... 20
11. Setting the Transparent Color............................................................................. 21
12. Inserting Theme Objects ................................................................................... 22
13. Creating Bookmarks .......................................................................................... 23
14. Inserting the Smart Buttons ............................................................................... 24
15. Editing the Smart Buttons .................................................................................. 25
16. Inserting a Horizontal Line ................................................................................. 31
17. Creating a Layout Table ..................................................................................... 32
18. Inserting the Flash Buttons ................................................................................ 33
19. Editing the Flash Buttons ................................................................................... 34
Contents | 3
20. Applying the Shadow Effect to an Image............................................................ 35
21. Inserting Clip Arts.............................................................................................. 36
22. Applying Various Effects to an Image ................................................................. 37
23. Creating a Photo Album..................................................................................... 40
24. Applying the Page Transition Effect .................................................................... 44
25. Inserting a Background Music ............................................................................ 45
26. Inserting Scrolling Text in the Status Bar............................................................ 46
27. Creating a Floating Layer ................................................................................... 47
28. Applying the Page Wipe Effect ........................................................................... 48
29. Editing a Theme................................................................................................ 49
30. Editing the Navigation Bar ................................................................................. 53
31. Modifying the Document Properties.................................................................... 56
32. Checking Links .................................................................................................. 57
33. Removing Orphan Files...................................................................................... 58
34. Publishing a Site................................................................................................ 59
4 | Contents
About This Beginner’s Guide
This guide has been designed especially to meet the needs of the first-time users of Namo WebEditor 5.5.
Thus, each chapter begins with a broad overview of the topic, followed by step-by-step guidelines for
using the features provided in Namo WebEditor 5.5. Information on all aspects of creating and editing
Web documents with Namo WebEditor 5.5 is provided in a detailed manner, helping you to reach the
result you want simply by following the steps provided.
● Chapter 1. Installing Namo WebEditor 5.5:
Introduces the System Requirement for installing Namo WebEditor 5.5 and explains how to install and
remove Namo WebEditor 5.5.
● Chapter 2. Using the Site Wizard ~ Chapter 4. Changing the Filename:

Shows how to complete the basic structure of a homepage with the Site Wizard.
● Chapter 5. Entering the Text~ Chapter 23. Creating a Photo Album:

Introduces the basic editing features and shows the steps of editing Web documents created by the
Site Wizard.
● Chapter 24. Applying the Page Transition Effect ~ Chapter 28. Applying the Page Wipe Effect:
Shows various ways to create a dynamic homepage with JavaScript and by applying multimedia
objects.
● Chapter 29. Editing a Theme ~ Chapter 34. Publishing a Site:

Introduces the functions for editing a Theme, modifying navigation bars, checking links, and publishing
a site.
Above 34 steps provided in this guide are arranged based on the steps of creating a homepage. Thus,
even the very beginners can create a dynamic and unique homepage with ease. For more details, please
refer to Namo WebEditor 5.5 User Manual.
Namo WebEditor 5.5 Beginner’s Guide | 5

Planning a Homepage
To create a homepage, first you need to plan the content, structure and scale of the homepage. If you
want to create a personal homepage, it is suggested to classify the content by subject matters before
taking the steps for documentation.
Example of the subject matters for a personal homepage:
● Profile: Personal profile with a photograph

● Music: List of favorite songs
● Movie: List of favorite movies
● Links: List of frequently visited Web sites
● Album: Personal photographs
After classifying documents by the subject matters and deciding the title of each page, you should then,
decide the order of those pages. The order of each page becomes the navigation structure for your
homepage. For example, you can design the navigation structure of the homepage by showing your
profile on the first page and showing the other pages in one-step lower hierarchy. Below is a sample
navigation structure.
Example of a sample navigation structure:
Crystal’s
Inner Space
Profile Music Movie Album Links
● Starts with an Index page introducing the homepage.
● Puts the five content pages in the order of <Profile, Music, Movie, Album and Links>.
Defining filenames is recommended for easy management of a homepage. A homepage is composed of

the HTML files with the file extensions like *.html, *.htm.
Example of personal homepage filenames:
● Crystal’s Inner Space: index.html
● Profile: profile.html
● Music: music.html
● Movie: movie.html
● Album: album.html
● Links: links.html
You can now install Namo WebEditor 5.5 and start creating a homepage.
6 | Namo WebEditor 5.5 Beginner’s Guide

1 Installing Namo WebEditor 5.5
This chapter gives the information on system requirements and the installation of the software.
[System requirements] 3. Follow the on-screen instructions to complete the

setup. When the Installation Wizard runs, click Next.
These are the minimum system requirements for
installing Namo WebEditor 5.5.
● Windows 95, 98, Me, NT 4, 2000, or XP
● 32 MB RAM (Windows 95/98/Me) or 64 MB

RAM (Windows NT/2000/XP)
● Hard disk space:

● 12 MB (minimal installation)
● 80 MB (standard installation, excluding
clip art and optional spelling
dictionaries)
4. Read and confirm End User License Agreement
● 220 MB (complete installation, including
and click OK.
clip art)
● CD-ROM drive (for installation)

● Microsoft Internet Explorer 4 or newer (for
internal preview)
● Resolution 800 x 600 or higher (Monitor

and video card supporting 256 colors or
higher recommended)
[Installing Namo WebEditor 5.5]

If you are installing from the CD-ROM: 5. Choose a folder to install Namo WebEditor. It is
1. Insert the Namo WebEditor CD-ROM into your CD- recommended to select the default folder. If you
ROM drive. When the installation screen appears, want to install the software in a different folder,
click Namo WebEditor 5.5 Installation. click Browse… and select the folder you want.
Click Next.
2. If the setup program does not start automatically,
double-click and select CD-ROM . Then
double-click “setup.exe”.

6. Decide the installation type. For the first-time users, 9. Confirm your installation specifications before
the Typical installation is recommended. If you copying files. If all the settings are correct,
want to choose the installation elements you want, click Next.
choose Custom.
10. Installation is in process and the installation status

7. Decide whether to install the Clip Art files. To install bar appears. When the installation process is
Clip Art, check to select Install Clip Art. completed, the next step starts automatically.
In Namo WebEditor 5.5, there are over 6,500 11. Confirm whether to create a shortcut to Namo
various Clip Arts. Clip Arts can be installed later WebEditor 5.5 or WebCanvas on your desktop. If
after the installation of Namo WebEditor 5.5 and you want to create the shortcut(s) on your desktop,
you can use them whenever you want from the click OK.
Namo WebEditor 5.5 CD-ROM.
8. Specify a folder name you want in Program Folder.

You can use the specified name or enter the name 12. Select Install SVG Viewer to install the SVG
you want directly. You can also choose the name browser plugin to view SVG files exported by
from the existing folders. Click Next. WebCanvas.

13. The setup status bar appears, indicating that the [Uninstalling Namo WebEditor 5.5]
Adobe SVG Viewer installation is in process.
1. Double-click My Computer in your desktop.
2. Open the Control panel and select Add/Remove

Program.
3. From the list of all installed programs, select Namo

WebEditor 5.5 and click Change/Remove.
14. When the installation is complete, the dialog box
prompting you to restart your Windows system 4. In the installation dialog box, choose Remove and
appears. If the Windows system is Windows 98 or click Next.
newer version, you do not have to restart your
computer. Click Finish.
5. A message confirming file deletion appears.

Click OK.
15. Run Namo WebEditor 5.5. When you run Namo
WebEditor 5.5 for the first time, the Namo
WebEditor 5.5 Registration dialog box appears.
Enter the serial number and CD key exactly as 6. As the uninstallation process starts, the
found on End User License Agreement. uninstallation status bar appears.
7. The dialog box asking you whether to restart the

16. Now all installation process is complete. When the computer appears. If you want to restart the
Registration Complete massage appears, click OK. computer, click Yes. If you do not want to restart
your computer, click No.
8. Click Finish. Namo WebEditor 5.5 is now removed
completely from your computer.

2 Using the Site Wizard
The Site Wizard lets even a very novice create a complex homepage fast and easy. Simply by
clicking a few buttons in the Site Wizard, you can complete the entire site structure.
Rather than building a Web site from scratch, [Step 2: Modifying the Site Structure]
you can use the Site Wizard to create an entire You can modify the Web site structure in the
site from a template. You can modify the Site
Structure tab of the Site Wizard, and Web
structure in the steps of the Site Manager. In
documents can be added and removed to change
addition, the Site Wizard lets you select a theme,
the site structure.
which is a ready-made set of design elements
such as buttons, banners, background images, Crystal’s Inner Space
and other page elements, which give every page ● Profile
of your new site a consistent look. ● Music
● Movie
You can create a homepage with the Site Wizard
● Album
by taking the following steps.
● Links
1. Select the [File > Site > Site Wizard...] menu
command. 1. In the Structure tab of the Site Wizard, select
‘Subject 1’ and click Remove. ‘Subject 1’is
2. When the Site Wizard is opened, specify removed from the site structure. By repeating the
information in the five steps of Site Wizard. same steps, remove the documents in the sub
category to modify the site structure as you planned.
[Step 1: Selecting a Template]
In the Template tab, you can select a site type
you want. As you click each template, the pages
available in that template are listed in the
Structure list, and a preview of the template's
index page appears in the Preview pane.
1. Choose ‘Personal Site 1’ in the Site Wizard -
Template tab.
2. Select the ‘Home’ document and click Rename.

Enter a new name, ‘Crystal’s Inner Space’, and
press <Enter> to change the name of the document.
The document name is changed to ‘Crystal’s Inner
Space’. By repeating the same steps, rename every
document as you planned.
2. Click Next.

[Step 4: Entering the Web Site Information]
In Information tab, specify the location in which
to store the Site files.
1. Enter Title, Author, E-mail, and Copyright
information in the Site Wizard – Information tab.
This information will be automatically inserted in
various locations in the Web site.
3. Select ‘Links’ and click Copy. Rename the copied

document as ‘Album’.
2. Click Browse… and specify the folder in which to

store the Site files.
4. Click Next.
3. Click Next.
[Step 3: Selecting a Theme]
[Step 5: Setting the Publishing Information]
Select a theme to be applied to the entire Web
Specify the information for Web site publishing
site in the Themes pane of the Theme tab. A
in the Publish tab. Publishing means uploading
preview of the selected theme appears in the
the Web site files to a Web sever.
Preview pane.
1. Select a Web sever in the Remote Sites pane of
1. Double-click ‘Arts’ group in the left side of the
the Site Wizard – Publish tab.
Themes list in the Site Wizard – Theme tab.
2. Themes in the ‘Arts’ group appear. Select the

‘Painting’ theme.
2. Click Modify….
3. Click Next.

3. In the Remote Site dialog box, enter User name, The Site tab in the Site Manager appears only in
Password and URL. Click OK. case you open the Site file (*.wej). This site file
contains the information on the entire Web site.
The Site Manager runs as the result of running

the Site Wizard, because the Site files are made
up of HTML file. In the Site tab of the Site
Manager, the navigation structure of site appears
as below.
4. Click Finish.
5. In the Information tab, the dialog box asking you to
make new folder appears if the specified folder
does not exist. To create a new folder, click Yes.
‘Crystal’s Inner Space’ on the top indicates the
[Looking around the site] Site file and sub categories show the navigation
When the site is created, the Site Manager runs name of the six HTML files consisting the site.
automatically and shows the structure of the
When double-clicking ‘Crystal’s Inner Space’,
homepage made with the Site Wizard.
the corresponding file opens in the Edit window
as below.
The Site Manager enables you to manage various

aspects of the site from creating to publishing.
The Site Manager is indicated with an extra icon Setting up the window size
( ) on the The image shown above has the window size of
Windows task bar. 800 x 600 pixels. You can change the window
size by selecting the [View > Window size] menu
command.

3 Changing the Site Structure
In the Site Manager, you can modify the site structure created by the Site Wizard with ease. The
Navigation bar is created automatically when a site is created with the Site Wizard.
Using the Site tab in the Site Manager, you can Navigation bar is inserted automatically in each
change the site structure with a few clicks. You Web document created by the Site Wizard.
can move the position of ‘Links’ to the rightmost Navigation bar refers to a set of hyperlinks
side as planned. linking to other document in the site. It is created
based on the site structure.
1. Open the Site tab in the Site Manager.
Making the navigation bar manually is not so

2. Drag the document and drop it to the location you simple even for professionals. For beginners, it
want in the site structure. Drag ‘Links’ and drop it
is very complicated and had to manage.
the right side of ‘Album’.
Defining the site structure in the Site Manager,
you can modify the navigation bar automatically.
This feature is very useful because the
navigation bar is updated automatically when the
site structure changes.
3. The site structure is modified. ‘Links’ becomes the In the Structure tab, double-click ‘Crystal’s inner
rightmost document. Space’ to open the document in the Edit window.
You can check the document ‘Links’ has moved
to the rightmost side of the navigation bar.

4 Changing the Filename
Filenames of the Web documents used in a site can be modified in the Site Manager. The Site
Manager lets you manage the files flexibly and with ease, because the hyperlinks connecting to
each document is updated automatically when the filename is changed.
Now, let’s change a filename of the document as The name of the file included in the site can be
we planned before. modified in the Site Manager. You can change the
When you select a document in the Structure tab filename of ‘Music’ from ‘favorite.html’ to
of the Site Manager, the filename of the selected ‘music.html’ by taking the following steps.
document turns into gray in the left Local file list. 1. Select ‘favorite.html’ in the Local pane.
For example, the filename of ‘music’ document 2. Enter the filename. Rename ‘favorite.html’ to
is favorite.html’. ‘music.html’ and press <Enter>.
3. The message confirming whether to change
hyperlinks appears. Click OK.
4. A message appears confirming whether to save the

open files. Click OK.
5. You can check the result by opening the Site

Manager.
If you double-click the navigation name in the

Navigation pane of the Site Manager, the filename
of the document is displayed on the document
tab of the Edit window.
For example, if you double-click ‘Crystal’s Inner
Space’ in the Navigation pane in the Site tab of
the Site Manager, index.htm is opened. ‘Crystal’s In the same way, change the filename of the
Inner Space’ is the navigation name and document as follows.
‘index.htm’ is the filename of this document.
● Crystal’s Inner Space: index.html
● Profile: profile.html
● Music: music.html
● Movie: movie.html
● Album: album.html
● Links: links.html

5 Entering the Text
After you finish building the basic structure of the site, enter text for each page. Open each Web
document in the Edit window of Namo WebEditor and type in the content.
You can edit the document created by the Site 5. If you want just to change lines without inserting an
Wizard. extra line, press <Shift + Enter>. The Line break
1. In the Navigation pane of the Site Manager, mark (↵) appears without an extra line.
double-click Crystal’s Inner Space. A cursor blinks
in the Edit window. The text you type will appear at
the current cursor position.
6. Press <Ctrl> and select the lower cell and delete

the cell by pressing <Del>.
2. Select the navigation bar.
7. In the same way, delete the content of the cell of

3. Enter the text of the first page of the homepage.
the mid-portion of the document.
Navigation bar is deleted and the text is inserted
instead.
4. If you press <Enter>, the Paragraph mark (¶)

appears and an empty line is inserted between the
paragraphs. At this time, an empty line is inserted
between the lines unlike the case you use a word 8. Select the horizontal line below and press <Ctrl+C>
processor. to copy.
9. Click the upper part of the text and press <Ctrl+V>

to paste the horizontal line.

6 Changing the Paragraph Formats
You can modify the paragraph formats using Paragraph Format, CSS, Align Options and various
Indentations.
Paragraph formats and styles can be modified by 5. Select ‘Namo-sublist’ in the CSS Style drop-down
using the Formatting toolbar. To define list. ‘Namo-sublist’ is a pre-defined style for each
paragraph styles, use the paragraph format with theme. When the Web document to which a theme
CSS Style. is applied opens, ‘Namo-sublist’ appears.
1. Select the [View > Rulers > Show All] menu

command to view the rulers.
Changing the Paragraph Formats

2. Place the cursor at the horizontal line and select In case of a long text with several lines and if
Align Center . you changed the lines using the <Ctrl + Enter>,
the text will be regarded as a single paragraph
and the style of the entire text will be changed.
Using the Layout Guides

Click the ruler and drag the mouse into the edit
window and a line indicating a layout guide is
displayed. Layout guides help align document
3. Select the text and align the text to the left. elements.
4. Place the cursor at the text and drag the indentation

tab and drag as you want.

7 Modifying the Character Formats
Character formats includes font type, font size, font color, text background color, font style, and so
on. You can apply various kinds of styles to the document by changing the character formats of the
document.
To change the character formats, you should first You can hide the actual fonts in the Font drop-
select the text to which you intend to apply the down list by deselecting Display actual fonts in
desired format. font menu in the Edit tab in the Preferences
1. Select the text as a block that you want to modify.

dialog box.
1. Select the [Tools > Preferences…] menu
command.
2. Open the Edit tab in the Preferences dialog box.
3. Disable Display actual fonts in font menu.
2. Select the desired font from the Font drop-down
menu on the Formatting toolbar. In the Font drop-
down menu, the shape of each font is shown as
well, allowing you to confirm the font style. Select
‘Verdana’ from the Font drop-down list.
3. Choose the font size from the Font Size drop-down 4. The actual fonts are not displayed in the Font drop-
list. Specify the font size as ‘8pt’. down list.
4. The character format of the selected text is changed.

Removing character formats
To remove all the character formats, select text
and click Clear Character Format on the
Standard toolbar.

8 Creating Hyperlinks
A hyperlink is a page element, which links to another Web page or elements. Namo WebEditor lets
you easily create and manage hyperlinks. You can also create a hyperlink for E-mail.
You can create a hyperlink on an image or words. 6. In the Create Hyperlink/Hyperlink Properties
Let’s make a hyperlink with Namo WebEditor. dialog box, click OK.
You can specify an E-mail hyperlink in the

1. First select the text or image that you want to use
Create Hyperlink/Hyperlink Properties dialog box.
as a hyperlink.
1. Select ‘Crystal’ in the copyright information.
2. Click Create Hyperlink on the Standard

toolbar or press <F9>.
3. In the Create Hyperlink/Hyperlink Properties
2. On the Standard Toolbar, click Create Hyperlink dialog box, select E-mail Hyperlink and select
or press <F9>. ‘crystal@namo.com’ on the Address drop-down list.
4. Click OK.
3. In the Create Hyperlink/Hyperlink Properties
dialog box, specify the target file. If you want to link
a page in your site, click the Site… button.
Preview
When you move the mouse-pointer over the
4. In the Browse dialog box, select ‘profile.html’ part linked as a hyperlink, the pointer turns into
a hand. You can preview a document using
Namo WebEditor's Preview tab.
5. Click OK.

9 Creating Tables
Tables in a Web document play two very important roles. First, it is a way to present information
systematically. Second, it works as a gridline for the document layout.
Using tables, you can create a consistent-looking 4. The 1x2 table is inserted. Place the cursor inside
HTML document. Let’s edit a document the table. The table border turns into blue. This blue
(profile.html) with tables. border indicates that the table is currently selected.
This does not appear in the Web browser. Right-
1. Open ‘profile.html’ in the Edit window by double-
click the table and select {Table Properties…} in
clicking from the Structure pane in the Site
the shortcut menu.
Manager.
5. In the Table Properties dialog box, change the

Alignment to ‘Center’ and the Borders Type
‘Hide’. Click OK.
2. Select the contents input by the Site Wizard and

press <Del> to remove.
6. The table properties are changed. When you modify

the Border Type to ‘Hide’, the border appears with
a dotted line in the Edit window. It does not appear
on the Web browser.
3. Click the Create Table button on the Standard

toolbar. Drag on the miniature table that appears
below the Create Table button and release the
mouse button when the table size becomes 1x2.
Show/Hide Table Gridlines
If you click Show/Hide Table Gridlines on the
Standard toolbar, a table with '0' border
thickness will appear with gray dotted lines in
the Edit window.

10 Inserting Images
Images in a Web document are important for displaying visual elements. Insert images to give
your Web document a stylish look.
You can create a visual document by applying 4. Click OK. The image is inserted where the cursor is
colors to the objects such as text, table, and layer, located.
or by inserting images. Here we will insert
photographs.
To insert an image in the Web document, take
the following steps.
1. Place the cursor at the position where you want to
insert an image.
5. You can show the description of the image as

below.
2. Click Insert Image on the Standard toolbar.

3. In the Image Properties dialog box, insert the
filename and path of the image. You can also
specify the image file using the Browse... button.
6. Double-click the image in the Edit window.

7. In the Image Properties dialog box, enter the text
to show when you place the mouse-pointer over the
image in Alt text.
8. Click OK.
9. Check whether the alt text works properly by

switching to the Preview tab.

11 Setting the Transparent Color
The Set Transparent Color feature of Namo WebEditor lets you insert an image into a Web
document without worrying about the mismatch of the document background color and the image
background color.
It happens that unnecessary borders of an image 3. The mouse pointer turns into . Click the part to
appear as below as the border color does not make transparent with .
match the document background color.
In such case, you can apply the transparent color

4. In the Save Image With Transparent Color dialog
to the border.
box, enter the filename in the Save as text box.
Select Interlaced GIF to make the image gradually
become clear when it is loaded.
You can select a color from the colors making up

the image as well as from the background color,
and set the color as a transparent color. The
image, to which the transparent color is applied,
is saved as a GIF image.
5. Click OK.
To set a transparent color, take the following
steps. 6. The background of the image becomes transparent.
1. Select the image whose background is to be made

transparent.
2. Right-click the image and select [Image > Set

Transparent Color] in the shortcut menu.

12 Inserting Theme Objects
You can create a consistent, stylish page by inserting Theme objects to a Theme. Theme objects
include horizontal lines, bullet images, navigation images and etc that are designed to fit the theme
background.
Bullets, horizontal lines, and decorated text (Hot, 3. In the Insert Theme Object dialog box, select the
New, Cool) are often used to highlight specific image you want.
content.
However, it is not so easy to find an image that

goes well with the current theme background.
Using theme objects can be a solution in this
situation. Theme Objects are pre-designed, 4. Click OK. The selected theme object is inserted.
frequently used elements, which fit the style of
the document. Using Theme Objects relieves you
of the manual work to find the images that
match the document background.
The 'Painting' theme has been applied to
profile.html, which has been created by the Site
Wizard.
1. Place the cursor at the position where the theme

object should be inserted.
5. Insert as many theme objects as you want in the

same way.
2. Select the [Insert > Site Elements > Theme

Objects…] menu command.

13 Creating Bookmarks
A bookmark is an invisible marker that can be placed anywhere in a Web document and that can
be referenced by a hyperlink. A bookmark lets site visitors jump to a specific location in a Web
document.
Hyperlinks let site visitors jump to the beginning 3. In the Bookmark dialog box, enter 'top' as the
point of a document. If you want to let the bookmark name and click Add.
visitors jump to the other positions, you should
use bookmarks. To do this, first create a
bookmark and create a hyperlink linked to that
bookmark.
Bookmarks are especially useful when you have
a long document, which cannot be read with one
or two scrolls. You can create a hyperlink, which
lets you move to the top of the document when
you click the theme object at the bottom of
profile.html. 4. Click the Close button and the bookmark is
[Creating a Bookmark] inserted.
1. Place the cursor at the position where you want to [Creating a Hyperlink to the Bookmark]
insert a bookmark. Here we select the banner at the 1. Select the text or image to which you want to
top of the document. apply a hyperlink. Select the theme object at the
bottom here.
2. Press the <F9> key.
3. In the Create Hyperlink dialog box, select 'top'
from the Bookmark drop-down menu.
2. Select the [Insert > Bookmark…] menu

command.
4. Click OK.
5. Check whether the bookmark functions properly
by switching to the Preview tab.

14 Inserting the Smart Buttons
You can easily create paragraph and table titles using Smart Buttons. A Smart Button refers to a
vector-based image of Namo WebEditor. As it is vector-based, resizing does not worsen the quality
of the image. You can also modify the color and text of the button.
You can use the Smart Button feature to create 5. Place the cursor at the position where the Smart
colorful, vector-based buttons and banners that Button should be inserted and click Insert Smart
can be resized without any loss of sharpness and Button on the Standard Toolbar.
edited at any time, which is not the case of 6. The Smart Buttons tab of the Resource
bitmap images. You can edit music.html using Manager opens. Select the Labels folder on the
the Smart Button feature by taking the following left pane and double-click the ‘New’ button on the
steps. right pane.
1. Open 'music.html' in the Edit window by double-
clicking the document in the Navigation pane of the
Site Manager.
7. The button is inserted in the Edit window.
2. Delete the content created by the Site Manager.
3. Insert text and edit it as you wish.

4. Place the cursor at the position where the Smart
Button should be inserted and click Insert Smart
Button on the Standard Toolbar.

15 Editing the Smart Buttons
You can create your own Smart Button by editing text, changing button and border colors.
You can resize the button easily by dragging one 5. Click OK. The text is modified.
of the resize handles of the button inserted in the
Edit window of Namo WebEditor.
6. Double-click the Export Area Tool on the Tool

Palette.
You can also change the button text or color by

double-clicking it. To change the properties of a
Smart Button, take the following steps.
[Editing the Button Text]
1. Resize the button by dragging a resize handle of
the Smart Button inserted in music.html.
7. The export area is set to include the minimum
button area.
8. Click the Save button and exit WebCanvas.

9. The button text is modified in the Edit window of
Namo WebEditor.
2. Double-click the Smart Button.

3. WebCanvas is executed. Double-click the text you
want to modify, here 'ew,' in the Canvas.
4. Enter the text in the Text Box dialog box. Change

'ew' into 'ew Age.'
Specifying the Export Area
Export Area refers to the area displayed in the
Edit window of Namo WebEditor. You can
show only a certain part of the button by
adjusting the Export Area. You can also
specify some extra area. To modify the export
area manually, click the Export Area Tool in
the Palette Tool and drag one of handles of
the dotted rectangle.

[Changing the Button Color] 4. The color of 'N' is changed as specified.
You can modify the button color so that it may

go well with the document background or text
color. 5. Change the color of 'ew Age' in the same way.
1. Double-click the Smart Button inserted in

music.html.
6. Select the yellow circle. Path 0 is selected in the

Layer window.
7. Click the Stroke preview button on the Tool

Palette, and select the desired color.
2. WebCanvas is executed. Select the text ‘N’ whose
color you want to change.
8. The border of the selected path 0 is changed as

3. Click the Fill preview button on the Tool Palette, specified.
and select the desired color.

[Changing the Button Background Color] 4. In the Color Picker dialog box, select the color that
is similar to the background color of the document,
In case the button background color is different
and click OK.
from that of the document, the button displays
the unnecessary background border as below.
In this case, setting the background as

transparent or applying the document
background color to the button background can
be a solution.
Setting the background color as transparent
Applying the document background color to the

button background 5. Select Transparent in the Canvas Properties,
and click OK.
Even setting the transparent button background

may cause unexpected result such as messy
button borders. To avoid this problem, it is
recommended you synchronize the button
background with the document background and 6. The background of the button is set to the
then apply the transparent color to the button. document background color.
1. Double-click the Smart Button on the Edit window

of Namo WebEditor.
2. WebCanvas is executed.
3. Select the [Modify > Canvas Properties…] menu
command. Click Color in the Canvas Properties
dialog box.

[Applying Effects to the Smart Button] 7. The modified Smart Button is displayed in the Edit
window of Namo WebEditor.
You can create different versions of a Smart
Button by applying various effects to it. You can
apply multiple effects as well as a single effect to
a button.
Bevel, Drop Shadow, and Blur effect can be
applied to a Smart Button.
Here we create the 3-dimensional text by
applying the Drop Shadow effect to a Smart
Button.
1. Select the part of the text to which you want to apply
an effect, here select 'ew Age.'
[Saving the Smart Button]
You can reuse the edited Smart Button by saving
it as Smart Button file (*.tng, *.npi).
Save the buttons, edited in the previous sections,
in My Resource folder in the Resource Manager.
1. Double-click the Smart Button in the Edit window.
2. Select the [Effect > Drop Shadow…] menu
2. Select the [File > Save a Copy…] menu command
command.
in the WebCanvas.
3. In the Drop Shadow dialog box, specify the
shadow properties. Select Outer shadow from the
Type drop-down list and set Offset X/Y to ‘-1,’
Color to white, and Opacity to 100%.
3. In the Save a Copy dialog box, enter the filename

in the Filename text box and click Save.
To add the button automatically to the Smart
Buttons tab of the Resource Manager, save the
button in the folder where the Namo WebEditor is
installed (WebEditor 5\lib\AppLib\UserLib\custom
\SmartButton folder).
4. Click OK.
5. The Shadow effect is applied to the Smart Button.

6. Click the Save button and exit WebCanvas.
4. Exit WebCanvas.

You can also copy the button in WebCanvas to You can also import a Smart Button to Namo
the 'My Resource' folder in the Resource WebEditor by using Menu in the Resource
Manager by simply dragging the button. Manager.
1. Select the [Window > Resource Manager…] 1. Select the [Window > Resource Manager…]
menu command. menu command.
2. Open the Smart Buttons tab in the Resource 2. Open the Smart Buttons tab in the Resource
Manager window. Manager window.
3. After selecting the button on the Canvas of 3. Select the folder to which the Smart Button is added
WebCanvas, drag it to the ‘My Resource’ folder in on the left pane.
the Smart Buttons tab of the Resource Manger.
4. Select [Menu > Import File…] in the Resource
Manager window.
4. The Smart Button is added to the Preview pane of

the Smart Buttons tab.
5. On the Open dialog box, specify the Smart Button

file (*.tng) and click Open.
6. The Smart Button is added to the Preview pane of

the Resource Manager.

[Copying the Smart Button] 4. Double-click the Smart Button in the Edit window of
Namo WebEditor. WebCanvas is executed
You can easily copy and paste the Smart Button
automatically.
in the Edit window. You can create multiple
buttons with same style by copying and pasting 5. Select ‘N’ in the Canvas of WebCanvas.
the button and editing the text of each button. 6. In the Text tab of the Properties window, change
the text into ‘J.’
1. Select the Smart Button to copy.
7. Now, select ‘ew Age.’
8. In the Text tab of the Properties window, change
the text into ‘azz.’
9. Click the Save button and close WebCanvas.
10. The modification is applied to the button.
2. Press <Ctrl+C> to copy the button. Place the cursor

at the location where the button is to be pasted.
3. Paste the button by pressing the <Ctrl+V> key.

16 Inserting a Horizontal Line
Horizontal lines are often inserted in a Web document to divide text and images or different
content. You can edit a horizontal line by modifying the properties such as width, height, and color.
A horizontal line is marked by the <HR> tag in a Inserting the horizontal line, marked by the
HTML document. It is often used as a divider in <HR> tag in a HTML document, is different
a document. Insert a horizontal line in from inserting an image of horizontal line. If
music.html by taking the following steps. necessary, insert a line image. The Clip Art
1. Place the cursor where the horizontal line should be
feature of Namo WebEditor 5.5 offers various
inserted. types of horizontal lines.
2. Select the [Insert > Horizontal Line] menu

command.
3. The default horizontal line is inserted in the Edit
window.
In case a theme has been applied to a document,

you can create more stylish document by using
4. To modify the line properties, double-click it. the horizontal line image in the Theme Objects.
5. In the Horizontal Line Properties dialog box,
Horizontal Line Properties
specify size, alignment, and style of the line.
Some attributes of the horizontal line are
properly displayed on in Internet Explorer and
not in Netscape. You can avoid this problem by
creating and inserting an image of the horizontal
line
Horizontal Line Icon

If you often insert horizontal lines, you can
easily use the feature by displaying the Insert
Horizontal Line icon on the toolbar. To display
the Insert Horizontal Line icon, select the [View
> Toolbars > Customize...] menu command.
6. The modified line is displayed in the Edit window.

17 Creating a Layout Table
A Layout table is a type of table, designed for designing layouts using tables. You can easily insert
document elements at the position you want using the Layout Table.
Tables are often used for arranging the position 3. Place the cursor in the table and select the [Table >
of text and images in a Web document. However, Layout Table > Convert Table to Layout Table]
it is not so easy for a novice to work with menu command.
document layout using multiple tables and cells.
4. The table is converted into a layout table. The cells
of the table are also converted into layout cells.
Select the layout cell by click it when the mouse
pointer turns into .
Even a novice can work easily with document

layout using the Layout Table feature. You can
also convert a layout table to a plain table, and
the other way around.
1. Open 'movie.html' by double-clicking the 'Movie
Story' in the Navigation pane of the Site Manager.
5. Resize or move the layout cell and arrange the

content as you wish.
2. Enter your content in the document, created

automatically by the Site Wizard.

18 Inserting the Flash Buttons
Flash Button is one of the powerful graphic features of Namo WebEditor 5.5, which enables you to
insert and edit the Flash files in the button or banner format. Even a novice, who has no knowledge
on the Macromedia Flash, can create various customized buttons.
Flash is very popular on the Web due to its light 4. Click OK.
size and interactive features. However, it is
difficult for a novice to create and insert the 5. In the Flash Button Properties, enter 'Movie
Flash buttons. Database' in the Text text box, set Font to 'Arial
Black', and Size to '22'. Specify the Link as
You can easily insert the Flash button using the
http://www.imdb.com and the Target frame as
Flash Button features of Namo WebEditor. To
‘_blank’.
insert the button at the 'movie.html', take the
following steps.
1. Place the cursor where a Flash button should be
inserted.
6. Click OK. The Flash button is inserted in the Edit

window.
2. Select the [Insert > Flash Button…] menu

command.
3. Select the Buttons folder at the left of the Flash
Buttons tab of the Resource Manager window
and click 'button24.swf' in the right preview pane.
Importing the Flash Button files

You can import external Flash files to the
Resource Manager. Select the [Menu > Import
File...] menu command at the Flash Button tab
of the Resource Manager and specify the
button to import to add the button into the
Flash Button tab of the Resource Manager.

19 Editing the Flash Buttons
You can easily modify the Flash button properties by double-clicking the button in the Edit
window. In case the document background is not white, set the button background to transparent.
You can easily modify the Flash button 5. The same color as document background is
properties by double-clicking the button in the displayed at the Bg button of the Flash Button
Edit window. In case the document background Properties dialog box.
is not white, set the button background to
transparent.
The default color of the Flash button is white
and the unnecessary image border appears in the
document whose background is not white. So it
is recommended to make the button background
transparent.
1. Double-click the Flash button inserted in movie.html.
6. In the Flash Button Properties dialog box, select

Transparent under Bg.
2. In the Flash Button Properties dialog box, click

the Bg icon to open the color palette.
7. Click OK.
8. The background color of the Flash button is
displayed as transparent.
3. Click the dropper in the color palette. The mouse

pointer is changed into .
4. In the Edit dialog box, click the document

background.

20 Applying the Shadow Effect to an Image
The Image Effects feature of Namo WebEditor 5.5 lets you apply various effects to images without
using the professional graphic software. Unlike the complicated graphic tools, the Image Effect
feature offers you easy-to-use, but powerful image editing capabilities.
You can apply the Drop Shadow effect to an 7. In the color palette, click . The mouse pointer is
image to create the 3-dimensional effect. changed into an eyedropper.
Applying Drop Shadow makes an image look 8. In the Edit window, click the document background.
floating and protrude. The document background color appears at the BG
1. Select the image to which you want to apply the color dropdown in the Image Effects dialog box.
Shadow effect.
2. Select the [Tools > Image Effects...] menu

command or [Image > Image Effects...] in the
shortcut menu.
3. In the Image Effects dialog box, click Drop
Shadow .
4. In the Drop Shadow dialog box, set the shadow 9. Click OK.
properties. Select Outer Shadow from the Type 10. Specify the filename and file format and click OK..
drop-down list and set both Offset X and Y to ‘7’.
11. Select the File format and click OK.
Image Toolbar
To show the Image toolbar, select the [View >
Toolbars > Image] menu command.
Canceling the Image Effect

To cancel the image effects applied to the image,
click Cancel Crop/Resize at the right top of the
5. Click the color icon to open the color palette and Image Effects dialog box.
enter '8E4A0B'. Set Blur to '7'. The preview image
is displayed at the right preview.
6. In the Image Effects dialog box, click the BG color
dropdown to open the color palette.

21 Inserting Clip Arts
Clip arts are categorized images which can be used in the Web site development. You can select an
image from Clip Arts and insert it in a Web document.
Image is one of the most important elements in 3. At the Clip Art tab of the Resource Manager,
the document layout. Images inserted in the select Business/Industry from the left category
proper position are essential in the effective and click 'book_01.jpg' at the right preview pane.
presentation of Web content. Namo WebEditor
5.5 offers more than 6,500 high-quality clip arts.
Clip art refers to categorized image files.
Especially a bunch of real photographs have
been added to the clip arts of Namo WebEditor
5.5, which enables you to produce high-quality
Web design.
Clip art files take up much disk size and Namo
WebEditor asks you whether to install the clip
arts in the hard disk. You can use clip arts
without copying the files into your hard disk. In 4. Click OK. The selected clip art is inserted in the
case you do not install the clip arts, you can use Edit window.
them directly from your CD-ROM drive.
To edit links.html using clip arts, take the
following steps.
1. Open 'links.html' in the Edit window and place the
cursor at the position where a clip art should be
inserted.
In case the clip arts have not been installed,

select the [Tools > Preferences...] menu command
and specify the clip art folder of the program CD
at the Edit tab of the Preferences dialog box.
Insert as Background Image

You can insert a clip art as a background image
2. Select the [Insert > Image Element > Clip Art...]
by specifying the image and clicking the Insert
menu command or click Insert Clip Art... on
as Bg button.
the Standard toolbar.

22 Applying Various Effects to an Image
You can apply various effects to an image. You can make the image border blurry. You can also
crop and resize the image as you wish.
It often happens that the downloaded images or

photos are too big or just the specific part of the
image is needed for the document. It also
happens that you want to apply different effects
to images for the stylish layout. In this case the
Image Effects feature satisfies you.
The Image Effects offers you cropping, resizing,

filtering, and flipping an image. You can do all
these tasks without professional graphic
software.
[Resizing an Image]
To apply effects to an image, take the following
steps. You are likely to resize images while creating
1. Select an image to which the image effects should
visual documents. You can easily resize images
be applied. The resize handles appear around the by mouse dragging in the Images Effects dialog
selected image. box.
1. In case the image is larger than the dialog box,
select Fit in Window from the Zoom drop-down
list.
2. Select the [Tools > Image Effects...] menu

command. The Image Effects dialog box appears.
2. Click the Resize button. The resize handles

are displayed around the image.

3. Resize the image by dragging one of the resize [Blurring the Image Borders]
handles while pressing the <Shift> key. Blurring the image borders is the frequently used
method in editing the scanned photographs. You
can make the images look more stylish using the
blur feature of the Image Effects dialog box.
1. In the Image Effects dialog box, click Crop .
Eight resize handles appear around the image.
4. Click Accept Crop/Resize when the rectangle

covers the desired size. The image is resized.
However, the preview remains the same in case
you have selected 'Fit in Window'.
2. Specify the shape of the rounded rectangle by

adjusting the slide. As the slide is placed to the
rightmost position, the rectangle gets more like an
ellipse.
5. To display the image in real size, select '100%' from

the Zoom drop-down list at the right top.

3. Specify the degree of blurriness by entering a value 2. The image is flipped vertically.
in the Feather text box. The bigger the
value, the larger the range of blurriness becomes.
3. Click the BG drop-down palette and specify the

document background color as the image
background color.
4. Click Accept Crop/Resize . The image is
displayed as a blurry round rectangle.
[Saving the Modified Image]
The edited image can be saved in GIF, JPG, or
PNG format.
1. Click OK in the Image Effects dialog box.
2. In the Filename dialog box, enter the filename and
path in the Save as text box and select JPG under
Save format.
[Flipping an Image]
You can make various versions of an image by
flipping it.
1. Click Flip Horizontal in the Image Effects 3. Click OK. The modified image is inserted in the Edit
dialog box. window.

23 Creating a Photo Album
A Photo Album is a photograph management tool; an enhanced feature of Namo WebEditor 4's
Image Gallery. You can insert multiple images, creating thumbnails for them along with links to
the original images.
With the popularization of digital cameras, it is [Step1: Photo Album - Select Files]
now common to upload digital photographs on
At the first step of the Photo Album, you select
the Web.
files to make up the album. To add image files,
take the following steps.
1. Click Add File... in the Photo Album dialog box.
Using the Photo Album, you can work with

digital photographs in various ways.
To create an image gallery using the Photo
Album feature, take the following steps.
1. Open 'album.html' in the Edit window. Delete the

unnecessary content, created by the Site Wizard.
2. Specify the files you want in the Open dialog box.
2. Place the cursor at the position where the Photo
Album is to be inserted.
3. Click Open.
3. Select the [Tools > Create Photo Album...] menu

command.
4. The Photo Album dialog box appears.

4. Filenames of the selected files appear in the [Step 3: Photo Album-Make Thumbnails]
Filename list box under Original image list. In this step, you specify the sizes of thumbnails
Check the preview and arrange the order, if
and apply various effects.
necessary.
You can apply bevel or shadow effect to
thumbnail images. You can also apply different
kinds of frames to the thumbnails.
1. To make all the thumbnails the same size, select

5. Click Next.
Specify exact size. To create thumbnails in a
specific ratio to the original image size, select
Specify percentage of original size and specify
[Step2: Photo Album - Select Type]
Percentage.
At the second step, Photo Album - Select Type,
you can select the layout style of a Photo Album.
You can have various options like Show image in
the current window, Show image in a new window
respectively, Show image in a new window (the
same window).
1. Select Show image in the current window from

the Type drop-down menu. This option lets you see
the original image in the current browser window.
2. To arrange thumbnail images in a table, check Use
table. 2. Under Thumbnail Effect select the effect you want
to apply to thumbnail images. Check the Preview
while you decide the thumbnail effect.
3. Click Next.
3. Click the Bg drop-down palette and specify the

same color as the document background.

[Specifying the Detail Settings] By default, the thumbnail image has the name of
Click the Detail Settings... button to specify the 'original filename + _tm'. For example, if the
options for the caption, file location, and original image is 'tulip.jpg', its thumbnail is
thumbnail/HTML document file names. You can saved as 'tulip_tm.jpg'.
skip this step if you want to use the default
settings.
1. Click the Detail Settings... button in the Photo
Album dialog box.
The HTML documents are created only when
2. In the Save tab of the Photo Album Detail you have selected Create HTML documents in
Settings dialog box, specify the folder in which to
the Photo Album-Select Type step. The HTML
save the thumbnails and HTML documents and set
document has the filename of 'original image
the naming options.
filename + _view'. For example, if the original
image is 'album.jpg', the HTML document has
the filename of 'album_view.html'.
3. Click OK.
4. Click Finish in the Photo Album dialog box.
5. The status bar displaying the process of creating

photo album appears.
6. The Photo Album is inserted in the document.
7. Switch to the Preview tab and click thumbnail

images to see the original images.

[Editing the Photo Album] To edit a table, use the Table toolbar, or the
Inspector. In case the Table toolbar is not
The Photo Album can be edited more neat and
displayed, select the [View > Toolbars > Table]
consistent using the table editing features.
menu command.
1. Place the cursor in the table, which contains
thumbnails.
2. Select the [Table > Table Properties...] menu To open the Inspector, select the [Window >
command.
Inspector] menu command.
3. In the Table Properties dialog box, specify width,
alignment, and border thickness. To align the table
at the center while displaying no table borders, set
Alignment to 'Center', Border thickness to '0',
and Width to '360 pixel'.
4. Click OK.
5. The modified Photo Album appears in the Edit
window.

24 Applying the Page Transition Effect
You can use special page transition effects and make your homepage more vivid and dynamic.
We have completed basic structure of the 4. Under Advanced page effects, specify Event and
homepage made up of six HTML documents Effect. Set Event to 'Upon leaving the document',
(index.html, profile.html, music.html, Effect to 'Random dissolve', and Duration to '3'
movie.html, album.html, links.html). Page seconds.
transition effects, occurring when you load a
Web page or move to another page, are often
used for creating Web pages with special effects.
This effect is made by inserting specific META
tags. However, using the Document Properties
dialog box, you can apply the effects without
any knowledge on META tags.
1. Open 'index.html', to which the special transition
effect is to be applied, in the Edit window.
2. Select the [File > Document Properties...] menu
5. Click OK.
command.
6. Switch to the Preview window and check whether
3. Click the Styles tab in the Document Properties
the applied transition effect works well.
dialog box.
Page Transition Effect

Page transition effect works only in Internet
Explorer. To apply the same kind of effect to
Netscape, use the special effects of the Script
Wizard.

25 Inserting a Background Music
You can make a background music play as the document is loaded. Wave(*.wav), MIDI(*.mid),
AIFF Sound(*.aif, *.aifc, .aiff), AU Sound(.au, *.snd) files can be used for the background music.
You can insert background music in The background music inserted through the
MIDI(*.mid) format in music.html by taking the Document Properties dialog box is played only in
following steps. Internet Explorer, not in Netscape. To play the
1. Open 'music.html' in the Edit window. music in Netscape also, insert the MIDI object.
2. Select the [File > Document Properties...] menu 1. Select the [Insert > Object > MIDI...] menu
command. command.
3. Click the Styles tab in the Document Properties 2. In the Open dialog box, select the MIDI file(*.mid) to
dialog box. be used as the background music and click Open.
3. The file path is inserted in the Plug-in path field of

the Plug-in Properties dialog box.
4. Specify Size and spacing and Alignment.
4. Specify the sound file by clicking the Browse...

button.
5. Click OK.
5. Specify how many times the music should be
played. To keep the sound playing, select Repeat
Inserting Multimedia Objects
forever. Click to listen to the background
You can insert various multimedia objects such
sound.
as Flash, Shockwave, Quicktime, Windows,
6. Click OK. Media Player, or Real Audio, using the
7. Check whether the background sound plays submenus of the [Insert > Object] menu
properly by switching to the Preview window. command.

26 Inserting Scrolling Text in the Status Bar
You can create dynamic effects using Script Wizard. Namo WebEditor 5.5 offers more than 20
Script Wizard items.
Scrolling text in the status bar is often used to 4. Click Next.

display the welcome message. This is made
5. Enter 'Welcome to Crystal's Homepage' in Text 1,
possible by JavaScript and you should have the 'Have a good time!' in Text 2.
knowledge of JavaScript to insert this effect.
However, using the Script Wizard enables you to
apply frequently used scripts to document
without any knowledge on JavaScript. You can
insert various JavaScript effects to the document
by following the steps of the Wizard.
You can insert moving text in the status bar
using the Scrolling text in the status bar of the
Script Wizard. To add the scrolling text to
profile.html, take the following steps. 6. Click Finish.
1. Open profile.html in the Edit window. 7. Check the scrolling text by switching to the Preview
window.
2. Select the [Insert > Script > Script Wizard....]
menu command or click Insert Script Wizard
Effect … on the Standard toolbar.
3. In the first step, Script Wizard - Select Script,

select Scrollers in the Select a category list box
and Scrolling text in the status bar in the Select
a script list box.

27 Creating a Floating Layer
Inserting a floating layer, which always occupies a specific position in a document, is very useful
for a long document.
You can insert this floating layer using the Float 7. In the Script Wizard - Select Script dialog box,
Layerof the Script Wizard. select Special Effects under Select a category
You can make an object float at a specific and Floating layers under Select a script.
position of a document all the time using the
Floating layer feature of the Script Wizard. This
feature is very useful for the long documents
which need many scrolls for reading.
You can insert a layer floating at the right bottom
of the page by taking the following steps.
1. Open ‘movie.html’ in the Edit window.
2. Select the [Insert > Layer] menu command or click
Insert Layer on the Standard toolbar.
8. Click Next.
3. A layer(Layer1) is inserted in the Edit window.
9. Select 'Layer1' from the Target layer drop-down list
and Bottom right under Float layer location.
4. Drag and drop the Flash button into the layer. The
button is inserted in the layer.
5. Click the layer. Resize the layer to fit the Flash 10. Click Finish.
button size by dragging the resize handle. 11. Switch to the Preview window and check whether
the floating layer works properly.
6. Select the [Insert > Script > Script Wizard...]

menu command.

28 Applying the Page Wipe Effect
You can create a dynamic Web site by inserting page transition effects, which shows the page
gradually as the cover is removed in various types.
The Wipe effect of the Script Wizard defines how 5. Select Entire window as the target area and
to show a document or a layer. The Wipe effect, Puzzle as Wipe effect type. Select brown from the
happening when you enter or leave a specific Wipe color drop-down palette.
Web document, contains various types such as
Puzzle, Venetian blinds, Vertical blinds, Horizontal
Shutter, etc.
To insert the Wipe effect in album.html, take the

following steps.
1. Open 'album.html' in the Edit window.
2. Select the [Insert > Script > Script Wizard....]
menu command or click Insert Script Wizard
Effect on the Standard toolbar.
6. Click Finish.
3. In the Script Wizard - Select Script dialog box,
7. Switch to the Preview window and check whether
select Special Effects under Select a category
the wipe effect works well.
and then Wipe Effect under Select a script.
4. Click Next.
Action
The Script Wizard offers only several step-by-
step effects. To use other effects, use the Action
feature.

29 Editing a Theme
You can easily modify the design of all the pages in a site by editing the theme applied to the site.
You can modify the components of theme elements such as banner, navigation bar, theme objects,
and theme properties.
You can easily change the style of your site by 2. The 'Painting' theme is copied to the 'My Resource'
editing the theme applied to the site. You can folder.
also replace the theme with a new one.
1. Select the [Format > Theme…] menu command.
[Editing Banners]
2. The current theme appears in the Themes tab of
Banners are made up of the Smart Buttons.
Accordingly, you can edit a banner by using
WebCanvas in the same way as you edit a Smart
Button.
1. Double-click the banner of the 'Painting' theme in
the right preview pane of the Themes tab of the
Resource Manager.
3. To modify the theme itself, select another theme

and click OK.
Theme consists of theme components and theme
properties.
Theme Components: Banner, Navigation Bar, Bullet,

Horizontal Lines, and Labels. 2. Edit the banner in WebCanvas. To modify the
banner text, double-click 'Banner Text'.
Theme Properties: Text Color, Font Type, Hyperlink
Color, Background, CSS Style, and Table Style.
You can create your own themes by editing the

existing themes. It is recommended to copy the 3. Modify the font type and size in the Text Box dialog
box and click OK.
original copy to the 'My Resource' folder.
To edit a theme, take the following steps.

1. At the Themes tab of the Resource Manager,
drag and drop the 'Painting' theme to the 'My
Resource' folder.

4. Click the Save button and exit WebCanvas. The 5. In the Sheets tab of the Layers window in
modified banner appears in the preview pane of the WebCanvas, select 'rollover' from the sheet list.
Resource Manager.
[Editing the Navigation Bar]

Navigation bar, one of the theme components, is
made up of the rollover Smart Button. Thus, the
button has three status--normal, rollover, and 6. Modify the text style of the 'Button Label' of the
highlight. navigation bar. Beware lest you move the position
of the text.
normal: the button in the normal state
rollover: the button when the mouse pointer is over it
highlight: the button indicating the currently open 7. Select 'highlight' in the Sheets tab of the Layers
document
window.
1. Double-click the horizontal button navigation bar in
the preview pane of the Resource Manager.
2. Edit the navigation bar in WebCanvas. To modify

the button text, double-click 'Button Label'.
8. Modify the text style of the 'Button Label' of the

3. Modify the font type and size in the Text Box dialog navigation buttons.
box and click OK. 9. Click the Save button and exit WebCanvas. Then
the modified navigation bars appear in the preview
pane of the Resource Manager. Check whether
the rollover works properly by placing the mouse
over the bars.
Bitmap and Vector Shape

4. The button text is modified.
You can replace the bitmap elements in a Theme
by other images. You can also insert vector-
based images in a Theme. You can make a
Theme with different style using this feature.

[Importing Theme Objects] 3. Click Open. The new object appears at the position
the selected object used to be.
A Theme includes theme objects such as bullets,
horizontal line, and decorated text (Hot, New,
Cool) other than banner and navigation bar.
Most of the themes, except the vector theme
containing only Smart Buttons, contain bitmap
files except the banner and navigation bar made
of Smart Button files. Accordingly you can
import any of bitmap files in the hard disk as a
Theme Object.
Theme Objects are pre-designed images
matching the theme style. You can create stylish
and consistent Web pages by inserting You can decorate a theme in various styles using
professionally-designed Theme Objects to a Web the clip arts offered by Namo WebEditor. Namo
page. WebEditor offers various bullets, labels,
horizontal lines, etc.
1. Right-click the Hot label image in the Themes tab The location of clip art files is the
of the Resource Manager. Select Import Theme lib\AppLib\Clipart folder under the Namo
Object... in the shortcut menu. WebEditor installation folder.
For example, if you install Namo WebEditor in
the Program Files folder of your C: drive, clip
arts can be found in C:\Program Files
\Namo\WebEditor 5\lib\AppLib\Clipart.
Labels offered by the Clip Arts of Namo WebEditor 5.5
2. In the Open dialog box, specify the image or Smart

Button file to replace the current object.

[Modifying the Theme Properties] 5. Click Apply and check the modification in the
Preview pane of the Resource Manager window.
A Theme is made up of theme properties such as
text color, font type, colors of hyperlink in
various status, background color, CSS style,
table style, etc. You can edit these properties in
1. At the Themes tab of the Resource Manager
window, right-click the Theme and select Theme
Properties... in the shortcut menu.
6. Click OK. In the dialog box confirming the range of

the theme modification, select All files in the site.
Then, the modification to the theme is applied to all
the documents in the site.
2. In the Theme Properties dialog box, specify Text

and Background. Select font type from the Font
drop-down list.
You can edit the text color in a theme using the

Heading (Heading 1, Heading 2), and List (Parent
list, Child list) in the Theme Properties dialog box.
3. Specify hyperlink color in Hyperlink, Visited link,
and Active link.
The Heading properties apply to the text whose
HTML style is Heading 1 or Heading 2.
4. Specify Heading and List properties.
and Child list style are applied to text

Parent list
whose CSS style is namo-list, namo-sublist.

30 Editing the Navigation Bar
You can create different types of navigation bar by modifying its hierarchy. You can also use
hyperlinks navigation by inserting text navigation bar.
Navigation bar refers to a set of links to each 3. In the Navigation Bar Properties dialog box,
document in a homepage. You can use various uncheck the Include home page option. The pages
types of navigation bar according to the structure included in the current setting are displayed in the
of the site. right Navigation tree preview.
[Excluding the index page from the

Navigation bar]
You can include or exclude the index page
in/from the Navigation bar.
The default navigation bar, inserted in
profile.html, music.html, movie.html,
album.html, links.html, includes the index page,
whose document title is 'Home'.
Navigation bar including the Home page
4. Click OK. Home is removed from the navigation bar.
Site Navigation
To exclude the index page from the navigation [Changing the Separators for the Text
bar, take the following steps. Navigation Bar]
1. Open 'profile.html' in the Edit window. You can create the navigation bar using text or
2. Double-click the navigation bar, from which the
button (Smart Button or Flash Button). The Site
index page should be removed. Manager automatically inserts text navigation bar
at the bottom of the documents in the site.
You can use other separators other than [ ], the
default separator.
To edit the separator of the text navigation bar,

1. Open 'index.html' in the Edit window. [Modifying the Navigation Bar Hierarchy]
2. Double-click the text navigation bar at the bottom of Navigation bar is created based on the site
the document. structure defined in the Site Manager. So you can
create various types of navigation bar based on
how you define the navigation bar and which
3. In the Navigation Bar Properties dialog box, click documents are included in the navigation
beside the Use text radio button. structure.
You can choose various navigation bar types
such as Top level in the structure, Parent level in
the structure, Siblings, Previous/Up/Next, etc. You
can also make the navigation bars for sub-pages
pop-up when you click a link. In the following
steps, the current navigation bar is converted to
the next type.
1. Open 'profile.html' in the Edit window.
2. Double-click the navigation text at the bottom of the

document.
3. In the Navigation Bar Properties dialog box,
select 'Previous/Up/Next' from the Navigation bar
4. In the Navigation Bar Text Setting dialog box, type list.
modify Separator. As you insert the separator, the
preview is displayed right below.
4. Click beside the Use text radio button.

5. Click OK.
6. Click OK again in the Navigation Bar Properties
dialog box. The modified separator is applied to the
text navigation bar.

5. In the Navigation Bar Text Setting dialog box, If you do not want to modify the properties of
modify the Navigation text as below. The inserted navigation bars in other documents, deselect the
text is displayed as navigation text in the document. Apply to all navigation bars of the same style
For example, in case you have Previous/Up/Next included in this site option in the Navigation Bar
in the Navigation Bar properties dialog box and Properties dialog box.
enter Back for Previous in the Navigation Bar
Text Setting dialog box, the navigation bar is [Modifying the Navigation Bar Text
displayed like <Back/Up/Next>. Properties]
You can modify the Navigation Bar text
properties in the same way as you edit plain text.
1. Open 'music.html' in the Edit window.
6. Modify Separator, if necessary, and click OK. 2. Select the navigation bar at the bottom of the
document.
7. In the Navigation Bar Properties dialog box, click

OK. The hierarchy of the text navigation bar is
modified as you have specified.
* The Previous link does not exist because

‘profile.html’ is the first of the navigation structure.
Modifications you made in a document are 3. Modify the navigation bar text using the HTML
applied to all the navigation bars in other Style, Font, Font Size drop-down list and Font
Color drop-down palette on the Formatting toolbar.
documents in a site. For example, if you modify
a navigation bar in profile.html, the modification
is applied to music.html, movie.html,
album.html links.html. You don't need to apply
the same modification to each document over
and over again.
Profile: profile.html
Music: music.html
Movie: movie.html
Album: album.html
Links: links.html

31 Modifying the Document Properties
The title of a document shows in the title bar of the Web browser. You can modify this title in the
Site Manager or in the Edit window.
The title of a document shows in the title bar of To check and modify the document title, take the
the Web browser as follows. following steps.
1. Right-click the document and select {Properties...}
in the shortcut menu. Check the properties of
'profie.html'.
2. The document title is displayed in the HTML tab of
the Properties dialog box. Enter 'Profile' in the
Here we check each document has the proper Navigation title text box.
document title, and modify the title if necessary.
Names displayed in the Navigation pane of the
Site Manager window are the title of each
document. To show each document name in the
title bar of the browser window, you should
change the navigation name of each document as
follows.
index.html: Crystal's Inner Space
profile.html: Profile
3. Click OK. In case a document is opened in the Edit
music.html: Music window, you can modify the document title using
the Inspector.
movie.html: Movie
4. Select the [Window > Inspector] menu command.
album.html: Album
5. Select Document from the drop-down list of the
links.html: Links Inspector.
6. Enter 'Profile' in the Title text box.

32 Checking Links
It is very boring to check all the links in a Website manually. You can check the links automatically
using the check links feature of the Site Manager.
To keep a Web site free from broken links is 2. In the left, select Broken links under Hyperlinks.
very important in Web site management but it is
3. The message asking you whether you want to
also very hard as the size of the Website grows check hyperlinks appears. Click OK.
bigger and bigger. Using the Site Manager in
creating and developing a Website gives you the
advantage of efficient and automatic site
management.
The Report tab of the Site Manager shows the 4. The result is displayed. In case there are broken
resource files by category such as HTML links, the Source files and Target objects are listed.
documents, Image files, CSS files, Flash files, URL,
and Other Files.
5. Check the broken links. To fix the links, double-click

the links.
You can also use the features like checking links, 6. The document including the links opens in the Edit
removing orphan files, and creating a site report window. Fix the links.
in the Report tab of the Site Manager. 7. Check the links once again. For the repeated check,
To check links using the Site Manager, take the click Refresh on the toolbar of the Site
following steps. Manager.
1. Open the Report tab in the Site Manager.

33 Removing Orphan Files
Files, included in the homepage folder yet linked to no file of homepage, are called 'orphan'. You
can remove these orphan files automatically using the Site Manager.
It happens that you cancel insertion of images or 3. Orphan files appear in the right pane. If there is no
multimedia elements. In this case, the source orphan file, no result is displayed.
files remain in the folder unless you remove
them from the Windows Explorer. This type of
files, included in the homepage folder yet linked
to no file of homepage, are called 'orphan'.
Orphan files have no effect on your homepage.
However, they make the file uploading time
longer, and cause the waste of the disk space.
Accordingly, it is recommended you delete
orphan files before you publish your homepage.
4. To remove orphan files, select the files and press
<Del>. You can delete multiple files.
You can automatically locate and delete orphan 5. To check the content of an orphan file, double-click
files in the Report tab of the Site Manager. it.
1. Open the Report tab in the Site Manager. 6. The file is opened in the Edit window. Check
whether the file may be deleted.
7. Open the Report tab in the Site Manager and
delete the orphan files.
Selecting Multiple Files

To select multiple files in the Site Manager, use
the following methods. Click one file and another
file while pressing the <Shift> key to select all the
files between the two files. Click one by one
2. In the left Resource list, select Orphan Files while pressing <Ctrl> to select the clicked files
under Improper Resources. only.

34 Publishing a Site
You can let other people on the net see your homepage by publishing the created site to a remote
server. You can publish files using the Site Manager.
After checking hyperlinks and removing orphan 4. Click Publish. The upload begins and the process
files, publish your homepage. Publishing is the is displayed.
last step of creating a Website.
You need an account and disk space to publish a
homepage. If you have no account available, get
a free account and disk space using the
ISP(Internet Service Provider).
You can publish the site files effectively using
the Site Manager. To publish your homepage files,
1. Select the Publish tab in the Site Manager 5. Once the upload is completed, the right pane shows
window. the file list.
In case you have not specified the publish

information, enter the information by taking the
following steps before you start publishing files.
1. In the Publish tab of the Site Manager, click at
the Remote drop-down list.
2. In the Remote Sites dialog box, select a remote

server and click Modify....
3. In the Remote Site Settings dialog box, enter

2. In the Remote drop-down list at the right, select the User Information and click OK.
remote FTP server. You should input the correct 4. Click Connect....
FTP server information to secure the connection.
5. Once connected to a remote server, publish the
3. In the Local pane, select the files to publish. To files you want to upload.
select all the files, click one file and press <Ctrl+A>.
Selecting files to publish
You can select various ways of publishing using
menus such as Select All, Select Open, Select
Modified, Select Publish Failed in the Site
Manager.

Beginners Guide 55 Web

Uploaded by

Document Information

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

Beginners Guide 55 Web

Uploaded by

Copyright:

Available Formats

Namo WebEditor 5.

Namo Interactive Inc.

Namo WebEditor contains compression code licensed from info-ZIP.

About This Beginner’s Guide ......................................................................................5

Planning a Homepage ...............................................................................................6

1. Installing Namo WebEditor 5.5...............................................................................7

2. Using the Site Wizard .......................................................................................... 10

3. Changing the Site Structure ................................................................................. 13

4. Changing the Filename ........................................................................................ 14

5. Entering the Text................................................................................................. 15

6. Changing the Paragraph Formats ......................................................................... 16

7. Modifying the Character Formats.......................................................................... 17

8. Creating Hyperlinks ............................................................................................. 18

10. Inserting Images ............................................................................................... 20

11. Setting the Transparent Color............................................................................. 21

12. Inserting Theme Objects ................................................................................... 22

13. Creating Bookmarks .......................................................................................... 23

14. Inserting the Smart Buttons ............................................................................... 24

15. Editing the Smart Buttons .................................................................................. 25

16. Inserting a Horizontal Line ................................................................................. 31

17. Creating a Layout Table ..................................................................................... 32

18. Inserting the Flash Buttons ................................................................................ 33

19. Editing the Flash Buttons ................................................................................... 34

21. Inserting Clip Arts.............................................................................................. 36

22. Applying Various Effects to an Image ................................................................. 37

23. Creating a Photo Album..................................................................................... 40

24. Applying the Page Transition Effect .................................................................... 44

25. Inserting a Background Music ............................................................................ 45

26. Inserting Scrolling Text in the Status Bar............................................................ 46

27. Creating a Floating Layer ................................................................................... 47

28. Applying the Page Wipe Effect ........................................................................... 48

29. Editing a Theme................................................................................................ 49

30. Editing the Navigation Bar ................................................................................. 53

31. Modifying the Document Properties.................................................................... 56

32. Checking Links .................................................................................................. 57

33. Removing Orphan Files...................................................................................... 58

34. Publishing a Site................................................................................................ 59

● Chapter 2. Using the Site Wizard ~ Chapter 4. Changing the Filename:

● Chapter 5. Entering the Text~ Chapter 23. Creating a Photo Album:

● Chapter 29. Editing a Theme ~ Chapter 34. Publishing a Site:

Namo WebEditor 5.5 Beginner’s Guide | 5

● Profile: Personal profile with a photograph

Profile Music Movie Album Links

● Starts with an Index page introducing the homepage.

Defining filenames is recommended for easy management of a homepage. A homepage is composed of

6 | Namo WebEditor 5.5 Beginner’s Guide

[System requirements] 3. Follow the on-screen instructions to complete the

● 32 MB RAM (Windows 95/98/Me) or 64 MB

● Hard disk space:

● CD-ROM drive (for installation)

● Resolution 800 x 600 or higher (Monitor

[Installing Namo WebEditor 5.5]

Namo WebEditor 5.5 Beginner’s Guide | 7

10. Installation is in process and the installation status

Namo WebEditor 5.5 CD-ROM.

8. Specify a folder name you want in Program Folder.

8 | Namo WebEditor 5.5 Beginner’s Guide

2. Open the Control panel and select Add/Remove

3. From the list of all installed programs, select Namo

5. A message confirming file deletion appears.

7. The dialog box asking you whether to restart the

Namo WebEditor 5.5 Beginner’s Guide | 9

2. Select the ‘Home’ document and click Rename.

10 | Namo WebEditor 5.5 Beginner’s Guide