Как правильно оформить сайт-визитку?
Создавая сайт-визитку, нужно выделиться среди конкурентов, но не переусердствовать в оригинальности. Как оформить визитку, чтобы она вызвала у клиентов уважение к специалисту? Рекомендации по наполнению сайта информацией, интересной заказчику.
Сайт-визитка – это универсальный способ прорекламировать себя в интернете, расширить круг клиентов. Как и обычная визитка, веб-версия должна содержать основную информацию о специалисте или компании: название (имя), перечень оказываемых услуг, контактные данные.
Разводить длинные разговоры о том,как сделать свой сайт мы не будем: на любом конструкторе визитку можно собрать за несколько часов. Сосредоточимся на внешнем исполнении визитки, чтобы посетители не проходили мимо.
Не повторяйте ошибки
Правила созданы для того, чтобы их нарушали, но есть вещи, игнорирование которых приводит к провалу. Эксперименты не запрещены, но чтобы пробовать новое, нужно знать, как обычно оформляется сайт-визитка.
Чего быть НЕ должно:
-
Большого количества страниц. Это визитка, а не монография.
-
Элементов, не выполняющих полезные функции. Зачем на визитке календарь или виджет погоды?
-
Вырвиглазного дизайна с применением ядовитых цветов. Поберегите глаза посетителей.
Начали с негативных моментов, чтобы вы сразу поняли, чего следует избегать. Часто начинающие веб-мастера в поисках вдохновения смотрят сайты конкурентов. Если вы увидите на них такой ужас, не копируйте его, пожалуйста. Сделаем интернет красивым вместе. Рейтинг конструкторов сайтов поможет выбрать инструменты, вам останется лишь правильно их применить, не забыв об эстетической стороне веб-мастеринга.
Просто и привлекательно
Если у вас есть обычная визитка, возьмите её в руки. Этот кусочек плотной бумаги теперь будет эталоном, который нужно реализовать в виде сайта. Понятно, что на экране компьютера можно показать чуть больше, чем на маленькой визитке, но здесь важно понять суть: минимум лишней информации, но максимум информативности.
Важно соблюсти баланс, не превратить краткость в сухость. Пишите о преимуществах – добавляйте цифры и факты (например, в 2015 году выполнили для такой-то известной организации такие-то работы).
-
Сделайте на сайте несколько разделов – О нас, Услуги, Преимущества, Цены, Контакты. Необязательно создавать для каждого раздела отдельную страницу. Визитку можно сделать одностраничной: пользователь будет прокручивать страницу вниз, открывая новые разделы;
-
Обязательно добавьте фотографии. Проведите строгий отбор материалов – только лучшее, показательное, привлекательное, ничего лишнего;
-
Убедитесь, что контактные данные указаны так, что посетителям не придется их искать;
-
После заполнения сайта информацией посмотрите на него и еще раз удалите всё лишнее. Выполните чистку несколько раз: смысл останется, а текста останется меньше.
Посетителю должно быть комфортно на сайте. Понятная структура, приятный дизайн с правильным подбором цветов, отсутствие элементов, издающих звуки – если выполнить этот минимум, вы уже выделитесь на фоне большинства конкурентов. Пользователи интернета любят глазами. Доставьте им эстетическое удовольствие, и получите новых клиентов.
Источник: uGuide.ru
joomla3x.ru
Создаем сайт-визитку. Урок 1. Экскурс и подготовка к работе
Что такое сайт-визитка? Как создать сайт-визитку?
Думаю, не стоит объяснять, что такое визитка. Если стоит, то в двух словах скажу. Это такой маленький сайт, буквально пару страниц, где находится какая-либо краткая информация о чем-либо: о человеке, о предмете, о фирме и т.д. Обычно с таких сайтов и начинают свою профессиональную карьеру все web-программисты и дизайнеры. Для того, чтобы создать любой сайт (не только визитку), существует множество способов. Можно обложиться литературой и начать изучать язык программирования (PHP, HTML…) и писать страницы буквально в блокноте в виде кода. Можно обучиться работе специального ПО (к примеру, Adobe DreamViewer). А можно установить комплект небольших программ и библиотек, с помощью которых несложно визуально соорудить наш будущий сайт. Вся прелесть последнего варианта в том, что на выходе получается достаточно привлекательный полупрофессиональный сайт без особого вникания в работу таких сложных технологий, как PHP, MySql и пр. Именно на этом мы и остановимся.
Какое ПО необходимо для создания сайта-визитки?
Тут все просто. Для начала надо скачать весь необходимый софт. А именно платформу, на чем будет “крутиться” наш сайт и систему управления сайтом. Естественно, мы выбираем свободно-распространяемое ПО, тем более с каждым годом оно становится все лучше. Платформа: PHP+MySQL+Apache. Вкратце разберем, что это такое. PHP – язык программирования, очень мощный и гибкий. Его можно изучать годами. На нем пишутся как сами страницы, так и приложения для них. MySQL – управление базой данных. Хороший сайт всегда должен иметь базу данных. Если непонятно, зачем – пока опустим этот вопрос. Просто так надо. Apache – web-сервер. Аналог IIS от Microsoft. Он необходим для удобства, чтобы на наш будущий сайт мы заходили просто через браузер по удобному выбранному нами имени. Каждый их этих компонентов можно скачать отдельно, по всем есть одноименные сайты. Далее необходимо их связать между собой. Более скажу – именно так рекомендуют сделать все учебники. Но у нас нет времени в этом разбираться, пока для нас важен сам результат. Поэтому качаем пакет Denwer.Туда входит все, что нам нужно. Следующий урок будет посвящен установке. Система управления сайтом (CMS): Joomla. CMS – связующее звено между нами и PHP+MySQL+Apache. Другое название – движок сайта. По сути это сайт, который поможет нам сделать наш сайт, оболочка в некотором роде. Естественно, есть аналоги, которые не уступают. Есть коммерческие, есть бесплатные. Но лично мне приглянулась Joomla. В интернете и печатных изданиях много информации по этому продукту. По секрету добавлю, что альфа-версия нашего сайта была сделана именно на Joomla, но ввиду некоторых ограничений, мы вынуждены были перейти на другой движок.Подготовка к работе. Что еще надо для создания сайта-визитки?
Естественно, нужна рабочая среда. А именно относительно чистая система. Неважно, Windows 7 или XP. Я буду работать на Windows XP, установленной на моей системе из-под виртуальной машины VMWare Player (тоже бесплатный продукт). Если стоит Skype, убедитесь, что не стоит галочка об использовании 443 порта – иначе не заработает сервер Apache. Браузер – тоже без разницы. Лично я буду использовать Internet Explorer 8. Ну и свежую голову нам надо! После того, как мы скачали все дистрибутивы, можем приступать ко второму уроку.
litl-admin.ru
Как создать сайт-визитку начинающему дизайнеру
Мастерство приходит с опытом, но обычно проистекает из малого. Если вы – начинающий веб-дизайнер, имеете художественные задатки и некоторые навыки, можете попробовать себя в создании сайта. В качестве первой пробы пера можем порекомендовать создание сайта визитки. Это наиболее простой в реализации тип ресурса. При этом, вы сможете сполна проявить свои возможности и продолжить их развивать до сколь-угодно высокого уровня. Главное – попробовать.
Если задумываетесь о первом проекте и не знаете с чего начать, обратите внимание на конструкторы сайтов. Они позволят избежать трудностей кодинга, верстки и прочих малоинтересных творческому человеку вещей. При этом, создать сайт визитку на одной из таких платформ будет значительно проще, чем на CMS. О рукописных сайтах речь не идёт – это удел бывалых программистов, с которыми нам не по пути.
Вы сможете реализовать творческий потенциал, не особо вдаваясь в то, как работает техническая сторона вопроса. Сегодняшний уровень развития некоторых конструкторов дорос до того, что даже опытные вебмастера и веб-студии делают на них свои и клиентские сайты. При этом все довольны. Нам ли не понимать, что означает дизайн фирменного сайта студии, которая их делает? Это демонстрация возможностей, реклама своих услуг и большая ответственность за ошибки. Использование конструктора автоматически доказывает высокий уровень их состоятельности в качестве коммерческих платформ.
Большинству людей всё равно, на чём сделан посещаемый ими ресурс, лишь бы пользу приносил да глаз радовал. Такая же ситуация и с заказчиками – всем нужен результат, а не гордое заявлени е о том, сколько лет ушло на создание «вот этого идеального самописного сайта». Время – деньги.
Итак, как сделать сайт визитку? А главное – на чём? Если вышеизложенные доводы имеют вес для вас, давайте перейдём ко краткому рассмотрению двух наиболее достойных, на наш взгляд, конструкторов сайтов.
Конструктор сайтов uCoz
О нём знают все – однозначно, самый популярный и функциональный инструмент среди себе подобных. Возможности вполне сравнимы с полноценной CMS. Отличие лишь в том, что ним проще пользоваться. Да, на первый взгляд, он может показаться непростым для освоения ввиду обилия возможностей. Но в этом его сила и превосходство над другими. Создав сайт на uCoz, вы сможете в будущем, уже набравшись опыта либо же ощутив необходимость, очень серьёзно его масштабировать. Здесь возможно добавление способов оплаты, галерей, видео, разнообразных форм и множества прочих вещей. Интернет-магазин, блог, форум, лэндинг – всё это можно качественно сделать на uCoz. Не случайно, в Сети немало веб-студий, сайты которых выполнены именно на нём. Они классно выглядят, подчёркивая отличную гибкость платформы и возможности реализации самых смелых дизайнерских фантазий.
Создать сайт при помощи uCoz
Конструктор бизнес-сайтов uKit
Это специализированный конструктор, хорошо заточенный под создание бизнес-визиток начинающими вебмастерами. Новая платформа от создателей uCoz, что само по себе уже говорит о качестве и размахе проекта. uKit менее гибок и масштабируем, нежели его старший брат, но заметно более прост для освоения. Тут вы найдёте полный набор возможностей для разработки несложного по структуре, но очень толкового и привлекательного сайта. Возможно, вы даже захотите использовать один из штатных шаблонов, слегка подправив под себя, – они здесь действительно хорошо выполнены.
uKit поддерживает drag-n-drop и основан на концепции WYSIWYG. Другими словами, вы будете визуально выстраивать структуру страниц и перетаскивать туда изображения. Конечный результат получится таким, каким его видите на экране. Никакого кодинга. При этом получите гарантию валидности кода сайта – uKit всё сделает сам.
Создать портфолио при помощи uKit
Заключение
Вышеописанные платформы лишат вас головной боли, связанной с вопросом, как создать сайт визитку. Яркую и функциональную. Они позволят раскрыть ваш дизайнерский потенциал, не требуя при этом вникать в тонкости программирования. uCoz и uKit лучшие в своих нишах – удобные, простые и мощные одновременно. Убедитесь в этом сами!
www.dejurka.ru
Как бесплатно создать сайт визитку за 5 минут
В сегодняшнем видеоуроке, я покажу, как и где создать сайт визитку за 5 минут и заработать на нем!
Если вы на моем блоге в первый раз и ищите, где создать сайт визитку, то вы пришли по адресу! Вы узнаете, как бесплатно создать сайт конструктор, интернет магазин, фотогалерею или то, что нужно именно вам!
Недавно я показывал сайт, который сделал по теме бизнеса с биокатализаторами MPG.
Можете еще раз посмотреть на него сейчас — Ekonom-Toplivo.ru
Сегодня и вы сможете сделать сайт визитку совершенно бесплатно! Да еще и получить домен вдобавок и раскрутку…
Неплохо, да? Так вот, открываю тайну — когда я искал где создать сайт совершенно случайно увидел где-то — «С помощью нашего сервиса, вы можете создать бесплатный сайт визитку, за 5 минут!»
Или что-то подобное… Почему бы не попробовать?
Как видите сайт выглядит довольно неплохо и идеально подходит для бизнеса!
Когда то я уже писал о том, как сделать блог для бизнеса, но сайт это немного другое…
Поэтому, если вы развиваете свой бизнес в сети и работаете с продуктом своей компании, то вы тоже сможете создать сайт-визитку или интернет магазин не обладая особыми познаниями в сайтостроении и HTML!
Более того! Далеко не все, кто приходят заработать в Интернете, захотят возиться с тем, чтобы делать сайты! Поэтому, если у вас есть команда, то вы можете предложить сделать для них сайт на платной основе!
Как всегда сначала все объясню в текстовом варианте!
Где создать сайт визитку за 5 минут
На самом деле, если вы поищите в интернете по темам — «как создать сайт за 5 минут», «быстро создать сайт» или «где создать сайт», то найдете массу предложений!
Почему меня заинтересовал именно этот сервис? У меня не стоял вопрос как быстро создать сайт или где создать сайт! Мой вопрос был скорее — где быстро создать качественный сайт!
Сервис Setup.ru полностью удовлетворил мой запрос!
Кроме того, сервис предлагает такое разнообразие шаблонов, что вряд ли найдется кто-то, кто останется не удовлетворен!
Но, если даже не найдется шаблон, который нужен именно вам, то можно предложить его сделать создателям сервиса! Причем опять же совершенно бесплатно!
Самое же интересное, что кроме создания сайта, сервис еще и поможет вам его раскрутить! Вам подберут ключевые слова и будут выделять каждый месяц деньги на продвижение сайта!
Фантастика?
Как создать сайт визитку за 5 минут
Кликайте на ссылку Setup.ru и вы сразу попадете на страничку с предложением — Создай и раскрути свой сайт бесплатно! и ниже кнопка — создать сайт, на нее и нажимаем не колеблясь!
Вводим свое имя и существующий Mail, два раза вбиваем пароль, ставим галочку и жмем «зарегистрироваться»…
Далее следует процедура регистрации. Но лучше сначала сходите в свою почту, которую указали и подтвердите регистрацию кликнув на ссылку в письме…
После чего попадете опять на страницу с которой ушли.
Имя сайта нужно написать латиницей. Пока у вас нет домена так будет выглядеть ссылка на него. Не забудьте проверить доступно ли выбранное вами имя.
Название сайта и Краткое описание заполняются вполне по-русски! В дальнейшем их можно будет изменить.
Нажимаем кнопку далее и переходим к выбору шаблона!
Сначала из более чем десяти типов нужно выбрать тот, который соответствует тематике нашего сайта. Затем выбирайте категорию! Например, тип — автомобили, категория — автозапчасти! Или тип — бизнес и финансы, категория — forex!
После выбора шаблона (который тоже можно легко менять в дальнейшем), считайте, что вы создали сайт бесплатно за 5 минут!
На следующей странице выбирайте под вашим сайтом редактировать и начинайте наполнять ваш сайт контентом!
Как получить бесплатный домен для вашего сайта визитки
Когда вы заполните десять страниц вашего сайта и нажмете на кнопку опубликовать, то вас обрадует еще один приятный сюрприз! Вы теперь можете получить домен для созданного сайта совершенно бесплатно!
Для этого подберите доменное имя и заполните форму со своими данными и через несколько часов сайт, который вы создали будет открываться по имени вашего домена!
Некоторые опасаются вводить свои реальные данные, но в нашем случае, поверьте, это вполне обосновано. На любом хостинге у вас запросят документы, таков закон. Но это делается не для того, чтобы создать вам неудобства, а наоборот, чтобы предотвратить проблемы в будущем…
Простые примеры — кто-то завладел вашими логином и паролем для входа, сменил их и пользуется теперь, как своим. Как вы докажите, что сайт визитка и домен принадлежат именно вам?
Или, кто-то создает сайт для распространения запрещенной информации, террористы и кто там еще… Вот потому и нужны реальные документы, а не так как вы привыкли в соц.сетях…
Некоторые хостеры даже требуют сканы документов, что нормально самом по себе…
Почему для сайта визитки выгодно перейти на тариф PRO
Система дает вам возможность создать сайт бесплатно и бесплатно пользоваться им, как вам заблагорассудится!
Но, вы должны понимать, что создатели тоже что-то хотят взамен. Абсолютных альтруистов не бывает!
Пока вы пользуетесь бесплатным тарифом, на вашем сайте будет присутствовать баннер Setup.ru и внешние рекламные ссылки. Так же ссылки с вашего сайта будут закрыты от индексации.
Кроме того, вы не сможете работать с кодом страниц сайта, следовательно не сможете украшать текст и вставлять видео!
Для кого-то это небольшие минусы, а для кого-то довольно ощутимые…
Поэтому и предложен тариф PRO. За символическую плату, все эти недостатки будут убраны и вы сможете уже в полной мере воспользоваться всеми возможностями сайта, который создали бесплатно!
Лично я считаю это вполне справедливым! И меня ничуть не напрягает такая плата за труд создателей!
Более того, могу сказать. что это действительно символическая плата за такой труд!
Для серьезных бизнесменов есть тариф «Вечный». Вы оплачиваете единоразово и больше не платите вообще. Понятно, что цены меняются, сколько и что стоит лучше смотреть на самом сайте-конструкторе Setup…
Еще один ощутимый плюс сервиса Setup.ru в том, что нам есть отличная партнерская программа! То есть зарабатывать можно не только создавая сайты для других, но и рекомендуя сервис!
Хотя, если честно, я бы его рекомендовал, даже если бы не было партнерки! Он стоит того!
Где еще вы сможете создать сайт визитку бесплатно за 5 минут и получить возможность большого выбора шаблонов, домен в подарок и раскрутку?
Если вы знаете другой такой сервис, то пишите в комментах, было бы интересно посмотреть!
Если не все понятно из печатного объяснения, то смотрите видеоурок, который можете бесплатно скачать себе на компьютер, если познакомитесь с этим постом…
Как и где создать сайт визитку за 5 минут и заработать на нем?
Понравилась статья? Расскажи друзьям!
sergmedvedev.ru
❶ Как самому сделать сайт-визитку 🚩 как сделать яндекс визитку 🚩 Интернет 🚩 Популярное
Автор КакПросто!
Сайт-визитка не содержит разделов, меню, скриптов и других атрибутов привычного веб-портала. Он состоит из одной страницы, на которой размещено единственное изображение. Благодаря тому, что оно значительно крупнее бумажной визитки, информации на нем также помещается больше.
Статьи по теме:
Инструкция
Выберите размеры картинки, которая будет размещена на сайте-визитке. Большинство пользователей просматривает сайты либо на ноутбуках с 15-дюймовыми экранами, либо на настольных компьютерах с 19-дюймовыми мониторами. Чаще всего в первом случае разрешение составляет 1024х768, а во втором — 1280х1024. Учитывая, что окно браузера и нижняя панель графического интерфейса ОС отнимает часть экранного пространства, лучше всего делать изображение размером в 1000х700 пикселей. Такой сайт-визитку будет одинаково удобно просматривать пользователям как ноутбуков, так и настольных машин.
Для создания изображения используйте тот графический редактор, к которому вы привыкли. Так вы справитесь гораздо быстрее, а результат получится качественнее, чем при попытке переучиться на незнакомую программу. Оптимальной компоновкой изображения является следующая: в верхней части — логотип организации и ее название, в нижней — контактные данные (телефоны, расположение, адреса электронной почты). В середину поместите фотографию, наиболее четко характеризующую организацию, например, качественный снимок образца продукции. Поверх нее разместите текст с перечнем выпускаемых организацией товаров или оказываемых ей услуг. Чтобы буквы были одинаково хорошо видны как на темных, так и на светлых участках фотографии, используйте эффект тени или контура. Чтобы сайт загружался быстрее, используйте формат JPEG с коэффициентом сжатия порядка 85.
Хостинг для сайта выбирайте с учетом финансовых возможностей организации. Возьмите за правило: если средства на платный хостинг есть, выберите его, или хотя бы приобретите домен второго уровня. Это резко повысит ваш престиж в глазах окружающих, а затраты быстро окупятся. Но помните, что даже сайт с доменом второго уровня, размещенный на платном хостинге, бесполезен, если не инвестировать средства в его раскрутку.
HTML-код сайта (без учета ключевых слов для поисковых систем) может быть таким:<head><title>Название вашей организации</title></head><body bgcolor=код_желаемого_цвета_фона><img src=имя_картинки.jpg></body>
Совет полезен?
Распечатать
Как самому сделать сайт-визитку
Статьи по теме:
Не получили ответ на свой вопрос?
Спросите нашего эксперта:
www.kakprosto.ru
Как создать сайт-визитку уроки
В этом уроке мы Создадим наш первый Сайт за 8 простых шагов.Давайте сразу и приступим.
Мы не будем сначала долго изучать теорию, а сразу начнем практиковаться. С необходимыми для сайтостроения инструментами будем знакомиться по мере того, как будет возникать в них надобность.
Наверняка, вы много раз встречали сайты, продающие различные инфо-товары. Это такие длинные одностраничные сайты, на которых размещается фотография автора, текст, разные картинки. Такой вариант сайта можно использовать как простой вариант сайта-визитки.
Создать такой сайт можно очень быстро, буквально за несколько минут, а выглядит он вполне симпатично.
Мы будем сейчас Создавать Самостоятельно Сайт именно такого вида.
Причем вариантов оформление такого сайта бесконечно много. Далее я покажу, что и как можно менять, чтобы настроить дизайн под себя.
Итак, прежде всего, нам нужно создать 2 документа:
1.
Html – файл – это и есть страница нашего сайта.
Заведите себе отдельную папку для сайта. Затем создайте простой текстовый файл. Откройте его двумя нажатиями на левую кнопку мыши. И после этого сразу сохраните следующим образом: нажмите на кнопку «Файл», затем «Сохранить как» и в строке «имя файла» пишите index.html , а в «Тип файла» выбирайте «все файлы» и нажимайте кнопку «сохранить».
Поздравляю! Вы только что создали Html-файл нашей странички!
Видите, теперь значок файла сменился с блокнота на значок браузера?
Теперь, если вы попытаетесь его открыть двойным нажатием левой кнопки мыши, то откроется окно браузера с пустой страницей сайта. Попробуйте.
Поэтому, дальше, чтобы его открыть для редактирования, придется при наведении на него курсора мышки, нажимать правую кнопку мыши и выбирать в раскрывшемся списке «Открыть с помощью» — «Блокнот». Пока оставьте этот файл в покое.
2.
Создаем файл CSS.
Создайте еще один текстовый файл. Откройте его и сохраните также через «Сохранить как..». В строке «имя файла» пишите style.css , а в «Тип файла» снова выбирайте «все файлы» и нажимайте «сохранить».
Отлично! Вы создали файл каскадной таблицы стилей!
Для чего нам нужен этот файл? Обычно таблицы стилей CSS используются для управления стилем на многостраничных сайтах. Хотя при создании нашего одностраничного сайта можно было бы обойтись без создания файла CSS, но мне хочется, чтобы вы сразу приучались все делать более профессионально.
Итак, если наш первый файл – это страничка самого сайта со структурой и контентом(содержанием) сайта, то файл CSS отвечает за стиль этого самого контента.
Пока не понятно, но постепенно разберемся.
Сразу вставьте в этот документ следующий код:
body {
background-color:#999999;
margin-top:10px;
}p {
font-family:Verdana;
color:#000000;
text-align:left;
}h2 {
color:#000000;
font-family:Verdana;
font-size:19px;
text-align:left;
}
Сохраните и закройте этот файл.
В конце урока мы вернемся к файлу style.css и разберем, что всё это значит, а пока переходим к следующему шагу.
3.
Возвращаемся к файлу index.html . Открываем его для редактирования, как указано выше.
Копируем отсюда и вставляем в файл следующий код:
<! DOCTYPE HTML PUBLIC»-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<head>
<title>Первый сайт — заголовок сайта</title>
<meta http-equiv=»Content-Type» content=»test/html; charset=windows-1251″>
<meta name=»Keywords» content=»ключевые слова, через запятую»>
<meta name=»Description» content=»Описание нашего сайта»>
<link href=»style.css» type=»text/css» rel=»stylesheet»>
</head>
<body></body>
</html>
Нажимаем сохранить.
Что же мы такое сделали?
Мы создали как бы «почву» для нашего сайта. Этот шаг является типовым, его нужно делать каждый раз при создании новой странички сайта.
Капельку теории сайтостроения в двух словах:
При создании сайтов в html мы имеем дело с различными элементами, с помощью которых и создается внешний вид страницы. Эти элементы называются тегами. Например, есть свои теги для создания абзаца, таблицы и т.д.
Пишутся теги, как вы успели заметить, внутри треугольных скобочек: < > Например, <body>.
Тэги бывают парные, требующие закрытия, и, одинарные, закрытия не требующие.
Например, тег <body>, внутри которого находится содержание странички сайта, закрывается </body>.
Запомните, что все содержимое (контент) сайта у нас будет располагаться внутри тегов <body> </body> !
4.
Мы будем создавать наш сайт на основе таблицы.
Давайте решим, какой ширины будем создавать сайт.
Исходя из того, что самое распространенное разрешение мониторов 1024х768, не рекомендуется делать ширину сайта более 1000 рх.
В нашем примере мы сделаем ширину 700 рх, а вы, если хотите, можете поставить любую другую.
Прямо сейчас нам понадобится тег таблицы – он парный:
<table> </table>
Итак, создаем таблицу, состоящую из одной строчки и одного столбца.
(копируем и вставляем нижележащий код между тегами <body> </body>)
<table border=»2″ bordercolor=»#993333″ cellspacing=»0″ cellpadding=»10″ bgcolor=»#ffffff» align=»center»>
<tr>
<td></td>
</tr>
</table>
Сохраните результат.
Для образования строки в таблице используется парный тег <tr> </tr>
Для образования столбца – парный тег <td> </td>
Столбцы создаются внутри строк.
Сейчас следует сказать, что для расширения возможностей тегов используются, так называемые, атрибуты.
В нашей таблице мы использовали следующие атрибуты:
border=»2″ – толщина рамки таблицы. Если поставить «0», то рамка видна не будет.
bordercolor=»#993333″ – цвет рамки ячеек таблицы. У нас указан коричневый цвет. Другие цвета, используемые в сайтостроении, можно посмотреть тут >>
cellspacing=»0″ — расстояние между ячейками таблицы, здесь оставляем 0.
cellpadding=»10″ – внутренний отступ в ячейке таблицы для содержимого таблицы.Используется, чтобы текст не прилипал к краю таблице. Можете поставить на свой вкус, не обязательно «10».
width=»700″ – это ширина таблицы, как мы и договаривались. Можете поставить свой вариант.
bgcolor=»#ffffff» – цвет фона таблицы. Сейчас стоит белый. Можно установить любой по своему вкусу.
align=»center» – это атрибут выравнивания по горизонтали. Значение «center» означает, что таблица будет выровнена по центру страницы. Другие варианты выравнивания: «left» – слева и «right» — справа
5.
Как вы поняли, контент нашего сайта будет располагаться внутри нашего единственного столбца, т.е. тега <td> </td>.
Давайте добавим Заголовок нашей странички, который поместим внутри тега заголовка
<h2> </h2>.
Например, такой:
<h2>Сайт-визитка начинающего веб-дизайнера</h2>
Снова сохраните результат.
Посмотрите на результат своей работы. У вас должно получиться так:
Если у вас получилось что-то не так, проверьте, правильно ли вы все сделали.
У вас сейчас весь html-код должен выглядеть следующим образом:
<! DOCTYPE HTML PUBLIC»-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<head>
<title>Первый сайт — заголовок сайта</title>
<meta http-equiv=»Content-Type» content=»test/html; charset=windows-1251″>
<meta name=»Keywords» content=»ключевые слова, через запятую»>
<meta name=»Description» content=»Описание нашего сайта»>
<link href=»style.css» type=»text/css» rel=»stylesheet»>
</head>
<body><table border=»2″ bordercolor=»#993333″ cellspacing=»0″ cellpadding=»10″ bgcolor=»#ffffff» align=»center»>
<tr>
<td><h2>Сайт-визитка начинающего веб-дизайнера</h2>
</td>
</tr>
</table></body>
</html>
Вы, наверное, поняли, что если ширину таблицы мы задали равной 700 px, то высота таблицы будет меняться автоматически по мере заполнения странички.
6.
Теперь давайте добавим на сайт изображение, или фотографию.
Для добавления изображения используется одинарный тег <img>
Если на сайте используется немного изображений, то сами файлы изображений можно держать в корневой папке сайта (той, где находится index.html и другие странички сайта), но лучше сразу приучаться все упорядочивать и создавать для фото и изображений отдельную папку.
Давайте создадим в нашей корневой папке папку с именем img . Поместим в нее какое-нибудь фото небольшого размера. Я взял фото шириной 300px и высотой 381px. (Узнать размер изображения можно, наведя на него мышкой, во всплывающем окошке появится размер: первая цифра – это ширина изображения, вторая – его высота.)
Итак, после того, как мы помести ли наше фото в папку img и узнали его размер, вставляем сразу за нашим заголовков следующий код:
<img src=»img/foto1.jpg» align=»left» hspace=»10″>
Сохраните результат
Атрибуты изображения <img>:
src=»img/foto1.jpg» — указывает место расположения изображения. В данном случае, мое изображение носит название foto1.jpg (в названии нужно также указывать расширение файла изображения) и находится в папке img .
width=»300″ – это ширина изображения. У меня это 300px.
height=»381″ – это высота изображения. У меня это 381px
align=»left» . Помните, в теге таблице данный атрибут выполнял функцию выравнивания? Так вот, помещенный внутри тега изображения он выполняет другую роль – он позволяет нижеследующему тексту «обтекать» изображение.
В данном случае у этого атрибута стоит значение «left» – это означает, что изображение «прилипнет» к левому краю, а текст будет обтекать его справа. Вы можете, если хотите, поставить значение «right» – тогда ваше фото прилипнет к правому краю, а текст будет обтекать его слева.
hspace=»10″ – этот атрибут создает отступ справа и слева от изображения. Я его применил здесь для того, чтобы текст, которым мы дальше напишем, не прилегал вплотную к нашему фото.
7.
Теперь давайте добавим на нашу страничку текст. Для этого мы воспользуемся парным тегом<p> </p> — это тег абзаца. Каждый раз, когда начинаете новую мысль, заключайте текст в этот тег – у вас создастся отступ между строчками.
Если же вы хотите сделать принудительный перенос текста на следующую строчку без создания отступа, воспользуйтесь одинарным тегом <br> .
Для создания Красной строки самым простым способом будет использование символа неразрывного пробела — . Вставьте его сколько требуется раз.
Итак, напишите любой текст и вставьте его после изображения. Или вставьте, как пример, этот код:
<p>Ваш текст, заключенный в тег абзаца, появится справа от изображения, «обтекая» его. Если же вы не хотите, чтобы текст обтекал изображение, а начинался снизу изображения, сотрите атрибут align=»left» в теге <img>. </p>
<p>Это второй абзац. Вы видите, какой получился отступ при использовании тега <p> </p>. А если Вам не нужен такой отступ, то используйте тег <br>.
<br>Это предложение было принудительно переведено с использованием тега <br>. </p>
<p> Для самого простого создания красной строки можно использовать символ неразрывного пробела. В начале этого абзаца он был применен четыре раза. </p>
<p>Этот абзац уже пойдет внизу нашей картинки и будет располагаться на всю ширину области нашего сайта. </p>
Сохраните результат и посмотрите его в браузере.
Итак, Вы уже научились добавлять картинки и текст на страничку сайта. Таким образом можно добавить сколько угодно текста и фото. Вы можете бесплатно создать такой сайт-визитку самостоятельно и, как Вы убедились, довольно быстро.
8.
Последним шагом давайте создадим вторую рамочку для границ нашего сайта, как на примере.
Для этого поместим таблицу, содержащую контент нашего сайта внутрь еще одной таблицы. Другими словами, наша таблица, состоящая из одной строки и одного столбца, должна оказаться внутри другой таблицы, также состоящей из одной стоки и одного столбца. Вы, наверняка, и сами поняли, как это сделать. Это совсем не сложно:
Помещаем этот код перед началом нашей таблицы, т.е. после тега <body> и перед тегом <table>
<table border=»2″ bordercolor=»#993333″ cellspacing=»0″ cellpadding=»2″ bgcolor=»#ffffff» align=»center»>
<tr>
<td>
А этот код после тега </table> и перед тегом </body>
</td> </tr>Сохраните результат.
</table>
Мы поместили нашу таблицу внутрь еще одной. Вы видите, что атрибуты этой таблицы мало отличаются от первой, за исключением атрибута внутреннего отступа cellpadding=»2″ – здесь мы поставили значение 2, а не 10, хотя можете поэкспериментировать с этим отступом между рамками, и поставить то расстояние, какое вам больше нравится. Еще мы здесь не указали атрибут ширины – она определится автоматически.
Ну вот, Вы смогли Создать сайт – визитку самостоятельно бесплатно. Конечно, это совсем простой сайт, но, ведь, все начинается с простого.
В следующем уроке мы немного доработаем наш сайт, усложним его.
Осталось только обобщить и еще раз уточнить, как и что Вы можете в этом сайте изменить под свой вкус:
В файле style.css мы можем менять:
Свойства body
Цвет фона сайта – свойство background-color:#999999; Высота верхнего отступа – свойство margin-top:10px;
Свойства текста абзаца p
Название шрифта – свойство font-family:Verdana; Можете, например, поставить Arial или Times New Roman
Цвет текста абзаца – свойство color:#000000;
Размер шрифта – свойство font-size:16px; Подбирайте, какой Вам больше нравится.
Выравнивание текста – свойство text-align:left; Сейчас стоит выравнивание по левому краю — left. Можете поставить выравнивание по центру – center или по правому краю – right
Свойства заголовка h2
Аналогично рассмотренным выше свойствам текста абзаца p
Если Вам понадобится сделать дополнительные заголовки на сайте, используйте для них теги h3, h4, h5, h5 и h6. Настроить свойства этих заголовков можно также, как и заголовка h2 в файле style.css
В файле index.html мы можем менять:
Вы можете изменять значения атрибутов тега таблицы <table>, чтобы настроить область сайта по своему вкусу:
border=»2″ – толщина рамки таблицы. Если поставить «0», то рамка видна не будет.
bordercolor=»#993333″ – цвет рамки ячеек таблицы. У нас указан коричневый цвет.
cellpadding=»10″ – внутренний отступ в ячейке таблицы для содержимого таблицы. Используется, чтобы текст не прилипал к краю таблице. Можете поставить на свой вкус, не обязательно «10».
width=»700″ – это ширина таблицы, как мы и договаривались. Можете поставить свой вариант.
bgcolor=»#ffffff» – цвет фона таблицы. Сейчас стоит белый. Можно установить любой по своему вкусу.
align=»center» – это атрибут выравнивания по горизонтали. Значение «center» означает, что таблица будет выровнена по центру страницы. Другие варианты выравнивания: «left» – слева и «right» — справа
После того, как вы смогли создать свой сайт-визитку самостоятельно, его нужноустановить, или, как говорят, залить на хостинг, т.е. чтобы ваш сайт стал доступен в сети Интернет
how-to-create.3dn.ru
Шаг №127.Как создать сайт-визитку на WordPress?
Привет друзья,сегодня я хотел бы поговорить немного о так называемых сайтах визитках. Чтобы понять, насколько сегодня целесообразно создавать сайт-визитку, стоит уяснить, каково её назначение и структура. Сайтом визиткой называют небольшой по количеству страниц ресурс, который содержит в себе максимум информации, полезной для пользователей и потенциальных клиентов компании. Сайт-визитка даёт возможность компании чётко обозначить свою специализацию, рассказать о своих услугах клиентам. История развития компании и отзывы клиентов — всё это также может находиться на страницах визитки.
В общих чертах о визитке на WordPress
Сайт визитка на WordPress — вполне распространённое явление, даже несмотря на то, что этот известный бесплатный движок популярен, в основном, как платформа для блогеров. WordPress сегодня вполне можно назвать универсальным движком, на котором создают и интернет-магазин
Если говорить о сайте визитке на WordPress, то можно в общих чертах представить, для чего он нужен, какие разделы информации будут находиться на его страницах. Кроме непосредственно рекламы. Такой ресурс будет поддерживать имидж вашей компании, станет своеобразным инструментом привлечения и общения клиентов в отзывах. Это один из наиболее популярных типов веб-ресурсов в сети.
Какова структура сайта-визитки?
Среди разделов, которые будет включать в себя онлайн визитка, можно выделить такие как «Главная», «О нас» или «О компании», «О продукте» или «Услуги», а также «Контакты». Это лишь примерный набор названий страниц, из которых будет состоять такой сайт. Примерное количество страниц сайта-визитки — от трёх до семи. Если страниц больше, сайт уже можно причислить к корпоративным.
Что такое WordPress? Это вполне удобная панель управления контентом с открытым кодом, которая доступна для свободного скачивания. Для неё было разработано огромное количество плагинов и модулей, которые в каждой новой версии позволяют расширить функционал и сделать работу с сайтом более удобной.
Простой способ создания сайта на WordPress
Наиболее простым способом создать сайт-визитку на WordPress можно считать применение премиум шаблона. Профессиональный дизайн будет считаться основой для сайта, этот как костяк, который в последствии кастомизируется, наполняется контентом и превращается в полноценный сайт. В любой компании, где вы приобретаете шаблон Worpdress онлайн-визитки, вам должны предоставить инструкцию по установке шаблона в админку WordPress и на хостинг.
Сама процедура занимает несколько минут и совсем не является сложной. Любой простой пользователь сможет залить шаблон по инструкции, даже не обладая специальными знаниями для этого. Главное, что сайт-визитка, созданный на WordPress, будет всегда лёгок в управлении. Ведь сам интерфейс админки можно сравнить в обычной компьютерной программой, здесь есть визуальный редактор для форматирования текстов как в Word, есть галерея с фотографиями, есть возможность добавить видео на сайт через админку с видеохостингов, прикручивать кнопки соц сетей, и многое другое.
Несколько примеров того, как может выглядеть ваш сайт-визитка:
Шаблон для сайта визитки — «Credens»
Шаблон для сайта-визитки «NY bank»
Шаблон для сайта-визитки «Simplycorp»
Шаблон для сайта-визитки «Expero»
Шаблон для сайта-визитки «Stream»
Шаблон для сайта-визитки «Progress»
Шаблон для сайта-визитки «Vipbank»
Шаблон для сайта-визитки «Backup IT company»
Шаблоны с бесплатным тестовым периодом
Так же вы можете попробовать создать свой первый сайт-визитку на основе любого из приведенных ниже шаблонов. Любой из них доступен для полнофункционального бесплатного тестового периода. Купить шаблон вместе со всеми внесенными изменениями вы сможете уже после того, как созданный на его основе сайт будет полностью вас удовлетворять.
wpcreate.ru