மூன்று பத்திகளாக வடிவமைத்தல் - டாட்ஸ் டெம்ப்ளேட்

Posted by Posted by Nilavan On 6:56 PM

வலைப்பூக்களில் பதிவுகள் இடும் போது அது ஒன்றன் கீழ் ஒன்றாக இடப்படும். உங்களின் வலைப்பூவின் முகப்பு பகுதி பல பகுதிகளாக பிரிக்கப்பட்டு அதில் உங்களின் பதிவுகளை இடுவதற்கு ஏற்றவாறு வடிவமைக்கப்பட்ட HTML புரோகிராம்களை பயன்படுத்திக் கொள்ளலாம். தயாராக உள்ள இவ்வகை HTML புரோகிராம்களை டெம்ப்ளேட் என்கிறோம். இவ்வகை டெம்ப்ளேட்களை உங்களின் வசதி மற்றும் பயன்பாட்டிற்கு ஏற்றவாறு நீங்கள் வடிவமைத்துக் கொள்ளலாம்.

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

அதே நேரத்த்தில் நீங்கள் வேறு டெம்ப்ளேட்டை பயன்படுத்தினால் கீழ்க்கண்ட லிங்கில் மூலம் மூன்று பத்திகளாக மாற்றுவதை தெரிந்து கொள்ளலாம்.

1. மூன்று பத்தியாக டெனிம் (Denim) டெம்ப்ளேட்
2. மூன்று பத்தியாக டாட்ஸ் (Dots) டெம்ப்ளேட்
3. மூன்று பத்தியாக மினிமா (Minima) டெம்ப்ளேட்
4. மூன்று பத்தியாக ரவுண்டர்ஸ் (Rounders) டெம்ப்ளேட்
5. மூன்று பத்தியாக ஸ்க்ரைப் (Scribe) டெம்ப்ளேட்
6. மூன்று பத்தியாக திஸ் வே (Thisway) டெம்ப்ளேட்



இதில் டாட்ஸ் என்னும் டெம்ப்ளேட்டை மூன்று பத்திகளாக அமைப்பது எப்படி என்பதை இங்கே காண்போம். நீங்கள் டெம்ப்ளேட்டை வடிவமைப்பதற்கு முன் தற்சமயம் உள்ள டெம்ப்ளேட்டை சேமித்துக் கொள்வது நல்லது. புதிய வடிவமைப்பு தவறாக அமைந்து விட்டது எனில் உங்களின் பழைய வடிவை திரும்பப் பெற ஏதுவாயிருக்கும்.

உங்களின் வடிவமைப்பை சேமிக்க......




டாட்ஸ் டெம்ப்ளேட் இரண்டு வகைகளாக உள்ளது. அது Dots மற்றும் Dots Dark என்னும் இரண்டு வகைகளாக அமைக்கப்பட்டுள்ளது.







Dots templateDots Dark template






டாட்ஸ் டெம்ப்ளேட்



டாட்ஸ் டெம்ப்ளேட்டில் புதிதாக சைடுபாரை இணைக்க அதன் தலைப்புபாகத்தை சற்று அகலமாக்க வேண்டியது அவசியம். ஆதலால், கீழ்கண்ட வழிமுறைகளை கடைபிடிக்க.

1. Layout --> HTML என்னும் பகுதிக்குச் சென்று கீழ்கண்ட வரியை தேடவும்.





#outer-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 250px 50px;
width:700px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:450px;
float:right;
padding:100px 0 20px;
font-size:85%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}



மேலே உள்ள வரிகளுக்கு பதிலாக கீழே கொடுக்கப்பட்ட வரிகளாக மாற்றவும். இரண்டுக்கும் உள்ள மாற்றங்களை சிவப்பு நிறத்தில் காணலாம்.








