Как связать index html и style css

Создание согласованного макета на сайтах веб-страницы ASP.NET (Razor)

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

• веб-страницы ASP.NET (Razor) 3

Сведения о страницах макета

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

На следующей схеме показано, как работают блоки содержимого. Когда браузер запрашивает страницу с веб-сервера, ASP.NET вставляет блоки содержимого в точке RenderPage , где вызывается метод на странице main. Затем готовая (объединенная) страница отправляется в браузер.

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

1. В корневой папке веб-сайта создайте файл с именем Index.cshtml.
2. Замените существующую разметку следующей:

     
Index Page Content
 
This is the content of the main page.
   

Примечание Обычно файлы, совместно используемые веб-страницами, хранятся в папке с именем Общие.

     @RenderPage("~/Shared/_Header.cshtml") 
Index Page Content
 
This is the content of the main page.
 @RenderPage("~/Shared/_Footer.cshtml")  

      
 
Index Page Content
 
This is the content of the main page.
 
   

Создание согласованного внешнего вида с помощью страниц макета

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

Страница макета похожа на любую HTML-страницу, за исключением того, что она содержит вызов RenderBody метода . Расположение метода на RenderBody странице макета определяет, куда будут включаться сведения со страницы содержимого.

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

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

1. В папке Общие на веб-сайте создайте файл с именем _Layout1.cshtml.
2. Замените любое существующее содержимое следующим кодом:

     @RenderPage("~/Shared/_Header2.cshtml") 
 
   

h1 < border-bottom: 3px solid #cc9900; font: 2.75em/1.75em Georgia, serif; color: #996600; >ul < list-style-type: none; >body < margin: 0; padding: 1em; background-color: #ffffff; font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif; color: #006600; >#list < margin: 1em 0 7em -3em; padding: 1em 0 0 0; background-color: #ffffff; color: #996600; width: 25%; float: left; >#header, #footer

@ < Layout = "~/Shared/_Layout1.cshtml"; > 
Structured Content
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 

Это страница, которая будет использовать страницу макета. Блок кода в верхней части страницы указывает, какую страницу макета использовать для форматирования этого содержимого.
Запустите Файл Content1.cshtml в браузере. Отображаемая страница использует формат и таблицу стилей, определенные в _Layout1.cshtml , и текст (содержимое), определенный в Content1.cshtml. Вы можете повторить шаг 6, чтобы создать дополнительные страницы содержимого, которые затем смогут совместно использовать ту же страницу макета.

Примечание Вы можете настроить сайт таким образом, чтобы можно было автоматически использовать одну и ту же страницу макета для всех страниц содержимого в папке. Дополнительные сведения см. в статье Настройка поведения Site-Wide для веб-страницы ASP.NET.

Проектирование страниц макета с несколькими разделами содержимого

Страница содержимого может содержать несколько разделов, что полезно, если вы хотите использовать макеты с несколькими областями с заменяемым содержимым. На странице содержимого каждому разделу необходимо присвоить уникальное имя. (Раздел по умолчанию остается неименованным.) На странице макета добавляется метод, указывающий RenderBody , где должен отображаться неименованный раздел (по умолчанию). Затем вы добавляете отдельные RenderSection методы для отрисовки именованных разделов по отдельности.

На следующей схеме показано, как ASP.NET обрабатывает содержимое, разделенное на несколько разделов. Каждый именованный раздел содержится в блоке разделов на странице содержимого. (Они называются Header и List в примере.) Платформа вставляет раздел содержимого на страницу макета в точке RenderSection , где вызывается метод . Неименованный раздел (по умолчанию) вставляется в точке RenderBody вызова метода, как вы видели ранее.

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

1. В папке Общие создайте файл с именем _Layout2.cshtml.
2. Замените любое существующее содержимое следующим:

• Lorem
• Ipsum
• Dolor
• Consecte
• Eiusmod
• Tempor
• Incididu

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

Сделать разделы содержимого необязательными

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

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

Однако это поведение можно переопределить для именованного раздела, объявив раздел необязательным на странице макета. Это позволяет определить несколько страниц содержимого, которые могут совместно использовать страницу макета, но могут содержать или не содержать содержимое для определенного раздела.

Откройте Файл Content2.cshtml и удалите следующий раздел:

@section header < 
 > 

@RenderSection("header") 

@RenderSection("header", required: false) 

@if (IsSectionDefined("header"))

@ < Layout = "~/Shared/_Layout3.cshtml"; PageData["Title"] = "Passing Data"; PageData["ShowList"] = true; if (IsPost) < if (Request.Form["list"] == "off") < PageData["ShowList"] = false; >> > @section header < 
 > 
@PageData["Title"]
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 @if (PageData["ShowList"] == true) < 
  
 > else < 
  
 > 

      
 @if (PageData["ShowList"] == true) < 
 > 
 
© 2012 Contoso Pharmaceuticals. All rights reserved.
 
   

Запустите страницу Content3.cshtml в браузере. Страница отображается со списком в левой части страницы и кнопкой Скрыть список в нижней части.

Щелкните Скрыть список. Список исчезнет, а кнопка изменится на Показать список.

Почему не подключается CSS в HTML (код написан верно)?

Файл style.css находится в одной папке с HTML файлом, синтаксис в обоих файлах соблюден (дебаг запускался в двух источниках, нет ошибок).
Не работает
Работаю в WebStorm, сегодня ОС на 8.1 Windows сменила.
Через работает.
В чем причина может быть?

• Вопрос задан более трёх лет назад
• 91738 просмотров

2 комментария

Оценить 2 комментария

А линк сам в хедере находиться?

Давид Габриелян: А это как раз не важно. Браузеру все равно, а Google PageSpeed наоборот рекомендует лишний css убирать из заголовка. Да, не валидно, зато быстрее работает.

Решения вопроса 1
Kisumi @Kisumi Автор вопроса
Написала полностью идентичный код, но в другом файле — заработало. Понятия не имею, что это было
Ответ написан более трёх лет назад
Я думаю дело было в кодировке файла style.css
Ответы на вопрос 13

Куплю мозГ

Попробуй так link rel=»stylesheet» type=»text/css» href=»style.css»

Только скобки добавь

Ответ написан более трёх лет назад
Нравится 3 1 комментарий

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

Вперед и вверх
style.css случайно в реальности не style.css.txt ?
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
начинающий веб разработчик

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

Ответ написан более года назад
Комментировать
Нравится 2 Комментировать

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

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

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

Открывается ли CSS-файл по прямому URL в browser-е?
То есть вы открываете свой HTML по пути типа «file://всякая хрень/index.html», а если заменить «index.html» на «style.css», что будет?

Ответ написан более трёх лет назад
Kisumi @Kisumi Автор вопроса
Открывается документ, все там нормально и в порядке

JavaScript Developer

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

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Я думаю дело в кодировке файла style.css
Ответ написан более трёх лет назад
ProstoErik @ProstoErik
Реально допомогло дякую.

Столкнулся с такой же проблемой. Решение оказалось проще ,чем я думал.Просто поменял последовательность и все заработало.

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать

Та же проблема. Все указано корректно, но в Opera он обновлял введения в CSS спустя какое-то время, а в Google Chrome — сразу. Как вариант — измените браузер.
Изначально проблема моя в том, что я сайт делал на локальном сервере Open Server, а файлы были .php, с расширением html всё работало, но тогда php не реализовать

Ответ написан более года назад
Комментировать
Нравится Комментировать

Все траблы из-за браузеров — сбрасывайте настройки браузеров, или стирайте браузеры и вновь устанавливайте.

Ответ написан более года назад
Комментировать
Нравится Комментировать
Обновите страницу Ctrl + F5
Ответ написан 04 апр.
Комментировать
Нравится Комментировать
Matilda-kot @Matilda-kot

У меня сохранялась эта проблема до тех пор, пока я использовал абсолютную ссылку на css файл.
html и css файл лежали в одной папке. После того как я указал в href=просто название css файла (т.е. относительную ссылку), у меня все заработало.

Ответ написан 05 окт.
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• JavaScript
• +1 ещё

Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?

• 1 подписчик
• 3 часа назад
• 28 просмотров

Объединение и визуализация данных из разных источников

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Обзор

В этом руководстве мы поясняем, как визуализировать на картах Google данные из нескольких источников. В качестве примера возьмем фоновую картограмму с двумя источниками данных – для обозначения штатов США и для показа статистики по ним.

Для отображения многоугольников, определяющих границы штатов США, используются данные файла GeoJSON. На карте также возможен показ данных по штатам, которые поступают в ответ на смоделированный запрос к US Census API.

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

Ниже приведен образец кода для создания этой карты.

TypeScript

