آموزش ساخت و ویرایش فایل های اچ تی ام ال، با کمک CofeeCup HTML Edtior

 

 

 

 

CoffeeCup HTML Editor نام نرم افزار طراحی وب پیشرفته و مدرنی است که با استفاده از آن میتوانید صفحات وب عالی و بی نظیری طراحی کنید. این نرم افزار دارای ابزار فراوان و بسیار کارآمدی میباشد که کار طراحی و ساخت صفحات وب HTML را بسیار آسان کرده و کیفیت کار را بهبود میبخشد. صفحات وبی که با استفاده از CoffeeCup HTML Editor طراحی میشوند کاملا "ریسپانسیو" (Responsive) بوده و در صفحات با اندازه های مختلف به خوبی نمایش داده میشوند. در این مقاله میخواهیم شما را با نحوه کار با این نرم افزار آشنا کنیم. با ما همراه باشید.

 

 

کار با نرم افزار CoffeeCup HTML Editor

 

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

 

 

آشنایی با محیط نرم افزار

 

در اولین بخش از مقاله میخواهیم با محیط کلی نرم افزار آشنا شویم:

 

 

 

1. محیط ویرایشگر کد.

 

2. بخش نمایش پیشنمایش نتیجه کار.

 

3. نمایش وبسایت های شما.

 

4. فایل اکسپلورر برای دسترسی به فایل های کامپیوتر.

 

5.  افزودن فایل HTML آماده.

 

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

 

 

کار با پروژه های وبسایت ها

 

در این بخش از مقاله میخواهیم شما را با نحوه ساخت و مدیریت پروژه های وبسایت ها آشنا کنیم.

 

 

- ساخت یک پروژه وبسایت

 

به منظور ساخت یک پروژه وبسایت جدید در نرم افزار HTML Editor به مسیر “My Websites > New Website Project” بروید تا پنجره ی “Website Project Settings” باز شود.

 

 

 

در کادر های موجود در پنجره ی Website Project Settings باید محتوای زیر را وارد نمایید:

 

1. Website Project Name: باید نام پروژه وبسایت تان را در این کادر وارد نمایید. پیشنهاد میدهیم که یک نام ساده برای پروژه بگذارید و نام سایت را برای آن قرار دهید.

 

2. Website  Project Location: در این کادر مکانی که فایل های مربوط به پروژه در آن قرار خواهند گرفتن را تعیین میکنید.

 

 

 

نکته: اگر میخواهید بر روی فایل هایی از پروژه ای قبلی کار کنید، باید پوشه حاوی فایل های پروژه قبلی را در کادر “Website Project Location” وارد نمایید.

 

3. Server: در این بخش میتوانید اطلاعات مربوط به سروری (Server) که میخواهید سایت را در آن پیاده کنید را وارد نمایید.

 

4. Configure Servers: با کلیک بر روی این دکمه پنجره ی “Server Configuration” باز خواهد شد که میتوانید در آن اطلاعات مربوط به سرور را وارد نمایید.

 

 

 

5. Remote Root Folder: پوشه ای که فایل های مربوط به سایت شما در سرور در آن قرار میگیرد و معمولا نام آن “WWW” و یا “Public_HTML” است.

 

6. Server URL: آدرسی که با وارد کردن آن در مرورگر میتوانید شاهد وبسایت خود باشید را باید در این کادر وارد نمایید.

 

7. File Upload: در این تب میتوانید تنظیمات مربوط به آپلود فایل در سایت را تغییر دهید.

 

 

 

افزودن صفحات جدید به پروژه وبسایت شما

 

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

 

به منظور ساخت صفحه ی جدید در سایت ابتدا دکمه ی “File” را کلیک کنید و سپس از داخل منویی که باز میشود گزینه ی “New Blank Page” را انتخاب کنید تا صفحه ای جدید ساخته شود.

 

نکته: اگر صفحه ای که در حال ساخت آن هستید قرار است که صفحه ی خانه ی سایت شما شود، حتما نام آن را “index.html” گذاشته و تمامی حروف نام آن را با حروف کوچک بنویسید.

 

 

 

افزودن تم به پروژه ی وبسایت

 

شما میتوانید به جای ساخت صفحات برای وبسایت خود، یک تم برای آن انتخاب کنید زیرا هر تم به تنهایی دارای چندین صفحه است. هر تم معمولا دارای سه صفحه ی خانه (Home)، درباره (About) و ارتباط (Contact) میباشد که هر کدام دارای ساختاری از پیش آماده میباشند و کار طراحی را برای شما آسان تر میکنند.

 

به منظور افزودن تم به سایت به مسیر “File > New From Theme / Layout” بروید. با این کار پنجره ی “Theme/Layout Chooser” باز خواهد شد و از طریق آن میتوانید تم مورد نظرتان را بر روی سایت اعمال کنید.

 

 

 

