WO2019013364A1

WO2019013364A1 - Responsive website builder system and method therefor

Info

Publication number: WO2019013364A1
Application number: PCT/KR2017/007378
Authority: WO
Inventors: 박영욱
Original assignee: 주식회사 넥스트비즈
Priority date: 2017-07-11
Filing date: 2017-07-11
Publication date: 2019-01-17

Abstract

A responsive website builder system and a method therefor are disclosed. A responsive website builder system according to an embodiment of the present invention comprises: a theme generation unit for generating a plurality of theme data sets including a plurality of layout setting values according to themes and resolutions, respectively, and storing the generated plurality of theme data sets in a theme database; a user editing unit for generating a user website data set on the basis of one theme data set selected from among the plurality of theme data sets, according to selection by a first user; and a site generation unit for generating a user website on the basis of the user website data set.

Description

Responsive Website Builder System and Method

An embodiment according to the concept of the present invention relates to a responsive website builder system and a method thereof, and more particularly to a system and a method for producing a responsive website according to a screen resolution.

With the development of Internet technology and online services, the demand for websites has increased tremendously.

Web site creation tools and storage space are required to create a website (eg, home page). In general, homepages are not easy to be produced by ordinary Internet users who do not have expertise or experience in production on the homepage, so they are commissioned to a company specialized in homepage production.

However, in this case, it takes too much time and cost to produce the homepage, and there is a disadvantage that separate professional manpower and cost are required to modify or manage the produced homepage. In order to overcome such disadvantages, a tool or a method for automatically producing a home page is introduced, and a prior art relating to a method for automatically generating a home page is also disclosed.

SUMMARY OF THE INVENTION The present invention provides a responsive website builder system and a method thereof that enable a general user without professional knowledge to easily create a website without program coding.

It is another object of the present invention to provide a responsive website builder system and a method thereof that enable a user to easily create a responsive website that varies according to a screen resolution.

According to the responsive website builder system and method according to the embodiment of the present invention, a general user without professional knowledge can easily create a website without program coding.

In addition, according to the responsive website builder system and method of the present invention, a responsive website (e.g., a home page) that varies according to the screen resolution can be conveniently Can be produced.

1 is a diagram illustrating a schematic connection relationship of a responsive website builder system according to an embodiment of the present invention.

FIG. 2 is a schematic block diagram of the configuration of the responsive website builder system shown in FIG. 1. FIG.

3 is a functional block diagram of a responsive website builder system according to an embodiment of the present invention.

FIG. 4 is a diagram for explaining a function of the theme generation unit shown in FIG. 3. FIG.

FIG. 5 is a diagram schematically showing an embodiment of a screen of the reactive screen operation viewer shown in FIG. 3. FIG.

Figures 6-17 illustrate embodiments of pages (or screens) that a responsive website builder system according to an embodiment of the present invention provides for a user interface.

The responsive website builder system according to the embodiment of the present invention generates a plurality of theme data sets including a plurality of layout setting values for each theme and resolution, Generating unit; A user editor configured to generate a user website data set based on a selected one of the plurality of theme data sets according to a selection of a first user; And a site generator for generating a user website based on the user website data set.

Wherein the site generator comprises: a website database storing the user website data set; A CSS file generator for generating a CSS file by resolution based on first layout setting values of the user website data set stored in the website database; And a responsive user interface module for generating a user website based on the CSS file and the second layout setting values and the content of the user website data set.

Wherein the plurality of layout setting values include a plurality of main page configuration items constituting a main page and a plurality of sub page configuration items constituting a sub page, wherein the plurality of main page configuration items and the sub page configuration items Each of which may include one or more subsetting values.

Specific structural and functional descriptions of the embodiments of the present invention disclosed herein are for illustrative purposes only and are not to be construed as limitations of the scope of the present invention. And should not be construed as limited to the embodiments set forth herein or in the application. BEST MODE FOR CARRYING OUT THE INVENTION Hereinafter, the present invention will be described in detail with reference to the preferred embodiments of the present invention with reference to the accompanying drawings. Like reference symbols in the drawings denote like elements.

