عناصر اصلی یک صفحه وب چیست؟ عناصر اساسی صفحات وب ساختار زبان HTML: برچسب ها

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

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

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

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

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

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

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

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

اگر صفحه وب یک سند شروع است، در پایین آن نیز قرار می گیرد شمارشگر ضربه- یک اسکریپت کوچک که یک اسکریپت CGI نصب شده روی سرور را فراخوانی می کند که هر باز شدن یک سند را در مرورگر کاربران ثبت می کند و مقدار نشانگر شمارنده را تغییر می دهد. قرار دادن چند شمارنده مختلف در یک صفحه توصیه نمی شود.

وب سایت ها با یکدیگر تفاوت دارند:

اندازه (از چندین صفحه تا سرورهای وب با گیگابایت اطلاعات).

طراحی (رنگ بندی کلی، فرمت فونت، تصاویر استفاده شده و غیره).

ساختار (سیستم لینک ها، اتصال صفحات درون سایت و همچنین ارتباط با سایت های دیگر).

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

عناصر منفعل (تصویری).

• انیمیشن

عناصر فعال

• فیلدهای ورودی

  سوئیچ ها

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

مبحث 9. ارتباطات الکترونیکی. آدرس ایمیل

پست الکترونیکی (E-mail) نوع اصلی سرویس شبکه است. پیام رسانی از طریق سیستم انجام می شود سرورهای پست الکترونیکی.

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

یک آدرس ایمیل از دو قسمت تشکیل شده است که با علامت @ از هم جدا شده اند (این علامت معمولا "سگ" نامیده می شود):

نام صندوق پستیکاربر (انتخاب شده توسط او، در مثال ما - ایرینا).

نام دامنه سرور پست الکترونیکی(در مثال ما - پست الکترونیکی. ru) .

مثلا، ایرینا@ پست الکترونیکی. ru

آدرس‌های ایمیل بدون فاصله با حروف، اعداد یا نمادهای لاتین (مجاز برای استفاده) نوشته می‌شوند.

بر اساس داده های ثبت نام آدرس ایمیل در رایانه کاربر، الفحساب ، که حاوی اطلاعات لازم برای تماس با سرویس پست الکترونیکی، از جمله نام کاربری (وارد شدن) و رمز عبور.

بر اساس این رکورد، سرور کاربر را شناسایی می کند.

برنامه ریزی امنیت اینترنت برای حفاظت

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

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

خطوط دفاعی:

مسدود کردن حملات احتمالی:

از نرم افزار و سخت افزار خاصی استفاده کنید که داده های ناامن و غیر ضروری را مسدود می کند.

از احراز هویت و رمزگذاری استفاده کنید.

کاهش منابع خطر:

فقط از خدمات اینترنتی استفاده کنید که واقعاً به آنها نیاز دارید.

از نرم افزارهای بدون اشکال استفاده کنید و آن را به طور مرتب به روز کنید.

نرم افزار را به درستی پیکربندی کنید (هرچه کمتر مجاز باشد، امنیت بالاتر است).

اطلاعات مربوط به خود را بصورت آنلاین تبلیغ نکنید.

دسترسی به منابع رایانه خود را محدود کنید.

آماده شدن برای بهبودی پس از یک حمله:

به طور منظم ایجاد و به روز رسانی کنید پشتیبان گیریداده های کاری

همیشه کیت های توزیع نرم افزار را در دست داشته باشید.

احراز هویت (ازrpزیست محیطیمعتبر- اصالت) - تأیید صحت.

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

دانستن مکان و نحوه قرار دادن کلمات کلیدی در یک صفحه وب می تواند شرکت سئوی شما را شکست دهد یا شکست دهد.

در هر صفحه وب 5 عنصر وجود دارد که باید کلمات کلیدی خود را در آن قرار دهید:

1. عنوان صفحه (برچسب عنوان)
2. کلمات کلیدی صفحه (کلمات کلیدی متا تگ)
3. توضیحات صفحه (تگ توضیحات متا)
4. متن جایگزین برای تصاویر (برچسب Alt)
5. محتوای صفحه وب (برچسب بدنه)

از بین تمام عناصر فوق در یک صفحه وب، مهمترین آنها محتوای صفحه است (نکته 5). بیشتر در این مورد در زیر.

فعلا به ترتیب به این لیست نگاه می کنیم.

عنصر شماره 1. عنوان صفحه (برچسب عنوان)

ابتدا به عنوان صفحه (برچسب عنوان) نگاه می کنیم. این عنصر اولین و مهمترین عنصر از سایر عناصر در بلوک سر هر صفحه وب است.

می توانید عنوان صفحه وب را در خط بالای مرورگر اینترنت مشاهده کنید. برای تأیید این موضوع، هر مرورگری را راه اندازی کنید، به عنوان مثال، اینترنت اکسپلورر، اپرا یا موزیلا فایرفاکس، به هر وب سایتی بروید و محتوای برچسب عنوان را با خط بالای آن مرورگرها مقایسه کنید. موتورهای جستجو از این برچسب برای اهداف خود استفاده می کنند - برای جمع آوری اطلاعات در مورد سایت و تعیین موضوع آن و همچنین استفاده از آن در نتایج موتورهای جستجو (SERP) به عنوان نام صفحه وب.

یاد آوردن!عنوان یک صفحه وب آن است توضیح کوتاه.

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

عنصر شماره 2. کلمات کلیدی صفحه (کلمات کلیدی متا تگ)

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

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

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

عنصر شماره 3. توضیحات صفحه (تگ توضیحات متا)

متا تگ توضیحات یکی دیگر از عناصر سایت است که کلمات کلیدی باید در آن قرار گیرند. موتورهای جستجو این برچسب را برای وجود کلمات کلیدی اسکن می کنند و همچنین محتویات آن را با محتوای خود سایت (محتوای تگ بدنه) مقایسه می کنند. یک شرایط بسیار مهم این است که موتورهای جستجو از محتویات برچسب توضیحات به عنوان توضیحات صفحه وب در نتایج جستجو (SERP) استفاده می کنند.

این تگ باید حاوی توضیحات مختصری از صفحه وب باشد، اما بیش از 50 کلمه نباشد.

عنصر شماره 4. متن جایگزین برای تصاویر (برچسب Alt)

تگ‌های Alt یک توضیح متنی از محتوای تصویر هستند، یعنی. اگر به دلایلی تصویر بارگذاری نشد و این عکس دارای متن جایگزین باشد، این متن به جای تصویر نمایش داده می شود.

اگر تصویر بارگذاری شده باشد، و تصویر دارای متن جایگزین نیز باشد، زمانی که ماوس را روی عکس می‌بریم، می‌توانیم آن را ببینیم. تگ های Alt برای راحتی کاربران اینترنت که به دلایلی گرافیک را نمایش نمی دهند استفاده می شود.

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

عنصر شماره 5. محتوای صفحه وب (برچسب بدنه)

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

برای رسیدن به این هدف، باید کلمات کلیدی انتخاب شده را با رعایت دفعات تکرار آنها در کد صفحات وب پیاده سازی کنید. به صورت زیر عمل کنید: برای هر صفحه خاص، 1-2 کلمه کلیدی را انتخاب کنید و صفحه مربوطه را برای آنها بهینه کنید.

تصور کنید که در حال آماده سازی ارائه ای از وب سایت یا محصول جدید خود هستید. سپس، برای مثال، اسلایدهای شما ارائه های پاورپوینت- پاراگراف ها آنها باید کوتاه و واضح باشند. درست مانند یک ارائه پاورپوینت، می توانید از لیست ها برای فهرست کردن مزایای سایت یا محصول خود استفاده کنید و هر بار بر روی کلمات کلیدی انتخاب شده تمرکز کنید.

کلمات کلیدی انتخاب شده را در 5 عنصر بالا در هر صفحه وب پیاده سازی کنید و رتبه بندی و نتایج فعلی خود را تا حد زیادی بهبود می بخشید.

زبان HTML

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

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

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

کار با HTML راهی برای یادگیری نکات و نکات ایجاد اسناد در یک زبان استاندارد است و تنها در صورت لزوم از پسوندها استفاده می کند.

HTML توسط کنسرسیوم وب جهانی تایید شده است. توسط چندین مرورگر پرکاربرد پشتیبانی می شود و احتمالاً اساس همه چیز خواهد بود نرم افزار، که مربوط به وب است.

اصول ایجاد یک صفحه وب، عناصر اساسی یک صفحه وب

برای ایجاد صفحات وب از زبان خاصی به نام HTML (HyperText Markup Language) استفاده می شود. این زبان مجموعه ای از دستورات خاص به نام تگ را تعریف می کند که برای تعیین قالب یا هدف عناصر خاصی از یک صفحه وب استفاده می شود. از تگ های ویژه برای قرار دادن در صفحات وب استفاده می شود تصاویر گرافیکی، کلیپ های صوتی و تصویری و سایر اشیاء به اصطلاح تعبیه شده.

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

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

