قالب برای دانلود. قالب های ساده HTML Snow - قالب رایگان HTML5 و CSS3 صفحه فرود

تمام قالب های ارائه شده برای سایت آنها بر اساس نسخه های مدرن HTML5 و CSS3 ساخته شده اند. علاوه بر این، نویسندگان از ویژگی‌های مرسوم مانند طراحی مسطح، طراحی واکنش‌گرا، طرح‌بندی تطبیقی، اسلایدرهای جی کوئری، انیمیشن‌های CSS3 و غیره استفاده می‌کنند. یعنی اگر به دنبال یک قالب سایت موبایل هستید، می‌توانید هر یک از موارد ارائه شده را انتخاب کنید. قالب های زیبای html5 2017، اگرچه رایگان است، اما به سطح حق بیمه نگاه کنید.

در اینجا بیش از 50 قالب وب سایت پاسخگو HTML5 و CSS3 با کیفیت بالا را خواهید یافت که هم برای وب سایت های جدید و هم برای طراحی مجدد وب سایت های موجود قابل استفاده هستند. قالب های وب سایت html5 شیک- این همون چیزیه که بهش نیاز داری!

به روز رسانی 03/12/2019: از زمانی که مقاله 2 سال پیش نوشته شده است، بسیاری از لینک ها خراب شده اند. یا صاحبان قالب ادغام شدند یا وضعیت قالب ها از رایگان به پولی تغییر کرد یا بیگانگان همه چیز را خراب کردند. یک خواهش از شما خوانندگان عزیز، اگر چنین لینکی را یافتید، آن را در نظرات بریزید، آن را اصلاح خواهم کرد.

1. Snow - قالب رایگان HTML5 و CSS3 صفحه فرود

قالب html5 css3 صفحه فرود Snow بر اساس چارچوب بوت استرپ ساخته شده است. قالب بسیار شیک و جالبی است! یک پس زمینه ثابت و یک Jumbotron عظیم چیزی است که محتوای اصلی سایت را نشان می دهد. و مهمترین چیز در صفحه فرود چیست؟ درست است، فراخوانی برای اقدام. به طور طبیعی، این قالب به طور کامل برای دستگاه های تلفن همراه سازگار است. حتی می توانید از آن به عنوان پایه ای برای قالب های خود استفاده کنید.

2. سیما - قالب وب سایت تجاری شیک

این قالب html5 css3 نیز بر روی چارچوب بوت استرپ ساخته شده است. می توانید از این الگو برای ایجاد یک سایت منحصر به فرد با نمونه کارها، تیم خود، قیمت ها، نظرات و هر چیز دیگری که مورد نیاز است استفاده کنید. به عنوان مثال، این الگو برای یک وب سایت خدمات نظافتی عالی است. انیمیشن این قالب روان و موثر است، فونت ها تمیز و خوانا هستند. فقط قالب کامل!

3. سفید یک قالب یک صفحه ای عالی است!

یکی از ویژگی های متمایز قالب وب سایت White دو گزینه پس زمینه در بالا است. انتخاب شما از اسلایدر تصویر یا پس‌زمینه ویدیو. قالب بسیار با کیفیت و دیدنی برای سایت!

4. Platz - قالب رایگان HTML5 Grid Website

یک الگوی وب سایت مدرن و از نظر بصری جذاب که حول یک شبکه طراحی شده است (در مورد شبکه بیشتر بخوانید). طراحی قالب زیبا و واکنش گرا برای وبلاگ یا وب سایت.

5. Mart eCommerce - قالب زیبای وب سایت تجارت الکترونیک HTML5 و CSS3

طراحی جدید و شیک قالب وب سایت برای انواع وب سایت های مد فروش کفش، لباس، ساعت، اکسسوری، لباس ورزشی و غیره بهترین است. این قالب دارای یک فایل PSD است که می توانید آن را مطابق با نیاز خود تنظیم کنید.

6. Nava - یک قالب تماشایی HTML5 و CSS3 برای وب سایت های خلاق

Nava یک قالب وب سایت مدرن HTML5 است که در درجه اول توسط متخصصان خلاقی که می خواهند کار خود را با شکوه تمام به نمایش بگذارند استفاده می شود. تغییرات زیادی در تنظیمات قالب به شما این امکان را می دهد که سایت خود را منحصر به فرد کنید. قالب وب سایت سبک، زیبا و واکنش گرا.

7. Box Portfolio - قالب وب سایت خلاقانه منحصر به فرد HTML5 و CSS3

قالب وب سایت Box Portfolio دارای طراحی مینیمالیستی تمیز و مدرن است. ایده آل برای حرفه ای ها که می خواهند به طور موثر کار خود را به صورت آنلاین نشان دهند. همانطور که از نام آن پیداست، قالب سایت به طور ایده آل برای نمونه کارها طراحی شده است.

8. Mountain King - قالب وب سایت محبوب و کاربردی HTML5 و CSS3

موضوع کوه در طراحی وب سایت اخیرا بسیار محبوب شده است. قالب وب سایت Mountain King نیز از این قاعده مستثنی نیست. شامل 336 آیکون برداری از تایپیکانز. به علاوه انیمیشن CSS3 عالی. این قالب برای سایت های مسافرتی و نمونه کارها مناسب است.

9. Beauty Spa - قالب وب سایت جالب HTML5 و CSS3 برای سالن های اسپا

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

10. Bent - صفحه فرود شیک و موثر برای وب سایت های HTML5 و CSS3

Bent یک قالب وب سایت رایگان html5 و css3 است. طراحی پاسخگو، انیمیشن CSS3، پیمایش اختلاف منظر، ناوبری قابل تنظیم و سایر موارد. این یک طراحی قالب تمیز برای سایت هایی است که می خواهند از طراحی متعادلی استفاده کنند تا اطمینان حاصل شود که بازدیدکنندگان از ظاهر و احساس سایت لذت می برند و در عین حال محتوای اصلی را به وضوح می بینند.

11. مثلث - قالب HTML5 و CSS3 چند منظوره پاسخگو رایگان

Triangle یک قالب وب سایت خلاقانه انحصاری HTML5 و CSS3 است، به ویژه برای کسانی که می خواهند طراحی جالب خود را بدون بدتر کردن آن تضعیف کنند. این قالب دارای بیش از 40 صفحه از پیش طراحی شده است که به شما امکان می دهد سایت خود را مطابق با محتوای دلخواه خود سفارشی کنید.

12. Future Imperfect - یک قالب وب سایت درخشان برای افراد خلاق!

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

13. Bodo یک قالب وب سایت شخصی عالی است

Bodo یک قالب وب سایت زیبا با HTML5 و CSS3 است که برای یک وب سایت شخصی مناسب است. به خصوص برای سازماندهی پورتفولیو. تایپوگرافی تمیز و واضح، نوار لغزنده چرخ و فلک، پنجره های بازشو برای نمایش کارهای شما و موارد دیگر.

14. لنز قالب وب سایت HTML5 عالی برای عکاسان است

عکاسان همیشه به دنبال الگوی مناسب برای سایت خود هستند تا کار خود را با شکوه، به‌طور دیدنی و مهمتر از همه - بزرگ به نمایش بگذارند! قالب سایت کمیاب این الزامات را برآورده می کند. لنز یکی از این الگوهای وب سایت عکاسان است.

15. Spectral - قالب وب سایت دست ساز منحصر به فرد HTML5 و CSS3

اگر به دنبال قالب های رایگان وب سایت خودکار، سپس Spectral راه حل ایده آل خواهد بود. در اینجا یک طراحی قالب وب سایت کاملاً منحصر به فرد دست ساز یک صفحه است. طرح به دلخواه شما قابل تغییر است. با استفاده از این الگو، می توانید یک سایت خیره کننده کاملاً در هر موضوعی ایجاد کنید، خواه یک وبلاگ مسافرتی چشمگیر یا گالری عکس، یک سایت خودرو یا یک ارائه دهنده میزبانی وب باشد.

16. Oxygen - One Page HTML5 & CSS3 Website Template

