Css сайт: Интерактивный проект. Создание простого веб-сайта, содержащего веб-страницу, CSS-файл и файл JavaScript — Training — Вебджем.рф

Содержание

Почему сайт не реагирует на изменение style.css? – Вопросы Timeweb Community

Шептюк Яна Сергеевна

20 фев в 2017

7691

6 ответов

Добрый день!

Сайтостроитель-самоучка очень нуждается в совете.

У меня немного нестандартный сайт — не на движке, а просто набор файлов-блокнотов с html и css кодом. Появилась проблема: после заказа формы обратной связи сайт перестал реагировать на изменения в файле стилей stile.css. Обновление страницы F5, открытие в другом браузере, полная очистка кэша — не помогают. Изменения могут проявиться через несколько дней (или не проявиться вовсе) или проявляются, если я меняю имя файла стилей (сейчас, например, он называется ddd.css) и одновременно меняю это же имя в каждом html-файле. Это, как понимаете, мега неудобно из-за большого кол-ва страниц, тем более, когда надо внести много изменений.

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

HTML/CSS

Сайт не работает на хостинге

Здравствуйте у меня такая проблема я пишу простой сайт html/css и запускаю на ПК все идеально работает без хоста кидаю на хост и получеатся вот это вот все файлы сайта — тык Помогите пожайлуста P.S. сайт на армянском так что не обрашайте внимание.

2 ответа

Сергеев Дмитрий Яковлевич 20 сен в 2022

345

Какой путь у файлов на хостинге?

Залил сайт на хостинг timeweb, но разметка вся исчезла. Дело в путях взаимодействия файлов? Путь на локалхосте у файлов был один, а сейчас на хостинге он другой, так? Нужно ли прописывать в пути файла ‘public_html’? Если да, то ставится ли /public_html…

Разработка

1 ответ

Алфёров Вадим 22 июля в 2022

526

Как загрузить сайт на поддомен?

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

Домены

1 ответ

ПРИМЕНЕНИЕ HTML И CSS ДЛЯ СОЗДАНИЯ ИНТЕРАКТИВНЫХ ВЕБ САЙТОВ | Евразийский Союз Ученых

ПРИМЕНЕНИЕ HTML И CSS ДЛЯ СОЗДАНИЯ ИНТЕРАКТИВНЫХ ВЕБ САЙТОВ.

Ахмеджанова Заррина

Ташкент университет информационных технологий

Гафурова Парвина

Ташкент университет информационных технологий

Axmedjanova Z.

Tashkent Universitety of Informasion Technologies

Gafurova P.

Tashkent Universitety of Informasion Technologies

АННОТАЦИЯ

В данной работе покажем как мы подключаем HTML к CSS, используя их интеграцию просто изменив стиль любого элемента. Аббревиатура HTML расшифровывается как «Hyper Text Markup Language», то есть «язык разметки гипертекста» и CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, преимущественно использующаяся как средство оформления веб-страниц. . Как нам уже известно с помощью HTML можно создавать практически все, а CSS отвечает за создание каскадных стилей. Наша цель создать интерактивный веб сайт применив HTML и CSS.

ABSTRACT

In this paper, we will show how we connect HTML to CSS, using their integration simply by changing the style of any element. HTML abbreviation stands for “Hyper Text Markup Language”, that is, “hypertext markup language” and CSS (Cascading Style Sheets are cascading style sheets), a technology for describing the appearance of a document, primarily used as a means for designing web pages. Аlready known using HTML you can create almost everything, and CSS is responsible for creating cascading styles. Our goal is to create an interactive website using HTML and CSS.

Ключевые слова: ПО, WWW, таблица, тег, HTML, графика
Keywords: software, www, table, tag, HTML, graphics

Используя каскадные таблицы стилей — Cascading Style Sheets (CSS), — вы можете применить стиль к своим веб-страницам, чтобы придать им желаемый внешний вид.

Работа CSS основана на их подключении к объектной модели документа — Document Object Model (DOM).

Используя CSS и их интеграцию с DOM, можно быстро и просто изменить стиль любого элемента. Например, если не нравится исходный вид заголовков, определяемых тегами <h2>, <h3> и т. д., можно назначить новый стиль, отменяющий исходные настройки, касающиеся используемого семейства шрифтов и размера, применения полужирного шрифта или курсива, а также многих других свойств.

После знакомства с HTML разработчики сайтов разделяются на две основные категории. Одна часть считает, что с помощью HTML на сайте можно создавать всё или практически всё, другая же понимает, что в целом средств разметки недостаточно для оформления веб-документов. Действительно, HTML лишь первый этап в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS (Cascading Style Sheets, каскадные таблицы стилей).

Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы.

Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.1.

Рис. 1.1. Веб-страница, созданная только на HTML

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

Рис. 1.2. Веб-страница, созданная на HTML и CSS

Перемена разительна, поэтому заглянем в код, чтобы понять, в чем же разница (пример 1.1).

Пример 1.1. Исходный код документа

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>

<html>

<head>

<title>Флексагон</title>

<meta charset=»utf-8″>

<link

rel=»stylesheet» href=»style.css»>

</head>

<body>

<h2>Флексагон</h2>

<p>Флексагон представляет собой бумажную фигуру, которая имеет

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

Перегибая флексагон, по очереди будем наблюдать все его поверхности.</p>

</body>

</html>

Сам код HTML никаких изменений не претерпел и единственное добавление — это строка <link rel=»stylesheet» href=»style.css»>. Она ссылается на внешний файл с описанием стилей под именем style.css. Содержимое этого файла показано в примере 1.2.

Пример 1.2. Содержимое стилевого файла style.css

body {

font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */

font-size: 11pt; /* Размер основного шрифта в пунктах */

background-color: #f0f0f0; /* Цвет фона веб-страницы */

color: #333; /* Цвет основного текста */

}

h2 {

color: #a52a2a; /* Цвет заголовка */

font-size: 24pt; /* Размер шрифта в пунктах */

font-family: Georgia, Times, serif; /* Семейство шрифтов */

font-weight: normal; /* Нормальное начертание текста */

}

p {

text-align: justify; /* Выравнивание по ширине */

margin-left: 60px; /* Отступ слева в пикселах */

margin-right: 10px; /* Отступ справа в пикселах */

border-left: 1px solid #999; /* Параметры линии слева */

border-bottom: 1px solid #999; /* Параметры линии снизу */

padding-left: 10px; /* Отступ от линии слева до текста */

padding-bottom: 10px; /* Отступ от линии снизу до текста */

}

В файле style. css как раз и описаны все параметры оформления таких тегов как <body>, <h2> и <p>. Заметьте, что сами теги в коде HTML пишутся как обычно.

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

CSS представляет собой свой собственный язык, который совпадает с HTML только некоторыми значениями, например способом определения цвета.

Методы подключения CSS к HTML.

Глобальный CSS помещается в контейнер <head> конкретной страницы. При таком варианте подключения классы и идентификаторы (ID) могут быть использованы для обращения к CSS коду, однако, они будут активны только на этой конкретной странице. CSS стили подключенные таким путем загружаются при каждой повторной загрузке страницы, поэтому они могут повлиять на скорость ее загрузки. Тем не менее, существует несколько ситуаций в которых использование глобальных CSS может быть полезно. К примеру, если вам необходимо отправить кому-нибудь шаблон страницы – вам гораздо проще будет предоставить предварительный результат, если все будет на одной странице. Глобальные CSS помещаются между тегами <style></style>. Вот пример глобальной таблицы стилей:

<head>

p {color:white; font-size: 10px;}

.center {display: block; margin: 0 auto;}

#button-go, #button-back {border: solid 1px black;}

</style>

</head>

Преимущества глобальных CSS:

Таблица стилей влияет только на одну страницу.
В глобальной CSS могут быть использованы классы и идентификаторы (ID).
Нет необходимости загружать несколько файлов. HTML и CSS могут быть в одном и том же файле.

Недостатки глобальных CSS:

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

Как произвести подключение CSS к HTML странице

Откройте вашу HTML страницу в любом текстовом редакторе. Если страница уже загружена на вашу учетную запись хостинга, вы можете использовать текстовый редактор предоставленный вашим хостингом. Если данный документ HTML находится на вашем компьютере, вы можете использовать любой текстовый редактор для его редактирования, и после этого повторно загрузить его на вашу учетную запись хостинга используя FTP-клиент.
Найдите открывающий тег <head> и добавьте после него следующий код:

Далее перейдите к следующей строке и добавьте нужные CSS правила, к примеру:

body {

background-color: blue;

}

h2 {

color: red;

padding: 60px;

}

Как только вы закончите добавление CSS правил, добавьте закрывающий тег:

</style>

После всех действий, документ HTML с глобальной CSS должен выглядеть примерно так:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: blue;

}

h2 {

color: red;

padding: 60px;

}

</style>

</head>

<body>

<h2>Руководство Hostinger</h2>

<p>Это наш текст. </p>

</body></html>

Литература.

1. Дженнифер Нидерст Роббинс «HTML5, CSS3 и JavaScript. Исчерпывающее руководство». 4-ое издание (2014)

2. Брайан Хоган «HTML5 и CSS3. Веб-разработка по стандартам нового поколения» (2011)

3. Терри Фельке-Моррис «Большая книга веб-дизайна» (2017)

Как узнать, создан ли веб-сайт с помощью CSS | Малый бизнес

Кевин Ли

Один из лучших способов научиться создавать привлекательные бизнес-сайты — это изучать код, который создают другие. В то время как HTML отлично подходит для размещения объектов на странице, каскадные таблицы стилей добавляют блеск, цвет и жизнь в Интернет. У вас есть возможность изучить код любого веб-сайта, попросив браузер показать его вам. Затем вы можете выяснить, как дизайнер сайта использовал CSS для создания страницы, и применить полученные знания на своих бизнес-сайтах.

Запустите браузер и посетите веб-страницу. Щелкните правой кнопкой мыши пустую область на странице, чтобы просмотреть меню. Найдите пункт меню, в котором есть слово «Источник», например «Просмотреть исходный код страницы». Выберите этот параметр, чтобы просмотреть окно, в котором отображается исходный HTML-код страницы.
Нажмите «Ctrl-F» и введите «стиль». Окно ищет код для этого слова. Если вы видите тег стиля в HTML-документе, этот документ использует CSS.
В следующем коде показан пример внутренней таблицы стилей, которая создает класс CSS с именем «красный»:
Это красный цвет
Код между открывающим тегом содержит CSS. В этом случае красный класс имеет атрибут цвета, значение которого — красный. Разделитель, показанный под таблицей стилей, ссылается на этот класс. Текст в теге div будет отображаться красным при просмотре в браузере.
Найдите тег стиля, подобный показанному ниже:
css» />
Это создает оператор, который ссылается на внешнюю таблицу стилей с именем » мой_стиль.css.» Когда браузер видит этот тег, он извлекает таблицу стилей со своего сервера и использует ее для оформления веб-страницы. Если вы создаете внешнюю таблицу стилей, вам не нужно заключать классы CSS в теги стиля. Вы также можете увидеть таблицу стилей, в которой значение href не является URL-адресом. Следующая таблица стилей ссылается на таблицу стилей с именем «style2.css», которая находится в корневом каталоге веб-сервера:
Этот код определяет относительный URL-адрес; местоположение файла CSS относительно местоположения веб-сайта.
Просмотрите раздел body документа и найдите атрибут стиля внутри тега HTML. Следующий тег div содержит атрибут стиля:
Это синий
Если вы видите встроенный атрибут стиля в div, абзаце или другом элементе HTML, этот тег определяет, как выглядит содержимое в теге. . В этом примере текст внутри div отображается в браузере синим цветом, потому что тег div имеет атрибут стиля, а значение цвета этого атрибута синее. 9
Microsoft MSDN: улучшения XHTML и CSS HTML-страницы. Например, если вы видите веб-страницу, содержащую красочное меню, которое вам нравится, просмотрите CSS, который создает это меню, определите, как код создает это меню, и используйте полученные знания для создания аналогичного меню на ваших собственных страницах. Возможно, вам придется изменить код, который вы копируете с веб-страницы, если он содержит относительные ссылки на изображения или другие объекты, находящиеся на веб-сервере этой страницы.
При щелчке правой кнопкой мыши веб-страницы для просмотра ее источника не щелкайте ссылку или изображение. Если вы это сделаете, вы не увидите возможность просмотра исходного HTML-кода страницы.
Веб-страницы часто содержат несколько ссылок на внешние таблицы стилей. Каждая таблица стилей может выполнять определенную задачу. Просмотрите код таблицы стилей, скопировав ее абсолютный URL-адрес в адресную строку браузера и нажав «Ввод».
Как отмечает Microsoft, рекомендуется использовать внешние таблицы стилей вместо встраивания кода CSS в HTML-документ. Внешние таблицы стилей упрощают применение согласованного стиля на нескольких веб-страницах. Если все ваши веб-страницы связаны с внешними таблицами стилей, вы можете просто обновить таблицы стилей, когда захотите изменить внешний вид своих страниц. Хранение CSS отдельно от ваших HTML-документов также уменьшает размер этих документов, потому что они не будут содержать никакого кода CSS; все это находится в ваших внешних таблицах стилей.

Писатель Биография

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

Наша первая веб-страница HTML и CSS

Привет,
На этой странице мы собираемся создать наш первый фрагмент HTML и CSS. Мы собираемся заняться кодированием, но не волнуйтесь. Это будет довольно простое кодирование. Итак, давайте углубимся в это.
Итак, мы открыли Dreamweaver. Первое, что нам нужно сделать, это создать нечто, называемое сайтом. Итак, перейдите на «Сайт», вверху здесь и перейдите на «Новый сайт». Дайте вашему сайту имя, вы можете назвать его как угодно, и мы назовем его «Dans Portfolio», а здесь, внизу, это важная часть, локальная папка сайта. И все, что он делает, это сообщает нашему Dreamweaver, где вы собираетесь хранить свой веб-сайт на своем компьютере.
Теперь вам нужно хранить все ваши файлы в этой одной папке. Вы не можете разбросать их повсюду, как это может сделать графический дизайнер. Вы должны иметь их все на своем ноутбуке.
Итак, давайте создадим новую папку, поэтому давайте нажмем эту маленькую кнопку «Обзор». И я положил свой на свой рабочий стол для этого случая. И я создам новую папку. Мы назовем это «Данс-портфолио». Вы можете увидеть соглашение об именах здесь, просто не используйте пробелы, попробуйте использовать символы подчеркивания, и, поскольку теперь вы собираетесь быть хардкорным кодером, вам нужно использовать строчные буквы, им не нужны заглавные буквы или верхние регистры. Просто так. Нет никакой реальной причины. Нажимаем «Создать» и говорим «Выбрать».
И последнее, что мы сделаем перед тем, как уйти, это просто, чтобы облегчить нашу жизнь, перейдите в «Дополнительные настройки» и перейдите в «Папка изображений по умолчанию». Нажмите на нее, нажмите «Новая папка», введите «изображения» и нажмите «Создать». То, что сделано, это только что сделано — давайте нажмем «Выбрать». Я покажу вам свой рабочий стол. Вы можете видеть, вот моя папка, которую я сделал, а внутри находится моя папка «Изображения». В этой папке «Изображения» здесь, в разделе «Дополнительно», это просто поможет нам, когда мы собираем изображения из самых разных мест. Это гарантирует, что Dreamweaver подберет их и поместит в эту локальную папку сайта. Затем у нас будет все на этой странице, включая наш текст или наши файлы, любые изображения, любые видео, все они должны быть помещены в эту папку на моем рабочем столе, которая называется «Dan’s-portfolio». Нажимаем «Сохранить».
Прежде всего, мы собираемся создать страницу HTML5. Теперь ваш может выглядеть немного иначе. Возможно, вы находитесь в последних файлах или файлах CC. Просто убедитесь в этом и нажмите «Старт». И давайте нажмем на документ HTML5. Большой! И во время этого курса мы собираемся сделать следующее: есть несколько вариантов: «Стандартный» и «Для разработчиков». Есть «Live», «Split» и все такое прочее.
Мы собираемся быть в режиме «Разработчик». Я знаю, что мы не разработчики, мы дизайнеры, но мы собираемся научиться программировать. Мы могли бы также использовать его с лучшими инструментами, которые мы можем. И этот режим «Разработчик» имеет лучшие инструменты, а также очень легкий и очень быстрый.
И тогда как «Стандартный» вид может быть немного вялым, и я нахожу его немного сложным в использовании. Итак, убедитесь, что вы переключились на «Разработчик». Ваш может выглядеть немного иначе. Ваш, вероятно, находится в «Файле». Я поменяю свой там. Итак, первое, что мы должны сделать, это сохранить нашу страницу. Итак, переходим в «Файл», нажимаем «Сохранить».
Теперь для нашей первой страницы нам нужно назвать ее index.html, и это верно для каждого веб-сайта, вам нужна хотя бы одна страница с именем index.html. Примерно так, и это будет ваша домашняя страница. И вы можете назвать это как угодно, только для этой страницы или предыдущих страниц, страницы нашего портфолио или любой из услуг, или связаться с нами. Их можно назвать как угодно, но главная страница должна называться index.html.
Куда его поставят? Он будет помещен в «Dans-portfolio», я просто увеличу его и нажму «Сохранить».
Следующее, что мы должны сделать, мы создадим страницы внутреннего вида и заголовок страницы. На данный момент он называется «Документ без названия». И это просто означает, что если я просмотрю в браузере, посмотрю это, давайте перейдем к «Файл», давайте спустимся к «Предварительный просмотр в реальном времени» и нажмем «Chrome». Он появится в браузере, и, как вы можете видеть вверху здесь, он говорит «Документ без названия». Это маленький заголовок страницы, который появляется на всех страницах, и он появляется и здесь, на этой маленькой вкладке, и когда люди добавляют вашу страницу в закладки, а также когда Google выполняет поиск.
Итак, если я поищу в Google, скажем, «Dreamweaver Tutorials», я увижу вот эти маленькие надписи вверху, эти синие кусочки, вот где заканчивается заголовок страницы. Так что если у вас есть безымянный документ, то это все будет синим цветом в гугле. И вы на самом деле никогда не будете ранжироваться, поэтому очень важно, когда вы делаете страницы, пойти и сделать заголовок своей страницы, так что давайте сделаем это сейчас.
Итак, здесь, в безымянном документе Dreamweaver, он будет называться «Дизайн-портфолио Дэниела Скотта». Следующее, что мы собираемся сделать, это добавить наш первый фрагмент кода. Нажимаем «Сохранить». Итак, чтобы разместить что-либо на своей странице, вам нужно поместить это между этими двумя тегами под названием «Тело». Итак, есть «Открытие» и «Закрытие». Вы можете видеть, что «Закрыть» здесь имеет косую черту. Я поставил пару «возврат» здесь. Итак, все, что появляется здесь, появится на моей странице. Все, что появляется здесь вверху и скрыто, как бы вставляется в фон, как этот стиль страницы здесь. Это своего рода вещи, которые маленький браузер использует для странных вещей. Что касается тела, здесь мы собираемся разместить наш код. Итак, теперь давайте вставим наш первый фрагмент HTML-кода.
Вы готовы? Готовы стать кодером? Первое, что мы собираемся сделать, это поместить его в угловую скобку. Я наберу «h2». Таким образом, h2 считается самым важным заголовком на вашей странице.
Чтобы закрыть заголовок, нам нужно вставить «закрыть». Угловые скобки. Итак, это открытие головы. А затем мы собираемся вставить «Hello World». Вы должны написать «Hello World» для вашего самого первого кусочка кода, просто потому, что это линия перехода для всех.
Итак, если вы кодер и когда-нибудь пойдете в школу кодирования, это первое, что вы собираетесь делать. Что-то, что создаст страницу с надписью «Hello World». Итак, добро пожаловать.
Итак, давайте на самом деле заставить его работать на нас. У нас есть h2, открытие, затем у нас есть «Hello World». Теперь, чтобы закрыть его, нам нужно поставить угловую скобку, а затем косую черту «/», и Dreamweaver довольно умен и завершает это за нас. Но вы можете видеть здесь, это «Открытие» на моем h2, а вот мое «Закрытие». Единственная разница в том, что это то же самое, за исключением косой черты. Таким образом, он обтекает это слово. И это будет нашим заголовком.
Итак, мы сделали это. Но нам нужно это увидеть, поэтому мы собираемся использовать предварительный просмотр браузера в реальном времени. Теперь вы можете перейти к «Файлу» или есть более быстрый способ, вниз, прямо здесь. Итак, когда я просматриваю и нажимаю «Google Chrome», а там, друзья мои, у нас есть «Hello World» в красивом большом заголовке. Ты, батенька, теперь вроде как кодер.
Пока люди хотят веб-сайт, на котором есть только заголовки. Но мы сделали это, верно? У нас есть h2, и там есть текст, он на нашей странице. Мы даже закодировали наш курс по ?? где заголовок нашей страницы. Итак, давайте вернемся и сделаем еще немного кодирования.
Итак, здесь, в Dreamweaver, мы создали наш первый фрагмент HTML. Следующее, что нам нужно сделать, это создать нечто, называемое CSS. Теперь HTML — это такие вещи, как слова и изображения, которые идут на странице, они вполне физические, и они появляются на странице. CSS — это то, с чем мы их стилизуем, потому что это то, что мы хотим сделать сейчас, этот заголовок — большой жирный, и Times New Roman, и черный. Что мы хотим сделать, так это пойти и начать стилизовать его.
И мы делаем это в нашем CSS. Итак, вы готовы? Заходим в «Файл». Переходим к «Новому». Давайте переключим его на CSS. Нажмите «Создать», и это лист CSS. Это не особенно захватывающе, не так ли? Там просто немного текста. Так давайте сохраним его. «Файл», переходим в «Сохранить». Вы можете называть это как угодно, но обычно это называется ‘styles.css’.
Теперь нам нужно связать два файла, потому что на данный момент это два отдельных файла. Они все еще находятся в той же папке, но они не связаны, поэтому давайте закроем здесь «Стили», и нам нужно их соединить. И вы делаете это, ссылаясь на него в этой голове. Наше тело — это все, что появляется на странице, а голова — это все, что находится на заднем плане и выполняет какие-то действия за кулисами. Это то, что мы собираемся бросить здесь. После этого мы собираемся поставить «Возврат». Мы собираемся вставить ссылку на наш CSS. На самом деле это довольно длинный фрагмент кода, поэтому в Dreamweaver есть много приемов, которые немного облегчают нам задачу, и именно по этой причине такие люди, как я, имеющие опыт работы дизайнером, могут на самом деле создавать веб-интерфейсы. разработки, это из-за всех этих вспомогательных вещей, которые Dreamweaver позволяет нам делать.
Итак, давайте сделаем это. Давайте откроем слово «Ссылка». И что вы хотите сделать, так это нажать «Tab», а не «Return». «Возврат» ничего не делает. Я только что получил это странное слово под названием «Ссылка». Но прежде чем мы перейдем к «Link» и нажмем «Tab» на клавиатуре, посмотрим, что произойдет. Эй, магия! Он помещает ссылки на нашу таблицу стилей, и здесь есть эта штука H-ref. А если мы начнем печатать ‘s’, ты увидишь? Dreamweaver еще более полезен. Вы можете увидеть там «*.css». Он заглянул в мою папку и сказал: «Ты, наверное, имеешь в виду это, Дэн». И я говорю: «Да», и я просто нажимаю «Возврат» на клавиатуре, и это кладется туда. Так что теперь они связаны. Если я нажму «Сохранить», вы увидите, что эта маленькая панель документов появляется вверху здесь, поэтому исходный код ссылается на HTML, который я просматриваю, в этом «Hello World».
Здесь, наверху, стили, когда я переключаюсь на стили. Они подключены сейчас. Итак, что я могу сделать, я могу стилизовать как «h2» в моем «style.css», зайти сюда, и что мы можем стилизовать? Мы могли бы стилизовать нагрузки. Но давайте сделаем основы. Итак, давайте введем «h2», а в CSS есть свой синтаксис, это не особенно сложно. CSS — это самый простой из всех элементов кодирования, которые вам предстоит выполнять. Итак, я думаю, что это h2, ссылка в нашем HTML, а затем мы вставили «фигурную скобку». И тогда мы ставим «Возврат». Ты это видишь? Здесь автоматически ставится фигурная скобка вверху и внизу. Наш стиль заключается в том, чтобы почти уйти где-то между ними. Не удаляйте их. С верхней, все внутри здесь.
Теперь давайте начнем печатать. Займемся цветом шрифта. Просто введите «col», и вы увидите, что Dreamweaver весьма полезен и пытается предварительно заполнить его потенциальными свойствами CSS. И в этом случае цвет находится вверху, это действительно распространенные цвета, которые я использовал, чтобы иметь дело с цветом. Он ссылается на цвет шрифта.
И вы видите предмет. Введите все это сейчас. Я просто нажму «Вернуть», и я заполнил его. Давайте сделаем это снова. Итак, вы вводите «col», а затем я могу использовать свои клавиши для перемещения вверх и вниз, нажимаю «Return» на клавиатуре, и он заполняет его правильным синтаксисом. Вы можете видеть, что точка с запятой должна идти туда.
Итак, следующее, что мне нужно сделать, это узнать шестнадцатеричное число. Я мог бы пойти в Photoshop и взять его, или я мог бы просто использовать выбор цвета здесь. И вы можете перетаскивать это, и несколько ползунков, бегущих вверх по сетке. Нажмите «Ввод». И самое важное, что нужно помнить, когда вы делаете какое-либо свойство CSS, это то, что для того, чтобы сообщить Dreamweaver, что вы закончили, нужно поставить точку с запятой.
Так что это лучший синтаксис. Фигурные скобки — это двоеточие, которое автоматически ставится туда, а точка с запятой в конце здесь. Это то, что вам всегда нужно делать. И когда вы учитесь, то, что вы забываете, не работает. Дважды проверьте, есть ли там точка с запятой.
И вот этот код, это FF0000, это код для красного цвета. Теперь давайте проверим наш браузер.
И что я собираюсь сделать, прежде чем мы уйдем отсюда, я собираюсь сделать «Сохранить». Я использую этот, «Сохранить все» все время. Так что я буду делать это на протяжении всего курса, я буду «Сохранить все», чтобы сохранить мой HTML и мой CSS. Пойдем смотреть в браузере. Вы готовы? Я готов.
Эй, это h2, но он красный. Посмотри на это. Мы занимаемся веб-дизайном.
Вернемся к Dreamweaver. Что еще мы можем сделать? Шрифт. Хорошо, давайте сделаем «Шрифт». Видите ли, там много шрифтов. Давайте сделаем «семейство шрифтов». Просто используйте мою клавишу со стрелкой вниз, нажмите «Возврат». И вот несколько основных. Я собираюсь предпочесть «Gill Sans». И помните, в самом конце мы поставим точку с запятой. Теперь мы нажмем «Сохранить», а затем перейдем к моему браузеру. Эй, у нас есть большая гигантская красная надпись «Hello World». Красивый!
Допустим, нам не нравится размер. Итак, ‘шрифт-с’, и вы можете видеть этот размер, и я собираюсь вставить… давайте вставим его очень большим. Итак, 160 пикселей, не забудьте поставить точку с запятой, нажмите «Сохранить», выпрыгните. Гигантский «Привет, мир». Наверное, это немного велико. Давайте начнем, чтобы сделать его 60 пикселей. Сохрани это. И, давайте посмотрим еще на одну вещь, давайте посмотрим, может быть, на «шрифт». Потому что по умолчанию он немного жирный. Итак, font-weight используется для… понимаете, это font-weight. И 100 действительно тонкий, и 400 обычный, 600 примерно полужирный, а 800 черный, как толстый большой шрифт. Давайте сделаем это 100. Помните, в конце точка с запятой. Сохранить. Выпрыгнуть. Эй, это выглядит мило.
Gill Sans — один из ведущих шрифтов здесь. Я люблю это действительно маленькое, но я ненавижу это жирным шрифтом. Я не знаю почему. Ненависть — это сильно сказано.
В любом случае, давайте вернемся в Dreamweaver, и это, мой друг, в основном то, что мы собираемся делать для создания веб-сайта.