چگونه سایت طراحی کنیم - آموزش درست کردن سایت
با استفاده از فیلم های آموزشی تولید شده توسط کلیک سایت، به راحتی می توانید چگونه سایت طراحی کنیم - آموزش درست کردن سایت را آموزش ببینید. در ادامه دعوت می شود که فیلم دمو (بخش اول آموزش) را در زیر مشاهده نمایید.
در این مقاله به شما چگونگی طراحی سایت آموزش داده می شود و این که چگونه بتوانید یک صفحه وب ساده متنی را با HTML کدنویسی کنید. هنگامی که سند وب خود را ایجاد کرده اید ، می توانید آن را به عنوان یک سند HTML ذخیره کرده و آن را در مرورگر وب خود مشاهده کنید. ایجاد یک صفحه HTML با استفاده از ویرایشگرهای متنی پایه که هم در کامپیوترهای تحت ویندوز و هم تحت مکینتاش وجود دارند ، امکان پذیر است. در ادامه نحوه درست کردن سایت را به صورت گام به گام شرح می دهیم.
-
چگونه سایت طراحی کنیم؟
- یک ویرایش گر متن را باز می کنیم. در کامپیوتر تحت ویندوز ، ما غالباً از Notepad یا Notepad++ استفاده می کنیم ، در حالی که در کامپیوترهای تحت Mac از TextEdit استفاده می کنیم. در ادامه طریقه ساخت وب سایت را در هر دو سیستم عامل توضیح می دهیم.
- Windows : به منوی Start رفته و notepad یا notepad++ را تایپ کرده و در قسمت بالای Notepad یا “Notepad++” کلیک میکنیم.
-
Mac : بخش Spotlight (مطابق شکل زیر):
را کلیک کرده و textedit را تایپ می کنیم ، و TextEdit را در بخش results دابل کلیک می کنیم.
- نوع سند خود را به HTML تنظیم می کنیم. مقدار <!DOCTYPE html> را تایپ کرده و کلید enter را فشار می دهیم ، سپس <html> را تایپ کرده و کلید enter را دوباره فشار می دهیم. در نهایت <head> را تایپ کرده و کلید enter را فشار می دهیم. در ابتدای سند باید عباراتی به صورت زیر نمایان شود.
<!DOCTYPE html>
<html>
<head>
- یک tab title به صفحه وب خود اضافه می کنیم. هنگامی که این صفحه را در مرورگر باز کنیم ، این عنوان در نوار عنوان مرورگر نمایش داده می شود (مانند “Facebook”). مقدار <title> را تایپ کرده و عنوان صفحه وب خود را برای tab title وارد می کنیم. مقدار </title> را تایپ می کنیم. سپس تگ بستن “Head” را اضافه می کنیم ، که این تگ به صورت </head> می باشد. بخش title باید چیزی شبیه به عبارات زیر باشد :
<title>My Web Page</title>
</head>
- شروع متن بدنه صفحه خود را مشخص می کنیم. برای این کار ، تگ <body> را در زیر تگ بستن “Head” تایپ می کنیم. این کار اطمینان می دهد که تا زمانی که تگ “Body" را ببندیم ، بقیه متن سند ما به عنوان متن وب سایت در نظر گرفته شود. بخش body به صورت زیر نوشته می شود:
<body>
- یک تیتر برای صفحه می سازیم. تیتر صفحه ما عنوانی است که در بالای وب سایت ما نمایان خواهد شد. برای ایجاد یک تیتر ، تگ <h1> را تایپ کرده ، تیتر موردنظر خود را اضافه کرده و سپس تگ بستن </h1> را وارد می کنیم. برای مثال :
<h1>Welcome to My Page!</h1>
- تیترهای اضافی دیگر را نیز اضافه می کنیم. شش سطح متفاوت تیتر وجود دارد که می توانیم آنها را با استفاده از تگ های <h1></h1> تا <h6></h6> بسازیم. برای مثال تیترها با اندازه های مختلف را به صورت زیر وارد می کنیم :
<h1>Welcome to My Page!</h1>
<h2>My name is Bob.</h2>
<h3>I hope you like it here.</h3>
- یک پاراگراف می سازیم. تگ های پاراگراف برای ساخت بلوک های متمایز از متن استفاده می شوند. برای قرار دادن متن در یک پاراگراف ، تگ <p> را تایپ کرده و متن خود را وارد می کنیم ، سپس تگ </p> را برای بستن پاراگراف وارد می کنیم.
<p>This is my paragraph.</p>
می توانیم خطوط چندتایی را در یک ردیف وارد کنیم تا مجموعه ای از پاراگراف ها را در زیر یک تیتر ایجاد کنیم.
- تغییر دادن رنگ متن. می توانیم رنگ متن را با فریم بندی کردن متن با تگ های <font> تغییر دهیم. رنگ موردنظر خود را در بخش “color” تایپ می کنیم (کوتیشن ها را نیز باید درج نماییم). برای مثال ، برای داشتن یک پاراگراف با رنگ آبی ، می توانیم کد زیر را وارد نماییم :
<p><font color="blue">Whales are majestic creatures.</font></p>
نکته : توجه داشته باشید که تگ <font> تگ مناسبی نیست. شما می توانید به جای آن از <span class="color" style="color: (your color)">...</span>
استفاده نمایید.
- می توانیم هر نوع متنی (به عنوان مثال تیترها) را با این مجموعه تگ ها به رنگ متفاوت تغییر دهیم.
- HTML از تعداد زیادی از رنگ های جالب پشتیبانی می کند ، بنابراین با آزادی عمل می توانیم رنگ های مختلف را امتحان کنیم.
- فرمت بندی کردن متن به صورت Bold ، Italic یا زیرخط دار . متن Bold ، Italic یا زیرخط دار را می توان به ترتیب با تگ های <b></b> ، تگ های <i></i> و تگ های <u></u> ایجاد کنیم. هم چنین می توانیم متن زیرنویس (subscript) را (که برای مواردی مانند نوشتن ریشه های مربع استفاده می شود) و متن های بالا نویس (superscript) را (که برای مواردی مانند نوشتن توان اعداد استفاده می شود) ایجاد کنیم.
<b>Bold text</b>
<i>Italic text</i>
<u>Underlined text</u>
<sub>Subscript text</sub>
<sup>Superscript text</sup>
10- افزودن یک تصویر به صفحه خود. می توانیم با استفاده از تگ های <img src="URL"></img> یک تصویر در دسترس را در صفحه وب خود جاسازی نماییم. برای مثال ، اگر URL تصویر به صورت www.mypicture.com/lake باشد ، باید کد زیر را وارد نماییم
<img src="www.mypicture.com/lake"></img>
- ایجاد پیوند به یک صفحه دیگر. می توانیم یک پیوند به وب سایت دیگر با استفاده از مجموعه تگ <a href="link">link text</a> اضافه نماییم که در آن link مربوط به URL به وب سایتی است که ما می خواهیم با آن پیوند برقرار کنیم و link text متنی است که به عنوان لینک عمل می نماید. برای مثال ، برای ایجاد پیوند به کلیک سایت ، به صورت زیر عمل می نماییم :
<a href=" https://clicksite.org/ ">This is the link to Clicksite's website</a>
- بستن تگ های صفحه وب. همانند هر تگ دیگری در HTML ، ما باید تگ های <body> و <html> را ببندیم که این تگ ها در بالای سند ما قرار دارند. این کار را می توانیم با تایپ کردن دستورات زیر در انتهای سند انجام دهیم:
</body>
</html>
- مرور نمودن صفحه وب خود. ما می توانیم در صورت نیاز پاراگراف ها ، تیترها و متن بیشتری را در هر جایی از صفحه در داخل تگ های <body></body> وارد نماییم. یک مثال از صفحه وب کامل به صورت زیر می باشد :
<!DOCTYPE html>
<html>
<head>
<title>wikiHow Fan Page</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<p>This is a fan page for wikiHow. Make yourself at home!</p>
<h2>Important Dates</h2>
<p><i>January 15, 2019</i> - wikiHow's Birthday</p>
<h2>Links</h2>
<p>Here is a link to wikiHow: <a href="www.wikihow.com">www.wikihow.com</a></p>
</body>
</html>
- ایجاد هر نوع تغییرات لحظه آخری. اگر هر نوع خطایی در کدهای خود مشاهده نماییم ، همه آنها را باید قبل از ادامه کار اصلاح کنیم. هنگامی که مطمئن باشیم کدهای HTML ما به طور دقیق انتظارات ما را برآورده می سازند ، می توانیم به قسمت بعدی از آموزش درست کردن سایت می برویم.
- ذخیره کردن و باز نمودن صفحه وب خود
- تبدیل نمودن سند خود به متن ساده در سیستم عامل Mac. اگر از سیستم عامل Mac استفاده نماییم ، روی آیتم Format منو در بالای صفحه کلیک می نماییم ، سپس روی گزینه Make Plain Text در منوی کشویی باز شده ، کلیک می نماییم.
- این مرحله در سیستم عامل ویندوز نه اجباری هست و نیاز به انجام آن وجود دارد.
- منو “save” را باز می نماییم. پس از این که یک سند متنی جدید برای نوشتن صفحه وب خود ایجاد کردیم ، کلیدهای ctrl + S (ویندوز) یا (مکیناش) را برای ذخیره کردن سند فشار می دهیم.
- هم چنین می توانیم روی منوی File کلیک کرده و سپس در منوی کشویی نمایش داده شده روی گزینه Save As کلیک کنیم. این کار بر روی هر دو سیستم عامل ویندوز و Mac انجام می شود.
- نام فایل را برای سند HTML وارد می نماییم. هر نامی را که بخواهیم برای سند خود در قسمت “File name” در ویندوز یا “Name” در مکیناش وارد می نماییم.
- نوع فایل سند را تغییر می دهیم. نیاز داریم که سند را از یک فایل متنی به یک فایل HTML تغییر دهیم :
- ویندوز : روی منوی کشویی “Save as type” کلیک می کنیم ، روی گزینه All Files کلیک کرده و سپس عبارت .html را در انتهای نام فایل وارد می نماییم.
- مکیناش : پسوند .txt را در انتهای نام فایل با پسوند .html جایگزین می کنیم.
- روی کلید save کلیک می کنیم. این کلید در پایین پنجره است. انجام این کار یک فایل HTML ایجاد خواهد کرد.
- فایل های HTML به طور معمول با مرورگر پیش فرض مرورگر باز می شود.
- Text editor خود را می بندیم. در این مرحله ، ما آماده هستیم که فایل HTML خود را در مرورگر خود باز نماییم تا صفحه وب خود را مشاهده کنیم.
- یاز نمودن سند HTML با مرورگر خود. در بیشتر موارد ، ما با دوبار کلیک بر روی سند HTML قادر به انجام این کار خواهیم بود. اگر دو بار کلیک کردن بر روی سند نتایج خطایی به همراه داشته باشد ، موارد زیر را انجام می دهیم:
- ویندوز : روی سند راست کلیک می کنیم. گزینه Open with را انتخاب کرده و روی مرورگر موردنظر خود کلیک می کنیم.
- مکینتاش : روی سند خود یک بار کلیک می کنیم. روی گزینه File کلیک کرده و Open With را انتخاب کرده و مرورگر مورد نظر خود را کلیک می کنیم.
- ویرایش کردن سند HTML در صورت نیاز. ممکن است متوجه بروز خطایی در صفحه HTML خود بشویم. برای رفع آن ، می توانیم متن سند HTML را ویرایش کنیم:
- در ویندوز : می توانیم روی سند راست کلیک کرده و گزینه Edit را در منو کشویی باز شده کلیک می کنیم (اگر Notepad++ نصب شده باشد ، به جای آن نتیجه Edit with Notepad++ نمایش داده خواهد شد).
- در مکیناش : روی سند کلیک می کنیم. روی File کلیک می کنیم ، Open With را انتخاب کرده و TextEdit را کلیک می کنیم. هم چنین می توان سند را به داخلی TextEdit درگ کرد.
در اینجا دیدیم که چگونه می توانیم یک سایت طراحی کنیم . امیدواریم این آموزش برای شما سودمند واقع شده باشد.
این فصل در یک نگاه:
در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…
HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانهگذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشنها محسوب میشود. در واقع HTML را عنصر کلیدی صفحات وب می…این فصل در یک نگاه:
فصل سوم…
آموزش طراحی ریسپانسیو مدرن و جذابتر نسبت به بوتسرپ (همراه با ساخت صفحه اصلی و پنل یک آژانس مسافربری) آموزش پروژه محور فریمورک متریالایز برای اولین بار بین وب سایت های آموزشی آموزش تمامی …این فصل در یک نگاه:
ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…
این مجموعه با تلفیقی از فریمورک bootstrap و کد های html و css ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…این فصل در یک نگاه:
در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…
در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…این فصل در یک نگاه:
آموزش ایجاد Child Theme برای قالب اصلی و ویرایش قالب و ترجمه و راست چین کردن قالب های خارجی…
آموزش صفر تا صد طراحی وبسایت خبری و فروشگاهی با وردپرس و ووکامرس سرفصل های مجموعه طراحی سایت ۱. فصل اول ( طراحی UI/UX در فتوشاپ ) درباره وردپرس UI/UX چیست؟ آشنایی با سندها…این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …این فصل در یک نگاه:
رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…
اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …