پایه طراحی وب چیست .

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

منبع را بررسی کنید

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

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

هنگامی که شما کد خود را با هم بدست آورید، گام ضروری بعدی این است که آن را تأیید کنید تا مطمئن شوید که در همه مرورگرها بدون مشکل کار خواهد کرد. شما ممکن است شگفت زده شوید یک وبسایت W3C خوب (اگر سخت) »آنلاین تایید کننده HTML باشد.

کد دستی

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

دستورالعمل دستی در یک ویرایشگر متن (مانند Notepad ++، TextMate، TopStyle یا حتی NotePad قابل اعتماد) به این معنی است که کد شما خیلی بهتر است و بنابراین می تواند مشکلات را پیدا کند و موارد کوچکتر را ویرایش کند. شما کنترل بیشتری نسبت به طراحی خود دارید. شما به کد خود نزدیک تر هستید و می توانید چیزهایی مانند CSS را راحت تر ترکیب کنید. ویراستاران ویژوال همچنین کد بسیار نفوذی را با بسیاری از تگ های فونت های غیر ضروری و پاراگراف ها و غیره نمایش می دهند. صفحات شما سریعتر دانلود می شوند اگر شما به طور موثر در یک ویرایشگر متن کد کار می کنید.

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

یاد بگیرید CSS

CSS، یا Cascading Style Sheets، مهمترین پیشرفت در جهان وب مسترها در چند سال اخیر است. آنها به شما اجازه می دهند که تغییر کلی سایت خود را با ویرایش یک فایل تغییر دهید و به شما امکان می دهد که صفحات خود را فرمت کنید و طراحی کنید تا بسیار زیاد و خیلی بهتر شوید.

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

ارائه

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

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

با استفاده از یک فونت بدون serif برای محتوای اصلی خود، به عنوان متن در این خانواده از فونت آسان تر است به عنوان خوانده شده از روی صفحه نمایش کامپیوتر از فونت های serif. متن اصلی خود را بین اندازه های 2 و 3 (10 و 12 نقطه) حفظ کنید. همچنین به یاد داشته باشید که شما باید از فونت های معمولی که هر کس بر روی کامپیوتر خود (در آموزش فونت چیده شده است) استفاده کند، بنابراین آنها همان صفحه ای را می بینند که شما انجام می دهید.

رنگ ها

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

 و به طور کلی نگاه شیک به هر حال.

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

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

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

محدودیت ورزش

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

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

ارتقاء پایه

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

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

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

قبل از ارسال به موتورهای جستجو، برچسب ها <meta> را اضافه کنید. برای ارتقاء 101 برای بنیادهای انتخاب کلمات کلیدی، بیش از حد مطالعه کنید. مهمترین چیز »گوگل است. گوگل سایت های جدید را به طور قابل اعتماد نشان می دهد، در حالی که می توانید دیگران را برای دیگران منتظر بگذارید و از آنها بازدید نمی کنید.

در حال حاضر، یکی دیگر از مبتدیان اشتباه می کند این است که انتظاراتشان خیلی زیاد است. سایت هایی که از آن شروع می شوند باید خوش شانس باشند تا به طور متوسط ​​30 تا 40 بازدید در روز داشته باشند. و حتی پس از آن به محبوبیت موضوع شما بستگی دارد. از نظر تعداد مشاهده کوچک در ابتدا دلسرد نشوید، وب سایت ها در طول زمان قدردانی می کنند. بازدید کنندگان خوشحال به سایت شما لینک خواهند کرد، و مردم این پیوندها را دنبال خواهند کرد و به بازدید کنندگان باز می گردند. این است که اگر سایت شما خوب باشد.

همچنین: لینک به منبع HTML! وجود دارد، این ارتقاء من انجام شده است ...

بهینه سازی اساسی

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

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

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

به همان اندازه که می توانید گرافیک خود را بهینه کنید. این روند فرایند کمتر از است