با توسعه بسیاری از زبان های برنامه نویسی ، سبک و نشانه گذاری ، یادگیری طراحی وب سایت بیش از هر زمان دیگری پیچیده می شود. خوشبختانه ابزارهای زیادی برای کمک به شما در راه اندازی وجود دارد. به دنبال چند منبع اساسی باشید ، مانند آموزش های آنلاین یا کتابی در زمینه طراحی وب. پس از آماده شدن برای شروع ، با تسلط بر اصول اولیه HTML و CSS شروع کنید. سپس می توانید شروع به کاوش در زبان های پیشرفته تر طراحی سایت کنید ، مانند جاوا اسکریپت!
مراحل
روش 1 از 4: پیدا کردن منابع طراحی وب
مرحله 1. دوره های آموزشی و آموزش طراحی وب را بصورت آنلاین بررسی کنید
اینترنت پر از اطلاعات دقیق در مورد طراحی وب است و بسیاری از آن به صورت رایگان در دسترس است. ممکن است با گذراندن دوره های آنلاین رایگان در Udemy یا CodeCademy یا پیوستن به یک جامعه برنامه نویسی مانند freeCodeCamp شروع کنید. همچنین می توانید آموزش های تصویری طراحی وب را در YouTube پیدا کنید.
- اگر دقیقاً می دانید به دنبال چه چیزی هستید ، سعی کنید با استفاده از اصطلاحات خاص (مانند "انتخاب کنندگان کلاس در آموزش CSS") جستجو کنید.
- اگر مبتدی هستید و تجربه طراحی وب ندارید ، با یادگیری اصول برنامه نویسی در HTML و CSS شروع کنید.
مرحله 2. به دنبال شرکت در کلاس در کالج یا دانشگاه محلی باشید
اگر در کالج یا دانشگاه شرکت می کنید ، با بخش علوم کامپیوتر مدرسه خود مشورت کنید یا با فهرست دوره های خود مشورت کنید تا بدانید آیا دوره های طراحی وب موجود است یا خیر. اگر در مدرسه نیستید ، بررسی کنید که آیا کالج ها یا دانشگاه های نزدیک شما کلاس های آموزش مداوم در زمینه طراحی وب ارائه می دهند یا خیر.
برخی از دانشگاه ها کلاس های آنلاین طراحی وب را ارائه می دهند که برای هر کسی که مایل به ثبت نام است آزاد است. وب سایت هایی مانند Coursera.org را بررسی کنید تا کلاس های طراحی وب رایگان یا مقرون به صرفه را که توسط مربیان دانشگاه تدریس می شود ، بیابید
مرحله 3. چند کتاب طراحی وب را از کتابفروشی یا کتابخانه تهیه کنید
یک کتاب خوب در زمینه طراحی وب می تواند یک مرجع ارزشمند برای یادگیری و به کارگیری مهارت خود باشد. به دنبال کتابهای به روز در زمینه طراحی وب عمومی یا قالبهای خاص کد نویسی و زبانهایی باشید که می خواهید یاد بگیرید.
خواندن مجلات و مقالات وبلاگ در مورد طراحی وب نیز راه خوبی برای یادگیری تکنیک های جدید ، الهام گرفتن و پیگیری آخرین روندها است
مرحله 4. برخی از نرم افزارهای طراحی وب را بارگیری یا خریداری کنید
نرم افزار طراحی وب خوب می تواند به شما در ایجاد کارآمدتر و م websitesثرتر وب سایت ها کمک کند ، و همچنین برای یادگیری نکات زیر در مورد برنامه نویسی ، اسکریپت نویسی و سایر عناصر کلیدی طراحی بسیار مفید است. ممکن است از ابزارهایی مانند:
- برنامه های طراحی گرافیکی مانند Adobe Photoshop ، GIMP یا Sketch.
- ابزارهای ایجاد وب سایت ، مانند وردپرس ، Chrome DevTools یا Adobe Dreamweaver.
- نرم افزار FTP برای انتقال پرونده های نهایی شما به سرور شما.
مرحله 5. برخی از قالب های وب سایت را پیدا کنید تا در شروع کار با آنها بازی کنید
هنگام یادگیری اصول طراحی وب ، استفاده از قالب ها اشکالی ندارد. الگوهای صفحه وب مورد علاقه خود را جستجو کنید و کد را از نزدیک مشاهده کنید تا از طرز قرار دادن طراح در صفحه ایده بگیرید. همچنین می توانید با تغییر کد و افزودن عناصر خود به قالب آزمایش کنید.
برای شروع الگوهای وب سایت رایگان را جستجو کنید یا با الگوهایی که همراه نرم افزار طراحی وب شما هستند آزمایش کنید
روش 2 از 4: تسلط بر HTML
مرحله 1. با برچسب های اصلی HTML آشنا شوید
HTML یک زبان نشانه گذاری ساده است که برای قالب بندی عناصر اساسی وب سایت استفاده می شود. می توانید عناصر مختلف وب سایت خود را با استفاده از برچسب ها قالب بندی کنید. برچسب ها در براکت های زاویه دار قبل و بعد از هر عنصر ظاهر می شوند و دستورالعمل هایی در مورد نحوه عملکرد آن عنصر در صفحه ارائه می دهند. برای بستن برچسب ، یک / در جلوی تگ نهایی در داخل براکت های زاویه دار قرار دهید.
- به عنوان مثال ، اگر می خواهید بخشی از متن شما باشد جسورانه ، عنصر را با برچسب احاطه می کنید ، مانند این: این متن پررنگ است
- چند برچسب متداول شامل (پاراگراف) ، (لنگر ، که متن پیوندی را مشخص می کند) و (فونت ، که می تواند به تعریف ویژگی های مختلف متن مانند اندازه و رنگ کمک کند) است.
- تگ های دیگر قسمت های مختلف خود سند HTML را تعریف می کنند. برای مثال ، شامل اطلاعاتی در مورد صفحه است که برای بیننده قابل مشاهده نخواهد بود ، مانند کلمات کلیدی یا شرح صفحه ای که در نتایج موتور جستجو ظاهر می شود.
مرحله 2. استفاده از ویژگی های برچسب را بیاموزید
برخی از برچسب ها نیاز به اطلاعات بیشتری دارند تا نحوه عملکرد آنها مشخص شود. این اطلاعات اضافی در برچسب باز شده ظاهر می شود و به آن "ویژگی" می گویند. نام ویژگی بلافاصله بعد از نام برچسب ظاهر می شود و با فاصله فاصله می گیرد. مقدار ویژگی با علامت = به نام ویژگی وصل شده و توسط علامت نقل قول احاطه شده است.
- به عنوان مثال ، اگر می خواهید بخشی از متن خود را قرمز کنید ، می توانید این کار را با استفاده از برچسب و ویژگی رنگ فونت مناسب انجام دهید ، مانند این: این متن قرمز است.
- بسیاری از جلوه هایی که قبلاً به طور معمول با ویژگی های تگ HTML به دست می آمد ، مانند تنظیم رنگ های مختلف فونت ، اکنون به طور معمول به جای آن با کدگذاری CSS انجام می شود.
مرحله 3. با عناصر تو در تو آزمایش کنید
HTML همچنین به شما اجازه می دهد تا عناصر را درون عناصر دیگر قرار دهید تا قالب بندی پیچیده تری ایجاد شود. به عنوان مثال ، اگر می خواهید یک پاراگراف تعریف کنید و سپس قسمتی از متن داخل پاراگراف را کج کنید ، می توانید این کار را به این صورت انجام دهید:
من عاشق کد نویسی هستم!
مرحله 4. با عناصر خالی آشنا شوید
برخی از عناصر در HTML نیازی به باز کردن و بستن برچسب ها ندارند. به عنوان مثال ، اگر در حال وارد کردن یک تصویر هستید ، فقط به یک برچسب "img" که شامل نام برچسب و سایر ویژگیهای ضروری (مانند نام فایل تصویر و هر متن جایگزینی که می خواهید برای اهداف دسترسی اضافه کنید) نیاز دارید. مثلا:
مرحله 5. طرح اولیه یک سند HTML را کاوش کنید
برای اینکه وب سایت مبتنی بر HTML شما به درستی کار کند ، باید نحوه قالب بندی کل صفحه را بدانید. این شامل تعریف محل شروع و پایان کد html شما و همچنین استفاده از برچسب ها برای تعیین قسمت هایی از کد در مقابل قسمت هایی است که برای ارائه اطلاعات پس زمینه پنهان وجود دارد. مثلا:
- از برچسب برای تعریف صفحه خود به عنوان یک سند HTML استفاده کنید.
- در مرحله بعد ، کل صفحه خود را در برچسب ها قرار دهید تا محل شروع و پایان کد شما مشخص شود.
- هرگونه اطلاعاتی که برای بیننده نمایش داده نمی شود ، مانند عنوان صفحه ، کلمات کلیدی و توضیحات صفحه خود را در برچسب ها قرار دهید.
- بدنه صفحه خود را (یعنی هر متن و تصویری که می خواهید بیننده ببیند) با برچسب ها تعریف کنید.
روش 3 از 4: آشنایی با CSS
مرحله 1. از CSS برای اعمال سبک در اسناد HTML خود استفاده کنید
CSS یک زبان سبک است که به شما امکان می دهد عناصر سبک و طراحی مختلف را در صفحه وب خود اعمال کنید. به عنوان مثال ، اگر می خواهید به صورت انتخابی یک فونت یا رنگ متن خاص را برای برخی از عناصر متن در صفحه خود اعمال کنید ، می توانید یک فایل CSS برای این کار ایجاد کنید. سپس ، می توانید فایل CSS را در هرجایی که دوست دارید در سند HTML خود قرار دهید.
-
به عنوان مثال ، اگر می خواهید یک فایل CSS تمام عناصر پاراگراف موجود در سند HTML شما را سبز کند ، می توانید یک فایل.css حاوی خطوط زیر ایجاد کنید:
- پ {
- رنگ: سبز ؛
- }
- سپس فایل را با نامی مانند style.css ذخیره می کنید.
- برای اعمال شیوه نامه در سند HTML خود ، آن را به عنوان یک عنصر پیوند خالی در برچسب ها وارد کنید. مثلا:
مرحله 2. با عناصر مجموعه قوانین CSS آشنا شوید
یک قطعه کد CSS "مجموعه قانون" نامیده می شود. مجموعه قوانین شامل عناصر مختلفی است که مشخص می کند کد شما می خواهد چه کاری انجام دهد. این شامل:
- انتخابگر ، که عنصر HTML موردنظر برای استایل را مشخص می کند. به عنوان مثال ، اگر می خواهید قانون شما بر عناصر پاراگراف تأثیر بگذارد ، مجموعه قوانین خود را با حرف "p" شروع می کنید.
- اعلان ، که ویژگی هایی را که می خواهید به آنها سبک دهید (مانند رنگ فونت) مشخص می کند. این اعلامیه در داخل پرانتز {} قرار دارد.
- ویژگی ، که مشخص می کند کدام ویژگی از عنصر HTML را می خواهید به سبک درآورید. به عنوان مثال ، در thetag ، می توانید مشخص کنید که می خواهید رنگ متن را سبک کنید.
- مقدار ویژگی به طور خاص نحوه تغییر ویژگی را مشخص می کند (به عنوان مثال ، اگر ویژگی رنگ فونت باشد ، مقدار ویژگی "سبز" خواهد بود).
- شما می توانید چندین ویژگی مختلف را در یک اظهارنامه واحد تغییر دهید.
مرحله 3. CSS را روی متن خود اعمال کنید تا حروفچینی شما زیبا به نظر برسد
CSS برای اعمال انواع جلوه ها بر روی متن شما بدون نیاز به کدگذاری جداگانه هر ویژگی در HTML مفید است. آزمایش تغییر ویژگی های مختلف حروفچینی در CSS ، از جمله:
- رنگ قلم
- اندازه فونت
- خانواده فونت (به عنوان مثال ، محدوده فونت هایی که می خواهید در متن خود استفاده کنید)
- تراز متن
- ارتفاع خط
- فاصله بین حروف
مرحله 4. با جعبه ها و دیگر ابزارهای طرح بندی CSS آزمایش کنید
CSS همچنین برای افزودن عناصر بصری جذاب به صفحه شما مانند جعبه های متن و جداول مفید است. علاوه بر این ، می توانید از آن برای تغییر طرح کلی صفحه خود و تعیین موقعیت عناصر مختلف نسبت به یکدیگر استفاده کنید.
به عنوان مثال ، می توانید ویژگی هایی مانند عرض و رنگ پس زمینه یک عنصر را تعریف کنید ، یک حاشیه اضافه کنید یا حاشیه هایی تنظیم کنید که بین عناصر مختلف صفحه شما فاصله ایجاد می کند
روش 4 از 4: کار با زبان های طراحی دیگر
مرحله 1. اگر می خواهید عناصر تعاملی را به صفحات خود اضافه کنید ، جاوا اسکریپت را بیاموزید
جاوا اسکریپت یک زبان عالی برای یادگیری است اگر علاقمند به افزودن ویژگی های پیشرفته تر به وب سایت های خود مانند انیمیشن ها و پنجره های بازشو هستید. یک دوره آموزشی بگذرانید یا به دنبال آموزش های آنلاین در مورد نحوه کدگذاری در جاوا اسکریپت و گنجاندن آن عناصر کد شده در صفحات وب خود با استفاده از HTML باشید.
قبل از اینکه بتوانید با جاوا اسکریپت راحت شوید ، باید با اصول اولیه ایجاد صفحات در HTML و CSS آشنا باشید
مرحله 2. برای سهولت در برنامه نویسی جاوا اسکریپت ، با jQuery آشنا شوید
jQuery یک کتابخانه جاوا اسکریپت است که می تواند برنامه نویسی جاوا را با دسترسی به انواع مختلف عناصر جاوا اسکریپت از پیش کد شده ساده کند. اگر قبلاً با اصول برنامه نویسی جاوا اسکریپت آشنا هستید ، jQuery یک ابزار عالی است.
شما می توانید از طریق jQuery.org ، وب سایت بنیاد jQuery ، به کتابخانه jQuery و بسیاری از منابع ارزشمند دیگر دسترسی پیدا کنید
مرحله 3. اگر به توسعه پشتیبان علاقه دارید ، زبان های سمت سرور را مطالعه کنید
در حالی که HTML ، CSS و جاوا اسکریپت برای طراحان وب که بر آنچه کاربر در وب سایت می بیند و انجام می دهد تمرکز دارند ، اما اگر به کارهای پشت صحنه علاقه بیشتری دارید ، زبان های سمت سرور مفید هستند. اگر می خواهید در مورد توسعه پشتیبان بیاموزید ، روی یادگیری زبان هایی مانند Python ، PHP و Ruby on Rails تمرکز کنید.
این زبانها برای مدیریت و پردازش داده هایی که کاربر آنها را نمی بیند مفید هستند. به عنوان مثال ، PHP می تواند برای ایجاد ابزارهای ایجاد رمز عبور امن در وب سایت هایی که نیاز به ورود به سیستم دارند استفاده شود
فایل های راهنما
صفحه تقلب HTML
برگه تقلب CSS
