Создание сайта на Adobe Dreamweaver
- Первая веб страница
- Форматирование текста в HTML
- Создание списков
- Гиперссылки
- Создание таблиц в блокноте
- Цвета в HTML
- Как создать форму в HTML?
- Табличная верстка сайта
- Теги в HEAD
- Изображения в html
- CSS
- Работа с текстом и изображениями в CSS
- Блочная структура сайта
- Блочная верстка
В этой главе мы познакомимся с замечательной программой, с помощью которой создают сайты — Adobe Dreamweaver. Это интуитивно понятный визуально ориентированный HTML-редактор. Мы уже знаем начальные элементы, из которых состоит веб-ресурс. С помощью Dreamweaver мы сможем делать сайты сложнее, лучше и быстрее, чем, если бы мы писали руками в блокноте. Для начала давайте познакомимся с основными управляющими элементами редактора.
Полезная реклама: многие российские банки уже ввели комиссию на валютные счета, чтобы сохранить накопления и оплачивать зарубежные сервисы, рекомендуем открыть банковскую карту в Белоруссии, Казахстане или Киргизии.
В открывшемся окне нам редактор предлагает несколько вариантов создания сайта. Начнем с самого простого:
- Нажмите на ссылку Site (обозначена цифрой 1). В открывшемся окне выберите New Site.
- Мы увидим такое окно:
Перейдите на вкладку Advanced, в категорию Local Info. В поле Site name введите название сайта, в поле Local root folder введите путь к папке, где будут хранится файлы вашего ресурса. Дальше, нажмите кнопку ОК.
- После этого вы снова попадете в окно как на рис. 1. Справа во вкладке Files будут отображаться файлы вашего сайта (обозначено цифрой 3).
- Сейчас нажмите на ссылку HTML (цифра 2) для создания первого файла веб-проекта.
- После этого вам откроется следующее окно:
Цифрой 1 обозначено место, где будет название нашего файла, цифрой 2 место, куда мы можем вписать название нашей страницы, которая будет отображаться в браузере, цифрой 3 обозначено место, где мы сможем выбрать, как будет отображаться наш сайт в редакторе.
Пощелкайте по области 3, вы увидите что редактор отображает нашу страницу по-разному. Если мы нажмем на кнопку Code, редактор отобразит только код нашей страницы, если мы нажмем на Design, то редактор покажет нам, как бы выглядел сайт в браузере. На рисунке 3 нажата кнопка Split, в этом режиме редактор показывает нам сверху страницу в режиме код, а снизу страницу в режиме дизайна.
В самом низу находится панель форматирования, в ней мы можем форматировать текст как в Word.
По умолчанию редактор добавляет вместо тега <html> следующие строки кода:
Оставим эти строки как есть.
В поле Title (цифра 2) введите название нашей страницы- First Site.
Щелкните правой кнопкой мышки по названию файла (цифра 1), выберите Save As, введите имя файла — index.html и нажмите Сохранить.
С правой стороны, во вкладке Files вы увидите свой файл index.
html.
По умолчанию главной страницей веб-ресурса должен быть файл с названием index.html.
В этой главе мы познакомились с редактором Dreamweaver, познакомились с некоторыми элементами управления редактора, научились создавать файлы и страницы нашего проекта.
В следующей главе мы научимся вставлять и форматировать текст нашего сайта с помощью Dreamweaver.
Adobe Dreamweaver
Создание новой веб-страницы с помощью Блокнота
Windows Notepad — это базовая программа обработки текстов, которую вы можете использовать для написания своих веб-страниц. Веб-страницы — это всего лишь текст, и вы можете использовать любую текстовую программу для написания HTML. В этом руководстве вы узнаете о процессе.
01 из 07
Размещение файлов в новой папке
Чтобы создать новый сайт в «Блокноте», сначала создайте отдельную папку для его хранения. Как правило, вы сохраняете свои веб-страницы в папке с именем HTML в папке «Мои документы», но вы можете хранить их там, где хотите.
- ОткройМои документы окно.
- Нажмите файл > новый > Папка.
- Назовите папку мой веб-сайт.
Важная заметка: Назовите веб-папки и файлы, используя все строчные буквы и без пробелов или знаков препинания. В то время как Windows позволяет использовать пробелы, многие веб-хостинг-провайдеры этого не делают, и вы сэкономите время и проблемы, если вы правильно назовете файлы и папки с самого начала.
02 из 07
Сохранить страницу как HTML
Как и при имени каталога, при сохранении страницы используйте все строчные буквы и пробелы или специальные символы в имени файла.
- В Блокноте нажмите файл а потом Сохранить как.
- Перейдите в папку, в которой вы сохраняете файлы своего сайта.
- Изменить Сохранить как тип выпадающего меню Все файлы (*.
*). - Назовите файл. В этом руководстве используется имя pets.htm.
*).03 из 07
Начало записи веб-страницы
Первое, что вы должны ввести в свой документ HTML-документа «Блокнот», — DOCTYPE. Это говорит браузерам, какой тип HTML ожидать.
Объявление doctype не является тегом. Он сообщает компьютеру, что документ HTML5 прибывает. Он находится в верхней части каждой страницы HTML5 и принимает эту форму:
Когда у вас есть DOCTYPE, вы можете запустить свой HTML. Введите как начальный тег, так и конечный тег и оставьте некоторое пространство для содержимого вашего веб-страницы. Документ «Блокнот» должен выглядеть следующим образом:
04 из 07
Создание заголовка для вашей веб-страницы
Глава HTML-документа содержит основную информацию о вашей веб-странице — такие вещи, как название страницы и, возможно, метатеги для оптимизации поисковых систем.
Чтобы создать раздел главы, добавьте теги заголовка в текстовый документ в блокноте HTML между тегами html.
Как и в тегах html, оставьте некоторое пространство между ними, чтобы у вас было место для добавления информации о голове.
05 из 07
Добавить название страницы в разделе заголовка
Заголовок вашей веб-страницы — это текст, который отображается в окне браузера. Это также то, что написано в закладках и избранных, когда кто-то сохраняет ваш сайт. Сохраните текст заголовка между тегами заголовка. Он не появится на самой веб-странице, только в верхней части браузера.
Эта страница примера называется «McKinley, Shasta и другие домашние животные».
Мак-Кинли, Шаста и другие домашние животныеНеважно, как долго ваш заголовок или он охватывает несколько строк в вашем HTML, но более короткие заголовки легче читать, а некоторые браузеры обрезают длинные в окне браузера.
06 из 07
Основной элемент вашей веб-страницы
Тело вашей веб-страницы хранится в тегах тела.
Он должен появиться после заголовков, но до конечного html-тега. Здесь вы помещаете текст, заголовки, подзаголовки, изображения и графику, ссылки и все остальные материалы. Это может быть так долго, как вам нравится.
Оставьте дополнительное пространство между начальными и конечными телами тела.
Этот же формат можно использовать для написания вашей веб-страницы в «Блокноте».
07 из 07
Создание папки изображений
Прежде чем добавлять контент в тело вашего документа HTML, вам необходимо настроить свои каталоги, чтобы у вас была папка для изображений.
- Открой Мои документы окно.
- Переход на мой веб-сайт папка.
- Нажмите файл > новый > Папка.
- Назовите папку изображений.
Сохраните все изображения для своего веб-сайта в папке с изображениями, чтобы вы могли их найти позже.
Это позволяет легко загружать их, когда вам нужно.
Как создать веб-сайт с помощью HTML
Содержание
В последнем уроке мы кратко рассмотрели, как работает веб-модель клиента и сервера, и провели короткую демонстрацию того, как запустить веб-сайт WordPress. Вы также должны иметь общее представление о функциях HTML, CSS и JavaScript.
В этом уроке основное внимание будет уделено тому, как создать веб-сайт с использованием HTML, изучению различных элементов языка разметки и тому, как они объединяются для структурирования и создания простой веб-страницы.
Создание веб-сайтов на WordPress (или веб-сайтов на любой другой платформе) полезно и удобно, но у них есть свои недостатки. В своем стремлении изучить веб-разработку вы должны научиться использовать HTML, CSS и JavaScript. Знание того, как они работают, также поможет вам лучше разрабатывать WordPress.
Изучение HTML станет вашим первым большим шагом в создании веб-сайта, и вы будете делать все самостоятельно.
Основное внимание здесь будет уделено только HTML, поскольку CSS и JavaScript — две более широкие темы, которые лучше подходят для отдельных руководств. Вы узнаете, что такое HTML, и инструменты для создания базовой HTML-страницы, а также увидите пошаговый процесс создания веб-сайта с помощью HTML.
Язык гипертекстовой разметки или HTML для краткости — это язык, описывающий структуру веб-страниц. HTML диктует, что является основной частью контента и где должны размещаться фрагменты текста. Другими словами, HTML определяет отображение и порядок содержимого.
Веб-сайт — это просто набор веб-страниц, связанных внутренними ссылками, кнопками, текстом и т. д. — все это «элементы».
Каскадные таблицы стилей (CSS) — это язык. HTML и CSS идут рука об руку, ведь вам не нужна веб-страница, которая выглядит так:
Это было создано с использованием только HTML — без CSS.
Но мы оставим дизайнерские возможности CSS для более позднего урока. Давайте перейдем к важной части HTML: элементам и тегам.
Что такое элементы и теги?Весь документ HTML просто состоит из ряда элементов. Эти элементы в большинстве случаев определяются как открывающим, так и закрывающим тегом. Например, первый элемент, который вы создадите, будет:
.
.
.
Элемент HTML является корневым элементом этой страницы и определяется с помощью открывающего тега и закрывающего тега.
Закрывающие теги определяются путем помещения косой черты перед именем элемента. Некоторые элементы не имеют закрывающего тега — они называются одноэлементными тегами. Типичным примером является , который отображает изображение из источника на веб-странице.
Если вы хотите знать, как создать веб-страницу, вам нужно знать, какие элементы нужно включить.
Технически все, что вам нужно, чтобы начать создавать веб-страницу, — это простейшие элементы HTML. Базовая HTML-страница всегда будет отправной точкой для создания веб-сайта.
Большинство HTML-страниц имеют набор общих компонентов, которые создаются с использованием элементов, упомянутых ранее. Обычно это следующие компоненты:
- Верхний колонтитул
- Нижний колонтитул
- Панель навигации
- Основное содержание
В сегодняшней демонстрации мы сосредоточимся на создании страницы только с основным содержанием.
Подводя итог, каждый веб-сайт, который вы разрабатываете, будет содержать следующие элементы:
- HTML-теги
- Теги заголовков (не путать с заголовками!)
- Бирки для тела
- Заголовки (
,
,
и т.
д.)
д.)В этом упражнении мы будем использовать все эти элементы для создания простой веб-страницы, отображающей текстовую информацию. Мы узнаем больше об этих элементах на протяжении всего упражнения.
Общие теги HTMLСтоит знать некоторые из наиболее распространенных тегов HTML, так как вы будете часто использовать их в своих поисках, чтобы научиться создавать веб-сайты. Не беспокойтесь, если вы еще не знаете, как использовать некоторые из них; это просто полезно для справки, и, конечно же, вы всегда можете погуглить их (и это поощряется), когда вам нужно. Скоро это станет второй натурой.
Ниже приведены некоторые из наиболее часто используемых тегов:
- …: Корень документа определяет документ как HTML
- . ..: Содержит метаданные о документе, включая стиль, скрипты, набор символов и заголовок, среди прочего
- . ..
..-
… : Определяет заголовок веб-страницы
-
…
: Определяет текст как заголовок и может быть любым от h2 до h6
-
…
: Определяет содержимое как абзац
- …: Определяет гиперссылку со ссылкой, заключенной в кавычки. Текст между открывающим и закрывающим тегом будет действовать как гиперссылка
-
: Определяет изображение с источником изображения, заключенным в кавычки
- …: Выделяет текст между тегами жирным шрифтом
- . ..: Выделяет курсивом текст между тегами
..: Выделяет курсивом текст между тегами- …: Подчеркивает текст между тегами
Блокнот, WordPad и Microsoft Office работают как текстовые редакторы, за исключением того, что они немного более целенаправленны. Редакторы кода , такие как Sublime Text, Atom, Vim и Notepad++, являются некоторыми примерами популярных редакторов кода. У многих из них есть бесплатные версии, которые идеально подходят для ваших целей, так что выбирайте любую!
Для начала вам понадобится редактор кода. Однако обратите внимание, что как только вы начнете работать с CSS и JavaScript, вы, вероятно, захотите использовать некоторые полезные инструменты, чтобы сделать этот процесс более удобным.
А пока загрузите редактор кода и следуйте инструкциям ниже. Если вы не знаете, какой из них выбрать, то Sublime Text — хороший вариант для новичков.
Выполните следующие действия, и вы узнаете, как быстро создать простую веб-страницу с помощью HTML.
Шаг 1. В редакторе кода укажите тип документа как HTMLОткройте редактор кода и создайте новый файл. Сохраните это как «name.html», где имя может быть любым.
Все ваши документы HTML будут начинаться с объявления . Это просто сообщает вашему браузеру, что это за файл. В данном случае это HTML-файл.
Мы объявляем документацию в виде файла HTML следующим образом:
В вашем редакторе кода это будет выглядеть так:
считается метатегом. Существуют и другие типы документов для старых версий HTML, но вам не нужно беспокоиться о них. Просто помните, что DOCTYPE информирует ваш браузер о том, что это файл HTML.
Шаг 2: Добавляем HTML-теги Теперь перейдем к добавлению HTML-тегов , под которые будут попадать все остальные элементы.
Ваш текст, информация о разметке, информация — все подпадает под тег HTML. Его часто называют «корнем» HTML-документа.
Теги HTML имеют открывающий и закрывающий теги и определяются следующим образом:
Теперь ваш код должен выглядеть следующим образом:
Шаг 3: Добавьте теги Head и BodyПосле определения нашего документа как HTML, теперь мы можем добавить «head» и «body» веб-страницы. Они находятся внутри тега HTML, который вы должны помнить как корневой тег.
Заголовок представляет собой раздел, в который можно добавить метаданные. Это такие вещи, как ваш заголовок (то, что вы видите на вкладке браузера), связанные таблицы стилей и скрипты. Мы оставим это пустым для нашего упражнения, но продолжим и определим секцию head следующим образом:
Раздел body — это место, где размещается весь контент, который просматривает пользователь.
Ваш текст, изображения, кнопки — все интерактивные элементы идут сюда. Вы можете определить раздел body следующим образом:
Теперь ваша HTML-страница должна выглядеть хорошо. Это должно выглядеть так:
Шаг 4: Добавьте заголовки и абзацыТеперь мы добавим текст на веб-страницу. Многие из вас, возможно, уже знакомы с заголовков и абзацев, если вы раньше работали с блогом. Заголовки — это «большой текст», который разделяет разделы, а абзацы — это обычные части текста, которые следуют и объясняют идею.
Но заголовки и абзацы служат более важной цели в Интернете, сообщая поисковым системам, как читать веб-страницу. По этой причине при разработке веб-сайта вы должны включить на страницу четко определенный набор заголовков.
Существует шесть видов заголовков: h2, h3, h4, h5, h5 и h6. В таком порядке они уменьшаются в размере. Фактический текст заголовка будет находиться между тегами.
Часто вы увидите заголовки, вложенные друг в друга, например, заголовок h4 под заголовком h3 — это просто метод организации текста.
Заголовок можно определить следующим образом:
Аналогичным образом можно определить другие заголовки. Идите вперед и добавьте тег h3 в свой HTML-документ с текстом внутри.
Далее мы добавим на страницу основной текст. Большие тексты помещаются внутри тега абзаца, определяемого следующим образом:
Добавьте в документ тег абзаца с вашим любимым цветом, блюдом и животным в качестве текста внутри. Должно получиться так:
Вот и все! Теперь у нас есть наша самая первая веб-страница. Это просто, но это определенно веб-страница!
Шаг 6. Загрузите веб-сайт в браузер Конечно, вам захочется посмотреть, как выглядят ваши усилия. Откройте сохраненный файл в браузере и вуаля! Если вы сохранили файл как html-файл (как упоминалось в первом шаге), все, что вам нужно сделать, это дважды щелкнуть файл, чтобы открыть его в браузере.
Вы также можете щелкнуть файл правой кнопкой мыши, нажать «открыть с помощью» и выбрать браузер из списка. Посмотрите на изображение ниже, если вы не уверены.
Ваша веб-страница должна загрузиться и на сервере она будет выглядеть примерно так:
ЗаключениеКонечно, это только начало. Сколько веб-сайтов похожи на тот, который вы только что создали? HTML определяет только структуру веб-страницы, а не ее внешний вид.
Чтобы украсить вашу веб-страницу, вам понадобятся дополнительные элементы HTML или CSS, которые добавят стиль вашей странице, от цветов и кнопок до индикаторов выполнения. CSS также легко освоить, но вы увидите это, когда мы рассмотрим некоторые из основных концепций, лежащих в основе стилизации вашей страницы, в следующем уроке.
А пока продолжайте работать с HTML и посмотрите, что еще вы можете добавить на свою веб-страницу. Это может быть изображение, текстовое поле, маркированные списки — и многое другое, и поиск HTML-тегов многому вас научит.
Узнайте больше с помощью HTML
Использование Блокнота для форматирования веб-страницы Купить на Amazon
Одним из способов создания и редактирования веб-страниц на собственном компьютере является использование текстового редактора, такого как Блокнот, который позволяет форматировать страницу с помощью тегов HTML.
Используя Блокнот для работы с HTML, вы вводите текст, добавляете теги HTML для разметки, сохраняете файл, а затем открываете его в Internet Explorer или другом веб-браузере. То, что вы видите при просмотре своего HTML-кода в IE, действительно будет тем, что увидят пользователи, просматривая ту же веб-страницу в том же веб-браузере.
При выполнении действий, описанных здесь, и в других случаях использования Блокнота не открывайте WordPad вместо Блокнота. WordPad хранит свои собственные скрытые коды форматирования среди набираемых вами текстовых символов, как и Word (но без большинства приятных функций).
Выполните следующие действия, чтобы начать использовать Блокнот в качестве средства редактирования HTML:
Нажмите кнопку «Пуск».
Выберите «Пуск» → «Программы» → «Стандартные» → «Блокнот».Блокнот открывается.
Нажмите «Сохранить и продолжить». Сохраните документ под любым именем, которое вы выберете, но используйте суффикс .htm.
Файл будет сохранен как текстовый файл без кодов форматирования; суффикс .htm сигнализирует вашему веб-браузеру (а после загрузки файла — веб-серверам и т. д.), что файл является веб-страницей.
Если щелкнуть файл правой кнопкой мыши и выбрать «Свойства», откроется суффикс файла.
Откройте меню «Формат» и щелкните «Шрифт».
Появится меню Формат. Параметр «Шрифт», который вызывает диалоговое окно «Шрифт», позволяет изменить отображаемый шрифт, размер шрифта и форматирование (узко говоря: только полужирный, курсив или полужирный курсив).
Меню «Формат Блокнота» работает иначе, чем любое меню «Формат» в любой другой программе, которую вы, вероятно, будете использовать.