Примечание. Ознакомьтесь с руководством по использованию TypeScript в Google Картах.

JavaScript

Примечание. Код JavaScript скомпилирован из фрагмента кода TypeScript.

CSS

HTML

       
 Percent of population over 25 that completed high school Median age Total population Average family size Per-capita income  
 
 
  
  
index.html

Примеры кода

Начало работы

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

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

Создание базовой карты

Ниже приведен программный код для настройки базовой карты. Он аналогичен тому, что вы уже видели в разделе «Обзор» руководства по Maps JavaScript API.

Скопируйте программный код ниже в файл index.html . Этот фрагмент кода загружает Maps JavaScript API и устанавливает полноэкранный режим показа карты.

      #map < height: 100%; >/* Optional: Makes the sample page fill the window. */ html, body      

Код в первом теге скрипта – это стартовая точка для запуска программы. В нем создается функция initMap , которая инициализирует объект map.

Настройки стиля featureTypes в коде выше скрывают дороги, объекты инфраструктуры, рельеф, административные районы и все их типы elementTypes . Список всех доступных значений featureType и elementType приведен в справочной документации.

Нажмите YOUR_API_KEY в образце программного кода или следуйте инструкциям, чтобы получить ключ API. Замените YOUR_API_KEY ключом API вашего приложения. После полной загрузки API параметр обратного вызова в приведенном ниже теге скрипта выполняет функцию initMap() в HTML-файле.

Создание и стилизация элементов управления картой

Приведенный ниже код создает на карте следующие элементы управления:

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

 
 
 Percent of population over 25 that completed high school Median age Total population Average family size Per-capita income  
 
min
 
◆
 
max
 
 
 

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

 html, body, #map < height: 100%; margin: 0; padding: 0; overflow: hidden; >.nicebox < position: absolute; text-align: center; font-family: "Roboto", "Arial", sans-serif; font-size: 13px; z-index: 5; box-shadow: 0 4px 6px -4px #333; padding: 5px 10px; background: rgb(255,255,255); background: linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(245,245,245,1) 100%); border: rgb(229, 229, 229) 1px solid; >#controls < top: 10px; left: 110px; width: 360px; height: 45px; >#data-box < top: 10px; left: 500px; height: 45px; line-height: 45px; display: none; >#census-variable < width: 360px; height: 20px; >#legend < display: flex; display: -webkit-box; padding-top: 7px >.color-key < background: linear-gradient(to right, hsl(5, 69%, 54%) 0%, hsl(29, 71%, 51%) 17%, hsl(54, 74%, 47%) 33%, hsl(78, 76%, 44%) 50%, hsl(102, 78%, 41%) 67%, hsl(127, 81%, 37%) 83%, hsl(151, 83%, 34%) 100%); flex: 1; -webkit-box-flex: 1; margin: 0 5px; text-align: left; font-size: 1.0em; line-height: 1.0em; >#data-value < font-size: 2.0em; font-weight: bold >#data-label < font-size: 2.0em; font-weight: normal; padding-right: 10px; >#data-label:after < content: ':' >#data-caret

Импорт данных из US Census API

Приведенный ниже код запрашивает у Бюро переписи населения США данные последней переписи и получает их в формате JSON.

function loadCensusData(variable) < // load the requested variable from the census API var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://api.census.gov/data/2012/acs5/profile?get=' + variable + '&for=state:*&key=YOUR_API_KEY'); xhr.onload = function() < var censusData = JSON.parse(xhr.responseText); censusData.shift(); // the first row contains column names censusData.forEach(function(row) < var censusVariable = parseFloat(row[0]); var stateId = row[1]; // keep track of min and max values if (censusVariable < censusMin) < censusMin = censusVariable; >if (censusVariable > censusMax) < censusMax = censusVariable; >// update the existing row with the new data map.data .getFeatureById(stateId) .setProperty('census_variable', censusVariable); >); // update and display the legend document.getElementById('census-min').textContent = censusMin.toLocaleString(); document.getElementById('census-max').textContent = censusMax.toLocaleString(); >; xhr.send(); >

Стилизация данных

Фрагмент кода ниже создает фоновую картограмму, применяя градиент к каждому многоугольнику в соответствии с результатом переписи. Стилизовать данные можно с помощью объекта Data.StyleOptions или функции, которая возвращает объект Data.StyleOptions .

