Інтернет-магазин

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Інтернет-магазин



Вступ

Створення інтернет магазину - це цікава та складна проблема, особливо у випадку, коли вона потрібна людям для купівлі якісних товарів у інтернеті, це забирає менше часу ніж у магазинах. Моє дослідження полягає в тому, щоб люди могли швидко та легко, придбати той чи інший товар, не затрачаючи при цьому багато часу.

Постановка задачі:

1. Створити сайт «Інтернет магазину», та шаблон для нього.

2. Оптимізувати доступ до сайту людям.

3. Реалізувати перегляд товару та купляти його.

Об'єкт дослідження полягає у розробці дизайну для нашого сайту.

Методи які будуть присутні при виконанні об'єкту досліджень:

1. PHP - стандартна мова розмітки веб-сторінок в Інтернеті. Більшість веб-сторінок створюються за допомогою мови PHP. Документ PHP оброблюється браузером та відтворюється на екрані у звичному для людини вигляді.

2. CSS - спеціальна мова, що використовується для відображення сторінок, написаних мовами розмітки даних. Найчастіше CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до інших видів XML-документів.

3. Java Script - назва реалізації стандарту мови програмування ECMAScript компанії Netscape, базується на принципах прототипного програмування. Найпоширеніше і найвідоміше застосування мови - написання сценаріїв для веб-сторінок, але, також, використовується для впровадження сценаріїв керування об'єктами вбудованими в інші програми.

Створено сайт та дизайн для нього. В практиці використовувалося для перегляду товару, та покупки їх. Інтернет магазину можна використовувати як інформаційний сайт, за допомогою якого можна пізнати інформацію яка вам цікава. Результати роботи оприлюднювались в коледжі, було показано функціонал сайту, детально розглянуто дизайн.



1. Аналіз створення сайту Інтернет магазину

1.1 Вибір хостінгу - одна з основних задач для електронної бібліотеки

Для того щоб сайт функціонував потрібен хостинг куди ми будемо загружати дизайн сайту для його відображення.

Я обрав хостинг від сайту hostinger.com.ua

В ньому присутні наступні можливості?

· Безкоштовні Послуги

· Стабільна робота серверів.

· Ніякої реклами на Ваших сайтах. Прийнятні умови.

· Кожному акаунту виділено 2GB на диску та 100GB трафіку. Цього більш ніж достатньо для персонального або комерційного сайту. У будь-який час Ви можете замовити необмежені послуги нашого платного хостингу.

· Ми надаємо відмінну та просту у використанні Панель Управління.

· Вона дозволить Вам налаштувати пошту

· Створити бази даних

· FTP акаунти, бекапи.

· Також, у ній є додаткові можливості: веб-консоль SSH, редактор DNS зони та багато іншого.

· Акаунти знаходяться на виділених серверах з процесорами Intel Xeon, 16GB ОЗП та SSD накопичувачами.

· Всі сервери підключені до 1GB каналів, які забезпечують швидкий доступ до даних. Гарантований аптайм Ваших сайтів складе 99.9%.



1.2 Визначення назви сайту

хостінг сайт пагін інтернет

Головними труднощами кожного, хто збирається створити свій сайт, є вибір його доменного імені. Оформлення сайту, розташування блоків на ньому, написи, кількість сторінок можна міняти необмежену кількість разів. Але назва сайту змінити не вийде - доведеться реєструвати новий домен, а з ним і заново розкручувати сайт, так як позиції в пошукових системах, ТІЦ, PR і напрацьована посилальна маса залишаться зі старим іменем. Для того, щоб уникнути подібних проблем, необхідно серйозно підходити до вибору назви сайту.

Інструкція:

1. Для вибору доменного імені спочатку виберіть сайт-реєстратор доменних імен з влаштовують вас цінами. На таких сайтах обов'язково повинен бути сервіс перевірки зайнятості доменних імен - він допоможе вам визначити, включена бажане ім'я або вільно.

2. Ім'я сайту має бути не менше 2 та не більше 64 символів. Початок і кінець імені не повинні містити дефіс. В імені сайту не допускається використання двох дефісів підряд.

