آموزش طراحی وب سایت از پایه – قسمت سوم

209
11910

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

ساخت اولین صفحه وب سایت شما

در هر جای كامپیوتر كه دوست دارید فلدری به نام my-first-webpage  بسازید.

textEditor خودتان را كه در جلسات قبل توضیح دادیم باز كنید كد زیر را در آن كپی كنید

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>The Most Basic Web Page in the World</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″/>
</head>
<body>
<h1>The Most Basic Web Page in the World</h1>
<p>This is a very simple web page to get you started.
Hopefully you will get to see how the markup that drives
the page relates to the end result that you can see on
screen.</p>
<p>This is another paragraph, by the way. Just to show how it
works.</p>
</body>
</html>

 

از textEditor گزینه file>save as را بزنید پنجره ای مانند زیر نمایش می یابد:

design-web-15.gif

مسیر فلدر قبل را بدهید تا در آنجا ذخیره شود.
نام فایل را انتخاب نمایید البته با پسوند html مانند my-first-webpage.html
از منوی كشویی save as type گزینه all files را انتخاب نمایید
از منوی كشویی Encoding گزینه UTF-8 را انتخاب نمایید.

و حالا دكمه save را بزنید.
حالا در فلدر مورد نظر فایلتان را با مرورگر باز نمایید . تبریك شما اولین صفحه وب خودتان را ساختید!

 

design-web-16.gif
اهمیت UTF-8

این كاراكتر ست (Character Set) اجازه می دهد زبان های دیگر هم بتوانند به درستی صفحه شما را ببینند. فرض كنید یك كاربر كره ای كه زبان انگلیسی ندارد بخواهد صفحه شما را ببیند ، این كاراكتر ست است كه اجازه میدهد شما با مشكلی مواجه نشوید.

اولین آنالیز شما

یك مقایسه و یك آنالیز ساده بین كد شما و ظاهری كه در مرورگر می بینید ، می تواند در یادگیری شما كمك شایانی كند:

design-web-17.gif
زمان مناسبی است كه در مورد 2 تگ p  و h1 و البته عناصر دیگر صحبت كنیم.

تیترها و سلسله مراتب آن (H)

 

تیترها عناصر بلاك و بسته شونده (container)هستند و سلسله مراتب مخصوص به خود را دارند و از h1  تا h6  وجود دارند.
از h1  برای مهم ترین تیتر از h2 برای تیتر كم  ارزش تر و از h3 برای تیتر كم ارزش تر از h2 و به همین ترتیب تا  h6

پاراگراف (p)

یك تگ بلاك و بسته شونده (container) است و برای یك بلوك متنی استفاده می شود این بدان معنی است كه متن های خوتان را باید داخل این تگ قرار دهید.

لیست (list)

فرض كنید می خواهید لیست وب سایت های طراحی شده خودتان را نمایش دهید ، به ليستی كه من درسایت خودم استفاده كردم  یك سری بزنید.
اینجا:

design-web-18.jpgو اما لیست ها دو گونه اند:

Ol-order list : برای لیست های ترتیبی
Ul-unorder list: برای لیستهای غیر ترتیبی

به مثال زیر دقت كنید:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Lists – an introduction</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″/>
</head>
<body>
<h1>Lists – an introduction </h1>
<p>Here’s a paragraph. A lovely, concise little paragraph.</p>
<p>Here comes another one, followed by a subheading.</p>
<h2>A subheading here</h2>
<p>And now for a list or two:</p>
<ul>
<li>This is a bulleted list</li>
<li>No order applied</li>
<li>Just a bunch of points we want to make</li>
</ul>
<p>And here’s an ordered list:</p>
<ol>
<li>This is the first item</li>
<li>Followed by this one</li>
<li>And one more for luck</li>
</ol>
</body>
</html>

و حالا خروجی كار رو در مرورگر ببینید تا تفاوت های دو نوع لیست را ببینید

design-web-19.gif

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

ادامه دارد اگر مورد استقبال قرار گیرد!

آموزش توسط بهزاد علی بیگی

برای مقاله های بیشتر و هم چنین دریافت pdf سری کامل آموزش ما را دنبال کنید در

آموزش طراحی سایت از پایه – قسمت اول

آموزش طراحی سایت از پایه – قسمت دوم

آموزش طراحی سایت از پایه – قسمت چهارم
آموزش طراحی سایت از پایه – قسمت پنجم
آموزش طراحی سایت از پایه – قسمت ششم
آموزش طراحی سایت از پایه – قسمت هفتم
آموزش طراحی سایت از پایه – قسمت هشتم
آموزش طراحی سایت از پایه – قسمت نهم
آموزش طراحی سایت از پایه – قسمت دهم
آموزش طراحی سایت از پایه – قسمت یازدهم
آموزش طراحی سایت از پایه – قسمت دوازدهم
آموزش طراحی سایت از پایه – قسمت سیزدهم
آموزش طراحی سایت از پایه – قسمت چهاردهم

