Создайте индивидуальную минималистичную стартовую страницу !: 10 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:48

Приходилось ли вам переключаться в основном на удаленную работу с тех пор, как COVID-19 стал обычным явлением? Тем же!

Работа дома с нашими компьютерами и через Интернет часто означает, что мы должны отслеживать множество веб-сайтов для работы, учебы или даже… для развлечения!

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

Вот что вам понадобится:

• Компьютер (у нас Windows, но подойдет любой современный компьютер).
• Подключение к Интернету.
• Свежая установка текстового редактора Notepad ++.

Когда вы будете готовы, давайте начнем с использования нашего собственного шаблона стартовой страницы … Или создания собственного с нуля!

Шаг 1. Создайте стартовую страницу или загрузите наш индивидуальный шаблон

На данный момент у вас есть два варианта:

1. Загрузите наш индивидуальный шаблон (инструкции следуют немного позже на этом шаге) или,
2. Следуйте этому базовому руководству по стартовой странице; он шаг за шагом проведет вас через строительные блоки простой стартовой страницы - и это руководство, которому мы следовали, чтобы создать эту настраиваемую стартовую страницу!

Зачем рекомендовать учебник… в учебнике? Наша работа в качестве фасилитаторов MakerSpace заключается не только в том, чтобы показать вам, как что-то делать, но и в том, чтобы познакомить вас с культурой Maker и доступными там ресурсами. Это руководство - одно из мест, с которого начинают работать многие дизайнеры стартовых страниц, поэтому имеет смысл поделиться им с вами!

Если у вас есть время, перейдите к варианту №2, но если у вас его нет, вы всегда можете обратиться к основному руководству по стартовой странице позже! В этом руководстве мы просто предполагаем, что вы загружаете наш собственный шаблон! Чтобы скачать его:

1. Откройте наш репозиторий DIY_startpage на Github.
2. Нажмите большую зеленую кнопку «Код», чтобы открыть раскрывающееся меню.
3. Щелкните Загрузить ZIP, чтобы загрузить все файлы проекта.
4. Извлеките все файлы из только что загруженного ZIP-файла в любое место по вашему выбору.

GitHub - это веб-сайт, на котором программисты и дизайнеры со всего мира делятся своим кодом и творениями с другими: он также позволяет вам сотрудничать с другими над проектами любого типа. Суть в том, что это отличный инструмент, который должен знать каждый производитель!

Теперь запустите выбранный вами браузер: мне очень нравится Firefox, но наш шаблон должен работать практически с любым последним веб-браузером, поэтому не стесняйтесь использовать Edge, Chrome или Safari!

Наконец, откройте файл «DIY_startpage.html» в вашем браузере И в Notepad ++, и давайте приступим к его настройке!

Шаг 2: Составьте список избранного

Стартовая страница - это здорово. Еще лучше иметь полезную стартовую страницу, и сейчас наша выглядит немного пустой!

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

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

Новости и чтение

• Цифровые газеты
• Электронные книги
• Цифровые журналы

Обучение

• W3C школы
• Удеми
• Манго языки

Музыка

• Слушайте местные
• Песня Exploder
• Музыкальные радиоприемники Jamendo

Создатель культуры

• Core77
• Люмекластер
• Мелапропизмы

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

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

Шаг 3. Настройте шрифт

Запустите Notepad ++, нажмите «Файл»> «Открыть», чтобы открыть файл «DIY_startpage.html». То, что вы смотрите, очень отличается от страницы в вашем браузере, не так ли? Это код вашей страницы, и браузеры интерпретируют этот код, чтобы он выглядел немного удобнее для глаз, и делали все, что нам нужно.

Код для нашего проекта стартовой страницы написан на двух родственных языках: HTML и CSS. HTML обычно отвечает за содержимое страницы, а CSS - за внешний вид страницы.

Найдите этот первый раздел, чтобы настроить стартовую страницу:

html {

align-items: center; цвет: # 313131; дисплей: гибкий; шрифт: 22px «Courier New», Courier, моноширинный; высота: 100%; justify-content: center; маржа: 0; }

Этот раздел нашей стартовой страницы посвящен общему виду элементов на нашей странице. Линия:

шрифт: 22px "Courier New", Courier, моноширинный;

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

• size - вот что такое "22px". Размер вашего текста на экране определяется в «px», сокращенно от пикселей.
• семейство шрифтов - здесь мы перечисляем шрифты, которые хотели бы использовать. Обычно рекомендуется перечислить несколько из шрифтов, которые вы действительно хотите использовать, из самого общего семейства. Эти шрифты зависят от используемого вами браузера, поэтому, если самый конкретный из них недоступен, браузер попробует использовать следующий и так далее.

На странице CSS Web Safe Fonts от w3schools есть отличный список комбинаций шрифтов, которые отлично выглядят, сохраняют стиль, который вы ищете, и будут работать в большинстве современных браузеров.

Например, вы можете заменить:

«Курьер Новый», Курьер, моноширинный;

с участием:

"Палатинский линотип", "Книжный антиква", "Палатино", засечки;

или:

"Comic Sans MS", курсив, без засечек;

Сохраните файл и обновите страницу в браузере, чтобы увидеть изменения! Не нравится? Без проблем! Поэкспериментируйте с безопасными веб-шрифтами CSS, пока не найдете комбинацию, которая вам нравится.

Шаг 4: Настройте заголовок цитаты

Найдите этот раздел в своем HTML-файле:

Это ваша стартовая страница! Наслаждаться

Выберите понравившуюся цитату и замените код! Для себя я выбрал

Еще раз о бреши

Макет вашей стартовой страницы должен оперативно адаптироваться к вашей цитате, как только вы перезагрузите страницу в браузере: в Firefox это означает нажатие CTRL + R на клавиатуре или щелчок по значку «Перезагрузить». Выберите цитату, которая вам нравится сейчас (или выберите что-нибудь позже!), И приступим к настройке разделов вашей стартовой страницы!

Шаг 5. Настройте разделы

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

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

Найдите первый раздел и просто введите то, что нам нужно. Напоминаю, что мой первый раздел - «Новости и чтение»:

Пока ваш файл открыт в Notepad ++, найдите следующую строку кода:

Секция 1

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

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

Один заголовок раздела вниз, осталось пять! Найдите строку кода, в которой говорится:

Раздел 2

Измените его, затем продолжайте искать заголовки разделов и меняйте их, пока не дойдете до конца списка. Если вы не используете все разделы, просто оставьте их! Мы также сделаем небольшую очистку в конце этого урока.

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

Шаг 6. Настройте свои ссылки

Настройка ссылок в каждом разделе немного сложнее, но, конечно, не намного сложнее!

На этот раз мы не просто меняем названия ссылок, мы также меняем то, что вы можете с ними делать! Каждый элемент в каждом разделе станет интерактивным, со ссылкой на другой веб-сайт. Бонус, вы также можете решить, хотите ли вы, чтобы он открывался в новом окне или нет!

Сначала найдите строку, которая выглядит так:

link_one_name

Выберите этот бит "link_one_name" и замените его своим текстом. Например, первая ссылка в первом разделе, основанном на моем списке из шага X, - «Цифровые газеты», поэтому мы получаем:

Цифровые газеты

Далее займемся настройкой ссылки! Замените бит «link.one» своей первой ссылкой. Для меня это будет ссылка на наши электронные газеты, поэтому она будет выглядеть так:

Цифровые газеты

Сохраните свою работу в текстовом редакторе и перезагрузите страницу в браузере

Теперь у вас должна быть возможность щелкнуть первую настроенную ссылку. Если не взяли, ничего страшного! Начните сначала или повторяйте свои шаги, пока ссылка не откроется, когда вы ее нажмете.

Как только ваша первая ссылка заработает … Что ж, все, что вам нужно сделать, это повторить эти шаги для каждой ссылки в каждом разделе, пока вы не настроите все имена и ссылки на своей стартовой странице! Однако есть только одна загвоздка: есть вероятность, что когда вы нажимаете ссылку, ваша стартовая страница просто исчезает, когда новая ссылка открывается на той же вкладке или в том же окне.

Это не очень удобно… А как насчет изменения способа открытия ссылок? Давайте возьмем нашу первую ссылку в качестве примера! Вы, наверное, помните, что здесь мы говорим вашему браузеру открывать ссылку, когда вы нажимаете на нее:

Цифровые газеты

Но угадайте, что - именно здесь мы решаем, как будет открываться ссылка! Измените его на:

Цифровые газеты

Теперь сохраните свою работу и перезагрузите страницу в своем браузере: теперь ссылка открывается в новой вкладке, когда вы нажимаете на нее! Таким образом вы сможете сохранить свою стартовую страницу открытой до тех пор, пока она вам не понадобится.

Шаг 7. Добавьте изображение на стартовую страницу

Теперь, когда все наши ссылки настроены, пришло время украсить нашу стартовую страницу! В этом шаблоне есть место для пользовательского изображения в правой части экрана. Теперь вернемся в Notepad ++ и найдите эту строку:

полностью в конце шаблона. Выберите понравившееся изображение, переместите его в ту же папку, что и файл начальной страницы, и замените «library_picture.jpg» именем файла вашего изображения. Например, если имя моего файла - your_picture.jpg, строка будет выглядеть так:

Сохраните изменения и еще раз перезагрузите стартовую страницу в своем браузере.

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

Обои для смартфонов отлично подходят для этого проекта. В общем, любое вертикальное изображение (или, как модные люди говорят, «портретное изображение» с соотношением сторон 16: 9) в этом отношении! Но макет нашей стартовой страницы будет адаптироваться независимо от того, что вы на нее набрасываете.

Если появится ваша фотография, поздравляю, вы почти закончили!

Шаг 8: немного почистить

Если у вас есть лишние разделы, которые вы не используете на данный момент, не стесняйтесь их удалять! Например, предположим, что вы не используете Раздел 6. Найдите:

• Раздел 6
• Пункт 1
• Пункт 2
• Пункт 3

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

Обычно на этом этапе я все ломаю, потому что иду слишком быстро, поэтому, если что-то вдруг не работает, помните: сделайте глубокий вдох и отмените то, что вы только что сделали, с помощью комбинации клавиш CTRL + Z на клавиатуре!

Шаг 9. Сделайте ее настоящей стартовой страницей

Теперь, когда стартовая страница открывает все нужные нам ссылки и выглядит так, как мы хотим, пора открыть ее при запуске браузера!

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

Далее: скорее всего, ваш браузер откроется с вашей любимой поисковой системой или даже с пустой страницей.

Вы можете найти инструкции по настройке Firefox, а также других браузеров ниже:

• Инструкции для Firefox
• Инструкции Google Chrome
• Инструкции по Safari
• Инструкции Microsoft Edge

Как только вы закончите, следуя инструкциям для вашего браузера, закройте все и снова откройте. Если ваша стартовая страница появляется при запуске браузера, значит, вы сделали это!

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

Шаг 10: Готово! И хотите ли вы узнать больше?

Поздравляем с завершением вашей стартовой страницы! Может показаться, что это не так уж много, но вы только что научились кодировать один из самых важных строительных блоков веб-сайта, как это сделал я… Около 20 лет назад!

Если вам понравилось это и вы хотите узнать больше о стартовых страницах, это настоящая кроличья нора! Вот небольшая подборка, которая поможет вам в путешествии по стартовой странице:

• Вы пробовали руководство по базовой стартовой странице? Хорошие новости, есть еще кое-что, откуда они взялись! Ознакомьтесь с другими руководствами от / stpg /, чтобы получить больше вдохновения и дополнительные возможности!
• В каталоге библиотеки округа Джонсон вы найдете книги по HTML и CSS - а с вашей читательской карточкой или электронной карточкой вы также получите доступ к электронным книгам!
• Ваша библиотечная карточка также дает вам доступ к Udemy, и в нем также есть несколько очень полных классов по HTML, CSS и веб-дизайну.

Если вы очень гордитесь своим творением, почему бы вам не сделать снимок экрана и не поделиться им с нами в Twitter или Instagram с хэштегом #jocomakes? Мы всегда рады видеть, что придумывают наши покровители!