http://www.objavka.com
          AquaTerra Show - 2018

AquaTerra Show - 2017

KilliFish-2017 в Одессе

Всеукраинская выставка икромечущих карпозубых и карповых (с 01.04.2017г. по 09.04.2017г.)

Виставка-конкурс аранжування нано-акваріумів "Сакура в акваріумі 2017"

Всеукраинская выставка креветок и ракообразных. Харьков, март-2017г.

aquaterra
Показано с 1 по 6 из 6

Тема: Для тех кто создает свои странички на сайте

  1. #1
    Живу я тут Аватар для gus
    Регистрация
    24.08.2016
    Сообщений
    722
    Поблагодарил(а)
    228
    Благодарностей: 243 (сообщений: 178)
    Вес репутации
    10

    Для тех кто создает свои странички на сайте

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

  2. 1 пользователь сказал cпасибо gus за это полезное сообщение::


  3. #2
    Живу я тут Аватар для gus
    Регистрация
    24.08.2016
    Сообщений
    722
    Поблагодарил(а)
    228
    Благодарностей: 243 (сообщений: 178)
    Вес репутации
    10

    Re: Для тех кто создает свои странички на сайте

    На примере страницы Сергея Плшешникова постораюсь показать как правильно создавать странички......
    Как входить в админку и свои пароли все знают.

    Итак открываем 2 странички - сам сайт и админку.

    Нажмите на изображение для увеличения. 

Название:	001.jpg 
Просмотров:	3 
Размер:	97.1 Кб 
ID:	2712 Нажмите на изображение для увеличения. 

Название:	002.jpg 
Просмотров:	3 
Размер:	54.1 Кб 
ID:	2711

    В админке видим нужную нам страницу для редактирования. При наведении курсора на саму страничку появляется меню:


    Нажмите на изображение для увеличения. 

Название:	003.jpg 
Просмотров:	3 
Размер:	53.3 Кб 
ID:	2714

    Выбираем пункт "Измеить" и попадаем в редактирование страницы.


    Нажмите на изображение для увеличения. 

Название:	004.jpg 
Просмотров:	3 
Размер:	89.3 Кб 
ID:	2713

    Тут выбираем СТРОГО закладку "Текст". Ни в коем случае не "Визуально" !!!!!!
    Я конечно уже кое что подправил, но много еще и осталось того, что надо убрать....
    Рзберем пример:

    Нажмите на изображение для увеличения. 

Название:	005.jpg 
Просмотров:	3 
Размер:	89.2 Кб 
ID:	2715

    Я конечно все могу понять, но зачем ставить ссылку на Фейсбук? Логичнее было бы наоборот - на Фейсбуке ставить ссылку на свою страничку.....
    Так как эта страничка делалась в режиме "Визуалньо", то программа, по каким-то своим разумениям начинает ставить то, что совершенно не нужо ставить.....

    <a href="https://www.facebook.com/milliarder17" target="_blank" rel="noopener">

    Вот код ссылки...... В самом конце мы видим - target="_blank" rel="noopener"

    Это 2 команды выполняющие одну и ту же функцию - открытие ссылки в новом окне. Зачем этот дубль - не понятно, но так решила программа....... Правильней было бы прописать:.

    <a href="https://www.facebook.com/milliarder17" target="_blank">

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

    Многие мне говорят что не понимают того что написано. Давайте разберемся!

    <center><strong>Список рыб в моих аквариумах:</strong></center>&nbsp;

    Тег <center> - означает что данная строка будет посередине. Центр, он и есть центр.....
    <strong> - текст будет выделен толстым шрифтом.
    Ну и если что-то было открыто, то оно должно быть и закрыто в том же порядке..... А вот дальше опять произвол самой программы....
    &nbsp; - Зачем программа в конце строки поставила знак пустого символа (пробела), мне лично не понятно....... Он просто лишний!
    Чем больше я узнаю людей, тем больше я люблю животных.

  4. 1 пользователь сказал cпасибо gus за это полезное сообщение::


  5. #3
    Живу я тут Аватар для gus
    Регистрация
    24.08.2016
    Сообщений
    722
    Поблагодарил(а)
    228
    Благодарностей: 243 (сообщений: 178)
    Вес репутации
    10

    Re: Для тех кто создает свои странички на сайте

    Идем дальше!
    Загрузка изображений.
    Тут надо поработать фотошопом..... Щас разберемся как это делать.
    Фото бывают вертикальные и горизонтальные.... Стандартный размер фото 18х13. Из этого размера и будем исходить.
    Любой фотоаппарат или смартфон делают фото большего размера для того, что-б можно было выбрать экспозицию, чуть поиграться с местом съемки и т.д.

    Берем 2 фото:

    Нажмите на изображение для увеличения. 

