KONGU ARTS AND SCIENCE COLLEGE [AUTONOMOUS]

CODE PRACTICAL - VI

GOOGLE

WEB DESIGNER LAB

21PBKCP211
 1. ADVERTISEMENT
AIM:
To create an advertisement using Google Web Designer.

ALGORITHM:
STEP 1 Open Google Web Designer.
STEP 2 From the launch screen, click Create New File or click File -
>New.
STEP 3 In the “Create New Blank File” dialog, choose Banner as the
ad type.
STEP 4 Give the ad a name (required). This will be the name of the
HTML file.
STEP 5 Choose the location where you want to save the file. You can
save your file locally on your computer, or save to Google
Drive.
STEP 6 Select Display & Video 360 as the ad serving environment.
STEP 7 In dimension either check “Responsive layout” to create an
ad that automatically sizes to match the viewport or ad slot
it’s displayed in, or set the dimensions for the ad if you know
the specific size.
STEP 8 Common banner sizes are listed in the dropdown list. If you
want to use a size that isn’t listed, select Custom from the dropdown,
and enter the width and height manually.
STEP 9 Select the animation mode that you want to use
initially quick mode lets you animate your ad scene by scene,
while advanced mode lets you animate individual elements
on their own timeline.
STEP 10 Click ok. Google Web Designer creates a banner page sized
to the banner size you specified.
STEP 11 Add images, video and other assets by dragging them into the
work area, or by using image tags.
STEP 12 Arrange your images and any other elements you want to
use on the stage.
STEP 13 Add events to the ad if needed.
STEP 14 Select preview to see the preview of the ad.

OUTPUT:
 2. ANIMATED ADVERTISEMENT
AIM:
To create an animated advertisement using Google Web Designer.

ALGORITHM:
STEP 1 Open Google Web Designer.
STEP 2 From the launch screen, click Create New File or click File ->
New.
STEP 3 In the “Create New Blank File” dialog, choose Banner as the
ad type.
STEP 4 Give the ad a name (required). This will be the name of the
HTML file.
STEP 5 Choose the location where you want to save the file. You can
save your file locally on your computer, or save to Google
Drive.
STEP 6 Select Display & Video 360 as the ad serving environment.
STEP 7 In dimension either check “Responsive layout” to create an
ad that automatically sizes to match the viewport or ad slot
it’s displayed in, or set the dimensions for the ad if you know
the specific size.
STEP 8 Common banner sizes are listed in the
dropdown list. If you want to use a size that isn’t listed,
select Custom from the dropdown, and enter the width and
height manually.
STEP 9 Select the animation mode that you want to use
initially quick mode lets you animate your ad scene by scene,
while advanced mode lets you animate individual elements
on their own timeline.
STEP 10 Click ok. Google Web Designer creates a banner page sized
to the banner size you specified.
STEP 11 Add images, video and other assets by dragging them into
the work area, or by using image tags.
STEP 12 Arrange your images and any other elements you want to
use on the stage.
STEP 13 Create animations or bring components onto the page.
STEP 14 To creating a Responsive ad, add breakpoints, then restyle
each new size range.
STEP 15 Add events to the ad if needed.
STEP 16 Select preview to see the preview of the ad.

OUTPUT:
 3. WEBSITE CREATION USING CODE
AIM:
To develop codes using Google Web Designer.

ALGORITHM:
STEP 1 Open Google Web Designer.
STEP 2 From the launch screen, click Create New File or click File -
>New.
STEP 3 In the “Create New Blank File” dialog, choose HTML from
others.
STEP 4 Give the ad a name (required). This will be the name of the
HTML file.
STEP 5 Choose the location where you want to save the file. You can
save your file locally on your computer, or save to Google
Drive.
STEP 6 Give the title to the project if needed.
STEP 7 Select the animation mode that you want to use initially. Quick
mode lets you animate your ad scene by scene, while advanced mode
lets you animate individual elements on their own timeline.
STEP 8 Click ok. Google web designer creates a work space.
STEP 9 Click the code view tab and develop an ad using code.
STEP 10 Click the preview tab to see the preview of the ad.
CODING:
<html>
<head>
<title>Home</title>
<style>
img{
height:50%;
width:50%;
}
.aj img{
height:50%;
width:50%;
}
.card{
float:left;
width:50%;
height:100%;
}
</style>
</head>
<body>
<hr>
<center>
<h1>
<b>SKYTECH</b>
</h1>
</center>
<hr>

