در پی درخواست یکی از کاربران ، این مطلب را ایجاد کرده ام. می خواهم در این جا به طور ساده طرز ایجاد یک پنجره ی شناور برای صفحات وب را آموزش دهم. در این آموزش از کد های html ، css و javascript و از کتابخانه ی jquery استفاده می کنیم.

برای این که کد ها را آزمایش کنید از ابزار زیر استفاده کنید:

دمو ساز - آزمایش کد ها

کد های html

خب! ابتدا کد های اچ تی ام ال:

<<<code>>>

<a href="#" title="باز کردن پنجره" id="winOpen"> open floating window </a>

<div class="win-blur"></div> <!-- صفحه ی تار پشتی -->

<div class="win-width"> <!-- تنظیم کننده ی پنجره -->

   <div class="win-page"> <!-- خود پنجره -->

      <span class="win-close">X</span> <!-- بستن -->

      <p>

         چیزی که در پنجره نمایش داده می شود.

      </p>

   </div>

</div>

<<</code>>>

توضیحات بیشتر در ادامه ی مطلب.

به سلکتور ها ، کلس های کاذب هم گفته می شود. (انتخابگر کلمه ی کلی تری است)

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

قبل از شروع آموزش ، در یک صفحه ی اینترنت روی قسمتی از صفحه کلیک راست کنید و inspect element را بزنید تا قسمتی باز شود. این قسمت تمام المنت های صفحه را با ویژگی ها و استایل های css آن ها نمایش می دهد. این ویژگی در مرورگر فایرفاکس سریع تر است و کار با آن راحت تر است. این قسمت کمک بزرگی برای شماست تا طرز کار با کد های css را یاد بگیرید. در آینده این قسمت در آموختن javascript هم به شما کمک خواهد کرد.

برای شروع آموزش به ادامه ی مطلب بروید.

در آموزش قبلی شما دیدید که چگونه می توانید یک فایل با پسوند های (html یا htm - فرقی با هم ندارند) را به وسیله ی نرم افزار notepad که به صورت پیشفرض روی ویندوز وجود دارد تغییر دهید. همچنین شما این یک فایل html را در مرورگر خود باز کردید و با استفاده از ctrl + u توانستید کد های آن صفحه را مشاهده کنید. در اصل شما اگر آموزش قبلی را مطالعه کرده باشید ، مقدمات html را به پایان رسانده اید و آماده ی ادامه ی مطالعه ی خود در این مطلب هستید.

توجه داشته باشید که شما اگر می خواهید این کد ها را امتحان کنید ، از تگ های body , head , html هم استفاده کنید و این کد ها را در بخش body آزمایش کنید.

در این آموزش قرار است ایجاد یک صفحه که دارای سر تیتر ، یک بند متن ، خط افقی ، شکست خط و توضیح در کد ها را یاد بگیرید.

برای شروع مطالعه ی این آموزش به ادامه ی مطلب بروید.

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

این آموزش مقدمه ی آموزش کار با تگ (کلمات کلیدی)های اچ تی ام ال است. یکی از ویژگی های آموزشات این وبلاگ این است که اصول کار با کد ها را بیان می کند و کاری به جزئیات بی فایده ندارد. پیشنهاد می کنم اگر به دنبال تاریخچه ی کد ها و این جور چیز ها می گردید این مطالب را دنبال نکنید. این مطالب فقط و فقط کار با کد ها را آموزش می دهد.

موارد لازم برای کار با html :

1. یک نرم افزار ویرایش مثل notepad , wordpad که به صورت پیشفرض در ویندوز وجود دارد و یا نرم افزار notepad++ که کار با کد ها را خیلی راحت تر می کند.

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

همان طور که گفتیم ما در این آموزشات تاریخچه و ... رو بیان نمی کنیم و فقط هدف آموزش کار با کد هاست. اما فقط این را بدانید که html مخفف Hyper Text Markup Language است.

برای مشاهده ی توضیحات بیشتر به ادامه ی مطلب بروید.

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

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

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

