ساخت دکمه های html توسط CSS برای سایت
برای ایجاد دکمه در صفحات وب سایت خود می توانید به جای استفاده از تصاویر از HTML و CSS استفاده نمایید.
می توانید برای ایجاد دکمه های html و css از سایت های زیر کمک بگیرید:
http://www.cssbuttongenerator.com/
http://www.bestcssbuttongenerator.com/
http://css-tricks.com/examples/ButtonMaker/
که بهترین آنها از نظر دارکوب http://www.cssbuttongenerator.com می باشد که پس از طراحی دکمه کد آن را در تب get the code در اختیار شما قرار می دهد.
استفاده از این نوع دکمه ها در صفحه به شما این امکان را می دهند تا به راحتی فونت و رنگ بندی و همچنین ظاهر دکمه مورد نظر خود را در صفحه تغییر دهید که تغییر آن در دکمه های بسیار مشکل می باشد.
رفع مشکل ارتفاع یکسان ستون ها در طراحی وب
این مشکل تمامی طراحان وب بوده از زمانی که طراحی وب از صفحه بندی با table به div گرایش پیدا کرد و سوالی که برای اکثر طراحان مطرح بود آن بود که چگونه می توانم پس زمینه با 100% ارتفاع داشته باشم در لایه بندی چند ستونی.
چندین روش برای حل این مشکل وجود دارد که در این بخش یک روش آن را بیان می نمایم که ممکن است در حالات زیر مورد استفاده پروژه شما واقع شود:
- تصاویر پس زمینه، بردرها، افکت های CSS3 مورد استفاده برای ستون های شما
- بیشتر از سه ستون
- ارتفاع و عرض انعطاف پذیر
شرح مشکل از قرار زیر می باشد:
نمایش پیش فرض پس زمینه
تصویر بالا یک قالب سه ستونی می باشد که قالب ها به صورت پیش فرض به سمت چپ فلوت شده اند. هر ستون پس زمینه خود را دارد و پس زمینه به ارتفاع محتوای موجود در آن در می آید. این مورد جالی برای کاربران سایت نیست زیرا تغییر در ارتفاع باعث عدم نظم صفحات وب سایت از نظر چشمی می گردد. که HTML برای این سه لایه از قرار زیر است:
<div class="content">...</div>
<div class="sidebar">...</div>
<div class="sidebar_two">...</div>
</div>
و کد CSS تصویر بالا:
width:60%;
float:left;
padding: 20px 30px;
background: #fff;
color: #6d7072;
}
.sidebar {
width:20%;
float:left;
padding: 20px 30px;
background: #5f6673;
color: #ebeef3;
font-size: 90%;
}
.sidebar_two {
width:20%;
float:left;
padding: 20px 30px;
background: #434750;
color: #ebeef3;
font-size: 90%;
}
راه حل: استفاده از المان های کاذب pseudo-elements
زمانی که در مورد ستون های با ارتفاع یکسان صحبت می نمایم قصد بر آورده کردن دو مورد را داریم:
- ستون می بایست به اندازه محتوای خود فضا داشته باشد
- ستون ها می بایست مستقل از محتوای وجود و در صورت نیاز ارتفاع فضای خود را افزایش دهند
در مورد مثال ما، پس زمینه به اندازه فضای محتوا وجود دارد و فقط نیاز است پس زمینه می بایست تا انتهای فضای موجود کشیده شود. بنابراین در صورتی که قصد داریم پس زمینه ها تنظیمات ارتفاع متفاوتی داشته باشند، می توانیم ارتفاع را به گروه المان آن اختصاص دهیم. برای انجام این کار می بایست از pseudo-elements استفاده نماییم. برای هر کدام از ستون ها از :before استفاده می نماییم تا یک pseudo-element ایجاد گردد. با تلفیق مکان کامل absolute positionin و z-index پس زمینه را به صورتی در نظر می گیرم تا تمام بخش را در بر گیرد. کد CSS جدید از قرار زیر است:
width:60%;
}
.content {
float:left;
padding: 20px 30px;
color: #6d7072;
}
.content:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 0;
background: #fff;
}
.sidebar, .sidebar:before {
width:20%;
}
.sidebar {
float:left;
padding: 20px 30px;
color: #ebeef3;
font-size: 90%;
}
.sidebar:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 60%;
background-color: #5f6673;
}
.sidebar_two, .sidebar_two:before {
width:20%;
}
.sidebar_two {
float:left;
padding: 20px 30px;
color: #ebeef3;
font-size: 90%;
}
.sidebar_two:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 80%;
background-color: #434750;
}
که در نهایت ستون های ما با حالت زیر در می آید:
این کد چگونه کار می کند
مطابق تصویر زیر :before به مانند المان در بر دارنده المان فعلی عمل می نماید که ارتفاع آن با توجه به CSS در نظر گرفته شده به اندازه ارتفاع المان در بر گیرنده سه ستون wrap می باشد.
نکته مهم: ستون های شما می بایست داخل المانی باشند که موقعیت آن position: relative; باشد تا absolute positioning آنها عمل نماید.
کمتر و بیشتر از سه ستون
برای انجام همین کار تا سه ستون و با استفاده از :before و :after می توانید مقاله Nicolas Gallagher را مطالعه نمایید. برای ستون های بالاتر از این تعداد نیز می توانید از "background holder" استفاده نمایید.
لینک منبع:
طراحی نسخه ریسپانسیو سایت با استفاده از HTML و CSS
با توجه به افزایش میزان استفاده کاربران از تلفن همراه و موبایل برای وبگردی، طراحی سایت به صورت ریسپانسیو و سازگار با موبایل ضرورت پیدا کرده است و در صورتی که وب سایت شما در ابزارهای موبایلی نمایش مناسبی نداشته باشد رنک بسیاری از دست خواهد داد.
زمانی که قالب معمولی سایت خود را طراحی نمودید هم اکنون زمان آن می باشد که قالب سایت سازگار با رزولوشن های مختلف طراحی نمایید. برای انجام این کار کافی است ابتدا کد زیر را بین دو تگ head خود اضافه نماییم:
این کد به مرورگر دستور می دهد که صفحه را به اندازه پیسکل واقعی نمایش دهد. به عنوان مثال در صورتی که عرض سایت شما 1024 باشد سایت در کلیه مرورگرها و رزولوشن ها در همین سایز نمایش داده می شود که باعث اسکرول افقی خوردن سایت در تبلت و موبایل می شود.
سپس کافی است سه فایل CSS برای رزولوشن های مختلف طراحی نمایید و در صفحه HTML خود لینک نمایید:
<link rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 327px)" href="mobile.css">
<link rel="stylesheet" media="only screen and (min-width:328px) and (max-width: 768px)" href="templates/template/tablet.css">
فایل CSS اول برای رزولوشن های بالاتر از 1024 که برای رزولوشن کامپیوتر و لب تاپ می باشد.
فایل CSS دوم برای نسخه موبایل وب سایت که سایز رزولوشن های 327 به پایین می باشد.
فایل CSS سوم برای رزولوشن های صفحه مابین 1024 و 327 پیکسل می باشد، که برای مرورگرهای و ابزارهای میان سایز نظیر تبلت طراحی می گردند.
برای طراحی سایت مختص به هر عرض کافی است عرض مرورگر خود را در محدوده سایز مورد نظر قرار دهید و کدهای CSS خود را به فایل مورد نظر اضافه نمایید.
* دقت نمایید هر کدی که در برای هر سایزی در فایل CSS مورد نظر درج می نمایید برای سایر سایزها مورد استفاده قرار نمی گیرد.
ساخت نسخه موبایل وب سایت توسط با روش های دیگری نیز امکان پذیر می باشد، اما در این مقاله به ساده ترین روش پرداخته ایم. برای مشاوره در زمینه طراحی ریسپانسیو سایت با دارکوب تماس حاصل فرمایید.
معمولا مشکل برای نمایش سایت بین عرض 327 و 1024 می باشد که می توانید آن محدوده را نیز به چند فایل مختلف CSS اختصاص دهید به عنوان مثال از 327 تا 500، از 500 تا 700، از 700 تا 900 و از 900 تا 1024.
با استفاده از کتابخانه bootstrap می توانید پیاده سازی نسخه موبایلی سایت را بسیار راحتر انجام دهید زیرا خود این کتابخانه تغییر سایزهای المان های موجود در صفحه را به صورت خودکار انجام می دهد.
با توجه به میزان استفاده از موبایل و تبلت و رشد آن در سال های اخیر ایجاد نسخه موبایلی وب سایت بسیار با اهمیت می باشد، به طوری که گوگل نیز از مدیران سایت می خواهد نسخه موبایلی سایت را طراحی نمایند.
افکت سفید و سیاه (Grayscale) کردن تصاویر توسط CSS
برای انجام این کار کافی است کد CSS زیر را به تصویر مورد نظر خود اختصاص دهید. در این مثال فرض بر آن است که شما قصد دارید تصویر در حالت پیش فرض به صورت سفید و سیاه باشد:
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
و برای آنکه تصویر با موس اور کاربر به حالت عادی و رنگی بازگردد می توانید از کد CSS زیر استفاده نمایید:
filter: none;
-webkit-filter: grayscale(0);
}
CSS مرتب سازی قالب صفحه فرم تماس با ما جوملا 3
در صورتی که سایت خود را توسط جوملا 3 پیاده سازی نموده اید می توانید از کدهای زیر برای فرمت بندی صفحه فرم تماس با ما استفاده نمایید:
برای مرتب سازی بخش اطلاعاتب بالای صفحه تماس با ما از کد CSS زیر استفاده نمایید:
dt{ clear:right; }
dd{ clear:left; }
.accordion-heading{ width:100%; clear:both;}
برای مرتب سازی فرم تماس با ما جوملا از کد زیر:
و برای استایل دهی به تول تیپ های فرم تماس جوملا از کد CSS زیر استفاده نمایید:
position: absolute;
z-index: 1030;
display: block;
visibility: visible;
font-size: 11px;
line-height: 1.4;
opacity: 0;
filter: alpha(opacity=0);
text-align:right;
}
.tooltip.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.tooltip.top {
margin-top: -3px;
padding: 5px 0;
}
.tooltip.right {
margin-left: 3px;
padding: 0 5px;
}
.tooltip.bottom {
margin-top: 3px;
padding: 5px 0;
}
.tooltip.left {
margin-left: -3px;
padding: 0 5px;
}
.tooltip-inner {
max-width: 200px;
padding: 8px;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-align:right;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip {
max-width: 400px;
}
.tooltip-inner {
max-width: none;
text-align: right;
text-shadow: none;
}
th .tooltip-inner {
font-weight: normal;
}
.tooltip.hasimage {
opacity: 1;
}
.tip-text {
text-align: right;
}
پس از قرار دادن کدهای مورد نظر صفحه تماس با ما جوملا مرتب شده و می توانید تنظیمات مورد علاقه خود را در فایل CSS اضافه نمایید.
کد Css جهت انیمیشن کردن باکس
در سایت های امروزه برخی از کارهای انیمیشن در سایت رو میشه با کدهای Html5 و Css3 نوشت که برای مثال عکس بالا توسط css دور باکس ها به صورت انیمیشن درست شده و ترتیب درست کردن آنرا توضیح میدهیم,
برای اینکه در سایت بتونیم باکس های Shadow درست کنیم, که وقتی Hover میکنیم روی باکس, و دور باکس به صورت انیمیشن و سایه های رنگی به وجود بیاریم از کدهای زیر استفاده نمایید :
کد Css :
*{
padding:0;
margin:0;}
#master {
/* [disabled]background-color: #F00; */
height: 895px;
width: 980px;
position: relative;
margin: 0 auto;
}
#apDiv1 {
position: absolute;
left: -51px;
top: -1px;
width: 981px;
height: 131px;
z-index: 1;
}
#apDiv2 {
position: absolute;
left: 296px;
top: 68px;
width: 612px;
height: 42px;
z-index: 2;
}
#apDiv2 ul li {
list-style-type: none;
float: left;
display: block;
/* [disabled]background-color: #666; */
height: 42px;
width: 102px;
text-align: center;
line-height: 42px;
font-family: verdana;
font-size: 12px;
}
.menu1 {
background-color: #C61211;
}
.menu2 {
background-color: #FC6B00;
}
.menu3 {
background-color: #9BCA00;
}
.menu4 {
background-color: #0BAAD4;
}
.menu5 {
background-color: #CB3187;
}
.menu6 {
background-color: #F79D00;
}
#master #apDiv2 ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
#apDiv3 {
position: absolute;
left: 491px;
top: 18px;
width: 300px;
height: 26px;
z-index: 3;
background-color: #1B1C1E;
transition: all 0.5s;
}
.search:hover{box-shadow:0px 0px 30px #FFFFFF; }
.search{ width: 300px;
height: 24px; background-color: #1B1C1E; border:0px; color:#FFF;}
#apDiv4 {
position: absolute;
left: 809px;
top: 17px;
width: 101px;
height: 25px;
z-index: 4;
font-family: verdana;
font-size: 12px;
line-height: 25px;
font-weight: bold;
color: #FFF;
background-color: #1B1C1E;
text-align: center;
cursor:pointer;
transition: all 0.5s;
}
#apDiv4:hover{
box-shadow:0px 0px 30px #FFFFFF;}
body {
background-color: #000;
}
کد html :
<div id="master">
<div id="apDiv1"></div>
<div id="apDiv2">
<ul>
<li class="menu1">Item1</li>
<li class="menu2">Item2
<ul>
<li class="menu1">Sub Item 1</li>
<li class="menu2">Sub Item 2</li>
<li class="menu3">Sub Item 3</li>
</ul>
</li>
<li class="menu3">Item3</li>
<li class="menu4">Item4</li>
<li class="menu5">Item5</li>
<li class="menu6">Item6</li>
</ul>
</div>
<div id="apDiv3"><input class="search" value="search..." type="text" /></div>
<div id="apDiv4">Search</div>
</div>
ساخت منو Dorp Down افقی توسط Css
روش های مختلفی برای ایجاد منوی دراپ داون و یا آبشاری در طراحی وب وجود دارد که در این مقاله یکی از ساده ترین روش ها را آموزش خواهم داد.
ساخت منو Dorp Down افقی توسط Css
اول یک فایل به اسم index.php میسازیم و بعد یک فولدر به اسم css میسازیم و داخل فولدر css فایل style.css را میسازیم .
برای ساختن منوهای drop down توسط css اول در فایل index.php در قسمت <body> <body/> کدهای زیر را قرار دهید :
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub Item1</li>
<li>Sub Item1</li>
<li>Sub Item1</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4
<ul>
<li>Sub Item1</li>
<li>Sub Item1</li>
<li>Sub Item1</li>
</ul>
</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
و بعد برای لینک شدن صفحه index.php به صفحه style.css از کد زیر استفاده میکنیم و آنرا قبل از <head/> میگذاریم :
<link href="css/style.css" rel="stylesheet" type="text/css" />
و بعد کدهای زیر را در صفحه style.css میگذاریم نماییم :
@charset "utf-8";
body,ul,li {
margin: 0px;
padding: 0px;
background-color:#0CF;
}
li {
font-family: verdana;
font-size: 12px;
color: #333;
line-height: 40px;
list-style-type: none;
/* [disabled]list-style-image: url(../images/li.png); */
background-color: #990;
width: 100px;
float: left;
text-align: center;
height: 40px;
margin-left: 2px;
display: block;
}
li ul {
display: none;
}
body ul li ul li {
background-color: #F90;
margin: 0px;
padding: 0px;
}
li:hover{
background-color:#CC0;
cursor:pointer;}
li:hover>ul{
display:block;}
تصویر منو به شکل زیر میباشد :
انتخاب رنگ برای وب سایت
در صورتی که از کد نویسی css استفاده کرده باشید با نحوه معین کردن رنگ ها در آن آشنا شده اید. دو نوع کد برای رنگ داریم کد های 6 رقمی به عنوان مثال #cc99ff و کدهای سه رقمی به عنوان مثال #c9f. رنگ های سازگار با مرورگر وب سایت رنگ های 3 رقمی هستند. که این سه رقم هر رقم آن دوبل در نظر گرفته می شود. به عنوان مثال کد رنگی به مانند #c9f کد اصلی آن این چنین است #cc99ff
به عنوان مثال:
Black (#000000) is written #000
Red (#ff0000) is #f00
Green (#00ff00) is #0f0
Blue (#0000ff) is #00f
انتخاب رنگ مناسب
استفاده از گروه رنگ های مناسب به وب سایت شما روح می بخشد. با استفاده از کدهای هگزا دسیمال انتخاب گروه رنگ های مناسب بسیار آسان می باشد. یک مجموعه سه تایی از رنگ ها نارنجی، ارغوانی و سبز آبی می باشد که به صورت #fc0, #c0f, و #0fc نوشته می شوند. شما با جا به جا کردن اعداد در رنگ های سه تایی می توانید رنگی که با سایر رنگ ها هارمونی داشته باشد را انتخاب نمایید.
1. رنگ مورد نظر خود را انتخاب نمایید.
در مثال بالا کد رنگ اولیه انتخاب شده #fc0 می باشد.
2. اعداد را جا به جا نمایید به طوری که هر عدد در جای قبلی خود نباشد.
f را آخر، c را اول و 0 به وسط منتقل می شود که نتیجه آن ارغوانی می باشد.
3. اعداد را جا به جا نمایید به طوری که دوباره در مکان قبلی نباشند.
فقط یک حالت باقی مانده که بدین صورت می باشد که #0fc سبز آبی می باشد.
شما این کار را می توانید همچنین با سایر رنگ هایی که سازگار با مرورگر نیستند نیز انجام دهید. اما می بایست این کار را به صورت دو تایی انجام دهید. به عنوان مثال آبی #859CFE, صورتی #FE859C, و سبز #9CFE85 که مواردی که می بایست جا به جا نمایید 85, 9c, و fe می باشند.
آیا واقعا استفاده از رنگ های سازگار مرورگر الزامی است
پلات رنگ های سازگار با مرورگر در سال 1990 طراحی گردید. و آن به این معنا است که در صورتی که از رنگ های استفاده نمایید که جزو رنگ های سازگار با مرورگر نیستند، ممکن است رنگ مورد استفاده شما در مرورگر به خوبی نمایش داده نشود. امروزه کاربران از کامپیوترهای استفاده می نمایند که در آنها از میلیون ها رنگ پشتیبانی می شود.
اما در صورتی که نمی دانید کاربر سایت شما چه کسی و می خواهید محتاطانه عمل نمایید استفاده از رنگ های سازگار با مرورگر امن تر است. شما با استفاده از رنگ های سازگار با مرورگر وب سایت می توانید طرح های جالبی را ایجاد نمایید.
در مورد html و طراحی سایت به کمک نیاز دارید؟
می توانید از پشتیبانی آنلاین طراحی سایت دارکوب استفاده نمایید و یا به صفحه گوگل پلاس دارکوب مراجعه نموده و سوالات خود را مطرح نمایید.
5 ویرایشگر برتر html
بهترین ویرایشگر html?
قبل ها برای طراحی صفحه وب سایت طراح وب می بایست کدهای html رو به صورت دستی کدنویسی می نمود. امروزه با استفاده از ویرایشگرهای html پیاده سازی صفحه وب سایت برای طراحان وب ساده تر شده.
در این مقاله 5 تا از بهترین ویرایشگرهای html را برای شما معرفی می نمایم تا بتوانید با مقایسه بین آنها ویرایشگر مورد نیاز خود را انتخاب نمایید.
سایر مقالاتی که ممکن است علاقه مند باشید
- طراحی وب حرفه ای
- شرکت طراحی سایت در تهران
- ابزار طراحی صفحات وب سایت
- دانلود نرم افزار طراحی وب سایت
- وب سایت ساز های آنلاین
- ساخت سایت بدون نیاز به دانش فنی
- طراحی وب سایت رایگان
توجه: در صورتی که فرمت فایل خاص و یا امکان خاصی مد نظر شماست, شما می تونید لیست قابلیت های هر کدام از این نرم افزارها رو در سایت Wikipedia مطالعه نمایید.
Kompozer (Windows/Mac/Linux, Free)
Kompozer یکی از ویرایشگرهای متن html می باشد. Kompozer دارای تب هایی برای ویرایش است و همچنین قابلیت ویرایش html و نرم افزار کار با ftp نیز دارد و همچنین این نرم افزار قابلیت سفارشی سازی های بسیار دارد. Kompozer ابزاری جهت استاندارد سازی w3c صفحه دارد. این ابزار رایگان است و برای سیستم عامل های windows Mac,و Linux کاربرد دارد و هدف اصلی آن کد نویسی استاندارد و تمیز صفحه است.
iWeb (, Mac (for iLife bundle
این ابزار توسط Apple ارائه شده و با قابلیت های بسیار ساده دراگ و دراپ خود به طراح این اجازه رو می دهد که سایت رو با کمترین دانش html طراحی نماید. Apple همچنین قالب ها و وب سایت های آماده رو ارائه می نماید که با چند کلیک قابل پیاده سازی هستند. iWeb's به شما قابلیت مدیریت چندین سایت را می دهد.
Adobe Dreamweaver (Windows, Mac)
Dreamweaver معروفترین ویرایشگر html می باشد. به شما قابلیت ویرایش صفحه وب سایت رو بدون رویت هیچ کدی می ده و همچنین می تونید در کد نویسی html کار نمایید و یا بین این دو انتخاب نمایید یا همچنین قابلیت ویرایش صفحه رو در هر دو حالت کد و نرم افزاری داره. این نرم افزار دارای پلاگین های بسیاری برای طراحی سایت می باشد.
Microsoft Expression Web (Windows)
Expression Web نرم افزار ویرایشگر html مایکروسافت می باشد. این نرم افزار با استاندارهای طراحی وب سازگاری کامل داره. این نرم افزار همچنین دارای امکاناتی برای طراحی سایت بهینه سازی شده برای موتورهای جستجو می باشد و به شما امکاناتی رو از بایت آن می دهد. این نرم افزار همچنین قابلیت کد زنی css قوی دارد که کار نوشتن css رو برای شما بسیار ساده می سازد.
Flux (Mac )
Flux نرم افزار ویرایشگر html است که مخصوص Mac-based طراحی شده. Flux's به شما امکان کنترل کامل همه چیز از جمله پدینگ و مترجین و غیره رو با حرکت های موس می ده و همچنین به شما قابلیت ویرایش صفحه رو به صورت دراگ و دراپ می ده. به مانند Dreamweaver دارای پلاگین های بسیاری برای دانلود است.
در مدت طراحی سایت های اینترنتی از سال 1381 تا کنون این نرم افزارها رو به طور کامل بررسی نموده ایم و پیشنهاد ما به عنوان بهترین گزینه Adobe Dreamweaver می باشد. این نرم افزار قابلیت های فراوانی در ویرایش صفحه به شما می دهد و پیشنهاد می کنیم از این نرم افزار کنار نرم افزارهای ویرایش کد دیگر به مانند notepad++ استفاده نمایید. با تلفیق این دو نرم افزار کلیه نیازهای شما در ویرایش کد صفحات برآورده می شه.
علاوه بر موارد بالا، امسال بهترین برنامه های ویرایشگر اچ تی ام ال برای ویندوز معرفی شدند:
•NotePad ++
این یک ویرایشگر رایگان پرطرفدار است و از نرم افزار نوت پد نسخه ی قوی تری است که به طور پیش فرض در ویندوز موجود است و به قولی تنها برای ویندوز استفاده میشه. این برنامه شامل مواردی مانند شماره خط، کدگذاری رنگ، هینت و سایر ابزارهای مفید است که برنامه استاندارد Notepad نداره. این افزونه ها انتخاب ایده آلی برای طراحان وب و بهبود ظاهر سایت است.
•Komodo Edit
دو نسخه کومودو (Komodo Edit و (Komodo IDE وجود داره. Komodo Edit منبع باز و دانلود اون رایگان است.
Komodo Edit شامل بسیاری از ویژگی های عالی برای توسعه HTML و CSS است. علاوه بر این، می تونید پسوندهایی برای افزودن پشتیبانی از زبان یا سایر ویژگی های مفید مانند بعضی کاراکترهای خاص رو دریافت کنید.
Komodo شاید عالی ترین ویرایشگر نباشه، اما قیمت مناسبی داره.
•Eclipse
این برنامه یک محیط توسعه یافته ی پیچیده است که مناسب افرادی است که برنامه های زیادی در سیستم عامل های مختلف و با زبان های مختلف دارن. به صورت پلاگین کار می کنه، بنابراین اگه نیاز به ویرایش موردی باشه فقط کافیه پلاگین مناسب رو پیدا کنید و به کار ببرید.
اگه در حال طراحی برنامه های کاربردی پیچیده ای هستین، Eclipse ویژگی های بسیاری داره که میتونه به ساخت راحت تر اپلیکیشن های شما کمک بزرگی بکنه. جاوا، جاوا اسکریپت و پلاگین های PHP و همچنین یک افزونه برای طراحان اپ موبایلی وجود داره.
•CoffeeCup Free HTML Editor
این برنامه شامل دو نسخه است؛ نسخه رایگان و همچنین نسخه ی پولی که نسخه ی کامل این برنامه است. نسخه ی رایگانش هم خوبه، اما باید بدونید که بسیاری از ویژگی هایی که این پلتفرم ارائه می ده نیاز به خرید نسخه کامل داره.
اگه در طراحی و توسعه وب مبتدی هستید یا مالک یک کسب و کار کوچکید، این ابزار ویژگی های بیشتری نسبت به Komodo Edit یا Eclipse داره.
•Aptana Studio
این برنامه به جای توجه روی HTML، روی جاوا اسکریپت و سایر عناصر تمرکز می کنه که به شما امکان می ده برنامه های اینترنتی خوبی رو طراحی کنید. این برنامه ممکن است مناسب نیازهای طراحی ساده وب نباشه، اما اگر به دنبال توسعه بیشتر وب سایتتون هستید، ابزارهایی که در Aptana ارائه میشن، مناسب هستند.
یک نگرانی در مورد Aptana عدم وجود به روز رسانی هایی است که شرکت طی چند سال گذشته انجام داده است.
•NetBeans
NetBeans IDE یک IDE جاوا است که می تونه به شما در ایجاد برنامه های کاربردی وب کمک کنه.
مثل اکثر IDEها، منحنی یادگیری افزایشی داره چرا که اغلب به همون نحو که ویراستاران وب کار می کنن، کار نمی کنه. با این وجود، وقتی که بهش عادت می کنید بسیار مفید می شه.
ویژگی نسخه کنترل در IDE به ویژه برای افرادی که در محیط های طراحی توسعه بزرگ کار می کنن، به عنوان ویژگی های همکاری طراح مفید است. اگه شما جاوا و صفحات وب می نویسید، این یک ابزار عالی است.
•Microsoft Visual Studio Community
انجمن مایکروسافت ویژوال استودیو یک IDE بصری برای کمک به طراحان وب است و برنامه نویسان دیگه شروع به طراحی برنامه های کاربردی برای وب، تلفن همراه و دسکتاپ می کنن. قبلا، شما ممکن است از ویژوال استودیو اکسپرس استفاده کرده باشید، اما این آخرین نسخه نرم افزار است. اونها یک نسخه رایگان و همچنین نسخه های پولی رو برای کاربران حرفه ای و سازمانی ارائه می دن.
•BlueGriffon
BlueGriffon آخرین مجموعه از ویراستاران وب سایت است که با Nvu آغاز شده است.
این برنامه برای ویندوز، مکینتاش و لینوکس و در زبان های مختلف است.
این تنها ویرایشگر واقعی WYSIWYG است که این لیست رو ایجاد کرده و به همین ترتیب برای بسیاری از مبتدیان و صاحبان کسب و کار کوچک که مایل به کار بصری بیشتری هستن در مقایسه با رابط مبتنی بر کد، جذابیت بیشتری داره.
•Bluefish
Bluefish یک ویرایشگر کامل HTML است که در سیستم عامل های مختلف از جمله لینوکس، MacOS-X، ویندوز و ... اجرا می شه.
آخرین نسخه (2.2.7) برخی از اشکالات موجود در نسخه های قبلی رو از بین برده.
ویژگی های برجسته ای که از نسخه 2.0 استفاده می شه، بررسی خودکار املای کد، تکمیل خودکار بسیاری از زبان های مختلف (HTML، PHP، CSS، و غیره)، اسنیپت ها، مدیریت پروژه و ذخیره خودکار است.
•Emacs Profile
Emacs در اکثر سیستم های لینوکس یافت میشه و حتی اگر شما نرم افزار استاندارد نداشته باشید، می تونید صفحه رو ویرایش کنید.
برجسته ترین ویژگی های این برنامه: پشتیبانی از XML، پشتیبانی از اسکریپت، پشتیبانی پیشرفته CSS و یک اعتبار سنجی داخلی، و همچنین اصلاح HTML با کد رنگی.
اسکرول به بالا jquery
با توجه به درخواست های مکرر اسکریپت اسکرول به بالای انیمیشنی را برای شما گذاشتم. پیاده سازی این افکت از طریق jquery بسیار آسان می باشد. این اسکریپت چک می نماید زمانی که اسکرول پایین آمد لینک اسکرول به بالا نمایش داده می شود, زمانی که بر روی کلید اسکرول به بالا کلیک شود صفحه سایت به بالای صفحه اسکرول می شود. می توانید دمو را بررسی نمایید تا ببینید به چه صورت کار می کند.
طراحی css
المان #back-top با position:fixed تعریف نموده تا در صفحه به صورت ثابت باقی بماند. تگ span اضافی است. تگ span را به این دلیل اضافه نموده ام که بتوانم به آن گرافیک تصویری اضافه نمایم. همچنین خصوصیت transition:1s (1s = 1 second) برای ایجاد افکت موس اور فید اضافه نمودم.
به این بخش نگاهی بیندازید دمو (یادداشت: هنوز بخش jquery اضافه نگردیده).
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
بخش jQuery (دمو)
کد زیر کد Javascript می باشد. به صورت پیش فرض, تگ #back-top مخفی خواهد شد (آن <p id="back-top"> تگ در دمو می باشد) . سپس اسکرول بار صفحه را چک می نماید (اسکرول به بالا) زمانی که بزرگتر از 100 بود, سپس بر روی المان #back-top فید می نماید, در غیر این صورت فید اوت می نماید. بخش بعدی کل کلیدهای فانکشنی هستند. هنگامی که #back-top کلیک شد, صفحه را به موقعیت 0 اسکرول می دهد.
در صورتی که می خواهید کد نویسی jquery یاد بگیرید, بخش مقالات jquery را مطالعه نمایید.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
بدون Fallback جاوا اسکریپت
یادداشت آنکه لینک به بالای صفحه به تگ #top داده شده که مشخصه <body> می باشد. نیازی به اضافه کردن مکان نیست زیرا این مورد را خود jquery متوجه می شود. هر چند, بهتر است که این موارد را مشخص نمایید.