<div clsss="aj">
 <center>
<img src="C:\Users\ADMIN\Downloads\offer.jpg">
</center>
</div>

<div class="card">
<img src="C:\Users\ADMIN\Downloads\iphone.jpg">
</div>

<div class="card">
<h2>
<b>
<u>Iphone 12 pro</u>
</b
</h2>
<p>
Prize:<s>85,000/-</s>
</p>
<p>
Offer:65,000/-
</p>

<h3>
<b>
<u>Storage</u>
</b>
</h3>
<p>
65GB ROM|8GB RAM
</p>
 <h3>
<b>
<u>DISPLAY</u>
</b>
</h3>
<p>
FHD+ AMOLED
</p>
<h3>
<b>
<u>CAMERA</u>
</b>
</h3>
<p>
20MP|FRONT<br>
16MP|BACK
</p>
<h3>
<b>
<u>BATTERY</u>
</b>
</h3>
<p>
5000MAH battery<br>
</p>
<hr>
</div>
</body>
</html>
OUTPUT:
 4. WEBSITE CREATION USING VARIOUS MEDIA
AIM:
To design a website using various media added to it such as
images, videos and others.

ALGORITHM:
STEP 1 Open Google Web Designer.
STEP 2 From the launch screen, Click Create a new File or Click File -
>New.
STEP 3 In the Create new Blank File dialog, choose Banner as the ad
type.
STEP 4 Give the ad Name. This will be the name of the HTML file.
STEP 5 Choose the location where you want to save the file .You can
save your file locally on your computer, or save to Google Drive.
STEP 6 Select Display & Video as Customized and save the Banner
STEP 7 Set the Banner Size Click the Properties Width 1000px and
Height 1000 px.
STEP 8 Click Element tool and draw a mean bar (Logo of the website)
& Title bar (website name) Click the Properties set a Width 1000 px and
Height 45 px.
STEP 9 Click Components Select Transition Gallery fit under the Title
bar and Click the Properties set a Width 1000px & Height 600 px.
STEP 10 Double Click on the bottom right side of the Transition
Gallery, Select the image (any 5 image) and Select Auto-play checkbox,
set the Interval time 1.5s and set Repeat 100 Click save button.
STEP 11 Create four Simple ad using Element tool (with non-Colour)
Click the Properties set a Width 197px & Height 194px past it top of the
Transition Gallery.
STEP 12 Create four YouTube boxes, Click Components and Select
Media -->YouTube, paste into the Banner.
STEP 13 Copy the YouTube link, Click the Properties -> URL paste the
URL link.
STEP 14 Select Preview to View the Website.

OUTPUT:

5. DYNAMIC WORKFLOW
AIM:
To create a dynamic workflow using Google Web Designer.

ALGORITHM:
STEP 1 Open a creative in Google Web Designer. When you make a
creative for Studio, make sure to select "Display & Video 360" as the
environment.
STEP 2 In the Events panel, click the Dynamic tab.
STEP 3 At the bottom of the panel, click Add dynamic bindings . The
Dynamic Properties dialog opens.
STEP 4 Select Custom schema as the data schema type.
STEP 5 Sign in to the account you use with Studio.
STEP 6 Enter the account name that contains the profile you want to
use.
STEP 7 Enter the name of the advertiser you want to upload your
creatives to.
STEP 8 Select the Studio profile you want to use. This will connect the
data in your Studio profile to Google Web Designer so you can bind data
to elements in your creative.
STEP 9 Create a new binding using the Dynamic panel or On the stage
and select Dynamic bindings... from the pop-up menu.Right-click the
element that you want to bind.
STEP 10 Select the Element for the data binding.
STEP 11 Select the Element attribute.
STEP 12 Select the Data schema object.
STEP 13 Optionally, apply a filter to reformat the data.
STEP 14 Repeat the steps above to add another binding, or click OK
when you're done.
STEP 15 Create a dynamic call to action with the Tap Area component.
STEP 16 Use a feed to create a dynamic preview.
STEP 17 Open the Dynamic panel and click the Sample Data tab. At
the bottom of the panel, click Import sample data .
STEP 18 Select Preview to View the workflow.