Как создать папку сайта и добавить в сайт пустые страницы


Создание директории сайта

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

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

Директория сайта написанного на чистом HTML

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

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

Сначала зайдём в библиотеку «Документы» на нашем компьютере «Пуск-Компьютер-Документы», и щёлкнув правой кнопкой по окну «Документы», выбираем «Создать», а затем «Папку».

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

Как только папка появилась с названием «Новая папка» в синем фоне, нажимаем клавишу «Backspace», и тем самым убираем название «Новая папка», а вместо него пишем, к примеру, «site»(сайт), и сохраняем, щёлкнув по нему левой клавишей.

Затем двойным щелчком открываем эту папку, и уже в ней, точно так-же, создаём ещё две — «сontent»(содержание) и «images»(изображения)

В папку site мы в дальнейшем загрузим ещё файл index.html (главная страница сайта), в папку content — остальные страницы сайта, а в папку images — картинки.

Можно спроектировать директорию немного по другому. Можно вместо папки «content», создать несколько папок — rubrica-1, rubrica-2, rubrica-3, и так далее.

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

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

Вот и всё. Для сайта на чистом HTML корневая папка готова. Теперь можно создавать файлы станиц и заполнять ими эту директорию.

Директория сайта написанного на HTML+CSS+PHP

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

Денвер — это программа, включающая в себя Apache, PHP, MySQL, Perl и другие необходимые для веб модули.

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

Как установить Денвер, Я очень подробно показал в статье Установка Денвер

Когда Денвер будет установлен, можно приступить к созданию на нём директории сайта.

Запускаем Денвер, щёлкнув по ярлыку «Start Denwer», который появился на Вашем Рабочем столе, после установки.

Заходим «Пуск — Компьютер», и открываем диск «Z», автоматически создающийся при установке Денвера.

Открываем папку «home».

В этой папке я стёр свои сайты, чтоб Вас не путать, а Вам нужно будет создать новую папку и назвать её, допустим, «site» или «site.ru» Можно любое другое название английскими буквами, значения не имеет.

Затем, открываем эту пустую папку, и в ней создаём ещё одну — «www». Эту уже по другому называть нельзя. И вот в ней и будет расположена директория Вашего сайта.

Открываем её, и создаём ещё 3 папки:

1. images    — для картинок.
2. style    — для стилей.
3. is    — для скриптов.

И ещё в эту папку нам нужно поместить файл .htaccess.

.htaccess — файл дополнительной конфигурации веб-сервера Apache, входящего в сборку Денвер. Он позволяет задавать дополнительные параметры и разрешения для работы веб-сервера.

Чтобы его создать, нужно открыть «Блокнот» (Пуск — Все программы — Стандартные), или если у Вас уже установлен Notepad++. Затем скопировать и вставить в него следующий код:

AddDefaultCharset utf-8
AddCharset utf-8 *
<IfModule mod_charset.c>
CharsetSourceEnc utf-8
CharsetDefault utf-8
</IfModule>

Затем «Файл — Сохранить как …», и в открывшемся поисковом окне находим папку «www».

Затем, прежде чем сохранить файл, в «Имя файла», в низу окна поисковика, выделяем, и клавишей «Bacspage» убираем то, что там написано, а прописываем «.htaccess», и теперь уже «Сохранить» (не пропустите точку впереди, так как это расширение).

После этого файл появиться в директории.

Всё, корень сайта готов. Можно заполнять его файлами.

В папку images будем складывать картинки, в папку style файлы css, а в папку is файлы javascript.

Хоть это и выходит за рамки данной статьи, но желательно проверить, как работает интерпретатор php.

Для этого потребуется редактор файлов Notepad++. Если он у Вас ещё не установлен, то Вам необходимо сначала прочитать статью Руководство по установке и использованию Notepad++, и установить редактор.

Затем открыть новый документ и написать в нём следующий скрипт:

<?php
echo 5;

?>

Далее «Файл — Сохранить как …», находим в поисковике папку «www», называем файл «index.php», и сохраняем.