Oxygen یک قالب وب سایت تجاری راحت و منحصر به فرد است. طراحی مسطح مدرن، چیدمان پاسخگو. به عنوان مثال، این قالب برای سایتی در مورد برنامه های کاربردی تلفن همراه یا فناوری تلفن همراه ایده آل است.

17. Mobirise Bootstrap - قالب وب سایت رایگان HTML5 و CSS3

اگر به دنبال یک قالب وب سایت رایگان هستید، Mobirise Bootstrap مکان مناسبی برای شروع است. این یک قالب چند منظوره با افزونه های زیادی است. سه طرح از پیش ساخته شده صفحه اصلی و وبلاگ به شما در این امر کمک می کند. Mobirise Bootstrap همچنین 100% SEO بهینه شده است و به تمام اندازه های صفحه نمایش پاسخگو است.

18. La Casa - قالب وب سایت املاک و مستغلات زیبا و رایگان HTML5

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

19. Drifolio - قالب وب سایت نمونه کارها HTML5 شیک

قالب وب سایت نمونه کارها HTML5 و CSS3 شیک و متحرک. طراحی تمیز، تایپوگرافی عالی، آیکون های زیبا و موارد دیگر.

20. Pluton - قالب وب سایت تک صفحه ای روشن و شیک

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

21. SquadFree - قالب وب سایت تک صفحه ای حرفه ای HTML5

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

22. Sublime - قالب وب سایت HTML5 و CSS3 مسحورکننده

Sublime یک قالب وب سایت HTML5 و CSS3 تمیز و فوق العاده زیبا است که برای یک استارتاپ، آژانس خلاق یا سایت نمونه کار مناسب است. طراحی ریسپانسیو و دو گزینه صفحه برای انتخاب.

23. Timber - قالب وب سایت غیر معمول و زیبا HTML5 و CSS3

Timber یک تم قالب وب سایت تازه، شیک و غیرمعمول است. مورب ویژگی اصلی طراحی این قالب است. این قالب برای یک وب سایت تجاری یا نمونه کار مناسب است. یک گالری داخلی، نقشه و اطلاعات تماس وجود دارد که می توانید به راحتی آن را برای خود شخصی سازی کنید.

24. E-Shopper - بهترین قالب وب سایت تجارت الکترونیک

E-Shopper یک قالب سایت تجارت الکترونیک عالی است. ساخته شده در بالای بوت استرپ با مجموعه ای از ویژگی های شگفت انگیز برای یک فروشگاه آنلاین کامل و کارآمد.

25. Magnetic - قالب وب سایت عکس رایگان HTML5 و CSS3

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

26. Mabur Portfolio - قالب وب سایت مینیمالیست زیبا HTML5 و CSS3

طراحی مسطح این قالب وب سایت مینیمالیستی برای ایجاد یک نمونه کار عالی است. در قالب، تمام جزئیات کاملا تایید شده است!

27. Bootstrap مدرن HTML5 - قالب رایگان یک صفحه وب سایت

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

28. Infusion - قالب وب سایت تک صفحه ای شیک در HTML5 و CSS3

Infusion یک نمونه عالی از یک قالب وب سایت HTML5 و CSS3 است که به طور خاص برای ایجاد یک نمونه کار تجاری طراحی شده است. عملکرد غنی این قالب به شما این امکان را می دهد که به طور موثر با مشتریان کار کنید و مشتریان جدید را جذب کنید.

29. Yebo - قالب وب سایت شرکتی در HTML5 و CSS3

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

30. Twenty - قالب وب سایت تماشایی HTML5 و CSS3 Parallax

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

31. Urbanic - قالب وب سایت بوت استرپ عالی HTML5 و CSS3

Urbanic یک قالب وب سایت جدید و جالب HTML5 و CSS3 است که بر روی موتور بوت استرپ ساخته شده است. ایده آل برای شروع ساخت سایت خود بلافاصله بدون دردسر زیاد. این قالب کاملاً با هر اندازه صفحه نمایش سازگار است.

32. طراحی ویترین - قالب وب سایت نمونه کارها HTML5

قالب وب سایت HTML5 هماهنگ و موثر برای سازماندهی نمونه کارها شما. این قالب کاملاً برای دستگاه های تلفن همراه سازگار است، که انجام آن برای سایت هایی با این فرمت بسیار دشوار است.

