KR101332669B1 - Method for homepage design - Google Patents

Abstract

The present invention relates to a homepage production method, and more particularly, to a method for producing a stacked homepage utilizing a browser resource.
To this end, a method of manufacturing a homepage using the production tool of the present invention produces a homepage in which a layer capable of inputting text or an image is laminated.

Description

How to create a stacked homepage using browser resources {Method for homepage design}

The present invention relates to a homepage production method, and more particularly, to a method for producing a stacked homepage utilizing a browser resource.

Up to now, most homepage productions are requested to be produced by a manufacturer, and a developer or a web designer designs a screen, develops a program according to the screen design, designs a design, and produces a homepage.

In recent years, however, Internet portal companies such as Daum Cafe, Blog, Naver Blog, and Samsung SDS's internal (intranet) groupware (Acube) have created a certain composition on the grid (desktop or page) in advance. There is also a way to create a homepage in the form of changing the location of various functions within.

1 illustrates an example of setting a layout in a NAVER blog. As shown in FIG. 1, the layout set in the Naver blog is limited to a fixed form or a form that can be modified within a limited range, and does not provide various types of layouts that match a user's preference.

Specifically, the manufacturing tool described above has a problem in that it is not possible to make various sizes of functions (aka, "pages" or "skins") because it is a form of changing only the positions of functions within a certain composition.

First, the "grid (desktop or page)" is composed of the top main menu, the left menu, the middle screen, the right menu, the bottom, as shown in the regular composition. The top menu consists of main menu and sub menu which are the biggest concept of homepage, and the bottom menu is about company, personal information management policy, advertising inquiry, brief company introduction (business number, mailing report number, telephone, fax, address). , A representative's name, and email).

The left menu includes functions such as login, customer center information, administrator information, visitor statistics, etc. The right menu consists of announcements, visitor status, banner links, and schedule management. In addition, the center screen is generally composed of news, product introduction, banner advertisement, gallery, etc., and the screen frame is fixed so that it is difficult to adjust the screen size. There is no problem.

Second, there is a problem that can not be arbitrarily adjusted for each screen size that the horizontal size of the left screen, the center screen, the right screen is fixed. Therefore, blogs or cafes have fixed skins and only change their location.

Third, most blogs or cafes do not have a shopping mall function that can be found on a general homepage, so there is a limit to the function (skin).

Fourth, the general homepage production except for blogs and cafes has a problem in that it costs a lot of money because the homepage is commissioned by the homepage manufacturer. In addition to Naver blogs, Daum Cafe has similar problems.

Therefore, various technologies are available to the user to freely create a homepage. For example, Korean Patent Application Publication No. 2011-0024484 (Homepage production system and method using an extension form) and Korean Patent Publication No. 2010-0000683 (Resource integration operation and management system for homepage production) are disclosed.

The problem to be solved by the present invention is to propose a method that can easily produce a homepage by integrating and operating a tool or various resources required for homepage production.

Another problem to be solved by the present invention is to propose a method for reducing the cost and production time of the homepage by simply making a homepage.

Another problem to be solved by the present invention is to propose a method for reducing the transmission capacity to produce a home page and transmit it to the server.

To this end, a method of manufacturing a homepage using the production tool of the present invention produces a homepage by stacking layers capable of inputting text or images, and transmits the encrypted source code of the homepage to a server.

The production tool includes a layer information production tool including a production tool for creating and deleting layers, a page information production tool including a production tool for creating, deleting, modifying, and storing pages, and a production tool for creating and deleting folders. Includes a folder production tool that includes, the layer information production tool includes a layer addition, layer deletion, layer size, layer color, layer transparency items. In addition, the page information production tool includes a page addition, page storage, page modification, page deletion, page copy items.

In the homepage production method according to the present invention, a user who has only basic knowledge such as Korean document, picture document, editing, etc. can easily produce a homepage, thereby reducing the production cost and production cost of the homepage. When added, complex homepage production can be easily produced, and the homepage can be produced according to various devices. That is, the homepage can be produced according to various devices such as a mobile device and a desktop PC.

1 illustrates an example of setting a layout in a NAVER blog.
2 shows a main screen including a production tool for producing a homepage according to an embodiment of the present invention.
3 to 39 illustrate a production process of manufacturing a homepage using a production tool according to an embodiment of the present invention.

The foregoing and further aspects of the present invention will become more apparent through the preferred embodiments described with reference to the accompanying drawings. Hereinafter will be described in detail to enable those skilled in the art to easily understand and reproduce through this embodiment of the present invention.

2 shows a main screen including a production tool for producing a homepage according to an embodiment of the present invention. Hereinafter, the functions of configuring the main screen for manufacturing the homepage according to an embodiment of the present invention will be described in detail with reference to FIG. 2.

Wallpaper (grid)

The grid is the basis for creating pages. There are two ways to resize the grid. You can adjust the size by entering a number in the width and height input window at the bottom left, or by dragging the point at the bottom right of the grid. By resizing the grid, it is possible to produce a homepage to meet the monitor specifications of smartphones, tablet PCs, netbooks, notebooks, and general PCs. That is, the homepage may be manufactured by adjusting the size of the grid according to the device providing the homepage.

* Preview and reset function

Preview function is a function to preview the entire page created on the grid (web). The reset function is implemented as a runtime program based on asynchronous communication, and performs a refresh function on the web when a refresh is required.

* Folder Information

Folders are a category of pages organized by function. To create a folder, click the Add Folder button, enter a folder name, and the folder name will be displayed in the page design. The folder name is also used as the main menu on the top or left side of the homepage, and it is also linked with the navigation (navigation button) function in the Add function.

Page Information

A page is a collection of all layer or module (WRAP) functions in a grid. The page name is also used as the submenu of the top menu or the submenu of the main menu on the left, and it is also linked to the navigation (navigation button) function. Pages can be deleted, saved, modified, or copied. In particular, the copy function can batch copy pages and all functions (including designs) implemented in WRAP. A module (WRAP) is the smallest unit that contains the features and design in a layer. For example, 'login' refers to a standard of login WRAP. Functional design allows us to recognize features as page objects and create feature instances.

* Layer Information

A layer is a frame into which images, backgrounds, texts, and various functions can be put in a grid for each page. When a layer is collected, a layer becomes a module (WRAP). Layers can be added / deleted. The size of the layer can be arbitrarily adjusted (width / height) by dragging with the mouse, or it can be adjusted by entering a value.

The property of a layer is divided into X value, Y value, and Z value. The X value indicates how far from the left in the X coordinate, the Y value indicates how far from the top in the Y coordinate, and the Z value indicates the position of the layer when multiple layers overlap and below it. The lower the number, the higher the value.

In addition, the layer may be colored or may be transparent. Color change can be applied by selecting the color using the color palette created by clicking the Modify button, and directly (English, red, white, green, yellow, etc.) or code value (# b5c4d9 = current background color, etc.) You can also apply by typing. To change the layer color to 'transparent', delete the fixed value (# b5c4d9) and click the Modify button.

Transparency is a value that controls the transparency of images, text, and so on. The default (maximum value) is '1', which allows you to adjust transparency in decimal units.

Table 1 shows a function performed by using the production tool of the homepage proposed by the present invention.

function detail of fuction background If you put a background, the browser displays the full screen.
(The function has the background repeat or apply and release once) image Inserts backgrounds and images into layers. Navi It is a means to move to a page, and it is a function to move to a menu and a sub menu. notice board It refers to general BBS functions. The types are general bulletin board type, gallery type, and calendar type. Sign Up Member registration / modification / deletion can be done in member DB. There is a function of membership registration procedure, membership registration (agreement agreement, ID / password registration, etc.). text It is the function to link in the form of image or text and to design general layer or WRAP. Sub Bulletin Board A bulletin board that displays only certain posts among several articles registered on the bulletin board. In addition, it is a function to connect the sub bulletin board and the real bulletin board by one click (one click).
In addition, there is a module bulletin board function to modularize only the necessary bulletin board among the multiple bulletin boards to display collectively. Order Board Custom boards (e.g. online order form) font Each page has font size, family, thickness, and color functions and can be designed. Flash Insert Flash on pages and layers. pop-up Creates a page with a certain size and displays it on a specific location on the homepage. Quick Menu It is located in a certain area such as the right or left side of the homepage, and it always moves together so that it can be displayed on the top even when the scroll bar is moved up and down. Copy function Copy a layer. Insert function Paste the copied layer on the page. In folder
Go to page Changes the page position (upper / lower) within the folder. category Insert and delete the category of the shopping mall. Product Registration Insert and delete product list.

In addition, various functions may be included in the homepage production tool. Hereinafter, the process of manufacturing the homepage using the drawings will be described in detail.

3 shows an example of producing a main page. The main page is produced using a folder called an index, and an index folder is an essential folder, and an index page is also prepared in advance as shown on the left side of FIG. As described above, the size of the main page can be adjusted in units of pixels, and there is a method in which a user directly inputs a number into an input window and adjusts the size by dragging a mouse. 3 illustrates a method in which a user directly inputs a number into an input window and adjusts a size by dragging a mouse.

Click on the left index page to create a company log. When you click an index page, the Delete / Save / Modify / Copy Page button is displayed. Click the 'Add' button in 'Layer Information' on the right side of the main screen shown in FIG. Then click and drag the mouse pointer on the layer to adjust the size to the desired position.

To create and delete a folder, click the Add Folder button in the folder information, enter the folder name in the pop-up window, and click the Add Folder button. To delete a folder, click the created folder and click the Delete button (X). do.

4 shows an example of creating a layer for creating a company log. As described above, the layer may adjust size, position, color, transparency, and the like. After clicking the save button on the index page, a function addition menu ② is created as shown on the right.

After the above process is performed, the function is added to the generated layer ③. The order of uploading image while adding a function is to click on the layer and then click on the 'Image' menu under 'Add function'. Find and upload your company log, insert the image, and click the Save button on the index page.

Hereinafter, the method of linking an index page (main page) to a company log will be described. If there is an image in the layer, you must delete the image. To delete, select the company log layer, click Image from the Add function menu, and click Delete to delete the company log image.

To link the main page to the company log, click on the layer and click on 'Text' in the Add function menu. Then click the 'Picture' button at the bottom of the popup window. After finding the company log image in 'Browse', click 'Upload Product Image' and click 'Register Detailed Page Picture' in the pop-up window. Click 'URL' to paste the URL of the main page and click the OK button. After that, click 'Insert' in the pop-up window and click 'Close'. To remove the background color from the company log layer, click on the layer as described above, delete the color of the layer information, and click the Modify button. To check the URL, you can click the page and click Preview to check the main page address, drag and copy the URL address, or save the URL address as a text file beforehand.

5 to 7 illustrate a series of processes for linking a main page to a company log.

The top menu is created by the following process. First select 'About' from the folder, and enter 'greetings' in the blank. Then click the Add Page button, and click the OK button in the pop-up window. 8 illustrates a process of generating a top menu. In the same way as described above, the page can be created in the Company Introduction, Business Introduction, Product Introduction, Online Quote, Customer Center, and other folders.

Hereinafter, the company introduction method using navigation will be described. First, click the 'Add' button in the layer information, and add a layer by clicking the 'Save' button in the index page (see FIG. 9). Click the 'navigation' button in the Add function, and click the 'navigation setting' button (see Fig. 10). Move the top layer to the left (right), click Change skin in the company introduction, and upload the image to apply to the server. Uploads can be batch uploaded one by one or by continuing to browse (see Figure 11). Click on 'Close' of each layer and click 'Navi' again (see Fig. 12). Click 'Change Skin' to change the skin of the company introduction (see Figure 13). Move the upper layer to the right to check the company introduction image and click 'Change Skin' (see Figure 14). When the skin is applied, the two layers are combined into one (up / down) (see FIG. 15). Click 'Delete' at the top center of the overlap, and click 'OK' in the 'Save' and popup (see Figure 16). Select the layer again and click 'Navi' in the Add function to display the company profile with the image applied before the company profile (see Fig. 17). If you click 'Navi' in the Add function and click 'All' in the pop-up window, skins such as company introduction, business introduction, product introduction, online quotation, and customer center are applied as in the background. Then click 'Close' in the popup (see Figure 18). Drag the mouse point of the layer to adjust the skins such as company introduction, business introduction, etc., click and hold the mouse on the layer skin and adjust the position by dragging, and click 'Save' on the index page (see Fig. 19). Finally, the background color of the layer is changed (see FIG. 20).

Hereinafter, the method of inserting the main image into the index page will be described. The process of adding an image to a layer has been described above, but will be described later. First, click on the 'Add' button in the layer information, and then click on the 'Save' button on the index page. Then browse to the image and click 'Upload Picture.' Once uploaded, click 'Into Picture' to enter the image into the layer. Then click Close, click Save, resize the layer, delete the color, and click Modify.

If the menus and layers overlap and the menu's submenus are not displayed, two methods are used to display the submenus. The Z value of the menu may be larger than the Z value of the image, or the Z value of the image may be set smaller than the Z value of the menu. 21 to 22 illustrate a method of inserting a main image.

Hereinafter, a method of inserting a sub image into an index page will be described. Click 'Add' in the layer information, adjust the size appropriately and click the modify index button. In the sub image, the announcement method and the product introduction method generate three additional layers through an additional button in the layer information. The image is inserted into the two layers through the 'image' button, and the other layers display the bulletin of the notice board. Add one layer to the layer, and make the product appear on the added layer. In this case, create a product page in advance and set a link. To insert an image such as business hours in the sub image, create a layer, adjust its position and size, and click the Save button. After that, click the image button to find the image and upload it to the server, put the image as a picture, and then click the close and save button. 23 to 24 illustrate a method of inserting a sub image.

Hereinafter, the process of generating a login page will be described. First, let's look at the process of designing a page. Fig. 25 shows a diagram of designing a login page. Click the login page in the Miscellaneous folder. Resize the page. Create a layer as shown in ① to ⑩ and make the appropriate size or arrangement. Then click Save and perform the required action (resize and position the layer, insert an image, or link) as shown in ⑪.

In the left menu, click the corresponding layer as shown in FIG. 26, click the Navigator button in Add Function, select the vertical folder in the pop-up window, click Close, remove the color if necessary, and finally click the Save button.

When the layers overlap, for example, when there is a need to prevent the folder name 'Other' from being displayed, the submenu may not be displayed as the image below. To prevent the folder name other from being displayed, adjust when three layers (①, ②, ③) are overlapped as shown in FIG. 27, and adjust the layers (①, ②) as shown in FIG. You can change the Z value of).

Hereinafter, a process of generating a login screen will be described.

First, an ID and password input screen is generated (see FIG. 29). In other words, click the 'Login' button in the Add function by clicking the layer. Click the Insert button in the pop-up window, click Close pop-up window, and click the Save button.

Create a member registration and ID / password screen as follows. Add a layer, click on a layer, click the Membership button in the Add function, and then click the Register / Add ID Find button in the pop-up window. Click 'Close' in the pop-up window and then click the Save button (see Figure 30).

Here's how to put a background (border) on a login: Add a layer and add image through 'Image' button in Add function. In this case, layer ⓛ should be located at the bottom of the three layers, so set the Z value lowest. Finally, remove the color values of layers ② and ③, click the Modify button, and click the Save Login Page button (see Figure 31).

In the above-described manner, it is possible to generate pages such as terms and conditions / member information, online quotations, announcements, product introductions and the like.

In addition, copying functions and inserting functions are available. Copy features and add features are useful for copying the same layer to the same location on each page. To copy a function, select the layer to copy the function (①) and click the function copy (②) button. Enter the name to copy in the pop-up window and click the Copy Layer button. After that, click the OK button in the pop-up window (see Fig. 32). ☜ Image change required

To insert a function, select a page to copy, select a layer to copy, and click the Insert button. In the pop-up window, click Paste and then click the Close button. Finally, click on the page save button (see Fig. 33). ☜ Image change required

