How to Create Chessboard using Adobe Dreamweaver ?

6117

Hi friends, now you can enjoy the code to create chessboard in simple steps. First of all I am going to give you the coding that how to make chessboard with different dimensions as well as various colours according to users demands. Before that you must understand something that what are the software requirements and  how to use them.
1. XAMPP
2. ADOBE Dreamweaver
First we will discuss about XAMPP server that what it is and what are the functionalities. XAMPP is open server cross platform web server package. It is basically used by developer and designer for testing their work on particular system without the access of internet. XAMPP is an acronym for: Cross-Platform(X), Apache(A), MySQL(M), PHP(P),Perl(P).
You can download the server from here: XAMPP Server. The file Size is approx 126MB.

Steps to install XAMPP Server to Create Chessboard:

Follow these steps to install the XAMPP server on your system.
Step 1: First of all disable the antivirus on your system.
Step 2: After that right click on the setup and run it as an administrator. Now you will see a window like this:

XAMPP Setup to Create Chessboard
XAMPP Setup to Create Chessboard

Click on next button.
Step 3: After clicking, the window will appear like this and again click on next button again.

XAMPP Installation to Create Chessboard
XAMPP Installation to Create Chessboard

Step 4: Select the path where you want to install the server

XAMPP Installation Path Selection to Create Chessboard
XAMPP Installation Path Selection to Create Chessboard

Step 5: Again click next button

XAMPP Installer to Help Create Chessboard
XAMPP Installer to Help Create Chessboard
Step 6: Now, the window will appear click again next and it start installing then the setup will installed automatically it will take few minutes to install. Finally the setup has been installed on your system successfully.

WHAT IS ADOBE DREAMWEAVER?

Adobe Dreamweaver  is a platform for designing and developing the code on real time. By real time I mean that whatever you are writing in the code section the design part will appear at that moment.
The Adobe Dreamweaver support many languages in different format. Some of them are as follows:

  • Active Server Pages (ASP)
  • C#
  • Cascading Style Sheets (CSS)
  • Extensible HyperText Markup Language (XHTML)
  • Extensible Markup Language (XML)
  • HyperText Markup Language (HTML)
  • Java
  • Javascript
  • Hypertext Preprocessor (PHP)
  • Visual Basic (VB)
  • Visual Basic Script Edition (VBScript)

You can download the application from here: Adobe Dreamweaver

Steps to Install Adobe Dreamweaver to Create Chessboard:

After that right click on the setup and run it as an administrator.

Adobe Dreamweaver Installer for Chessboard Creation
Adobe Dreamweaver Installer for Chessboard Creation
Adobe Dreamweaver Installation to Create Chessboard
Adobe Dreamweaver Installation to Create Chessboard

After that click on install button the popup icon will appear as shown:

Adobe Dreamweaver Installation in Progress
Adobe Dreamweaver Installation in Progress

Atlast click on finish button, the setup is installed successfully.

Code to Create Chessboard in Adobe Dreamweaver:
Let us start the programming where you will learn how to design a chessboard. Open the file in Adobe Dreamweaver then click on new section after that select a blank html page and click on create. Save the file name as chessboard it will take the extension.html itself. You will see an window like this:
Adobe Program Window to Create Chessboard
Adobe Program Window to Create Chessboard
After that change the title from Untitled Document to ChessBoard. Actually, the title is that part which is seen on the top of the browser so it should be named properly.The title part is over. Now, we will work inside the body section of the html page. Insert the code
<form name=”chess” action=”chessboard.html” method=”post”>
where, form name could be anything whatever user want to be. The action is redirected to particular page where you the action to be held, in this case the page is redirecting to itself “chessboard.html”. After that we will draw a table with particular border, cell spacing and padding.
<table border=”5″ cellspacing=”1″ cellpadding=”25″>
Till now we have completed the outer part of chessboard i.e. outline. Now insert the code to work on inner part of chessboard  i.e. to draw the rows and columns.<tr>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
</tr>
Here <tr> denotes the rows and <td> denotes the columns. Till now we have successfully designed a row containing eight columns with alternate colours. We know that in a chessboard there are 8 columns and 8 rows. A complete chessboard is made up of  64 cells with alternate dual colors. In order to do this copy the above code eight times so finally we got 64 cells containing 8 rows & 8 columns.

The Final Chessboard Code :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Chess Board</title>
</head>
<body>
<form name=”chess” action=”chessboard.html” method=”post”>
<table border=”5″ cellspacing=”1″ cellpadding=”25″>
<tr>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
</tr>
<tr>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
</tr>
<tr>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
</tr>
<tr>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
</tr>
<tr>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
</tr>
<tr>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
</tr>
<tr>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
</tr>
<tr>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
<td bgcolor=”#FFFFFF”> </td>
<td bgcolor=”#000000″> </td>
</tr>
</table>
</form>
</body>
</html>

The desired output will be:

Final Chessboard Output Through Adobe Dreamwever and XAMPP
Final Chessboard Output Through Adobe Dreamwever and XAMPP

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here