वेबसाईट- क्लास स्टाईल
Category: वेबसाईट डिझाईन
मागच्या धड्यात आपण div id या टॅगचा वेबपेजच्या लेआउटसाठी कसा वापर केला जातो ते पाहिले. आता क्लास(class) चा वापर स्टाईल शीटमध्ये (css) मध्ये कसा करतात ते पाहू. class हा . या चिन्हाने दर्शविला जातो. शीर्षक, टेबल, पॅरेग्राफ किंवा div सारख्या टॅगला विशिष्ट स्टाईल लावण्यासाठी क्लासचा उपयोग होतो. div id हा एकदाच वापरता येतो तर क्लास हा अनेक ठिकाणी वापरता येतो. उदाहरणार्थ पॆरेग्राफसाठी एक क्लास केला तर सर्व पॅरेग्राफना तो वापरता येतो. मात्र मजकुरातील काही भाग इटालिक वा ठळक अक्षरात दाखवायचा असेल त्या पॅरेग्राफसाठी वेगळा क्लास करावा लागतो. एखादे टेबल साधा मजकूर दाखविण्यासाठी असेल, एखादे चित्रे वा फोटो दाखविण्यासाठी वापरायचे असेल तर टेबल टॅगचे दोन क्लास करता येतात.
वेगवेगळ्य़ा प्रकारच्या मजकूर व चित्रांसाठी एकदा क्लास निश्चित केले की त्यांचा वापर आवश्यकतेनुसार कोठेही व कितीही वेळा करता येतो. क्लास पद्धत वापरल्याने सर्व वेबपेजेसवरील मजकूर मांडणीत एकसारखेपणा आणता येतो. म्हणून प्रत्येक वेबसाईटसाठी सर्व प्रकारच्या स्टाईल तयार करून एक css स्टाईलशीट फाईल तयार केली जाते व ती सर्व वेबपेजेसना लिंक केली जाते. क्वचित प्रसंगी एखाद्या पानाला वा विभागाला वेगळॆपण द्यायचे असेल तर तेवढ्या भागासाठी दुसरी स्टाईलशीट केली जाते.
खाली ज्ञानदीपने डिझाईन केलेल्या एका कॉलेजच्या वेबसाईटच्या स्टाईलशीटची फाईल दाखविली आहे. त्यात Bold, Normal व Subheading यासाठी क्लास केले आहेत. तसेच फॅकल्टीचा बायोडाटा दाखविण्याच्या टेबलसाठी tablemainbiodata व डिपार्टमेंट टेबलसाठी TablemainDepartment त्यातील हेडींग, मजकूर, फोटो या TD टॅगसाठी वेगवेगळे क्लास केले आहेत. टेबल चांगले दिसण्यासाठी एकाडएक ओळीसाठी गडद व फिका रंग देता यावा यासाठी TD dark व TD faint असे क्लास केले आहेत.
BODY
{
}
BODY .Table
{
BORDER-RIGHT: #077198 2px solid;
BORDER-TOP: #077198 2px solid;
BORDER-LEFT: #077198 2px solid;
BORDER-BOTTOM: #077198 2px solid
}
.Bold
{
BORDER-RIGHT: medium none;
BORDER-TOP: medium none;
PADDING-LEFT: 10px;
FONT-WEIGHT: bold;
FONT-SIZE: 11.5pt;
MARGIN-LEFT: 10px;
BORDER-LEFT: medium none;
COLOR: #0c3545;
BORDER-BOTTOM: medium none;
FONT-FAMILY: Georgia, Verdana
}
.Normal
{
PADDING-RIGHT: 20px;
PADDING-LEFT: 20px;
FONT-SIZE: 8.5pt;
PADDING-BOTTOM: 2px;
MARGIN: 2px 20px;
COLOR: #003366;
PADDING-TOP: 2px;
FONT-FAMILY: Verdana;
TEXT-ALIGN: justify
}
.subheading
{
MARGIN-TOP: 5px;
PADDING-LEFT: 20px;
FONT-WEIGHT: bold;
FONT-SIZE: 10pt;
MARGIN-BOTTOM: 5px;
PADDING-BOTTOM: 5px;
MARGIN-LEFT: 20px;
COLOR: #096e98;
PADDING-TOP: 5px;
FONT-FAMILY: Verdana;
TEXT-DECORATION: underline
}
.Tablemainbiodata
{
BORDER-RIGHT: slategray 1px;
PADDING-RIGHT: 2px;
BORDER-TOP: slategray 1px;
PADDING-LEFT: 2px;
PADDING-BOTTOM: 2px;
MARGIN: 2px;
BORDER-LEFT: slategray 1px;
PADDING-TOP: 2px;
BORDER-BOTTOM: slategray 1px
}
.Tablemainbiodata TD.Dark
{
MARGIN-TOP: 5px;
FONT-WEIGHT: 600;
FONT-SIZE: 8pt;
MARGIN-BOTTOM: 5px;
PADDING-BOTTOM: 5px;
COLOR: #003366;
PADDING-TOP: 5px;
FONT-FAMILY: Verdana
}
.Tablemainbiodata TD.Light
{
MARGIN-TOP: 5px;
FONT-WEIGHT: lighter;
FONT-SIZE: 10pt;
MARGIN-BOTTOM: 5px;
PADDING-BOTTOM: 5px;
COLOR: #003366;
PADDING-TOP: 5px;
FONT-FAMILY: Verdana
}
.Tablemainbiodata TD.Background
{
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
FONT-WEIGHT: bolder;
FONT-SIZE: 10pt;
PADDING-BOTTOM: 5px;
MARGIN: 5px 10px;
COLOR: #096e98;
PADDING-TOP: 5px;
FONT-FAMILY: Verdana;
BACKGROUND-COLOR: #eef5fb
}
.Tablemainbiodata TD.Headinggray
{
BORDER-RIGHT: white 1pt solid;
PADDING-RIGHT: 4px;
BORDER-TOP: white 1pt solid;
PADDING-LEFT: 4px;
FONT-WEIGHT: 600;
FONT-SIZE: 8pt;
PADDING-BOTTOM: 4px;
MARGIN: 4px;
BORDER-LEFT: white 1pt solid;
COLOR: #003366;
PADDING-TOP: 4px;
BORDER-BOTTOM: white 1pt solid;
FONT-FAMILY: Verdana;
BACKGROUND-COLOR: #ebebeb;
TEXT-ALIGN: center
}
.Tablemainbiodata TD.Border
{
BORDER-RIGHT: white 1pt solid;
BORDER-TOP: white 1pt solid;
FONT-SIZE: 10pt;
BORDER-LEFT: white 1pt solid;
COLOR: #003366;
BORDER-BOTTOM: white 1pt solid;
FONT-FAMILY: Verdana;
BACKGROUND-COLOR: #f5f5f5
}
.Tablemainbiodata TD.ImageFrame
{
BORDER-RIGHT: #096e98 2pt double;
BORDER-TOP: #096e98 2pt double;
MARGIN-TOP: 0px;
BORDER-LEFT: #096e98 2pt double;
PADDING-TOP: 0px;
BORDER-BOTTOM: #096e98 2pt double
}
.TablemainDepartment
{
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
MARGIN: 10px;
PADDING-TOP: 10px
}
.TablemainDepartment TD.Headingbold
{
BORDER-RIGHT: 0pt;
PADDING-RIGHT: 3px;
BORDER-TOP: 0pt;
PADDING-LEFT: 3px;
FONT-WEIGHT: bolder;
FONT-SIZE: 9pt;
PADDING-BOTTOM: 3px;
MARGIN: 3px;
BORDER-LEFT: 0pt;
COLOR: #003366;
PADDING-TOP: 3px;
BORDER-BOTTOM: 0pt;
FONT-FAMILY: Arial;
BACKGROUND-COLOR: #f2f2f2
}
.TablemainDepartment TD.DeptNormal
{
PADDING-RIGHT: 20px;
PADDING-LEFT: 10px;
FONT-SIZE: 8.5pt;
PADDING-BOTTOM: 15px;
MARGIN: 15px 20px 15px 10px;
COLOR: black;
PADDING-TOP: 15px;
FONT-FAMILY: Verdana;
TEXT-ALIGN: justify
}
.Tablemainbiodata TD.pageListItem
{
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
FONT-SIZE: 8.5pt;
PADDING-BOTTOM: 5px;
MARGIN: 5px;
COLOR: black;
PADDING-TOP: 5px;
FONT-FAMILY: Verdana
}
.Tablemainbiodata .PageLinkBio
{
}
.Tablemainbiodata .PageLinkBio A
{
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
FONT-WEIGHT: bolder;
FONT-SIZE: 10pt;
MARGIN-LEFT: 5px;
COLOR: gray;
MARGIN-RIGHT: 5px;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none
}
.Tablemainbiodata .PageLinkBio A:hover
{
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
FONT-WEIGHT: bolder;
FONT-SIZE: 10pt;
MARGIN-LEFT: 5px;
COLOR: #003366;
MARGIN-RIGHT: 5px;
FONT-FAMILY: Verdana;
TEXT-DECORATION: underline
}
.TablemainDepartment TD.deptPageList
{
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
FONT-SIZE: 8.5pt;
PADDING-BOTTOM: 5px;
MARGIN: 5px;
COLOR: black;
PADDING-TOP: 5px;
FONT-FAMILY: Verdana
}
.TablemainDepartment TD.TableHeading
{
BORDER-RIGHT: #eeeeee 1pt solid;
BORDER-TOP: #eeeeee 1pt solid;
FONT-WEIGHT: bolder;
FONT-SIZE: 8.5pt;
BORDER-LEFT: #eeeeee 1pt solid;
COLOR: black;
BORDER-BOTTOM: #eeeeee 1pt solid;
FONT-FAMILY: Arial, Verdana;
BACKGROUND-COLOR: #e9e9e9;
TEXT-ALIGN: center
}
.TablemainDepartment TD.TableMatter
{
BORDER-RIGHT: #eeeeee 1pt solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #eeeeee 1pt solid;
PADDING-LEFT: 5px;
FONT-SIZE: 8.5pt;
PADDING-BOTTOM: 5px;
MARGIN: 5px;
BORDER-LEFT: #eeeeee 1pt solid;
COLOR: black;
PADDING-TOP: 5px;
BORDER-BOTTOM: #eeeeee 1pt solid;
FONT-FAMILY: Verdana
}
.TablemainDepartment .DeptPageLink
{
}
.TablemainDepartment .DeptPageLink A
{
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
FONT-WEIGHT: bolder;
FONT-SIZE: 10pt;
MARGIN-LEFT: 5px;
COLOR: gray;
MARGIN-RIGHT: 5px;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none
}
.TablemainDepartment .DeptPageLink A:hover
{
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
FONT-WEIGHT: bolder;
FONT-SIZE: 10pt;
MARGIN-LEFT: 5px;
COLOR: #003366;
MARGIN-RIGHT: 5px;
FONT-FAMILY: Verdana;
TEXT-DECORATION: underline
}
.Tablemainbiodata TD.BackgroundSubheading
{
MARGIN-TOP: 5px;
FONT-WEIGHT: 500;
FONT-SIZE: 8.5pt;
MARGIN-BOTTOM: 5px;
PADDING-BOTTOM: 5px;
COLOR: #003366;
PADDING-TOP: 5px;
FONT-FAMILY: Verdana, Arial;
BACKGROUND-COLOR: #eef5fb
}
.TablemainDepartment TD.FacultyLink
{
BORDER-RIGHT: #dedede 1pt solid;
PADDING-RIGHT: 7px;
BORDER-TOP: #dedede 1pt solid;
PADDING-LEFT: 7px;
FONT-SIZE: 8.5pt;
PADDING-BOTTOM: 7px;
MARGIN: 7px;
BORDER-LEFT: #dedede 1pt solid;
COLOR: #003366;
PADDING-TOP: 7px;
BORDER-BOTTOM: #dedede 1pt solid;
FONT-FAMILY: Verdana
}
.TablemainDepartment TD.FacultyLink A
{
FONT-WEIGHT: bolder;
FONT-SIZE: 8.5pt;
COLOR: #1372a3;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none
}
.TablemainDepartment TD.FacultyLink A:hover
{
FONT-WEIGHT: bolder;
FONT-SIZE: 8.5pt;
COLOR: #4aa4d3;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none
}
.TablemainDepartment TD.FacutyTableHeading
{
BORDER-RIGHT: #dedede 1pt solid;
PADDING-RIGHT: 7px;
BORDER-TOP: #dedede 1pt solid;
PADDING-LEFT: 7px;
FONT-WEIGHT: bolder;
FONT-SIZE: 9pt;
PADDING-BOTTOM: 7px;
MARGIN: 7px;
BORDER-LEFT: #dedede 1pt solid;
COLOR: #003366;
PADDING-TOP: 7px;
BORDER-BOTTOM: #dedede 1pt solid;
FONT-FAMILY: Arial;
BACKGROUND-COLOR: #f2f2f2;
TEXT-ALIGN: center
}
वरील स्टाईलशीटवरून प्रत्येक टॅगसाठी वेगवेगळी स्टाईल कशी सविस्तरपणे लिहावी लागते हे दिसून येईल. अनेक वेबसाईटचा अभ्यास करून व ग्राहकाच्या वेबसाईटविषयी असणार्या अपेक्षांचा व आवडीचा विचार करून आकर्षक वेबपेज दिसण्यासाठी प्रत्येक क्लासचे डिझाईन करावे लागते.