После этого можно зайти в нашу директорию, убедиться в том, что файл «index.php» в ней появился, и перезагрузить Денвер, двойным щелчком по «Restart Denwer».

Как только Денвер перезагрузится, открываем новую вкладку в браузере, и вводим в поисковой строке запрос «site/index.php».

На экране должна появиться цифра 5.

Это значит, что Денвер работает нормально, можно продолжать изучать веб-дизайн и веб-программирование, и строить свой сайт, хоть только на html + css, хоть с применением php.

Готовый код для сайтов:

1. На чистом HTML

2. На HTML+CSS

3. На HTML+CSS+PHP

Желаю творческих успехов.


Перемена

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

Делаем сайт и выкладываем его в интернет < < < В раздел > > > Каркас страницы, теги. Создаём файл.

Как создать веб-каталог в WordPress (шаг за шагом)

Вы хотите создать веб-каталог для бизнеса? Интернет-каталоги - это популярная бизнес-идея в Интернете, позволяющая монетизировать свой веб-сайт с помощью пользовательского контента.

Angie’s list, популярный веб-каталог, который помогает домовладельцам находить надежных подрядчиков и поставщиков услуг. Они стоят более 9 миллиардов долларов.

Если вы хотите создать нишевый веб-каталог, чтобы зарабатывать деньги в Интернете, или каталог партнеров, чтобы перечислить своих поставщиков, вы можете легко сделать это в WordPress.

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

Что такое Интернет-каталог?

Интернет-каталог похож на каталог, в котором перечислены предприятия или отдельные лица с такими деталями, как контактная информация, услуги, функции и т. Д.

Интернет-каталоги

позволяют пользователям просматривать каталог ссылок, разделенных на темы, категории и области интересов.Прекрасным примером веб-каталога являются Желтые страницы или Список Энджи.

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

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

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

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

Сказав это, давайте посмотрим, как создать веб-каталог в WordPress.

Метод 1: Создание каталога WordPress с грозными формами

Formidable Forms - самый продвинутый плагин для создания форм WordPress на рынке. Это поможет вам создать простую контактную форму, а также расширенные формы, такие как опросы, формы оплаты, формы регистрации и многое другое для вашего сайта WordPress.

Плагин поставляется с эксклюзивной функцией под названием «Просмотры», которая позволяет отображать любые данные, отправленные через форму, в интерфейсе вашего веб-сайта. Используя эту функцию, вы можете легко создавать каталоги, списки недвижимости, доску объявлений, календари событий и многое другое.

Давайте создадим бизнес-каталог с помощью плагина Formidable Forms.

1. Создайте форму для сбора данных для вашего каталога

Первое, что вам нужно сделать, это установить и активировать плагин Formidable Forms.Подробные инструкции см. В нашем руководстве по установке плагина WordPress.

После установки и активации подключаемого модуля перейдите к Formidable »Forms и нажмите кнопку« Добавить ».

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

Мы выберем шаблонный метод, потому что это самый быстрый способ создания расширенной формы.Formidable Forms предлагает более 20 готовых шаблонов форм прямо из коробки.

Например, мы выберем «Объявления о недвижимости», чтобы создать каталог недвижимости. Нажмите «Создать форму», чтобы начать.

Вы увидите всплывающее окно, в котором вас попросят ввести имя и описание вашей формы.

После этого он загрузит готовую форму для подачи заявки на недвижимость.

Вы можете просмотреть и настроить форму с помощью простого интерфейса перетаскивания.После этого нажмите кнопку «Обновить».

Если вы хотите создать веб-каталог премиум-класса с платными объявлениями, вам необходимо связать свою форму с платежным шлюзом.

Formidable позволяет собирать платежи через PayPal, Stripe и Authorize.net.

В этом примере мы покажем, как интегрировать PayPal для приема платежей. Перейдите к Formidable »Add-Ons на панели инструментов и установите дополнение« PayPal Standard ».

После установки и активации надстройки зайдите на Formidable »Global Settings и выберите PayPal.Обновите свой адрес электронной почты PayPal и другие настройки.

После этого снова откройте соответствующий редактор форм и нажмите кнопку «Настройки» вверху.

Затем щелкните вкладку «Действия с формой» и затем выберите значок PayPal, чтобы добавить новое действие.

Теперь вам нужно настроить PayPal. Добавьте сумму платежа, выберите тип платежа (разовый платеж, пожертвование или подписка), выберите валюту, а затем добавьте URL-адрес возврата и URL-адрес отмены.

После этого не забудьте обновить форму.

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

2. Опубликуйте свою форму в WordPress

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

Посетите страниц »Добавьте новый из своей панели управления, чтобы создать новую страницу.После этого назовите свою страницу и добавьте виджет Formidable Forms в редактор.

Затем выберите свою форму.

После этого он загрузит предварительно созданную форму представления недвижимости в ваш редактор страниц.

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

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

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

3. Создайте свой веб-каталог с потрясающими видами

После того, как вы собрали много информации, вы можете создать веб-каталог с Formidable Views.

Перейдите к Formidable »Views на панели инструментов и нажмите кнопку« Добавить ».

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

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

В этом руководстве мы выберем вариант «Оба (динамический) - список записей, которые будут ссылаться на одну страницу записи».

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

 [frm-search] 

После этого вам нужно добавить контент в список каталогов в следующем формате.

 
[идентификатор MLS] [адрес] $ [листинг-цена] [рекламное объявление] [спальня] Спальни | [ванная] Ванна | [кв.м-жилая] кв.футов

В приведенном выше коде вам необходимо заменить home-image, MLS ID, адрес, цену объявления, рекламное объявление, спальню, ванную и sqft-living на соответствующие идентификаторы полей / ключи из вашей формы.

Идентификаторы / ключи полей можно найти в поле «Настройка» в правой части страницы.

Например, если мы хотим показать фотографию, загруженную через поле «Main Photo Upload», в качестве домашнего изображения, нам нужно заменить «home-image» на поле с идентификатором «63».

После этого добавьте следующий код в Formidable »Styles» Custom CSS , чтобы настроить внешний вид вашего веб-каталога.

 .listing_info {float: left; ширина: 235 пикселей; margin-right: 10px;} .listings_list img {width: 370px; float: right;} 

После этого вы можете опубликовать свое представление и просмотреть его.

После этого создайте новую страницу для веб-каталога и добавьте к ней свой грозный вид.

Вот как будет выглядеть ваш каталог недвижимости с темой Twenty Nineteen по умолчанию.

Вы можете дополнительно настроить и стилизовать свой каталог Formidable, используя собственный CSS, плагин для создания страниц WordPress с перетаскиванием или плагин для стилизации, такой как CSS Hero.

Метод 2: Использование подключаемого модуля Business Directory

Второй метод - это фактическое использование подключаемого модуля Business Directory. Помните, что хотя основной плагин бесплатный, для многих функций потребуется приобрести PRO-версию плагина.

Начните с установки и активации подключаемого модуля Business Directory.После активации плагин запросит у вас разрешение на создание новой страницы WordPress и добавление в нее шорткода бизнес-каталога.

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

После этого плагин Business Directory автоматически добавит новую страницу под названием Business Directory.

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

Затем вы можете управлять настройками плагина из меню «Администратор каталога» на панели управления.

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

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

После этого перейдите на страницу Администратор каталога »Управление полями формы , чтобы настроить поля формы. Отсюда вы можете добавлять или редактировать поля, которые будут отображаться в форме отправки в каталог.

Затем вам нужно будет создать несколько категорий для вашего каталога.

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

После того, как вы создали категории, вы можете продолжить и создать новый список, посетив «Каталог » Добавить новый листинг .

Теперь вы увидите страницу «Добавить новое объявление», которая похожа на классический редактор WordPress. Введите название объявления и краткое описание вашего объявления.

После этого прокрутите вниз до раздела «Поля / изображения каталогов» и добавьте информацию о своей компании, включая адрес веб-сайта, номер телефона, электронную почту и т. Д.

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

Затем вам нужно будет выбрать подходящую категорию для вашего объявления.

После этого вы можете опубликовать свой каталог.

