|
|
|
|
|
|
|
|
|
|
Как создать сайт визитку бесплатно своими руками? Как создать свой сайт визиткуКак создать сайт визитку бесплатно своими руками?Чтобы создать сайт визитку бесплатно, понадобится не более 5-10 минут. Чтобы наполнить его минимальным количеством контента, потребуется 1-2 часа (у кого как). Чтобы оптимизировать свой интернет ресурс к поисковому трафику 2-4 недели. Многое зависит от силы ваших намерений и желаний. Часть 2 (практика) Начало темы читайте в Часть 1 Где создать сайт визитку бесплатно?
Пока вы еще новичок и не уверены, как будет работать ваш будущий бизнес, можно открыть собственный блог (сайт) на бесплатном конструкторе. Таких платформ существует немало, но есть наиболее проверенные и популярные из них. В основном, начинающие блоггеры или бизнесмены создают свои ресурсы на движке Joomla, Blogger, Ucoz или WordPress. Давайте создадим свой сайт визитку копирайтера на Блоггере. Такую возможность бесплатно предоставляет Google, поэтому следует прежде всего, завести свой гугл аккаунт типа [email protected]. Это делается быстро, и с этой минуты Блоггер начнет бережно заботиться о вашем новом сайте. Как создать сайт визитку бесплатно всего за 2 клика:
Зайдите по ссылке на https://www.blogger.com и на открывшейся странице, в левом верхнем углу нажмите кнопку «Новый блог».
В появившемся окне выполните 3 пункта:
Нажмите внизу кнопку «Создать блог». Барабанная дробь… Всё! Вот так просто, всего в 2 клика ваш личный блог уже функционирует на просторах интернета! Теперь начинается самое интересное и приятное. Наполнение страниц контентом, то есть информационным материалом разного типа. Это тексты, картинки, флеш-баннеры или видео. Приступаем! Как создать и наполнить сайт визитку бесплатно?Независимо от того, какие задачи будет решать ваш блог, его должны обнаружить официальные поисковики и покупатели. Поэтому любому сайту нужно задать стандартную структуру. Создаем страницы, характерные для всех видов сайтов √ Главная Это страница презентации вашего бренда (а он у вас уже есть!). Создайте привлекательный текст для своих клиентов на 2-3 тысячи знаков. Затем добавьте картинки, соответствующие тематике. √ Услуги Опишите ваши услуги копирайтера (или другие), используйте подзаголовки, маркированные списки, разделяйте текст на отдельные абзацы (пропустите строку-две между ними). Это удобно для восприятия информации читателем. √ О компании (Об авторе) Почему читатель должен вам доверять? Эту страницу можно писать в форме эссе, то есть в виде рассказа своей истории. Поведайте о приобретении своего опыта, о становлении автора и достижениях. Это ваш пиар-лист, поэтому продумайте информацию досконально . Читать должно быть интересно и полезно. √ Прайсы (стоимость услуг) Если вы уже сложили цены за 1000 знаков текста, можете обозначить их на странице Прайсы на ваши услуги. Здесь можно также указать скидки, бонусы и другие условия продажи. √ Статьи сайта (блога) Эту страницу можно наполнять различными статьями на актуальные темы для современного потребителя. Сделайте ее динамичной (не статичной) и постоянно обновляйте свой текстовый контент. Эти 5 страниц – минимум, который обычно требуется для полноценной работы любого бизнес сайта. Главные моменты: Создаем страницы: Внутренняя часть блога называется Админка, административная часть, ваш личный кабинет в инфобизнесе. Слева есть список функций, переходим сразу на 3-й пункт этого меню: Страницы. Далее вверху нажмите Создать страницу и перед вами откроется привычное окно редактора, похожего на обычный документ Word с теми же функциями. В блоггере настолько все удобно продумано, что даже новичок интуитивно справится с наполнением своего юного сайта. Введите Название страницы, затем в поле текста напишите статью или скопируйте готовый вариант из Вордовского файла. В любое место можно вставить картинки (иконка в редакторе), загрузив их с компьютера. Слева, когда вы в редакторе, есть меню, где нужно заполнить пункт Описание для поисковых систем. Кратко, в двух предложениях напишите содержание статьи. Желательно, включить в описание главную ключевую фразу статьи. Затем нажмите вверху справа кнопку Публикация, после этого — Просмотреть блог и любуйтесь своей работой! Публикации для сайта-визитки. Сообщения – это текущие записи, публикации, посты, новости – называйте их, как угодно. Они создаются по тому же принципу, что и страницы блога, только справа от редактора нужно еще заполнить раздел Ярлыки. То есть написать главные ключевые слова статьи, предварительно подобранные через сервис Яндекс статистики wordstat.ru
Как добавить картинки при создании сайта визитки? Создавая Страницы или Сообщения на блог, нажмите в редакторе на цветную иконку вставки картинок. Откроется окно, где будет предложено выбрать «Из этого блога» либо «Загрузить» с компьютера. Пока у вас еще не набралась своя галерея картинок, воспользуйтесь функцией Загрузить готовые изображения из своих папок. Предварительно сделайте их подбор в общедоступном каталоге Яндекс картинок или в фото банке. Пишите в поиске тему (фразу), затем сохраните выбранное изображение в отдельную папку своего компьютера. Как вставить ссылку в текст сайта визитки и зачем? Ссылки служат для, так называемой, перелинковки сайта (link – ссылка, англ.), чтобы все записи и страницы связать между собой. Такой подход полезен для будущей скорой индексации вашего ресурса поисковыми системами Яндекс, Гугл, Рамблер, Мейлру и пр. Индексация помогает продвижению сайта, а значит вашего товара (услуг). Таким образом, ваши статьи будут быстро находить покупатели. Для правильной перелинковки ставьте со всех сообщений и страниц ссылки на Главную и на другие страницы по соответствующим ключам. Например, если ваш главный запрос «Услуги копирайтера», используйте его в тексте на Главной и других страницах. Чтобы сделать запрос активной ссылкой и переход на соответствующую страницу, выделите нужную фразу, а затем нажмите в редакторе на значок Ссылка. В появившемся окне вставьте адрес ссылки на Главную и другие страницы. По ним читатель будет легко переходить по вашему сайту от темы к теме. В меню Админки блоггера есть и другие полезные функции, которые можно сразу настроить правильно. Многое уже продумано и заполнено для новичков, поэтому нам останется лишь зайти еще в 3 места — Дизайн, Шаблон и Настройки. Дизайн – позволяет менять и располагать элементы блога на свое усмотрение. Войдя, можно нажать в любом месте, где есть надпись Добавить гаджет. Откроется окно, в котором мы можем выбрать полезные добавочные функции. Среди них: Кнопка Google+, Ваши подписчики, Видео с YouTube, Переводчик, Статистика, Опрос на сайт и многое другое. Так же вы сможете добавлять любой произвольный код своего гаджета, выбрав в списке элемент HTML/JavaScript. Гаджеты можно менять, просто перетаскивая их в нужное место. Шаблон позволяет изменить оформление блога. Входим и выбираем под миниатюрой шаблона кнопку Настроить. Там есть возможность изменить Фон, Ширину шаблона, Цвета, Шрифт, размер вкладок и конфигурацию размещения текста. Все довольно легко и просто. Настройки блога – последний пункт меню вашей Админки. В нем нужно заполнить только вкладку Общие и ввести Название сайта, Описание, Имя автора. Затем в настройках войдите в пункт Электронная почта и мобильные устройства,чтобы указать свой e-mail, который вы получили от Google. Остальное уже заполнено по умолчанию и пока вам не понадобится. Теперь вам остается наполнять страницы интересными материалами и привлекательными картинками. Визитка может содержать всего 5-10 страниц. Сайтпортфолио, блог копирайтера или интернет магазин статей вы можете пополнять бесконечно! Поделитесь с друзьями в социальных сетях: Хочу получать свежие статьи на почту! Поделитесь этой новостью в социальных сетях: Нравится wonder-text.ru Как создать свой сайт визиткуМожно достаточно легко создать свой собственный сайт, при этом не придется вникать во все тонкости языка html, Adobe Photoshop, веб-программирования и даже не обязательно быть мастером веб дизайна. Можно просто взять уже готовый шаблон и, совсем малость его отредактировав, получить готовый собственный сайт, с очень похожим на другие такие же сайты дизайном, и своим, отличным от всех содержанием. Эти шаблоны можно найти в интернете, это не составит особого труда, так как их там предостаточно. Не будет проблем и с выбором темы шаблона, можно найти подходящий даже для самой изощренной идеи. Это может быть сайт визитка или любой другой тематический сайт, не важно.
Перед началом создания сайта нужно определится с его тематикой, с тем, как он будет выглядеть в будущем, с материалами, которыми он будет наполнятся и прочими мелочами, без каких работа сайта в дальнейшем не возможна. Для работы с сайтом, сделанным по шаблону, не нужно разбираться в html, достаточно будит вставить свои названия в поля на шаблоне, тем самым их изменить, предавая таким образом ему уникальность.Справившись с редактированием шаблона, можно сразу же разместить его на хостинг, и он заработает. К нему появится доступ через интернет, а в будущем после продвижения, он будет виден поисковикам, и может даже зарабатывать.
Так же можно сделать свой сайт подобием любого другого, найденного в интернете. Для этого нужно всего лишь сохранить ту страницу у себя в браузере, которая вам понравилась, после отрыть ее, и начать редактирование, например при помощи Dreamweaver.Но все-таки, нужно иметь ввиду, что это не самая лучшая идея. Полное копирования дизайна и содержимого чужого сайта, не совсем законно, авторское право как-никак.Создание красивого и сложного сайта с нуля, это достаточно кропотливый процесс. Однако хорошенько постаравшись, можно сделать сайт совершенно уникальным, и по своему виду и по содержанию. Он не будет похож не на один другой, и станет вашим великим детищем, смотря на которое можно гордится собой.  Загрузка... hostingkartinok.com Как быстро сделать мини-сайт. Бесплатный сайт-визитка.Как быстро сделать свой мини-сайт на сервисе Minisite?Иметь свое представительство в сети Интернет может позволить себе каждый человек. Способов и вариантов для этого достаточно: блоги, сайты, мини-сайт, социальные сети, профессиональные сообщества. Кому-то нужно все и по максимуму, кто-то ограничивает свое присутствие профилями в социальных сетях. Кто-то вообще не знает, с какой стороны подступиться к Интернету и как себя здесь вести. Между тем, общение и бизнес давно уже плавно перетекают из офлайна в онлайн и наоборот. И быть не представленным в Интернете — непозволительная роскошь в наши дни. Давайте посмотрим на визитку, обычную полиграфическую визитку. Никто не сомневается, что этот маленький клочок картона служит одним из способов донесения контактных данных до потенциального потребителя. То же самое в Интернете: есть много способов представить себя, свои интересы, свой бизнес, но сегодня я расскажу о самом простом и эффектном из них — онлайн-сервисе minisite.ru, (Примечание: Сервис прекратил свою работу с 15 декабря 2014 года). Вы можете бесплатно и легко создать свой сайт-визитку, свою страницу в сети Интернет, используя заготовленные для вас шаблоны (оформление). Вам останется выбрать из них тот, что понравится вам больше и разместить на нем свою информацию.
Какую информацию можно разместить на minisite.ru?
Шагните смело и уверенно в виртуальный мир. Здесь очень много интересных возможностей! Копилка эффективных советовВ этой же рубрике:Я согласен на обработку моих персональных данных в соответствии с Пользовательским соглашениемkopilkasovetov.com Как создать сайт визитку, не имея навыков программирования16:28 Людмила Главная страница » Интернет Просмотров: 382Обновлено — 2017-01-25 Как создать сайт визитку. Вы можете создавать сайты, даже не зная языков программирования. К тому же такие сайты, от которых дух захватывает, и не хочется с них уходить. Неужели такое возможно? Да, возможно! И самое главное, что создавать такие сайты можно научиться очень быстро. Вам не надо тратить месяцы и годы на изучение языков программирования. Все можно сделать в видео редакторе. Было бы желание. Если вы хотите хорошо зарабатывать в интернете, то это именно то, что вам необходимо. Создание таких сайтов еще только начинает выходить на рубежи интернета, поэтому поле деятельности огромное. К тому же создание таких сайтов, и получение заказов на них будет зависеть только от вашей неуемной фантазии.
Представьте, если вы научитесь создавать такие шедевры, и начнете изготавливать их на заказ? Представили? Лучше сначала посмотрите, тогда вы поймете, о чем речь:
По-моему, впечатляет. И такую красоту вы можете создать сами. Я не шучу! Прежде, чем говорить об этом, я сама попробовала создать что-то подобное по бесплатному курсу Владимира Гынгазова. Конечно, у меня получился не такой шедевр, как вы видели выше, но если за это взяться серьезно, то наверняка получилось бы не хуже. Как создать сайт визитку, не имея навыков программированияТе, кто занимается сайтостроением, знают, что такое сайт-визитка и для чего она необходима. О том, какие сайты и для чего предназначены, я уже писала, поэтому не буду повторяться. А вам если интересно, то можете почитать здесь. Можно научиться создавать сайты в программе Dreamveaver, или в Web Page Maker, или WebSite X5 Evolution, или Artister. Хороших программ много. Есть программы, в которых разберется только профессионал, а есть такие, что и ребенок поймет, как в ней работать. Но нам важно не только легко и быстро создать сайт, но и чтобы этот сайт был красивым, и хорошо продвигался. Сайт без продвижения – это мертвый сайт. Его никто и никогда не увидит, будь он самым раскрасивым. В любом случае, сайт необходимо продвигать, но это пока не наша тема. Сейчас нам важно, чтобы код сайта, в котором мы ничего не понимаем, был валидным. И если мы с вами ничего не понимаем в программировании, то значит, нам необходима такая программа, которая сама, без нашего вмешательства, будет делать код сайта валидным. Валидность кода — это соответствие исходного кода сайта нормам и правилам, описанным Консоциумом Всемирной Паутины или сокращенно W3C. Практически все программы по созданию сайта решают эту проблему. В том же Артистере код всегда валидный, хотя мы его и не видим при создании шаблона. Но сейчас на арену выходят другие сайты. В них уже можно вместо фона вставлять видео или делать эффект параллакса без вмешательства в код. Вот пример параллакса. Такой сайт вас заинтересует? Наверняка да! В какой программе можно создать сайт-визиткуЕсть такая волшебная программа, в которой создавать такие шаблоны сайтов, и сами сайты, просто одно удовольствие. Она чем-то похожа на графическую программу фотошоп, поэтому если вы знакомы с фотошопом, то ваше обучение пройдет еще быстрее. Описывать все шаги по созданию сайта на этих страницах не очень удобно, поэтому я дам вам ссылку на бесплатный курс, который вы сможете скачать себе на компьютер, и спокойно просмотреть в свободное время. В видео курсе вам покажут, где можно взять такую программу бесплатно, как ее установить, и самое главное, покажут, как создать сайт визитку. Я сама просмотрела этот видео курс, и с легкостью создала свой первый сайт визитку. Открою вам секрет, что в этой программе можно создавать не только сайт визитку, но и музыкальные открытки, слайд-шоу, видео сайты, подписные страницы, и даже полноценный мультимедийный сайт. Знакомство с курсом Adobe Muse — Быстрый старт!Не буду больше вас томить. Раз вы читаете эту статью, значит хотите научиться создавать такие сайты. Тогда берите бесплатный курс и вперед
Б Е С П Л А Т Н О
ВЁРСТКА САЙТОВВ ADOBE MUSEПОД МОБИЛЬНЫЕ УСТРОЙСТВА На главную Понравилась статья — нажмите на кнопки:
moydrygpk.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 Как создать сайт-визитку для своего бизнеса? Иногда в блогах веб-мастеров можно найти мнение о том, что создание сайта-визитки — это нецелесообразно. Далеко не каждая компания, на первых парах своей деятельности, сможет накопить достаточно информации на создание многостраничного корпоративного сайта. Да и сайт вновь появившейся на рынке компании, которая ещё никому не известна, вряд ли будет сразу же настолько посещаемым, чтобы имело смысл сразу делать его по настоящему многостраничным. Для начала вам лучше просто представить свой бренд потенциальному клиенту, как можно более доходчиво объяснить ему его выгоду при условии сотрудничества с компанией, чётко изложить миссию, услуги и преимущества перед конкурентами. Сделать всё это можно будет только с помощью сайта-визитки. Он как раз таки и предназначен для того, чтобы стать лицом компании, её онлайн-представительством. Структура сайта-визитки — это 5-7 страниц, включая главную, на каждой из которых будет находиться свой тип материала. Типовые страницы сайта-визитки — это: Главная, О компании, Услуги или Продукция, Блог, Контакты. Названия страниц могут варьироваться. Например, страница О компании может называться страницей О нас, страницей Наша миссия, и так далее. Сайт-визитка — это способ рассказать миру о себе, и, в то же время, прорекламировать свои услуги. Название такого типа веб-ресурса говорит само за себя, попав на ваш сайт, пользователи смогут узнать кто вы, чем занимаетесь, какие выгоды они получат, сотрудничая с вами. Можно ли создать сайт визитку самому?Очень часто у начинающих предпринимателей возникает вопрос о том, возможно ли сделать сайт-визитку самостоятельно. Такой вопрос интересует многих по нескольким причинам. Во-первых, таким образом можно значительно сэкономить средства и вложить их в другие важные проекты, во-вторых, многие думают, что таким образом они экономят время. Практика показала, что созданные с помощью онлайн конструкторов сайты, которые используют любители сделать сайт самостоятельно, не воспринимаются серьёзно некоторыми пользователями. То есть опытный пользователь понимает, что компания, которая заботится о своей репутации и планирует развиться до известного во всём мире бренда, не станет создавать себе сайт на бесплатной основе с доменом третьего уровня. Это выглядит не престижно и часто такие сайты повторяются по дизайну, то есть оформление в них очень похожее, не уникальное. Есть ещё вариант создания сайта — это бесплатные шаблоны и бесплатный хостинг. Но стоит заметить, что в работе сайтов, созданных таким способом, могут возникать баги, а техническая поддержка для таких сайтов, чаще всего не предоставляется.Со всего сказанного выше, можно сделать вывод, что создать сайт самостоятельно, не привлекая к этому специалистов, невозможно в краткие сроки, если вы не совмещаете в себе навыки дизайнера, кодера и верстальщика. А также нежелательно создавать его на бесплатной основе. Далее, мы попробуем разобраться, как же всё-таки создать сайт, чтобы и поддержать престиж компании, и не вкладывать крупных средств в его разработку. Приемлемые способы сделать сайт-визиткуРаспространённым видом бизнеса сегодня считается веб-студия. Реклама услуг таких компаний настолько часто встречается в сети, что многие, не задумываясь, сразу же обращаются к ним за созданием сайта, и часто, им приходится потратить немалую сумму денег, чтобы наконец получить готовый к работе проект, хотя и не факт, что абсолютно без багов. Чем хорош такой вариант? Если вы тщательно выберите веб-студию и посмотрите примеры работ её специалистов, то вы сможете в достаточно краткие сроки получить крутой сайт, который будет таким, как вы опишите подробно в тз. В этом варианте создания сайта есть и свои недостатки. Если вы никогда раньше не сталкивались со сферой разработки сайтов и не знаете по каким критериям выбирать специалистов, то можете попасть на начинающую веб-студию, в которой могут предоставляться не очень качественные услуги. Обратившись в такую компанию, вам придётся заказывать разработку с нуля, а идеи по поводу облика вашего сайта у вас должны уже быть готовы. Если таковой идеи нет, то снова таки нужно будет нанять специалиста, дизайнера, который сможет посоветовать оформление сайта, выбрать наиболее подходящий вариант дизайна для сайта вашей тематики. По ходу превращения дизайна в PSD формате в реальный сайт, с помощью написания кода под этот дизайн, установки его в админку и на хостинг, может возникать множество вопросов, как у заказчика, так и у исполнителей. Главное, чтобы время, потраченное на разработку и улаживание всех нюансов по работе сайта, не превысило все мыслимые и немыслимые сроки, а разработка не обошлась дороже, чем вы предполагали. Если вы не располагаете огромным объёмом времени и средств, то есть и экономный вариант создания сайта, который по результатам будет даже лучше, чем работа с веб-студией, поможет сохранить и улучшить репутацию компании. Этим способом можно считать использование готовых шаблонов сайтов. Шаблон сайта-визитки может стоить от 65 долларов, при этом быть очень функциональным, красивым по оформлению, содержать несколько подстраниц, стоковые фотографии, быть полностью свёрстанным и готовым к установке на хостинг. Всё, что останется владельцу — это выбрать движок, с помощью которого можно будет наполнить сайт контентом, а также управлять ресурсом. Покупая такой шаблон, клиент гарантированно получает право на техническую поддержку от компании, в которой он приобрёл продукт. Он имеет возможность переделывать шаблон по своему вкусу, а, получая исходники на руки, может вернуть дизайн к изначальному варианту, если изменения ему вдруг не понравятся. Иногда у клиента есть возможность купить шаблон с админкой, например MotoCMS. В данном случае, он также получает возможность проконсультироваться и по работе с с данной системой управления контентом. Этот движок более, чем удобен для любого обычного пользователя, без специальных знаний веб-мастера, и вам не составит труда разобраться с его функциями и легко управлять с его помощью своим сайтом. В подборке вы сможете посмотреть несколько вариантов дизайнов сайтов-визиток, которые могут стать основой для реализации вашего веб-проекта.
Как попробовать свои силы бесплатно?В том случае, если вы не хотите платить деньги до того, как увидите результат, есть подходящий вариант. На сайте TemplateMonster Вы найдете несколько примеров шаблонов сайтов-визиток, которые вы можете использовать бесплатно до 30 дней. Вы получите полный доступ к панели управления и сможете создать на ее основе собственый сайт. Подписывайтесь на наши социальные сети: profitgid.ru
|