33. Mamba One - قالب وب سایت HTML5 و CSS3 ساده و شیک

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

34. KreativePixel - قالب وب سایت رایگان برای عکاسان

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

35. برنامه پاسخگوی آماده رتینا - الگوی صفحه فرود HTML5 و CSS3 رایگان

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

36. Brushed - قالب وب سایت پاسخگو HTML5 و CSS3 با بوت استرپ

Brushed یک قالب وب سایت پاسخگو و رایگان HTML5 و CSS3 بر اساس موتور بوت استرپ است. همچنین برای نمایشگرهای رتینا (iPhone، iPad، iPod Touch و MacBook Pro Retina) بهینه شده است.

37. الگوی وب سایت Big Picture HTML5 و CSS3

به Big Picture خوش آمدید! این قالب وب سایت واکنش گرا HTML5 برای همه افراد خلاقی که چیزی برای نشان دادن دارند و آن را بزرگ و دیدنی در وب سایت خود نشان می دهند عالی است. علاوه بر این، این قالب از انیمیشن های عالی استفاده می کرد.

38. Tesselatte - قالب رایگان HTML5 و CSS3 پاسخگو

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

39. سرریز - قالب وب سایت منحصر به فرد HTML5 و CSS3

این قالب منحصر به فرد وب سایت خالص HTML5 و CSS3 برای هر فرد خلاقی عالی است. کاملا ریسپانسیو و کاملا رایگان است.

40. Runkeeper - قالب وب سایت واکنش گرا و بسیار زیبا

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

41. سبک شبکه پاسخگو شیطان پین بال - قالب وب سایت بزرگ مبتنی بر شبکه

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

42. Prologue - Pure HTML5 & CSS3 Single Page Website Template

این قالب وب سایت HTML5 و CSS3 تمیز، ساده و واضح برای ساخت یک صفحه فرود عالی است. طراحی مینیمال توجه را از چیز اصلی منحرف نمی کند. نوار پیمایش کناری تماشایی و خطوط تمیز صفحه فقط ترکیب کاملی هستند!

43. Helios - قالب وب سایت مدرن با HTML5 خالص و CSS3

یک قالب وب سایت دیگر به سبک مینیمالیسم و فرم های تمیز. به طور ویژه برای استفاده از صفحه نمایش بزرگ طراحی شده است، اما همچنین کاملاً با صفحه نمایش کوچک دستگاه های تلفن همراه سازگار است.

44. Telephasic - قالب وب سایت HTML5 رایگان و پاسخگو

این قالب وب سایت مدرن، واکنش گرا و کاملا رایگان یک مزیت بزرگ دارد - ساده و مختصر است، اما این دقیقاً همان چیزی است که بسیاری فاقد آن هستند.

45. Strongly Typed - قالب وب سایت نیمه یکپارچهسازی با سیستمعامل بسیار زیبا

قالب وب سایت جدید با سبک مینیمالیست نیمه یکپارچهسازی با سیستمعامل. فقط یکپارچهسازی با سیستمعامل دیگر در مد نیست، اما اشاره ای جزئی به آن بسیار خوش آمدید. این قالب وب‌سایت کاملاً ریسپانسیو است و بر اساس HTML5 و CSS3 خالص ساخته شده است و شامل تمام عناصر اولیه صفحه است. قالب Strongly Typed برای وب سایت های خلاق ایده آل است. به عنوان مثال، برای یک وب سایت در مورد دکوراسیون خانه.

46. Striped - قالب وب سایت HTML5 و CSS3 تمیز، زیبا و کاربردی

قالب جدید وب سایت جدید و تمیز، زیبا و کاربردی در HTML5 و CSS3. همه عناصر صفحه لازم را در زرادخانه خود دارد، از جمله نقل قول های تزئین شده، جداول و لیست ها، و همچنین یک نوار کناری سازگار (در سمت راست یا چپ - به دلخواه).

47. Parallelism - قالب وب سایت غیر معمول و شیک در HTML5 و CSS3

Parallelism یک قالب وب سایت شیک برای سازماندهی نمونه کارها یا عکس ها است. غیر معمول بودن آن این است که پیمایش در اینجا به طور معمول عمودی نیست، بلکه افقی است. این به سایت جذابیت و به یاد ماندنی خاصی می بخشد.

48. Miniport - قالب وب سایت HTML5 مینیمالیست کاملاً پاسخگو

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

49. Verti - قالب وب سایت HTML5 پاسخگو جادار و رایگان

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

50. ZeroFour - قالب وب سایت HTML5 و CSS3 چشمگیر و شیک

و آخرین مورد در لیست، اما نه آخرین از نظر کیفیت و نمایش خارجی، قالب وب سایت ZeroFour است. طراحی شیک، منوی بسیار زیبا، فرم ها و دکمه های کاملاً تنظیم شده، آیکون های زیبا و موارد دیگر. و همه اینها کاملا رایگان است!

امیدوارم در بین این قالب های وب سایت فوق العاده HTML5 و CSS3 چیزی مناسب پیدا کرده باشید. موفق باشید!

آن را نشانک کنید تا بتوانید بعداً سریع آن را پیدا کنید.

PS: اگر نمی توانید در مورد انتخابی تصمیم بگیرید، مقاله "نمی دانم چه می خواهم" را بخوانید. مفید خواهد بود.

گاهی اوقات، در جستجوی ایده، از طریق کاتالوگ قالب های وب سایت نگاه می کنم. در این مقاله به شما خواهم گفت که چیست قالب های CSSبرای سایتی که بهتر است آنها را جستجو کنید.

قالب سایت چیست؟

منظور من از قالب در این مقاله یک طرح بندی چیدمان شده است، یعنی مجموعه ای از فایل های HTML و CSS، تصاویر و احتمالاً اسکریپت ها.

یک الگو با یک طرح PSD (غیر طرح، به عنوان مثال یک تصویر)، و یک موضوع طراحی (که اغلب در حال حاضر یک محصول نهایی است، کاملا آماده برای نصب در یک CMS) متفاوت است. یک الگو یک محصول میانی بین یک طرح PSD و یک موضوع طراحی است.

چرا به قالب های CSS آماده نیاز داریم؟

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

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

قالب‌های رایگان معمولاً تحت مجوز Creative Commons مجوز دارند، بنابراین در استفاده از آن، تغییر آن و سپس توزیع مجدد آن مشکلی نخواهید داشت.

از کجا می توان قالب های CSS را پیدا کرد؟

من معمولا به دنبال قالب های رایگان در سایت های زیر می گردم:

http://www.freecss.in - حدود 170 الگو، برای هر کدام تاریخ اضافه شده به کاتالوگ نمایش داده می شود
http://templated.org یک سیستم جستجو و مرتب‌سازی بسیار راحت است: بر اساس رنگ، مجوز. حدود 500 قالب که هر کدام تعداد دانلودها و تاریخ اضافه شدن را نشان می دهد

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

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

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

قالب های رایگان وب سایت HTML را دانلود کنید و پروژه های خود را در کمترین زمان ایجاد کنید.

و ما یک قالب وب سایت بلوک خواهیم نوشت.

در این مقاله، من نه تنها کد قالب سایت بلوک را به شما می‌دهم، بلکه جزئیات را نیز به شما می‌گویم و نشان می‌دهم که چه چیزی و چگونه می‌توانید آن را تغییر دهید و فایل‌ها را کجا قرار دهید.

بنابراین، این سایت است.

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

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

مطالعه دقیق مقاله و مطالب موجود در پیوندها و پیروی مداوم دستورالعمل های من به همان اندازه زمان می برد.

مسدود کردن کد سایت

/* طراحی ظاهر */

http://trueimages.ru/img/81/90/b1718f15.png">

کار ما

سلام به مدیران عزیز آینده

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

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

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

http://trueimages.ru/img/0d/64/07a18f15.png">

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

من مطمئن هستم که شما حتی بهتر عمل خواهید کرد، و مطمئنا، در
چندین برابر سریعتر از من

این یک کد سایت ثابت است، به این معنی که در صفحه‌هایی با پسوندهای مختلف، در همان اندازه باقی می‌ماند.

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