پس از انتخاب تم مورد نظر پنجره ای به شکل عکس زیر باز خواهد شد که باید گزینه ی “Current Website Project” را در آن انتخاب کنید.

 

 

 

فایل های مربوط به تمی که اعمال کردید در بخش “My Websites” ظاهر خواهند شد.

 

 

 

مشاهده پیش نمایشی از پروژه وبسایت

 

هم اکنون که تا اینجا پیش رفته ایم، چطور است نگاهی به پیش نمایشی از سایت بیاندازیم. به منظور انجام این کار کلید “F12” را فشار دهید تا بخش نمایش پیش نمایش سایت باز شود.

 

 

 

آپلود کردن پروژه ی وبسایت به سرور

 

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

 

 

- آپلود با استفاده از FTP

 

به منظور انجام این کار یا تنها کلید “F4” را فشار دهید و یا ابتدا دکمه ی “Upload” را کلیک کنید، سپس به مسیر “FTP Upload > Upload Entire Website Project” بروید. با این کار پنجره ی “Upload Files to Server” باز شده و میتوانید میزان پیشرفت انتقال فایلها به سرور را در آن مشاهده کنید.

 

 

 

ساخت یک صفحه ی وب جدید

 

سه راه برای ساخت صفحات وب جدید در CoffeeCup HTML Editor وجود دارند که هر کدام به ترتیب زیر میباشند و در ادامه نحوه ساخت صفحه با هر کدام را شرح میدهیم:

 

1. ساخت یک صفحه خالی.

 

2. استفاده از یک طرح از پیش آماده.

 

3. استفاده از یک تم. 

 

 

1. ساخت صفحه ی خالی

 

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

 

 

قدم یک:

 

نرم افزار CoffeeCup HTML Editor را اجرا کرده و در اولین صفحه از آن گزینه ی “New Blank Page” را انتخاب کنید.

 

 

 

قدم دو:

 

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

 

دقت داشته باشید که بنا به گزینه هایی که انتخاب میکنید نرم افزار کد های HTML به صفحه اضافه خواهد کرد و این به آن معناست که صفحه از اول کاملا هم خالی نیست!

 

 

قدم سه:

 

در بخش بعدی پنجره ای با عنوان “Quick Start” باز خواهد شد که میتوانید تنظیمات دلخواه تان را در آن اعمال کنید.

 

 

 

در ادامه مقاله میخواهیم گزینه های موجود در پنجره ی “Quick Start” را برای شما شرح دهیم:

 

- Page Title: متنی که در صفحات و یا همان تب های مرورگر های وب برای هر سایت مشاهده میکنید.

 

- Colors: رنگ های عناصر مختلف این صفحه وب که میخواهید بسازید را میتوانید با استفاده از این بخش انتخاب کنید.

 

- Page Background: اگر نمیخواهید که پس زمینه ی این صفحه سفدی و ساده باشد و میخواهید آن را رنگی کنید و یا یک عکس برای پس زمینه انتخاب کنید، میتوانید از این گزینه استفاده کنید.

 

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

 

- Charset: به وسیله ی این منو نیز میتوانید ست کاراکتری که در صفحه قابل استفاده خواهد بود را انتخاب نمایید.

 

- Meta Description: توضیحی کوتاه برای سایت تان که قرار است گاهی اوقات در موتور های جستجو نمایش داده شود را در این کارد وارد نمایید.

 

- Meta Keywords: کلماتی که مربوط به این صفحه هستند را در این کارد نوشته و آن ها را با استفاده از کاما و فاصله از هم جدا کنید.

 

 

قدم چهار:

 

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

 

 

 

2. ساخت صفحه با استفاده از طرح های از پیش آماده

 

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

 

 

قدم یک:

 

نرم افزار HTML Editor را اجرا کرده و پنجره ی “Welcome” که باز میشود را ببندید تا وارد پنجره اصلی نرم افزار شوید.

 

 

 

قدم دو:

 

به مسیر “File > New From Theme/Layout” بروید تا پنجره ی “Theme/Layout Chooser” باز شود.

 

 

قدم سه:

 

طرح از پیش آماده مورد نظرتان را در پنجره ی Theme/Layout Chooser انتخاب کنید.

 

 

 

قدم چهار:

 

پس از انتخاب طرح مورد نظر OK را کلیک کنید تا انتخاب شود.

 

 

3. ساخت صفحه با استفاده از تم

 

قدم یک:

 

نرم افزار HTML Editor را اجرا کرده و سپس در پنجره ی “Welcome” گزینه ی “Start With a Theme” را انتخاب کنید.

 

 

 

قدم دو:

 

تم مورد نظر را از پنجره ی “Theme/Layout Chooser” انتخاب نمایید.

 

 

 

قدم سه:

 

OK را کلیک کنید تا تم ساخته شده و شروع به کار با آن کنید.

 

موفق باشید.

 

 

دانلود آخرین نسخه نرم افزار CoffeeCup HTML Editor

 

سایر مقالات مربوط به CoffeeCup HTML Editor