Hereinafter, the process of creating a quick menu will be described. Adjust the index page size. Add a layer and click. Select Quick Menu, then click Quick Menu in the pop-up window. Click on the OK button in the pop-up window (see Fig. 34).

The same or similar pages utilize existing pages by using page copy. In other words, click the index page to open it, and click the copy button. When the OK button is clicked on the pop-up screen, the entire index page is copied (see FIG. 35).

To change the page name and change the folder location, click the page to be changed, click the modify page button, select the folder to be located in the popup window, enter the name of the page to change and click the save button (see FIG. 36). If you click the save button, the pop-up window comes up again. Click the OK button and then click Close on the remaining pop-up screen (see Fig. 37).

In addition, page movement in a folder is performed in the following order. For example, the method of moving the 'directions' page of the company introduction over the 'greetings' is moved to the 'greetings' by dragging the 'directions' with the mouse (see FIG. 38). When the movement is completed, a popup window indicating that the page order has changed is displayed (see FIG. 39). In this case, the changed page is applied directly to the submenu of the top menu and the left menu.

Hereinafter, the function proposed by the present invention will be described in detail once again.

1. How to create and delete folders.

Create Folder: Click the Add Folder button in Folder Info → Enter Folder Name → Click Add Folder button

Delete folder: Select folder → click delete button

2. Create and delete pages

Create page: Select folder from page information → enter page name → click add page button

Delete page: Select page → Delete button

3. Create and delete layers

Layer creation: Select the page (click) → click the add button in the layer information → adjust the position, size, color, etc., click the save button

Deleting a Layer: Select the page → Select Layer → Click Delete button in Layer Information → Click Save button

4. How to link to an image (picture)

Create layer (click Add button) → adjust position and size → click save button → click layer → click text button → select picture button in pop-up window → find relevant picture and upload product image → click 'register picture page' → Select → Click URL Copy to dictionary (CTRL + C) Paste to URL address (CTRL + V) and click OK button → Click Insert button → Close popup (X) → ⑬Background (delete and modify) → ⑭Save button click

5. How to link to text

Create layer (click add button) → adjust position and size → click save button → click layer → click text button → enter text in popup window → select text (inverted) → click URL and copy to dictionary (CTRL + C) Paste it in (CTRL + V) and click the OK button → click the Paste button → close the popup (X) → click the Delete / Modify Color button → click the Save button

6. How to delete linked images and text

Click the layer → click the text button → click the minus button → close the popup (X)

→ Click Save button

7. How to put a picture or background on a layer

Create layer (click Add button) → adjust position and size → click save button → click layer → click image button → find the image in popup window and click upload image → select as picture or as background → close popup (X) → color Click Delete and Edit button → Click Save button

8. How to delete a picture or background on a layer

Select layer → click image button in add function → click delete → close popup (X) → click save button

9. Copy page (Advantage: Create a page such as logo, top menu, bottom menu, left menu, etc., and copy it to create another page with simple modification.)

Click the page to copy → click the Copy button → click the OK button on the popup screen

10. Rename page and change folder location

