Блокнот и записки для рабочего стола Windows. Как создать свой блокнот


Как создать и открыть блокнот на компьютере

Текстовый блокнот на компьютере используют в основном как памятка в виде текстовых записей, также блокнот является текстовым редактором в котором можно изменить шрифт написанного текста, вставлять в него текст, копировать текст из блокнота и удалять весь или частично текст. Создать блокнот на компьютере можно на рабочем столе или в проводнике, а запустить новый блокнот на компьютер можно через команду «Выполнить».

Как сделать блокнот на компьютере

Чтобы создать текстовый блокнот нужно навести указатель мыши на пустое место на рабочем столе или в правой части открытого проводника и нажать на правую кнопку мышив появившемся контекстном меню нужно выбрать сначала пункт «Создать», а потом «Текстовый документ».

Как создать блокнот на рабочем столе или в проводнике

После этого в проводнике в самом низу появится файл под названием «Новый текстовый документ», это название можно сразу заменить на другое название.

Так выглядит созданный файл текстового документа

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

Как открыть текстовый блокнот на компьютере

Открыть блокнот на компьютере можно через команду «Выполнить», которая запускается одновременным нажатием на клавиатуре клавиш WIN+R.

Запускаем команду выполнить

В открывшуюся команду «Выполнить» нужно вписать команду «notepad» и нажать кнопку «ОК».

Создадим безымянный блокнот на компьютер бесплатно

После этого сразу откроется чистый блокнот под названием «Безымянный-Блокнот».

Очень много для чего нужен блокнот в компьютере

В этом блокноте можно сделать какие-нибудь записи и закрыть его с сохранением. При сохранении нужно дать название текстовому файлу и определить место где он будет находиться.

Похожие заметки:

kaknakomputere.ru

Как создать блокнот на рабочем столе

Рабочий стол компьютера – это место, где хранятся ярлыки нужных программ, различные файлы и папки, доступ к которым необходимо осуществлять максимально быстро. На десктопе также можно держать «напоминалки», короткие записки и другую необходимую для работы информацию. Данную статью посвятим тому, как создать на рабочем столе такие элементы.

Создаем блокнот на рабочем столе

Для того чтобы поместить на рабочий стол элементы для хранения важной информации, можно воспользоваться как сторонними программами, так и средствами Windows. В первом случае мы получаем софт, имеющий в своем арсенале много функций, во втором же — простые инструменты, которые позволяют начать работу сразу, без поиска и выбора подходящей программы.

Способ 1: Сторонний софт

К таким программам можно отнести аналоги «родного» системного блокнота. Например, Notepad++, AkelPad и другие. Все они позиционируются, как текстовые редакторы и имеют разные функции. Некоторые подходят для программистов, другие — для верстальщиков, третьи — для правки и хранения простого текста. Смысл данного способа заключается в том, что после установки все программы помещают на рабочий стол свой ярлык, с помощью которого и запускается редактор.

Читайте также: Лучшие аналоги тестового редактора Notepad++

Для того чтобы все текстовые файлы открывались в выбранной программе, необходимо произвести пару манипуляций. Рассмотрим процесс на примере Notepad++. Обратите внимание, что совершать подобные действия необходимо только с файлами формата .txt. В противном случае могут возникнуть проблемы с запуском некоторых программ, скриптов и так далее.

  1. Кликаем ПКМ по файлу и переходим к пункту «Открыть с помощью», а затем жмем «Выбрать программу».

  2. Выбираем в списке наш софт, устанавливаем галку, как на скриншоте, и нажимаем ОК.

  3. Если Notepad++ отсутствует, то переходим в «Проводник», нажав кнопку «Обзор».

  4. Ищем исполняемый файл программы на диске и жмем «Открыть». Далее все по сценарию, приведенному выше.

Теперь все текстовые записи будут открываться в удобном для вас редакторе.

Способ 2 Системные инструменты

Системные инструменты Windows, подходящие для наших целей, представлены в двух вариантах: стандартный «Блокнот» и «Записки». Первый представляет собой простейший текстовый редактор, а второй – цифровой аналог клейких стикеров.

Блокнот

Блокнот – небольшая программа, поставляемая в комплекте с Windows и предназначена для редактирования текстов. Создать на рабочем столе файл «Блокнота» можно двумя способами.

Записки

Это еще одна удобная встроенная функция Windows. Она позволяет создавать на рабочем столе маленькие заметки, очень похожие на липкие стикеры, прикрепляемые к монитору или другой поверхности, впрочем, таковыми и являющиеся. Для начала работы с «Записками» необходимо в поисковой строке меню «Пуск» набрать соответствующее слово.

Обратите внимание, что в Windows 10 нужно будет ввести «Sticky Notes».

Стикеры в «десятке» имеют одно отличие – возможность изменения цвета листка, что весьма удобно.

Если вам кажется неудобным каждый раз обращаться к меню «Пуск», то можно создать ярлык утилиты прямо на рабочем столе для быстрого доступа.

  1. После ввода названия в поиск кликаем ПКМ по найденной программе, раскрываем меню «Отправить» и выбираем пункт «На рабочий стол».

  2. Готово, ярлык создан.

В Windows 10 можно только поместить ссылку на приложение на панель задач или стартовый экран меню «Пуск».

Заключение

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

Мы рады, что смогли помочь Вам в решении проблемы. Задайте свой вопрос в комментариях, подробно расписав суть проблемы. Наши специалисты постараются ответить максимально быстро.

Помогла ли вам эта статья?

Да Нет

lumpics.ru

Создание html страницы в блокноте: разъяснения для чайников

Приветствую вас на страницах блога Start-Luck. Сегодня мне бы хотелось показать вам, как использовать код. Писать сайты – интересное занятие, которое многим может казаться невыполнимо сложным. На самом деле простенькую страничку можно создать всего за 5 минут.

В этой статье я расскажу про создание html страницы. Выполним мы эту задачу менее, чем за 10 минут, а потом более подробно разберемся с основными тегами. Было бы неправильно называть подобную публикацию уроком. Это скорее затравка, которая призвана показать вам простоту работы и родить в вас желание двигаться дальше, изучить больше, делать лучше.

Как создать страничку

Первую страницу я предлагаю вам сделать в блокноте. Самом простом, который находится в меню «Пуск», папка «Стандартные». Пока не нужно ничего скачивать. Попробуйте воспользоваться тем, что имеете.

Откройте документ.

Вставьте в него вот этот код.

<html> <head> <title>Моя первая страница</title> </head> <body> <center><h2>Создать страницу проще, чем вы думаете</h2></center> Многим может показаться, что создание сайтов дело сложное, даже невыполнимое. Для этого нужно много учиться, узнать, сделать. На самом деле существует около 100 тегов, которые даже не обязательно учить. Важно лишь понять, что и где применяется. Информацию можно подсмотреть в различных шпаргалках, а со временем вы начнете вспоминать теги на автомате. <br/><br/> <center><img alt="Компьютер" src="https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg"></center> <br/><br/> <font>Простой код позволяет сделать текст красным</font> <br/><br/> <b>Написать жирным не намного сложнее</b> <br/><br/> Мы дошли до самого низа <br/><br/> Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино. <br/><br/> <hr> К примеру, вот ссылка на мой блог - <a href="http://start-luck.ru/">Start-Luck</a> - рассказывает просто о "сложном". <br/><br/> Ну вот и все. Ваша первая страница готова <br/><br/> </body> </html>

<html> <head> <title>Моя первая страница</title> </head> <body> <center><h2>Создать страницу проще, чем вы думаете</h2></center> Многим может показаться, что создание сайтов дело сложное, даже невыполнимое. Для этого нужно много учиться, узнать, сделать. На самом деле существует около 100 тегов, которые даже не обязательно учить. Важно лишь понять, что и где применяется. Информацию можно подсмотреть в различных шпаргалках, а со временем вы начнете вспоминать теги на автомате. <br/><br/> <center><img alt="Компьютер" src="https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg"></center> <br/><br/> <font>Простой код позволяет сделать текст красным</font> <br/><br/> <b>Написать жирным не намного сложнее</b> <br/><br/> Мы дошли до самого низа <br/><br/> Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино. <br/><br/> <hr> К примеру, вот ссылка на мой блог - <a href="http://start-luck.ru/">Start-Luck</a> - рассказывает просто о "сложном". <br/><br/> Ну вот и все. Ваша первая страница готова <br/><br/> </body> </html>

Теперь нажмите «Сохранить как…». Это очень важный момент.

Файл нужно назвать index.html. Окончание «.html» указывает на расширение файла. Если вы просто введете название индекс, то документ сохранится как текстовый файл и не откроется браузером.

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

Вот так выглядит только что созданная мной страничка. Ваша ничем не будет отличаться. Все точно также: с картинками и цветным шрифтом.

Сейчас я более подробно расскажу о тегах, а пока давайте просто уберем из заголовка «center» и вставим строчку, в которой содержится слово «Color». Кстати, как менять цвет html я уже писал. Это очень просто, рекомендую к прочтению.

Еще раз сохраните документ, в этот раз можно просто воспользоваться сочетанием клавиш Ctrl+S, а затем обновите страницу в браузере при помощи кнопочки F5

Помните, практически любой тег должен открываться и закрываться. То есть где-то должен располагаться код со слешем. В данном случае он выглядит так: </font>.

Видите, заголовок стал красным. Точно также вы можете придать нужный оттенок любой части текста.

Ну вот и все, пример готов, и вы должны гордиться собой. Конечно, она еще не находится онлайн, для этого веб-страницу надо выложить на сервер, который предоставляется хостингом. Нужно также подключить свой домен, чтобы и другие люди могли увидеть ваше творение.

Пока страничку видите только вы. Но согласитесь, таким сайтом можно удивить только человека из железного века. Но это первый опыт, давайте сделаем его еще более успешным, разобравшись с тегами, которые мы использовали. Это поможет вам научиться создавать свои проекты, без чьей либо помощи.

Теги

С вашего позволения я перейду в программу NotePad++. Она обладает целым рядом преимуществ в сравнении с обычным блокнотом. Сейчас мне очень пригодится подсветка тегов, чтобы показывать вам те элементы, о которых я буду рассказывать. Вообще, если вы собираетесь, изучать html, то я очень рекомендую установить эту бесплатную программу.

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

Основные

Начинается и заканчивается страница с тегов <html></html>. Они показывают браузеру, что это веб-документ, созданный при помощи html.

Далее идет <head></head> или заголовок. В ней располагается самая важная информация о странице, в нашем случае – Title. Если вы еще не нашли фразу «Моя первая страница», которая присутствует в коде, обратите внимание на саму вкладку, над поисковой строчкой.

Именно теги <title></title> отвечают за начало и конец основной информации о страничке.

Далее идет основная контентная часть. Теги <body></body>. Все видимое на странице: заголовки, текст, картинки и так далее.

Тег <h2> указывает на то, что фраза является заголовком. По умолчанию, она чуть больше основного текста и выделяется жирным. Если бы мы с вами сейчас писали не только на html, но и создавали CSS-файл, с которым перекликался наш файл, то могли бы управлять размерами, шрифтом и даже цветом всех заголовков на странице, не прописывая font style, как мы это делали в примере. Хотя об этом тоже рановато.

Кстати, Title и h2 имеют свое влияние во время присваивания вашему сайту места в поисковой выдаче. Относиться к ним нужно с большим вниманием и не писать внутри лишь бы что. Они имеют отношение к сео-оптимизации. Помимо h2, существуют еще и h3, h4,h5.

В этой же строчке есть открывающийся и закрывающийся <center>. Благодаря этому элементу можно выравнивать текст по середине. Если этот тег удалить, то текст встанет по правому краю.

<br/> — один из немногих единичных тегов. То есть он работает сам по себе. Благодаря этому элементы вы перепрыгиваете с одной строки, на другую. Проще говоря, делаете отступ. Написали его один раз, значит один раз переместились вниз, два, как у меня, и отступ получился чуть больше.

Картинка

Далее идет тег img, то есть image, картинка. Квадратная скобка открывается, в нее вписывается вся основная информация о изображении, только после этого она закрывается. Надо отметить, что img – это  тег, а все остальные элементы кода, которые вписываются внутрь, это его атрибуты.

Первым делом идет alt, то есть описание. Это также необходимо для оптимизации. Иногда добавляется еще и title. При наведении на изображение мышью рядом с курсором появляется подсказка, когда страница уже открыта в браузере.

Можно было загрузить рисунок в папку сайта и прописать к ней путь, но я пошел простым путем. Среди бесплатных фотографий на Pixabay я нашел картинку, открыл ее в новом окне и вставил ссылку.

В теге src прописывается путь к картинке. Именно он указывает браузеру, что дальше нужно двигаться, чтобы найти нужное изображение, а в каком направлении искать – пишете вы сами.

Форматирование текста

<font></font> отвечает за придание части текста какого-то особого стиля, к примеру, как в нашем случае другого цвета. style=»color:red» показывает, что цвет будет красным. Если хотите желтый, напишите yellow, зеленый – green. Можно пользоваться кодами цветов из фотошопа.

<b></b> помогает выделить текст жирным.

<hr/> рисует горизонтальную линию. Он одиночный и используется только в закрытом виде. Если вы напишете <hr/> несколько раз, то получите ровно столько же горизонтальных полос при открытии страницы в браузере.

Ссылки

<a> указывает браузеру, что дальше будет ссылка. Вы хотите перенаправить читателя на другой адрес. Этот тег идет с обязательным атрибутом href=”адрес”. В кавычки вставляется путь, куда браузер должен перенести посетителя страницы. После того, как этот тег прописан, вставляется описание, слово или несколько, при нажатии на которое читателя будет переносить дальше. После того как эти условия выполнены, можно вставлять второй, закрывающийся тег </а>.

После того как основная часть страницы написана, вы закрываете тег body, так как тело закончено. И указываете на то, что прекращаете на сегодня использовать html.

Если вы хотите больше узнать о тегах html и научиться вставлять не только картинки, но и видео, создавать кнопки, различные формы, списки, параграфы, то я могу предложить вам бесплатный курс Евгения Попова «Основы html». Всего 33 урока помогут вам выйти на новый уровень.

Ещё хочу порекомендовать вам Видеокурс, который рассказывает, как верстаются сайты. Весь процесс показан на реальных примерах, что особенно хорошо. Курс предназначен как для новичков, которые ещё даже HTML не знают, так и для тех, кто уже хорошо знает и HTML, и CSS, однако, верстать сайты хорошо не умеет. Более полную информацию Вы можете получить, перейдя по ссылке: www.srs.myrusakov.ru/makeup

Помимо этого заберите Бесплатную книгу по созданию сайтов! Эта книга рассчитана на начинающих, и вот там создаётся сайт ОТ и ДО. То есть готовится дизайн, затем верстаются страницы, пишется программная часть, а после сайт размещается в Интернете. Автор тщательно всё комментирует, а в книге очень много скриншотов и иллюстраций. Причём особенностью книги является то, что создаётся не какой-то абстрактный сайт, а вполне реальный и существующий в Интернете.

Сегодня вы сделали много, ведь первый шаг самый сложный.

Подписывайтесь на рассылку и группу ВКонтакте, и узнавайте еще: как и зачем нужен движок сайта, что такое блочная верстка и модульная сетка, как правильно писать сайты и многое другое.

До новых встреч и удачи!

start-luck.ru

Создание сайта html в блокноте с нуля

Если сайт состоит из одной или нескольких страниц и в ближайшей перспективе не будет наполнятся большим количеством контента или обрастать сложным функционалом (интернет магазин, каталог товаров, форум и прочее). То создать такой сайт лучше на html в блокноте.

  1. Для этого понадобится готовый дизайн сайта собственного производства или скачанный из сети psd исходник. Его нужно раскроить для верстки html.
  2. Блокнот, а именно NotePad++. Его можно скачать с официально сайта.
  3. Файл index.html. Его можно создать в любой удобной папке на компьютере. Но лучше выдели отдельную папку для своего сайта и размести его там. У меня это папка c:\site\index.html
  4. Файл c:\site\style.css. Это файл стилей, зачем он нужен станет понятно позже.
  5. Папка c:\site\images. В эту папку нужно поместить все изображения нужные для будущего сайта.
  6. Купить хостинг и домен если нужно сайт выложить в интернете

Для удобства я сделал архив с изображениями и уже готовыми пустыми файлами index.html и style.css. Скачай и распакуй архив в нужную тебе папку.

Для работы сайта в сети необходим веб-сервер. Сервер при обращении к домену или папке сайта без указания конкретного файла будет искать в ней index.html или index.php если не найдет отобразит список файлов папки.

Так как у нас простая html страничка нам не потребуется установка сервера на нашем компьютере, так как язык разметки понимает любой браузер. Однако если потребуется использование php, то просто браузером уже не обойтись.

Теперь нужно открыть файл index и style в NotePad++

Структура html документа

Скопируй код в файл index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Заголовок страницы для браузера</title> <link rel="stylesheet" href="/style.css" type="text/css" /> </head> <body> <h2>Заголовок страницы</h2> <!-- Комментарий --> <p>Абзац.</p> </body> </html>

Теперь открой его в браузере, должно получится так:

В кратце опишу что значат эти теги. Если хочешь подробнее разобраться то по googl-и как говорится информации на эту тему море.

Указываем браузеру по какому стандарту нужно отображать страницу:

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

Тег html говорит о том где начинается и заканчивается html документ

<html>...</html>

Тег head необходим для размещения служебной информации, тут подключаются стили, скрипты и размещена meta информация страницы. Посетители сайта не видят содержимого этого тега.

<head>...</head>

Тег body содержит разметку страницы, содержимое этого тега видят посетители сайта.

<body>...</body>

Верстка или создание сайта на html

В процессе верстки сайта будут встречаться теги и атрибуты описать которые в данной статье невозможно. Поэтому рекомендую пользоваться сайтом htmlbook.ru. Кроме того советую внимательно изучать каждый тег и стиль css, который тебе встречается.

Итак что будем верстать:

Фон и основной каркас сайта

Замени содержимое своего файла index.html на следующее:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Мой первый сайт на html</title> <link rel="stylesheet" href="/style.css" type="text/css" /> </head> <body> <!-- Основной блок сайта --> <div> </div> </body> </html>

И добавь в style.css такой код:

/*Каркас сайта*/ body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;} #basic {width:960px; min-height:950px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;} img {border:0;} a {color:#ff9c00;} a:hover {text-decoration:none;}

Обнови страницу с сайтом в браузере (F5), должно получится так:

Шапка сайта

Добавьте в тег div с идентификатором basic следующий код:

<!-- Шапка сайта --> <div> <a href="/"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a> <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" /> </div>

Что бы получилось следующее:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Мой первый сайт на html</title> <link rel="stylesheet" href="/style.css" type="text/css" /> </head> <body> <!-- Основной блок сайта --> <div> <!-- Шапка сайта --> <div> <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a> <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" /> </div> </div> </body> </html>

И добавляем в файл css строки:

/*Шапка сайта*/ li.none-bg {background:none!important;} .telefon {float:right;}

Верхнее меню сайта

Что бы на нашем html сайте появилось навигационное меню, которое изображено в макете добавить в index.html после:

<!-- Шапка сайта --> <div> <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a> <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" /> </div>

Этот код:

<!-- Верхнее меню сайта --> <div> <div> <ul> <li><a href="#">О нас</a></li> <li><a href="#">Ассортимент</a></li> <li><a href="#">Отзывы</a></li> <li><a href="#">Забронировать столик</a></li> <li><a href="#">Наши клиенты</a></li> <li><a href="#">Контакты</a></li> </ul> </div> <div></div> </div>

Что бы получилось так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Мой первый сайт на html</title> <link rel="stylesheet" href="/style.css" type="text/css" /> </head> <body> <!-- Основной блок сайта --> <div> <!-- Шапка сайта --> <div> <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a> <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" /> </div> <!-- Верхнее меню сайта --> <div> <div> <ul> <li><a href="#">О нас</a></li> <li><a href="#">Ассортимент</a></li> <li><a href="#">Отзывы</a></li> <li><a href="#">Забронировать столик</a></li> <li><a href="#">Наши клиенты</a></li> <li><a href="#">Контакты</a></li> </ul> </div> <div></div> </div> </div> </body> </html>

А в файл style.css:

/*Верхнее меню сайта*/ #top-menu {width:960px; height:74px; } .bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;} .bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;} .bg-1 ul {margin:0; padding:0; list-style:none;} .bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;} .bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;} .bg-1 ul li a:hover {color:#fff; background:#ff9c00;}

Теперь сайт имеет логотип телефон и меню при наведении на которое меняется фон:

Левое меню и контент 

Пришло время сделать левое меню и блок с контентом. Для этого копируем код и тщательно изучаем, что к чему. После блока:

<!-- Верхнее меню сайта --> <div> ...... </div>

Добавляем следующее:

<!-- Левое меню и Контент --> <div> <!-- Контент - правый блок --> <div> <h2>Кофе Американо</h2> <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p> <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p> <img src="/images/img1.png" alt="" title="" /> <img src="/images/img2.png" alt="" title="" /> <img src="/images/img3.png" alt="" title="" /> <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p> <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p> <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> </div> <!-- Левое меню - левый блок блок --> <div> <div> <div></div> <div> <ul> <li><a href="#">Кофе Айриш</a></li> <li><a href="#">Кофе Американо</a></li> <li><a href="#">Кофе Глясе</a></li> <li><a href="#">Кофе Диппио</a></li> <li><a href="#">Кофе Капучино</a></li> <li><a href="#">Кофе Кон Панна</a></li> <li><a href="#">Кофе Коретто</a></li> <li><a href="#">Кофе Латте</a></li> <li><a href="#">Кофе Лунго</a></li> </ul> </div> <div></div> </div> </div> </div>

Файл index.html будет выглядеть вот так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Мой первый сайт на html</title> <link rel="stylesheet" href="/style.css" type="text/css" /> </head> <body> <!-- Основной блок сайта --> <div> <!-- Шапка сайта --> <div> <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a> <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" /> </div> <!-- Верхнее меню сайта --> <div> <div> <ul> <li><a href="#">О нас</a></li> <li><a href="#">Ассортимент</a></li> <li><a href="#">Отзывы</a></li> <li><a href="#">Забронировать столик</a></li> <li><a href="#">Наши клиенты</a></li> <li><a href="#">Контакты</a></li> </ul> </div> <div></div> </div> <!-- Левое меню и Контент --> <div> <!-- Контент - правый блок --> <div> <h2>Кофе Американо</h2> <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p> <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p> <img src="/images/img1.png" alt="" title="" /> <img src="/images/img2.png" alt="" title="" /> <img src="/images/img3.png" alt="" title="" /> <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p> <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p> <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> </div> <!-- Левое меню - левый блок блок --> <div> <div> <div></div> <div> <ul> <li><a href="#">Кофе Айриш</a></li> <li><a href="#">Кофе Американо</a></li> <li><a href="#">Кофе Глясе</a></li> <li><a href="#">Кофе Диппио</a></li> <li><a href="#">Кофе Капучино</a></li> <li><a href="#">Кофе Кон Панна</a></li> <li><a href="#">Кофе Коретто</a></li> <li><a href="#">Кофе Латте</a></li> <li><a href="#">Кофе Лунго</a></li> </ul> </div> <div></div> </div> </div> </div> </div> </body> </html>

И в конец файла css копируем:

/*Левое меню и Контент*/ #content {width:960px; padding:20px 0 0 0; } .right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;} .right h2 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;} .left {width:250px; float:left;} .block-nad-menu {width:240px; height:10px; background:#ff9c00;} .block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;} .block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;} .left ul {margin:0; padding:10px 0 0 0; list-style:none;} .left ul li {background:url(images/m3.png) no-repeat bottom left;} .left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;} .left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;} li.none-bg {background:none!important;}

Если все сделано правильно получится сайт как на картинке ниже:

Подвал сайта

После блока:

<!-- Левое меню - левый блок блок --> <div> ... </div>

Вставляем:

<div></div> <!-- Подвал --> <div> <div></div> <div>ООО “Кофейня” 2015г.<br/> г. Москва, ул Революционная 1а</div> <div><img src="/images/stat.png" alt="" title="" /></div> <div>Создание сайтов веб-студия <a href="#">«Парампампам»</a></div> </div> <div></div>

Теперь весь файл index.html выглядит вот так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Мой первый сайт на html</title> <link rel="stylesheet" href="/style.css" type="text/css" /> </head> <body> <!-- Основной блок сайта --> <div> <!-- Шапка сайта --> <div> <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a> <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" /> </div> <!-- Верхнее меню сайта --> <div> <div> <ul> <li><a href="#">О нас</a></li> <li><a href="#">Ассортимент</a></li> <li><a href="#">Отзывы</a></li> <li><a href="#">Забронировать столик</a></li> <li><a href="#">Наши клиенты</a></li> <li><a href="#">Контакты</a></li> </ul> </div> <div></div> </div> <!-- Левое меню и Контент --> <div> <!-- Контент - правый блок --> <div> <h2>Кофе Американо</h2> <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p> <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p> <img src="/images/img1.png" alt="" title="" /> <img src="/images/img2.png" alt="" title="" /> <img src="/images/img3.png" alt="" title="" /> <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p> <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p> <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> </div> <!-- Левое меню - левый блок блок --> <div> <div> <div></div> <div> <ul> <li><a href="#">Кофе Айриш</a></li> <li><a href="#">Кофе Американо</a></li> <li><a href="#">Кофе Глясе</a></li> <li><a href="#">Кофе Диппио</a></li> <li><a href="#">Кофе Капучино</a></li> <li><a href="#">Кофе Кон Панна</a></li> <li><a href="#">Кофе Коретто</a></li> <li><a href="#">Кофе Латте</a></li> <li><a href="#">Кофе Лунго</a></li> </ul> </div> <div></div> </div> </div> </div> <div></div> <!-- Подвал --> <div> <div></div> <div>ООО “Кофейня” 2015г.<br/> г. Москва, ул Революционная 1а</div> <div><img src="/images/stat.png" alt="" title="" /></div> <div>Создание сайтов веб-студия <a href="#">«Парампампам»</a></div> </div> <div></div> </div> </body> </html>

В файл css добавляем код в самый низ:

/*Подвал*/ .myclr {clear:both; float:none; width:100%; height:1px;} #podval {border-top:10px solid #4c281e; margin-top:20px;} .yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;} .p1 {float:left; width:300px; padding:15px 0 0 0;} .p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;} .p3 {float:right; width:30px; padding:15px 0 0 0;}

Теперь весь файл style.css выглядит следующим образом:

/*Каркас сайта*/ body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;} #basic {width:960px; min-height:500px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;} img {border:0;} a {color:#ff9c00;} a:hover {text-decoration:none;} /*Шапка сайта*/ #head-site {height:70px;} li.none-bg {background:none!important;} .telefon {float:right;} /*Верхнее меню сайта*/ #top-menu {width:960px; height:74px; } .bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;} .bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;} .bg-1 ul {margin:0; padding:0; list-style:none;} .bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;} .bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;} .bg-1 ul li a:hover {color:#fff; background:#ff9c00;} /*Левое меню и Контент*/ #content {width:960px; padding:20px 0 0 0; } /*Контент - правый блок*/ .right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;} .right h2 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;} /*Левое меню - левый блок*/ .left {width:250px; float:left;} .block-nad-menu {width:240px; height:10px; background:#ff9c00;} .block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;} .block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;} .left ul {margin:0; padding:10px 0 0 0; list-style:none;} .left ul li {background:url(images/m3.png) no-repeat bottom left;} .left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;} .left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;} /*Подвал*/ .myclr {clear:both; float:none; width:100%; height:1px;} #podval {border-top:10px solid #4c281e; margin-top:20px;} .yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;} .p1 {float:left; width:300px; padding:15px 0 0 0;} .p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;} .p3 {float:right; width:30px; padding:15px 0 0 0;}

А сам сайт вот так:

 

Другие страницы сайта и ссылки меню

Получился сайт, но при клике на ссылки меню ничего не происходит. Поэтому нам нужно придумать название страниц, прописать их в URL меню и создать страницы с этими названиями.

Названия страниц должны быть уникальными и состоять из латинских символв. Я просто перевел названия пунктов меню на транслит.

То же самое нужно сделать и с левым меню.

Теперь открываем index.html в NotePad++ и добавляем нужные ссылки соответствующему меню, что бы получилось так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Мой первый сайт на html</title> <link rel="stylesheet" href="/style.css" type="text/css" /> </head> <body> <!-- Основной блок сайта --> <div> <!-- Шапка сайта --> <div> <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a> <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" /> </div> <!-- Верхнее меню сайта --> <div> <div> <ul> <li><a href="/o-nas.html">О нас</a></li> <li><a href="/assortiment.html">Ассортимент</a></li> <li><a href="/otzivi.html">otzivi.html</a></li> <li><a href="/zabronirovat-stolik.html">Забронировать столик</a></li> <li><a href="/nashi-klienty.html">Наши клиенты</a></li> <li><a href="/kontakty.html">Контакты</a></li> </ul> </div> <div></div> </div> <!-- Левое меню и Контент --> <div> <!-- Контент - правый блок --> <div> <h2>Кофе Американо</h2> <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p> <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p> <img src="/images/img1.png" alt="" title="" /> <img src="/images/img2.png" alt="" title="" /> <img src="/images/img3.png" alt="" title="" /> <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p> <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p> <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> </div> <!-- Левое меню - левый блок блок --> <div> <div> <div></div> <div> <ul> <li><a href="/kofe-ayrish.html">Кофе Айриш</a></li> <li><a href="/kofe-amerikano.html">Кофе Американо</a></li> <li><a href="/kofe-glyase.html">Кофе Глясе</a></li> <li><a href="/kofe-dippio.html">Кофе Диппио</a></li> <li><a href="/kofe-kapuchino.html">Кофе Капучино</a></li> <li><a href="/kofe-kon-panna.html">Кофе Кон Панна</a></li> <li><a href="/kofe-koretto.html">Кофе Коретто</a></li> <li><a href="/kofe-latte.html">Кофе Латте</a></li> <li><a href="/kofe-lungo.html">Кофе Лунго</a></li> </ul> </div> <div></div> </div> </div> </div> <div></div> <!-- Подвал --> <div> <div></div> <div>ООО “Кофейня” 2015г.<br/> г. Москва, ул Революционная 1а</div> <div><img src="/images/stat.png" alt="" title="" /></div> <div>Создание сайтов веб-студия <a href="#">«Парампампам»</a></div> </div> <div></div> </div> </body> </html>

Теперь жми "Сохранить" потом "Файл > Сохранить как" и сохраняй для каждой ссылки файл с соответствующим именем в папке с файлами сайта. Вот что получилось у меня:

Все сайт готов. Осталось только поменять в каждой странице контент. 

У такого сайта не смотря на его простоту есть очень большой недостаток. Что бы поменять один пункт меню или элемент дизайна придется это делать это в каждом сайте. Когда страниц больше 10 начинается страшная путаница при его обслуживании. Так что создание сайта html в блокноте советую делать только для очень маленьких сайтов или одно-страничных LandingPage. А для полноценных сайтов осваивать CMS (они не так сложны как кажется).

www.opengs.ru

Как создать блокнот?

Как создать блокнот?

Такая вещь, как блокнот, является не только практичной, но и может стать хорошим подарком. Особенно если ее сделать своими руками. Давайте рассмотрим, как создать блокнот, как его украсить и сделать максимально эффектным.

Как сделать красивый блокнот

  1. В первую очередь нужно выбрать формат бумаги, из которой вы будете делать блокнот.
  2. Далее нужно определиться, для чего будет использоваться блокнот. Если вы хотите сделать блокнот для записей, то лучше использовать тонкую (писчую) бумагу. Если же вы хотите сделать своего рода альбом, то плотную.
  3. Выберете тип крепления для блокнота. Это может быть кольцевой тип или спиральный. Чтобы соединить листы, понадобится лишь наметить с помощью карандаша и линейки точки и пробить их дыроколом. Так можно легко соединить, например, тетрадные листы, чтобы сделать блокнот из тетради.
  4. Чтобы сделать крепление красивым, нужно заранее покрасить его в любой яркий цвет. Достаточно воспользоваться граффити-баллончиком.
  5. Если вы делаете блокнот из плотной бумаги, то стоит подобрать к нему плотную обложку. Если же бумага неплотная, то и обложка может быть неплотной. Обложку можно сделать из плотной ткани или кожи.
  6. Чтобы обложка плотно прилегала к листам, нужно закрепить ее на первом и последнем листе. Для этого можно воспользоваться клеем ПВА, намазав его по контурам обложки. Такж

elhow.ru

Как сделать блокнот с нуля – Ярмарка Мастеров

Этот мастер-класс я писала-снимала уже довольно давно. Но тут еще он не был опубликован — решила исправить это.В данном мастер-классе описана техника, схожая с классическим книжным переплетом. Для начала нам понадобится обычная офисная бумага. Можно сочетать цвета, вшивать разделители и т.п. Я использовала бумагу А4 формата 80 г/м2 ванильно-бежевого цвета и дизайнерскую цветную кальку 90 г/м2.Подбираем листы бумаги в тетради. Если плотность бумаги около 80 г/м2, то оптимально подбирать по 5 листов. Если бумага плотнее, то лучше делать тетради по 2–3 листа.Складываем тетрадь пополам:И так несколько раз, до достижения желаемой толщины будущего блока. У меня здесь 13 тетрадей, т.е. блокнот будет содержать 130 листов А5 формата.Прокладываем у корешка будущий блок двумя кусочками переплетного картона (это делается, чтобы не осталось на бумаге вмятин от скоб, и она спрессовалась равномерно) и закрепляем корешок канцелярскими клипсами, как показано ниже:Под прессом блок обычно лежит около 3-х часов, но я часто оставляю на ночь.Пока бумага спрессовывается, можно посмотреть в окно и выпить чашечку кофе :)Когда наши тетради слежались, мы раскрываем клипсы и выравниваем корешок, постучав им о стол. Идеально ровный корешок снова закрепляем клипсами, вот так:Далее нам предстоит пропилить 6 дырочек на равном расстоянии на корешке. Я использую уже заготовленный листок с разметкой, для формата блокнота А5 такой можно скачать по этой ссылке и распечатать. Если формат нестандартный, думаю, тут можно легко разметить блок при помощи карандаша и линейки :)Пропиливаем на корешке вот такие дырочки (как один из вариантов, можно нарисовать метки на самом корешке, а потом проколоть шилом дырочки в каждой из тетрадей, но на мой взгляд это дольше):Я использовала небольшой напильник с тремя гранями, купила в ашане :)Когда наши дырочки готовы, мы можем легко и виртуозно сшить блок. Нам понадобятся две ленты из ткани. Я использую хлопчатобумажную. Ленты должны быть такой ширины, чтобы помещаться между двумя пропиленными дырочками:Шить мне удобно, положив блок на край стола лицом к себе. Тут могут быть вариации, но главное – стараться не мять и не пачкать бумагу в процессе. Часто на первых порах это не у всех получается. Для шитья я использую иглы для кожи и нитки "Ирис" для вязания крючком. Кладем одну из тетрадей перед собой, как указано на фото.Перед началом шитья нужно обязательно включить приятную музыку :)Прошиваем первую тетрадь швом "вперед иголку", одинарной нитью, оставив хвостик снаружи. Тканевые ленты не прокалываем, а просто огибаем нитью:Кладем на первую сверху вторую тетрадь, при этом не путаем правый и левый край тетрадей, т.е. не переворачиваем их. Вставляем нашу иголочку в дырочку второй тетради:И прошиваем также, как и первую, цепляя нить за нить предыдущей тетради в том месте, где мы огибаем ленты:Когда мы дошли до края, завязываем рабочую нить и наш оставленный хвостик на два-три узелка, предварительно хорошо подтянув их:Кладем сверху третью тетрадь и проделываем то же самое:На местах, где расположены наши ленты, цепляем рабочую нить только за одну предыдущую:Пришиваем третью тетрадь:И теперь мы должны завязать узелок, соединяя третью тетрадь с предыдущими. Для этого продеваем иголку в ниточку между 1-й и 2-й тетрадями:Выводим иглу, оставляя петельку:И продеваем иглу с получившуюся петельку вот так:Прижимаем тетради друг к другу,чтобы наш узелок получился тугим:По сути это простой швейный узелок, его часто завязывают, когда заканчивают шитье. Теперь мы смело докладываем сверху все последующие тетради, пришивая их к блоку и завязывая узелки по краям.Если у вас закончилась нитка, то надвязать ее удобно в тот момент, когда мы находимся над лентой. В этом случае узелок гарантировано останется на корешке, и его будет не видно на готовом изделии.Когда все тетради сшиты, мы завязываем сбоку не один, а два или три швейных узелка.Снова кладем блок между картонками, особое внимание уделяя ровному корешку. Тетради должны лежать одна к другой:И застегиваем наш импровизированный пресс сверху и снизу:Теперь нужно проклеить корешок. Я использую Герметик Силиконовый фирмы "Момент". Он держит тетради вместе довольно прочно, при этом остается эластичным даже после высыхания, в результате чего блокнот отлично открывается и листается.  Также после его применения не нужно дополнительно проклеивать зазоры между тетрадями.Наносим герметик на корешок:И размазываем вдоль него губкой, обращая внимание на заполнение каждой щели.Когда все щели заполнены, можно снять лишнее и выровнять слой.Снова застегиваем клипсы вдоль корешка, стараясь их "давящей" частью как можно ближе к нему подобраться.Обычно блок сохнет от часа, но если есть возможность, лучше оставить его под прессом подольше. Я также часто оставляю на ночь. А пока мы можем подготовить будущие форзацы. Для их нам понадобятся два листа плотной бумаги (в нашем случае А4 формата), желательно от 180 г/м2, можно использовать бумагу для скрапбукинга. Делаем биговочки посередине:И складываем их пополам, "красивой" стороной вовнутрь:По мере высыхания достаем из под пресса наш блок:Я наклеиваю пару листочков крафт-бумаги перед тем, как наклеить форзац. Она скроит рельеф лент под форзацем и добавит прочности изделию.Приклеиваю при помощи клея-карандаша UHU вот так:А ленты приклеиваю сверху на крафт:Далее мы приклеиваем форзацы. Я люблю делать прочные и добротные блокноты, поэтому использую клей Момент кристалл. Для ровного нанесения полоски клея защищаем листом бумаги ту часть блока, на которую клей попасть не должен:Убираем лист, приклеиваем форзац. Кусочек крафта с лентами клеим на форзац сверху:Теперь нам предстоит выровнять края получившегося блока.Тут есть 4 способа:1.  Приобрести простенький гильотинный резак. Оправдывает себя в том случае, если делать блокноты вы собираетесь часто и помногу. Резаки продаются тут: www.rezak ru/steiger/3715.shtml2. Попробовать обрезать вручную при помощи строительного ножа. Нож можно купить в Ашане, Леруа Мерлен и т.п. Выбирайте недешевый, тяжелый нож и хорошие сменные лезвия. Ломайте лезвия как можно чаще.  На первый взгляд этот способ кажется невозможным, но у меня на мастер-классах у многих получается уже с первого раза обрезать блок вполне достойно. А уж при определенных тренировках часто получается недалеко от идеала.Ставим у края металлическую линейку и сильно прижимаем ее к блоку левой рукой. Не стоит обрезать меньше, чем 5 мм, это очень сложно. Правой рукой режем ножом, держа руку строго перпендикулярно рабочей поверхности. Проводим ножом много раз, не надавливая на него сильно. Лучше пусть будет больше "проходов", но почти без давления. В итоге срез можно обработать мелкой наждачной бумагой.Фото с моего живого МК:3. Можно отнести блок в типографию недалеко от дома или работы. Часто они не откажут в обрезке блока, и стоит это в районе 5–15 р. за блок. Если блок один, часто режут бесплатно :)4. Оставить как есть :) Мохнатый край подчеркивает, что изделие ручной работы.Я использую резак:В результате получаем готовый блок.

Для обложки нам понадобятся две переплетные картонки чуть больше формата блока и картон 300 г/м2 для корешка.

Картон обрезаем так, чтобы при наложении на блок с 3-х сторон осталось примерно по 5 мм навылет, а у корешка было на 5–7 мм меньше (высота переплетного материала, умноженная на два):

