U.S. patent application number 09/153536 was filed with the patent office on 2002-02-21 for draw-based editor for web pages.
Invention is credited to ARORA, GAGAN, ARORA, SAMIR, BROWN, GREGORY, FRID-NIELSEN, MARTIN, LAKSHMINARAYAN, RAJAGOPAL.
Application Number | 20020023111 09/153536 |
Document ID | / |
Family ID | 24762600 |
Filed Date | 2002-02-21 |
United States Patent
Application |
20020023111 |
Kind Code |
A1 |
ARORA, SAMIR ; et
al. |
February 21, 2002 |
DRAW-BASED EDITOR FOR WEB PAGES
Abstract
A method and apparatus for a draw-based Web page editor in which
the user uses a "drag and drop" interface to add, delete, and move
display elements to define the layout of a Web page. The present
invention automatically generates an initial layout for each page.
This initial layout contains display elements that represent the
links between pages of the site. After the user has defined the
layout of the Web page, the user "publishes" the page. The publish
function automatically generates HTML for the page in accordance
with the display elements of the page, yielding a true WYSIWYG
page.
Inventors: |
ARORA, SAMIR; (SAN JOSE,
CA) ; ARORA, GAGAN; (SANTA CLARA, CA) ;
LAKSHMINARAYAN, RAJAGOPAL; (LAFAYETTE, GA) ; BROWN,
GREGORY; (SUMTER, SC) ; FRID-NIELSEN, MARTIN;
(SANTA CRUZ, CA) |
Correspondence
Address: |
DARREN E. DONNELLY
MC CUTCHEN, DOYLE, BROWN & ENERSEN, LLP
THREE EMVARCADERO CENTER
SAN FRANCISCO
CA
94111
US
|
Family ID: |
24762600 |
Appl. No.: |
09/153536 |
Filed: |
September 16, 1998 |
Related U.S. Patent Documents
|
|
|
|
|
|
Application
Number |
Filing Date |
Patent Number |
|
|
09153536 |
Sep 16, 1998 |
|
|
|
08687974 |
Jul 29, 1996 |
|
|
|
5845299 |
|
|
|
|
Current U.S.
Class: |
715/234 ;
715/243 |
Current CPC
Class: |
G06F 40/166 20200101;
G06F 40/143 20200101; G06F 40/137 20200101; G06F 40/117
20200101 |
Class at
Publication: |
707/513 ;
707/500 |
International
Class: |
G06F 017/24 |
Claims
What is claimed is:
1. A method of allowing a user to define a World Wide Web page
comprising the steps, performed by a data processing system, of:
displaying a plurality of page display elements on a display
device, the display elements forming a page layout on the display
device; receiving an indication that the user wants to add a new
display element to the page at a first position on the page; adding
a new draw data structure in a memory of the data processing system
for the new display element to a plurality of other draw data
structures, the draw data structures corresponding to the plurality
of page display elements, where the new draw data structure
includes data representing the first position; and generating HTML
that substantially reflects the displayed page layout on a pixel by
pixel basis in accordance with the draw data structures.
Description
RELATED APPLICATION
[0001] This patent incorporates by reference and claims priority
from U.S. application Ser. No. 08/687/971 of Samir Arora et al.,
filed concurrently herewith, and from U.S. application Ser. No.
08/687,974 of Samir Arora et al., filed on Jul. 29, 1996.
APPENDIX
[0002] Appendix A provides an example of computer code for a draw
object for text and a draw object for an image. This Appendix forms
a part of the specification and is herein incorporated by
reference.
FIELD OF THE INVENTION
[0003] This application relates to the World Wide Web and, in
particular, to a method and apparatus for easily generating web
pages on a "What You See is What You Get" (WYSIWYG) basis.
BACKGROUND OF THE INVENTION
[0004] The past several years have seen an explosive growth of the
World Wide Web ("the Web"). The Web is built around a network of
"server" computers, which exchange requests and data with each
other using the hypertext transfer protocol ("http"). A human
designer designs the layout of a Web page, which is then specified
using HTML ("Hypertext Markup Language"). Several versions of HTML
are currently in existence. Examples include HTML versions 2.0 and
3.0, as specified by the WWW Consortium of MIT. Netscape
Communications Corp. has specified additional HTML features that
extend HTML forms and tables.
[0005] A user views a Web page using one of a number of
commercially available "browser" programs. The browser submits an
appropriate http request to establish a communications link with a
Web server of the network. A typical http request references a Web
page by its unique Uniform Resource Locator ("URL"). A URL
identifies the Web server hosting that Web page, so that an http
request for access to the Web page can be routed to the appropriate
Web server for handling. Web pages can also be linked graphically
to each other.
[0006] The HTML to describe a Web page is often created by hand by
a human being. If the design of the page changes, the corresponding
HTML must be rewritten, which is an exacting process. Although
several conventional HTML editors exist, these editors only allow
the user to specify certain elements of a page and frequently still
require the user to physically enter HTML code. Conventional HTML
editors allow the user to specify the page content and general
layout, but do not provide the user with "What You See Is What You
Get" (WYSIWYG) capability. Thus, the pages generated by
conventional HTML editors look different when viewed by different
browsers.
[0007] A Web "site" consists of a "homepage" and several other
related pages. Each page has corresponding HTML that describes the
appearance and function of the page. For example, the HTML for the
homepage usually contains links to one or more of the other pages
and the other pages often contain respective links back to the
homepage. When the user clicks on a link of the displayed homepage,
the browser requests and displays the linked-to page. Each link
must be designed and coded into the HTML for the page. Thus, for
example, when a human designer decides to remove a link between the
homepage and another page, the HTML for the homepage must be
changed to reflect the removed link. This process is exacting and
requires that the user manually change the link. Moreover, if the
linked-to page has another link back to the homepage, that link may
also need to be changed.
[0008] It is a common problem that not all browsers interpret HTML
code in the same way. For example, some browsers will automatically
center a page title, while others may left justify a page title.
Similarly, horizontal and vertical spacing may vary between
browsers made by different companies.
[0009] It is usually desirable to have a consistent style for all
pages of a site. When the user hand codes the HTML for each page of
a site, it is difficult for the user to remember to use a
consistent style. In addition, if the user decides to change the
style of a site, each page must be changed individually.
SUMMARY OF THE INVENTION
[0010] The present invention overcomes the problems and
disadvantages of the prior art by using a drag and drop interface
to allow a user to easily design a Web page. The user moves display
elements to define the appearance of a web page. When the user
clicks/selects a "publish" button, HTML code is automatically
generated. A preferred embodiment of the invention generates an
HTML table in accordance with the display elements. The number and
size of cells in the HTML table reflects the number and placement
of display elements on the page, yielding a true WYSIWYG Web page.
Because the generated HTML code is in the form of a table, the HTML
will cause most browsers to display a page that has substantially
the same layout, proportionality, coloring, and spacing as the
layout of the page displayed by the page draw editor software.
[0011] Initially, the present invention automatically generates a
layout that is used for each page unless overridden by the user.
Each page is initially generated in accordance with "style"
parameters chosen by the user.
[0012] In accordance with the purpose of the invention, as embodied
and broadly described herein the invention is a method of allowing
a user to define a World Wide Web page comprising the steps,
performed by a data processing system, of: displaying a plurality
of page display elements on a display device, the display elements
forming a page layout on the display device; receiving an
indication that the user wants to add a new display element to the
page at a first position on the page; adding a new draw data
structure in a memory of the data processing system for the new
display element to a plurality of other draw data structures, the
draw data structures corresponding to the plurality of page display
elements, where the new draw data structure includes data
representing the first position; and generating HTML that
substantially reflects the displayed page layout on a pixel by
pixel basis in accordance with the draw data structures.
[0013] Advantages of the invention will be set forth in part in the
description which follows and in part will be obvious from the
description or may be learned by practice of the invention. The
advantages of the invention will be realized and attained by means
of the elements and combinations particularly pointed out in the
appended claims and equivalents.
BRIEF DESCRIPTION OF THE DRAWINGS
[0014] The accompanying drawings, which are incorporated in and
constitute a part of this specification, illustrate several
embodiments of the invention and, together with the description,
serve to explain the principles of the invention.
[0015] FIG. 1 is a block diagram of a computer system in accordance
with a preferred embodiment of the present invention.
[0016] FIG. 2 is a block diagram showing input and output to and
from page draw editor software of FIG. 1.
[0017] FIG. 3 shows an example of display view before the user has
created any display elements on the page.
[0018] FIG. 4 shows the display of FIG. 3, including a banner,
navigator buttons, and text buttons automatically created by a
preferred embodiment of the present invention.
[0019] FIG. 5 shows the display of FIG. 4 after the user has
dragged and dropped an image and some text into the layout.
[0020] FIG. 6 shows a preview display of the layout of FIG. 5.
[0021] FIG. 7 shows the display of FIG. 5 after the user has
dragged and dropped the text to a different location on the
page.
[0022] FIG. 8 shows a preview display of the layout of FIG. 7.
[0023] FIG. 9(a) shows a detail of a tool window of FIG. 3.
[0024] FIG. 9(b) shows a portion of the tool window displayed in
connection with an Image tool.
[0025] FIG. 9(c) shows a portion of the tool window displayed in
connection with a Forms tool.
[0026] FIG. 9(d) shows a portion of the tool window displayed in
connection with a Draw tool.
[0027] FIG. 10(a) shows a Page tab in a Properties window of FIG.
3.
[0028] FIG. 10(b) shows a Layout tab in the Properties window of
FIG. 3.
[0029] FIG. 10(c) shows a Rectangle tab in the Properties window of
FIG. 3.
[0030] FIG. 10(d) shows a Text tab in the Properties window of FIG.
3.
[0031] FIG. 10(e) shows an ActiveX tab in the Properties window of
FIG. 3.
[0032] FIG. 10(f) shows a Java tab in the Properties window of FIG.
3.
[0033] FIG. 10(g) shows a Shockwave tab in the Properties window of
FIG. 3.
[0034] FIG. 10(h) shows a Table tab in the Properties window of
FIG. 3 .
[0035] FIG. 11 (a) shows a first pull-down menu.
[0036] FIG. 11 (b) shows a second pull-down menu.
[0037] FIG. 11 (c) shows a third pull-down menu.
[0038] FIG. 12 is a flow chart showing steps performed by the page
draw editor software to define a page layout.
[0039] FIG. 13 is an example showing an initial internal
representation stored in a memory of objects automatically
generated on the page by the page draw editor software for the
layout of FIG. 4.
[0040] FIG. 14 is an example showing the internal representation
after some display element have been added by the user.
[0041] FIG. 15 is an example showing the internal representation
after a display element has been moved by the user.
[0042] FIG. 16(a) is an example of a draw object for a page
banner.
[0043] FIG. 16(b) is an example of a first draw object for a
navigator button.
[0044] FIG. 16(c) is an example of a first draw object for a
navigator button.
[0045] FIG. 16(d) is an example of a draw object for a text
button.
[0046] FIG. 17 shows an example of a display used to allow the user
to publish the pages of a site.
[0047] FIG. 18 shows an example of a display used to allow the user
to specify details of how to publish a site.
[0048] FIG. 19 is a flow chart showing steps performed by the page
editor software to publish a page.
[0049] FIG. 20 a flow chart showing steps performed by the page
editor software to publish a normal page.
[0050] FIG. 21 is a flow chart showing steps performed by the page
editor software to publish a stacked page.
[0051] FIG. 22 is a flow chart showing steps performed by the page
editor software to generate initial HTML for a page.
[0052] FIG. 23 is a flow chart showing further steps performed by
the page editor software to generate an HTML table for layout
elements of a page, such as a header, body, and footer.
[0053] FIG. 24 is a flow chart showing steps performed by the page
editor software to generate an HTML table.
[0054] FIG. 25 is an example of steps performed by the page editor
to generate final HTML for a site.
[0055] FIG. 26 is an example of first steps involved in determining
an HTML table size.
[0056] FIG. 27 is an example of second steps involved in
determining an HTML table size.
[0057] FIG. 28 is an example of a matrix generated by the steps of
FIGS. 26 and 27.
[0058] FIG. 29 is a block diagram of how the matrix of FIG. 28 is
used to generate an HTML table, which a browser uses to display a
portion of a page.
[0059] FIG. 30 shows an example of a Style display.
[0060] FIG. 31 shows an example of an Assets Display.
[0061] FIG. 32 shows an example of a plurality of link dialog
boxes, showing a structural link, an internal link, and an external
link.
[0062] FIG. 33 is a flow chart showing updating of structural links
for a page.
[0063] FIG. 34 shows an example of a dialog box used to create a
data object.
[0064] FIG. 35 shows a block diagram of an example of a stacked
page and a series of data pages.
[0065] FIG. 36 shows an example of an icon for a stacked page.
[0066] FIG. 37 shows an example in which a user has opened the Tool
window and selected the DataList tool.
[0067] FIG. 38 shows a Properties window with a DataList tab opened
for the DataList tool and the DataList window.
[0068] FIG. 39 shows a further example of a Properties window with
a DataList tab.
[0069] FIG. 40 shows an example in which a user has opened the Tool
window and selected the DataField tool.
[0070] FIG. 41 shows a Properties window with a DataField tab
opened for the DataList tool.
DETAILED DESCRIPTION OF PREFERRED EMBODIMENTS
[0071] Reference will now be made in detail to a preferred
embodiment of the invention, an example of which is illustrated in
the accompanying drawings. Wherever possible, the same reference
numbers will be used throughout the drawings to refer to the same
or like parts. ps I. System Overview
[0072] FIG. 1 is a block diagram of a computer system 100 in
accordance with a preferred embodiment of the present invention.
Computer system 100 includes a CPU 102; a memory 104; input/out
lines 105; an input device 150, such as a keyboard or mouse; and a
display device 160, such as a display terminal. Computer 100 also
includes an input device 161, such as a floppy disk drive or CD ROM
reader, that reads computer instructions stored on computer
readable medium 162, such as a floppy disk or a CD ROM. These
computer instructions are the instructions of e.g., page draw
editor software 120. Memory 104 includes page draw editor software
120, draw objects 130, HTML 0, and image files 0, etc., as
described in further detail below.
[0073] A person of ordinary skill in the art will understand that
memory 104 also contains additional information, such as
application programs, operating systems, data, etc., which are not
shown in the figure for the sake of clarity. It also will be
understood that computer system 100 can also include numerous
elements not shown in the Figure for the sake of clarity, such as
disk drives, keyboards, display devices, network connections,
additional memory, additional CPUs, LANs, internet connections,
input/output lines, etc.
[0074] In the following discussion, it will be understood that the
steps of methods and flow charts discussed preferably are performed
by processor 102 executing instructions stored in memory, such as
instructions of editor software 120. Editor software 120 can be
initially loaded into memory from computer readable medium 162. It
will also be understood that, although the following paragraphs
describe an implementation of the present invention using
object-oriented programming techniques, the invention is not
limited to any such techniques and may be implemented using any
appropriate techniques for implementing the functionality described
herein. The described embodiment is written in the C++ programming
language and runs under the Windows 95 operating system, but the
invention is not limited to any particular programming language or
operating system. ("Windows 95" is a trademark of Microsoft
Corporation.)
[0075] II. Creation and Manipulation of a Web Page Layout
[0076] FIG. 2 is a block diagram showing input and output to page
draw editor software 120 of FIG. 1. Page draw editor 120 includes a
portion 202 that creates and manages a page layout and a portion
204 that publishes the page. The user uses a drag and drop
interface to define the page layout. Pages can include new text and
images or preexisting text and images. The user initiates publish
portion 204 by clicking on a "publish" button displayed by the
editor 120, as described below. Publish portion 204 generates HTML
for the page, as also described below. The page is translated into
an HTML table that yields a WYSIWYG Web page when displayed by a
browser.
[0077] A. Creating and Modifying Display Elements of a Page
Layout
[0078] FIG. 3 shows an example of page view displayed on display
device 160 before the user has created any display elements on the
page. The display of FIG. 3 is opened when the user indicates
(using a pull-down menu or the like) that he wishes to create a new
page. In the described embodiment, the user clicks on a "Page"
button 304 in the navigator bar. The page draw editor allows the
user to design a page just as it will appear when viewed with a
browser. The user uses the page draw editor to add text graphics,
and other display elements to the page. The user can then rearrange
display elements by dragging and dropping them to a new location,
placing the display elements exactly where they will eventually
appear with pixel level accuracy.
[0079] A title 301 of the page defaults to "Untitled" if the user
has not yet named the page. FIG. 3 includes a grid of lines. These
lines are shown as dotted lines, but can also be solid lines. In
the described embodiment, the grid also can be turned off so that
no grid is displayed. The grid preferably is not included in the
generated HTML In FIG. 3, the grid has a granularity of 24.times.24
pixels in accordance with a default width as shown in a Properties
window 350, as discussed below.
[0080] The display of FIG. 3 includes a plurality of buttons: a
"Site" button 302, "Page" button 304, a "Style" button 306, an
"Assets" button 308, and a "Publish" button 310. The display also
includes a "Preview" button 312, a "New Page" button 3, a "Goto"
button 316, and a "Last" button 318. Site button 302 causes
execution of a "site editor" as described in U.S. application Ser.
No.______ of Samir Arora et al., filed concurrently herewith, and
entitled "Hierarchical Structure Editor for Web Sites." Style
button 306 and Assets button 308 are discussed below. New Page
button 314 causes a page such as the page of FIG. 3 to be
displayed.
[0081] Goto and Last buttons 316, 318 transfer control to a most
recent display or a user-selected previous display, in a manner
known to persons of ordinary skill in the art. The described
embodiment keeps a "history" of execution of page draw editor 120
in order to implement the Goto and Last buttons.
[0082] The display of FIG. 3 further includes a Secondary navigator
bar 365, including a "Layout View" button 320 and an "HTML Source"
button 322. When the user dicks on Layout View button 320, a
display having a format such as that of FIGS. 3-8 is displayed.
When the user clicks on HTML Source button 322, a display (not
shown) shows the HTML that is generated for the current page
layout. Button 322 is omitted in an alternate embodiment. Other
views have other buttons and toggle switches on the secondary
navigator bar, as required by the particular view. Secondary
navigator bar 365 contains a dotted line extending vertically
downward from a currently clicked button (e.g., Page button 304) to
a selected one of the buttons on secondary navigator bar 365. As
the user selects different buttons on the primary and secondary
navigator bars, the dotted line is redrawn to connect the currently
selected buttons. This feature makes it easy for a user to see
which buttons are currently selected and to mentally connect the
functions of the primary and secondary navigator bars.
[0083] FIG. 3 also shows "Properties" window 350 in which a "View"
tab is selected. Properties window 350 includes three tabs: a
"View" tab 352, a "Page" tab 354, and a "Layout" tab 356. The
values shown in Properties window 350 are values for the current
page. Properties window 350 currently shows view properties because
View tab 352 is selected. FIGS. 10(a) and 10(b) show examples of
the Page and Layout tabs, respectively. A fourth tab (see, e.g.,
FIG. 10(c)) is a context sensitive tab and represents various
properties, depending on the tool being used. Other tabs may appear
in other implementations.
[0084] The values shown in Properties window 350 of FIG. 3 are the
default values for viewing a newly created page. Properties window
350 includes a "Measurement Unit" area 360, a "Element border" flag
area 362, "Grid Width" and "Grid Height" area 364, 366, a "Show
Grid" flag 365, font size areas 368, 370, a "Color" area 372, a
"Horizontal Splitter" flag area 374, and a "Snap to Grid" flag area
376.
[0085] Thus, in the example, the grid is measured in units of
pixels. Element borders are drawn around each display element on
the display device. A grid of 24.times.24 pixels is displayed. The
specified fonts are used. The page uses the colors described in the
colors area 372. Horizontal splitters such as 380 and 382 are
displayed. The "Snap to Grid" property is turned off. It will be
understood by persons of ordinary skill in the art that page draw
editor software 120 stores values corresponding to this Property
window and each Property window discussed herein in memory 104. All
values in Properties window 350 may be changed by the user. Values
in memory 104 will be changed accordingly.
[0086] The display of FIG. 3 further includes a "Tools" window 324.
As shown in FIG. 9(a), Tools window 324 includes a "cursor" tool
380, a "zoom in" tool 381, and a "zoom out" tool 382. These three
tools have an outward operation similar to "cursor," "zoom in," and
"zoom out" tools known in the art. The "cursor," "zoom in," and
"zoom out" tools are collectively known as "control tools."
[0087] Tools window 324 also contains a "Text" tool 383, an "Image"
tool 384, a "Draw" tool 385, a "Table" tool 386, an "Audio" tool
387, a "Video" tool 388, a "Java" tool 389, an "ActiveX" tool 390,
a Shockwave tool 391, a "Form" tool 392, a "DataList" tool 393, and
a "DataField" tool 394. The Text, Image, Draw, Table, Audio, Video,
Java, ActiveX, Shockwave, Form, DataList, and DataField tools are
collectively known as "content tools." (Java is a trademark of Sun
Microsystems, Inc. Shockwave is a trademark of ShockWave Corp.
ActiveX is a trademark of Microsoft Corporation.) Tools window 324
also includes a plurality of button 395 that contain various
buttons at various time, as discussed below in connection with
various ones of the tools.
[0088] It will be understood that the empty page of FIG. 3 can be
edited in the same manner described below for an existing page.
[0089] FIG. 4 shows the display of FIG. 3, including a banner,
navigator buttons, and text buttons automatically created by a
preferred embodiment of the present invention. The example of FIG.
4 is displayed after the user indicates that he wants to edit an
existing page by preferably: 1) double clicking on an icon for the
page (not shown) or 2) selecting a page icon and clicking "Page"
button 304 of FIG. 3 (not shown). The described embodiment of the
present invention automatically creates certain draw objects in
memory for the page. The automatically created draw objects reflect
links between pages of the site, as described below in the
copending application. The user can easily create and move display
elements on the page, which causes changes to corresponding draw
objects in memory 104.
[0090] The display of FIG. 4 creates a page having three parts: a
header 402, a body 404, and a footer 406. The user can move the
dividers 380, 382 between the header, body and footer as is known
in the art. Moving the dividers adjusts the size of the header,
body or footers on the finished page. The header, body and footers
can also be scrolled. Page draw editor 120 allows individual
scrolling in each of these parts. In the described embodiment, the
page of FIG. 4 is entered from the site view, and automatically
creates display elements of header 402 and footer 406 reflecting
the logical connection of the current page to other pages.
[0091] Header 402 automatically contains a banner 410 and a
plurality of navigator buttons 412. In the example, the banner
contains the name of the selected page ("Products"). Navigator
buttons 412 include buttons for a homepage ("Home button 4"), a
"Welcome" page ("Welcome" button 416), and a "Private" page
("Private" button 418). Navigator buttons 412 preferably include an
image, such as the 3D button image shown in FIG. 4. This image may
be predefined or defined by the user through use of a pop-up
window.
[0092] Thus, in FIG. 4, the navigator buttons 412 automatically
include buttons corresponding to the home page and to the previous
hierarchical level of the page. Alternate implementations of the
present invention automatically display navigator buttons for one
or more of the home page, the parent page, sibling pages, and
children pages. In some embodiments, the user chooses which
navigator buttons are generated automatically by way of a pop-up
site window. The user may add or delete additional buttons and may
move buttons, as described below.
[0093] Footer 406 automatically contains a plurality of text
buttons 428. These text buttons preferably correspond to the
navigator buttons 412. Thus, text buttons 428 include buttons for
the homepage ("Home" text button 430), the Welcome page 452
("Welcome" text button 432), and the "Private" page 454 ("Private"
text button 434). The user may add or delete additional buttons and
may move buttons, as described below. The internal memory
representation of banner 410 and of buttons 412 and 430 are
discussed in detail below.
[0094] FIGS. 5-8 show an example of creation of display element in
a page layout and also show an example of a modification to the
page layout using a drag and drop interface in accordance with the
described embodiment of the preferred invention. FIG. 5 shows the
display of FIG. 4 after the user has dragged and dropped an image
502 and some text 504 into the layout. Specifically, as discussed
in detail below, the user creates image 502 using Image tool 382
and creates text 504 using Text tool 383. In the example, image 502
is a 324.times.216 pixel image originally stored in memory or on a
storage device attached to computer system 100.
[0095] FIG. 6 shows a preview display of the layout of FIG. 5. FIG.
5 is displayed when the user clicks on Preview button 312 of FIG. 3
(or selects "Preview" from a pull-down menu). In order to preview a
site, page draw editor 120 actually generates HTML for the current
layout of the page and stores it at a predetermined (or
user-defined) location. The editor then invokes a browser program
(such as the Netscape Navigator browser, version 3.x, manufactured
by Netscape Communications Corp. of Mountain View, Calif.). The
browser displays a Web page 602 described by the generated HTML
Note that no HTML is generated for dividers 380, 382 and that no
HTML is generated for the outlines around the text and image.
[0096] FIG. 7 shows the display of FIG. 5 after the user has
dragged and dropped the text to a different location on the page.
Specifically, as discussed in detail below, the user places a
cursor on text 504 using input device 150 (such as a mouse) and
drags the text to a new position using input device 150. Movement
of a display element on a display device in accordance with cursor
input is known in the art and will not be described herein. The
draw object associated with text 504 is changed to reflect this
movement as described below.
[0097] FIG. 7 also shows Properties window 350 in which "Layout"
tab is selected. The values shown in Properties window 350 are
values for the current page. Properties window 350 (with a Layout
tab) includes a "Layout Name" area 702, a "Width" area 704, a
"Height " "area" 706, a "Site Style Background" 708, a "Solid
Color" area 710, a "Picture" area 712, a "Head Name" area 7, and a
"Footer Name" area 716.
[0098] Thus, in the example, Layout of FIG. 7 is currently
untitled. The layout is of the specified height and width. The page
uses the type of background described in areas 708-712 (i.e., a
predetermined "Site style background", such as a picture of a
marbled surface) instead of a solid background or a image
background provided by the user. It will be understood by persons
of ordinary skill in the art that page draw editor software 120
stores values corresponding to this Property window and each
Property window discussed herein in memory 104. All values in the
Properties window 350 of FIG. 7 may be changed by the user. Values
in memory 104 will be changed accordingly.
[0099] FIG. 8 shows a preview display of the layout of FIG. 7. As
shown in FIG. 7, the user has dragged and dropped text 504 to a new
location, thus changing the page layout. The Preview function
causes new HTML for the changed page layout to be generated and the
new HTML to be displayed by the browser in window 602. It will be
understood that, in the Preview views of both FIGS. 6 and 8, the
HTML generated for the page causes a browser to display a page that
is pixel-per-pixel the same as the display elements on the display
screen, assuming that the browser supports Netscape version 3.X.
Thus, the user can design a page layout and expect the page to look
exactly as it was designed when the page is displayed by a browser.
Tag 802 is an optional line resulting from HTML generated in the
described embodiment of the present invention.
[0100] 1. The Pull Down Menus
[0101] FIGS. 11(a) through 11(c) show examples of pull-down menus
for the described embodiment of draw page editor 120. FIG. 11(a)
shows an Edit menu having an Undo function, a Cut function, a Copy
function, a Paste function, a Paste Special function, a Delete Page
function (A delete display element function is not shown), an
Options function, a Preferences section, and a Duplicate Layout
function, which duplicates a current page layout (and its
associated draw object data structures) for a new page.
[0102] FIG. 11(b) shows a View pull-down menu, which includes a
Page Properties function that opens, e.g., Properties window 350
with a page tab selected, and Tools Palette function that opens,
e.g., Tools window 324.
[0103] FIG. 11(c) shows a Layout pull-down menu, which includes an
Align Objects function that horizontally, vertically, or centrally
aligns display elements, a Center Objects function that centers
display elements, a Size Objects function that sizes display
elements, an Element Script function, and a Layout script
function.
[0104] 2. The Tools Window
[0105] FIGS. 9(a) through 9(d) show examples of Tool window 324 and
show various icons that are displayed in area 395, depending on
which tool is being used. Some of the tools of the described
embodiment can be thought of as a Swiss army knife; when you select
one, a secondary group of tools appears in area 395, each secondary
tool performing a different function on the same kind of display
element.
[0106] 3. The Text Tool
[0107] When the user clicks on Text tool 383, page draw editor 120
allows the user to enter a text display element. The user uses the
cursor to create and size a text box on the display and then types
text inside it. When text is created, a Text tab shown in FIG.
10(d) is displayed in the Properties window 350. This Properties
window allows the user to enter properties of the text display
element. These properties include whether the text is bold, italic,
or has a strikeout bar, the font, the font size, paragraph
alignment, and whether to use a bullet. The properties further
include whether to use a predetermined "site style" for the text
(i.e., a predetermined font, color, size, etc. stored in memory 104
under a "site style name") or whether to use a user-specified text
color. The user may also specify a fill color for the text box. If
the user indicates that the text box is also a link, he may also
fill in the name of an associated script (e.g., a CGI script). Once
the link is created, the location of the link is added to a list of
hotspot locations stored in memory and values are stored in the
text draw object to indicate that the text contains a hot spot and
its URL. Once the user has specified the text, a text draw object
is added to the list of draw objects. Currently, not all browsers
support custom fonts. Netscape Navigator 3.0, however, supports
such custom fonts and other browsers are expected to do so in the
future.
[0108] 4. The Image Tool
[0109] When the user clicks on Image tool 384, page draw editor 120
allows the user to specify an image display element. Unlike the
text boundary, the image boundary resizes to fit a user-specified
image. Once the image has been added to the display, the user can
create a link on all or part of the image or select one color in
the image as transparent. The user can also change the size of the
image using the cursor.
[0110] When the user clicks on Image tool 384, page draw editor 120
displays a Draw tab (not shown) in properties window 350 in
addition to the tabs shown in FIG. 3 and alters the Tool Window 324
as shown in FIG. 9(b). This Properties window allows the user to
enter a name of an existing image and various properties of the
image, such as whether the image is transparent, whether a fill
background should be added to the image, and whether the image
contains a link (e.g., a URL). The image tool has five secondary
tools, shown in FIG. 9(b). Tool 3050 allows the user to draw a
boundary in which to place the image file. Tool 3052 allows the
user to click on a color of the image that he wants to be
transparent. When the image is displayed, pixels of that color in
the image will be suppressed so that the background will show
through. (This means that a new image with a transparent color must
be generated when the HTML is generated). A flag in the Image draw
object is set to indicate transparency.
[0111] Tools 3054-3056 allow the user to specify a "hotspot" on the
image having different shapes. The user can create a rectangular,
circular, or polygon hotspot. The user draws and sizes the hotspot
on the display using the cursor and identifies the link/URL for the
hotspot using a pop-up window (not shown). Once the hotspot is
created, it is represented in the display by slightly distorting
the image in the hotspot area. The hotspot is added to a list of
hotspot locations stored in memory and values are stored in the
object to indicate that the image contains a hot spot and its URL.
Once the user has specified the image, the image is displayed
(e.g., image 502 of FIG. 5) and an image draw object is added to
the list of draw objects.
[0112] 5. The Draw Tool
[0113] When the user clicks on Draw tool 385, page draw editor 120
allows the user to enter a Draw display element. The Draw tool has
five secondary tools 395, shown in FIG. 9(d): rectangle 1950, round
rectangle 1952, ellipse 1953, line 1954, and polygon 1955. When the
user clicks on Draw tool 385, the page draw editor displays the
secondary draw tools 395 of FIG. 9(d). The user can then choose a
secondary draw tool. If, for example, the user selects rectangle
1950, a rectangle Draw tab (see FIG. 10(c)) appears in Properties
window 350 in addition to the tabs shown in FIG. 3. Similar tabs
appear when the other secondary draw tools are selected. The
Polygon tool allows the user to draw a polygon using the cursor, as
is known.
[0114] In the example, Properties window 350 allows the user to
enter properties of the rectangle, such as the color of the
rectangle, the border color and size of the rectangle, any text
inside the rectangle (and its properties), whether a fill
background should be added to the image, and whether the image
contains a link (e.g., a URL). Once the user has specified the
shape, the shape is displayed on the screen and an image draw
object is added to the list of draw objects. In the described
embodiment, each type of draw element has a different type of draw
object.
[0115] b 6. The Table Tool
[0116] When the user clicks on Table tool 386, the page editor 120
allows the user to enter a table in the display. The Table tool
causes a table window to be opened (see FIG. 10(h)). When the user
clicks on Table tool 386, the page draw editor displays a "table"
tab in Properties window 350 of FIG. 10(h). The user can then
specify the dimensions of the table. For example, the user can
specify the number of columns, the number of rows, and the type of
object that goes in each cell of the table. Once the user has
specified the table, the table is displayed on the screen and a
table draw object is added to the list of draw objects. A table
layout element cause a table to be generated inside a table when
HTML is generated for the page.
[0117] 7. The Sound Tool
[0118] When the user clicks on Sound tool 387, page draw editor 120
allows the user to draw a boundary in which to place an icon as a
visual placeholder for an audio file. The audio file is specified
through a Properties tab (not shown). In the final published Web
page, users can click the icon to hear the audio. Once the user has
specified the audio icon and an associated sound file, the audio
icon is displayed on the screen and a sound draw object is added to
the list of draw objects.
[0119] 8. The Video Tool
[0120] When the user clicks on Video tool 388, page draw editor 120
allows the user to draw a boundary in which to place an icon as a
visual placeholder for a video file. The video file is specified
through a Properties tab (not shown). In the final published Web
page, users can click the icon to see the video. Once the user has
specified the video icon and an associated video file, the video
icon is displayed on the screen and a sound draw object is added to
the list of draw objects.
[0121] 9. The Java Tool
[0122] When the user clicks on Java tool 389, page draw editor 120
allows the user to specify a Java applet and an address for the
applet. The Java tool, the ActiveX tool, and the Shockwave tool all
specify display elements that are exemplary of a type of display
element called a "plug-in." Java applets are small programs that
can be downloaded over the web and run on most computer platforms.
The described embodiment allows the user to specify an icon for a
Java applet and the location of the Java applet similarly to how
the user specifies a sound or video icon and file. When page is
displayed by a browser and the user clicks on the Java applet icon,
the Java applet will be downloaded and executed.
[0123] The user specifies a Java applet and icon through use of a
Java tab in Properties window 350 (see FIG. 10(f)). This Properties
window allows the user to specify a class of applet, to browse
through a plurality of predefined applet names, to review parameter
information for the selected applet name, to specify an alternate
tag for the Java icon, and to specify a script. Once the user has
specified the Java icon and an associated address, the Java icon is
displayed on the screen and a Java draw object is added to the list
of draw objects.
[0124] 10. The ActiveX Tool
[0125] When the user dicks on ActiveX tool 390, page draw editor
120 allows the user to specify an ActiveX file and an address for
the file. ActiveX files are small programs that can be downloaded
over the web and run on most computer platforms. The described
embodiment allows the user to specify an icon for an ActiveX file
and the location of the ActiveX file similarly to how the user
specifies a sound or video icon and file. When page is displayed by
a browser and the user clicks on the ActiveX file icon, the ActiveX
file will be downloaded and executed.
[0126] The user specifies an ActiveX applet. The user has specified
the ActiveX icon and an associated address, the ActiveX icon is
displayed on the screen and an ActiveX draw object is added to the
list of draw objects.
[0127] 11. The Shockwave Tool
[0128] The user specifies a Shockwave video file through use of a
Shockwave tab in Properties window 350 (see FIG. 10(g)). This
Properties window allows the user to browse a plurality of file
names, to specify an alternate tag. Once the user has specified the
Shockwave file, a predetermined Shockwave icon is displayed on the
screen and a Shockwave draw object is added to the list of draw
objects.
[0129] 12. The Forms Tool
[0130] When the user clicks on Forms tool 392, page draw editor 120
allows the user to specify elements of an HTML form. As is known,
forms are an interactive Web component. They allow a user to send
data to a server, either as request for more data or as a
submission of information to the server. As is known, forms are
controlled by CGI scripts.
[0131] The Forms tool has six secondary tools 395, shown in FIG.
9(c): button 1950, checkbox 1952, radio button 1953, single line
text 1954, multi-line text 1955, and list box 1956 (also called a
"pull-down menu"). When the user clicks on Forms tool 392, the page
draw editor displays the secondary draw tools 395 of FIG. 9(c). The
user can then choose a secondary draw tool. If, for example, the
user selects button 1950 and clicks in the display window for the
page, a button display element is added to the page. In addition, a
button tab (not shown) appears in Properties window 350 in addition
to the tabs shown in FIG. 3. Similar tabs appear when the other
secondary draw tools are selected.
[0132] Using the example of a forms button, Properties window 350
allows the user to enter properties of the button, such as the
color, any text inside the button (and its properties), and whether
a fill background should be added to the button. In addition, the
user decided whether the button is Submit button or a reset button.
During display, a submit button sends the contents of all the form
objects to a server. A reset button allows the user to clear the
form and start over.
[0133] The following paragraph describes, without limitation, other
examples of the various forms elements that can be specified by the
user. Each of the forms elements described below is an element of a
type that is currently included in conventional hand-coded HTML
forms. Other embodiments may include still other form elements not
described herein. A check box is used to let users select one or
more items from a group. (Editor 120 allows the user to specify
what these elements are.) A radio button behaves just like a check
box, except that only one radio button in a group an be checked at
once. A single-line text provides an area where the user can enter
a single line of text. A multi-line text provides an area where the
user can enter a more than one line of text. A list box takes the
form of a popup menu or a box with a scroll bar. Editor 120 allows
the user to specify the form of a list box. Once the user has
specified a form element, the video icon is displayed on the screen
and a form element draw object is added to the list of draw
objects. In the described embodiment, each type of form element has
a different type of draw object. The described embodiment allows
one form in the header, one form in the body, and one form in the
footer. This is because the form layout elements do not contain an
identifier as to which form they belong to. Other implementations
may contain such an identifier and may allow multiple forms in the
header, body, or footer.
[0134] 13. Managing Assets (Files, Links, and Data Objects)
[0135] FIG. 31 shows an example of an Assets display 3100 that
displays all current files, links, and data objects for a data
processing system. The display 3100 is generated when the user
clicks on Assets button 308 of FIG. 3. (Note that a dotted line
extends from the Assets button to the Secondary navigator bar 365.)
The Assets view shows all files, hyperlinks, or data objects
associated with the current system, depending on whether the user
clicks secondary button 3102, 3104, or 3106. FIG. 31 shows an
example of all data objects for the page of FIG. 5. It will be
understood that the Assets view reflects files, links, and data
objects stored in memory 104. Newly created files, links, and data
objects are stored in memory 104 as well.
[0136] The File view shows information about all files in the site,
such as: whether the file has a type of navigation bar images,
pictures, sound, video, Java applets and other plug-ins. The user
can change, e.g., the name and location of files and can add and
delete files through user of a dialog box (not shown).
[0137] The Links view shows information about all links in the
site, such as: whether a link is internal, external, or structural.
A structural link reflects a hierarchical link shown in the site
view. In a preferred embodiment changing a structural link in the
Assets view changes the link in the site view and between page
objects in the memory. The user can change links and can add and
delete links through use of a dialog box (not shown).
[0138] The Data Objects shows information about all DataObjects in
the system. Data objects can be internal data objects or can be
ODBC (Object Data Binding Convention) objects implementing
Microsoft's standard for web page/database binding. Before creating
a stacked page, as discussed below, the user should first create an
internal object or ODBC object for the data that is to be included
in the stacked page.
[0139] FIG. 34 shows an example of a dialog box 3400 used to create
a data object. Dialog box 3400 is displayed when the user dicks on
a "new object" button (not shown) or clicks on a "new object"
pull-down menu (not shown). Box 3400 includes a data object name
area 3402, a data object delete button 3404, an add field button
3408, an area 3410 listing the current fields of the data object, a
"get index field" button 3412, a set button 3414, and move up/down
buttons 3416, 3418. To create a data object in memory 104, the user
enters information in dialog box 3400.
[0140] 14. Creation of Stacked Pages
[0141] The described embodiment allows the user to create a special
type of page called a "stacked page," which is made up of "data
pages." A stacked page causes the described embodiment to generate
a plurality of HTML pages displaying a series of information, such
as a the values in a series of records from a database. FIG. 35
shows a block diagram of an example of a stacked page 3502 and a
series of pages 3504 displayed when a browser views the HTML pages
created from the stacked page. To create a stacked page, the user
first creates a data object, such as a data base object (as
described above). The user then creates a DataList draw object and
a DataField draw object for the stacked page.
[0142] To create a DataList draw object, the user clicks on
DataList tool 393 of FIG. 3. Page draw editor 120 allows the user
to specify a list of fields to be displayed on a stacked page. When
the user clicks on DataField tool 394, page draw editor 120 allows
the user to specify the layout of the fields in the data list. Once
the user has specified a DataList and a DataField, an appropriate
display element is displayed on the screen and a DataList draw
object or a DataField draw object, respectively, is added to the
list of draw objects for the page.
[0143] The following paragraphs describe an example of creation of
a stacked page. FIG. 36 shows an example of an icon for a stacked
page that is displayed by the site level editor described in the
co-pending application of Arora et al. Once a page includes a
DataList and a DataField object, it is classified as a stacked
page. When a page is a stacked page, it is displayed at the site
level as overlapping pages icon 3602. Stacked pages are moved at
the site level in substantially the same manner as normal pages.
However, multiple HTML pages are generated for each stacked
page.
[0144] FIG. 37 shows an example in which a user has opened Tool
window 324 and selected DataList tool 393. The user has then
specified a rectangle 3704.
[0145] FIG. 38 shows a Properties window 350 with a DataList tab
3802 opened for DataList tool 393. FIG. 38 also shows a DataList
window 3802. The user specifies, in the DataList window 3803,
fields of the list that can be displayed on the stacked page (for
example, "Headline list"). The user then clicks on the listed
DataList fields to select which fields of the data object will be
included in the stacked page. The properties of the DataList are
displayed in Properties window 350.
[0146] In DataList window 3803, the user optionally specifies a
sort field 3806 in the data object, and optionally sets a filter
3808 (e.g., product="xxx," not shown). Only values in the specified
fields having the filtered value will be part of the stacked page.
The user may also specify whether any of the fields will be linked
to other pages. FIG. 40 shows "Data List Tab" in Properties window
350.
[0147] FIG. 40 shows an example in which a user has opened Tool
window 324 and selected DataField tool 394. The user has then
specified a rectangle 4004. The user names the data list ("Headline
List") and defines an appearance of the fields selected in FIG. 38.
An area for each field can be sized and dragged to define the
layout of each data page in the stacked page.
[0148] Secondary navigator bar 365 includes a button bar 4006 that
has four buttons for managing data pages within a stacked page.
These four buttons include: a "+" button, which creates a new data
page, a "-" button, which deletes the current data page, a "back"
button which displays the contents of a previous data page, and a
"forward" button, which displays the contents of a next data page.
In, for example, a data base, the user can create as many data
pages as there are records in the data base. Each data page will
automatically contain display elements to a first, next, and
previous data page. Thus, a stacked page has a list of draw
elements. An example of such as draw element may have a structural
link to the "next" or "previous" data page. If the page is a
stacked page, a flag in memory is set to indicate this fact, since
multiple HTML pages can be generated for a single stacked page
(i.e., one HTML page for each data page).
[0149] B. Creation of Draw Objects for the Display Elements
[0150] FIG. 12 is a flow chart showing steps performed by page draw
editor software 120 to edit a page layout during execution of the
page draw editor. In step 1202, the page draw editor determines
whether the page is a new page. If it is an existing page, in step
1004, the current page layout for the page is displayed in
accordance with the already existing draw objects for the page. The
page layout will include the automatically generated banner,
navigator buttons, and text buttons, unless the user has previously
deleted them.
[0151] If the page is a new page, in step 1206, the editor displays
the default page layout in accordance with the draw objects for the
page. The user exits the page draw editor by, e.g., clicking on
Site button 302, Style button 306, Assets button 308, or Publish
button 310 (or by selecting "exit" from a pull-down menu). After
the user has edited a page, he can still move the page around in
the site hierarchy by using the structure/site editor, as described
in the co-pending application of Arora et al.
[0152] FIG. 13 is an example showing an internal memory
representation of draw objects automatically generated by page draw
editor software 120. The draw objects are generated when a page is
created and are modified when the page is modified. The internal
representation includes a list of draw objects, representing each
display element of the page of FIG. 4. Thus, the list of draw
objects includes a banner draw object 1302 (corresponding to banner
410), a navigator buttons draw object 1304 (corresponding to
navigator buttons 412), and a text buttons draw object 1306
(corresponding to text buttons 428). In the described embodiment,
all draw objects of the header 402 are stored together and a
pointer points to the beginning of this list. Similarly, all
objects of the footer 406 are stored together and a pointer points
to the beginning of this list. In the described embodiment, the
user has not entered any elements into the body 404 and a pointer
to body elements points to a null list. There are other elements in
the layout elements list (such as border elements) that are not
shown for the sake of ease of explanation.
[0153] FIG. 14 is an example showing the internal representation of
FIG. 13 after some display element have been added by the user. The
list now contains an image draw object for image 502 and a text
draw object for text 504 (see FIG. 5). Each draw object contains
data specifying its location on the page as shown in FIG. 5. If the
image or text is also a hotspot, information identifying the URL of
the link is also contained in the object.
[0154] FIG. 15 is an example showing the internal representation
after text display element 504 has been moved by the user. Note at
the position of the text draw object does not change in the list of
draw objects. However, the position data in the text object does
change to reflect the object's new position in the page layout.
Similar changes are made to other page objects whenever the user
alters the position, appearance, or function of the corresponding
display element with the page editor 120.
[0155] It will be understood that all draw objects discussed in the
following paragraphs include a screen position field (Indicating
the X and Y coordinates of the objects'current position on the
screen), the height and width of each draw object on the screen,
and various flags associated with display of the object. Flags
include whether the object has a frame drawn around it, whether the
object may be resized to zero width or height, whether the object
itself handles mouse commands internally, whether the object is
currently selected, the color of the object, whether the object is
transparent, whether the object contains text, etc. It will be
understood that the specific flags stored in an object may vary
from implementation to implementation. The position, height, width
and flag values are not shown for the sake of clarity. It will also
be understood that each type of draw object contains the data
required to describe the appearance and function of the
corresponding display element.
[0156] Draw objects can be of a variety of types or classes. It
will be understood that the present invention does not necessarily
include any specific types of draw objects and may include more or
fewer types of draw objects than are discussed herein. The draw
objects in a preferred embodiment include, without limitation:
[0157] rectangle,
[0158] round rectangle,
[0159] line,
[0160] ellipse,
[0161] text,
[0162] picture/image,
[0163] polygon,
[0164] OLEobject,
[0165] JavaScript,
[0166] database list,
[0167] database field,
[0168] form button,
[0169] form radio button,
[0170] form checkbox,
[0171] form edit,
[0172] form combobox,
[0173] form clear button,
[0174] zoomin,
[0175] zoomout,
[0176] grid,
[0177] graphic,
[0178] hotspot rectangle,
[0179] hotspot polygon,
[0180] hotspot ellipse,
[0181] background picker,
[0182] Shockwave object,
[0183] Sound,
[0184] Video,
[0185] ActiveX,
[0186] Form Multi edit, and
[0187] MAX SHAPE
[0188] In the described embodiment, each type of draw object has
associated information that, in general, allows the draw object to
be displayed on display device 150 in accordance with user draw
commands. This information is also used to generate HTML for the
object (including links and anchors). The following paragraphs
describe some examples of draw objects.
[0189] FIG. 16(a) is an example of information associated with a
draw object for a page banner. It includes a bitmap of the banner
and the name of the page (e.g., "Products"). FIG. 16(b) is a first
example of information associated with a draw object for a
navigator button object. It includes a node number to which it will
link when displayed by a browser, a name of the linked to page, and
an image of the navigator button (e.g., an image using the GIF,
JPEG, BMP, TIFF, EPS, or PCX file formats). FIG. 16(c) is a second
example of information associated with a draw object for a
navigator button. The link in the second example is a structural
link, i.e., it represents a link according to relationships between
the pages/nodes. FIG. 16(c) includes a smart link to another node,
which is specified by relationship, and an image. The identity of
the link is determined (updated) when the page is displayed,
previewed, or published. FIG. 16(d) is an example of a draw object
for a text object. It includes a node number to which it will link
when displayed by a browser, a name of the linked to page, and a
string displayed in the text button. In the described embodiment,
each draw object contains its type, its X position, Y position,
width, and height. Appendix A shows an example of a draw object of
text and a draw object for an image. It will be understood that
each type of display element in a page (e.g., text, image, button,
etc.) has a corresponding type of draw object.
[0190] In the described embodiment, each draw object contains its
type, its X position, Y position, width, and height and display
flags. In general, each draw object contains information associated
with its corresponding dialog box in which the user views
properties of the display element on the page.
[0191] III. Publishing a Page
[0192] Once the user has created a layout for a Web page as
described above, the user needs to be able to create HTML for the
page in accordance with the draw objects of the page. FIG. 17 shows
an example of a display used to allow the user to publish one or
more pages. In the described embodiment, this display actually
allows the user to publish all pages in a Web site, as described in
the co-pending U.S. application Ser. No.______ of Samir Arora et
al., filed concurrently herewith, and entitled "Hierarchical
Structure Editor for Web Sites.
[0193] FIG. 17 shows a screen displayed when the user clicks on
"Publish" button 310 of FIG. 3. The screen includes three buttons
"Settings" 1702, "Stage" 1704, and "Publish" 1706. Once the display
of FIG. 17 is displayed, the user can either "stage" or "publish"
his site. Generally, staging is performed first and publishing is
performed once the site is debugged. Staging and publishing are
substantially the same, differing in when they are performed during
the site development process. The user can also set configuration
parameters to control the publishing or staging process. Clicking
on either "publish" button 2802 or "Stage" button 2804 causes the
described embodiment to generate HTML code for each page in the
site (or only for pages indicated by the publish flag or by the
user). This process is described below.
[0194] Clicking on "Settings" button 1702 causes a pop-up window
1708 to be displayed. Clicking on "Stage" tab 1710 or "Publish" tab
1712 will display a window, which allows the user to specify a
storage location for the staged or published site. Clicking on a
"Modify" tab 1808 causes the popup window 1802 of FIG. 18 to be
displayed. Window 1802 allows the user to indicate certain
attributes of the HTML to be generated for the site (e.g., text
only, black and white (grey scale), or low-res).
[0195] FIG. 19 is a flow chart showing steps performed by page draw
editor software 120 to publish a page of a site. It will be
understood that the steps of FIG. 19 are performed by processor 102
executing instructions in page draw editor software 120. In step
1904, if the stacked flag of the current page object indicates that
the current page is a stacked page, then processor 102 creates HTML
for a plurality of pages. If the current page is not a stacked page
then, in step 1908, processor 102 builds HTML for a "normal" page.
In either case, the HTML for the page is then written to a storage
medium of the system.
[0196] It will be understood that, generally, each page object has
a corresponding list of draw objects describing the elements of the
page layout, and that processor 102 generates HTML in accordance
with the lists of draw objects. As described above, each list of
draw objects automatically includes draw objects representing
automatically generated banners and links (e.g., to the home,
parent, sibling, and/or children pages of that page). These
automatic links may be structural links). The draw objects of a
page may also represent other, additional links added by the user
that are not a part of the site hierarchy. Moreover, the user can
use the page draw editor to remove some of the automatically
generated draw objects links if he so desires. Unless the user
explicitly removes them, however, these automatically generated
links are present in each page layout. Thus, the generated HTML for
each page will contain links to the home, parents, siblings, and/or
children pages for each page of the site view.
[0197] IV. HTML Generation for a Page
[0198] FIG. 20 is a flow chart showing steps performed by the
structure editor software to publish a normal page. FIG. 21 is a
flow chart showing steps performed by the structure editor software
to publish a stacked page. The steps of FIGS. 20 and 21 are
similar, except that the steps of FIG. 21 generates multiple HTML
pages for the stacked page. Step 2002 creates initial HTML for the
page as shown in FIG. 22. This step creates the beginning of an
HTML page. Steps 2004-2008 create HTML tables for each of the
header, body, and footer as shown in FIGS. 23 and 24. Step 2010
creates final HTML for the end of the page as shown in FIG. 25. The
preferred embodiment generates Netscape HTML version 3.X.
[0199] FIG. 21 shows the creation of a plurality of HTML pages for
a stacked page. Each HTML contains, for example, data for one
record of a database associated with the stacked page. Each of the
plurality of HTML pages has a common format including the same
fields of the database and the same layout of the fields. Each page
of the plurality of pages has the same format, but different
data.
[0200] Step 2214 of FIG. 22 shows that the HTML for a page includes
a tag specifying the colors that a browser will use to display
regular, visited, and active links. Other embodiments specify other
HTML tags that specify other attributes common to the page.
[0201] FIG. 23 is a flow chart showing steps to build an HTML
table. In the described embodiment, an HTML table is generated for
the header, body, and footer of each page. Steps 2302-2308 generate
a matrix in memory 104 as discussed below in connection with FIGS.
26-29. Step 2312 create the HTML table in accordance with the
matrix as shown in FIG. 24.
[0202] FIG. 24 shows steps that create an HTML table. Step 2402
writes a table tag including a border of zero width and cellpadding
and cellspacing of zero. Step 2404 generates a table header
including column and width definitions for the HTML table. Steps
2406-2418 go through each row and column of the matrix to generate
a plurality of cells in the HTML table. Some of the cells in the
HTML table can be several columns wide and/or several rows high.
Step 2420 generates an end of table tag.
[0203] FIG. 26 is an example of first steps involved in determining
an HTML table size for a layout element of a header, body, or
footer. In the example, the layout element has four display
elements. Each display element corresponds to one draw object of
the page. As discussed above, each draw object has an X position (a
start row) and a length. Each draw object also has a Y position (a
start column) and a height. For each object, a first column edge is
the X start position and a second column edge is the X start
position plus the length. In addition, for each object, a first row
edge is the Y start position and a second row edge is the Y start
position plus the height. Processor 102 finds the row edges and
columns edges for a current page, yielding data 2602 and 2604.
[0204] FIG. 27 is an example of second steps involved in
determining an HTML table size for a layout element. Once the
column and row edges of the draw objects are determined, the edges
are sorted, duplicate edges are removed from the sorted list,
yielding unique row edges and unique column edges (steps 2304 and
2306 of FIG. 23). The unique rows edges and column edges are then
counted. In the example, the objects have six column edges and
seven row edges. Once the unique row edges and column edges are
determined, the column widths and row heights for each column and
row are determined.
[0205] FIG. 28 is an example of a matrix 2802 generated in
accordance with the edges and draw objects. Matrix 2902 has a
number of rows equal to the number of row edges plus one. The
matrix has a number of columns equal to the number of column edges
plus one. Thus, in the example, the matrix has seven columns and
eight rows. Each element 2804 of the matrix has a pointer field and
an occupied flag. The element of row 7, column 2 of the matrix
points to object number 1 and is marked as occupied. The next four
elements in row 2 are also marked as occupied. The element of row
3, column 3 points to object number 2 and is marked as occupied.
The element of row 2, column 5 points to object number 3 and is
marked as occupied. The next four elements in column 5 are also
marked as occupied. The element of row 5, column 3 points to object
number 4 and is marked as occupied.
[0206] FIG. 29 is a block diagram of how the matrix 2802 is used to
generate an HTML table. The HTML table is used by a browser to
display a portion of a page on display device 160 (such as a
header, body, or a footer. (An alternate embodiment of the present
invention creates a single table for each page of the site). Each
element of the matrix is used to generate a cell in an HTML table
(although some cells occupy more than one row or more than one
column). For example, the matrix element in row 1, column 1 causes
an empty table cell to be generated. Each row in the HTML table has
a height in pixels that is equal to the height for that matrix row.
Each cell in the HTML table has a width that is equal to the width
of the matrix for that column.
[0207] As is known to persons of ordinary skill in the art, the
cells in the table can be of varying sizes (i.e., can use the HTML
tags "ROWSPAN" and "COLSPAN"). The matrix element in row 2, column
5 causes generates of a cell that spans four rows (ROWSPAN=4). The
matrix element in row 7, column 2 causes generation of a cell that
spans five column (COLSPAN=5).
[0208] FIG. 30 shows an example of a Style display. The display of
FIG. 30 is shown when the user selects Style button 306. The Style
button display allows the user to select an overall default
appearance of all pages in the site. The user can override the
style for a given page by defining a different style for the page
(not shown). In the described embodiment, the values shown in FIG.
30 are stored in locations of memory 104. The automatic generation
of banners, navigation buttons, and text buttons is performed in
accordance with user-specified style values.
[0209] FIG. 31 shows an example of an Assets Display. The Assets
display shows the files, links, and objects in the data processing
system. For example, the assets shown in FIG. 31 are the draw
objects for the "Products" page of FIG. 5.
[0210] FIG. 32 shows an example of a plurality of link dialog
boxes, showing a structural link, an internal link, and an external
link.
[0211] FIG. 33 is a flow chart showing identification of structural
links for a page. The links preferably are identified when the page
is displayed, previewed or published. Internal and external links
are "absolute" links. Structural links are identified only as "next
sibling link," "next child link", etc. For each link, the
node-that-is-linked-to is identified (updated) by looking at the
page hierarchy specified by the page layout tree. After the node is
identified, the processor finds the URL, name, etc of the node and
generates the display or HTML for the structural link.
[0212] In summary, the described embodiment of the present
invention allows a user to define a layout of a Web page. A
draw-based editor in accordance with the present invention
automatically creates draw objects for each page that reflects the
user-defined layout. When the user publishes" a page, the described
embodiment generates HTML code for the page. A page can also be a
"stacked page." A single stacked page causes generation of a
plurality of HTML pages. The page defaults to a user-specified
"style," which can be changed by the user.
[0213] Other embodiments will be apparent to those skilled in the
art from consideration of the specification and practice of the
invention disclosed herein. It is intended that the specification
and examples be considered as exemplary only, with a true scope of
the invention being indicated by the following claims and
equivalents.
* * * * *