Friday, December 29, 2017

கோரல் டிராவில் பவர் கிளிப் ஆப்சன்.


 

கோரல் டிராவில் பவர் கிளிப் ஆப்சன் ஒளி படங்களை குறிப்பிட்ட வடிவில் வெட்டி எடுக்க பயன்படுகின்றது.

உதாரணத்திற்கு முதலில் கோரல் டிராவை ஓபன் செய்து எலிப்ஸ் டூலை செலெக்ட் செய்யவும்.

பின் ctrl கீயை அழுத்திய படியே ஒரு வட்டம் வ்ரையவும்.



பின் p என்கின்ற கீயை அழுத்தினால் வட்டம் விண்டோவின் மத்தியில் வந்து விடும்.

பின்பு file மெனு சென்று import ஆப்சனை கிளிக் செய்யவும் இப்பொழுது ஒரு படத்தை தேர்வு செய்து டிராக் கொடுக்கவும்.

 



 

இப்பொழுது arrange மெனு சென்று order என்பதில்  to ack to page என்பதை தேர்வு செய்யவும்.


இப்பொழுது படம் பின்னால் சென்று விடும். வட்டம் முன்னால் வந்து விடும்



 

        இப்பொழுது effects  மெனு சென்று powerclip-> place inside container என்பதை தேர்வு செய்து வட்டத்தின் உள்ளே கிளிக் செய்ய்யவும்.இப்பொழுது

படமானது கீழ் கண்டவாறு வட்ட வடிவில் வெட்டி எடுக்கப் பட்டிருக்கும்.

 



 

இதே எழுத்துக்களின் வடிவிலும் படத்தை வெட்டி எடுக்கலாம்.

அதற்கு முதலில் டெக்ஸ்ட் டூல் செய்து விண்டோவில் டெக்ஸ்ட் டைப் செய்யவும்.



 

இப்பொழுது file->import சென்று படத்தை தேர்வு செய்து விண்டோவில் டிராக் செய்யவும்.



 

இப்பொழுது arrange ->order->to back of page என்பதை தேர்வு செய்யவும்,

படம் பின்னால் சென்று விடும். டெக்ஸ்ட் முன்னால் வந்து விடும்.

இப்பொழுது effects->powerclip->place inside container தேர்வு செய்து டெக்ஸ்டின் மேல் வைத்து கிளிக் செய்யவும். இப்பொழுது படமானது டெக்ஸ்டின் மீது வெட்டப் பட்டிருக்கும்.



                    நன்றி

முத்து கார்த்திகேயன்,மதுரை.
ads Udanz

Wednesday, December 27, 2017

எம்.எஸ்.எக்சலில் ஹைபர்லிங்க்.


 

எம்.எஸ்.எக்ஷ்சலில் இருந்த படியே மற்ற பக்கங்க
ளுக்கோ, மற்ற ஃபைலிற்கோ அல்லது ஒரு இணையதளத்திற்கோ இணைப்பு ஏற்படுத்தலாம். அதற்கு இன்செர்ட் மெனுவில் உள்ள ஹைபர்லிங்க் என்ற ஆப்சன் உதவி புரிகின்றது.

உதாரணமாக கீழே உள்ள எக்சல் பக்கத்தில் மூன்று பெயர்கள் உள்ளது.

 

முத்து என்பவரின் சம்பளத்தொகை வேறொரு பக்கத்தில் உள்ளது



இப்பொழுது முதல் பக்கத்தில் உள்ள முத்து என்கின்ற செல்லை கிளிக் செய்கையில் இரண்டாவது பக்கம் திறக்க வேண்டும்,..

அதற்கு முதலில் முத்து என்கின்ற பெயரை முதலில் கிளிக் செய்யவும்.

பிறகு இன்செர்ட்மெனு சென்று ஹைபர்லிங்க் என்கின்ற ஆப்சனை கிளிக் செய்யவும்.
 

இப்பொழுது கீழே உள்ள டையலாக் பாக்ஸ் வரும். அதில்

அதில்  முதலில் place in this document என்கின்ற ஆப்சனை கிளிக் செய்யவும்.

பிறகு sheet2 என்பதை தேந்தெடுத்து ok என்பதை கிளிக் செய்யவும்.

·         இப்பொழுது முதல் பக்கத்தில் உள்ள muthu என்கின்ற செல்லை கிளிக் செய்தால் இரண்டாவது பக்கம் ஒபன் ஆகும்.

·         வேறொரு ஃபைலுடன் இணைப்பு ஏற்படுத்துவதற்கு இடது புறத்தில் EXISTING FILE OR WEB PAGE என்பதை செலெக்ட் செய்து வலது புறத்தில் ஃபைலின் பெயரை தேர்ந்தெடுக்கவும்.

ஒரு இணைய பக்கத்துடன் இணைப்பு ஏற்படுத்த இடது புறத்தில் EXISTING FILE OR WEB PAGE என்பதை செலெக்ட் செய்து வலது புறத்தில் கீழே address என்பதில் இணையதள முகவரியை கொடுக்கவும்.பிறகு ஓகே பட்டனை கிளிக் செய்யவும்.
 

இப்பொழுது எக்சல் பக்கத்தில் muthu என்கின்ற செல்லை கிளிக் செய்தால் அந்த இணையதளம் ஒபன் ஆகும்.

 -நன்றி

முத்து கார்த்திகேயன்,மதுரை
ads Udanz

Monday, December 25, 2017

ஏஎஸ்பி.நெட்டில் adrotator control



ADRotator control ஆனது விளம்பரங்களை இணையதளங்களில்வெளியிட பயன்படுகின்றது.இந்த கன்ட்ரோல் ஆனது ASP.NET-ல் உள்ளது. இது ஒவ்வொரு தடவையும் வெவ்வேறு படங்களை வெளியிடலாம். அந்த படத்தை கிளிக் செய்யும் பொழுது மற்றொரு ஒரு வெப் பேஜ் ஆனது ஒபன் ஆகின்றது.

முதலில் ஒரு XML FILE ஒன்றினை உருவாக்கிக் கொள்ள வேண்டும். அந்த ஃபைலில்<Advertisements> ஆனது ரூட் டேகு ஆக இருக்க வேண்டும்.இந்த டேக்கிற்குள் ஒன்றிற்கு மேற்பட்ட <Ad> ஆனது இருக்கும். ஒவ்வொரு ஆட் டேக்கும் ஒரு விளம்பரத்தினைக் கொண்டிருக்கும்.

முதலில் asp.net-ல் ஒரு project ஒன்றினை உருவாக்கி கொள்ள வேண்டும்.



 

 

 

 

இப்பொழுது solution explorer –யை பார்வையிடவும்.இப்பொழுது இந்த project-ல் ஒரு web form ஒன்றினை உருவாக்க வேண்டும். Project menu சென்று Add New Item என்பதை கிளிக் செய்யவும்.(short cut key ctrl+shift+A.) அதில் web form என்பதை செலெக்ட் செய்யவும். பிறகு add  என்கின்ற பட்டனைக் கிளிக் செய்யவும்.





மேலும் ஒரு xml file ஒன்றினை ப்ராஜெக்டில் சேர்க்க வேண்டும். இதற்கு project மெனுவில் add   new item என்பதினை செலெக்ட் செய்து பின்பு வரும் டயலாக் பாக்சில் இடது புறம் data என்பதை செலெக்ட் செய்யவும்.இப்பொழுது வலது புறம் xml file என்பதை செலெக்ட் செய்யவும் கீழே இங்கு xml file-ந் பெயராக நான் ad.xml என பெயரிட்டுள்ளேன்.நீங்கள் விரும்பிய பெயரை இதற்குக் கொடுக்கலாம்.


இங்கு xml file-ல் நாம் பயன் படுத்தும் டேக்கு பற்றிய விவரங்கள்

 

 

Element
Description
<ImageUrl>
இமேஜ் ஃபைலின் பாத்
<NavigateUrl>
இமேஜை கிளிக் செய்யும் பொழுது ஒபன் ஆக வேண்ஸ்டிய இணைய தளத்தின் URL
<AlternateText>
OPTIONALஇமேஜை திறக்க முடியா விட்டால் டிஸ்ப்லேய் ஆக வேண்டிய மெஸ்ஸேஜ்
<Keyword>
OPTIONAL. விளம்பரத்தின் CATEGORY.
<Impressions>
Optional. Display ஆக வேண்டிய விகிதம்.

முதலில் ப்ராஜெக்டில் ஒரு imagaes எங்கின்ற ஃபோல்டர் உருவாக்கவும். பிறகு அதில் ஒன்று அல்லது அர்தற்கும் மேற்பட்ட படங்களைச் சேர்த்துக் கொள்ளவும்.

இப்பொழுது xml ஆனது பின் வருமாறு இருக்கலாம்.

<?xml version="1.0" encoding="utf-8" ?>

<Advertisements>

  <Ad>

    <ImageUrl>~/images/google.png</ImageUrl>

    <NavigateUrl>http://google.com</NavigateUrl>

    <AlternateText>google</AlternateText>

    <Keyword>google</Keyword>

    <Impressions>50</Impressions>

  </Ad>

  <Ad>

    <ImageUrl>~/images/youtube.png</ImageUrl>

    <NavigateUrl>http://youtube.com</NavigateUrl>

    <AlternateText>youtube</AlternateText>

    <Keyword>youtube</Keyword>

    <Impressions>25</Impressions>

  </Ad>