Название:	Изображение 017.jpg 
Просмотров:	2 
Размер:	157.6 Кб 
ID:	2717 Нажмите на изображение для увеличения. 

Название:	Изображение 034.jpg 
Просмотров:	2 
Размер:	123.4 Кб 
ID:	2716

    Я специально взял и вертикальное и горизонтальное....
    Смотрим на размеры фото....


    Нажмите на изображение для увеличения. 

Название:	007.jpg 
Просмотров:	5 
Размер:	17.1 Кб 
ID:	2718

    Каждое фото больше 1,5 мегобайта. Это ОЧЕНЬ БОЛЬШИЕ ФОТО для сайта. Будем уменьшать!
    Для начала в фотошопе приведем фото к требуемому размеру 18х13 или 13х18....


    Нажмите на изображение для увеличения. 

Название:	008.jpg 
Просмотров:	3 
Размер:	123.5 Кб 
ID:	2720 Нажмите на изображение для увеличения. 

Название:	009.jpg 
Просмотров:	3 
Размер:	89.6 Кб 
ID:	2721 Нажмите на изображение для увеличения. 

Название:	010.jpg 
Просмотров:	3 
Размер:	100.9 Кб 
ID:	2719


    При сохранении выбираем качество "3".
    Смотрим на размер файлов:



    Нажмите на изображение для увеличения. 

Название:	011.jpg 
Просмотров:	5 
Размер:	17.2 Кб 
ID:	2722



    Смотрим и видим размер файлов уменьшился достаточно сильно! Это уже близко к требуемому размеру, но еще не совсем.....
    Будем работать дальше!
    Чем больше я узнаю людей, тем больше я люблю животных.

  6. 1 пользователь сказал cпасибо gus за это полезное сообщение::


  7. #4
    Живу я тут Аватар для gus
    Регистрация
    24.08.2016
    Сообщений
    722
    Поблагодарил(а)
    228
    Благодарностей: 243 (сообщений: 178)
    Вес репутации
    10

    Re: Для тех кто создает свои странички на сайте

    Если кто-то хочет оставить свою подпись на фото, то сейчас это сделать в самый раз......
    Создаем в фотошопе файл с прозрачным фоном нужной нам надписью. Делаем надпись 2-х видов - черные буквы и белые.

    Нажмите на изображение для увеличения. 

Название:	012.jpg 
Просмотров:	2 
Размер:	69.0 Кб 
ID:	2724 Нажмите на изображение для увеличения. 

Название:	013.jpg 
Просмотров:	2 
Размер:	82.5 Кб 
ID:	2725 Нажмите на изображение для увеличения. 

Название:	014.jpg 
Просмотров:	2 
Размер:	108.1 Кб 
ID:	2726

    Нажмите на изображение для увеличения. 

Название:	015.jpg 
Просмотров:	1 
Размер:	148.6 Кб 
ID:	2723

    Выделяем и создаем 2 файла под названием "черный" и "белый".....
    Предупреждаю сразу, что Ваши фото находятся в формате .jpg,а файлы надписей создаем в формате .png. Только формат .png позволяет делать прозрачный фон!!!!! Высота букв 20 пикселей !!!!
    Открываем наши 2 файла с надписями и файлы которые мы делаем:


    Нажмите на изображение для увеличения. 

Название:	016.jpg 
Просмотров:	2 
Размер:	90.0 Кб 
ID:	2727



    Обычно хватает белой надписи, но бывают случаи что нужна и черная...
    В данном случае нам понадобится только белая надпись.


    Нажмите на изображение для увеличения. 

Название:	017.jpg 
Просмотров:	2 
Размер:	66.7 Кб 
ID:	2729


    Выделяем надпись мышкой, копируем с помощью Ctrl+C, переходим к нужному нам файлу и вставляем с помощью Ctrl+V.
    При этом надпись появится в центре изображения. Для смещения в любую сторону нашей надписи, зажимаем клавишу Ctrl и не отпуская ее, мышкой тянем нашу надпись туда, куда нам надо.


    Нажмите на изображение для увеличения. 

Название:	018.jpg 
Просмотров:	2 
Размер:	114.4 Кб 
ID:	2728


    Опять сохраняем полученный файл в формате .jpg с качеством "3".
    Сразу хочу предупредить - расширение файла .jpg должно быть ТОЛЬКО маленькими буквами. В имени файла не должно быть русских букв. ТОЛЬКО ЛАТИНСКИЕ !!!!!!!
    Некоторые фотоаппараты, такие как мой, делают имя русскими буквами, некоторые делают расширение большими буквами. Это все надо переименовать!!!!!!


    Нажмите на изображение для увеличения. 

Название:	019.jpg 
Просмотров:	3 
Размер:	17.7 Кб 
ID:	2730



    Файлы переименовали!
    По правилам работы в интернете, на страничке показаны только файлы предпросмотра, т.е. файлы очень маленького размера, а при клике на этот файл открывается файл нормального для просмотра пользователем.
    Делаем именно так!
    Для нашего формата странички выбираем размер по широкой стороне фото равным 230 пикселей.


    Нажмите на изображение для увеличения. 

Название:	020.jpg 
Просмотров:	2 
Размер:	119.3 Кб 
ID:	2732 Нажмите на изображение для увеличения. 

Название:	021.jpg 
Просмотров:	2 
Размер:	113.5 Кб 
ID:	2733 Нажмите на изображение для увеличения. 

Название:	022.jpg 
Просмотров:	2 
Размер:	111.0 Кб 
ID:	2734



    Сохраняем полученный файл с тем-же именем которое у нас и было, но добавляем к нему любую понятную нам приставку.
    Лично я добавляю к файлам 2 буквы "sm", т.е. "маленький"..... Для этого выбираем "сохранить как":


    Нажмите на изображение для увеличения. 

Название:	023.jpg 
Просмотров:	2 
Размер:	83.6 Кб 
ID:	2735 Нажмите на изображение для увеличения. 

Название:	024.jpg 
Просмотров:	2 
Размер:	90.4 Кб 
ID:	2736



    В итоге у нас получился маленький файлик предпросмотра:


    Нажмите на изображение для увеличения. 

Название:	025.jpg 
Просмотров:	3 
Размер:	20.9 Кб 
ID:	2731


    Размер этих предпросмотровых файликов очень мал.
    Теперь нам надо привести нормальные файлы к нормальному размеру. Для нашего сайта нормальный размер по широкой стороне 738 пикселей. Делаем!




    Нажмите на изображение для увеличения. 

Название:	026.jpg 
Просмотров:	3 
Размер:	110.4 Кб 
ID:	2737

    Эти файлы просто сохраняем не меняя имени.
    Все! Работа с изображениями закончена!
    У нас получилось 4 изображения с оптимальными размерами по высоте и ширине и оптимального размера по объему файла.


    Нажмите на изображение для увеличения. 

Название:	027.jpg 
Просмотров:	4 
Размер:	21.5 Кб 
ID:	2738



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

  8. 1 пользователь сказал cпасибо gus за это полезное сообщение::


  9. #5
    Живу я тут Аватар для gus
    Регистрация
    24.08.2016
    Сообщений
    722
    Поблагодарил(а)
    228
    Благодарностей: 243 (сообщений: 178)
    Вес репутации
    10

    Re: Для тех кто создает свои странички на сайте

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


    Нажмите на изображение для увеличения. 

Название:	028.jpg 
Просмотров:	3 
Размер:	75.1 Кб 
ID:	2740 Нажмите на изображение для увеличения. 

Название:	029.jpg 
Просмотров:	3 
Размер:	76.1 Кб 
ID:	2741 Нажмите на изображение для увеличения. 

Название:	030.jpg 
Просмотров:	3 
Размер:	77.5 Кб 
ID:	2742 Нажмите на изображение для увеличения. 

Название:	031.jpg 
Просмотров:	3 
Размер:	79.6 Кб 
ID:	2743


    Слева в админке открываем закладку "Медиафайлы". Кликаем на "Добавить новый" и следом "Выберите файлы".
    Выбираем созданные нами 4 файла....


    Нажмите на изображение для увеличения. 

