آموزش طراحی منوی افقی با HTML و CSS

4  آموزش طراحی منوی افقی با HTML و CSS

 با یکی دیگر از آموزشهای طراحی منو در خدمت شما هستم . تمام وب سایتهای اینترنتی دارای Menu می باشند و منو اصلی ترین بخش یک قالب وب سایت به شمار می آید که اگر بدرستی تنظیمات و رنگ آن انتخاب نشود ، دسترسی به قسمت های مختلف سایت تقریبا امکان پذیر نمی باشد . 
در این مقاله آموزشی با استفاده از Html و Css یک منوی افقی برای شما طراحی می کنم و آموزش آن را همراه با کد و تصاویری که در ادامه آماده کرده ام قرار میدهم. برای درک بهتر می توانید ابتدا دمو را مشاهده کرده و فایل اصلی را در پایان آموزش دانلود کنید . سعی کنید ابتدا یک بار آموزش را دقیق بخوانید سپس دمو را مشاهده و اگر به نتیجه نرسیدید از فایل اصلی استفاده کنید . 

آموزش ساخت form ثبت نام با Html و Css

4 آموزش ساخت form ثبت نام با Html و Cssهیچ سایتی را نمی توانید پیدا کنید که دارای فرم ثبت نام یا ورود کاربران نباشد البته سایتهای HTML از این قاعده مستثنی می باشند ولی تقریبا تمام وب سایتهای فعال دارای یک فرم ثبت نام هستند . فرم ثبت نام به صورت پیش فرض باید با Html طراحی شده سپس با Css  شکل ظاهری آن تغییر کند و در پایان با زبان های برنامه نویسی پیشرفته مثل PHP یا ASP باید به یک پایگاه داده متصل شوند.
در ادامه میخواهم روش طراحی یک فرم ثبت نام را به صورت ساده و بدون هیچ طرح خاصی توضیح بدهم تا به راحتی بتوانید با استفاده از یکسری از تگ های ساده فرمتان را طراحی و شکل ظاهری آن را تغییر بدهید .  برای شروع نیاز به یک ویرایشگر متن مثل نوت پد یا دریم ویور دارید تا به راحتی کدتان را در آن تایپ کرده و نتیجه را مشاهده کنید . 

نقش متاتگ در HTML چیست ؟

HTML5-wallpaper01-1600x1200یکی از ساده ترین چیزهایی که در مقدمات سئو باید به آن توجه داشت متا تگ می باشد که بیشترین تاثیر هم می تواند داشته باشد البته بیشتر موتورهای جست­جو به این تگ توجه نمی کنند اما برخی از موتورهای جست­جوگر به این تگ توجه می کنند مانند گوگل .  به صورت کلی متا تگ ها، برچسب هایی در HTML هستند که اطلاعاتی از محتوای صفحات را ارایه می دهند. آن ها تاثیری در چگونگی نمایش صفحه ندارند.
تا به حال به تصاویر سایت ما دقت کرده اید که وقتی به درستی لود نمی شوند ، یکنام برای تصویر به شما نمایش داده می شود ؟ این نام نیز یک تگ است که در تصویر بکار میرود . این تگ برای تصاویر به کار می رود. موجودیت Alt متنی است که محتوای یک عکس را شرح می دهد، وقتی که شما از این تگ استفاده می کنید اگر عکس لود نشود متن استفاده شده در این تگ نمایش داده می شود. استفاده از این تگ در رتبه سایت شما تاثیر دارد، البته نه خیلی زیاد و سعی کنید عبارت صحیح و متناسب با موضوع سایت و مطلبی که این عکس در آن استفاده شده است انتخاب کنید. شما می توانید برای تمام تصاویر سایت خود از این تگ استفاده کنید و برای تصاویر مثل آیکون ها و … می توانید موضوع سایت خود را بگذارید برای مثال برای یک سایت آموزش طراحی وب عبارت طراحی وب را استفاده کنید. سعی کنید تصویر دارای لینک باشد چون در این حالت برای موتورجستوجوگر مهم تر است و سعی کنید لینک تصویر به سایت خودتان باشد این کار تاثیر بیشتری در رتبه بندی سایت شما دارد.

آموزش طراحی منوی باز شو با HTML و CSS3

dmo

چند هفته ای بود که بدلیل تغییرات در سایت فروشگاه آسا رایان نتوانستم برای علاقه مندان به بخش آموزش مطلب مفیدی ایجاد کنم . به امید خدا سعی می کنم یک روز در میان یک آموزش به بخش های مختلف سایت اضافه کنم تا کاربران از آموزشهای مورد نظر استفاده کنند . در این بخش میخواهم یک منوی عمودی با Html . Css برای شما طراحی کنم . 

دموی منوی طراحی شده در مرورگر

آموزش طراحی منو با Css3

Css-Dropdown-menudemo

مشاهده دموی آموزش