1 is a diagram showing a schematic connection relationship of a responsive website builder system 30 according to an embodiment of the present invention

Referring to this, the responsive website builder system 30 can communicate with a plurality of (two or more) user terminals 10-1 through 10-k (k is an integer of 2 or more) through the communication network 20.

Each of the first through n-th user terminals 10-1 through 10-k can access the responsive website builder system 30 through the communication network 20 to create a responsive website, You can also use a website.

Because responsive websites are the same regardless of resolution, each site's URLs are the same, so you can see the same content regardless of the device, even if you distribute the detailed URLs of each site's pages.

The user terminals 10-1 to 10-k may be implemented as a personal computer (PC), a laptop computer, or a portable terminal. The portable terminal may be, but not limited to, a mobile phone, a smart phone, a tablet PC, a personal digital assistant (PDA), and the like. All or one of the first to n-th user terminals 10-1 to 10-k may be referred to as a user terminal 10.

The user terminal 10 accesses the responsive web site builder system 30 to access the responsive web site builder system 30 for registration, member information registration, responsive website creation, web site domain creation, menu management, layout selection and modification, It can perform functions such as writing and commenting on Bulletin Board System (BBS).

For example, the user accesses the responsive website builder system 30 with the user terminal 10 to create a responsive website using various templates and user interfaces provided in the responsive website builder system 30, (E.g., change content or layout, etc.) of the generated reaction-type website.

Further, the user can access the response-type website created with a specific URL, and can view and write information provided by the website.

Figure 2 is a schematic block diagram of the responsive website builder system 30 shown in Figure 1. Referring to FIG. 2, the responsive website builder system 30 may include a processor 40, a communication unit 50, a data storage unit 60, and a user interface unit 70.

The data storage unit 60 stores a program and data for providing a responsive website generation (production) service. The data storage unit 60 may include various storage media such as a ROM, a non-volatile memory, and a hard disk device.

