Продолжаем писать наш сайт на Java и в этой части мы подключим статические ресурсы к нашему веб приложению: таблицы стилей (CSS), javascript, картинки. Если Вы еще не читали первую статью, вот ссылка. Для начала, откроем наш проект в таком виде, в которым мы его оставили в прошлый раз. Если проекта нет, можно скачать код с первой статьи: https://github.com/caligula95/simplewebapp и открыть его у себя в IDEE. Как это сделать читайте в статье «Как открыть мавен проект в Еклипс». Теперь нужно добавить в наш web.xml урл ресурсов и назначить сервлет, который будет ими управлять. Мы не зря используем Tomcat. У него есть так называемый дефолтный сервлет, который отвечает за обслуживание статических ресурсов. В нашем web.xml нужно так и прописать:
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>/resources/*</url-pattern>
</servlet-mapping>
Полный вид нашего файла web.xml:
- <!DOCTYPE web-app PUBLIC
- "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
- "http://java.sun.com/dtd/web-app_2_3.dtd" >
- <web-app>
- <display-name>Archetype Created Web Application</display-name>
- <servlet>
- <servlet-name>HomeServlet</servlet-name>
- <display-name>HomeServlet</display-name>
- <description></description>
- <servlet-class>com.javamaster.controller.HomeServlet</servlet-class>
- </servlet>
- <servlet-mapping>
- <servlet-name>HomeServlet</servlet-name>
- <url-pattern>/</url-pattern>
- </servlet-mapping>
- <servlet-mapping>
- <servlet-name>default</servlet-name>
- <url-pattern>/resources/*</url-pattern>
- </servlet-mapping>
- </web-app>
Сохраняем и закрываем наш файл.
Далее нужно добавить папку с именем resources в наш каталог 
Для того, чтобы посмотреть и убедиться, что мы все делаем правильно, предлагаю создать небольшой файл CSS. Кто не знает это таблица стилей для сайта, чтобы делать красивый и удобный дизайн. Назовем наш файл style.css и добавим в него небольшое свойство, которое делает заголовки первого уровня (h1 тег) красным цветом:
- h1 {
- color:red;
- }
И теперь, когда в нас есть статический ресурс style.css подключим его к нашем страничке welcome.jsp, так как именно там есть заголовок первого уровня. Подключаются стили как и в обычном HTML: <link href=«resources/css/style.css« rel=«stylesheet«>.
Теперь осталось только запустить наше приложение и наслаждаться красивым дизайном, который мы прописали)).
Конечно, таким сайтом никого не удивишь. Предлагаю поискать в Интернете бесплатные шаблоны страниц и попробовать залить их на наш проект. Бесплатных шаблонов очень много и Вам, как правило, в качестве платы нужно просто не удалять ссылку на автора внизу страницы. Я ввел в гугле: «simple site template free download» и получил массу шаблонов страниц. Мне понравился вот этот: 
Я уже даже для удобства разметил, какой блок будет за что отвечать. Лишнее всегда можно удалить. С шаблоном шли ресурсы стилей, джаваскриптов и шрифты. Все это я заливаю в папку resources: для удобства можно просто копировать папки из каталога шаблона и вставлять в наш проект.
Теперь можно удалить наш файл welcome.jsp, а в index.jsp вставить содержимое скачанного шаблона. Теперь очень внимательно нужно найти все подключения ресурсов в шаблоне и немного изменить путь к файлам добавив в начало путь к нашей папке:
Сохраняем, запускаем и получаем шаблон сайта у себя на сервере:
Осталось только подключиться к базе данных и наполнить шаблон реальными данными и сайт будет почти готов.
Всегда перед тем, как делать что-то глобальное. Подключение ресурсов или базы данных, проверьте работает ли это вообще на простых примерах, как мы это делали с изменением цвета заголовка. Этот пример не занял много времени но, его было достаточно чтобы мы убедились что все работает и можно продолжать работать. На простых и небольших примерах легче отловить ошибку.
В следующей статье мы разберемся с принципом работы Servlet-ов и jsp. А потом продолжим работать с нашим проектом.
Как всегда видео на Youtube:
Код для проекта в описании к видео.
Сделал все как Вы написали в своей статье. С welcom.jsp все вышло css поменял стиль, а вот когда вставил шаблон вэбсайта, то стили и js не подключаются. В консоли браузера выдает такие ошибки:Failed to load resource: the server responded with a status of 404 (). Помогите разобраться пожалуйста.
Если получилось вставить свой стиль — значит все работает и Вы все сделали правильно.
Попробуйте еще раз проверить путь к ресурсам. Возможно Вы забыли положить ресурсы в папку resources. Если не получилось найти ошибку — ничего страшного. Для обучающих целей можно положить подкачать стили с Интернета или вне проекта. Просто положите стили например в гугл драйв или другое хранилище и вставьте ссылку на них в своем проекте.
Уже разобрался, все заработало. Для тех кто пишет в Intllij IDE, нужно пометить папку resouces как resources Root