هفته گذشته آموزش Css3 را در بخش طراحی قالب ایجاد کرده ام  و تمام بخش ها و ویژگیهای جدید را با عنوان یک مثال آموزش داده ام  .
امروز می خواهم با استفاده از Css3 یک منو بازشو برای علاقه مندان به طراحی قالب وب سایت طراحی کنم .


1. ابتدا  نرم افزار دریم ویور را اجرا کنید . (در صورتیکه نرم افزار دریم ویور بر روی سیستم شما نصب نشده است می توانید از یک نرم افزار ویرایشگر متن مثل Nootpad++ استفاده کنید یا از نرم افزار نوت پد خود ویندوز)
برای شروع باید یک فایل Html و یک فایل Css ایجاد کنیم . (یک فولدر بر روی دسکتاپ یا یکی از درایوهایتان ایجاد کنید و هر دو فایل را داخل آن ذخیره کنید )

تغییر رنگ لینکها در HTML

html emresupcin

در درس قبلی نحوه ایجاد لینک در HTML را به صورت کامل برای شما آموزش داده ام . در این قسمت می خواهم تغییر رنگ لینکها را برای شما آموزش بدهم . برای تغییر رنگ لینکها از ویژگی یا صفت link در بین تگ Body استفاده می شود .
به طور کل در HTML تغییر رنگ لینکها دارای 3 ویژگی می باشد . اول link بوده که رنگ لینک را در صفحه نمایش می دهد . دوم alink رنگ لینکهای فعال در قالب را نمایش میدهد .
سوم vlink بوده که رنگ لینکهایی که توسط بازدید کننده ها بر روی آنها کلیک شده را مشخص می کند .
طراحان برای تغییر رنگ و مشخصه های لینکهای یک وب سایت در بیشتر مواقع از CSS استفاده می کنند بدلیل اینکه راحت تر بوده و دارای انعطاف پذیری بیشتری نسبت به کدهای HTML می باشد .
به این نکته دقت داشته باشید که در صورتیکه رنگ لینک را در بین رتگ body مشخص کنید ، این رنگ برای تمام لینکهای صفحه مورد استفاده قرار می گیرد که این روش زیاد کاربرد ندارد .
برای درک بهتر به کدهای زیر توجه کنید

وارد کردن تصاویر | کار با تصاویر در HTML

html emresupcin

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


<img src="/pic.jpg" alt="لوگو شرکت طلوع فن آوران آسا" />

استفاده کنیم .

بین "" src باید نام تصویری که می خواهید در صفحه قرار بدهید را وارد کنید . و اما ویژگی یا صفت alt : اجاز بدهید کمی بیشتر در مورد این صفت برای شما توضیح بدهم .
تگ alt، متن جایگزینی است که در صورت لود شدن یا نشان یک گرافیک روی صفحه ظاهر می‌شود. این تگ، مکان دیگری برای قرار گرفتن کلیدواژه‌ها به منظور بهبود رتبه بندی موتور جستجوگر است. حتی اگر سایتتان محتوای مناسبی دارد و این محتوا به خوبی نیز کد شده، استفاده از تگ alt باعث تقویت کارایی کلیدواژه‌های مهم می‌شود.
نکته دیگر اینکه برای تاثیر گذاری بیشتر، این تگ ها باید برای هر عکس واحدی، مجزا در نظر گرفته شوند.
زمانی که بازدید کنندگان سایت با غیر فعال کردن قابلیت نمایش گرافیک از مرورگر مبتنی بر متن استفاده ‏می‌کنند، به کاربردن تگ alt در این شرایط بسیار کاربردی است. و این موضوع تگ alt را با اهمیت کرده است

قراردادن تصویر در پس زمینه | انتخاب تصویر پس زمینه در HTML

html emresupcin

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


قراردادن تصویر در پس زمینه | انتخاب تصویر پس زمینه در HTML
برای انجام اینکار باید از تگ background در بین تگ بدنه اصلی سایت یعنی body استفاده کنیم . روش استفاده به شکل زیر می باشد

رنگ پس زمینه | تغییر رنگ پس زمینه در HTML

html emresupcin

در درس گذشته نحوه تغییر رنگ متن را به صورت کامل آموزش داده ام .

امروز می خواهم تغییر رنگ پس زمینه و تگهای بکار برده شده در بدنه اصلی HTML را به صورت کامل برای شما توضیح بدهم .

تغییر رنگ پس زمینه در HTML

برای تغییر رنگ پس زمینه در HTML باید تگ bgcolor را بین تگ Body قرار داده و درصد رنگ مناسب با طرح خودمان را در آن وارد کنیم .

این روش برای تغییر رنگ پس زمینه به صورت مستقیم در کدهای HTML می باشد .

شما می توانید برای تغییر رنگ از دستورات CSS استفاده کنید که در این بخش آموزش داده نمی شود  .

رنگ در HTML

html emresupcinبه طور پیش فرض رنگ متون و جداول صفحه در تمام مرورگرها به رنگ مشکی می باشد . اما گاهی لازم داریم که رنگ یک سری از قسمت های متن را برای نمایش بهتر با یک رنگ متفاوت نمایش بدهیم . برای انجام اینکار می توانیم به صورت مستقیم رنگ قسمت مورد نظر را در Html تغییر بدهیم .
به صورت کلی رنگها با 2 مقدار در Html نشانه گذاری می شوند .
نوع اول استفاده از کد هگزا می باشد . اين کد تشکيل شده از 6 کاراکتر که هر کدام از آنها مي تواند يکي از مقادير زير باشد:
0,1,2,3,4,5,6,7,8,9, A,B,C,D,E,F
که اين شش کاراکتر بهمراه علامت # مي آيند، بدين شکل: FFFFFF#

اين مقدار نمايانگر سه رنگ قرمز (Red) سبز (Green) و آبي (Blue) مي باشد که اصطلاحاً به آنها RGB مي گويند. اگر هگز يک رنگ را FF0099 در نظر بگيريم، FF مقدار ترکيبي رنگ قرمز، 00 مقدار ترکيبي رنگ سبز و 99 مقدار رنگ آبي را نشان مي دهد که 00 کمرنگ ترين و FF پر رنگ ترين حالت را نمايش مي دهند. بطور مثال FF0000 کاملاً رنگ قرمز را نشان مي دهد.

جداول در HTML

html emresupcin

کاربرد جداول در HTML بسیار کم شده است و طراحان وب سایت بیشتر از تگ Div استفاده می کنند تا HTML . چند دلیل هم برای عدم استفاده از جداول در HTML وجود دارد که خلاصه بار به آنها اشاره ای میکنم .
div کد کمتر و بهینه‌تری (<div> </div>) نسبت به یک table (که معادل <table><tr><td></td></tr></table>) ایجاد می‌کند. که این هم باعث کاهش حجم صفحه تولیدی می‌شود و هم باعث لود شدن سریعتر صفحه .

نکته دیگری که وجود دارد آن است که crawler ها که وظیفه جستجوی و ذخیره کردن صفحات را برای موتورهای جستجو ( مثل گوگل ) بازی می کنند. چون بصورت معنایی صفحات را crawl می کنند بنابراین اگر صفحه شما بهتر و معنایی تر ایجاد شده باشد ، از Page rank بالاتری هم برخوردار خواهد بود.

نکته دیگری که یک div را در قالب بندی دردرجه بالاتری قرار می دهد، انعطاف پذیری آن در CSS هاست. به این معنی که شما می توانید یک قالب چندین منظوره ایجاد کنید و بعد با تغییر مکان div ها که با css انجام می‌دهید . کل قالب صفحه تغییر شکل پیدا می‌کند.

تصویر در HTML

html emresupcin

 یکی از پرکاربردترین تگ ها در صفحات وب، تگ نمایش تصاویر یا img است که امکان نمایش یک تصویر در صفحات سایت  را میسر می کند، در کنار تگ img به عنوان تگی کلیدی، می توان از عناصر دیگری از جمله alt، title، map، area، border و... استفاده کرد که قابلیت های بیشتری در نحوه نمایش و کنترل رفتارهای رویدادی در اختیارمان قرار می دهند .

قصد دارم در ادامه شما را با تگ img و ویژگیهایی که در بین این تگ استفاده می شود ، بیشتر آشنا کنم .

 

استفاده از تگ img در HTML
شکل کلی تگ به شکل زیر می باشد

لینک در HTML

html emresupcin

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


انواع لینک در html
لینک سراسری(Global Links): لینک هایی که به صفحات یک سایت دیگر اشاره دارند.
لینک محلی یا موضعی(Local Links): لینک هایی که به صفحات دیگر همان سایت اشاره می کند. یعنی از سایتی که در آن هستید خارج نمی شوند.
لینک داخلی (Internal Links): لینک هایی هستند که  به قسمتی همان صفحه ای که در آن هستید اشاره می کنند.

برای ساختن لینک کافی است از دستور <a>...</a> مخفف anchor استفاده کنیم. هر آنچه که بین </a>…<a>  قرار می گیرد به عنوان لینک شناخته می شود. برای اینکه مقصد لینک نیز مشخص شود از صفت href  مخفف "hypertext reference" استفاده می کنیم. توجه کنید بین دستور a هر المانی از جمله متن ، عکس و... می تواند قرار بگیرد و بعد از این کار با کلیک بر روی آن المان به پیوند مورد نظر منتقل خواهیم شد.

لیست در HTML

html emresupcin

لیست ها در Html به دو صورت می باشند . لیست های مرتب و نامرتب . یک لیست نامرتب با تگ <ul> و هر آیتم در لیست با تگ <li>شروع می شوند.

آیتم های لیست نامرتب معمولا بوسیله یک دایره سیاه کوچک مشخص می شوند.یک لیست مرتب با تگ <ol> و هر آیتم در لیست با تگ <li>شروع می شوند.

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

تگ های مربوط به لیست در Html 3 تگ <ul>, <li>, <ol> می باشد .

مشترک این خوارک خبری شوید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا