فهرست مطالب این قسمت:
چگونگی نام گذاری و گروه بندی المان ها یا تگ های یک صفحه html
کاربرد گروه بندی و نام گذاری تگ ها
تقسیم بندی صفحه به چند بخش مختلف
استایل دهی چیست و چگونگی اعمال استایل به صفحات وب
گروه بندی المان ها:
برای اینکه چند المان یا تگ را در یک گروه قرار دهیم از خصوصیت class استفاده می کنیم. برعکس نام المان ها(id) که می بایست منحصر به فرد باشد در class ها میتوانیم چنددین المان را در یک گروه قرار دهیم. به عبارت دیگر در یک صفحه از یک id فقط برای یک المان میتوان استفاده کرد ولی از یک class برای چندین المان می توانیم استفاده کنیم.
در کد زیر یک پاراگراف و یک هدر را در یک گروه به نام c1 قرار می دهیم.
همان طور که مشاهده می کنید برای هر دو المان p و h1
شروع طراحی یک صفحه وب
آشنایی با html , CSS و ساختار آنها
چگونگی کد نویسی یک صفحه وب استاندارد
فهرست مطالب این قسمت :
1- نرم افزار های مورد نیاز dreamweaver , notpad++ , photoshop , web browsers , web server
2- چگونگی کار با نرم افزار های طراحی وب
3- ایجاد یک صفحه وب با استفاده از html
نرم افزارهای مورد نیاز
همانطور که در قسمت های قبل گفته شد یک وب سایت داینامیک از دو بخش مدیریت و کاربری تشکیل شده است. در حال حاظر فقط به طراحی و ایجاد بخش کاربری و یا به عبارتی رابط گرافیکی وب سایت می پردازم. برای اینکار لازم است نرم افزارهای زیر را روی رایانه خود نصب نمایید.
1- Adobe photoshop برای طراحی گرافیکی و ایجاد طرح اولیه وب سایت. شما برای طراحی گرافیکی میتوانید از هر نرم افزاری که تمایل دارید استفاده نمایید
محتویات آموزش :
1- انواع وب سایت ها2- زبان های برنامه نویسی وب3- نیازمندیهای طراحی وب
انواع وب سایت ها
وب سایت ها به طور کلی به دو دسته تقسیم میشوند:
وب سایت های استاتیک: در این گونه وبسایتها از زبان های برامه نویسی استفاده نشده. پایگاه داده ای وجود ندارد. و برای درج محتوا مدیر وب سایت مجبور است یا خودش به دستورات html و css آشنایی داشته باشد و یا از یک متخصص کمک بگیرد تا محتوا را در بین کد های html صفحات قرار دهد.
وب سایت های داینامیک: با پیدایش زبان های برنامه نویسی تحت وب ، شبکه وب جهان گستر یا world wide web به کلی متحول شد. پیش از این بیننده فقط میتوانست وب سایت را مشاهده نماید و یا نهایتا اطلاعاتی را دانلود نماید. اما با گسترش زبان های تحت وب خدمات و قابلیت های وب نیز گسترش
مقدمه
امروزه داشتن یک وب سایت برای افراد ، سازمانها ، شرکت ها و ... دیگر به یک ضرورت تبدیل شده است. اگر در گذشته میخواستید یک وب سایت را راه اندازی نمایید باید وقت و هزینه زیادی را برای طراحی و راه اندازی وب سایت هزینه می کردید اما امروزه این کار با سرعت بیشتر و هزینه کمتری امکان پذیر است.
تولید نرم افزار های مختلفی که برای طراحی آسان و سریع یک وب سایت ایجاد شده اند دستیابی به این امر را راحت و آسان نموده اند.
در این آموزش سعی نموده ام به صورت مرحله به مرحله چگونگی طراحی و پیاده سازی یک وب سایت را آموزش دهم.
انواع مختلف وب سایت را از جهت تکنولوژی به دو دسته کلی استاتیک (ایستا) و داینامیک (پویه) میتوان تقسیم کرد.
از آنجایی که با توسعه وب و ایجاد زبان های برنامه نویسی تحت وب و به دنبال آن
رنگ ها می توانند حس های زیادی را منتقل کنند در طراحی یک پروژه خیلی مهم است که بدانید که رنگ ها چه تاثیری می تواند در انتقال پیغام شما داشته باشند.
شما حتما در مورد انتخاب رنگ های سرد و گرم برای رنگ دیوار اتاق یا هنگام استفاده از تن سایه های سرد و گرم در هنگام گریم چهره، شنیده اید.
آیا می دانید که رنگ ها معنای بیشتری به همراه دارند؟
هر فردی استنباط و احساس مختلفی، از رنگ هایی که در وب سایت های مختلف استفاده می شود دارد. سالها تحقیقات در این زمنیه ثابت کرده است که هر رنگ بیانگر به یک نوع احساسات است و منجربه یک نوع رفتار مشخصی میشود. درک انتخاب رنگ و برداشت ضمنی از آن می تواند ما را در ایجاد طرح های موثر تر و بدون اشتباه در انتخاب رنگ، کمک کند.
رنگ های گرم و سرد
همه ما دیدی کلی از حرفه مهندسان معمار و آرشیتکت ها داریم. آنها ساعت ها با نرم افزار CAD،در ها، پنجره ها و دیوار ها را روی پلن های سطحی، طراحی می کنند.
اما بعد از آشنایی با وظایف یک مهندس معمار و شباهت قابل توجه و متقاعد کننده، این برداشت از این موضوع به وجود می آید که، طراحان وب هم به نوعی مهندس معمار هستند.
موضوع اصلی این مقاله مقایسه ماهیت حرفه طراحی وب و طراح و توسعه دهنده front- end با حرفه معماری است. دلایلی وجود دارد که مشخص می کند که همه طراحان وب ذاتاً معمار، هستند. همانطورکه معماران، ساختمان های فیزیکی را طراحی و بنا می کنند، طراحان وب نیز ساختار سایت را طراحی و پیاده سازی می نمایند. طراحان معمار و آرشیتکت ها ساختمان ها را برای استفاده و راحتی مردم، برای زندگی،دفاتر و مکان های اداری و زمینهای بازی، با در
پورت 80 یکی از پورت های مهم کامپیوتر می باشد که کهربرد آن بیشتر در زمینه اتصالات اینترنت است. اگر شما یک توسعه دهنده php یا یک طراح وب باشید حتما برای اجرای برنامه های نوشته شده با php نیاز به یک سرور وب Apache خواهید داشت. این سرور وب برای اجرا نیاز به پورت 80 رایانه شما دارد.
گاهی اوقات اتفاق می افتد که این پورت توسط برنامه دیگری اشغال میشود (خصوصا در ویندوز 8) و اجازه اجرای وب سرور apache را نمیدهد و در پاره ای موارد این پورت توسط برناه های سیستمی ویندوز 8 اشغال میشود که متوقف کردن این برنامه ها باعث بروز مشکلاتی برای سیستم می شود و لذا در بین راه های موجود برای برطرف کردن این مشکل بهترین راه میتواند تغییر پورت اجرای apache از 80 به 8080 باشد.
شما میتوانید برنامه هایی را هم که پورت 80 را اشغال نموده
تایپو گرافی واژه ایست که امروزه در مجامع هنری و گرافیکی بسیار شنیده می شود و در واقع میتوان آن را به نوعی رنگ و لعاب دادن به متن های نوشتاری معنی کرد.
از سوی دیگر تایپوگرافی باید به گونه ای باشد که متن از حالت فونت بودن خود خارج شود و تقریبا به شکل یک تصویر درآید.
در زمینه طراحی صفحات وب تایپوگرافی نیز همین معنی را میدهد و برای پیاده سازی آن در وب از کد های css استفاده می شود.
css3 بیشترین قابلیتها را برای استفاده در تایپوگرافی متون در نظر گرفته است.
بکارگیری حاشیه های ، سایه ها ،افکت های زیبای متنی و ... نوعی استفاده از تایپوگرافی است.
امروزه اکثر قالب های جوملا و همچنین قالبهای سایر سیستم های مدیریت محتوا خصوصا قالب های طراحی شده توسط فریمورک های طراحی قالب از تایپوگرافی های اختصاصی استفاده می کنند.
در نهایت اینکه برای تایپوگرافی
برای کاهش تصاویر و بهینه سازی آنها برای استفاده در صفحات وب ابزار ها و روش های مختلفی وجود دارد در این مطلب قصد معرفی یک ابزار برای بهینه سازی فایل ها تصویری با فرمت png را دارم. این ابزار که TinyPNG نام دارد فایل های png را با حفظ transparency بهینه سازی میکند بدون اینکه کیفیت تصویر کاهش چشمگیری داشته باشد.
در این ابزار تصویر را میتوانید با استفاده از قابلیت drag and drop به برنامه داده و برنامه فایل کم حجم را به شما تحویل میدهد. ابزار TinyPNG گاهی اوقات تا 50 درصد حجم فایل شما را کاهش میدهد.
لازم به ذکر است برای کاهش حجم تصاویر ابزار های دیگری مانند kraken ، punypng ، smushit هم وجود دارد که در آینده به شرح و توضیح آنها خواهم پرداخت.
سادهگرایی یا مینیمالیسم یکی از مکاتب هنری است که بعد از جنگ جهانی دوم شکل گرفت. در این مکتب اساس کار بر سادگی و خلاصه بودن طرح، رنگ و اجزا استوار است. مینیمالیسم بر تمام رشته های هنری تاثیر گذاشت و طراحی وب نیز از این گرایش بی بهره نمانده است و یکی از سبک های محبوب کاربران به شمار میآید. سادگی و بیآلایشی از جمله خصوصیات مینیمالیسم است که در محیطی خالی از پیچیدگی، عناصر اصلی را در دسترس شما می گذارد، کاربر به راحتی به آنچه می خواهد می رسد و همه چیز در محیطی ساده در دسترس است.
برای طراحی یک سایت مینیمال روشهای گوناگونی وجود دارد اما مهمترین عامل در آن، ایجاد فضایی متعادل و ساده است؛ به دور از هر گونه تزئین و با استفاده از کمترین المانها. در اینجا قصد داریم تا به بررسی تعدادی از سایت های مینیمال بپردازیم.
یکی
زیر مجموعه ها
آموزش سئو و بهینه سازی سایت
اولین و مهمترین بخش یک سایت رعایت استاندارد های سئو و اصول مورد نظر موتورهای جستجو می باشد و باید از ابتدا برای آن برنامه ریزی نمایید. امروزه داشتن یک سایت اصلا کار سختی نیست و شما با چند کلیک و نصب یک cms می توانید در مدت زمانی کوتاه وب سایت خود را راه اندازی نمایید ولی چیزی که مهم است جذب مخاطب ، بازدیدکننده یا خریدار است که برای رسیدن به این هدف باید اصول سئو و استانداردهای مورد نیاز برای موتورهای جستجو را رعایت کنید.