1
00:00:04,040 --> 00:00:09,465
Пришло время для вашего первого задания в этом курсе.

2
00:00:09,465 --> 00:00:10,975
В первом задании

3
00:00:10,975 --> 00:00:18,605
мы предоставим вам нестилизованную страницу aboutus.html.

4
00:00:18,605 --> 00:00:22,130
ZIP-файл, содержащий эту

5
00:00:22,130 --> 00:00:25,670
страницу aboutus.html, доступен для вас в инструкциях по назначению.

6
00:00:25,670 --> 00:00:30,530
Поэтому вам нужно загрузить страницу, а затем переместить эту страницу в папку con Fusion.

7
00:00:30,530 --> 00:00:33,060
После этого вы примените

8
00:00:33,060 --> 00:00:40,970
классы Bootstrap и сетку Bootstrap Flexbox для стилизации страницы,

9
00:00:41,110 --> 00:00:47,780
затем вы перемещаете страницу в папку Con Fusion,

10
00:00:47,780 --> 00:00:52,095
затем вы можете просмотреть страницу в своем браузере, набрав

11
00:00:52,095 --> 00:01:01,810
localhost: 3000/aboutus.html и ваш сервер сборки облегченного сервера вверх на странице aboutus.html,

12
00:01:01,810 --> 00:01:05,310
так что это единственный способ просмотреть страницу.

13
00:01:05,310 --> 00:01:06,545
Итак, для начала

14
00:01:06,545 --> 00:01:08,775
страница будет выглядеть так,

15
00:01:08,775 --> 00:01:12,520
полностью Unstyle страница, которая просто содержит содержимое.

16
00:01:12,520 --> 00:01:20,165
Теперь ваша работа состоит в том, чтобы пройти через три задачи, чтобы форматировать эту страницу.

17
00:01:20,165 --> 00:01:23,245
Давайте рассмотрим три задачи более подробно.

18
00:01:23,245 --> 00:01:26,890
Ваша первая задача - применить

19
00:01:26,890 --> 00:01:32,850
Bootstraps CSS и классы Javascript к

20
00:01:32,850 --> 00:01:42,415
странице aboutus.html, чтобы эта страница была мгновенно преобразована в эту страницу,

21
00:01:42,415 --> 00:01:48,470
где, как только вы добавите классы Bootstraps CSS и JavaScript,

22
00:01:48,470 --> 00:01:54,115
верхний и нижний колонтитулы будут автоматически отформатированы правильно,

23
00:01:54,115 --> 00:01:59,170
потому что я просто скопировал заголовок в нижнем колонтитуле со страницы index.html на

24
00:01:59,170 --> 00:02:05,140
эту страницу, и я оставил все форматирование Bootstrap как таковое,

25
00:02:05,140 --> 00:02:10,955
но фактическое содержимое страницы все еще остается нестилизованным.

26
00:02:10,955 --> 00:02:14,580
Итак, теперь, в качестве второй задачи,

27
00:02:14,580 --> 00:02:19,580
вы собираетесь применить сетку Bootstraps Flexbox, включая контейнер,

28
00:02:19,580 --> 00:02:23,190
строки и классы столбцов к

29
00:02:23,190 --> 00:02:28,430
этому содержимому или странице, чтобы вы могли правильно настроить его.

30
00:02:28,430 --> 00:02:30,345
Теперь, когда примените классы,

31
00:02:30,345 --> 00:02:36,430
вы собираетесь применить классы строк и столбцов к aboutus, чтобы просто оставить его как таковой.

32
00:02:36,430 --> 00:02:40,390
Затем вы собираетесь применить классы строк и столбцов к

33
00:02:40,390 --> 00:02:45,445
этому содержимому, чтобы этот контент занимал только половину экрана,

34
00:02:45,445 --> 00:02:48,740
а затем вы собираетесь применить классы строк и столбцов к

35
00:02:48,740 --> 00:02:53,245
этому содержимому, чтобы занять всю ширину экрана.

36
00:02:53,245 --> 00:03:00,300
Итак, правильно выберите классы строк и столбцов, чтобы применить к этому.

37
00:03:00,300 --> 00:03:05,220
Вы можете использовать пользовательские классы CSS, которые мы уже

38
00:03:05,220 --> 00:03:10,510
реализовали для index.html, добавив файл style.css,

39
00:03:10,510 --> 00:03:14,765
также для стилизации содержимого на этой странице.

40
00:03:14,765 --> 00:03:18,010
Поэтому, когда вы завершите вторую задачу,

41
00:03:18,010 --> 00:03:21,990
ваша страница будет выглядеть так.

42
00:03:21,990 --> 00:03:27,290
Таким образом, вы можете видеть, что страница aboutus существует сама по себе.

43
00:03:27,290 --> 00:03:31,505
Затем наша история часть,

44
00:03:31,505 --> 00:03:37,800
обратите внимание, что на маленьком или большом экране,

45
00:03:37,800 --> 00:03:43,815
Наша история будет занимать только половину ширины экрана.

46
00:03:43,815 --> 00:03:51,850
Затем часть Corporate Leadership занимает всю ширину экрана в этом случае.

47
00:03:51,850 --> 00:03:56,000
Это вторая задача, которую необходимо выполнить в своем задании.

48
00:03:56,000 --> 00:03:59,660
Для третьей задачи, как вы можете видеть,

49
00:03:59,660 --> 00:04:05,380
этот макет контента выглядит отлично для больших размеров экрана,

50
00:04:05,380 --> 00:04:13,240
но когда вы переходите на дополнительный маленький размер экрана, особенно это,

51
00:04:13,240 --> 00:04:20,415
вы заметите, что содержание слишком много в этом разделе.

52
00:04:20,415 --> 00:04:27,670
Итак, что мы хотели бы сделать, это использовать другой класс Bootstrap, предоставленный нам, называемый

53
00:04:27,670 --> 00:04:31,615
[неслышным] и блок DSM.

54
00:04:31,615 --> 00:04:37,865
Существует ссылка на адаптивные классы в ресурсах назначения,

55
00:04:37,865 --> 00:04:44,550
поэтому вы можете проверить документацию для блока [неслышный] и DSM.

56
00:04:44,550 --> 00:04:49,440
Вы должны применить их так, чтобы это описание было

57
00:04:49,440 --> 00:04:54,400
скрыто в дополнительных небольших размерах экрана.

58
00:04:54,400 --> 00:04:59,955
Поэтому, когда вы классы к этой части корпоративного лидерства,

59
00:04:59,955 --> 00:05:06,040
то же содержание теперь будет выложено без описания,

60
00:05:06,040 --> 00:05:10,465
так что он будет скрыт в дополнительных небольших размеров экранов.

61
00:05:10,465 --> 00:05:14,170
Но когда вы перейдете к маленькому большому размеру экрана,

62
00:05:14,170 --> 00:05:16,335
контент станет видимым.

63
00:05:16,335 --> 00:05:21,200
Таким образом, вы можете заметить, что для дополнительного небольшого размера экрана

64
00:05:21,200 --> 00:05:23,760
содержимое скрыто,

65
00:05:23,760 --> 00:05:26,170
но для небольшого размера экрана,

66
00:05:26,170 --> 00:05:30,475
это содержание описания будет показано четко.

67
00:05:30,475 --> 00:05:35,310
Итак, это ваша третья задача в вашем задании.

68
00:05:35,310 --> 00:05:40,175
Пока вы находитесь в нем, вы также можете применить те же классы к

69
00:05:40,175 --> 00:05:45,810
описаниям на нашей странице index.html, чтобы

70
00:05:45,810 --> 00:05:51,480
подробные описания элементов содержимого также были скрыты

71
00:05:51,480 --> 00:05:57,645
на странице index.html при просмотре на дополнительных небольших размерах экрана.

72
00:05:57,645 --> 00:06:02,090
Это завершает ваше первое задание.

73
00:06:02,090 --> 00:06:04,965
Кроме того, когда вы отправляете свое задание,

74
00:06:04,965 --> 00:06:19,615
пожалуйста, сделайте снимок экрана

75
00:06:19,615 --> 00:06:25,930
на всю страницу вашего макета как в маленьком, так и в очень большом размере экрана,

76
00:06:25,930 --> 00:06:29,230
а затем включите это как часть вашего представления.

77
00:06:29,230 --> 00:06:32,420
Чтобы сделать полный скриншот страницы в Chrome,

78
00:06:32,420 --> 00:06:36,000
вы можете использовать доступное нам расширение Chrome,

79
00:06:36,000 --> 00:06:39,305
ссылка на расширение Chrome предоставляется в

80
00:06:39,305 --> 00:06:45,325
ресурсах назначения, которые следуют описанию назначения.

81
00:06:45,325 --> 00:06:48,555
После завершения задания,

82
00:06:48,555 --> 00:06:52,610
в случае, если вы сохраняете свои изменения в репозитории Git,

83
00:06:52,610 --> 00:06:55,750
не забудьте зафиксировать изменения в

84
00:06:55,750 --> 00:07:00,090
вашем репозитории Git с помощью Message Assignment One.