استفاده از طراحی یادگیری وب چیست؟
با توسعه بسیاری از زبان های برنامه نویسی، سبک و نشانه گذاری، یادگیری طراحی وب پیچیده تر از همیشه می شود. خوشبختانه ابزارهای متعددی برای کمک به شروع کار شما وجود دارد. به دنبال چندین منبع اساسی مانند آموزش های آنلاین یا کتاب جدید به روز در طراحی وب بروید. پس از آماده شدن برای شروع، با تسلط بر مبانی HTML و CSS شروع کنید. سپس شما می توانید زبان های پیشرفته تر وب سایت را جستجو کنید، مانند جاوا اسکریپت!
روش یکی از چهار:
پیدا کردن منابع طراحی وب سایت
ویرایش کنید
تصویر به نام یادگیری طراحی وب سایت مرحله 1
1
بررسی آنلاین برای دوره های طراحی وب و آموزش. اینترنت پر از اطلاعات دقیق در مورد طراحی وب است، و بسیاری از آن به صورت آزاد در دسترس است. شما ممکن است با در نظر گرفتن برخی از دوره های رایگان آنلاین در Udemy یا CodeCademy، و یا پیوستن به جامعه برنامه نویسی مانند freeCodeCamp. شما همچنین می توانید آموزش تصویری وب سایت را در YouTube پیدا کنید.
اگر دقیقا به دنبال چیزی هستید که دنبال آن هستید، سعی کنید جستجو را با استفاده از شرایط خاص (به عنوان مثال "انتخابگرهای کلاس در آموزش CSS") انجام دهید.
اگر شما یک مبتدی بدون تجربه طراحی وب هستید، ابتدا با یادگیری در مورد اصول برنامه نویسی در HTML و CSS شروع کنید.
2
نگاهی به گرفتن یک کلاس در کالج یا دانشگاه محلی. اگر شما در یک کالج یا دانشگاه شرکت می کنید، با بخش علوم کامپیوتر دانشکده خود مشورت کنید و یا در مورد کاتالوگ دوره خود برای پیدا کردن هر گونه دوره های طراحی وب در دسترس باشید. اگر شما در مدرسه نیستید، بررسی کنید که آیا کالج ها یا دانشگاه هایی که در نزدیکی شما هستند، کلاس های آموزش مداوم در طراحی وب را ارائه می دهند.
برخی از دانشگاه ها کلاس های آنلاین طراحی وب را ارائه می دهند که برای هر کسی که بخواهد ثبت نام کند، باز است. وب سایت هایی مانند Coursera.org را بررسی کنید تا کلاس های رایگان و یا مقرون به صرفه طراحی شده توسط مربیان دانشگاه را آموزش دهید.
3
برخی از کتابهای طراحی وب را از کتابفروشی یا کتابخانه دریافت کنید. یک کتاب خوب در طراحی وب می تواند مرجع ارزشمندی باشد زیرا شما در حال یادگیری و استفاده از هنر و صنعت خود هستید. به دنبال کتاب های به روز در طراحی وب سایت عمومی یا فرمت های خاص برنامه نویسی و زبان هایی که می خواهید یاد بگیرید.
مجلات خواندن و مقالات وبلاگ در مورد طراحی وب نیز راه خوبی برای یادگیری تکنیک های جدید هستند، الهام بخش هستند و به دنبال آخرین روند هستند.
4
دانلود یا خرید برخی از نرم افزار طراحی وب. نرم افزار طراحی وب خوب می تواند به شما در ایجاد وب سایت ها به صورت موثر و موثر کمک کند و همچنین برای کمک به یادگیری و استفاده از برنامه نویسی، اسکریپت و دیگر عناصر طراحی کلیدی عالی است. شما ممکن است از ابزارهایی مانند:
برنامه های طراحی گرافیک مانند Adobe Photoshop، GIMP یا Sketch.
ابزار ایجاد وب سایت، مانند WordPress، Chrome DevTools، یا Adobe Dreamweaver.
نرم افزار FTP برای انتقال فایل های پایان یافته خود را بر روی سرور شما.
تصویر با نام Learn Web Design مرحله 5
5
بعضی از قالب های وب را با شروع به کار خود باز کنید. همانطور که اصول اولیه طراحی وب را یاد می گیرید، هیچ مشکلی در استفاده از قالب ها وجود ندارد. جستجو برای قالب های وب سایت که دوست دارید انجام دهید و نگاهی دقیق به کد بگیرید تا ایده بگیرید که چگونه طراح این صفحه را با هم قرار داده است. شما همچنین می توانید با تغییر کد و اضافه کردن عناصر خود به الگو آزمایش کنید.
برای جستجو از قالب های وب سایت رایگان برای شروع، و یا آزمایش با قالب های که با نرم افزار طراحی وب خود را تجربه کنید.
آگهی
روش دوم از چهار:
تسلط بر HTML
ویرایش کنید
1
با برچسب های HTML پایه آشنا شوید. HTML یک زبان نشانه گذاری ساده است که برای قالب بندی عناصر اساسی یک وب سایت مورد استفاده قرار می گیرد. شما می توانید عناصر مختلف وب سایت خود را با استفاده از برچسب ها قالب بندی کنید. برچسب ها در براکت های زاویه ای <> قبل و بعد از هر عنصر ظاهر می شوند و دستورالعمل هایی در مورد چگونگی عملکرد این عنصر در صفحه ارائه می شود. برای بستن برچسب، در انتهای تگ نهایی درون براکت های زاویه قرار داده می شود. [6]
به عنوان مثال، اگر شما بخواهید برخی از متنهایتان به صورت جسورانه باشد، عنصر را با برچسب <b> </ b> احاطه کنید: <b> این متن پررنگ است. </ b>
چند تگ رایج شامل <p> </ p> (پاراگراف)، <a> </a> (لنگر، که متن مرتبط را تعریف می کند)، و <font> </ font> (فونت، که می تواند تعریف مشخصه های مختلف متن، مانند اندازه و رنگ).
تگ های دیگر قسمت های مختلف سند HTML را مشخص می کنند. به عنوان مثال، <head> </ head> برای حاوی اطلاعاتی درباره صفحه ای است که برای بیننده قابل مشاهده نیست، مانند کلمات کلیدی یا توصیف صفحه ای که در نتایج موتور جستجو ظاهر می شود.
تصویر به نام یادگیری طراحی وب سایت مرحله 7
2
یاد بگیرید از ویژگی های برچسب استفاده کنید. برخی از برچسب ها نیاز به اطلاعات اضافی برای مشخص کردن نحوه عملکرد آنها دارند. این اطلاعات اضافی درون تگ باز می شود و آن را یک ویژگی "نام" نامیده می شود. نام attribute بلافاصله پس از نام تگ، به وسیله یک فضای جداگانه ظاهر می شود. مقدار ویژگی به نام attribute توسط علامت = و علامت نقل قول محصور شده است. [7]
به عنوان مثال، اگر شما می خواهید برخی از رنگ قرمز خود را ایجاد کنید، می توانید آن را با استفاده از برچسب <font> </ font> و یک برنامه انجام دهید
ویژگی رنگ متن مناسب، مانند این است: <font color = "# FF0000"> این متن قرمز است. </ font>
بسیاری از اثرات که به طور مرتب با ویژگی های تگ HTML به دست می آیند، مانند تنظیم رنگ های مختلف فونت، در حال حاضر به طور معمول با استفاده از کدگذاری CSS انجام می شود.
3
آزمایش با عناصر توزیع شده HTML همچنین به شما اجازه می دهد عناصر را در عناصر دیگر قرار دهید تا قالب بندی پیچیده تر را ایجاد کنید. به عنوان مثال، اگر شما می خواستید یک پاراگراف را تعریف کنید و سپس برخی از متن را در پاراگراف متن کالیج کنید، می توانید این کار را مانند این انجام دهید: [8]
<p> من <i> دوست دارم </ i> برنامه نویسی! </ p>
4
با عناصر خالی آشنا شوید. برخی از عناصر در HTML هر دو برچسب باز و بسته را نیازی ندارند. برای مثال، اگر شما یک تصویر را درج کنید، فقط یک برچسب "img" حاوی نام تگ و هر گونه ویژگی دیگر لازم (مانند نام فایل تصویر و هر متن دیگری که می خواهید برای اهداف دسترسی اضافه کنید) نیاز دارید. به عنوان مثال: [9]
<img src = "PGWodehouse.jpg" alt = "عکس از نویسنده P.G. Wodehouse">
5
طرح اولیه اسناد HTML را کاوش کنید. برای اینکه وب سایت مبتنی بر HTML خود به درستی عمل کند، باید بدانید که چگونه کل صفحه را فرمت کنید. این شامل تعریف کدام کد اچ تی ام ال شروع و پایان می یابد و همچنین استفاده از برچسب ها برای تعیین کدام قسمت کد نمایش داده خواهد شد در حالی که برای ارائه اطلاعات پس زمینه وجود دارد. به عنوان مثال: [10]
از برچسب <! DOCTYPE html> برای تعریف صفحه خود به عنوان یک سند HTML استفاده کنید.
بعد، کل صفحه خود را در داخل برچسب ها <html> </ html> قرار دهید تا تعریف کنید کد شما شروع و پایان می یابد.
هر گونه اطلاعاتی که به بیننده نمایش داده نخواهد شد، مانند عنوان صفحه، کلمات کلیدی و توضیحات صفحه خود، در داخل برچسب <head> </ head> قرار دهید.
بدنه صفحه خود را تعریف کنید (یعنی هر متن و تصاویر که میخواهید بیننده را مشاهده کنید) با برچسبهای <body> </ body>.
آگهی
روش سه چهارم:
درک با CSS
1
از CSS برای اعمال سبک به اسناد HTML خود استفاده کنید. CSS یک زبان شی گرا است که به شما اجازه می دهد تا عناصر طراحی و سبک مختلف خود را به صفحه وب خود اعمال کنید. به عنوان مثال، اگر شما می خواهید به صورت انتخابی فونت خاص یا رنگ متن را به برخی از عناصر متن در صفحه خود اعمال کنید، می توانید برای انجام این کار یک فایل CSS ایجاد کنید. سپس شما می توانید فایل CSS را به سند HTML خود اضافه کنید هر کجا که دوست دارید. [11]
به عنوان مثال، اگر شما می خواستید یک فایل CSS برای تبدیل تمام عناصر پاراگراف در سند HTML خود سبز، شما می توانید یک فایل CSS حاوی خطوط ایجاد کنید:
پ {
رنگ: سبز؛
}
سپس فایل را با یک نام مانند style.css ذخیره کنید.
برای اعمال شیوه نامه به سند HTML شما، آن را به عنوان یک عنصر لینک خالی در برچسب <head> </ head> وارد کنید. به عنوان مثال: <head> <link href = "style / style.css" rel = "stylesheet" type = "text / css"> </ head>
تصویر با عنوان Learn Web Design Step 12
2
با عناصر مجموعه قوانین CSS آشنا شوید. قطعه جداگانه ای از کد CSS به عنوان مجموعه ای از قوانین نامیده می شود. مجموعه ای از قوانین حاوی عناصر مختلفی است که تعریف کد شما را می خواهند. اینها عبارتند از: [12]
انتخابگر، که عنصر HTML را که می خواهید سبک آن را تعیین کنید. برای مثال، اگر بخواهید قاعده خود را برای عنصر پاراگراف تأثیر بگذارد، می توانید مقررات خود را با حرف "p" شروع کنید.
این اعلامیه که ویژگی هایی را که می خواهید سبک (مانند رنگ فونت) را مشخص کند تعریف می کند. این اعلامیه درون شاخه های درهم و برهم قرار می گیرد {}.
ملک که خاصیت عنصر HTML را که می خواهید سبک کنید مشخص می کند. مثلا در تگ <p> </ p> می توانید مشخص کنید که میخواهید رنگ متن را سبک کنید.
مقدار ملک به طور خاص مشخص می کند چگونه می خواهید اموال را تغییر دهید (به عنوان مثال، اگر اموال رنگ فونت باشد، ارزش ملک "سبز" خواهد بود).
شما می توانید چندین ویژگی مختلف را در یک اعلامیه واحد تغییر دهید.
3
CSS را به متن خود اعمال کنید تا ظاهر تایپیش را خوب کنید. CSS برای اعمال جلوه های گوناگون به متن شما مفید است بدون نیاز به هر کدام از ویژگی ها در HTML کد گذاری کنید. آزمایش با تغییر خواص مختلف خواص در CSS، از جمله: [13]
رنگ فونت
اندازه فونت
خانواده فونت (به عنوان مثال، طیف وسیعی از فونتهایی که میخواهید در متن خود استفاده کنید)
تراز متن
ارتفاع خط
فاصله بین حروف
4
آزمایش با جعبه و دیگر ابزار طرح CSS. CSS همچنین برای اضافه کردن عناصر بصری جذاب به صفحه شما مفید است، مانند جعبه متن و جداول. علاوه بر این، می توانید از آن برای تغییر طرح کلی صفحه خود استفاده کنید و تعریف کنید که عناصر مختلف نسبت به یکدیگر متفاوت هستند. [14]
به عنوان مثال، شما می توانید ویژگی هایی مانند عرض و رنگ پس زمینه یک عنصر را تعریف کنید، یک مرز اضافه کنید یا حاشیه هایی ایجاد کنید که بین عناصر مختلف در صفحه ایجاد می شود.
آگهی
روش چهارم چهار:
کار با زبان های طراحی دیگر
ویرایش کنید
1
اگر میخواهید عناصر تعاملی را به آن اضافه کنید، یاد بگیریدصفحات شما جاوا اسکریپت یک زبان عالی است برای یادگیری اگر شما علاقه مند به اضافه کردن ویژگی های پیشرفته تر به وب سایت های خود، مانند انیمیشن ها و پنجره ها است. یک دوره یا برای آموزش های آنلاین در مورد نحوه کد گذاری در جاوا اسکریپت و دنبال کردن آن عناصر کد شده در صفحات وب خود با استفاده از HTML نگاه کنید.
قبل از اینکه بتوانید جاوااسکریپت را راحت کنید، باید با اصول صفحه بندی ساختمان در HTML و CSS آشنا شوید.
2
خودتان را با jQuery آشنا کنید تا برنامه جاوا اسکریپت را سادهتر کنید. jQuery یک کتابخانه جاوا اسکریپت است که می تواند برنامه نویسی جاوا را ساده کرده و به شما اجازه می دهد تا به انواع مختلفی از عناصر جاوا اسکریپت دسترسی پیدا کنید. jQuery یک ابزار عالی است اگر شما در حال حاضر با اصول اسکریپت جاوا اسکریپت آشنا هستید.
شما می توانید به کتابخانه جی کوئری و بسیاری از منابع با ارزش دیگر از طریق jQuery.org، وب سایت بنیاد جی کوئری دسترسی پیدا کنید.
3
مطالعه زبان های سمت سرور اگر شما علاقه مند به توسعه عقب پایان است. در حالی که HTML، CSS و جاوا اسکریپت برای طراحان وب مناسب است که بر روی آنچه کاربران می بینند و در وب سایت انجام می دهند، زبان های سمت سرور مفید هستند، اگر بیشتر علاقه مند به کار پشت صحنه هستید. اگر میخواهید در مورد توسعه پایانی یاد بگیریم، تمرکز بر زبانهای یادگیری مانند پایتون، پی اچ پی و روبی روی ریلها
این زبان ها برای مدیریت و پردازش اطلاعاتی که کاربر نمی بیند مفید است. به عنوان مثال، PHP می تواند برای ایجاد ابزار ایجاد رمز عبور امن در وب سایت هایی که نیاز به ورود به سیستم دارند.