The processor 40 may execute a program stored in the data storage unit 60 to provide the user terminal 10 with a responsive website creation (creation) service. The processor 40 may also manage programs and data in the data store 60. [

The communication unit 50 can communicate with the user terminal 10 through a communication network (20 in Fig. 1).

The user interface unit 70 may receive user information and a user selection from a user and generate a user input signal according to the user information and the user selection. The user may be, but is not limited to, a system administrator.

The user interface unit 70 may transmit a user input signal to the processor 40. [ The user interface unit 70 may be implemented as a device capable of sensing a user's input, such as a keyboard, a mouse, and a touch screen.

The user interface unit 70 may also output a video signal or an audio signal.

3 is a functional block diagram of a responsive website builder system according to an embodiment of the present invention. FIG. 4 is a diagram for explaining functions of the theme generation unit 100 shown in FIG. FIG. 5 is a diagram schematically showing an embodiment of a screen of the reactive screen operation viewer 130 shown in FIG.

3 to 5, the responsive website builder system 30 is a system that allows the user to conveniently create responsive websites (e.g., homepages, etc.) that vary according to the screen resolution. For example, the responsive website builder system 30 may include a color theme selection and layout setting using a user interface provided by the responsive website builder system 30, So you can easily create reactive websites.

Each of the

components

100, 200, and 300 included in the responsive website builder system 30 may be implemented in hardware, software, or a combination thereof. The functionality of the responsive website builder system 30 may also be implemented using the components of the responsive website builder system 30 shown in FIG.

The responsive website builder system 30 includes a theme generator 100, a user editor 200, and a website generator 300.

The theme generation unit 100 includes a basic setting unit 110, a layout setting unit 120 for each resolution, a responsive screen operation viewer 130, and a theme database 140.

The basic setting unit 110 includes a calculation value or a program algorithm for driving a JavaScript (js: javascript). The basic setting unit 110 generates or sets appropriate basic cascading style sheets (CSS) setting values according to the response type (screen resolution).

CSS is a style sheet that stores the overall style of a web document in advance. 'Response type' may mean that the screen (or page) of the website is automatically changed (or reconfigured) to fit the screen resolution (or screen size).

The resolution-specific layout setting unit 120 allows theme developers to set layout setting values for each theme or resolution.

For example, the resolution-specific layout setting unit 120 may provide an interface for setting layout setting values to theme developers connected to the responsive website builder system 30, and may set a plurality of layout settings Values.

The reactive screen operation viewer 130 generates and displays a web screen according to a plurality of layout setting values set by the layout setting unit 120 for each resolution.

The reactive screen operation viewer 130 can generate a web screen according to a resolution selected from a plurality of resolutions. According to an embodiment, for the convenience of the user, a plurality of resolutions can be divided into PC, tablet, terminal horizontally, and terminal vertically.

Referring to the screen 130a of the reactive screen operation viewer 130 shown in FIG. 5, the user can select a PC, a tablet, a terminal landscape, and a terminal portrait on the screen 130a of the reactive screen operation viewer 130

Menus

131, 132, 133 and 134 may be shown.

By selecting one of the

menus

131, 132, 133, and 134 on the theme developer responsive screen operation viewer screen 130a, the resolution can be selected.

For example, when the theme developer selects the PC 131, the reactive screen operation viewer 130 can generate and display a web screen suitable for the PC screen according to a plurality of set layout settings, The response type screen operation viewer 130 can generate and display a web screen corresponding to the terminal vertical screen (for example, a horizontal resolution when the terminal is vertically arranged) according to a plurality of set layout settings. If the terminal width 133 is selected, the responsive screen operation viewer 130 displays a web screen corresponding to the terminal horizontal screen (for example, horizontal resolution when the terminal is horizontally disposed) according to a plurality of layout setting values And display it.

Accordingly, the theme developer can check the web screen according to the layout setting values and change the layout setting values if necessary.

The theme database 140 stores a plurality of layout setting values set by the layout setting unit 120 for each resolution. According to the embodiment, the theme database 140 may store a plurality of layout setting values for each theme and for each resolution. A plurality of layout setting values for each theme can be referred to as a theme data set.

As described above, the theme generation unit 100 performs a function of designating or setting a plurality of layout setting values for each theme or resolution.

According to the embodiment, the theme generation unit 100 performs a function of designating the layout configuration values by dividing the main page and the sub page.

Referring to FIG. 4, the main page 410 may include items 430 (M1 to M4) configuring the layout of the main page, and the sub page 420 may include items (e.g., 440: S1 to S4).

For example, the

configuration items

430 and 440 can be classified into a top, a menu, a logo, an upper visual, a banner, a bulletin board style, a gallery style, an input form style, a bottom style,

Each configuration item may include one or more sub-items.

For example, the configuration item M1 of the main page may include sub-items 450 (M1-1, M1-2, M1-3). Although not shown, each of the other configuration items M2 to M4 of the main page and each of the configuration items S1 to S4 of the sub page may include one or more detailed items.

The detail items can be divided by resolution, and there are items that are applied totally regardless of resolution.

This detail item includes, for example, a color, a size, a margin value and the like, and in some cases, an algorithm for an appropriate setting pre-configured in the basic setting unit 110 is selected.

The details can be divided into three types. For example, the details may be 1) color, 2) shape layout, and 3) preset algorithm.

In the case of color, it is generally input as a fixed value (for example, RGB value) and can be expressed as '# AA33DD' or the like.

In case of single color, one RGB value is inputted. In the case of gradation, two or three values can be inputted. In the case of transparency, a ratio (for example,%) can be input.

In case of shape layout, since the site layout is affected by the reaction type, it can be input by using pixel unit for fixed size, and by using% unit for flexible case.

For example, in the case of a pixel, if the image or round character size should be fixed at a certain resolution, the pixel is input. However, when the size of the image is flexibly expressed in accordance with the resolution, the ratio (for example,%) is input. (E.g.,%) even when the gradation position and the size of the box or layout constituting the content are fluid.

The basic setting unit 110 may generate a plurality of layout setting values using preset algorithms. Preset algorithms can be configured with layout setting values as groups that are preconfigured by optimizing complicated settings or the like, or may be configured with a program for generating a layout setting value.

For example, the layout setting unit for each resolution 120 can select some layouts, such as a three-tiered banner or a four-tiered banner, through a user interface. When a theme developer or a user selects a specific layout, The detailed layout setting values may be generated by the preset algorithm of the basic setting unit 110. [ Accordingly, the theme developers and users can generate layout setting values only by selecting them without having to individually set or input layout setting values.

The user editing unit 200 includes a site menu setting module 210, a theme selection module 220, a layout setting module 230, and a content configuration module 240.

The user editing unit 200 allows a user to conveniently set a site menu (or a site map) and layout of a website (hereinafter, referred to as a " target website ") that the user intends to produce based on the theme data set stored in the theme database To be edited.

The site menu setting module 210 provides a predetermined user interface so that the user can set a site menu on the target homepage and generates site menu data according to a user's selection and stores the generated site menu data in the website database 310. [

6 shows an embodiment of the screens provided by the site menu setting module 210. In FIG.

When the user selects the site menu, the site menu templates for setting the site menu are shown.

The site menu template may have a hierarchical structure or a tree structure.

The site menu templates may include a top-level template menu (referred to as a 'main menu template') and one or more sub-menu templates that may be added under each main menu.

For example, when the site menu is selected, a plurality of (two or more) main menu templates are shown.

In one embodiment, eight main menu templates may be provided.

The user can select as many main menu templates as necessary, and set the name of the main menu and whether or not to use the main menu. For example, the user can select the first main menu and set it to 'use', and set the menu name to 'company introduction'. For example, the user can select the second main menu and set it to 'use', and set the menu name to 'bulletin board'.

In this manner, the site menu setting module 210 provides various templates for setting the site menu of the target web site, and allows one or more main menus and sub menus to be set according to the user's selection.

At the bottom of each main menu, a UI (user interface, for example, a button) for adding a sub-menu may be provided. The user can click the 'Add' button to set the submenu name, and set the function of the submenu to one of the preset functions. For example, the preset function may be a general page, a general bulletin board, a gallery bulletin board, a consultation reservation page, a map, and the like, but is not limited thereto. Depending on the function set, the page type and style of the submenu can be changed.

For example, the user can set a sub menu of the first main menu (company introduction) by adding a representative greeting and an access route. For the greetings of the representative, the function can be set as a general page, and the route can be set as a map.

In this way, one or more submenus can be set according to the user's selection. It is also possible to set whether or not to use each submenu.

Once the settings for each main menu and each submenu are completed, the settings for the site menu can be completed.

When the site menu setting is completed, the theme setting step can be performed.

The theme setting may be performed by the theme selection module 220.

The theme selection module 220 selects one of the plurality of theme data sets previously set in the theme generation unit 100 and updates the selected theme data set to the website DB of the site generation unit. For example, the theme selection module 220 may store the selected theme data set as a user website data set in the website DB.

For the theme setting, the color theme setting menu may be provided by the home page builder system 10. The color theme setting menu is provided to allow the user to set the color theme of the target homepage.

The color theme means color, margin, background, layout, corner type, etc. of the main page and subpage of the homepage.

When the color theme menu is selected, a menu for selecting one of a plurality of template colors can be provided.

For example, the plurality of template colors may include, but is not limited to, red, orange, brown, yellow, green, blue, purple, pink and black and white.

In addition, the user can check the single color, gradation degree, gradation degree, transparency and the like and select a suitable theme (color theme) through the color theme setting menu.

The layout setting module 230 loads and edits a user web site data set from the web site DB 310 and updates the web site DB 310 with the changed contents and the added contents again.

The user can set the layout of the target website through the layout setting menu.

Layout settings can be made for each main page and each subpage.

First, the layout of the main page can be set.

The layout may include the size of the top menu, the size of the main menu, the location, the style of the submenu (bottom alignment, left to right alignment, visual size, full screen, partial screen, banner position, etc.).

The user may use a layout (or set values according to a layout set in the default) set by default using the user interface provided by the layout setting module 230, or may use a part of the layout.

The content configuration module 240 also retrieves and edits a user web site data set from the website database 310 similarly to the layout setting module 230, and updates the changes and added contents to the website database 310 .

The site generating unit 300 includes a web site DB 310, a responsive (by resolution) CSS file generator 320, and a responsive user interface module 330.

The responsive CSS file generator 320 loads the layout setting values of the user website data set stored in the website DB 310 and the default CSS setting values of the basic setting unit 110 of the theme generating unit 100 And generates a responsive user website CSS file in the responsive user interface module 330. Therefore, this file (user website CSS file) is generated differently for each domain (ie, for each website).

The responsive user interface module 330 mainly includes four sub-modules.

For example, the responsive user interface module 330 includes a JS module 331, an html module 333, a css module 335, and a web program module 337. The web program module 337 drives the web program. Examples of web programs are web-enabled DB-compatible programs such as php, asp, and jsp.

The responsive user interface module 330 includes a CSS file generated by the responsive CSS file generator 320, a content information of the website database 310, and a value or code HTML inline method) and invokes a js (Javascript) related algorithm previously set in the basic setting unit 110 to create a real reactive web site that a user can view with a web browser.

In addition, the user can access the website in a URL manner specified in the site, and the information input by the user is input to the web site DB 310 using various functions of the web (input, select, textarea, etc.) It also performs an update role.

Figures 6-17 illustrate an embodiment of the pages (or screens) provided by the responsive website builder system 30 for a user interface according to an embodiment of the present invention. For example, FIGS. 6 to 17 may be user interface screens provided by the user editing unit 200 of the responsive website builder system 30. FIG.

The site menu setting module 210 may provide a site menu edit screen as shown in FIGS. The site menu edit screen can provide the main menu and submenu of the site.

According to the embodiment shown in FIG. 6, the user can edit the site menu after releasing the lock (1) on the site menu edit screen. ② is the main menu of the site, and the user can modify the menu name by clicking on the main menu. ③ is a submenu of the site, and the submenu belongs to the main menu, and the user can modify the menu name by clicking the submenu. The user can change the position of the menu by dragging and dropping after clicking the icon.

In the embodiment of FIG. 6, up to eight main menus can be provided, but the present invention is not limited thereto. The menu displayed in a specific color (e.g., gray) may be a menu that is not currently used (e.g., a disabled menu). The user can activate the menu by clicking on the disabled menu and clicking on 'Enable'.

In the embodiment of Fig. 7, the user can select the main menu (2) to be edited. If you select the main menu (②) to edit, the edit window appears on the right side, and you can modify the menu name (③). The user can enable / disable the main menu by turning ON / OFF the 'ON' (④). After modifying the main menu, press the 'OK' button (⑥) to complete the modification.

The 'color theme' button (7) can be provided on the site menu editing screen, and the user can go to the page for selecting the color theme by clicking the 'color theme' button (7). The user can designate the menu name input, modification, position change, and submenu functions for the submenu in a manner similar to the main menu.

The functions of the submenu include functional contents constituting the site such as a general page, a general bulletin board, a gallery bulletin board, a consultation (input form), and a map (map).

The theme selection module 220 may provide a color theme setting screen as shown in FIG. The color theme setting screen is a page for selecting a color theme of a website, and the user can select a desired color scheme from among a plurality of preset color arrangements (1 in Fig. 8). The color theme setting screen allows the user to provide an introduction to a plurality of themes and an example image (2 in Fig. 8).

The layout setting module 230 can provide a main page layout editing screen as shown in FIG.

The main page layout editing screen is a page provided to simplify the entire layout of the main page of the target web site created by the user and make it easy to understand and edit.

The layout of the main page may be composed of an upper part, a visual part, a banner, a bulletin board, an SNS, a moving picture, a gallery, a shopping mall, a lower part, and the like. You can change the order of all items, but you can also configure the interface so that only some items (for example, other than top and visual) can change the order, and clicking on each item can display an edit popup window.

The main page layout editing screen is divided into a menu (①) for moving to the sub page layout editing screen, a menu (②) for confirming the stored contents after the layout modification for each item, . Some items can be turned off if not in use.

The main page layout editing screen also includes a menu (④) for confirming the currently selected color theme, a menu (⑤) for distinguishing the content area (shadow processing for distinguishing the content area and the margin outside the content) And a menu (6) for selecting a color of a part (e.g., margin).

Fig. 10 shows an example of a pop-up window for editing the top item (logo and menu part) in the main page layout. When the upper item is clicked on the main page layout editing screen of FIG. 9, an upper item edit pop-up window as shown in FIG. 10 may be displayed. The user can set the upper layout in the pop-up window to set the upper layout - eg, background color range, logo and main menu alignment, main menu round size, sub menu alignment, sub menu bar length, When the button (1) is pressed, the contents to be changed are stored in the website DB 330 and the pop-up window is closed.

When the bottom of the pop-up window of FIG. 10 is synchronized, the serviceable table is updated in the Web site DB 330 and applied to the actual user's Web site.

Fig. 11 shows an example of a pop-up window for editing a visual item in the main page layout. When a visual item is pressed on the main page layout editing screen of Fig. 9, a visual item editing pop-up window (①) as shown in Fig. 11 can be displayed.

The user sets the layout of the visual in the visual item edit pop-up window, for example, area range, visual size, visual conversion method, color of the conversion arrow, and then press the 'Save' button (②) to save the changed contents and close the popup window.

12 shows an example of a pop-up window for editing a banner in the main page layout. When a banner item is pressed on the main page layout editing screen of Fig. 9, a banner item edit pop-up window as shown in Fig. 12 may be displayed.

The user sets the layout of the banner (for example, whether it is used, the number of images, the ratio of the image, the color of the text box, etc.) in the banner item edit popup window and then clicks the 'Save' button to save the changed contents and close the popup window.

13 shows an example of a pop-up window for editing the bottom item in the main page layout. When the bottom item is clicked on the main page layout editing screen of FIG. 9, a bottom item edit popup window as shown in FIG. 13 may be displayed.

The bottom item edit pop-up window is the user interface for editing the bottom part of the main page layout.

The user sets the layout of the lower part in the bottom item edit popup window - for example, the background color range, form, and whether to use it - and then press the 'Save' button to save the changed contents and close the popup window.

As described above, according to the embodiment of the present invention, the user can set the layout of the main page to a desired layout by selecting only the layout elements of the main page in the main page layout editing screen. In this way, the set layout settings can be stored as part of the user website data set in the website DB 310, according to the user's selection (e.g., input of the save button or selection of synchronization).

9 to 13, the main page layout editing screen has been described with reference to the main page layout editing screen. However, the sub page layout editing may be similar to the main page layout editing.

The content configuration module 240 can provide a content (content) editing screen as shown in Figs. 14 to 17. The content (content) editing screen is a page provided for editing and managing the contents of user web site contents.

Referring to FIG. 14, the content (content) editing screen can provide a layout content management menu (1) and a menu content management menu (2)

The layout content management menu (①) is a menu in which pages for editing the contents of the items set in the layout editing screen are gathered. The contents management menu (②) for the menu collects pages for editing and managing the contents There is a menu.

The content configuration module 240 may provide a page for editing the content (content) of the top item of the main page as shown in Fig.

The content configuration module 240 may also provide a page for editing the content (content) of the main page visual item as shown in Fig.

The content configuration module 240 may also provide a page for editing the content (content) of the main page banner item as shown in Fig.

15 to 17 show an example of editing and configuring a content corresponding to layout elements of a main page, but the content can similarly be edited and configured for a sub page.

The menu-specific content management menu (2) is configured to input content according to the implemented interface of each function of the submenu set by the site menu setting module 210. For example, in the case of a general bulletin board, it is possible to input contents of a title item and a content item, to attach a file through a file upload function, and to set additional functions such as usage, open time setting, and main page exposure.

As described above, according to the embodiment of the present invention, the user can conveniently edit the content corresponding to each layout element set in the layout setting module 230 in the content configuration module 240.

The present invention can also be embodied as computer-readable codes on a computer-readable recording medium. A computer-readable recording medium includes all kinds of recording apparatuses in which data that can be read by a computer system is stored.

Examples of the computer-readable recording medium include a ROM, a RAM, a flash memory, a CD-ROM, a magnetic tape, a floppy disk, and an optical data storage device.

The computer readable recording medium may also be distributed over a networked computer system so that computer readable code can be stored and executed in a distributed manner. And functional programs, codes, and code segments for implementing the present invention can be easily inferred by programmers skilled in the art to which the present invention pertains.

While the present invention has been particularly shown and described with reference to exemplary embodiments thereof, it is to be understood that the invention is not limited to the disclosed embodiments, but, on the contrary, is intended to cover various modifications and equivalent arrangements included within the spirit and scope of the appended claims. Accordingly, the true scope of the present invention should be determined by the technical idea of the appended claims.

The present invention can be used for manufacturing and managing a website (e.g., a home page).

Claims

A theme generating unit for generating a plurality of theme data sets including a plurality of layout setting values for each theme and resolution, and storing the generated plurality of theme data sets in a theme database;

A user editor for generating a user web site data set based on a user's selection based on a selected one of the plurality of theme data sets; And

And a site generator for generating a user website based on the user website data set,

The theme generation unit

A resolution-specific layout setting unit that provides an interface for setting resolution-specific layout setting values to the theme developer and generates layout setting values for each resolution according to input or selection of the theme developer;

A responsive screen operation viewer for generating and displaying a web screen according to the layout setting values set by the layout setting unit for each resolution; And

And a theme DB storing a value finally set by the resolution-specific layout setting unit,

The responsive screen job viewer

PC, tablet, terminal landscape, and terminal portrait,

A responsive website builder system for generating and displaying a web screen meeting the resolution of the selected menu according to the layout setting values corresponding to the resolution of the selected menu among the plurality of layout setting values according to the menu selected by the theme developer .
The method according to claim 1, wherein the plurality of layout setting values

A plurality of main page configuration items constituting a main page, and a plurality of sub page configuration items constituting a sub page,

Wherein each of the plurality of main page configuration items and each of the sub page configuration items includes one or more detailed item setting values.
3. The method of claim 2,

Wherein the detailed item set value is one of a non-responsive set value that does not need to be varied according to the resolution, and a reactive set value that needs to be varied according to the resolution.
3. The method of claim 2, wherein each of the main page configuration items and the sub page configuration items

A top, a menu, a logo, an upper visual, a banner, a bulletin board style, a gallery style, an input form style, and a bottom style,

The detail item setting value is

A responsive website builder system that includes at least one of color, size, and margin values.
The apparatus of claim 1, wherein the user editing unit

A site menu setting module for providing a user interface to add a sub menu to the bottom of the main menu and the main menu and to select a function of the menu; And