کانال تلگرام عصرنوشتن

209 دیدگاه

  1. ببخشید برای راه اندازی سایت از این طریق که شما توضیح دادین باید هزینه هم برای خرید قالب سایت و باقی چیزها پرداخت کرد ؟ و چه مبلغی؟

  2. ممنون فقط در مورد اون قسمت های ثابت اول هر صفحه یه توضیحی میدادید بهتر بود بقیه رو نمیدونم من که قبلا یکم بلد بودم واقعا مفید بود برام.ممنون

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

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

    • Start—–>All Programs—–>Accessoris—–>Notepad البته یه راه قدیمی و داخل ویندوز xp می باشد و شما در حال حاظر میتونید خیلی راحت دکمه استارت رو از گوشه پایین سمت چپ صفحه بزنید و بدون هیچ کار خاصی فقط تایپ کنید notepad یا میتونید فقط چند حرف ازش تایپ کنید ویندوز خودش اونو برای شما جستجو میکنه و میاره

  4. سلام باتشکر از تدریس بسیار خوبتان ببخشید من ویندوز ۱۰ روی لب تابم نصب هست.و اینکه قسمت enconding را ندارد.لطفا راهنمایی کنید.ممنونم

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

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

  7. سلام و خسته نباشید من چند تا مشکل برام ایجاد شد اگر ممکن است منو راهنمایی کنید :
    من نمیدانم این قسمت را باید مثلا ادرس خودمون بنویسم بعدم نام فایل را انتخاب نمایید البته با پسوند html مانند my-first-webpage.html
    را چگونه بیارم

  8. درود بر شما.عالی بود. از سر در گمی نجات یافتم. درود بر تمام اساتید دلسوز. کاش اینگونه غربزده شویم. لطف کردید.

  9. سلام
    سایتتون خیلی خوبه. خوشم اومد. (من کمتر از چیزی خوشم میادا!)
    این سایت مسخره web-scala در حال فروشه. لطفا مثال هاتون رو از یه جای دیگه بیارید!

  10. سلام.مطالب آموزشی تون عالی بود تا اینجا و خسته نباشید.
    ببخشید می خواستم بدونم من با خواندن این مطالب می تونم بلاخره یک وب سایت برای خودم طراحی و راه اندازی کنم؟؟؟ یا باید به کلاس های حضوری هم مراجعه کنم؟
    ممنون میشم پاسخ بدین…!!!

    • با سلام
      این آموزش‌ها در حقیقت حکم پایه کار را دارد و با اینکه می‌ـوان سایت نیز با آن طراحی کرد اما ادامه آنها را باید یا با مطالعه در این زمینه یا با حضور در کلاس‌ها دنبال کنید.
      با تشکر

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

  12. سلام خسته نباشید با تشکر
    لطفا در مورد سه خط اول قبل از عنصر head بیشتر توضیح بدید هر صفحه وبی که طراحی کنیم این سه خط رو به صورت ثابت باید قرار بدیم؟

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

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

  15. سلام .عالیه ممنون.
    یه سوال دارم چرا بعد از اینکه در نوت پد کدها را مینویسم .مرورگر انها را به همون صورت که نوشتم نشون میده؟

  16. سلام نحوه اموزشتون خیلی عالیه وموبه مو توضیح داده شده ولی من هرکاری می کنم که بتونم کدهارودرپوشه کپی کنم کپی نمیشه بایدچی کارکنم -درضمن من نابلدهستم وتازه وارددنیای اینترنت شده ام دوست دارم که زود یادبگیرم

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

  18. فدای دستت
    راسی این صفحه که معرفی میکنید وب اسکالا آدرسشو عوض کردن؟
    لطفا پی دی اف آموزش هارو هم قرار بدید
    عالیه لطفا ادامه بدید
    مچکرم

  19. به خاطر این زحماتی که کشیدید انشا الله که هر چی از خداوند می خواهید ( اگر برایتان صلاح بداند) به شما بدهد

  20. سلام،
    من دانشجوی ارشد معماری هستم و خیلی دوست داشتم که برای پروژه هام وبسایت داشته باشم. خیلی خوشحالم که مطالب شما رو پیدا کردم. واقعا اوون قسمتی که نوشتین ” تبریك شما اولین صفحه وب خودتان را ساختید!” ذوق کردم 🙂 ادامه بدین لطفا

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

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

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

  24. سلام خسته نباشید.
    من همه ی مراحل ساخت رفتم اما وقتی با مرورگر باز میکنم نوشته ای که توی مرورگر میاد مثل دستورای تو notepad چیکار باید بکنم؟

  25. سلام مدتها بود می خواستم طراحی سایت یاد بگیرم و نمیشد این بار شما با آموزش خوبتون دارید منو به هدفم می رسونید.منتظر ادامه آموزشهاتون هستم ممنون و خدا قوت

  26. سلام. خیلی ممنون و متشکرم از سایت مفیدتون. من خیلی وقته دنبال همچین چیزی می گشتم.اولین سایتم رو که ساختم بهتون معرفی می کنم. امیدوارم که ناامیدتون نکنم. مرسی

  27. سلام واقعا سایتتون عالیه من خیلی علاقه مند شدم فقط مشکلی ک دارم اینه ک نمیدونم فایل رو روی مرورگر چجوری اجرا کنم میشه راهنماییم کنید؟

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

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

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

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

  32. با سلام
    ممنون از آموزش هاتون من امروز یک دامنه سایت ثبت و خریداری کردم . ولی باور کنید هیچ چیز از وبسایت نمی دونم و تاحالا فقط وبلاگ داشتم . الان دارم این مقاله ها رو می خونم . وقتی سایتم روساختم اولین کارم رو نشونتون می دم .

  33. سلام خسته نباشی
    من دقیقا نفهمیدم بعد از اینکه سیو کردم فایلمو چه جوری با مرورگر باز کنم/لطفا یه راهنمایی بکن/مرسی

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

  35. text ditor رو توضیح ندادین من پیدا نمیکنم.واقعا توضیحاتتون خیلی واضحه ازتون ممنونم.اگه میشه کمک کنید بتونم وبسایت طراحی کنم من نصفه راه گیر کردم

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

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

  38. من مث اینکه خ دیرفهمیدم!ولی بایدخودمو زود برسونم به دوستانی که همپای هم پیش میرن.یک ماهی میشه خودم ازطریق مطالب نت پیش میرم ولی سرعتم کم بود.باسایت شما ونظرات دوستان انرزی تازه گرفتم.خدا به امیدتو شروع میکنم.جناب مهندس زندگی به کامتون شیرین باشه

  39. باسلام
    احتراما خواهشمند است کلیه مراحل فوق را در صورت امکان با فرمت pdf برای اینجانب ارسال نمائید .
    باتشکر فراوان

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

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

  42. سلام، دست مريزاد آقاي بيگي .
    مطالبتون خيلي آموزنده است و مهمترين ويژگي اش هم اينه كه آموزشها به زبان ساده است .
    واقعا ممنونم
    خدا قوت
    اميدوارم پربارتر و مفيدتر بشه

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

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

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

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

  47. خيلي خوبه خواهش ميكنم ادامه بديد عاليه حرف نداره منكه فكر ميكنم خيليها از اين اموزشهايي كه ميدين خبر ندارن وگرنه كسي نيست كه نخواد همچين مطالبي رو ياد نگيره فقط بهم بگيد مطالب بعدي رو كي توضيح ميدين…..يه چيز ديگه تا جايي كه ميتونين مقدماتي توضيح بدين(عاميانه همراه با عكس) كه همه بتونن اروم اروم با شما پيش برن

  48. ليست هاي ترتيبي با شماره كه مي تواند لاتين و يا يوناني و يا غيره باشد1 2 3 ولي ليست هاي غير ترتيبي با يك بالت همراه است مثلا disc
    در ادامه بيشتر با ليستها كار مي كنيم

  49. ممنون
    خیلی خوب بود
    من امروز اشنا شدم ولی 2 مقاله قبلی رو هم خوندم و میخوام دنبال کنم
    فقط یه سوال؟ من تفاوت لیست های ترتیبی و غیر ترتیبی رو نفهمیدم

  50. سلام
    یک دنیا ممنون
    خیلی خیلی تا حالاش مفید بوده. تمام مراحل رو انجام دادم و تدکراتی و هم که دادید رو رعایت نمودم. البته در هنگام سیو وقتی گزینه all files رو می زدم فقط یه فایل متنی میومد و بعد از اون به شکل html سیو کردم و به صفحه مورد نظر رسیدم.
    منتظر درس های بعدی هستم چون چند وقتی هست که مشتاق به داشتن سایت شخصی بودم.
    مرسی

  51. سلام
    خسته نباشی مهندس
    دمت گرم خیلی گلی
    تو این دوره زمونه کمتر کسی گیر می یاد که معلوماتشو مجانی به دیگران یاد بده.
    مهندس قسمت بعدشو کی میذارین؟

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

  53. با سلام
    اي كاش به اختصار كليه نرم افزارهاي ساخت وب رو مثل موبيل تايپ -ورد پرس و غيره رو در يك مطلب جداگانه ارائه بديد تا دوستان مبتدي بتونند با اونا كار كنند
    ممنون

  54. درود
    فکر کنم این مباحث، به این شکل گیرا و قابل فهم و قابل پی گیری، اگر ادامه نداشته باشه جای دریغ خواهد داشت… .
    هماره جاودان!

ارسال یک پاسخ