ابزارهای ویرایشی وجود دارد که به طور خاص برای آن طراحی شده اند نوشتن HTML. آنها در زمان صرفه جویی می کنند زیرا حاوی کلید هستند دسترسی سریعبرای انجام عملیات های تکراری، مانند تنظیم تنظیمات اولیه برای اسناد، جداول، یا به سادگی اعمال سبک ها در متن. ویرایشگرهای HTML با ابزارهای تألیف WYSIWYG تفاوت دارند زیرا به دانش قوانین برای کامپایل HTML به صورت دستی نیاز دارند؛ ویراستاران فقط این فرآیند را ساده و سرعت می بخشند. علاوه بر برچسب‌های HTML استاندارد شده توسط WWWC (برچسب‌های استاندارد)، مرورگرهای وب بسیاری از برچسب‌های غیر استاندارد را پشتیبانی می‌کنند. این برچسب ها توسط توسعه دهندگان یک برنامه مرورگر وب خاص برای به دست آوردن برتری نسبت به رقبا معرفی شدند. آنها امیدوار بودند که این پسوندهای اختصاصی بعداً به بخشی از استاندارد HTML تبدیل شوند، اما این امیدها هرگز محقق نشد. با این حال، برچسب ها باقی می مانند و همچنان پشتیبانی می شوند.

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

علاوه بر این، شما به هر ویرایشگر متنی، به عنوان مثال، برای تهیه فایل های HTML، و یک مرورگر برای مشاهده و کنترل کارهای انجام شده نیاز دارید.

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

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

چندین قانون ساده وجود دارد که به بازدیدکننده اجازه می دهد رابط سایت را درک کند [شماره 10].

1. سایت نباید حاوی اطلاعات بیهوده باشد، فونت باید به راحتی خوانده شود. عناصر گرافیکی باید واضح، رسا و سریع برای بارگذاری باشند.

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

3. بازدیدکننده سایت باید به راحتی اطلاعات مورد نظر خود را بیابد و بتواند اطلاعات جامعی (توضیحات در متن به اضافه چندین عکس) به دست آورد.

4. اطلاعات باید بین گروه ها توزیع شود. امکان جستجوی محصولات بر اساس نام و توضیحات وجود دارد.

5. وب سایت باید دارای بخش های اطلاعاتی باشد:

با اطلاعات مربوط به شرکت (حوزه فعالیت، آدرس، شماره تماس و غیره)؛

عناصر اساسی صفحات وب:

1. سربرگ / لوگو (سربرگ)

3. محتوا/محتوا (فیلد متنی)

4. عناصر ناوبری

5. اطلاعات در مورد توسعه دهندگان سایت

هر صفحه وب حاوی مجموعه خاصی است عناصر استاندارد، که اجزای اجباری هر منبع اینترنتی هستند.

اولین عنصر یک صفحه وب که باید به آن نگاه کنیم عنوان آن است. لوگو یا نام سایت همان نقش را به عنوان تابلویی در ورودی هر موسسه ایفا می کند. اینترنت موضوع دیگری است: در اینجا روش اصلی حرکت از راه دور است و بنابراین من باید این "علامت" را در هر صفحه ببینم.

بخش اصلی سند را به اصطلاح فیلد متن اشغال می کند - منطقه ای که محتوای معنایی صفحه در آن قرار دارد: متن اطلاعاتی معنی دار و تصاویر.

عناصر فهرست شده همچنین "محتوا" نامیده می شوند (از انگلیسی ، محتوا - محتوا). قرار دادن فیلد متن در درجه اول به نحوه قرار دادن بقیه عناصر سند توسط طراح وب بستگی دارد.

شکل 1. نمونه ای از محتوای سایت

مؤلفه اجباری بعدی یک صفحه وب، عناصر ناوبری هستند - پیوندهایی که این سند را با بخش های دیگر سایت مرتبط می کنند. عناصر ناوبری را می توان به شکل رشته های متنی، اشیاء گرافیکی، یعنی دکمه ها یا اجزای فعال، مانند اپلت های جاوا، ساخت.

در پایین سند، مرسوم است که اطلاعات مربوط به توسعه دهندگان سایت و یک آدرس ایمیل منتشر شود که بازدیدکنندگان منبع می توانند پاسخ ها، پیشنهادات و خواسته های خود را برای صاحبان صفحه ارسال کنند. (شکل 2)

شکل 2. اطلاعات تماس

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

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

1. تعیین اهداف و تعریف وظایف اصلی.

2. ایجاد فهرستی از بخش های موضوعی آینده.

3. توسعه ساختار منطقی و فیزیکی منبع.