Click the page → click the Edit button → select the folder in the popup screen and enter the name of the page to change → click the Save button → click the OK button on the popup screen → close the popup window (X)

11: Create left menu

Click the corresponding layer → click navigation button in add function → select "vertical folder" in popup window → click close (X) → click color delete and modify button if necessary → click save button

12: Layer display method when layers overlap

Adjust the Z value of the layer to place the layer. The lower the Z value, the lower the layer.

13: how to check the URL address of each page

Click the page → click the preview → Copy the address bar at the top → Save as TEXT (or Korean)

14: Create a new page (eg, how to create a "member's page" in other folders)

The login page is created. Click the login page → click the Copy button → click the OK button in the popup → click the Modify button → select the folder to save, enter the name of the page you want to change and click the Save button → click Close (X)

15: Copy Function and Insert Function

Copy function: Select the layer to copy the function. → Click the Copy Function button. → Enter the name to copy in the pop-up window and click the Copy Layer button (some not proper names) → Click the OK button in the pop-up window.

Function insertion: Select a layer to copy. Click the Insert Function button. Click Paste in the pop-up window. Click Close (X). Finally click the Save Page button.

16: How to create a bulletin board (general type, data type (gallery type))

Create new layer → click board button → click add board button in popup → input board name and board code value in new popup → click create board button → click insert button in new popup → click close (X) → If necessary, click the Delete or Modify Color button → Click the Save button

17: How to move pages in a folder

Select the folder. → Click the page you want to move to the desired page location.

In addition, the present invention compresses and encrypts the source code that produced the page and transmits it to a server and stores it in a DB. That is, by compressing and storing the data, the storage capacity stored in the server can be reduced. For example, if the size of the source code of the uncompressed web page of the web page is 22KB, compressing the file is reduced to 5KB.

While the present invention has been particularly shown and described with reference to exemplary embodiments thereof, it will be understood by those of ordinary skill in the art that various changes in form and details may be made therein without departing from the scope of the present invention .

Claims (11)

In the method of making a homepage using a production tool,
Stack layers that allow you to enter text or images.
If more than one layer is overlapped, the home page production method characterized in that a specific layer is expressed using the Z value included in the layer information production tool including a production tool for creating or deleting a layer.
The method of claim 1, wherein the source code of the home page is encrypted and transmitted to a server.
The method of claim 1, wherein the production tool
A homepage production method comprising: a page information production tool including a production tool for creating, deleting, modifying, and storing a page; and a folder production tool including a production tool for creating and deleting a folder.
According to claim 3, The layer information production tool,
How to create a home page, characterized by adding layers, deleting layers, layer size, layer color, and layer transparency.
According to claim 3, wherein the page information production tool,
How to create a home page, which includes adding pages, saving pages, modifying pages, deleting pages, and copying pages.
6. The method according to any one of claims 4 to 5,
Create backgrounds that display images across the screen, images that insert backgrounds in layers, navigation that move pages, text that can be linked in images or text, flashes that insert flashes on pages or layers, and create pages of a certain size Pop-up, located on the right or left side of the homepage, and includes additional functions consisting of a quick menu that moves simultaneously when moving the scroll bar up and down, copying a function to copy a layer, and inserting a function to paste the copied layer. Homepage production method.
The method of claim 6, wherein the layer size,
Dragging the displayed layer, or inputting a specific number to the width, height items included in the layer information production tool, characterized in that the home page production method.
delete The method of claim 6, wherein the method of linking a specific page to a specific layer comprises:
Selecting an image displayed on the layer by clicking the text, and matching and storing the selected image with a URL of a specific homepage.
10. The method of claim 9, comprising a module composed of a plurality of layers, and copying the configured page to form another page.
The method of claim 6, wherein the function addition item
The method of manufacturing a homepage, characterized by further including a category for putting and deleting a shopping mall category and a product list for putting and deleting a product list.

Images