// set up the style rules and events for google.maps.Data map.data.setStyle(styleFeature); function styleFeature(feature) < var low = [5, 69, 54]; // color of smallest datum var high = [151, 83, 34]; // color of largest datum // delta represents where the value sits between the min and max var delta = (feature.getProperty('census_variable') - censusMin) / (censusMax - censusMin); var color = []; for (var i = 0; i < 3; i++) < // calculate an integer color based on the delta color[i] = (high[i] - low[i]) * delta + low[i]; >// determine whether to show this shape or not var showRow = true; if (feature.getProperty('census_variable') == null || isNaN(feature.getProperty('census_variable'))) < showRow = false; >var outlineWeight = 0.5, zIndex = 1; if (feature.getProperty('state') === 'hover') < outlineWeight = zIndex = 2; >return < strokeWeight: outlineWeight, strokeColor: '#fff', zIndex: zIndex, fillColor: 'hsl(' + color[0] + ',' + color[1] + '%,' + color[2] + '%)', fillOpacity: 0.75, visible: showRow >; >

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

// set up the style rules and events for google.maps.Data map.data.addListener('mouseover', mouseInToRegion); map.data.addListener('mouseout', mouseOutOfRegion); /** * Responds to the mouse-in event on a map shape (state). * * @param e */ function mouseInToRegion(e) < // set the hover state so the setStyle function can change the border e.feature.setProperty('state', 'hover'); var percent = (e.feature.getProperty('census_variable') - censusMin) / (censusMax - censusMin) * 100; // update the label document.getElementById('data-label').textContent = e.feature.getProperty('NAME'); document.getElementById('data-value').textContent = e.feature.getProperty('census_variable').toLocaleString(); document.getElementById('data-box').style.display = 'block'; document.getElementById('data-caret').style.display = 'block'; document.getElementById('data-caret').style.paddingLeft = percent + '%'; >/** * Responds to the mouse-out event on a map shape (state). * * @param e */ function mouseOutOfRegion(e) < // reset the hover state, returning the border to normal e.feature.setProperty('state', 'normal'); >

Загрузка многоугольников с границами штатов

Добавьте приведенный ниже фрагмент кода после функции initMap . Функция loadMapShapes загружает многоугольники для границ штатов США из файла GeoJSON с помощью метода loadGeoJson .

/** Loads the state boundary polygons from a GeoJSON source. */ function loadMapShapes() < // load US state outline polygons from a GeoJSON file map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/states.js', < idPropertyName: 'STATE' >);

Добавьте строку ниже в конец функции initMap .

// state polygons only need to be loaded once, do them now loadMapShapes();

При выборе показателя в раскрывающемся меню карта запрашивает у US Census Data API соответствующие данные. Чтобы связать данные переписи с многоугольниками, код устанавливает для idPropertyName значение «STATE» – общий ключ для данных переписи и свойств GeoJson.

Дополнительная информация

Использование данных Census Bureau Data API в этом примере не означает, что полученный результат одобрен или сертифицирован Бюро переписи населения США.

Отправить отзыв

Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

Последнее обновление: 2023-06-26 UTC.

Создание сайта html в блокноте. Основы

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

Итак, как создать сайт в блокноте на html? Это является вполне выполнимой задачей. Конечно, намного удобнее и правильнее использовать для этого специальные программы, вроде Notepad++, но для первого раза можно обойтись и блокнотом. Я не буду вас отговаривать – хотите создать сайт в блокноте? Создавайте. Как? А вот об этом давайте поподробнее.

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

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

К примеру, захотите вы на вашей страничке вывести список. А как собственно сказать браузеру, что это должен быть именно список, а не обычный текст? В ворде, например, есть кнопки маркированного и нумерованного списков. В html специально для этого есть свои теги. Заключив нужный текст в эти теги, браузер уже понимает, что это список. Естественно, такая же логика и с размещением других элементов.

Для начала нам нужно создать в блокноте два файла. Один нужно назвать index.html, а второй – style.css. Заметьте, .html и .css должны быть расширениями файла, а не его именем. То есть не style.css.txt, а именно style.css. Сами имена файлов могут быть и другими, просто я взял самые популярные.

Зачем эти самые файлы нужны? В html-файлы мы будем описывать структуру сайта, а в style.css – его внешний вид. Html и css – это языки, которые обязательно нужны для создания сайта. Как для человека иметь и правую руку, и левую. Скажет ли он, что ему хватит одной руки? Конечно, нет. Так же и с этими двумя языками, но которых стоит все сайтостроение.