قالب‌های آماده · اپلیکیشن وب
سایت شرکتی ایمپلنت دندانی
معرفی و راهنمای ساختار وب‌سایت شرکت [نام شرکت] معرفی و راهنمای ساختار وب‌سایت شرکت [نام شرکت] این سند یک توضیح کلی درباره‌ی امکانات و بخش‌های وب‌سایت شرکتی [نام شرکت]، تولیدکننده…
<!DOCTYPE html> <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>معرفی و راهنمای ساختار وب‌سایت شرکت [نام شرکت]</title> <meta name="description" content="توضیح کلی امکانات و بخش‌های وب‌سایت شرکتی [نام شرکت]، تولیدکننده‌ی ایمپلنت دندانی و تجهیزات جراحی."> </head> <body> <header> <h1>معرفی و راهنمای ساختار وب‌سایت شرکت [نام شرکت]</h1> <p> این سند یک توضیح کلی درباره‌ی امکانات و بخش‌های وب‌سایت شرکتی [نام شرکت]، تولیدکننده‌ی ایمپلنت دندانی و تجهیزات جراحی است. هدف از این سایت، معرفی شرکت و محصولات، ارائه‌ی محتوای آموزشی و علمی، و ایجاد مسیر ساده برای تماس و درخواست مشاوره است. سایت کاملاً فارسی، راست‌چین (RTL) و ریسپانسیو طراحی شده است. </p> </header> <nav aria-label="فهرست مطالب این سند"> <h2>فهرست مطالب</h2> <ul> <li><a href="#identity">هویت بصری</a></li> <li><a href="#header-footer">هدر و فوتر مشترک</a></li> <li><a href="#pages">صفحات سایت</a></li> <li><a href="#technical">امکانات فنی و کیفیت</a></li> </ul> </nav> <main> <!-- ===================== هویت بصری ===================== --> <section id="identity"> <h2>هویت بصری</h2> <p> ظاهر سایت در همه‌ی صفحات یکدست و با حس پزشکی-شرکتی طراحی شده است؛ فضای سفید زیاد، کارت‌ها با گوشه‌های گرد ملایم و سایه‌های نرم. </p> <h3>رنگ‌ها</h3> <ul> <li>رنگ اصلی: سرمه‌ای</li> <li>رنگ اکشن (دکمه‌ها و لینک‌ها): آبی</li> <li>پس‌زمینه: سفید، با خاکستری روشن برای بخش‌های یکی‌درمیان</li> <li>رنگ متن: مشکی ملایم</li> </ul> <h3>تایپوگرافی</h3> <ul> <li>فونت فارسی یکان‌بخ یا وزیرمتن</li> <li>تیترها Bold و بدنه Regular</li> <li>اندازه‌بندی: تیتر هیرو، تیتر بخش، و بدنه با فاصله‌ی خطوط مناسب برای خوانایی</li> </ul> </section> <!-- ===================== هدر و فوتر ===================== --> <section id="header-footer"> <h2>هدر و فوتر مشترک</h2> <h3>هدر</h3> <p> هدر چسبان (sticky) است و هنگام اسکرول کوچک و سفید با سایه‌ی ملایم می‌شود. لوگو سمت راست قرار دارد و منوی افقی با زیرمنوهای کشویی نمایش داده می‌شود. در موبایل، منو به‌صورت همبرگری/آکاردئونی باز می‌شود. </p> <p>آیتم‌های منوی اصلی:</p> <ul> <li>درباره شرکت</li> <li>محصولات (دارای زیرمنو)</li> <li>مفهوم درمان (دارای زیرمنو)</li> <li>آموزش (دارای زیرمنو)</li> <li>تحقیق و بالینی (دارای زیرمنو)</li> <li>اخبار</li> <li>فرصت شغلی</li> <li>تماس</li> </ul> <h3>فوتر</h3> <p>فوتر چهارستونه با این بخش‌ها:</p> <ul> <li>توضیح کوتاه شرکت به‌همراه آدرس</li> <li>لینک‌های اطلاعات عمومی</li> <li>فرم عضویت در خبرنامه</li> <li>آیکون شبکه‌های اجتماعی: لینکدین، اینستاگرام، یوتیوب</li> </ul> <p> یک نوار پایین هم شامل کپی‌رایت و لینک‌های حریم خصوصی و کوکی است. </p> </section> <!-- ===================== صفحات سایت ===================== --> <section id="pages"> <h2>صفحات سایت</h2> <article> <h3>۱) صفحه‌ی اصلی</h3> <p>صفحه‌ی ورودی سایت که نمای کلی شرکت و محصولات را معرفی می‌کند و شامل بخش‌های زیر است:</p> <ul> <li>هیرو اسلایدر تمام‌صفحه با سه اسلاید، پخش خودکار، انتقال محو شونده و نقطه‌های ناوبری؛ هر اسلاید یک برچسب، تیتر، یک خط توضیح و دکمه‌ی «بیشتر بدانید» دارد.</li> <li>بخش معرفی کوتاه شرکت (متن و تصویر) با دکمه‌ی «درباره ما».</li> <li>گرید محصولات با پنج کارت تصویری و افکت هاور؛ کل کارت قابل کلیک است.</li> <li>بنر راهنمای الکترونیکی محصولات (eIFU) با دکمه.</li> <li>بخش دوره‌ها با سه کارت آیکون‌دار: تئوری-عملی، بالینی روی بیمار، و جراحی زنده.</li> <li>بخش تماس با یک فرم کوتاه.</li> </ul> </article> <article> <h3>۲) درباره شرکت</h3> <p>معرفی کامل شرکت با این محتواها:</p> <ul> <li>متن معرفی، تاریخچه، ماموریت و ارزش‌ها</li> <li>شبکه‌ی توزیع بین‌المللی (نقشه یا آمار تعداد کشورها/قاره‌ها)</li> <li>گالری تصاویر کارخانه و تیم</li> <li>نوار آمار: سال تأسیس، تعداد محصولات، تعداد دوره‌ها</li> </ul> </article> <article> <h3>۳) محصولات</h3> <p> یک صفحه‌ی لندینگ که همه‌ی دسته‌های محصول را به‌صورت کارت نشان می‌دهد و هر کارت به صفحه‌ی مستقل همان دسته لینک می‌شود. دسته‌ها عبارت‌اند از: </p> <ul> <li>ایمپلنت‌های دندانی</li> <li>کیت‌ها و ابزار جراحی</li> <li>راهکارهای دیجیتال</li> <li>جراحی هدایت‌شده با کامپیوتر (با زیرصفحه‌های راهنمای دیجیتال، کیت جراحی هدایت‌شده و گاید مخصوص)</li> <li>مرکز فرز</li> <li>ابزار فرز CAD-CAM</li> </ul> <p>هر صفحه‌ی دسته‌ی محصول شامل این بخش‌ها است:</p> <ul> <li>بنر بالای صفحه با عنوان دسته</li> <li>توضیح و گالری تصاویر محصول</li> <li>ویژگی‌ها و مزایا به‌صورت لیست آیکون‌دار</li> <li>جدول مشخصات فنی</li> <li>بخش CTA برای مشاوره و تماس</li> </ul> </article> <article> <h3>۴) مفهوم درمان</h3> <p>معرفی روش درمانی شاخص شرکت به‌همراه یک زیرصفحه‌ی «برنامه‌ی آموزش همتا (Tutoring)». محتوای این بخش:</p> <ul> <li>توضیح روش درمان</li> <li>مراحل درمان به‌صورت تایم‌لاین یا گام‌به‌گام</li> <li>ویدیو یا تصویر</li> <li>نمونه‌ی بالینی</li> <li>بخش CTA</li> </ul> </article> <article> <h3>۵) آموزش</h3> <p>مجموعه صفحات مربوط به مرکز آموزش شرکت:</p> <ul> <li>صفحه‌ی معرفی مرکز آموزش و امکانات آن</li> <li>صفحه‌ی تقویم و برنامه‌ی دوره‌ها (کارت دوره‌ها با تاریخ، عنوان، مدرس و دکمه‌ی ثبت‌نام)</li> <li>صفحه‌ی آرشیو دوره‌ها</li> </ul> </article> <article> <h3>۶) تحقیق و بالینی</h3> <p>بخش محتوای علمی و بالینی شامل:</p> <ul> <li>صفحه‌ی مقالات علمی (لیست مقالات با عنوان، نویسنده، سال و دکمه‌ی دانلود/مشاهده)</li> <li>صفحه‌ی ویدیوها (گالری ویدیویی با تصویر بندانگشتی و لایت‌باکس پخش)</li> </ul> </article> <article> <h3>۷) اخبار</h3> <p>دو صفحه برای بخش اخبار:</p> <ul> <li>صفحه‌ی لیست اخبار با کارت‌های خبر شامل تصویر، تاریخ و خلاصه</li> <li>صفحه‌ی تک‌خبر شامل تیتر، تاریخ، تصویر شاخص، متن کامل و اخبار مرتبط</li> </ul> </article> <article> <h3>۸) فرصت‌های شغلی</h3> <p>معرفی فرهنگ شرکت و مسیر استخدام:</p> <ul> <li>معرفی کوتاه فرهنگ سازمانی</li> <li>لیست موقعیت‌های شغلی باز</li> <li>فرم ارسال رزومه شامل نام، ایمیل، موقعیت موردنظر، آپلود فایل و پیام</li> </ul> </article> <article> <h3>۹) تماس</h3> <p>صفحه‌ی ارتباط با شرکت شامل:</p> <ul> <li>اطلاعات تماس (آدرس، تلفن، ایمیل)</li> <li>نقشه‌ی موقعیت</li> <li>فرم تماس کامل (نام، ایمیل، شماره، موضوع، پیام و چک‌باکس رضایت) با اعتبارسنجی و پیام موفقیت</li> </ul> </article> </section> <!-- ===================== امکانات فنی ===================== --> <section id="technical"> <h2>امکانات فنی و کیفیت</h2> <ul> <li>طراحی کاملاً ریسپانسیو برای موبایل، تبلت و دسکتاپ</li> <li>انیمیشن‌های ملایم هنگام اسکرول، اسکرول نرم و دکمه‌ی بازگشت به بالا</li> <li>بهینه‌سازی سئو: عنوان و توضیحات متای مجزای فارسی برای هر صفحه، ساختار هدینگ درست (یک H1 در هر صفحه)، متن جایگزین تصاویر و نشانی‌های خوانا</li> <li>سرعت بالا با بارگذاری تنبل و فشرده‌سازی تصاویر</li> <li>دسترسی‌پذیری پایه: کنتراست کافی، فوکوس قابل‌دیدن و ناوبری با کیبورد</li> </ul> </section> </main> <footer> <p>این سند فقط توضیح ساختار و امکانات وب‌سایت شرکت [نام شرکت] است و شامل استایل (CSS) نیست.</p> </footer> </body> </html>
1 استفاده