دانلود نرم افزار Brackets ویرایشگر فایل های HTML CPP JavaScript

بسم الله الرحمن الرحیم

281

برخی از ویژگی های خوب این ویرایشگر  :

رایگان است ! بله این یک قابلیت خوب است که در هر ویرایشگر قدرتمندی پیدا نمی شود و از همه قابلیت های نرم افزار به طور رایگان استفاده نمایید.

از زبان های فارسی و راست چین پشتیبانی می کنند ( بر عکس نرم افزار Sublime Text که البته انتخاب بسیار قدرتمنند و محبوب است )

کاملا می توانید منو های این نرم افزار را به زبان خود تغییر دهید !

ارائه نسخه نرم افزار برای سیستم عامل های مختلف (لینوکس ۳۲ و ۶۴ ، ویندوز ، مکینتاش )

Live HTML Development =این قابلیت تغییرات کد نویسی شما را به صورت آنلاین و بلافاصله و بدون ذخیره یا بارگذاری مجدد مرورگر مشاهده نمایید.

نوشته شده توسط زبان جاوا اسکریپت

دارای قابلیت Code Hints :این قابلیت برای افراد مبتدی و تازه کار بسیار مفید است و با این کار توضیحاتی کوتاه راجب به زبان های Html، Css و JS به شما ارائه می دهد که اگر قانع کننده نبود به سایت دیگری ارجاع داده می شوید تا توضیحات کامل تری برای کد ها مشاهده نمایید.

همه همین امکانات بخشی از قدرت ویرایشگر brackets است و علاوه بر این افزونه هایی بسیار وجود دارد که می توانید نصب کنید و ویرایشگر را قدرتمند تر از همیشه کنید تقریبا تمامی افزونه هایی که برای طراحی وب سایت نیاز دارید را می توانید به راحتی نصب و استفاده کنید.

دریافت نرم افزار حجم: 38.3 مگابایت

توصیه شده توسط james wiliamson مدرس فیلم Laynda HTML essentional 2014.

آموزش استفاده از Brackets از مجموعه فیلم های TutsPlus Introduction to Brackets hc از سایت پی سی دانلود .

ساخت آنلاین نقشه تصویری

بسم الله الرحمن الرحیم

279

http://webpresencepartners.com

برای ساخ image map در مطلب مشابه قبلی درباره نحوه کد نویسی این تکنیک توضیحاتی داده شد . اما در این مطلب قصد دارم با معرفی سایت بسیار جالب کار ساخت یک نقشه تصویری خیلی راحت میشه. در این روش به صورت آنلاین و کاملا بدون کد فقط با چند کلیک ، میشه یه نقشه تصویری ساخت.

نقشه تصویری یا image map چیست ؟ یک تکنیک که با کمک CSS میتوان به قسمتی از یک عکس لینک داد . بیشتر برای سایت های پر حجم مورد استافده قرار میگیرد.

مرحله اول عکس مورد نظر رو با فتوشاپ یا نرم افزار های دیگه بسازید.

