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

در همین راستا ابتدا به مفاهیم مقدماتی وب و اینترنت و سپس ترسیم یک نقشه راه برای پیگیری این مسیر از آغاز تا انتها خواهیم پرداخت که بدانیم در جال انجام چه کاری هستیم، در چه مسیری گام برمی‌داریم و به کدام سو خواهیم رفت. بدنه اصلی این کارگاه آموزشی را کدنویسی به زبان‌های نشانه گذاری HTML نسخه چهار و زبان سبک‌دهی CSS نسخه سه به عنوان استاداردهای پایه در تولید صفحات وب، تشکیل خواهند داد که در این مسیر به کلیه دستورات و تگ‌های کاربردی برای طراحی صفحات وب در قالب مثال‌های کاربردی و ارائه تمرین‌های پروژه محور اشاره خواهیم داشت. در واقع خروجی این دوره آموزشی چگونگی طراحی ساختار و سبک‌دهی (استایل) به صفحات استاتیک وب خواهد بود. برای آگاهی از تفاوت‌های صفحات استاتیک و داینامیک وب پیشنهاد می‌کنیم مقاله “انواع وب سایت‌ها” را در موج شکن دنبال نمایید. لازم به ذکر است که مباحث مربوط به HTML نسه پنج و CSS نسخه سه در کارگاه شماره سه مطرح خواهد شد.

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

• دانشجویان رشته مهندسی نرم افزار
• کارشناسان و متخصصین حوزه نرم افزار
• کلیه علاقه‌مندان به آشنایی با اصول طراحی صفحات وب

• آشنایی با مبانی اولیه اینترنت و کار با کامپیوتر

• توانایی تشریح مفاهیم وب
• توانایی ترسیم نقشه راه و آگاهی نسبت به مسیر طراحی و توسعه صفحات وب به صورت کامل
• توانایی کدنویسی صفحات وب به زبان HTML نسخه چهار، زبان XHTML نسخه یک و CSS نسخه دو
• توانایی طراحی یک صفحه استاندارد استاتیک وب
• توانایی تدریس اصول و پیاده‌سازی صفحات وب

مفاهیم و اصول طراحی وب

• چیستی شبکه اینترنت
• چیستی وب و تاریخچه پیدایش آن
• تفاوت وب و اینترنت
• پروتکل‌های وب و اینترنت
• نحوه عملکرد مرورگرهای وب

• انواع وب سایت‌ها از دیدگاه کاربرد
• انواع وب سایت‌ها از دیدگاه تکنیکی
• پروسه طراحی و توسعه صفحات وب (طرح چشم انداز بلند مدت
• آشنایی با مفاهیم میزبانی وب (هاستینگ) و دامنه‌ها
• روان‌شناسی رنگ‌ها و طرح‌ها
• مباحث مربوط به فن بازار، درآمدزایی و متدهای تبلیغات

زبان نشانه گذاری ابرمتن HTML و XHTML

• چیستی و تاریخچه پیدایش آن
• نسخه‌های مختلف از ابتدا تا حال حاضر
• تفاوت‌های کدنویسی سمت کاربر و سرور
• ابزارهای لازم برای کدنویسی صفحات وب
• ملزومات پیاده‌سازی وب سایت به صورت لوکال و گلوبال

• ساختار صفحات HTML و تشریح قسمت‌های آن و اشاره به اهمیت تگ Head و Body
• طریقه ذخیره صفحات وب، تگ‌های متا و دیگر تگ‌های غیرمحتوایی (زبان و…)
• ساختار تگ‌ها (تهی و کامل) و صفات (تک مقدارپذیر، چند مقدار پذیر و بدون مقدار) و اشاره به سینتکس دستورات
• تگ‌های نوشتاری (عناوین، پاراگراف و…)
• تگ‌های قالب‌بندی نوشتار (فاصله‌گذاری، شکستن متن، خنثی‌سازی، کد، ضخیم‌سازی، بالانویس و پایین‌نویس، خط عرضی، چکیده‌نویسی و…)

• تگ‌های نقل و قول، استناد کننده‌ها و کدنویسی
• کامنت‌گذاری و تشریح اهداف (کد تمیز، کد مستند و خنثی‌سازی تگ‌ها و نه صفات)
• تگ‌های بدنه و گروه‌بندی (بلاک و اینلاین)
• صفات id و class و کاربرد آن‌ها در سبک‌دهی و…
• تگ لینک: ساختار و صفات، آدرس‌دهی نسبی و مطلق، رابطه والد – فرزندی، سودوکلاس‌ها در سبک‌دهی، ایمیل لینک، لینک‌های لنگری (موقعیتی) داخلی و خارجی

• تگ تصویر: ساختار و صفات، لینک‌دهی، نکات مربوط به بهینه‌سازی تصاویر، آدرس‌دهی نسبی و مطلق، تصاویر ایستا و متحرک، بررسی نقشه عکس‌ها
• تگ‌ ترسیمات جدول: ساختار و صفات، حاشیه، ادغام سطری و ستونی
• تگ‌های لیست (مرتب، غیرمرتب و موضوعی): ساختار و صفات و لیست‌های تودرتو
• اندازه‌های نسبی و مطلق
• انواع سیستم‌های رنگی و ابزارهای تولید آن‌ها

• لایه‌بندی صفحات (Lauouts) به صورت مطلق و نسبی
• تگ فریم‌بندی: ساختار و صفات
• فرم‌ها و انواع عناصر
• جاوااسکریپت و تاریخچه پیدایش آن
• تگ‌های Head

• تگ کدگذاری
• رمزگذاری آدرس
• نمایش کاراکترها و سمبل‌های ویژه
• تفاوت HTML و XHTML
• بررسی خطاها و اعتبارسنجی کدهای XHTML

شیوه‌نامه آبشاری یا زبان سبک‌دهی CSS

• چیستی و تاریخچه پیدایش
• نسخه‌های مختلف از ابتدا تا به امروز
• ساختار و سینتکس دستورات و کامنت‌نویسی در آن
• روش‌های استفاده از CSS در اسناد HTML به طریقه‌های Inline و Internal و External
• انواع سلکتورها (Tag Selectors, ID Selectors, Class Selectors, Grouping Selectors, Universal Selectors و Attribute Selectors)

• اولویت و تقدم در سبک‌دهی به عناصر
• زمینه یا بک‌گراند عناصر (رنگ و تصویر)
• سبک‌دهی به نوشتار
• سبک‌دهی به فونت‌ها
• سبک‌دهی به لینک‌ها

• سبک‌دهی به لیست‌ها
• سبک‌دهی به جداول
• مفهوم بنیادی مدل جعبه (Box Model) در CSS
• انواع حاشیه (Border, Outline, Margin, Padding)
• ابعاد و موقعیت‌دهی به عناصر

• شناورسازی عناصر (Float)
• ردیف کردن و چیدمان عناصر
• رابطه ارث‌بری و سلکتورهای تودرتو
• سودو کلاس‌ها یا کلاس‌های کاذب یا شبه کلاس‌ها
• سودو تگ‌ها یا تگ‌های کاذب یا شبه تگ‌ها

• نوار پیمایش یا ناوبری افقی
• گالری تصاویر
• تنظیمات شفافیت تصاویر
• اشیای کوچک و وضوح تصویر (Image Sprites)
• انواع رسانه‌ها