درس 3 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین
در درس دوم، ویرایشگر را آماده کردیم و تغییر یک فایل را در مرورگر دیدیم. امروز قدم بعدی را برمی داریم: به جای نگهداری همه چیز در یک فایل، یک پروژه کوچک با فایل HTML و فایل CSS جدا می سازیم. هدف این درس یادگیری همه دستورهای CSS نیست؛ باید بفهمید هر فایل کجاست، صفحه چگونه فایل ظاهر را پیدا می کند و هنگام جابه جایی پوشه ها چه چیزی ممکن است خراب شود.
پیش نیاز این تمرین، انجام درس 2: آماده سازی محیط طراحی وب است. حدود 40 دقیقه برای خواندن و اجرای تمرین در نظر بگیرید. در پایان، صفحه معرفی یک استودیوی فرضی خواهید داشت که ظاهر آن از فایل جداگانه بارگذاری می شود.
در پایان درس سوم چه چیزی یاد می گیرید؟
- پوشه اصلی پروژه را از فایل های داخل آن تشخیص می دهید.
- نام فایل ها و پوشه ها را منظم انتخاب می کنید.
- یک فایل CSS خارجی را به HTML متصل می کنید.
- با تغییر نام یک فایل، علت قطع شدن اتصال را پیدا می کنید.
- کل پروژه را بدون وابستگی به مسیر شخصی کامپیوتر جابه جا می کنید.
پروژه وب یعنی چه؟
در این مرحله، پروژه وب مجموعه فایل هایی است که برای ساخت صفحه کنار هم نگه می داریم. یک فایل محتوای صفحه را مشخص می کند و فایل دیگر قواعد ظاهر را نگه می دارد. بعدا تصاویر و صفحه های بیشتری به آن اضافه می کنیم. اگر هنوز تفاوت نقش این دو زبان روشن نیست، درس اول HTML و CSS را مرور کنید.
فرض کنید فایل اصلی روی دسکتاپ، فایل رنگ ها در Downloads و عکس ها داخل پوشه دیگری باشند. حتی اگر صفحه روی کامپیوتر شما درست دیده شود، پیدا کردن وابستگی ها و تحویل آن دشوار خواهد شد. برای تمرین امروز، همه فایل های موردنیاز را زیر یک پوشه مشترک نگه می داریم.
ساختار پوشه های اولین پروژه
داخل پوشه web-course یک پوشه جدید به نام lesson-03 بسازید. فایل های درس های قبلی را نگه دارید. سپس پوشه lesson-03 را با Open Folder در ویرایشگر باز کنید. منظور از «ریشه پروژه» در این تمرین همین پوشه است؛ ریشه پروژه لزوما با ریشه درایو کامپیوتر یا ریشه سایت روی سرور یکسان نیست.
| مسیر نسبت به پوشه lesson-03 | نوع | کاربرد |
|---|---|---|
index.html |
فایل | محتوای صفحه اصلی تمرین |
css/ |
پوشه | محل نگهداری فایل های ظاهر |
css/style.css |
فایل | قواعد رنگ، فاصله و اندازه |
images/ |
پوشه | محل تصاویر؛ در این تمرین خالی می ماند |
ابتدا فایل index.html را در خود lesson-03 بسازید. سپس پوشه css را ایجاد کنید و داخل آن فایل style.css را بسازید. در نهایت پوشه images را کنار css قرار دهید. حواستان باشد index.html را اشتباهی داخل css نسازید؛ مسیر نمونه بر اساس جای فایل ها در جدول نوشته شده است.
چرا نام index.html را انتخاب می کنیم؟
این نام برای صفحه ورودی یک سایت رایج است و بسیاری از تنظیمات وب سرور آن را به عنوان فایل پیش فرض می شناسند؛ رفتار دقیق به تنظیمات سرور بستگی دارد. در تمرین محلی، خودمان همین فایل را مستقیم باز می کنیم. نام css نیز یک قرارداد قابل فهم است، نه دستور اجباری زبان.
قانون نام گذاری در این دوره
برای جلوگیری از خطاهای تایپی، نام فایل ها را با حروف کوچک انگلیسی و بدون فاصله می نویسیم؛ برای جدا کردن واژه ها از خط تیره استفاده می کنیم، مثل about-us.html. این یک قرارداد آموزشی است، نه ادعای ممنوع بودن نام فارسی. حرف بزرگ و کوچک را هم یکسان نگیرید؛ مسیری که در یک محیط کار می کند ممکن است پس از انتقال به محیط حساس به بزرگی حروف مشکل پیدا کند.
برای مطالعه تکمیلی درباره نام فایل و مسیرها، راهنمای کار با فایل ها در MDN را ببینید. در پروژه امروز همین ساختار کوچک کافی است؛ پوشه هایی که کاربردشان را نمی دانید اضافه نکنید.
گام اول: محتوای index.html را بنویسید
فایل index.html را باز کنید و کد زیر را کامل داخل آن قرار دهید. نمونه را در فایل HTML بنویسید، نه داخل style.css. سپس ذخیره کنید. در این درس هنوز لازم نیست معنی تک تک تگ ها را حفظ کنید؛ از درس بعد ساختار سند را دقیق تر بررسی می کنیم.
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>اولین پروژه وب من</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<h1>استودیوی طراحی من</h1>
<p>این اولین پروژه من با فایل های جداگانه است.</p>
<h2>خدمات تمرینی</h2>
<ul>
<li>طراحی صفحه معرفی</li>
<li>ساخت صفحه خدمات</li>
</ul>
</main>
</body>
</html>
عنصر main محتوای اصلی صفحه را در بر گرفته است. عنوان بزرگ، یک توضیح کوتاه و فهرست خدمات داخل آن قرار دارند. مهم ترین خط جدید برای هدف این درس، عنصر link در head است:
<link rel="stylesheet" href="css/style.css">
مقدار stylesheet رابطه فایل مقصد با صفحه را مشخص می کند. مقدار href آدرس فایل CSS است. در نمونه ما، مرورگر از پوشه فایل index.html وارد پوشه css می شود و style.css را می خواند. خود خط link هیچ قانون رنگی ندارد؛ فقط ارتباط را برقرار می کند.
گام دوم: قواعد ظاهر را در style.css قرار دهید
فایل css/style.css را باز کنید و کد زیر را قرار دهید. داخل فایل CSS، تگ style یا ساختار html ننویسید؛ فقط قواعد CSS را ذخیره کنید. اگر فایل را از نمونه درس قبل ساخته اید، بررسی کنید تگ های اضافی باقی نمانده باشند.
body {
margin: 0;
padding: 24px;
font-family: Tahoma, sans-serif;
line-height: 1.8;
color: #1e293b;
background-color: #e2e8f0;
}
main {
max-width: 640px;
margin: 0 auto;
padding: 24px;
background-color: #ffffff;
border-radius: 16px;
}
h1 {
color: #1d4ed8;
}
h2 {
font-size: 20px;
}
در این نمونه، body زمینه خاکستری روشن و فاصله اطراف محتوا را ایجاد می کند. main یک بخش سفید با عرض محدود و گوشه های گرد می سازد. قانون h1 عنوان را آبی می کند. این توضیح برای تشخیص نتیجه کافی است؛ واحدها، مدل جعبه و روش های چیدمان را در بخش CSS دوره با تمرین جداگانه یاد می گیریم.
گام سوم: نتیجه اتصال دو فایل را بررسی کنید
- هر دو فایل را ذخیره کنید؛ ذخیره HTML به معنای ذخیره خودکار تغییرهای CSS نیست.
- از فایل منیجر سیستم عامل، index.html داخل lesson-03 را در مرورگر باز کنید.
- باید عنوان «استودیوی طراحی من» را به رنگ آبی داخل بخشی سفید ببینید.
- پس زمینه بیرون آن بخش باید خاکستری روشن باشد.
- در style.css رنگ h1 را از #1d4ed8 به #166534 تغییر دهید، ذخیره کنید و مرورگر را تازه کنید.
اگر عنوان سبز شد، تغییر فایل CSS روی صفحه اثر گذاشته است. اگر متن هست اما ظاهر ساده و پیش فرض دیده می شود، اول مسیر اتصال را بررسی کنید. اگر صفحه خالی است، بررسی کنید فایل درست و غیرخالی را باز کرده باشید. برای این مثال نیازی به نصب ابزار ساخت، پایگاه داده یا خرید هاست ندارید.
مسیر نسبی را با همین پروژه بفهمیم
مسیر نسبی را از جای سند مبدا می خوانیم. در ساختار فعلی، index.html کنار پوشه css قرار دارد؛ به همین دلیل css/style.css درست است. اگر فایل CSS را جابه جا کنید، آدرس قبلی دیگر الزاما به آن نمی رسد.
| محل فایل CSS | مقدار href از index.html فعلی |
|---|---|
| داخل پوشه css | css/style.css |
| کنار index.html | style.css |
| داخل پوشه styles | styles/style.css |
این سه ردیف، سه حالت جایگزین هستند؛ لازم نیست هر سه فایل را بسازید. برای امروز همان حالت اول را نگه دارید. در مسیرهای نمونه وب از / استفاده کنید و مسیر شخصی درایو خود را وارد کد نکنید. مسیرهای ریشه ای و رفتن به پوشه بالاتر را در درس لینک ها با جزئیات بیشتری تمرین می کنیم.
یک خطای کنترل شده ایجاد کنید و آن را برطرف کنید
برای اینکه فقط کد را کپی نکرده باشید، نام style.css را موقتا به theme.css تغییر دهید. فایل HTML را دست نزنید و صفحه را تازه کنید. چون link هنوز style.css را درخواست می کند، ظاهر صفحه ممکن است به حالت پیش فرض برگردد. حالا مقدار href را به css/theme.css تغییر دهید، ذخیره و تازه سازی کنید؛ ظاهر باید برگردد.
در پایان این آزمایش، نام فایل و href را دوباره به style.css و css/style.css برگردانید. نکته اصلی این است: مرورگر فایل را بر اساس نشانی پیدا می کند؛ از روی شباهت نام یا قرار گرفتن یک فایل CSS در پروژه حدس نمی زند کدام را بخواند.
چک لیست رفع خطای نمایش CSS
- نام: style.css را با styles.css اشتباه نگرفته باشید.
- پسوند: فایل نباید در واقع style.css.txt باشد؛ نمایش پسوندهای واقعی را در سیستم عامل بررسی کنید.
- محل: فایل CSS باید دقیقا در پوشه معرفی شده در href باشد.
- حروف: نام پوشه و فایل را با همان بزرگی و کوچکی حروف بنویسید.
- ذخیره: تغییرهای هر دو فایل را ذخیره کنید و صفحه را تازه کنید.
- کد: در CSS فقط قواعد را قرار دهید و آکولادها را حذف نکنید.
- فایل باز: مطمئن شوید صفحه مربوط به lesson-03 را باز کرده اید، نه نمونه درس دوم.
این روش بررسی مرحله ای در پروژه های واقعی هم مفید است. در ارزیابی کیفیت سایت وردپرسی نیز باید عملکرد واقعی بخش ها را بررسی کرد و تنها به ظاهر اولیه اکتفا نکرد.
تمرین درس 3: پروژه قابل انتقال بسازید
عنوان استودیو را به نام دلخواه تغییر دهید. در فهرست خدمات، مورد «طراحی صفحه تماس» را اضافه کنید و رنگ عنوان را سبز تیره بگذارید. سپس کل پوشه lesson-03 را در محل دیگری کپی کنید و index.html نسخه جدید را باز کنید. نتیجه باید حفظ شود، چون فایل HTML و پوشه css را با هم منتقل کرده اید.
نمایش پاسخ و معیار بررسی تمرین
داخل ul یک عنصر جدید اضافه کنید:
<li>طراحی صفحه تماس</li>
در فایل CSS، مقدار color مربوط به h1 را تغییر دهید:
h1 {
color: #166534;
}
برای بررسی انتقال، در نسخه کپی شده فقط متن عنوان را تغییر دهید. اگر صفحه تازه سازی شده عنوان جدید را نشان داد، همان نسخه را باز کرده اید. ساختار نسبی باید ثابت بماند: index.html کنار پوشه css و style.css داخل آن. انتقال تنها فایل HTML برای حفظ ظاهر کافی نیست.
این ساختار چه ارتباطی با سایت واقعی دارد؟
پروژه امروز یک تمرین کوچک است و امکانات ثبت سفارش یا پردازش فرم ندارد. هنگام تعریف پروژه حرفه ای، باید نیازها و خروجی ها را جداگانه مشخص کنید؛ چک لیست سفارش طراحی سایت اختصاصی نمونه ای از این نگاه مرحله ای است.
در ادامه دوره، همین نظم را برای تصاویر، صفحه ها و فایل های بیشتر حفظ می کنیم. برای شناخت مراحل کلی یک پروژه، راهنمای جامع طراحی سایت را ببینید. اگر همزمان برای کسب و کار واقعی خود به اجرا نیاز دارید، توضیحات خدمات طراحی سایت در ارومیه در دسترس است؛ انجام تمرین های دوره به خرید خدمات نیاز ندارد.
پرسش های متداول درس سوم
آیا پوشه images باید حتما عکس داشته باشد؟
خیر. در این تمرین برای نظم پروژه آن را ساخته ایم و هنوز در کد به عکسی اشاره نکرده ایم. خالی بودنش مشکلی ایجاد نمی کند.
آیا نام style.css اجباری است؟
خیر. نام فایل می تواند متفاوت باشد، اما نشانی در href باید با نام و محل واقعی فایل هماهنگ باشد.
آیا باید همین حالا تمام CSS را بفهمم؟
هدف امروز ارتباط فایل هاست. کافی است بتوانید محل تغییر رنگ را پیدا کنید، آن را ذخیره کنید و نتیجه را ببینید. آموزش منظم انتخابگرها و قواعد در بخش CSS دوره انجام می شود.
چرا هنوز سایت من در اینترنت دیده نمی شود؟
شما فایل ها را روی دستگاه خود باز کرده اید. انتشار عمومی به میزبانی و تنظیمات مربوط نیاز دارد؛ ساخت پروژه محلی و انتشار آن دو مرحله جدا هستند.
قبل از رفتن به درس بعد
باید بتوانید جای هر فایل را توضیح دهید، اتصال CSS را اصلاح کنید و کل پروژه را منتقل کنید. لازم نیست دستورها را حفظ کنید؛ مسیر را از روی محل واقعی فایل ها بخوانید.
درس قبلی: آماده سازی محیط طراحی وب و نصب ویرایشگر کد
درس بعد: ساختار سند HTML و عناصر head و body.
بدون دیدگاه