Веб Дизайн

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

Поэтому пожелаю вам преодолеть этот непростой барьер, во всём разобраться и подумать ещё раз. Кажется совсем запугал, ну, решились, тогда ВПЕРЁД!

Примерный план работы:

1. Тема сайта у вас есть — то что не давало покоя голове.

2. Доменное имя придумано, а может даже и зарегистрировано (где лучше и дешевле расположить свой сайт, т.е. хостинг).

3. HTML редактор — Дримвьювер или Фронтпейдж, а так же Notepad++ (я использую его — очень удобный редактор). Без них невозможно создание веб страниц.

4. Adobe Photoshop скачан и готов к работе. Ведь без этого графического редактора тоже не обойтись, если вы захотите иметь на своём сайте картинки и фотографии — для правки и коррекции изображений.

5. Тексты статей для сайта составлены и сохранены в Office, или хотя бы в простом блокноте.

6. Картинки разные, по теме сайта, тоже скачали откуда только можно.

7. Все папки и файлы, на компьютере созданы, (ну, например, «мой_сайт»), в которую поместили тексты, картинки и другие элементы сайта. В системном разделе — (С:) всё это держать не советую, т.к. иногда приходится этот раздел форматировать, поэтому лучше поместить это в другой раздел, к примеру (D: или F: и т.д.).



Шаблон сайта

Итак, приступаем к вёрстке собственного шаблона. Для начала создаём и называем папку для хранения файлов нашего будущего веб проекта (обычно имя сайта), а затем создаём внутри неё текстовый файл с расширением «.html» и названием «index» (первая страница), а когда сюда же сохраните файл «index» сделанный в HTML редакторе, текстовый файл можно удалить.

Ещё создаём внутри этой же папки и размещаем текстовый Файл с именем «style» и расширением «.css» (в нём будут лежать наши внешние файлы стилей).

Сюда же можно добавить и ещё одну папку «img», куда будем кидать картинки и фото используемые при вёрстке сайта. Всё это хорошо видно на изображении рядом. Ещё раз повторюсь, для правильной и надёжной работы, файлы „index”, „style” и „img” должны лежать в одной папке. Ну, а теперь скопируйте приведённые чуть ниже „HTML ТЕГИ” в свой HTML редактор и сохраняем как „index.html”. Для работы с кодом довольно удобно использовать универсальный редактор „Notepad++” с подсветкой, хотя, при дальнейшем обладании навыком работы, более функциональным решением может оказаться „Дримвьювер”.



<!— Это ваш первый DIV шаблон —> <!DOCTYPE HTML> <html> <header> <!— Основные Мета-теги расположены между тегами (head)…(/head) —> <!— Мета-тег Формат преобразования Юникода, 8-бит —> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <!— Мета-тег Краткое описание страницы —> <meta name=»description» content=»краткое описание страницы» /> <!— Мета-тег Ключевые слова —> <meta name=»Keywords»ключевые слова»> <!— Мета-тег Название страницы —> <title>Шаблон-1 (3 колонки)</title> <!— Мета-тег Адрес Таблицы стилей CSS —> <link href=»style.css» rel=»stylesheet» type=»text/css»> </head> <body> <!— Начало DIV-блоков 1-й «Container» Основной контейнер —> <div id=»container»> <!— Шапка сайта —> <div id=»header»> <!— Между тегами (h1)и(/h1) вписываете своё название сайта —> <h1>Название Сайта</h1> <p>ваш девиз или лозунг</p> </div> <!— Меню сайта —> <ul id=»menu»> <li><a href=»http://ваш_сайт/имя_страницы-1.html»>Раздел-1</a></li> <li><a href=»http://ваш_сайт/имя_страницы-2.html»>Раздел-2</a></li> <li><a href=»http://ваш_сайт/имя_страницы-3.html»>Раздел-3</a></li> <li><a href=»http://ваш_сайт/имя_страницы-4.html»>Раздел-4</a></li> <li><a href=»http://ваш_сайт/имя_страницы-5.html»>Раздел-5</a></li> </ul> <!— Левая колонка —> <div id=»left»> <br /> <h1>Левая колонка</h1> <br /> <p>Ваш основной КОНТЕНТ — Здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста. Здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста.</p></div> <!— Правая колонка —> <div id=»right»> <br /> <h1>Правая колонка</h1> <br /> <p>Здесь пишите текст для ПРАВОЙ колонки — здесь пишите просто много текста, здесь пишите просто много текста.</p> </div> <!— Основной контент Сайта — Центральная колонка —> <div id=»content»> <br /> <h1></h1> <br /> <p>Здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста. Здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста.</p> <p>Здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста. здесь пишите просто много текста. здесь пишите просто много текста, здесь пишите просто много текста. здесь пишите просто много текста. здесь пишите просто много текста. Здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста.</p> <p>Здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста.</p> </div> <!— Clear Атрибут, который опускает подвал сайта ниже всех блоков. Нужен для корректной работы макета. —> <div id=»clear»></div> <!— Подвал — Footer —> <div id=»footer»> <p>Copyright © Все права защищены.</p></div> </div></body></html>


первый DIV шаблон

Ваш шаблон готов. Если всё сделано верно у вас должно получиться что-то вроде этого. Да примерно так будет выглядеть ваш первый шаблон, а далее может и весь сайт, если вы освоите ДИВ-ную вёрстку, что как видите не очень и трудно, просто надо захотеть и попробовать — всего лишь.

Не нравится в три колонки можете выбрать в две колонки. Выбирайте любой шаблон — какой понравится, в общем надо начинать и не „тянуть кота за хвост”, не останавливайтесь, желаю всем УСПЕХОВ и огромной УДАЧИ!!!

2020-09-22

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *