IU

Responsive Web Page : Part 1 - Design

In this part, we are going to build responsive web page which response to browser size.

Click DOWNLOAD RESOURCE button and download image resources.

2015/07/06 

Required Widget : Box / Text / Cell / Carousel

Required Time : 40 min

STEP 01

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

STEP 02

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

Select Index in Structure menu and select Roboto Slab font in Text Tab menu. When you set font-family at index, affects to all of lower level element. (Unless you haven't set font-family at lower level element)

STEP 03

Change height value to 54 px to Header. Remove Centered Box and add a new Cell widget. You can modify Cell widget's font-family, font-weight, font-size, and color as same as Text widget. (Cell widget can have only pixel unit to height value)

STEP 04

In Style Tab menu, add a new Bottom Border as 1 px and change Border Color like below.

STEP 05

STEP 06

Remove Centered Box in Section, add a new Box widget. Change Relative - Left value to Position property to Box widet, and modify width / height value as 60% / 720 px. And then, create another Box widget at the right of first Box widget and change Position property as same as first one. Lastly, modify width / height value as 40% / 240 px. (Remove Section's height for responsiveness)

섹션센터박스삭제하고, 박스 위젯을 추가합니다. 포지션 Position 속성을 Relative / Left 로 변경하여 준 뒤, 너비와 높이를 각각 60%, 720px 로 설정하여 줍니다. 그리고 우측 영역에 박스 위젯을 하나 더 추가하여, 왼쪽 박스와 동일하게 포지션 속성을 변경하여 준 뒤 너비와 높이를 각각 40%, 240px 로 설정합니다. 마지막으로 섹션의 높이를 삭제하여 주면, 720px 만큼 조정이 됩니다.

Now, add a Carousel widget at the first Box widget. Set x / y position as 0 px / 0 px and change width / height value as 100%100%. Select Property Tab menu to change Carousel widget's properties like below (Item count / pagenation / arrow / autoplay)

STEP 07

섹션센터박스삭제하고, 박스 위젯을 추가합니다. 포지션 Position 속성을 Relative / Left 로 변경하여 준 뒤, 너비와 높이를 각각 60%, 720px 로 설정하여 줍니다. 그리고 우측 영역에 박스 위젯을 하나 더 추가하여, 왼쪽 박스와 동일하게 포지션 속성을 변경하여 준 뒤 너비와 높이를 각각 40%, 240px 로 설정합니다. 마지막으로 섹션의 높이를 삭제하여 주면, 720px 만큼 조정이 됩니다.

Add a Background Image for each item of Carousel widget. Select Style Tab menu and add a Background Image like below.

After add images, set Background Size option as Cover (2nd option). Lastly, set BG-Position value as Center / Center in Background Size Detail popup.

STEP 08

Add Box and Text widget to first item of Carousel widget like below. After that, set Position property as Absolute - Bottom and modify x / y position as  0 px / 0 px, width / height as 100% / 240 px . Lastly, select Style Tab menu and modify Opacity of Box widget as 0.95 in order to create transparent effect.

STEP 09

In order to give responsiveness to Text widget, set Text widget's width value as 93%. When finish creating Box widget, copy & paste this widget into another items of Carousel widget. Lastly, change number text in each item.

STEP 10

In the Box widget which is placed right side of Carousel widget, add a new Box widget to add images.

Set added Box widget's Position property value as Relative - Left, and modify width / height value as 56% / 100%.

Lastly, set Background Image to each Box widget and change Background Size value as same as Carousel widget item.

STEP 11

Add another Box widget at right side of Image Box widget. Set added Box widget's Position property value as Relative - Left and modify width / height value as 44% / 100%. Open Size popup and input to Calc-Height value as 100% - 1px. Set Border type value as Dotted, add a new Bottom Border as 1 px, and change Border Color like below. Lastly, set Text widget's height value as 80%.

STEP 12

?

Calc

After select Box widget which has width value as 40%, duplicate this 2 times by pressing Command (⌘) + D key. This Box widget has Position property as Relative - Left, so this widget will be duplicated to vertically align. Swap Background Image to duplicated Box widgets.

STEP 13

?

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

In the Part2, we will add Media Queries in order to fit browser size and transform our design dynamically.

STEP 14