3. Назва сайту має бути по можливості недовгим і таким, щоб можна було без праці вимовити іншій людині, наприклад, по телефону. Якщо ви вирішили писати назву для сайту, що містить російські слова, латиницею, то уникайте в імені букви «Ш», «Ж», «Ч». Використання цих букв в назві сайту може мати їх неоднозначне написання латиницею.

4. Ім'я сайту має відповідати назві компанії або тематиці сайту. Це потрібно для того, щоб відвідувачі за відповідними запитами, могли без праці потрапити на ваш сайт.

5. Щоб зменшити кількість символів в імені сайту, ви можете використовувати доменну зону в якості частини назви. Наприклад, це використано в таких назвах, як http:?? kabi.net, http:?? part.org

6. Вибирайте доменну зону для сайту з урахуванням його регіону. Для сайтів, орієнтованих на Росію, підходить зона RU. Якщо ваш сайт призначений не тільки для російськомовної, але і для зарубіжної аудиторії, то вибирайте зону COM.

7. Також можна підібрати доменну зону, виходячи тільки з тематики вашого ресурсу. Це добре, якщо проект призначений не тільки для якогось певного регіону чи ви хочете, щоб люди одразу розуміли, про що сайт, на його назві.

8. Для комерційних організації підійде зона BIZ. Організації, які надають мережеві послуги, можуть зареєструвати домен в зоні NET. Зона MOBI хороша для сайтів, створених для мобільних пристроїв.

9. Сайти різних музеїв можна зареєструвати в зоні MUSEUM. Зона INFO підійде для інформаційних сайтів. Для некомерційних організацій передбачена зона ORG.

10. Якщо сайт присвячений якоїсь людини, то вибирайте зону NAME; якщо це сайт професіонала (наприклад, лікаря), то ресурсу підійде зона PRO.

11. Після вибору імені обов'язково перевірте його в сервісі перевірки зайнятості імен, так як може виявитися, що хтось вже зареєстрував його до вас. Досягніть того, щоб придумане вами назва була не зайнятим, і відразу ж приступайте до його реєстрації, так як цілком можливо, що завтра таке ім'я сайту буде вже зайнято.

Для нашого сайту я вибрав назву сайту (силку) - bembas.zz.mu - я вибрав її тому, що вона легко запам'ятовується.



1.3 Вибираємо конструктор для сайту

Я вибрав конструктор:

WordPress - це проста у встановленні та використанні система керування вмістом з відкритим кодом, яка широко використовується для створення веб-сайтів, зокрема, блогів.

Написана на мові програмування PHP з використанням бази даних MySQL. Ліцензія - GNU General Public License. Сфера застосування - від блогів до складних веб-сайтів. Вбудована система тем і плаґінів в поєднанні з вдалою архітектурою дозволяє конструювати на основі WordPress практично будь-які веб-проекти.

Дизайн, управління системою та інші можливості

· простота встановлення, простота налаштувань;

· підтримка веб-стандартів (XHTML, CSS);

· модулі для підключення (плаґіни) з унікально простою системою їх взаємодії з кодом; можливість автоматичного встановлення та оновлення версії безпосередньо з панелі адміністратора;

· підтримка так званих «тем», з допомогою яких легко змінюється як зовнішній вигляд, так і способи виведення даних;

· можливість редагувати шаблони одразу в панелі адміністратора;

· «теми» реалізовані як набори файлів-шаблонів на PHP (у HTML-розмітку вставляються PHP-мітки);

· багато бібліотек «тем» і «плаґінів»;

· потенціал архітектури дозволяє легко реалізовувати складні рішення;

· СЕО-оптимізована система;

· наявність українського перекладу.

Публікація та редагування

· миттєва публікація;

· підтримка RSS, Atom, trackback, pingback;

· наявність ЛЗУ (людино-зрозумілий URL);

· редагування WYSIWYG-редактором з можливістю вставлення форматованого тексту (наприклад з програми Microsoft Word) або редагування за допомогою HTML-розмітки.

Контент

· наперед заплановані публікації;

· багатосторінкові записи;

· прикріплення файлів та зображень до записів;

· можливість створення статичних сторінок;

· можливість створення свого типу контенту у власних темах;

· категорії, теги, коментування тощо.

І так судячи з того що ми вже маємо хостин, знаємо назву нашого сайту та з легкістю вибрали колір для сайту. В нас вже є структура початкового кроку до створення сайту. Тепер нам лишається розробити дизайн для сайту та обрати пагін магазину.



2. Розробка дизайну для сайту та оптимізація його

2.1 Вибираємо плагін для магазину

WP - SHOP - Інтернет магазин для WordPress. Безкоштовний і потужний скрипт інтернет-магазину для Вашого сайту.

Чому на базі wp shop - це поки єдиний плагін в рунеті який розвивається. Друге - мені сподобалася його логіка роботи організована через стандартні запису і додаткові поля. Третє - з версії 3 автори реалізували можливість підключення до robokassa, webmoney.

Для початку скачайте останню версію плагіна wp shop на офіційному сайті, також плагін вимагає установки cforms - ви можете завантажити його там же. На цій же сторінці є відео з роботи з плагіном, а також є покрокова інструкція тут. Але інструкції написані для тих випадків, якщо ви встановлюєте магазин на новий порожній сайт.

Реалізуємо ми це за допомогою кастомних типів записів (post type). Є ще одна перевага установки магазину в окремий розділ - це те, що ви зможете окремо оформляти записи з товарними позиціями від інших записів на сайті. Для цього просто створіть в папці шаблону файлик single-yourpost.php, де yourpost - назва створеного типу записів про який нижче. Якщо нічого не створювати, то оформлення самої товарної позиції буде в стандартному файлі single.php

2.2 Вибираємо тему для сайту

Шаблон сайту - це НЕ готовий сайт, це якийсь напівфабрикат, на основі якого ви можете побудувати той сайт, що вам потрібен.

Шаблон - це набір правил для відображення інформації. Якщо шаблон розроблений під яку-небудь CMS (систему управління контентом), то все одно він отвечате тільки за відображення інформації. Сама система управління сайтом не є частиною шаблону. Ви самі повинні її встановити і налаштувати, керуючись документацією до цієї сістеме. Главное зрозуміти, що шаблон сайту - це ще не готовий сайт. Необхідно виконати певну роботу, щоб він перетворився на працюючий веб-сайт.

Що саме треба міняти в шаблоні або встановлювати / налаштовувати на сервері залежить від типу обраного шаблону і вашого завдання. Для HTML-шаблону сайту достатньо поміняти інформацію (тексти і картинки) і скопіювати файли на сервер, щоб отримати працюючий сайт.

Основні типи шаблонів:

1. HTML-шаблон сайту - можна використовувати для створення простого статичного html-сайту, без якої або системи управління. Відмінно підходить для сайту з декількох сторінок, які планується рідко обновлять.HTML-шаблон - це готовий дизайн сайту + готова верстка. Етот тип шаблону можна налаштувати на будь-яку CMS, з якою вам подобається працювати.

2. FLASH-шаблон - після зміни текстів і картинок ви отримаєте готовий сайт. Швидше за все ніякої системи управління контентом в комплект шаблону входити не буде. Всі зміни повинні здійснюватися редагуванням вихідного флеш файлу в програмі Adobe Flash. Размеется, для виконання цієї роботи необхідні спеціальні навички. Якщо ви раніше не працювали з флешем і ставите метою вивчити цю технологію, швидше за все ця задача виявиться непосільной. Несколько отдеьлно стоять динамічні флеш шаблони (до складу таких шаблонів входить XML файл), інформацію в них можна змінювати без редагування вихідних флеш-файлів. Однак попередньо шаблон повинен бути русифікувати фахівцем.

3. Теми для Вордпресс - на мій погляд це ідеальний шаблон для непрофесіонала з веб-будівництва. За допомогою такого шаблону ви зможете легко створити керований сайт з процессіональним дизайном. Вникання в деякі технічні деталі не уникнути - доведеться встановити систему на сервері, але існують готові хостинги з вбудованим Вордпресс, докладні інструкції, або можна просто когось найняти, щоб вам встановили і налаштували вордпресс разом з шаблоном.

4. Шаблони для Joomla, Drupal,… - передбачається, що ви повинні вміти працювати з цими системами або у вас є фахівець, який налаштує і буде обслуговувати системи. Варіант для профі, простіше кажучи.

5. Шаблони osCommerce, CRE loaded,… - це готові інтернет магазини. Є один неприємний момент - вони англомовні. Можлива русифікація систем і шаблонів, але це додаткова робота. Теж для профі.

Який би шаблон ви не вибрали для створення свого сайту, вам у будь-якому випадку буде потрібно виконати додаткову роботу, щоб перетворити його з напівфабрикату в готовий сайт.

Шаблони бувають різних форм, наприклад:

1. Один блок

2. Два блоки

3. Три блоки

4. Багато блоків

Один блок - сайт стрічка, в ньому знаходиться головне меню, та ряд в якому відбуваються всі події на сайті. Він найкраще підходить для сайтів на якому розміщені контактні дані або опис тої чи іншої людини.

Два блоки - найбільш поширений тип, він містить в собі головне меню яке знаходиться в горі сайту, перший блок розміщено зліва або з права, та другий блок який розміщений по центру сайту, в ньому ведуться записи, короткий або повний опис того чи іншого матеріалу.

Три блоки - громісткий сайт на якому знаходиться багато інформації, категорії та під категорії, чат, статистика та інші. Найкраще підходить для порталів або для великого бізнесу.

Багато блоків - сайт на якому розміщені блоки в купі, тобто перший і другий блок знаходяться на одній стороні, а центральна частина сайту в іншій. Найкраще підходить для ігрових сайтів або мультимедійних сайтів.

Для нашого сайту найкраще підходять два блоки, в першому блоці у нас розміщені товари а у другому розділи за допомогою яких можна вибирати список товарів та головна кнопка корзина.

2.3 Починаємо писати каркас сайту

Структура wordpress теми, гранично проста. У темі ми маємо файл index.php, він відповідає за збірку шматків шаблону. До цього файлу підключені інші: header.php, footer.php. Ці файли (шматки шаблону) використовуються на будь-якій сторінці сайту. Ми знаємо, що не всі сторінки будуються за єдиним шаблоном, тому wordpress тема має інші файли, такі як archives.php або single.php. Також можна створити свій тип сторінок, якщо ви хочете, щоб він категорично відрізнявся від інших на сайті. Це дуже зручно.

Якщо ви уважно розглянете структуру теми, і подивитеся вміст файлів, то інтуїтивно зрозумієте що до чого. Але все ж таки є деякі моменти, які ми розглянемо. Ви завжди зможете повернутися до цієї сторінки і прочитати, як все робиться.

А тепер розглянемо створення шаблону поетапно:

CSS файл, це файл параметрів і дизайнерських рішень для HTML елементів шаблону. Ви повинні перейменувати головний css файл (якщо він у вас не один) на style.css. Далі вам необхідно додати на початку цього файлу наступну закоментувавши інформацію:

/*

Theme Name: Typography Paramount

Theme URI: http://sitear.ru/

Description: An image-less template focusing on Typography.

Author: Sam Parkinson

Author URI: http://sitear.ru

Version: 1.0

.

General comments/License Statement if any.

.

*/

Цей код буде показувати інформацію про тему для адміністраторів. Переконайтеся що він на початку файлу, і нету ніяких пробільних символів перед ним!

Далі я створив ще один файл, під ім'ям 1.css, і помістив його в папку typography-paramount, яку створив у папці wordpress теми. Потрібно чітко дотримуватися цю структуру, щоб wordpress зміг бачити цей файл.

На цьому етапі ми створимо два файли: header.php і footer.php, про які згадувалося раніше. Хоча вони не основні і включені в тему опціонально, вони використовуються в більшості шаблонів, тому ми їх створимо.

Header.php

Почнемо з цього файлу. Створіть файл і надайте йому ім'я header.php, після чого вставте в нього поданий код і збережіть. Цей файл буде відображатися на всіх сторінках нашого шаблону.

<! DOCTYPE html PUBLIC «- //W3C //DTD XHTML 1.1 //EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>

<html xmlns= «http://www.w3.org/1999/xhtml» xml:lang= «en»>

<head>

<title>-</title>

<meta http-equiv= «content-type» content= «text/html; charset=utf-8» />

<link rel= «stylesheet» href= «css/1.css» type= «text/css» media= «screen, projection» />

</head>

<body>

<div id= «wrapper»>

<div id= «header»>

<p class= «description»>

An imageless template focusing on Typography.

</p>

<h1><a href= "#»>Typography Paramount</a></h1>

<ul id= «nav»>

<li><a href= "#»>Link Here</a></li>

<li><a href= "#» class= «active»>Link Here</a></li>

<li><a href= "#»>Link Here</a></li>

<li><a href= "#»>Link Here</a></li>

<li><a href= "#»>Link Here</a></li>

</ul>

</div>

До цих пір, не було нічого особливого у відмінності від простої html / css теми. Але тепер ми замінимо деякі елементи на wordpress теги.

<! DOCTYPE html PUBLIC «- //W3C //DTD XHTML 1.1 //EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>

<html xmlns= «http://www.w3.org/1999/xhtml» <? php language_attributes()?>>

<head profile= «http://gmpg.org/xfn/11»>

<title><? php bloginfo('name');?> <? php wp_title();?></title>

<meta http-equiv= «Content-Type» content= "<? php bloginfo ('html_type');?>; charset=<? php bloginfo('charset');?>» />

<link rel= «stylesheet» href= "<? php bloginfo ('stylesheet_url');?>» type= «text/css» media= «screen, projection» />

<? php wp_head();?>

</head>

<body>

<div id= «wrapper»> <div id= «header»>

<p class= «description»><? php bloginfo('description');?></p>

<h1><a href= "<? php echo get_option('home');?>/"><? php bloginfo('name');?></a></h1>

<ul id= «nav»>

<? php wp_list_pages ('sort_column=menu_order&title_li=');?>

</ul>

</div>

Это только некоторые известные мне теги. Намного больше вы найдете на официальном сайте: codex.wordpress.org.

Footer.php

Тепер створимо так званий «підвал сайту». Створіть файл footer.php і помістіть в нього наступний код. Цей футер, буде відображати рік, назва сайту, і посилання на rss.

· language_attributes () - Виводить тип мови для тегу <html>.

· bloginfo () - Використовується для виведення інформації про сайт, всі параметри можна знайти в кодексі вордпресс.

· wp_title () - Повертає title сторінки.

· wp_head () - підключає javascript та інші необхідні елементи.

· get_option () - отримує необхідні опції для роботи з базою даних.

· wp_list_pages () - виводить посилання на сторінки сайту.

<div id= «footer»>

<! - Please leave this line intact ->

<p>Template design by <a href= «http://www.sixshootermedia.com»>Six Shooter Media</a><br />

<! - you can delete below here ->

© <? php the_time('Y');?> <? php bloginfo('name');?><br />

<a href= "<? php bloginfo ('rss2_url');?>">Grab the feed</a></p>

</div>

</div>

<? php wp_footer();?>

</body>

</html>

· <? phpthe_time ('Y');?> - відображає поточний рік.

· <? php bloginfo ('name');?> - назва блогу.

· <? php bloginfo ('rss2_url');?> - додавання посилання на rssленту блогу.

· wp_footer () - це необхідно для самого ядра wordpress, який додає туди потрібні йому елементи.

Прийшов час створити основний файл wordpress шаблону, який буде підключати верхівку і низ сайту. Створіть файл index.php. Це один з двох обов'язкових файлів wordpress теми (інший style.css). Вставте ново створений файл наступний код:

<? php get_header();?>

<? php get_footer();?>

Цей код, допомагає wordpress отримати інформацію куди підключати header.php і footer.php. Давайте додамо ще кілька рядків між цими тегами:

<div id= «content»>

<? php if (have_posts()): while (have_posts()): the_post();?>

<h2><a href= "<? php the_permalink()?>"><? php the_title();?></a></h2>

<? php the_content();?>

<p><? php the_time ('F j, Y');?> at <? php the_time ('g:i a');?> | <? php the_category (', ');?> | <? php comments_number ('No comment', '1 comment', '% comments');?></p>

<? php endwhile; else:?>

<h2>Woops…</h2>

<p>Sorry, no posts we're found.</p>

<? php endif;?>

<p align= «center»><? php posts_nav_link();?></p>

</div>

Цей фрагмент коду отримує інформацію про наявні постах в блозі і якщо вони є, показує їх. Якщо вони не виявлені, то відображається частина коду після <? Php endwhile; else:?>, Яка дає нам знати, що блог ще порожній.

2.4 Загружаємо матеріал на сайт

Ще дуже важливий пункт, у всіх плагінах, при створенні будь-якого нового типу будь чого, обов'язково потрібно вказувати Name і Label. У першому потрібно вказувати ім'я латиницею, воно потрібно буде для використання в шаблоні, а label - це назва яке буде виводиться в адмінці, тут пишіть що завгодно.

Тепер відвернемося трохи від довільних полів і розповім про роботу плагіна wp shop.

Він влаштований так, що будь-який запис буде вважати як товарну позицію якщо в ній ви вкажіть додаткове поле з певним ім'ям. Якщо у вас все організовано за типом - один товар - одна ціна, тобто у кожного товару не буде різних модіцікацій, то вам вистачить всього одного створеного поля cost_1, в якому ви будете писати ціну. Якщо кожен товар буде мати кілька різновидів з різними цінами, то вам потрібно створити декілька доп полів. Для початку подумайте скільки максимально у вас буде різновидів з ціною і створіть потрібну кількість полів. Імена у них повинні бути строго name_1, name_2, name_3 - тут будете писати найменування, cost_1, cost_2, cost_3 - ??тут ціну. Тобто для name_1 буде встановлена ??ціна cost_1 і т.д.

Для цін і найменувань потрібно вибрати тип поля-textbox, так як тут будемо вводити всього пару слів або цифр. У налаштуваннях відображення праворуч - приберіть галочку з Evaluate Max Length - тоді не буде вводитися обмеження на довжину символів в цьому полі. Для першої ціни - відзначте галочку required, адже у кожного товару повинна бути хоч одна ціна, щоб все нормально працювало. Для другої і далі - можете не ставити, адже не у кожного товару будуть модифікації, там де не буде, то просто не будете заповнювати ці поля.

Ціну потрібно вказувати тільки цифрами. Якщо потрібні не цілі числа, то розділяйте точкою (НЕ коми)

До статі, у цього плагіна є хороше вікі.

Після створення потрібного кол-ва додаткових полів, додамо тестовий товар, перейдемо на сторінку додавання і якщо внизу ви не побачите додаткових полів, які ви створювали, то натисніть на «настройки екрану» - як я говорив раніше, там знайдете вашу створену групу полів і відзначте її галочкою.

Тепер ви можете додати опис у віз редакторі, картинки, а ціну вказати у додаткових полях.

Якщо все буде правильно, то на сторінці товару ви побачите в кутку

2.5 Верстаємо дизайн сайту

Грамотна розробка сайту - це складний багатоетапний процес. Верстання сайтів є невід'ємною частиною процесу виготовлення сайтів. Верстання сайту - це процес формування веб-сторінки по готовому макету. Цей процес містить в собі створення коду сторінки за допомогою зрозумілої браузерам мови розмітки гіпертексту html, і оформлення її за допомогою каскадних таблиць стилів (CSS). Не треба самому намагатися верстати сайт, доцільніше замовити послуги верстальника.

Адже професійне верстання сайтів повинне враховувати численні особливості, як правил верстання, так і параметрів відображення документів в різних браузерах.

Верстання і дизайн ширини сторінки

Розробка сайту, щоб не зламати продуманий дизайн, повинна враховувати той факт, що користувачі мережі Інтернет мають монітори з різним дозволом. В цьому випадку існує два варіанти дизайн-макета сайту: сайт з фіксованою шириною і гумовий сайт. Ширина фіксованого сайту визначається з розрахунку того, що за статистичними даними більшість користувачів використовують монітори з дозволом 1024х768 пікселів.

Отже, для того, щоб уникнути появи горизонтальної смуги прокрутки і спотворення дизайну, треба в середньому брати ширину макету приблизно 800-990 пікселів. Недолік при такому методі верстання - це неефективне використання вільної площі. Гумовий макет сайту виходить за рахунок того, що одиницями виміру при верстанні дизайну у більшості своїй виступають відсотки, що дозволяє розтягнути макет на усю ширину вікна браузеру. Верстання і дизайн гумового макету найбільш прийнятні.

Верстання сайтів з урахуванням кросбраузерностi

Сьогодні існує цілий ряд популярних браузерів, використовуваних людьми для роботи в мережі Інтернет. До них відносяться: Opera, Mozilla Firefox, Google Chrome, Netscape Navigator, Safari, Internet Explorer та інші. Кожен з них має декілька версій, і кожен може відображати одну і ту ж сторінку, представлену у форматі html, по-різному. Усі творці браузерів прагнуть прийти до єдиного стандарту використання мови гіпертекстової розмітки, але доки існують розбіжності, тому верстання сайтів повинне враховувати кросбраузернiсть.

Грамотне верстання сайтів з чистим кодом

Ще одне правило хорошого тону при верстанні сайту - це чистий і красивий код. Що це означає? Це означає, що код html розмітки сторінки красиво відформатований, містить коментарі і виділені логічні блоки. Використання каскадних таблиць стилів (CSS) дозволить очистити код від зайвих тегів і зробити вагу сайту в цілому значно менше. Верстання сайтів з використанням усіх цих маніпуляцій потрібне для того, щоб спростити код, і зіткнутись з найменшою кількістю проблем при його виправленні, модифікації і доопрацюванні. Правильний компактний код полегшить індексацію сайту пошуковими системами, а мала вага скоротить час завантаження Вашого сайту.

Табличне і блокове верстання сайтів

Верстати сайт можливо двома принципово різними способами. Перший спосіб - за допомогою таблиць. Табличне верстання використовує елементи розмітки, що не відповідають тій семантиці, яку вони несуть з метою отримання зовнішніх ефектів, постільки, поскільки спочатку таблиці не були призначені для побудови каркаса сторінок, а служили для стандартного введення даних. Для того, щоб верстати сайт за допомогою табличного верстання, частенько виникає необхідність використання безлічі вкладених таблиць. Такий підхід нерідко сильно утруднює обробку браузером сторінок, збільшує розмір документу знижує швидкість завантаження файлів, і може привести до появи помилок в коді. Зручніше і правильно, з точки зору переконань про розділення змісту і оформлення, верстати сайт за допомогою шарів (блоків). Блокове верстання сайтів дає більше можливостей, дозволяє зробити код компактніше, і збільшити швидкість завантаження веб-сторінки. Через CSS властивості шарів настроювати набагато зручніше. За допомогою верстання шарами можна набагато ефективніше розробити сайт, який коректно відображатиметься у браузерах.



Висновки по роботі та рекомендації для подальших досліджень

Тепер ми готові до створення свого проекту. Навчилися писати Інтернет магазин, вибирати типи мов. З легкістю вибираємо назву сайту та його домен. Головне визначаємо колір, який підходить до тематики сайту. В подальших дослідженнях буде реалізовано покупку товару через платіжну система та через пошту, тобто можна буде купити товар через платіжну систему webmany або зробити передоплату та отримати товар поштою. Рекомендую використовувати даний сайт в продажі домашніх товарів та канц. товарів або для продажі іграшок.



Література

1. Б. Лоусон, Р. Шарп - Изучаем HTML 5.

2. П. Лабберс - HTML 5 для профессионалов.

3. Ч. Муссиано, Б Кеннеди - HTML & XHTML. Подробное руководство.

4. Бен Хеник - HTML и CSS Путь к совершенству.

5. Дронов.В. - .HTML.5.CSS.3.и. Web 2.0. Разработка.современных. Web-сайтов.

Размещено на Allbest.ru

...