حالا بیایید به مثال خود برگردیم.

قبل از شروع کار با کد، باید مکانی را ایجاد کنید که سایت قبل از قرار دادن آن در اینترنت در آن قرار گیرد.

برای ویرایش این کد به یک ویرایشگر HTML نیاز دارید. هرکی داره خیلی خوبه هرکی نداره پیشنهاد میکنم.

نحوه شروع کار در آن، یعنی ایجاد یک فایل، خواندن.

وقتی ویرایشگر نصب شد، آن را باز کنید و خطوط 1 - 6 را از کد بالا کپی کنید و در قسمت ویرایشگر و سپس خطوط 118 - 153 و همچنین در ویرایشگر پیست کنید.

بنابراین، قسمت HTML کد را انتخاب کرده ایم که از آن یک فایل HTML ایجاد می کنیم. شماره گذاری خطوط من را حذف کنید، یک فایل ایجاد کنید، نام آن را index.html بگذارید و آن را در فهرست سایت ذخیره کنید.

دایرکتوری باید به شکل زیر باشد:

مرحله بعدی ایجاد فایل style.css است که حاوی شیوه نامه است.

اینجا توجه! فایل style.css در آینده به تمام صفحات سایت متصل خواهد شد، بنابراین باید استایل هایی را که اساس صفحه را تشکیل می دهند در آن جمع آوری کنید.

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

در آینده اگر بخواهید در طراحی سایت تغییراتی ایجاد کنید کافی است در فایل style.css انجام دهید و در تمام صفحات نمایش داده شود.

بنابراین، در پوشه سایت، پوشه دیگری ایجاد می کنیم و آن را css می نامیم.

سپس به ویرایشگر باز می گردیم، یک سند جدید (اولین نماد پانل) را باز می کنیم، خطوط 8 - 80 و 90 - 116 را کپی و در آن قرار می دهیم.

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

شماره گذاری من را حذف کنید و این سند جدید را در یک پوشه css جدید ایجاد شده به نام style.css ذخیره کنید.

این کار به صورت زیر انجام می شود: در تگ ، می تواند بین برچسب ها باشد و ، تگ درج شده است <link>، با ویژگی هایی که مکان و مقصد css را مشخص می کند. <link href ="css/style.css " type ="text/css " rel ="stylesheet "> بعد از تگ <link>، بیایید سبک هایی را که تصاویر موجود در متن مقاله را مشخص می کنند به هم وصل کنیم. (خطوط 81 - 88). شماره گذاری و نظرات من را حذف می کنیم، زیرا نظرات css در فایل html کار نمی کنند و حتی برعکس، می توانند همه چیز را خراب کنند. <style "> .ترک کرد( شناور به سمت چپ ؛ حاشیه : 30px 7px 7px 7px ; } .درست( شناور : راست ; حاشیه : 7px 0 7px 7px ; } </style > پس از هر دستکاری با کد در ویرایشگر، فراموش نکنید که تغییرات را ذخیره کنید (سومین نماد از سمت چپ). در این حالت، نماد فایل باید از قرمز به آبی تبدیل شود. مشاهده در ویرایشگر: <img src='https://i1.wp.com/starper55plys.ru/wp-content/uploads/2013/08/4.png' align="center" width="100%" loading=lazy loading=lazy> مرحله بعدی پرداختن به تصاویر است. تصاویر من از طریق سرویس trueimages بارگذاری می شوند، فقط برای اینکه صفحه در مرورگر شما باز شود. شما همچنین به تصاویر خود نیاز دارید، و آنها باید ساخته شوند یا در اینترنت پیدا شوند. می توانید آن را در همان مقاله ببینید. اگر فتوشاپ دارید، پس بهتر است تمام تصاویر موجود در آن را انجام دهید. تمام تصاویر ساخته شده یا یافت شده باید در پوشه تصاویر دایرکتوری سایت قرار گیرند. اولین قدم تغییر هدر سایت است. برای این کار در فایل index.html تگ را حذف کنید <img>با عکس من (خط 124) <img src='https://i1.wp.com/starper55plys.ru/wp-content/uploads/2013/08/5.png' align="center" width="100%" loading=lazy loading=lazy> سپس در فایل style.css، انتخابگر img را حذف کنید. background-image : url(../images/schapka.png) ; در ویرایشگر به این شکل خواهد بود <img src='https://i0.wp.com/starper55plys.ru/wp-content/uploads/2013/08/6.png' align="center" width="100%" loading=lazy loading=lazy> نقطه کولون در ابتدای آدرس تصویر زمانی قرار می گیرد که انتخابگر در یک فایل css جداگانه باشد. اگر استایل ها در فایل html گنجانده شده باشد، نقطه کولون در ابتدای آدرس قرار نمی گیرد. لطفا توجه داشته باشید که اندازه تصویر نباید از اندازه بلوک هدر بیشتر شود. به این صورت تعریف شده است: روی فایل تصویر کلیک راست کرده، در منوی ظاهر شده گزینه Properties را انتخاب کرده و سپس، Details، ابعاد در آنجا نشان داده می شود. حال اگر به منوی "راه اندازی" بروید و index.html را باز کنید، صفحه ای با تصویر شما در هدر سایت باز می شود. بقیه عکس ها را تغییر دهید (خطوط 128,129,130,135,141) بر خلاف عکس قبلی فقط آدرس ها را باید تغییر داد. آدرس تصاویر من را حذف کنید و آدرس شما را درج کنید. پس از آن، آنها چیزی شبیه به این را به دست خواهند آورد. من نام تصویر i2.png را دارم و شما هم نام خود را خواهید داشت. <img src='/shablon-dlya-skachivaniya-prostye-html-shablony-snow---besplatnyi-shablon-lendinga.html' loading=lazy loading=lazy>کارمندان ما خوب، باقی مانده است که سرفصل های خود را بنویسید، مرتب کنید و آنها را به جایی که نیاز دارید منتقل کنید (نحوه انجام این کار در نظرات به کد گفته شده است)، متن خود را بنویسید و صفحه اصلی سایت شما آماده است! اگر می خواهید موقعیت نوار کناری را تغییر دهید یا دو ستون کناری ایجاد کنید، کد چنین قالب هایی در مقاله ارائه شده است. پس از بررسی آنها می توانید تغییرات کوچکی در کد ارائه شده در این مقاله ایجاد کرده و به نتیجه دلخواه برسید. بنابراین صفحه اصلی سایت آماده است، می توانید شروع به ایجاد سرفصل ها و صفحات کنید. من به شما نشان خواهم داد که چگونه یک روبریک ایجاد می شود و یک صفحه در آن وجود دارد و بقیه را خودتان به همین ترتیب انجام خواهید داد. در دایرکتوری سایت یک پوشه محتوا داریم. آن را باز کنید و یک پوشه دیگر ایجاد کنید - rubrica1 (البته شما نام خود را خواهید داشت). در این پوشه، دو پوشه دیگر ایجاد کنید - css و images. در پوشه css فایل style.css را قرار می دهیم و در پوشه images اولاً تصاویر اصلی که باید در هر صفحه باشد (در مورد من نشانگر سرصفحه و منوی سایت است) و ثانیاً تمام تصاویری که مقالات این قسمت را طراحی می کنید را در آنجا قرار می دهید. آیا نیاز فوری دارید که یک وب سایت فقط با استفاده از HTML بسازید و آن را در اینترنت قرار دهید؟ سپس کپی کردن کد تمام شده و پیروی از دستورالعمل های من برای شما دشوار نخواهد بود. درست است، ساختن یک منبع کامل با استفاده از یک زبان برنامه نویسی دشوار است، اما در اینجا یک سایت کارت ویزیت چند صفحه ای وجود دارد، کاملا امکان پذیر است. اگر کسی دقیقاً این هدف را دارد و تمایلی به یادگیری زبان های دیگر ندارد، این مقاله برای اوست. به طور خلاصه، در یک نسخه خودنویس، بدون استفاده از CMS، هیچ چیز ساده تر نیست. و برای کسانی که به چیز خنک‌تری نیاز دارند، در انتهای مقاله پیوندهایی به مقالات با کد قالب بلوک با استفاده از CSS و کد سایت پویا با استفاده از PHP وجود دارد. ما یک سایت با html خالص درست در همین صفحه، به اصطلاح - سایتی در یک سایت، کاملاً کارآمد و آماده برای پر شدن از محتوا خواهیم ساخت. بیایید کل فرآیند را به سه قسمت تقسیم کنیم. 1. یک فهرست سایت در رایانه خود ایجاد کنید. 2. ایجاد سایت. 3. ترجمه سایت از شرکت ما به هاست یعنی به اینترنت. ایجاد دایرکتوری وب سایت در رایانه شما اولین نکته ساده ترین است. نحوه ایجاد دایرکتوری به وضوح در مقاله نشان داده شده است (همه پیوندهای این صفحه در یک پنجره جداگانه باز می شوند تا گم نشوند). و اینکه چه چیزی و در کدام پوشه قرار دهم، بعد از کد صفحه اصلی با جزئیات نشان خواهم داد تا از قبل چیزی برای رفتن به دایرکتوری وجود داشته باشد. سپس به دومین نکته، خلاقانه ترین، می رویم. <h3>یک قالب سایت ایجاد کنید</h3> برای ایجاد یک الگو، به یک ویرایشگر نیاز دارید که باید کد زیر را در آن قرار دهید. این می تواند یک Notepad ساده ویندوز یا هر ویرایشگر متن دیگری باشد. بیایید یک جدول HTML چند لایه را به عنوان پایه قالب در نظر بگیریم. پیش از این، قبل از ظهور CSS، همه سایت ها در جداول نوشته می شدند، اما اکنون طرح بندی بلاک ها محبوبیت بیشتری پیدا کرده است. اما حتی تاکنون، ساختار جدولی قدیمی نشده و با موفقیت اعمال شده است. به عنوان مثال، یک اسکریپت سرمایه گذاری CMS H با پیچیده ترین عملکرد، کاملاً بر اساس جداول. بنابراین، اینجا یک سایت با حداقل طراحی است. نحوه قالب بندی جداول در آینده با جزئیات بسیار در مقاله نشان داده شده است. <table border="1" rules="rows" r="" align="center" style="width:100%; border-radius:5px; margin-bottom:20px;"><tr><td bgcolor="e6e6fa"> <table border="1" bgcolor="#7FFFD4" height="90" cellpadding="" style="width:100%; border-radius:5px; background-image: url(https://starper55plys.ru/wp-content/uploads/2018/11/170.png); background-size: 100%; background-repeat: no-repeat;"><tr><th style="text-align:center;"> نام سایت (سازمان) <h3>توضیحات سایت</h3> </th> </tr></table><table border="1" bgcolor="e6e6fa" cellpadding="10" style="width:100%; border-radius:5px;"><tr><td rowspan="4" bgcolor="e6e6fa" style="width:80%">صفحه سلام به مدیران عزیز آینده من 55 سال سن دارم و خوشحالم که به وب سایتم خوش آمد می گویم. این سایت اولین سایتی است که خودم توسعه دادم و قبل از آن فقط به اینترنت دسترسی داشتم. چرا تصمیم گرفتم این کار را انجام دهم؟ برای آن 3 ماه، در حالی که من در ساخت سایت و ایجاد این منبع مهارت داشتم، معلوم شد که نویسندگان راهنمای ایجاد سایت، بسیاری از نکات ظریف را بدیهی می دانند و به آنها توجه نمی کنند. و برای من، با توجه به سن و عدم تجربه ام، درک این نکات ظریف آسان نبود، آنها بیشترین زمان را صرف کردند. </td> <td align="left" style="border-radius:5px; width:25%;"> <h3>منو</h3> </td> </tr><tr><td bgcolor="e6e6fa" align="center"> <h3>اطلاعات کلی</h3> متن اطلاعات عمومی </td> </tr></table></td> </tr></table> <!DOCTYPE html> <html lang ="ru "> <head > <meta charset ="utf-8 " /> <title >نام سایت

مرز = "1"
تراز "مرکز"
قوانین "ردیف"
style="width:60%;">