آموزش طراحی سایت

مرجع ارائه ی آموزش های روزانه و رایگان مربوط به حوزه ی طراحی سایت، سئو و بهینه سازی و جدیدترین اخبار تکنولوژی


روشهای اضافه کردن فایل های css

به طور کلی سه راه برای اضافه کردن فایل های استایل شیت به صفحه html وجود دارد :

در این روش استایل های هر المنت داخل تگ html نوشته میشوند .

1-روش inline : 

در این روش استایل های هر المنت داخل تگ html نوشته میشوند.


<h1 style="color:blue;">This is a sample text</h1>


در این مثال استایل تعریف شده فقط به این تگ تعلق میگیرد و به باقی تگهای h1 اعمال نمی شود .

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

2- روش internal :

در این روش تمامی کدهای css مربوط به صفحه در تگ <head> ودر داخل تگ <style> نوشته میشوند. در این روش تمامی استایل ها فقط یه صفحه جااری اعمال ممیشوند.


 مثال:

<!DOCTYPE html>

  <html>

  <head>

  <style>

  {;body {background-color: red

{;h1   {color: blue

{;p    {color: red

<style/>

<head/>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<body/>

<html/>

3- روش اکسترنال :

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


<head>

<link rel="stylesheet" href="styles.css">

<head/>


منبع : http://pzof.ir


آموزش طراحی سایت با طراحی رابط کاربری قابل اعتماد

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

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

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

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


روانشناسی در بهبود طراحی وب سایت

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

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

روانشناسی رنگ در طراحی وب سایت :

بر اساس پژوهشی در peer-reviewed journal محقق دریافته است که فقط 90 ثانیه زمان میبرد که نظر یک مشتری در خصوص محصولی شکل بگیرد و بین 62 تا 90 درصد این نظر بر پایه رنگ های آن محصول استوار است. طراحان زیادی بر این باورند که “ترکیب رنگی، میتواند یک سبک یا احساس را تحت تاثیر قرار دهد و این یک نکته ضروری برای برند سازی و طراحی وب سایت می باشد. برای هر کسب و کاری مهم است که مشتری هدف خود را در سایتش نگه دارد.


فتوشاپ و طراحی سایت

فتوشاپ یا Photoshop نرم‌افزاری برای ویرایش تصویر و تصویر‌سازی از نوع Raster یا پیکسلی است. پایه‌ی این نرم‌افزار در سال ۱۹۸۸ بنا شد. با گذشت زمان و توسعه‌های پی‌درپی، اکنون فتوشاپ شناخته‌شده‌ترین و قوی‌ترین نرم‌افزار در زمینه‌ی فعالیت خود به شمار می‌رود. این شهرت تا جایی افزایش یافته که نام این نرم‌افزار توسط بسیاری از افراد به عنوان یک فعل استفاده می‌شود. مانند «عکس خودم را فتوشاپ کردم».

فتوشاپ در سیستم‌عامل‌های ویندوز و مک به صورت رسمی ارائه می‌شود. برای استفاده از این نرم‌افزار در سیستم‌عامل لینوکس، می‌بایست از محیط Wine یا ماشین مجازی استفاده شود.

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


امکانات جانبی فتوشاپ

فتوشاپ علاوه بر توانایی اصلی در ویرایش تصاویر پیکسلی، امکانات محدودی در ویرایش تصاویر برداری( Vector ) امکانات سه‌بعدی(‌ 3D ) و امکانات محدودی در ویرایش فایل‌های ویدئویی در خود جای داده است.


نسخه‌های فتوشاپ

فتوشاپ علاوه بر نگارش اصلی در چندین نگارش مختلف دیگر از جمله نگارش آنلاین، Photoshop Elements، Photoshop Lightroom، Photoshop Express، Photoshop Touch عرضه می‌شود.


کاربردهای فتوشاپ

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


طرح سایت نمونه با فتوشاپ

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


صرفه‌جویی زمان با استفاده از فتوشاپ در طراحی قالب سایت

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


منبع: روکاوب


ابزار های طراحی وب سایت پویا بخش اول

سیستم مدیریت محتوا (CMS) :


یک برنامه نرم افزاری روی سرور است که به مدیر سایت اجازه می‌دهد تا محتوای سایت را بدون نیاز به طراحی دوباره سایت، تغییر دهد. جوملا و وردپرس دو نمونه cms هستند.


جوملا و وردپرس :


جوملا! یک سیستم مدیریت محتوا است که در طراحی وب سایت و برنامه های تحت اینترنت قابل استفاده است. جوملا یک برنامه open source میباشد که به طور رایگان دراختیار همه قرار دارد.


وب سرور :


یک برنامه است که درخواست URL را از مرورگر دریافت کرده و صفحه HTML را در پاسخ برمی گرداند. صفحات دینامیک مانند فایل های PHP باید در محیط سرور اجرا شوند. آپاچی و IIS دو نمونه وب سرور هستند.



تاریخچه طراحی سایت

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

شروع طراحی سایت

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

تاریخچه طراحی سایت 

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

شروع سایت و طراحی سایت 

تیم برنرز لی(Tim Berners Lee) نخستین پروژه را به عنوان اولین طراحی وب سایت در سال 1989 آغاز کرد که این پروژه منجر شد به ایجاد یک وب سایت جهانی که در اولین روزهای سال 1991آغاز و تا سال 1993 انجام آن طول کشید.
در ابتدا اینترنت از مقداری نوشته و عکس تشکیل شده بود و در آن زمان همان عکس های ابتدایی برای مردم جالب جذاب بود. در آن روزها روش و فرمول هایی که دارای اجزای خاصی برای طراحی سایت مانند گرافیک و یا مالتی مدیا وجود نداشت .
جستو گر موزاییک تنها جستجوگری بود که آن زمان برای نشان دادن عکس و نوشته وجود داشت .سپس به منظور اطمینان از سازگاری و فراگیری طراحی سایت www که یک کنسرسیوم جهانی بود ایجاد شد که به اسم W3C شناخته و از سال 1994 شکل گرفت .
 وهمین حالا که شما مشغول خواندن این مقاله هستید  W3C همچنان مسئول ایجاد استاندارد ها در زمینه طراحی سایت می باشد .

اولین شرکت طراحی سایت

Netscape communication  اولین شرکتی بود که توسط فردی به نام اندرسن در سال 1994 با رویکرد طراحی سایت تاسیس شد. به همراه آن جستجو گر Netscape معرفی شد. آنها نظرات شخصی خودشان را بدون در نظر گرفتن روش های استاندارد در آن زمان اعمال کردند و این برچسب ها به صورت تغییر رنگ و یا تغییر فورمت نوشته ها اجرا و کاربردی شدند.
و این شروع جنگ جستجوگرها بین میکرو سافت و Netscape بود که از سال 1996 تا  1999 به طول انجامید که هر دول غول هایی متخصص در زمان خود بودند. مبارزه ای مافوق تسلط به جستجو گرها و این رقابت مقدمه ای برای بسیاری از پیشرفت های جدید در زمینه طراحی سایت گردید که شامل CSS و بهبود ظاهری صفحات وب بود. جاوا اسکریپت هم قابلیتی بود که برنامه نویس ها به صفحات وب افزودند همچنین HTML پویا.
می توان گفت که جنگ جستجوگرها باعث تسریع در رشد و پیشرفت طراحی سایت گردید.


کدهای کاربردی زبان پی اچ پی (php Code) بخش اول


طریقه ایجاد افکت Glow برای متن نوشته شده :

حالت Blur :


php?>

echo "<p><font face=\"Tahoma\">\n"; 

echo "<span style=\"FILTER: blur(Strength=10); WIDTH: 1px; HEIGHT: 1px\">\n"; 

echo "<font face=\"Tahoma\" color=\"#800000\" style=\"font-size: 10pt\">WELCOME</font></span></font></p>\n";

<?


کد ساعت در پایین صفحه بهمراه تاریخ در قسمت استاتیوس بار:


طراحی سایت متریال یا فلت

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

w3schools یکی از بهترین مراجع یادگیری طراحی سایت

سایت www.w3schools.com یک سایت خودآموز است و به شما یاد می دهد که چگونه یک وبسایت بسازید!


مطالب این سایت (… و HTML/CSS ,JavaScript, ServerSide, ASP.net, XML) سطوح مقدماتی تا پیشرفته همه را به شما آموزش می دهد.

مثلا در بخش HTML، ابتدا برای شما درباره ی موضوع مورد نظر توضیحاتی می دهد و مثال میزند، بعد از آن نوبت شماست! باید دکمه ی try it yourself را بزنید و کدها را دستکاری کنید و بعد دکمه ی submit code را بزنید تا تغییرات شما در قسمت روبرویی کدها اعمال شود.


امکانات وبسایت

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

 

آموزش های سایت

HTML

CSS

JavaScript

SQL

PHP

ASP

JQuery

Ajax

XML

Schema

ASP.NET

VBScript


منبع: تابناک وب


قیمت طراحی سایت در ایران چگونه تعیین می‌شود؟

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

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

 

زبان برنامه نویسی در طراحی سایت

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

بعنوان مثال سایت دیجی کالا از زبان برنامه نویسی ASP استفاده میکند و همین امر موجب میشود تا الگوی مناسبی برای استفاده از این زبان باشد. ولی در عمل انتخاب زبان به تنهایی نمیتواند تاثیر زیادی بر موفقیت شما در فضای اینترنت داشته باشد.

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

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

 

۱ ۲
مرجع ارائه ی آموزش های روزانه و رایگان مربوط به حوزه ی طراحی سایت، سئو و بهینه سازی و جدیدترین اخبار تکنولوژی. با دنبال کردن وبلاگ زودتر از بقیه از مطالب با خبر شوید!
Designed By Erfan Powered by Bayan