Название:	032.jpg 
Просмотров:	4 
Размер:	94.0 Кб 
ID:	2744 Нажмите на изображение для увеличения. 

Название:	033.jpg 
Просмотров:	3 
Размер:	101.9 Кб 
ID:	2745 Нажмите на изображение для увеличения. 

Название:	034.jpg 
Просмотров:	3 
Размер:	94.5 Кб 
ID:	2746



    Кликаем "Открыть", ждем.....и наши файлы появились на сайте. Но они еще не вставлены в страичку.
    При клике на любой файл, справа у нас откроется путь к этому файлу.....


    Нажмите на изображение для увеличения. 

Название:	035.jpg 
Просмотров:	3 
Размер:	57.3 Кб 
ID:	2739



    Это все что нам нужно!!!!!!!
    Копируем эту ссылку в какой нибудь временный файл. Вернее это не сама ссылка, а только путь к этим файлам. Этот путь нам и понадобится на страничке!!!!!
    Идем на редактирование нашей странички!

    Вставляем в нужное место странички следующий код (мы его сейчас разберем по косточкам). )))))

    <center>
    <a href="http://sklik.world-fauna.com/wp-content/uploads/2017/07/img034.jpg" target="_blank"><img title="" src="http://sklik.world-fauna.com/wp-content/uploads/2017/07/img034sm.jpg" alt="" width="180" /></a>
    </center>

    Ну с <center> мы уже разобрались. Тут это значит что фото будет находиться по центру страницы.
    Дальше идет ссылка на наше БОЛЬШОЕ фото. Ссылка начинается с "a href=". И дальше тот путь, который мы скопировали при заливке фото на сайт - "http://sklik.world-fauna.com/wp-content/uploads/2017/07/img034.jpg".
    Обратите внимание, что ссылка взята в кавычки. ТАК И ДОЛЖНО БЫТЬ !!!! Без кавычек работать не будет!!!!!
    Но мы можем чуть упростить эту ссылку. Сайт и так, без нашей подсказки знает что он http://sklik.world-fauna.com.
    Именно эту часть и НУЖНО убрать из кода ссылки. В итоге у нас должно получиться:


    "/wp-content/uploads/2017/07/img034.jpg"

    Именно это мы вставляем в код приведенный выше:



    <center>
    <a href="/wp-content/uploads/2017/07/img034.jpg" target="_blank"><img title="" src="/wp-content/uploads/2017/07/img034sm.jpg" alt="" width="180" /></a>
    </center>

    После того как мы прописали БОЛЬШОЕ фото и то что оно должно открываться в новом окне (target="_blank"), мы вставляем код того, что должно показываться на экране.

    <img title="" src="/wp-content/uploads/2017/07/img034sm.jpg" alt="" width="180" />

    А на экране показывается маленькое фото с приставкой "sm" - маленькое.
    Дальше идет непонятность в виде - alt="". Что это такое? А это то, что когда Вы наводите на картинку мышкой не кликая по самой картинке, у вас показывается какая-то надпись, т.е. это просто описание этого фото. Большим его делать нельзя!!!! Всего 2-3 слова!

    <img title="" src="/wp-content/uploads/2017/07/img034sm.jpg" alt="Я и Вася на пляже" width="180" />

    Примерно так! Хотя это поле можно оставить и пустым!
    Дальше идет вообще что-то не понятное.....

    width="180"

    Это ширина нашей МАЛЕНЬКОЙ картинки!!!!! Помните что мы делали ширину равную 230 пикселей? Вот это оно и есть.
    Только тут мы еще чуть-чуть, для того что-б в строку влезло 3 фото, еще уменьшим наше фото.
    Для горизонтальных фото выбираем - 180, для вертикальных - 135.
    ВСЁ!
    Больше нам ничего не нужно делать.
    Сохраняем этот код нажав справа в меню "Обновить".
    Ваши картинки уже на сайте!
    Чем больше я узнаю людей, тем больше я люблю животных.

  10. 1 пользователь сказал cпасибо gus за это полезное сообщение::


  11. #6
    Живу я тут Аватар для gus
    Регистрация
    24.08.2016
    Сообщений
    722
    Поблагодарил(а)
    228
    Благодарностей: 243 (сообщений: 178)
    Вес репутации
    10

    Re: Для тех кто создает свои странички на сайте

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

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •  
PostMan By Cultural Forum | کیلینیک کلینیک | raports