Andromeda Star Scouts

Объявление

Администраторы: Scott, Whiz
Модераторы: Grey

Добро пожаловать на Andromeda Star Scouts, форумную ролевую игру по мотивам Mass Effect: Andromeda.

Система игры: локационно-эпизодическая.

Мастеринг: смешанный, ближе к пассивному

Рейтинг: 18+

White PR LYL

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Andromeda Star Scouts » Архив » Гетская магия


Гетская магия

Сообщений 1 страница 5 из 5

1

Эта история о том, как Виз учил Первопроходца гетской магии.

Давай начнем с простого. Ты представляешь себе, как устроена html-страница? Знаешь, за отвечают html, css и java script? Знаешь, как пользоваться инспектором в браузере?

+1

2

Whiz написал(а):

html-страница

Это знаю, ну там head, body и вот это все, да?

Whiz написал(а):

Знаешь, за отвечают html, css и java script

В целом, да, но в частности я сильно путаюсь. Так понимаю, html это скелет, css это кровь и плоть украшательства и прочее, а java оптимизирует?

Whiz написал(а):

Знаешь, как пользоваться инспектором в браузере?

... инспектор Гаджетом? : D
Это которое "просмотреть код" и поковыряться? В общем, да, но я обычно пользую его для блокировки реклам или всяких нежелательных элементов.

0

3

Sara Ryder написал(а):

Это знаю, ну там head, body и вот это все, да?

Да. Хорошо, немножко конкретики: постейшая web-страница может состоять из чистого html, без малейшего вкрапления css или js (javascript). HTML называют языком разметки, потому что он отвечает за то, как контент будет уложен на странице. HTML состоит из html-тегов. Самые часто используемые теги:

<div>текст</div> - тег блока, практически универсальный, используется везде, чтобы обернуть какую-то часть контента в общий контейнер
<span>текст</span> - используется реже, по сути тоже контейнер для текста, но отличается от блока тем, что, если блок по умолчанию старается встать на отдельную строчку и растянуться на всю ширину, то span ведет себя скромно, никуда не лезет, занимает столько места, сколько нужно
<table></table> - тег таблицы
<h1></h1>, <h2></h2>  (и т.д.) - теги заголовков

Есть еще куча тегов, о них можно почитать в гугле по ходу того, как они будут встречаться.

Дальше. Когда мы рассовали контент по блокам, встает вопрос, как эти блоки будут располагаться на странице, какого цвета и размера будет текст в каждом блоке, какой будет цвет фона у каждого блока и т.д. За это отвечают стили. Раньше стили писали прямо в html-теге, в атрибуте style (<div style="float: left">текст</div>), потом придумали хранить их в отдельных файлах. Этим файлам дали расширение css (каскадная таблица стилей).
Чтобы как-то связать элементы на странице со стилями в файлах css, понадобилось элементы как-то именовать. Придумали два основных вида нименования:
id - уникальное имя элемента
class - неуникальное имя, которое можно выдать целой кучке элементов.

Работает это так:

html-файл:
<div id="unique">green</div>
<div class="not-unique">red</div> <div class="not-unique">red</div> <div class="not-unique">red</div>

css-файл:
#unique {
background-color: green;
}

.not-unique {
background-color: red;
}

(Решетка обозначает id в css-файле, точка - класс).

Отлично, теперь мы можем красиво разбросать контент по странице. Но вдруг нам понадобилось сделать выпадающую по клику менюшку, сделать какой-нибудь счетчик или еще что-нибудь интерактивное. CSS с недавнего времени умеет делать анимацию, но это все равно просто анимация. Это еще не интерктивность. За интерактивность отвечает javascript. Везде, где надо что-то кликнуть, пролистать какой-то слайдер при наведении, что-то дозагрузить или обновить на странице - это всегда js.

Теперь об инспекторе. В Инспекторе есть много всего интересного, но для начала нас будут интересовать две вкладки - это "Элементы" (там, где видно html-код страницы) и Консоль. Консоль - это средство общения с js. Внизу у нее есть строка ввода. Попробуй ввести туда
alert('!!!');
И нажать Enter.

0

4

Еще несколько забавных команд на поиграться:

console.log($('.topicpost .post-box').text());
$('#pun').toggle('slow');
$('#pun').css('display', 'block');
$('.post-box').text('Упс');

0

5


Вы здесь » Andromeda Star Scouts » Архив » Гетская магия


Рейтинг форумов | Создать форум бесплатно