Теперь вы можете предварительно просмотреть страницу своего веб-каталога на своем веб-сайте. Ваш веб-каталог будет выглядеть, как на скриншоте ниже, с темой WordPress по умолчанию Twenty Nineteen.

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

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

После этого они появятся на странице каталога вашей компании.

Прием платежей за списки справочников
Плагин

Business Directory позволяет принимать платежи за объявления в вашем веб-каталоге. По умолчанию плагин поставляется только с Authorize.net в качестве платежного шлюза.

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

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

На странице настроек платежей первая опция на экране настроек платежей - это флажок для включения платежей. Если ваш сайт еще не полностью готов, то вы можете поставить галочку напротив . Перевести платежные шлюзы в тестовый режим? вариант.

Следующим шагом является выбор валюты и добавление сообщения с благодарностью за платежи.

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

Теперь вы можете связать свой каталог с провайдером платежей. Если вы не установили какой-либо другой дополнительный плагин для платежного шлюза, то в качестве варианта платежного шлюза по умолчанию вы увидите только Authorize.net.

Щелкните ссылку Authorize.net, а затем включите ее, введя свой логин и ключ транзакции.

Поскольку вам требуются платежи, вам нужно будет установить листинговые сборы. Это можно сделать, перейдя в Администратор каталога »Управление сборами .Там вы можете создавать разные планы листинга, устанавливать сборы и продолжительность листинга для каждого плана и сохранять изменения.

Вот и все! Ваш веб-каталог теперь готов принимать платные объявления. Мы рекомендуем вам изучить другие параметры в настройках плагина для дальнейшей оптимизации вашего веб-каталога.

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress.Вы также можете найти нас в Twitter и Facebook.

.

Как добавить новую (пустую) страницу на сайт wordpress с помощью плагина

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант
.

Как сделать страницу домашней страницей - Учебники по WordPress для начинающих

Вы можете легко превратить свой блог в веб-сайт со статической домашней страницей, на которую люди будут заходить каждый раз, когда они приходят. Объедините домашнюю страницу с другими статическими страницами и некоторыми настраиваемыми меню, чтобы помочь посетителям сориентироваться, и прежде чем вы сможете сказать «Я вам это сказал!» у вас есть сайт.


Создайте свою домашнюю страницу

Начните с создания страницы, которую вы хотите использовать в качестве домашней. Перейдите в Мои сайты → Страницы → Добавить .Назовите это «Дом». Пока не беспокойтесь об этом - мы только настраиваем ваш сайт здесь. Если хотите, вставьте немного текста-заполнителя.

Теперь создайте вторую пустую страницу, снова зайдя в Мои сайты → Страницы → Добавить и назовите ее примерно так: «Новости», «Блог» или «Сообщения» - имя, которое поможет вам запомнить, что это это страница, на которой будут появляться ваши сообщения.

Чтобы назначить статическую домашнюю страницу, перейдите в Мои сайты → Настроить → Настройки домашней страницы :

Затем в разделе На главной странице отображается , выберите Статическая страница .Затем щелкните раскрывающийся список Домашняя страница и выберите «Домашнюю» страницу, которую вы создали в качестве статической домашней страницы:

Затем в раскрывающемся списке страниц сообщений выберите страницу «Сообщения», которую вы создали. (Здесь будут появляться ваши новые сообщения в блоге, если вы решите писать сообщения для своего сайта.)

Наконец, нажмите Опубликовать , чтобы изменения вступили в силу.

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


Сделайте свою домашнюю страницу красивой

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


Сделайте так, чтобы ваша домашняя страница работала на вас

Если вы хотите, чтобы ваша домашняя страница действительно служила вашим интересам, подумайте о том, чтобы включить:


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

.

Работа с файлами - Изучите веб-разработку

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

Где должен размещаться ваш сайт на вашем компьютере?

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

  1. Выберите место для хранения проектов вашего сайта.Внутри выбранного вами места создайте новую папку с названием web-projects (или аналогичные). Здесь будут жить все ваши веб-проекты.
  2. Внутри этой первой папки создайте другую папку для хранения вашего первого веб-сайта. Назовите ее test-site (или как-нибудь более изобретательно).