قابل اجرا در:

• همه ی سایت ها و وبلاگ ها

برای دریافت کد و مشاهده ی توضیحات بیشتر به ادامه ی مطلب بروید.

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

برای مشاهده ی کدساز و توضیحات بیتشر به ادامه ی مطلب بروید.

مهم: اگر می خواهید نرم افزاری با کاربرد این ابزار را روی سیستم خود داشته باشید و بدون استفاده از اینترنت بتوانید کد های رنگ خود را بسازید ، اینجا کلیک کنید.

در این مطلب ما ابزاری را برای وبلاگ ها و سایت ها طراحی کرده ایم که خیلی ها دنبال آن می گردند. این ابزار ، ابزار بارگزاری صفحه است. یکی از ویژگی های مهم این ابزار این است که پس از پایان بارگزاری به شما یک پیغام پایان نمایش می دهد ؛ این یک کار جدید است. شما می توانید از کد ساز این مطلب ، کد خود را دریافت کنید و آن را به راحتی در قالب سایت یا وبلاگ خود قرار دهید تا ابزار بارگزاری روی صفحه ی شما قرار گیرد. شما می توانید در کد ساز این مطلب هر رنگی را که می خواهید به این ابزار بارگزاری صفحه بدهید و در وقاع خودتان یک پنجره ی بارگزاری جدید طراحی کنید. شما همچنین می توانید ضخامت خط حاشیه را نیز معلوم کنید.

اگر طرح زیبا تر و بهتری برای یک پنجره ی بارگزاری به ذهنتان رسید آن را به ما بگویید تا ما آن را طراحی کنیم.

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

قابل اجرا در:

همه ی سایت ها و وبلاگ ها

برای مشاهده کدساز و توضیحات بیشتر به ادامه ی مطلب بروید.

در این مطلب شما می توانید کدی را دریافت کنید که با استفاده از آن یک تصویر 46*46 در گوشه ی پایین صفحه ی شما ایجاد می شود و کاربران می توانند با استفاده از آن به بالای صفحه بازگردانده شوند. این ابزار در بسیاری از سایت ها و وبلاگ ها استفاده شده است. توجه داشته باشید که شما می توانید از تصویر خودتان نیز استفاده کنید و حتما لازم نیست از این 5 تصویر استفاده کنید. اگر از طرح این ابزار خوشتان نیامد می توانید منتظر بمانید تا در آینده ، ابزار های انیچنینی بیشتری برای شما قرار دهیم.

قابل اجرا در:

• همه ی سایت ها و وبلاگ ها

برای دریافت کد و مشاهده ی توضیحات بیشتر به ادامه ی مطلب بروید.

شما در این مطلب می توانید کد تصویر دریافت کنید. دریافت کد بسیار آسان است. شما تنها لینک را وارد می کنید و تصویر را با شیوه ی این مطلب دریافت می کنید. ما در این مطلب شیوه ی تصویری ایجاد کرده ایم که با برخورد موس به تصویر ، تصویر 5درجه می چرخد و شکل زیبایی را ایجاد می کند. امیدواریم استفاده ی کافی را ببرید.

قابل اجرا در:

• همه ی سایت ها و وبلاگ ها

برای دریافت کد و دیدن نمونه به ادامه ی مطلب بروید.

اگر از میهن بلاگ یا رزبلاگ استفاده می کنید باید بدانید که این دو سرویس امکان معلوم کردن برچسب را برای مطالب دارند که این موضوع می تواند باعث افزایش بازدید مطالب شما بشود. حال ما برای این امکان یک شیوه ی جالب و زیبا طراحی کرده ایم. شما می توانید این شیوه ی زیبا را در نمونه ببینید.

قابل اجرا در:

• رزبلاگ
• میهن بلاگ
  

  برای دیدن نمونه اینجا کلیک کنی

برای دریافت کد ها و مشاهده ی توضیحات بیشتر به ادامه ی مطلب بروید.