مرحله دوم : به آدرس لینک برید

                                            ( http://webpresencepartners.com/tools/css-image-map-generator )

مرحله سوم : عکس خودتون رو از تب آپلود عکس آپلود کنید . سایت خودش عکس شما را بعد از چند ثانیه با ابعاد کامل به تب بعدی می بره و فقط صبر کنید.

مرحله چهارم : در تب ویژوال ادیتور با دکمه ی Add link یک کادر درست میشه اون رو به محل لینک مورد نظر خود بکشید و اندازه رو تغییر بدید .

مرحله پنجم : گوشه کادر نقطه چین قرمز رنگ دو تا دکمه ی آیکون Edit , Delete هستند که میشه مقصد و عنوان لینک رو تنظیم یا درغیر این صورت لینک رو پاک                     کرد .

مرحله ششم : در تب Preview نتیجه کار خودتون رو ببینید.

مرحله هفتم : در تب Generated Code میتوانید کد CSS و HTML نهایی خودتون رو کپی بگیرید . (پایان ساخت)

                   در جایی از سایت یا وبلاگ خودتون که میخواهید این نقشه حضور داشته باشه اونجا پیست کنید

مرحله هشتم : (مهم) در اولین خط کد HTML در قسمت دارکتوری عکس یعنی اینجا

<div class="map_image" style="background-image: url('*************************');">

باید عکس خودتون رو در یک سایت مخصوص آپلود عکس آپلود کنید تا همیشه دردسترس باشه و لینک عکس رو با پسوند مخصوص عکس در جای ستاره ها کپی کنید .

فیلم آموزشdreamweaver سعید جمشیدی

http://maktabkhooneh.org/course?course=dream838

بسم الله الرحمن الرحیم

۲۷۴

دوره آموزشی برنامه دریم ویر رو برای CSS دوست داشتم پیدا کنم اما آموزش خوبی نبود تا اینکه توی سایت محبوبم یعنی مکتبخونهhttp://maktabkhooneh.org پیدا کردم .

مجموعه ی بیست و چهار کلیپ فیلم آموزشی هست که خیلی عالیه فقط کار با نرم افزار رو بالا میبره بقیه ش با شماست که از مهارت هاتون استفاده لازم رو ازش ببرید. لینک زیر منبع مجموعه کلیپ هاست .

http://maktabkhooneh.org/course?course=dream838

جلسه ۱ - آموزش مقدماتی Adobe Dreamweaver | مقدمه زبان های صفحات وب

جلسه ۲ - آموزش مقدماتی Adobe Dreamweaver | نصب نرم افزار و تنظیمات اولیه

جلسه ۳ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۴ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۵ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۶ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۷ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۸ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۹ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۱۰ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۱۱ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۱۲ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۱۳ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۱۴ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۱۵ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۱۶ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۱۷ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۱۸ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۱۹ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۲۰ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۲۱ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۲۲ - آموزش مقدماتی Adobe Dreamweaver

جلسه ۲۳ - آموزش مقدماتی Adobe Dreamweaver

ترفند ساخت منوی تصویری - لینک دادن به قسمت های عکس

بسم الله ارحمن الرحیم

مطلب 167

---

روزنامه دیواری :: ترفندها

ساخت نقشه تصویری image map با استفاده از CSS

+ فیلم آموزشی

تا به حال شده که توی صفحات وب ببینید که سایت در تکه هایی از یک تصویر لینک داده؟!

نقشه تصویری راهکار جالبی است که می توان با استفاده از آن به قسمت های یک عکس لینک داد و حتی جلوه های بصری روی لینک های داخل عکس ایجاد نمود.

این آموزش از کتاب مرجع html , css الگو گرفته است . لینک صفحه ی کتاب در انتهای این مطلب موجود است.

ترفند :: دکمه دانلود حرفه ای css

بسم الله الرحمن الرحیم

مطلب 162 | روزنامه دیواری :: ترفندها

کد دکمه ی دانلود حرفه ای

استفاده از CSS

download

.

.

کد زیر به CSS هست ، اون رو به فایل خارجی CSS سایت خودتون اضافه یا در متن html وارد کنید.

a.download {
    padding: 12px 20px 12px 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07rem;
    color: #c0c0c0 !important;
    position: absolute;
    
    
    overflow: hidden;
    width: auto;
    background-color: white;
    
    -moz-box-shadow: inset 0 0 0 4px #dedede;
    -webkit-box-shadow: inset 0 0 0 4px #dedede;
    box-shadow: inset 0 0 0 4px #dedede;

    background-image: 
        url(http://cld.persiangig.com/preview/LtUKbncIcf/501188402113973845.png);
    background-repeat: no-repeat;
    background-position: 112px -34px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;



}
a.download:link {
    text-decoration: none;
}

a.download:hover,
a.download:focus {
    color: #FFF !important;
    padding: 12px 50px 12px 20px;
    background-color: #53bf6b;
    background-position: 112px 18px;
    text-decoration: none !important;
    -moz-box-shadow: inset 0 0 0 0 #CCC;
-webkit-box-shadow: inset 0 0 0 0 #CCC;
box-shadow: inset 0 0 0 0 #CCC;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

a.download:active {

}

در کد بالا دکمه طراحی شده ؛ برای استفاده در مطلب وبلاگ یا سایت فقط نیاز به فراخوانی داره :

<p><a class="download" herf="secad.ir" >download</a></p>

فایل ضمیمه ی کد css برای لینک به سند : http://cld.persiangig.com/preview/lImAyMUhAM/download-b.css

* مورد توجه دوستان تازه کار :)

برای لینک دادن به فایل cssسه راه وجود داره:

         1- می توانید از سرویس بیان که به طور پیش فرض قابلیت کنترل کدهای css رو داره استفاده کنید.

         2- استفاده از سایت پرشین گیگ (آموزش استفاده از پرشین گیگ :  http://www.aparat.com/v/23BVO )

         3- وارد کردن کد css در داخل html به طور مستقیم :

<style type="text/css">
                        /* your CSS codes */
</style>

منبع : secad.ir