#outer-wrapper {
background:url(http://www.blogblog.com/dots/bg_3dots.gif)


no-repeat 275px 50px;
width:950px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:400px;
float:left;
padding:100px 0 20px;
font-size:85%;
margin-left:50px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
margin-left:25px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
#newsidebar-wrapper {
width:200px;
float:right;
font-size:85%;
padding-bottom:20px;
margin-right:25px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}




டாட்ஸ் டார்க் (Dots Dark) டெம்ப்ளேட்

2. கீழே கொடுக்கப்பட்ட வரிகளுக்குச் செல்லவும்.









#outer-wrapper {
background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat 250px 50px;
width:700px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:450px;
float:right;
padding:100px 0 20px;
font-size:85%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}


மேலே இடப்பட்டுள்ள வரிகளுக்கு பதிலாக கீழே கொடுக்கப்பட்டுள்ள வரிகளை இடுங்கள்.
புதிதாய் இடப்பட்டுள்ளவைகள் சிவப்பு நிறத்தில் காட்டப்பட்டுள்ளதைக் காணலாம்.




#outer-wrapper {
background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat 275px 50px;
width:950px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:400px;
float:left;
padding:100px 0 20px;
font-size:85%;
margin-left:50px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
margin-left:25px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
#newsidebar-wrapper {
width:200px;
float:right;
font-size:85%;
padding-bottom:20px;
margin-right:25px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}


டாட்ஸ் மற்றும் டாட்ஸ் டார்க் டெம்ப்ளேட்

டெம்ப்ளேட்டில் கீழே கொடுக்கப்பட்டுள்ள வரிகளுக்குச் செல்லவும்.






மேலே கொடுக்கப்பட்டுள்ள வரிகளை கீழுள்ளவாறு மாற்றுக.





/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper {
width: 750px;
padding: 0px;
}

body#layout #main-wrapper,
body#layout #main {
width: 400px;
padding: 0px;
margin: 0px;
}

body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper,
body#layout #sidebar,
body#layout #newsidebar {
width: 150px;
padding: 0px;
}



டெம்ப்ளேட்டில் கீழே கொடுக்கப்பட்டுள்ள வரிகளுக்குச் செல்லவும்.







மேலே கொடுக்கப்பட்டுள்ளவாறு செய்வதனால் புதிதாக ஒரு பத்தியை நமது வலைப்பூவில் இடுவதற்கு இடம் ஏற்படுத்திக் கொடுக்கிறோம். அதே போல ஏற்கனவே உள்ள அளவுகளை நாம் செம்மைப் படுத்துகிறோம்.

இதன் அளவுகள் உங்களின் தேவைக்கேற்றார் போல் மாற்றிக் கொள்ளலாம், ஆனால் கணக்குகள் சரியானதாக இருக்க வேண்டும். அளவு கணக்குகளை சரியாக பார்க்க, content-wrapper -ன் அளவு main-wrapper, sidebar-wrapper, newsidebar-wrapper, margins இவற்றின் கூட்டாக இருக்க வேண்டும்.

அதாவது

(#content-wrapper width) = (#main-wrapper width) + (#sidebar-wrapper width) + (#newsidebar-wrapper width) + margins

மேலும் ஒரு தொகுப்பை body பகுதியில் இணைக்க வேண்டும். கீழே கொடுக்கப்பட்ட வரிகளுக்குச் சென்று பச்சை நிறத்தில் கொடுக்கப்பட்ட தொகுப்பை இணைக்கவும்.


கீழிடப்பட்டவாறு தலைப்பின் அகலத்தை 950 ஆக மாற்றவும்.






#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}


கொடுக்கப்பட்டது போல் sidebar wrapper, main-wrapperக்கு மேலே இருப்பது மிகவும் அவசியமானது. கொடுக்கப்பட்ட வழிமுறைகளை பின்பற்றிய பின் டெம்ப்ளேட்டை சேமிக்கவும்.
Preview பட்டனை சொடுக்கினால் உங்களுக்கு மூன்று பத்தி கொண்ட டெம்ப்ளேட் கிடைக்கும்.

edit post

0 comments