4. تهیه کروکی طرح، طرح سایت، جدول چیدمان نامرئی.

5. تهیه مواد متنی.

6. تهیه مواد گرافیکی به صورت وکتور.

7. نقشه های برداری را به فرمت شطرنجی صادر کنید.

8. بهینه سازی تمام تصاویر.

9. ایجاد الگوهای صفحه وب.

10. مونتاژ صفحات وب و اشکال زدایی کد.

11. بررسی هویت نمایش صفحات وب با وضوح صفحه های مختلف و پالت های رنگی و مرورگرهای مختلف.

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

اولین عنصر یک صفحه وب که باید به آن نگاه کنیم عنوان آن است. می تواند به صورت متنی یا گرافیکی ساخته شود، اما در هر دو مورد باید در بالای سند قرار گیرد. در صورتی که این منبع وب به دو زبان ارائه شده باشد، گاهی هدر با منوی انتخاب رمزگذاری سیریلیک و دکمه های تغییر از روسی به انگلیسی سایت ترکیب می شود. به طور مستقیم زیر عنوان سند، به عنوان یک قاعده، فضای اختصاص داده شده برای قرار دادن یک بنر تبلیغاتی است. قرار دادن یک بنر در بالای صفحه وب در اکثر موارد پیش نیاز ثبت سایت در خدمات تبادل بنر است - سیستم هایی که منبعی را که ایجاد کرده اید در ازای نمایش تبلیغات سایر شرکت کنندگان در شبکه تبادل بنر در صفحات وب سایت تبلیغ می کنند. سایت شما. اندازه استاندارد بنرهایی که تحت عنوان سند منتشر می شوند معمولاً 468x60 پیکسل است. اگر از طرح‌بندی صفحه ثابت استفاده می‌کنید، عرض هدر سند شما تقریباً 640 پیکسل خواهد بود، در درجه اول برای اطمینان از اینکه سند شما به درستی در مانیتورهای 640x480 پیکسل نمایش داده می‌شود و از داشتن نوار اسکرول افقی که مشاهده آن را دشوار می‌کند، جلوگیری می‌کند. بدیهی است که عرض بنر در این حالت به میزان قابل توجهی کمتر از عرض هدر خواهد بود که به همین دلیل در قسمتی از صفحه که قصد دارید فضایی برای تبلیغات اختصاص دهید، فضای خالی ظاهر می شود که می توان آن را با لوگوی شرکت صاحب این سایت یا پیوندی به سروری که میزبانی وب را پیاده سازی می کند. البته، لوگو همیشه ضروری نیست: به عنوان یک قاعده، تنها در صورتی در یک صفحه وب قرار می گیرد که سایت تمرکز تجاری داشته باشد.

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

مؤلفه اجباری بعدی یک صفحه وب، عناصر ناوبری هستند - پیوندهایی که این سند را با بخش های دیگر سایت مرتبط می کنند. عناصر ناوبری را می توان به شکل رشته های متنی، اشیاء گرافیکی، یعنی دکمه ها یا اجزای فعال، مانند اپلت های جاوا، ساخت. دومی همان دکمه‌هایی هستند که برخلاف خواهران "سنتی" خود، می‌توانند به حرکات ماوس پاسخ دهند و هنگامی که مکان‌نما روی آنها قرار می‌گیرد، اقدامات ساده‌ای را انجام می‌دهند (روشن کردن نور پس‌زمینه، ایجاد افکت کلیک، تغییر شکل و غیره). د). همانطور که قبلاً در بخش "اصول "پایه های" طراحی وب ذکر کردم ، عناصر ناوبری باید به گونه ای قرار بگیرند که همیشه "در دید" ، "در دست" باشند، یعنی به طوری که کاربر نداشته باشد. برای "پیمایش" صفحه به عقب، اگر فیلد متنی چندین صفحه فیزیکی را در ارتفاع اشغال می کند، پس مدت زیادی را صرف جستجوی پیوند به بخش های دیگر کنید. ثابت‌ترین روش، قرار دادن عناصر ناوبری در لبه سمت چپ صفحه است.

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

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

برنج. 3.6. نمونه‌ای از طرح‌بندی صفحه وب با موقعیت‌یابی عناصر ناوبری در سمت چپ

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

برنج. 3.7. نمونه ای از طرح بندی صفحه وب با موقعیت یابی عناصر ناوبری در سمت راست

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

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

برنج. 3.8. مثالی از طرح‌بندی صفحه وب با موقعیت‌یابی بالای عناصر ناوبری

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

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

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

برنج. 3.9. نمونه ای از طرح بندی صفحه وب "مخلوط".