Как создать собственный веб-сайт: 16 шагов

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

Полностью покрытое руководство по переходу от бумажного документа к Интернету, при желании бесплатно, особенно если дружественные веб-мастера окажут вам некоторую услугу, но даже имея небольшой опыт и знания, вы можете создать сайт и разместить его в сети следующим образом: …

Шаг 1: Инструменты, материалы и базовые навыки

Для создания вашего сайта вам понадобятся: Инструменты - Компьютер, желательно возрастом менее пяти лет - Копия Dreamweaver (необязательно), но это то, что я знаю и буду показывать вам на этом - Копия Photoshop, не обязательно, но определенно обязательно для тех, кто хочет красивый сайт - Подключение к Интернету на вашем компьютере, желательно быстрое (потому что это ускоряет работу) Материалы - Идея - Некоторое место на диске, в зависимости от того, для чего предназначен ваш сайт - Время, да, это материал ценный при этом - рабочий адрес электронной почты, если он вам нужен; они свободны от Gmail и hotmail; базовые навыки; - базовые знания о том, как использовать свой компьютер, Интернет - это интуитивно без кода, это для людей которые хотят создать сайт, но не имеют ни малейшего представления о том, как - Некоторые дизайнерские навыки могут пригодиться - Знание того, как использовать Photoshop, было бы неплохо, раскрасьте. NET или GIMP

Шаг 2. Приступим

Как только вы узнаете, какой сайт хотите создать, вы принимаете дизайнерское решение.

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

Шаг 3. Запуск сайта

Именно здесь мы начинаем, заходим в Мои документы и создаем себе папку с названием «Мой веб-сайт или используйте имя сайта». Внутри этой папки создайте папку с именем «изображения», одну с именем «страницы», а другую с именем «файлы». (тот, который называется файлом, предназначен для всех других файлов, которые вы можете использовать в процессе создания своего сайта.) Теперь запустите Dreamweaver и немного от файла вы увидите пункт меню с именем site, щелкните его и выберите новый сайт, используйте расширенную вкладку (потому что это легче пройти), теперь введите имя вашего веб-сайта в поле для имени сайта. Вы увидите поле с надписью «локальная корневая папка», это папка, которую вы создали под именем вашего сайта. Следующее поле помечено как «Папка изображений по умолчанию» и выберите папку с именами изображений в корневой папке. Оставьте два флажка в покое, они оба такими, какими они должны быть.

Шаг 4: давай застрянем в этом

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

В вашем шаблоне вам нужно сделать заголовок, это основной баннер, который проходит в верхней части страницы, обычно он имеет заголовок сайта / название компании, слоган и изображение или логотип, отражающий тематику сайта.. Наилучшие размеры, которые я могу дать, - это 760 x 100-200, высота - это предпочтение, а также зависит от того, где будет располагаться строка меню. Ширина составляет 760, поэтому он умещается в окнах браузера даже при запуске на дисплеях с разрешением 800x600 (бесполезно, если вы не видите половину сайта). Кнопка вашего меню (если вы решите сделать их не слишком высокими, я рекомендую 30 пикселей в высоту, а ширина зависит от многих вещей, но у меня обычно от 100 до 1500 пикселей. Опять же, вы можете использовать кнопки вспышки, которые не требуют никаких усилий с вашей стороны (для Dreamweaver это так)

Шаг 5. Создание шаблона…

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

Шаг 6: Продолжение создания шаблона. расположение

Теперь приступаем к верстке шаблона.

Щелкните кнопку вставки таблицы или кнопку рисования таблицы. Теперь просто перетащите, чтобы создать стол, выбор 3x3 - удобное место для начала. Первое, что вам нужно сделать, это сделать вашу таблицу шириной 800 пикселей, вы можете увидеть ширину на панели свойств внизу, теперь выделите верхнюю строку ячеек и щелкните правой кнопкой мыши, перейдите к таблице в меню правой кнопки мыши и выберите объединить ячейки, сделайте вновь сформированную ячейку равной высоте вашего изображения заголовка. На этом пинте перейдите к свойствам вашей таблицы и введите нулевое значение для значений «cellpad» и «border». Это означает, что таблица не существует для конечного пользователя, но удерживает все на своих местах. Теперь мы вставляем его в изображение заголовка, которое должно быть сохранено в папке изображений сайта, но если это не так, Dreamweaver спросит, хотите ли вы скопировать туда файл. Чтобы вставить изображение, посмотрите на панель кнопок (вкладка над ними должна быть общей), найдите кнопку с изображением дерева в поле (в большинстве программ используется аналогичный символ), щелкните по ней, и появится диалоговое окно, просто найдите свой файл и дважды щелкните его. Если ваше изображение оказалось не в том месте, курсор оказался не в той ячейке. Теперь, когда вы знакомы с таблицей, разделите себя на ячейку с той стороны, где вы хотите видеть строку меню, помните, что строки располагаются поперек столбцов вниз. Сделайте поле для таблицы кнопок меню настолько широким, насколько вы думаете, выглядит хорошо, затем сделайте ваши кнопки правильной ширины (игнорируйте это, если вы хотите, чтобы кнопки flash) Теперь создайте таблицу внутри своей ячейки с 1 строкой и таким количеством столбцов, сколько есть кнопок (вы должны знать это из своего плана сайта, я ничем не могу вам помочь, это ваш выбор) или для горизонтального меню 1 столбец и столько строк, сколько кнопок.

Шаг 7: Добавление кнопок меню

Есть несколько способов сделать это. Если вам нужны простые графические кнопки (интерактивное изображение, которое выглядит как кнопка), вы вставляете изображение как обычно, и пока что все. позже мы добавим на них ссылки.

Если вам нужны кнопки с наведением курсора (изображение меняется, когда курсор находится над изображением кнопки, тогда вам нужно сделать изображения для каждой кнопки, скажем, у вас есть несколько красивых темно-серых кнопок, которые вы хотите подсвечивать, когда пользователь наводит на них мышь. затем вы создаете второй набор кнопок, которые светятся. Затем вы переходите к кнопке добавления ролловера на панели инструментов (рядом или рядом с кнопкой изображения) и выбираете темную для изображения 1 и светлую для изображения 2, снова оставьте ссылку на данный момент, потому что вы еще не создали ни одной страницы. Если вам нужны кнопки Flash, вам нужно щелкнуть вкладку мультимедиа в верхней части панели инструментов кнопок и щелкнуть символ кнопки вставки Flash (флэш-логотип с маленькая полоска в нижнем углу.), он попросит вас сохранить документ перед продолжением, поэтому сохраните его как «базовый шаблон» или что-то, что, как вы знаете, означает основной шаблон для вашего сайта.

Шаг 8: Создание шаблона для использования

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

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

Шаг 9: Добавьте контент

Сделайте так, чтобы ваши страницы добавляли контент и не забывайте сохранять их в папках, созданных вами для страниц, и помещать изображения в папку изображений, которые вы также создали. Просто повторяйте последнюю часть шага 8 о создании страницы из шаблона каждый раз, когда вы создаете Обратите внимание на фальшивый контент, который я использовал, он называется Lorem Ispsum, и это рассказ о добре и зле на латыни, веб-дизайнеры и графические дизайнеры используют это, чтобы дать представление о том, как продукт будет выглядеть с реальным текстом. Его можно найти на Lipsum.com. Я надеюсь, что эти синие прямоугольники - это редактируемые регионы, которые у вас тоже есть.

Шаг 10: Теперь делаем наши ссылки

Откройте свой шаблон, который вы использовали (запомните этот флажок, теперь он доступен для воспроизведения). В тот момент, когда ваши кнопки меню являются просто изображениями (если они мигают, посмотрите ниже). Теперь, когда у вас есть страницы, они могут быть настоящими кнопками, независимо от того, являются ли они наведенными или обычными изображениями, щелкните правой кнопкой мыши по кнопке «Домой» и перейдите к изменению ссылки или созданию ссылки (в зависимости от версии). Появится диалоговое окно, просто найдите файл на своей домашней странице и дважды щелкните по нему. теперь он связан со страницей, повторите для остальных кнопок и сохраните документ. Если Dreamweaver спросит, хотите ли вы изменить все страницы на основе документа, скажите «Да».

Для кнопки flash вы помните, что мы проигнорировали панель ссылок, поэтому все, что мы делаем, это щелкаем правой кнопкой мыши по кнопке и нажимаем «Редактировать». Вам будет представлен предыдущий экран, просто нажмите кнопку обзора рядом с панелью ссылок и найдите свой файл. Теперь у вас должен быть в значительной степени рабочий сайт, следующий шаг наполнен несколькими приемами и вещами для страниц с фотографиями и т. Д., Чтобы упростить работу и улучшить работу.

Шаг 11: несколько советов и полезных идей

Если вы работаете с XP (возможно, с Vista), есть Powertoy XP, называемый Image Resizer, который позволит вам изменять размер ваших изображений, щелкая правой кнопкой мыши, и вы можете делать партии и добавлять большой палец в конец каждого имени. Для фотогалереи используйте созданные вами эскизы в качестве изображений на главной странице и связывайте их как кнопки с большим файлом изображения, это позволяет ускорить загрузку и уменьшить количество страниц галереи.

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

Шаг 12: Создайте индексную страницу

В настоящее время большинству веб-хостов требуется индексная страница, это может быть либо копия домашней страницы с именем index.htm (это то, что вам нужно будет назвать), либо сделать забавную страницу с вводимым сайтом на ней (если вы: Если вы хорошо умеете использовать вспышку, вы можете использовать анимацию, чтобы оживить ситуацию. Вы должны почувствовать, что это приближается к этому особому моменту. Иди сюда …

Шаг 13: Давайте устроим нам хозяина

Теперь вы окажетесь на сайте, на который я вас отправил, я выбрал его, потому что что касается бесплатных хостов, он великолепен и позволяет очень много вещей, а также хранилище на 8 ГБ и примерно 300 ГБ пропускной способности в месяц.

Поэтому следуйте инструкциям по регистрации и активируйте свою учетную запись, даже не смотрите на файловый менеджер, который нам не понадобится. Зайдите в свою учетную запись и запишите имя своей учетной записи FTP, имя пользователя и пароль (такие же, как ваш пароль для учетной записи хостинга). Зайдите на сайты, отредактируйте сайты и выберите свой, перейдите на вкладку «Дополнительно» и перейдите на сервер тестирования. (Я знаю, что у меня удаленная информация, но тестовый сервер - это самый простой способ загрузить сайт), введите свою информацию, как показано на картинке.

Шаг 14: ты чувствуешь это?

Пора загрузить сайт… У вас скоро будет сайт.

Перейдите на панель файлов / ресурсов вашего сайта, она, несомненно, сейчас выглядит совсем иначе, щелкните небольшое раскрывающееся меню представлений и выберите сервер тестирования. Теперь Dreamweaver уже сохранил ваш пароль FTP. Нажмите на кнопку подключения к удаленному хосту (с тремя забавными формами). как только он говорит, что вы подключены, нажмите кнопку размещения файлов., это кнопка со стрелкой, направленной вверх. (Для последующего использования вы можете войти в учетную запись и использовать для получения файлов файлы, которые вы, возможно, потеряли на своем компьютере.) Когда вы нажмете эту кнопку, он спросит, хотите ли вы разместить весь сайт, черт возьми, вы делаете с все это работает, для небольших обновлений вы можете вместо этого отправить файлы замены. Когда он дойдет до index.htm, он спросит, следует ли его заменить, скажите «да», иначе ваш сайт перестанет работать через 15 дней, поэтому мы сначала сделали наш сайт.

Шаг 15: Теперь вам нужно имя?

Таким образом, идея быть дочерним сайтом влияет на ваше эго, у вас есть варианты, купить доменное имя (недорого без хостинга, и вы можете сделать.com.org.co.uk и.net, выбрать то, которое лучше всего подходит вашему имени. Или для парня, который хочет, чтобы все это было бесплатно, просто зайдите на сайт dot tk Они просто зеркалируют ваши страницы, поэтому, когда вы делаете это, сделайте свою домашнюю страницу или свою индексную страницу ссылкой сайта. и выберите, скажем, killerjackalope.tk, понял?

Шаг 16: Что-нибудь еще?

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

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