A theme selection module for providing a color theme setting menu for selecting a color set of a layout among the plurality of theme data sets stored in the theme database;

A layout setting module that can change a position and a detailed setting value of a set of margin, background, layout, and corner style among the plurality of theme data sets stored in the theme database; And

And a contents configuration module in which a user can register additional contents according to functions of each menu selected by the site menu setting module.
6. The method of claim 5, wherein the color theme

Means a specific set of values for which a single color, gradation degree, gradation degree, or transparency of the layout set by the theme generation unit is set,

Wherein the color theme setting menu provides a user interface that allows the user to select the color theme.
6. The method of claim 5,

Further comprising a website database for storing the user website data and setting values set by the user editor,

The user editing unit

Wherein the web site database system is configured to load and edit content registered for the user web site data set and function from the web site database, and to update the web site database with the changes and additions.
The system of claim 1, wherein the site generator

A website database storing the user web site data set and storing a value set by a user editing unit;

A CSS file generator for generating a cascading style sheets (CSS) file for each resolution based on first layout setting values of the user website data set stored in the website database; And

A responsive user interface module for generating a user website based on the CSS file and the second one of the user website data set.
Creating a plurality of theme data sets including a plurality of layout setting values for each theme and resolution;

Generating a user website data set based on a selected one of the plurality of theme data sets; And

Generating a user website based on the user website data set,

The step of generating the theme data sets

Providing an interface capable of setting layout-specific layout setting values to a theme developer, and generating the plurality of layout setting values according to input or selection of the theme developer;

Generating a web screen according to the layout setting values set by the layout setting unit for each resolution and displaying the generated web screen on the screen of the reactive screen operation viewer; And

And storing the value finally set by the resolution-specific layout setting unit in the theme DB,

The responsive screen job viewer

PC, tablet, terminal landscape, and terminal portrait,

And generating and displaying a web screen meeting the resolution of the menu selected according to the layout setting values corresponding to the resolution of the selected menu among the plurality of layout setting values according to the menu selected by the theme developer .
10. The method of claim 9, wherein generating the user website data set

Providing site menu templates for setting a site menu of the user web site, and setting one or more main menu and sub menu according to a user's selection; And

Providing a color theme setting screen for setting a color theme of the user web site, and setting a color theme of the user web site according to a user's selection.
11. The method of claim 10, wherein the setting of the main menu and the submenu comprises:

Providing a plurality of (two or more) main menu templates;

Activating at least one main menu of the plurality of main menu templates according to the selection of the user;

Setting a main menu name of the activated main menu;

Setting a submenu name of the submenu and the submenu at a lower end of the main menu; And

Setting the submenu to one of preset functions,

Wherein the page type or the style of the submenu is changed according to a set function of the submenu.
11. The method of claim 10, wherein the step of setting a color theme of the user website

Providing a menu for selecting at least one of a color, a margin, and a background of a main page and a subpage of the user web site; And

And providing a menu that allows the user to select a registered color set according to a single color, gradation degree, gradation degree, or transparency preset in the theme setting unit.
11. The method of claim 10, wherein generating the user website data set comprises:

And providing a main page layout editing screen capable of editing the layout of the main page and changing the order of the configuration items of the main page layout,

The configuration items of the main page layout

Top;

A content box containing visuals, banners, bulletin boards, galleries, and videos; And

A method of making a responsive website comprising a bottom.
14. The method of claim 13, wherein generating the user website data set comprises:

Further comprising the step of providing a content editing screen for editing the content of the content of the user web site,

Wherein the content editing screen includes a layout content management menu and a menu-specific content management menu.
10. The method of claim 9, wherein creating the user website comprises:

Generating a cascading style sheets (CSS) file by resolution based on first layout setting values of the user website data sets stored in the website database; And

And generating the user website based on the CSS file and the second layout setting values and the content of the user website data set.