IU

Blog-Style Web Page

We are going to build blog-style web page by using Box and Text widgets.

Click DOWNLOAD RESOURCE button and download image resources.

2015/03/12 

Required Widget : Box / Text / Image

Required Time : 40 min

Run File > New Project menu, choose Empty Page and click Choose Button at the bottom of window.

STEP 01

Open Resource Panel by running View > Resource menu. Click Import Resource Button and import Image Resource files which were downloaded.

STEP 02

Select Header in Structure menu and type 320 px in Height (H) input field. After type height value, select Style Tab menu on the top of program. Set bg_main.jpg as Background Image and select second-option (cover) as Background Size

(Cover option transforms image width to fit widget's width value)

STEP 03

After click Box widget to activate, click & drag on Background Image to draw a new Box widget. Type 140 / 140 px for created box widget's size and set Background Color. In Style Tab menu, input Border value by clicking Stepper to 10 px and set Border Color.

And set 80 px to Radius value in order to transform shape from box to circle.

Lastly, turn on Horizontal Center option to fix widget's position.

STEP 04

After click Text widget to activate, click & drag on Box widget which created at previous step to draw a new Text widget. 

Double-click on Text widget and add text content what you want. And select Text Tab menu, modify font options (font-family/size/color/align). Lastly, modify widget's size and position.

STEP 05

Move Box widget's position to bottom of the Header area. You can see Box widget has clipped by Header size.

In order to show complete size of Box widget,  you have to change Visible to Overflow property for Center Box and Header.

(Default value of Overflow property is Hidden)

STEP 06

And change text content, font-family, font-size, font-weight, and font-color about Text widget which was added on Canvas.

After that, move position of Text widget wherever you want.

STEP 07

Select Section1 and set 200 px to Height value. Click Add New Section Button and add a new Section.

In new Section, create Image box view like below by using Box and Text widget.

STEP 08

Click Image widget to activate, click & drag on Image box view. Select Property Tab menu and add image which is one of the imported resource. Click Fit to Widget Size Button to transform added image size to fit Image widget's size.

Lastly, fix Image widget's position and size to fit Image box view.

STEP 09

Duplicate Image box view by click & drag during pressed alt (option) key.
Change image in duplicated Image box view.

STEP 10

Finally, select Footer and change Background Color and Text content.

Now you can check current page in browser after click Build Button at the left-top of program.

(When clicked Build Button, IUEditor generates HTML & CSS & JS files based on your Canvas)

STEP 11

In this step, we are going to add another Page and add Page Link.

Click Add New Page Button and add a new Page. Header and Footer are will be shown as same view as Index Page.

STEP 12

In newly added Page, we are going to create Detail Image view which will be shown after click to title text of Image box view .

Copy & paste Text and Image widgets into newly added Page, modify size and position of widgets which was pasted.

Lastly, turn on Horizontal Center option to newly added widgets.

STEP 13

Open Event Panel by running View > Event menu. Add a new Page Link move to Page1 to title text of Image Box view in Index Page. And add a new Page Link to Index to Box widget in Header.

STEP 14

Congratulations! When click Build Button, you can see web page below in browser.

STEP 15

Responsive Web Page : Part 1 - Design

NEXT