Home > User Guide

Example of Adding Attribute to Slices

In the last article, we have sliced the image. Now we will add attribute to the (created) slices. To help you understand better how to do this, we will explain every step to you in detail. Once you have read this tutorial, you should have sufficient knowledge to create a webpage on your own!

Below is the sliced image. Now, lets start adding attribute to the created slices:

 

 

                    Five steps to add attributes:

 

Video: How to Add Attributes?

Video: How to Create Webpage?

 

 

 Step 1: Add Attributes to the Slices that Contain the Main Parts

 

No. 1 Slice

Because No. 1 slice has pure blue background color and usually the width of the navigation background is 100% width, so we can add attributes to No. 1 slice in the below way:

 

 

Optional: Please click the generate button to see what will happen after we have added the above attributes to the selected slice.

 

 

 

No. 2 Slice and No. 3 Slice:

Because No. 2 and No. 3 slices here are just used to position the layout, we dont need to add attributes to No. 2 and No. 3 slices here.

 

 

 

No. 4 Slice:

Because No. 4 slice has its own background color and usually the width of the footer background is 100% width, so we can add attributes to No. 4 slice in the below way:

 

 

Optional: Please click the generate button to see what will happen after we have added the above attributes to the selected slice.

 

 


 

 Step 2: Add Attribute to the Slices within the Navigation Part

 

2-1: No. 5 Slice

Because No. 5 slice here is just used to position the layout, we dont need to add attributes to No. 5 slice here.

 

 

 

2-2: No. 6 Slice

As we can see, the No. 6 slice is the logo of the webpage and usually the logo of a webpage/website is an image with hyperlink pointing to homepage, so we can add attributes to No. 6 slice in the below way:

 

 

Add a link to the No.6 slice:

 

 

 

Optional: Please click the generate button to see what will happen after we have added the above attributes to the selected slice.

  

2-3: No. 7 Slice 


As we can see, No. 7 slice actually is one of the navigation items. Usually, the navigation items are texts with hyperlink pointing a target page, so we can add attributes to No. 7 slice in the below way:

 

 

Add a link to the texts (Home) we have entered into No.7 slice.

 

 

Note: The same way can be applied to those slices that contain the other navigation items - No.8, 9, 10, 11 slices.

Optional: Please click the generate button to see what will happen after we have added the above attributes to the No.7 slice.

 

 

 
 

 Step 3: Add Attribute to the Slice that Contains the Banner

 Here, we can simply set the banner as an image on the webpage and add a link to it:

 

 

 

Optional: Please click the generate button to see what will happen after we have added the above attributes to the selected slice.

 

 


  

 Step 4: Add Attribute to the Slices that Contain the Three Blocks

 

The way to add attributes to the above 3 slices are the same, so I will only show you how to add attributes to No.13 slice.

 

4-1: Add a Background Color to No.13 Slice

 

 

4-2: Add Texts to No.13 Slice 

Please make sure you've selected the No.13 slice like the picture shown above and then add texts to the block in the following way:

1) Click the HTML button to Add Texts to No.13 slice.


 

2) Set the Styles for the Texts You Added.

 

 

 

3) Set the Padding Attributes

The padding attributes here will define the spacing distance between the texts you entered and the No.13 slice's border.

 

Optional: Please click the generate button to see what will happen after we have added the above attributes to the selected slice.

 

 

 
 

 Step 5: Add Attribute to the Slice within the Footer Part

 

 

Summary: Please CLICK HERE to view the created webpage. Note: You dont have to add attributes in exactly the same way as we do. Please simply keep it in mind that you just need 2 main steps to add attribute to a slice - 1. Select the slice; 2. Add attribute to the selected slice through the attribute setting area. With SliceMaker products, you can add various attributes to the selected slice including drop-down menu effect, sliding door effect, image switching effect, scrolling and movement effect, etc.

 

 

 

 Contact Us for Help

If you cannot find a proper solution to your issue through the above methods, our support team is always on standby for whatever problems youve got. We promise to you we will deal with your issues within 24 hours. Contact Our Support Team

 

 

 

 

Whats Next:

 

Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0