</Advertisements>

 

இப்பொழுது வெப் ஃபார்மில் adrotator control ஒன்றை சேர்த்துக் கொள்ளவும். அதன் advertisementfile என்கின்ற ப்ராப்பர்டிக்கு ad.xml என கொடுக்கவும். மேலும் target என்கின்ற பண்பிற்கு _blank என் கொடுத்தால் விளம்பரத்தை கிளிக் செய்யும் பொழுது வெப் பக்கமானது புதிய விண்டோவில் பிறக்கும்.

 

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication18.WebForm1" %>

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/ad.xml" Target ="_blank"/>

    </div>

    </form>

</body>

</html>

வெளியீடு:



 

இப்பொழுது இமேஜ் மேல் கிளிக் செய்தால் கூகில் இணைய பக்கம் ஒபென் ஆகும்.

 

 



நன்றி முத்து கார்த்திகேயன், மதுரை
ads Udanz

Tuesday, December 19, 2017

CSS3 கற்றுக் கொள்ளலாம்.பகுதி-6




CSS பற்றிய இந்த பகுதியில் நாம் மார்ஜின்(MARGIN) ப்ராப்பர்ட்டி பற்றிக் காண இருக்கின்றோம்.
மார்ஜின் என்பது வெற்றிடத்தைக் குறிக்கும்.ஒரு ஆப்ஜெக்ட்டுக்கு இடது,வலது,மேல்,கீழ் என ஒவ்வொரு பக்கத்திலும் உள்ள வெற்றிடத்தை மார்ஜின் ப்ராப்பர்ட்டி குறிக்கும்.
உதாரணத்திற்கு ஒரு div டேக்கு ஒன்றை எடுத்துக் கொள்வோம்.
முதலில் html-ல் ஒரு div டேக்கு ஒன்று வருமாறு ஒரு கோடிங் எழுதுகின்றேன்.
<!Doctype html>
<html>
<head>
<title>
Margin properties
</title>
<style type="text/css">
h1{
text-align:center;
}
div{
width:300px;
height:300px;
background-color:red;

}
</style>
</head>
<body>
<h1> welcome</h1>
<h1> Muthu karthikeyan </h1>
<div></div>
</body>

</html>
அதன் வெளியீடு:


விளக்கம்:
மேலே உள்ள நிரலில் முதலில் body டேக்கில் இரண்டு h1 டேக்கு உள்ளது  அதன் text-align என்கின்ற property மதிப்பாக center எனக் குறிப்பிட்டுள்ளோம்.
அதன் கீழ் ஒரு div டேக்கு ஒன்று குறிப்பிட்டுள்ளோம். அதன் width மற்றும் height ஆகிய ப்ராப்பர்ட்டிக்கு மதிப்பாக இரண்டுக்குமே 300px எனக் கொடுத்துள்ளோம். Background-color என்கின்ற ப்ராப்பர்டிக்கு மதிப்பாக red எனக் குறிப்பிட்டுள்ளோம். அதன் படி வெளியீடானது வந்துள்ளது.
இப்பொழுது மார்ஜின் ப்ராப்பர்ட்டி வகைகள் என்ன எனப் பார்ப்போம்.
மார்ஜின் ப்ராப்பர்ட்டியானது margin-top,margin-bottom,margin-left,margin-right,margin என ஐந்து வகையாகக் குறிப்பிடலாம்.
margin-top என்பது ஒரு ஆப்ஜெக்டின் மேலே உள்ள வெற்றிடத்தின் அளவை குறிப்பிடவும், margin-bottom என்பது ஒரு ஆப்ஜெக்டின் கீழே உள்ள வெற்றிடத்தைக் குறிப்பிடவும்,margin-left என்பது ஆப்ஜெக்டின் இடது புறம் உள்ள வெற்றிடத்தை குறிப்பிடவும், margin-right என்பது ஆப்ஜெக்டின் வலது புறத்தில் உள்ள வெற்றிடத்தைக் குறிப்பிடவும் பயன்படுகின்றது.
<!Doctype html>
<html>
<head>
<title>
Margin properties
</title>
<style type="text/css">
h1{
text-align: center;
}
div{
width:100px;
height:100px;
background-color : red;
margin-left:15px;
margin-top:15px;
margin-right:15px;
margin-bottom:15px;

}
</style>
</head>
<body>
<h1> welcome</h1>
<h1> Muthu karthikeyan </h1>
<div></div>
<div></div>
<div></div>
</body>

</html>
வெளியீடு:


மேலே உள்ள நிரலில் div எலெமென்டின் மார்ஜின் ப்ராப்பர்ட்டியின் நான்கு பக்கத்திற்கும் 15px மதிப்பு கொடுத்துள்ளோம். அதன் வெளியீடு மேலே உள்ள படத்தில் உள்ள படி இருக்கும். ஆனால் ஒவ்வொரு ஆப்ஜெக்டும் ஒன்றின் கீழ் ஒன்றாய் உள்ளது.
அவை அடுத்தடுத்து வர  வேண்டுமென்றால் float என்கின்ற ப்ராப்பர்ட்டிக்கு மதிப்பாக left எனக் கொடுக வேண்டும்.
div{
width:100px;
height:100px;
background-color:red;
margin-left:15px;
margin-top:15px;
margin-right:15px;
margin-bottom:15px;
float:left;
}
வெளியீடு:

மேலும் மார்ஜின் ப்ராப்பர்ட்டி நான்கையும் மொத்தமாக ஒரே ப்ராப்பரட்டியாக கொகுக்கலாம்.
உதாரணத்திற்கு
div{
Margin:15px,10px,15px,10px;
}
இவைகள் முறையே மேலே,வலது,கீழே,இடது என எடுத்துக் கொள்ளப் படும்.
Id மற்றும் class .
<!Doctype html>
<html>
<head>
<title>
Margin properties
</title>
<style type="text/css">
h1{
text-align:center;
}
p{
color:blue;
}

</style>
</head>
<body>
<h1> welcome</h1>
<h1> Muthu karthikeyan </h1>
<P>
On the Insert tab, the galleries include items that are designed to coordinate with the
overall look of your document. You can use these galleries to insert tables, headers,
footers, lists, cover pages, and other document building blocks. When you create pictures,
 charts, or diagrams, they also coordinate with your current document look.
</p>
</body>

</html>
வெளியீடு:

மேலே உள்ள நிரலில் p என்கின்ற டேக்கிற்கு color என்கின்ற ப்ராப்பட்டிக்கு blue என க்கொடுத்துள்ளோம். எனவே பாராகிராப் ஆனது நீல நிறத்தில் தோன்றுகின்றது.
இப்பொழுது இன்னொரு பாராகிராப் உருவாக்கி அதன் id ப்ராப்பர்ட்டி para1 எனக் கொடுப்போம்.
<!Doctype html>
<html>
<head>
<title>
Margin properties
</title>
<style type="text/css">
h1{
text-align:center;
}
p{
color:blue;
}
#para1{
color:red;
}
.green{
color:green;
background-color:lightblue;

}
</style>
</head>
<body>
<h1> welcome</h1>
<h1> Muthu karthikeyan </h1>
<P>
On the Insert tab, the galleries include items that are designed to coordinate with the
overall look of your document. You can use these galleries to insert tables, headers,
footers, lists, cover pages, and other document building blocks. When you create pictures,
 charts, or diagrams, they also coordinate with your current document look.
</p>
<P id="para1">
On the Insert tab, the galleries include items that are designed to coordinate with the
overall look of your document. You can use these galleries to insert tables, headers,
footers, lists, cover pages, and other document building blocks. When you create pictures,
 charts, or diagrams, they also coordinate with your current document look.
</p>
<P class="green">
On the Insert tab, the galleries include items that are designed to coordinate with the
overall look of your document. You can use these galleries to insert tables, headers,
footers, lists, cover pages, and other document building blocks. When you create pictures,
 charts, or diagrams, they also coordinate with your current document look.
</p>
<h3 class="green">good bye<h3>
</body>

</html>

மேலே உள்ள நிரலில் மேலும் இரண்டு பாராகிராப் உருவாக்கி  ஒன்றிற்கு id என்பதிற்கு para1 எனவும் மற்றொன்றின் class என்பதிற்கு green எனவும் கொடுத்துள்ளோம்.
Id என்கின்ற ப்ராப்பர்ட்டியை css-ல் ரெப்பர் (refer) செய்யும் பொழுது # என்கின்ற குறியீட்டையும்  class என்கின்ற ப்ராப்பர்ட்டியை ரெப்பர் செய்யும் பொழுது . (dot) என்கின்ற குறியீட்டையும் கொடுத்துள்ளோம். இதில் கவனிக்க வேண்டிய இரண்டு விசயங்கள் நோக்க வேண்டும். id ப்ராப்பர்ட்டி unique ஆகவும் class ஒன்றிற்கு மேற்பட்டதற்கும் பயன்படுத்தலாம்.
உதாரணத்திற்கு மேலே உள்ள நிரலில் green என்கின்ற கிளாசை ஒரு பாராகிராப் மற்றும் ஒரு h3 என இரண்டு எலெமெண்டிற்கு உபயொகித்துள்ளோம்.
வெளியீடு:
நன்றி மீண்டும் அடுத்த இதழில் சந்திப்போம்.
முத்து கார்த்திகேயன், மதுரை.
ads Udanz