ورود کاربران VIP سرزمین دانلود، مرجع دانلود و آموزش رایگان نرم افزار

منوی سایت

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

Rating: 4 - 154 votes

تازه های این بخش :

(مربوط به موضوع آموزش طراحی سایت)

آموزش استفاده از افکت های عکس اینستاگرام در طراحی وب
 
 
آموزش استفاده از افکت های عکس اینستاگرام در طراحی وب
 
 
همانطور که اطلاع دارید، اینستاگرام یکی از محبوب ترین شبکه های اجتماعی حال حاضر در دنیا می باشد. توسط اینستاگرام می توانید تصاویر و ویدئوهای خود را با بیش از 500 میلیون کاربر عضو این شبکه به اشتراک بگذارید.
 
بسیاری از کاربران از بخش ادیت تصاویر اینستاگرام به منظور افکت گذاری بر روی تصاویر خود استفاده می کنند. فیلترهای تصویر در اینستاگرام به صورت کاملا رایگان قابل استفاده بوده و بر خلاف سایر نرم افزارهای ادیت و ویرایش تصویر، نسخه پولی و یا آنلاک شده ندارد. 
 
در این میان ممکن است برخی از مدیران و طراحان وب سایت بخواهند از افکت های تصویری برای زیباسازی عکس های درون وب سایت استفاده نمایند. به منظور ادیت عکس در محیط طراحی وب می توانید از ابزارهای مانند فتوشاپ و ... استفاده کنید.
 
در این مقاله می خواهیم به بررسی روش استفاده از افکت های اینستاگرام در طراحی وب و به صورت مستقیم بپردازیم. با سرزمین دانلود همراه باشید.
 
 
معرفی کتابخانه CSSGram
 
CSSGram یک کتابخانه کوچک و بر پایه CSS و SCSS می باشد. با استفاده از این کتابخانه می توانید بدون نیاز به فتوشاپ افکت های تصویری اینستاگرام را از طریق کدهای HTML و CSS بر روی تصاویر وب سایت اعمال کنید. 
 
برای دانلود CSSGram می توانید از تاپیک موجود در سایت GitHub استفاده نمایید.
 
 
روش استفاده از CSSGram
 
این قابلیت را نمی توان به صورت مستقیم بر روی تصاویر اعمال نمود. در واقع باید قبل از آدرس عکس و در بخش Container یا المنت های تصویر از آن استفاده نمایید. 
 
به منظور استفاده از این کتابخانه در ابتدا باید کدهای CSSGram را در صفحه اسناد HTML خود قرار دهید. روش کار این کتابخانه به این صورت است که با استفاده از CSS میزان روشنایی و سایر ویژگی های تصویر را به شکل افکت اینستاگرام تغییر خواهد داد. در ادامه کد یک عکس که با استفاده از این کتابخانه افکت گذاری شده است را می توانید مشاهده کنید:
 
آموزش استفاده از افکت های عکس اینستاگرام در طراحی وب
 
 
پس از اضافه کردن افکت 1977 که یکی از افکت های اینستاگرام می باشد. CSS به شکل زیر در خواهد آمد.
 
آموزش استفاده از افکت های عکس اینستاگرام در طراحی وب
 
 
در این مقاله به بررسی روش استفاده از CSSGram به منظور افزودن افکت به تصاویر درون وب سایت پرداختیم. در نظر داشته باشید که استفاده از این روش به مراتب بسیار بهینه تر از نرم افزارهای ادیت عکس مانند فتوشاپ می باشد. برای ارسال نظرات و سوالات خود می توانید از طریق فرم زیر با ما در تماس باشید.
 
 

این مطلب مربوط به موضوع آموزش طراحی سایت میباشد.
(مربوط به موضوع آموزش طراحی سایت)

آموزش ساخت و ویرایش فایل های اچ تی ام ال، با کمک CofeeCup HTML Edtior
 
 
آموزش کار با نرم افزار ساخت و ویرایش فایل های اچ تی ام ال CofeeCup HTML Edtior
 
 
CoffeeCup HTML Editor نام نرم افزار طراحی وب پیشرفته و مدرنی است که با استفاده از آن میتوانید صفحات وب عالی و بی نظیری طراحی کنید. این نرم افزار دارای ابزار فراوان و بسیار کارآمدی میباشد که کار طراحی و ساخت صفحات وب HTML را بسیار آسان کرده و کیفیت کار را بهبود میبخشد. صفحات وبی که با استفاده از CoffeeCup HTML Editor طراحی میشوند کاملا "ریسپانسیو" (Responsive) بوده و در صفحات با اندازه های مختلف به خوبی نمایش داده میشوند. در این مقاله میخواهیم شما را با نحوه کار با این نرم افزار آشنا کنیم. با ما همراه باشید.
 
 
کار با نرم افزار CoffeeCup HTML Editor
 
ابتدا آخرین نسخه از نرم افزار CoffeeCup HTML Editor را با استفاده از لینک درج شده در انتهای این مطلب دانلود کرده و سپس آن را در سیستم تان نصب و اجرا کنید. هم اکنون شروع میکنیم به آشنایی با نرم افزار.
 
 
آشنایی با محیط نرم افزار
 
در اولین بخش از مقاله میخواهیم با محیط کلی نرم افزار آشنا شویم:
 
آموزش کار با نرم افزار ساخت و ویرایش فایل های اچ تی ام ال CofeeCup HTML Edtior
 
 
1. محیط ویرایشگر کد.
 
2. بخش نمایش پیشنمایش نتیجه کار.
 
3. نمایش وبسایت های شما.
 
4. فایل اکسپلورر برای دسترسی به فایل های کامپیوتر.
 
5.  افزودن فایل HTML آماده.
 
6.  بخش نمایش کد ها و کاراکتر ها.
 
 
کار با پروژه های وبسایت ها
 
در این بخش از مقاله میخواهیم شما را با نحوه ساخت و مدیریت پروژه های وبسایت ها آشنا کنیم.
 
 
- ساخت یک پروژه وبسایت
 
به منظور ساخت یک پروژه وبسایت جدید در نرم افزار HTML Editor به مسیر “My Websites > New Website Project” بروید تا پنجره ی “Website Project Settings” باز شود.
 
آموزش کار با نرم افزار ساخت و ویرایش فایل های اچ تی ام ال CofeeCup HTML Edtior
 
 
در کادر های موجود در پنجره ی Website Project Settings باید محتوای زیر را وارد نمایید:
 
1. Website Project Name: باید نام پروژه وبسایت تان را در این کادر وارد نمایید. پیشنهاد میدهیم که یک نام ساده برای پروژه بگذارید و نام سایت را برای آن قرار دهید.
 
2. Website  Project Location: در این کادر مکانی که فایل های مربوط به پروژه در آن قرار خواهند گرفتن را تعیین میکنید.
 
آموزش کار با نرم افزار ساخت و ویرایش فایل های اچ تی ام ال CofeeCup HTML Edtior
 
 
نکته: اگر میخواهید بر روی فایل هایی از پروژه ای قبلی کار کنید، باید پوشه حاوی فایل های پروژه قبلی را در کادر “Website Project Location” وارد نمایید.
 
3. Server: در این بخش میتوانید اطلاعات مربوط به سروری (Server) که میخواهید سایت را در آن پیاده کنید را وارد نمایید.
 
4. Configure Servers: با کلیک بر روی این دکمه پنجره ی “Server Configuration” باز خواهد شد که میتوانید در آن اطلاعات مربوط به سرور را وارد نمایید.
 
آموزش کار با نرم افزار ساخت و ویرایش فایل های اچ تی ام ال CofeeCup HTML Edtior
 
 
5. Remote Root Folder: پوشه ای که فایل های مربوط به سایت شما در سرور در آن قرار میگیرد و معمولا نام آن “WWW” و یا “Public_HTML” است.
 
6. Server URL: آدرسی که با وارد کردن آن در مرورگر میتوانید شاهد وبسایت خود باشید را باید در این کادر وارد نمایید.
 
7. File Upload: در این تب میتوانید تنظیمات مربوط به آپلود فایل در سایت را تغییر دهید.
 
آموزش کار با نرم افزار ساخت و ویرایش فایل های اچ تی ام ال CofeeCup HTML Edtior
 
 
افزودن صفحات جدید به پروژه وبسایت شما
 
در این بخش از مقاله میخواهیم نحوه افزودن صفحات وب جدید به پروژه سایت را برای شما شرح دهیم.
 
به منظور ساخت صفحه ی جدید در سایت ابتدا دکمه ی “File” را کلیک کنید و سپس از داخل منویی که باز میشود گزینه ی “New Blank Page” را انتخاب کنید تا صفحه ای جدید ساخته شود.
 
نکته: اگر صفحه ای که در حال ساخت آن هستید قرار است که صفحه ی خانه ی سایت شما شود، حتما نام آن را “index.html” گذاشته و تمامی حروف نام آن را با حروف کوچک بنویسید.
 
آموزش کار با نرم افزار ساخت و ویرایش فایل های اچ تی ام ال CofeeCup HTML Edtior
 
 
افزودن تم به پروژه ی وبسایت
 
شما میتوانید به جای ساخت صفحات برای وبسایت خود، یک تم برای آن انتخاب کنید زیرا هر تم به تنهایی دارای چندین صفحه است. هر تم معمولا دارای سه صفحه ی خانه (Home)، درباره (About) و ارتباط (Contact) میباشد که هر کدام دارای ساختاری از پیش آماده میباشند و کار طراحی را برای شما آسان تر میکنند.
 
به منظور افزودن تم به سایت به مسیر “File > New From Theme / Layout” بروید. با این کار پنجره ی “Theme/Layout Chooser” باز خواهد شد و از طریق آن میتوانید تم مورد نظرتان را بر روی سایت اعمال کنید.
 
آموزش کار با نرم افزار ساخت و ویرایش فایل های اچ تی ام ال CofeeCup HTML Edtior
 
 
پس از انتخاب تم مورد نظر پنجره ای به شکل عکس زیر باز خواهد شد که باید گزینه ی “Current Website Project” را در آن انتخاب کنید.
 
آموزش کار با نرم افزار ساخت و ویرایش فایل های اچ تی ام ال CofeeCup HTML Edtior
 
 
فایل های مربوط به تمی که اعمال کردید در بخش “My Websites” ظاهر خواهند شد.
 
آموزش کار با نرم افزار ساخت و ویرایش فایل های اچ تی ام ال CofeeCup HTML Edtior
 
 
مشاهده پیش نمایشی از پروژه وبسایت
 
هم اکنون که تا اینجا پیش رفته ایم، چطور است نگاهی به پیش نمایشی از سایت بیاندازیم. به منظور انجام این کار کلید “F12” را فشار دهید تا بخش نمایش پیش نمایش سایت باز شود.
 
آموزش کار با نرم افزار ساخت و ویرایش فایل های اچ تی ام ال CofeeCup HTML Edtior
 
 
آپلود کردن پروژه ی وبسایت به سرور
 
درست است که وبسایتی که ساخته ایم هنوز تبدیل به وبسایت رویای شما نشده، اما چطور است همین پروژه را نیز در سرور آپلود کنیم تا نتیجه کار را ببینیم.
 
 
- آپلود با استفاده از FTP
 
به منظور انجام این کار یا تنها کلید “F4” را فشار دهید و یا ابتدا دکمه ی “Upload” را کلیک کنید، سپس به مسیر “FTP Upload > Upload Entire Website Project” بروید. با این کار پنجره ی “Upload Files to Server” باز شده و میتوانید میزان پیشرفت انتقال فایلها به سرور را در آن مشاهده کنید.
 
آموزش کار با نرم افزار ساخت و ویرایش فایل های اچ تی ام ال CofeeCup HTML Edtior
 
 
ساخت یک صفحه ی وب جدید
 