На картоне для корешка (у меня 10 см х высоту обложки) делаем несколько биговок 7на расстоянии 2–3 мм друг от друга. Это делается для того, чтобы корешок красиво закруглялся при эксплуатации. Расстояние от первой до последней биговки должно быть на 3–4 мм больше, чем высота корешка блока.

Вот так примерно должен сидеть на блоке картонный корешок:

Теперь склеиваем корешок с картоном обложки. Я клею на клей Момент Кристалл. Не забываем отступить те 5–8 мм от крайних биговок на корешке, которые мы закладывали, когда обрезали картон.

Я хочу блокнотик помягче, поэтому приклеила сверху дополнительный слой флиса :)

Каркас обложки готов. Теперь готовим кусочек ткани, который больше на 15–20 мм, чем обложка. Будьте внимательны: если на ткани есть узор, соблюдайте его верх-низ и право-лево :)

Ткань отутюживаем и немного крахмалим.

Кладем на готовую ткань каркас обложки, мягкой стороной вниз:

И на расстоянии около 3–5 мм от края наносим клей. Тут я использую Корфикс Клей для Хобби.

Приклеиваем длинные стороны, можно дополнительно приутюжить:

Теперь наша задача – сделать аккуратные уголки. Сначала заглаживаем ткань вот так:

А после вот так:

По желанию лишнюю ткань уголка можно срезать. Когда приклеим короткие стороны нашей обложки, у нас получатся вот такие уголочки:

Вот и обложка почти готова:

На всякий случай примеряем ее к нашему блоку – сидит отлично!

Самое время добавить на обложку пришивные украшения и украшения, которые крепятся на люверсы или брадс. Приклеивающиеся украшения можно оставить на потом. У меня будет блокнот для записи снов :)

На самом блоке можно сплести каптал:

Как плести каптал from Janna Khusnulina on Vimeo.

К обложке можно приклеить закладку, или несколько. Я приклеиваю их термоклеевым пистолетом.

Вот и финал :) Примеряем блок к обложке:

Кладем два листа чистой бумаги между листами форзаца, наносим клей Момент Кристалл на форзац и захлопываем обложку, стараясь приклеить как можно ровнее. То же самое и с задней частью блокнота. Если позволяют украшения, то готовый блокнот можно убрать под пресс или просто сильно надавить на него.

Все готово! Начать писать в блокнот я советую часов через 12 после завершения работы над ним :)

Всем удачи и вдохновения!

www.livemaster.ru

Создание сайта в блокноте | Простой пример создание сайта в блокноте | HTML-теги для создания веб-сайта через блокнот

Доброго времени суток. Как правило в современном мире сайты создаются либо на CMS либо в бесплатных или платных конструкторах. Но все же, в начале времен 1990-2000 годы сайты создавались преимущественно на HTML, без использования каких-либо обращений к базе данных. Различные программы, позволяющие редактировать HTML + CSS в реальном времени, например, Dreamweaver — появились только в самом конце 20-го века. Поэтому сайты создавались в блокноте и других подобных редакторов. Хоть сейчас и существует множество удобных способов сделать качественный ресурс, создание сайта при помощи блокнота позволяет выучить основы построения страницы и основы HTML в целом.

Итак, для того, чтобы создать сайт через блокнот вам нужно для начала создать HTML файл. Сделать это можно следующим образом:Заходите в меню Пуск -> Все программы -> Стандартные -> Блокнот

И сразу же сохраним его в HTML формате:  В блокноте нажмите: Файл -> Сохранить как

И напишите название файла, к примеру, index.html

Теперь мы можем приступать непосредственно к созданию HTML верстки в блокноте. Для начала, напишем основную разметку HTML кода, вы можете ее сразу скопировать и вставить, чтобы не тратить время попусту.

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Мой самый прекрасный сайт</title> </head> <body> <h2>Мой первый сайт</h2> <p>Еще совсем чуть-чуть, и я научусь делать самые лучшие сайты на свете.</p> </body> </html>

По сути это основные элементы, из которых и состоит любой веб-ресурс. Все, что находится в скобках называется HTML-тегом или просто тегом. Все HTML теги открываются, содержат в себе какую-то информацию и затем закрываются. Есть и другие теги, которым не нужен закрывающий тег, но о них мы поговорим позже. Сейчас нам куда интересней ответ на вопрос «как же создать сайт в блокноте?».

Давайте рассмотрим каждый из них, чтобы мы могли легко научиться создавать сайты в блокноте

HTML-теги для создания сайта через блокнот

Нажмем сохранить и теперь кликнем на получившийся файл. Откроется браузер и мы увидим наш сайт сделанный на блокноте

Получился у нас конечно, не самый лучший в мире веб-ресурс, но надо ведь с чего-то начинать?:)

В этой статье мы не создавали никакого меню, если вам интересно как же сделать горизонтальное меню для вашего сайта, то добро пожаловать в эту статью.

Теперь давайте придадим ему «красивостей», напишем несколько стилей внутри тега <head>

body { background: #F2F2F2; max-width: 900px; margin: 0 auto; padding: 20px; } h2{ color: #4C4C4C; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #BEBEBE; } p{ font:italic; }

В итоге наш пример сайта сделанного в блокноте в коде выглядит так

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Мой самый прекрасный сайт</title> <style> body { background: #F2F2F2; max-width: 900px; margin: 0 auto; padding: 20px; } h2{ color: #4C4C4C; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #BEBEBE; } p{ font:italic; } </style> </head> <body> <h2>Мой первый сайт</h2> <p>Еще совсем чуть-чуть, и я научусь делать самые лучшие сайты на свете.</p> </body> </html>

Теперь вы научились создавать простые сайты в блокноте. Попробуйте использовать другие стили и теги для того, чтобы понять как же устроены сайты.

UPD2. Добавил в код указание кодировки, для правильного отображения русского языка, а также информацию о меню для сайта.

 

nz4.ru