Отвод по корпусу и шагу

Вы заметите, что в этой статье мы просим вас называть папки и файлы полностью строчными буквами без пробелов. Это потому, что:

  1. Многие компьютеры, особенно веб-серверы, чувствительны к регистру.Так, например, если вы поместите изображение на свой веб-сайт по адресу test-site / MyImage.jpg , а затем в другом файле вы попытаетесь вызвать изображение как test-site / myimage.jpg , оно может не сработать. .
  2. Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут рассматривать имя файла как два имени файла. Некоторые серверы заменяют области в ваших именах файлов на «% 20» (код символа для пробелов в URI), в результате чего все ваши ссылки не работают.Лучше разделять слова тире, а не подчеркиванием: my-file.html vs. my_file.html .

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

Какую структуру должен иметь ваш сайт?

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

  1. index.html : этот файл обычно будет содержать содержимое вашей домашней страницы, то есть текст и изображения, которые люди видят при первом переходе на ваш сайт.Используя текстовый редактор, создайте новый файл с именем index.html и сохраните его в папке test-site .
  2. изображений папка : Эта папка будет содержать все изображения, которые вы используете на своем сайте. Создайте папку с именем images внутри папки тестовой площадки .
  3. стили папка : Эта папка будет содержать код CSS, используемый для стилизации вашего контента (например, установки цвета текста и фона).Создайте папку с именем styles внутри папки тестовой площадки .
  4. сценарии папка : Эта папка будет содержать весь код JavaScript, используемый для добавления интерактивных функций на ваш сайт (например, кнопки, которые загружают данные при нажатии). Создайте папку с именем scripts внутри папки test-site .

Примечание : На компьютерах с Windows у вас могут возникнуть проблемы с отображением имен файлов, поскольку в Windows есть опция под названием Скрыть расширения для известных типов файлов. включена по умолчанию.Как правило, вы можете отключить это, зайдя в проводник Windows, выбрав опцию Folder options ... , сняв отметку с Hide extension for known files , затем нажав OK . Более подробную информацию о вашей версии Windows вы можете найти в Интернете.

Пути к файлам

Чтобы файлы взаимодействовали друг с другом, вы должны указать путь к файлу между ними - в основном маршрут, чтобы один файл знал, где находится другой.Чтобы продемонстрировать это, мы вставим немного HTML в наш файл index.html и заставим его отображать изображение, которое вы выбрали в статье «Как будет выглядеть ваш веб-сайт?»

  1. Скопируйте изображение, которое вы выбрали ранее, в папку images .
  2. Откройте файл index.html и вставьте следующий код в файл точно так, как показано. Не беспокойтесь о том, что все это означает сейчас - мы рассмотрим структуры более подробно позже в этой серии.
          Моя тестовая страница    Мое тестовое изображение   
  3. Строка My test image - это HTML-код, который вставляет изображение на страницу. Нам нужно указать HTML, где находится изображение. Изображение находится внутри каталога images , который находится в том же каталоге, что и индекс .html . Чтобы перейти по файловой структуре от index.html к нашему изображению, нам потребуется путь к файлу images / your-image-filename . Например, наше изображение называется firefox-icon.png , поэтому путь к файлу - images / firefox-icon.png .
  4. Вставьте путь к файлу в код HTML между двойными кавычками кода src = "" .
  5. Сохраните файл HTML, затем загрузите его в веб-браузер (дважды щелкните файл). Вы должны увидеть свою новую веб-страницу с вашим изображением!

Некоторые общие правила для путей к файлам:

На данный момент это все, что вам нужно знать.

Примечание : Файловая система Windows обычно использует обратную косую черту, а не прямую косую черту, например C: \ windows . Это не имеет значения в HTML - даже если вы разрабатываете свой веб-сайт в Windows, вам все равно следует использовать косую черту в своем коде.

Что еще нужно сделать?

На этом пока все. Структура вашей папки должна выглядеть примерно так:

В этом модуле

.

Смотрите также