سه راه برای ساخت صفحات وب جدید در CoffeeCup HTML Editor وجود دارند که هر کدام به ترتیب زیر میباشند و در ادامه نحوه ساخت صفحه با هر کدام را شرح میدهیم:
 
1. ساخت یک صفحه خالی.
 
2. استفاده از یک طرح از پیش آماده.
 
3. استفاده از یک تم. 
 
 
1. ساخت صفحه ی خالی
 
این گزینه برای افرادی است که میخواهند یک صفحه ی خالی از صفر شروع کنند و آن را کد نویسی کنند. اگر شما نیز از این دسته از افراد هستید، این روش ساخت صفحه برای شماست.
 
 
قدم یک:
 
نرم افزار CoffeeCup HTML Editor را اجرا کرده و در اولین صفحه از آن گزینه ی “New Blank Page” را انتخاب کنید.
 
آموزش کار با نرم افزار ساخت و ویرایش فایل های اچ تی ام ال CofeeCup HTML Edtior
 
 
قدم دو:
 
در مرحله ی بعد راه انداز صفحه ی جدید باز خواهد شد که در آن از شما سوالاتی راجع به رنگ دلخواه برای صفحه، عنوان صفحه و... پرسیده میشود که بسیار ساده هستند. و تنها کاری که لازم است انجام دهید این است که گزینه های مورد نظرتان را انتخاب کنید.
 
دقت داشته باشید که بنا به گزینه هایی که انتخاب میکنید نرم افزار کد های HTML به صفحه اضافه خواهد کرد و این به آن معناست که صفحه از اول کاملا هم خالی نیست!
 
 
قدم سه:
 
در بخش بعدی پنجره ای با عنوان “Quick Start” باز خواهد شد که میتوانید تنظیمات دلخواه تان را در آن اعمال کنید.
 
آموزش کار با نرم افزار ساخت و ویرایش فایل های اچ تی ام ال CofeeCup HTML Edtior
 
 
در ادامه مقاله میخواهیم گزینه های موجود در پنجره ی “Quick Start” را برای شما شرح دهیم:
 
- Page Title: متنی که در صفحات و یا همان تب های مرورگر های وب برای هر سایت مشاهده میکنید.
 
- Colors: رنگ های عناصر مختلف این صفحه وب که میخواهید بسازید را میتوانید با استفاده از این بخش انتخاب کنید.
 
- Page Background: اگر نمیخواهید که پس زمینه ی این صفحه سفدی و ساده باشد و میخواهید آن را رنگی کنید و یا یک عکس برای پس زمینه انتخاب کنید، میتوانید از این گزینه استفاده کنید.
 
- DOCTYPE: از طریق این منوی میتوانید “DOCTYPE” مورد نظرتان را برای صفحه انتخاب کنید. DOCTYPE نوع و زبان صفحه را برای مرورگری که در حال مشاهده ی آن است ذکر میکند.
 
- Charset: به وسیله ی این منو نیز میتوانید ست کاراکتری که در صفحه قابل استفاده خواهد بود را انتخاب نمایید.
 
- Meta Description: توضیحی کوتاه برای سایت تان که قرار است گاهی اوقات در موتور های جستجو نمایش داده شود را در این کارد وارد نمایید.
 
- Meta Keywords: کلماتی که مربوط به این صفحه هستند را در این کارد نوشته و آن ها را با استفاده از کاما و فاصله از هم جدا کنید.
 
 
قدم چهار:
 
پس از انتخاب گزینه های مورد نظر و تنظیم صفحه به شکل دلخواه، OK را کلیک کنید تا صفحه ساخته شود.
 
 
 
2. ساخت صفحه با استفاده از طرح های از پیش آماده
 
میتوانید از یک طرح از پیش آماده شده شروع کنید و یک صفحه ی وب بسازید. یک طرح از پیش آماده دارای یک ساختار HTML برای یک صفحه ی ساده میباشد.
 
 
قدم یک:
 
نرم افزار HTML Editor را اجرا کرده و پنجره ی “Welcome” که باز میشود را ببندید تا وارد پنجره اصلی نرم افزار شوید.
 
آموزش کار با نرم افزار ساخت و ویرایش فایل های اچ تی ام ال CofeeCup HTML Edtior
 
 
قدم دو:
 
به مسیر “File > New From Theme/Layout” بروید تا پنجره ی “Theme/Layout Chooser” باز شود.
 
 
قدم سه:
 
طرح از پیش آماده مورد نظرتان را در پنجره ی Theme/Layout Chooser انتخاب کنید.
 
آموزش کار با نرم افزار ساخت و ویرایش فایل های اچ تی ام ال CofeeCup HTML Edtior
 
 
قدم چهار:
 
پس از انتخاب طرح مورد نظر OK را کلیک کنید تا انتخاب شود.
 
 
3. ساخت صفحه با استفاده از تم
 
قدم یک:
 
نرم افزار HTML Editor را اجرا کرده و سپس در پنجره ی “Welcome” گزینه ی “Start With a Theme” را انتخاب کنید.
 
آموزش کار با نرم افزار ساخت و ویرایش فایل های اچ تی ام ال CofeeCup HTML Edtior
 
 
قدم دو:
 
تم مورد نظر را از پنجره ی “Theme/Layout Chooser” انتخاب نمایید.
 
آموزش کار با نرم افزار ساخت و ویرایش فایل های اچ تی ام ال CofeeCup HTML Edtior
 
 
قدم سه:
 
OK را کلیک کنید تا تم ساخته شده و شروع به کار با آن کنید.
 
موفق باشید.
 
 

 


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

نکاتی در مورد تولید محتوا در اینترنت

(مربوط به موضوع آموزش طراحی سایت)

نکاتی در مورد تولید محتوا در اینترنت

 

 

نکاتی در مورد تولید محتوا در اینترنت

 

 

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

 

در این مطلب نکاتی در مورد تولید محتوا در اینترنت برای شما آماده کرده ایم.

 

1. استفاده از تصاویر در تولید محتوا (پیام تصویری) :
تصاویر میتواند یک ابزار قدرتمند برای نشاندن شما در صدر نتایج گوگل باشد! ابزاری که پادشاهان برای به سلطنت رسیدن از آن استفاده میکردند! این یک واقعیت محض است، مغز انسان تا 60 هزار برابر تصاویر را بهتر به ذهن میسپارد تا متن. 60 هزار بار بهتر از تصویر الهام میگیرد تا از یک متن. پس در ایجاد محتویات خود از تصاویر مربوطه (اینفوگرافیک) استفاده کنید. اینفوگرافیک یکی از آن ابزارهاست. شما میتوانید کلیه پیام های خود را به صورت تصویری ایجاد کنید و با نشان دادن آن تصویر به مخاطبان، کلیه حرفهای خود را به آنها بزنید.

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

3. استفاده از سرتیترهای جذاب و کاربردی
تگ های سرتیر (از H1 تا H6) را جدی بگیرید. استفاده از آنها را به همگان پیشنهاد میکنم. اما لطفا شورش را در نیاورید!! غذای شور را هیچکس دوست ندارد. باید بدانید که استفاده از سرتیترها در مواردی دارای محدودیت است. مثلا در هر صفحه باید و باید یک تگ H1 وجود داشته باشد و البته تعداد آن از دو عدد بیشتر نشود! اما مهمتر از تعداد استفاده از آنها تولید تیتر های جذاب و کابردی است. وقتی میخواهید تیتری را برای یک مطلب انتخاب کنید ببنید نوشته چه تیتری باعث میشود کاربران بیشتری به مطلب شما جذب شوند. اینکه شما بتوانید یک تیتر خوب بنویسید در زمان بازدید کاربران از سایت شما تاثیر بسزایی دارد. تیتر محتوای شما بازاریاب شماست. شما توسط آن مخاطبان را جذب میکنید. پس در تیترهای خود بالاترین دقت را انجام دهید.

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

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

 

 

سایر مقالات مربوط به طراحی سایت


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

سرزمین دانلود را دنبال کنید !

عضویت در خبرنامه سرزمین دانلود

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



------------------------------------------