Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Свидетельство о публикации

Автоматическая выдача свидетельства о публикации в официальном СМИ сразу после добавления материала на сайт - Бесплатно

Добавить свой материал

За каждый опубликованный материал Вы получите бесплатное свидетельство о публикации от проекта «Инфоурок»

(Свидетельство о регистрации СМИ: Эл №ФС77-60625 от 20.01.2015)

Инфоурок / Информатика / Другие методич. материалы / Задание на учебную практику МДК 01.02. Прикладное программирование специальности 09.02.03 "Программирование в компьютерных системах"
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 28 июня.

Подать заявку на курс
  • Информатика

Задание на учебную практику МДК 01.02. Прикладное программирование специальности 09.02.03 "Программирование в компьютерных системах"

Выбранный для просмотра документ Задания на практику.doc

библиотека
материалов

Итоговой проект по учебной практике


Необходимо разработать сайт с уникальным дизайном на заданную тему:

ФИО студента

Тематика проекта









































Требования к документации

В процессе прохождения практики студенты должны представить на проверку готовый сайт и отчет.

Отчет должен содержать:

  • Титульный лист

  • Формулировку цели

  • Формулировку задач

  • Актуальность

  • Целевая аудитория

  • Структуру сайта (карта сайта)

  • Описание основных модулей

  • Список используемой литературы


Этапы создания сайта

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

Необходимо найти не менее 5 аналогичных сайтов и произвести оценку их дизайна, показать уникальность разрабатываемого Вами дизайна.

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

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

Обязательные требования: для вашего сайта должны быть разработаны и обоснованы:

  • цветовой макет;

  • набор используемых шрифтов (2 уровня заголовков и основной шрифт);

  • оформление изображений (рамки);

  • уникальный главный заголовок, логотип, баннер, отражающие сущность содержания сайта;

  • система навигации.

Основные этапы создания сайта

Условно можно выделить пять шагов и определить их как основные этапы создания сайта.

1. На первом этапе необходимо сформировать основную идею сайта. Для этого необходимо ответить на ряд вопросов:

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


  • Какова целевая аудитория будущего сайта (пол, возраст, образование, профессия...), т.е. для кого вы делаете сайт.


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


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


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


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

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

4. Теперь можно заняться подготовкой макета вашего сайта. Макет - это картинка, похожая на снимок экрана в тот момент, когда сайт открыт в браузере. Сделать это можно, например, в программе Photoshop.

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

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


Выбранный для просмотра документ Основные этапы создания сайта.doc

библиотека
материалов

Какие бывают сайты

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

Сайт-визитка

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

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

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

Новостной сайт

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

Ко второй группе относятся сайты, посвященные какой-либо стране, региону, городу и так далее. Объединяет такие сайты необходимость постоянного наполнения их свежими новостями по теме ресурса.

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

Корпоративный сайт

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

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

Сайт для продвижения продукта или услуги

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

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

Сайт Каталог

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

Особенности: Такие сайты содержат много однотипной информации: фотографии продукции, их описание, цены и т.п. Интернет магазин

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

Особенности: Дружественный интерфейс, средства приема заказов on-line, возможность оплаты on-line (не всегда). Как правило, пользователю нужно только щелкать по кнопке с товарами, все остальное будет сделано за него (посчитают, упакуют и поблагодарят:)).

Интернет портал

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

Особенности: Разве что, масштабность проекта. Все остальное, как на других видах сайтов.

Блог

Все-таки это отдельный вид сайта. Можно называть это как угодно: домашней страничкой, блогом, журналом, но по сути - это тот же сайт. А отличается он тем, что посвящен конкретному человеку и его увлечениям. Вообще, блоггинг - это отдельная тема для разговора.

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

Общая структура сайта

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

Структура каталогов

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

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

    hello_html_m4546d1a6.png


  • иерархическая - страницы разбиты по категориям и подкатегориям. Такая структура наиболее удобна.

    hello_html_38d3b12c.png


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

    hello_html_m53950eac.png


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

Структура навигации

Это очень важная часть планирования ресурса. Способ доступа к информации на сайте должен быть простым и понятным. Пользователь в любую минуту должен знать ответы на следующие вопросы:

  1. Где я нахожусь?


  1. Куда могу пойти?


  1. Как туда добраться?


  1. Как вернуться назад?


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

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

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

Теперь рассмотрим основные системы навигации:

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

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

    Вертикальное меню вы видите на этом сайте, горизонтальное меню могло бы выглядеть так:

Главная Делаем сайт Оптимизируем сайт Раскручиваем сайт


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

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

hello_html_21ef5d39.png
hello_html_m4f340f62.png
hello_html_m12e0ff35.png


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

    Пример навигационной карты для сайта магазина бытовой техники могла бы выглядеть так:


hello_html_2832f8e5.gifhello_html_6c2dc6a9.jpg

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

Заставки сайта

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

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

Главная страница сайта

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

  • Главная страница должна отражать тематику сайта.


  • Она должна быть интересной, чтобы пользователю захотелось пройтись по другим страницам сайта.


  • Желательно разместить на ней функцию поиска по сайту.


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


  • Обязательно должен присутствовать способ обратной связи (e-mail, телефон, адрес).


  • Сделайте главную страницу отличающейся от остальных, но соответствующей общей стилистике сайта.


Остальные страницы сайта

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

  1. Следите за длиной страницы. Если она больше 2,5 экранов, разбейте страницу на две.


  1. Разбивайте текст на абзацы, делайте отступы и поля. Выделяйте текст заголовками и подзаголовками. В общем, сделайте так, чтобы он легко воспринимался.


  1. Снабжайте текст картинками и графиками, но не переусердствуйте. Все должно быть обоснованно.


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


Основные этапы создания сайта

Условно можно выделить пять шагов и определить их как основные этапы создания сайта.

1. На первом этапе необходимо сформировать основную идею сайта. Для этого необходимо ответить на ряд вопросов:

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


  • Какова целевая аудитория будущего сайта (пол, возраст, образование, профессия...), т.е. для кого вы делаете сайт.


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


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


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


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

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

4. Теперь можно заняться подготовкой макета вашего сайта. Макет - это картинка, похожая на снимок экрана в тот момент, когда сайт открыт в браузере. Сделать это можно, например, в программе Photoshop.

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

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

Переносим макет сайта в HTML

Если вы читали Основные этапы создания сайтов, то знаете, что после этапа создания макета сайта получившуюся картинку нужно перенести в HTML. Этому процессу и посвящены эти два урока.

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

hello_html_3eb50f22.png

Эту картинку нам надо перенести в HTML. Попробуем сделать так называемый фиксированный дизайн, взяв за основу таблицу. Поэтому наложим на эту картинку сетку таблицы, чтобы разделить на структурные элементы, например, так:

hello_html_m7aaf7aef.png


Целиком наша картинка имеет размеры 800 х 600 пикселов, значит и наша таблица-каркас будет иметь размеры 800 х 600 пикселов. Далее, мы разделили нашу картинку на 7 частей, на эти же 7 ячеек мы разделим и нашу таблицу. Первую часть нашей картинки оставим без изменений, а в остальных частях удалим текст (его мы вернем при помощи HTML).

Теперь надо подготовить наши 7 картинок, например, в программе ImageReady (как это сделать читайте на странице Подготовка графики с помощью ImageReady). Для удобства дадим им имена в виде im_01.gif - im_07.gif и сложим в папку с названием im.

Теперь создадим папку site на любом диске компьютера, поместим в нее папку im с картинками и сюда же будем складывать все наши страницы.

Создайте страницу index.html с каркасом нашей таблицы:


Как сделать сайт

content="text/html; charset=UTF-8">

cell">


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

Первая строка состоит из трех столбцов, причем третий столбец объединяет три строки (ячейки 1, 2 и 3).
Вторая строка состоит из одного столбца, включающего в себя два (ячейка 4).
Третья строка состоит из одного столбца, включающего в себя два (ячейка 5).
Четвертая строка состоит из одного столбца, включающего в себя три (ячейка 6).
Пятая строка состоит из одного столбца, включающего в себя три (ячейка 7).

Запишем это:


Как сделать сайт

content="text/html; charset=UTF-8">

cell">

1

2

3


4


5


6


7



Сейчас наша таблица выглядит так:

1

2

3

4

5

6

7



Зададим ширину и высоту каждой ячейки, а фоном сделаем подготовленные картинки, уберем рамку у таблицы (border="0").

Чтобы задать размеры ячеек, нужно знать размеры картинок, которые в них будут располагаться. Наша картинка im_01.gif имеет размер 352 х 31 пикселов, картинка im_02.gif имеет размер 398 х 31 пикселов и т.д. Именно эти размеры мы и укажем в качестве размеров ячейки:


Как сделать сайт

content="text/html; charset=UTF-8">


cell">

background="im/im_01.gif">

background="im/im_02.gif">

background="im/im_03.gif">

background="im/im_04.gif">

background="im/im_05.gif">

background="im/im_06.gif">

background="im/im_07.gif">



Теперь наша страница выглядит так, как мы и хотели:

hello_html_m3347c813.png


Сейчас наша страница прижимается к левому краю, исправим это с помощью параметра align="center" тега

и зададим фоновый цвет окна параметром bgcolor тега .


...


cell"> align="center">

...



Отлично, мы перенесли нашу картинку в HTML, остался один нюанс. Сейчас фоном ячейки, где будет контент, является картинка белого цвета (im_06.gif). Но картинка занимает место и при этом не несет никакой информации, поэтому разумно ее удалить, а белый цвет задать параметром bgcolor.


...

bgcolor="#FFFFFF">

...



На следующем уроке зададим слоган, пункты меню и создадим остальные страницы сайта.

Делаем шаблон будущего сайта

Если помните, во второй ячейке нашего макета должен располагаться слоган. Этой ячейке соответствует второй столбец первой строки нашей таблицы (где background="im_02.gif"). Напишем в этом столбце наш слоган и выровняем его по горизонтали - справа, по вертикали - кверху:


...

align="right" valign="top">

создаем, раскручиваем, зарабатываем

...

На макете слоган белого цвета и выделен полужирным курсивом:


...

align="right" valign="top">



создаем, раскручиваем, зарабатываем


...

Теперь нужно сделать меню. На макете это пятая ячейка. Этой ячейке соответствует единственный столбец третьей строки нашей таблицы (где background="im_05.gif").

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


...

background="im/im_05.gif">




...

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

делаем сайт - do.html


оптимизируем сайт - opt.html


раскручиваем сайт - unt.html


зарабатываем - ear.html



Напишим наши пункты меню и сделаем их ссылками:


...

background="im/im_05.gif">


делаем сайт

оптимизируем сайт

раскручиваем сайт

зарабатываем


...

Теперь наше меню выглядит так:

hello_html_m47cb3ed5.png


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

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

Чтобы текст был белого цвета, заключим его в теги и в теги - для полужирного начертания.

Наконец, чтобы убрать подчеркивание, зададим тегу параметр style="text-decoration:none". Этот параметр, откровенно говоря, относится к CSS, но здесь без него не обойтись:


...

background="im/im_05.gif">


делаем сайт

оптимизируем сайт

раскручиваем сайт

зарабатываем


...

Теперь наше меню выглядит так:

hello_html_65207f2e.png


Если есть желание можете поменять шрифт и размер.

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

...

bgcolor="#FFFFFF" valign="top">

Добро пожаловать на сайт о сайтах

...

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

Рабочий пример можно посмотреть здесь.

Заключение

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



Блочная верстка сайта

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

Будем считать, что они сделаны и посмотрим на примере, как из картинки сделать html-страницу, причем страницу сверстаем с помощью блоков. Именно этим блочная верстка сайта и отличается от табличной, в основе которой лежит таблица.

Итак, мы имеем вот такую картинку (макет подготовлен в программе Photoshop).

hello_html_m685e4ae0.jpg

Создадим папку, назовем ее, например, restaurant. В нее создадим и положим две страницы: index.html и style.css, а также папку images, куда будем складывать картинки. Все ссылки в примерах будут иметь относительные адреса, исходя из данной структуры.

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

Теперь разделим нашу картинку на блоки. Это можно сделать по-разному, например, так:

hello_html_m49473add.jpg

Именно такие картинки, с такими названиями мы и сложим в папку images. Обратите внимание, картинка reklama_bg будет фоном, поэтому ее можно сохранить в виде тонкой полоски, так же можно поступить и с картинкой footer. Еще нам понадобится картинка с фоном всей страницы, вот такая:

hello_html_41b4176b.jpgПоследний нюанс, у сайта может быть фиксированный либо резиновый дизайн. Рассмотрим сначала фиксированный, т.е. ширина нашей страницы будет всегда одинакова - 800 пикселов. Теперь все готово для верстки, открываем index.html и пишем стандартный код:




Блочная верстка сайта





Теперь в теги поместим блок с идентификатором main и разместим в нем все намеченные нами на картинке блоки:


Блочная верстка сайта



Теперь с помощью таблицы стилей (style.css) зададим положение, размер и фон этих блоков. Блок main имеет ширину 800px, фоновый рисунок fon_bg.jpg, который повторяется по вертикали:


#main{

width:800px;

background-image: url(images/fon_bg.jpg);

background-repeat: repeat-y;

}

Блок header находится в нормальном потоке, имеет ширину 800px и высоту 155px (это размеры фонового рисунок header.jpg, который не повторяется ни по горизонтали, ни по вертикали):


#header{

width:800px;

height:155px;

background-image: url(images/header.jpg);

background-repeat:no-repeat;

}

Блоки menu1, menu2, menu3 находятся в нормальном потоке, имеют ширину 800px, а высоты 35px для menu1, 36px - для menu2 и 72px - для menu3 (это размеры соответствующих фоновых рисунков):


#menu1{

width:800px;

height:35px;

background-image: url(images/menu1.jpg);

background-repeat:no-repeat;

}

#menu2{

width:800px;

height:36px;

background-image: url(images/menu2.jpg);

background-repeat:no-repeat;

}

#menu3{

width:800px;

height:72px;

background-image: url(images/menu3.jpg);

background-repeat:no-repeat;

}

Блоки reklama и content будут плавающими. Чтобы блок content прижимался к правой стороне блока reklama мы зададим обоим свойство float:left. Ширина блока reklama - 263px (по фоновому рисунку), а блока content - все остальное пространство, т.е. 507px.

Блок reklama, в свою очередь, состоит из трех блоков:

reklama_top (ширина 263px, высота 67px (по фоновому рисунку),

reklama_text (ширина 263px, высота будет зависеть от содержания, а фоновый рисунок будет повторяться по вертикали),

reklama_bottom (ширина 263px, высота 35px (по фоновому рисунку).

Все три блока находятся в нормальном потоке. Запишем это:


#reklama{

float:left;

width:263px;

}

#reklama_top{

width:263px;

height:67px;

background-image: url(images/reklama_top.jpg);

background-repeat:no-repeat;

}

#reklama_text{

width:263px;

background-image: url(images/reklama_bg.jpg);

background-repeat: repeat-y;

}

#reklama_bottom{

width:263px;

height:35px;

background-image: url(images/reklama_bottom.jpg);

background-repeat:no-repeat;

}

#content{

float:left;

width:507px;

}

И последний блок - блок footer. Его ширина 800px, высота 28px, фоном является повторяющийся по горизонтали рисунок footer.jpg. Чтобы этот блок расположился ниже предыдущих, мы запретим его обтекание с обеих сторон свойством clear:both.


#footer{

clear:both;

width:800px;

height:28px;

background-image: url(images/footer.jpg);

background-repeat: repeat-x;

}

Сейчас наша страница выглядит так. Она прижата к левому краю и имеет отступы сверху и слева. Давайте ее отцентрируем и уберем ненужные отступы. Проблема с отступами решается добавлением свойства "http://www.site-do.ru/css/css_position.php#center">в примере о выравнивании страниц.


body{

width:800px;

;

;

}


#main{

width:800px;

;

background-image: url(images/fon_bg.jpg);

background-repeat: repeat-y;

}

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

Выбранный для просмотра документ Оформляем страницу.doc

библиотека
материалов

Оформляем страницу

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


Льяно-Эстакадо

насладись вкусом!

Теперь зададим стили для новых блоков. Очевидно, что эти блоки плавающие, шириной около 1/3 от родительского блока (800px:3=270px) и прижаты к правому краю (свойство float:right ).

Чтобы второй блок располагался ниже первого, а не прижимался к нему, запретим его обтекание справа (clear:right), а для того, чтобы он был немного смещен влево (как на картинке), уменьшим его ширину на 20px.

Наконец, зададим шрифт, его размер и цвет, а также отступы сверху:


#headertext1{

width:270px;

float:right;

font-size:24px;

font-family:Arial;

;

color: #FFFFFF;

}

#headertext2{

width:250px;

float:right;

clear:right;

font-size:20px;

font-family:Arial;

;

color: #FAF46E;

}

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


Меню |

Заказ столика |

Отзывы

Уголок шеф-повара |

О нас

Звоните нам по телефону (495) 123-4567

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


#textmenu1{

;

;

}

#textmenu2{

;

;

}

#textmenu3{

;

;

font-size:14px;

color:#FFFFFF;

}

У ссылок надо убрать подчеркивание, задать цвет и размер. Чтобы ссылки не прижимались друг к другу, зададим им отступы слева и справа:


a.menu{

text-decoration: none;

color:#000000;

font-size:15px;

;

;

}

Теперь займемся блоком reklama, он состоит из трех блоков, причем текст будет располагаться в первых двух. В них мы и добавим по блоку:


Вы можете прямо сейчас заказать столик в ресторанах:

Баттисетас

Бифштекс Чарли Палмера

Драфт

Лимончелло

Мили

Эйфелева башня

Хьюго

Обратите внимание, ссылки в этом блоке отличаются от других, поэтому и имеют свой класс reklama. Займемся стилями. Для блока textreklamatop надо задать отступы, цвет и размер текста:


#textreklamatop{

;

font-size:14px;

color:#FFFFFF;

font-weight:bold;

}

Блоку textreklamatext нет необходимости задавать стиль, а вот ссылкам внутри него надо задать отступы слева и справа, цвет и размер. Ссылки являются строчными элементами, а у нас они должны располагаться одна под другой, для этого зададим им свойство display:block. Чтобы ссылки располагались свободно, зададим расстояние между строк свойством line-height. А для того, чтобы первая буква ссылок была зеленого цвета (как на картинке) воспользуемся псевдоклассом first-letter:


a.reklama{

display:block;

line-height:30px;

text-decoration: none;

color:#000000;

font-size:14px;

;

;

}

a.reklama:first-letter{

color:#02663d;

}

Надеюсь, вы проверяете результат в браузере после каждого изменения?

Продолжим, нам осталось оформить только блоки content и footer. Они не требуют дополнительных блоков, им надо задать отступы, а для блока footer - горизонтальное выравнивание:


#content{

float:left;

width:507px;

;

}

#footer{

clear:both;

width:800px;

height:28px;

background-image: url(images/footer.jpg);

background-repeat: repeat-x;

text-align:center;

;

}

Теперь добавим сам текст:


bludo1.jpg

Бельгийская кухня

Тонкое смешение местных традиций с иностранным

влиянием соседних земель - Франции, Германии, Италии,

Голландии, Испании и Скандинавии. Бельгийцы любят говорить,

что блюда их кухни готовятся с французским изяществом

и подаются с немецким великодушием.


Итальянская кухня

bludo2.jpg

Для большинства людей - это пицца, ризотто, кьянти

и макароны (или паста). Однако при более детальном

знакомстве с рецептами итальянской кухни выясняем,

что в Италии нет как таковой национальной кухни, поскольку

и сама Италия как единое государство в современных границах

существует немногим более одного столетия.

© 2009 Все права защищены

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


a{

color:#000000;

}

Нам осталось задать шрифт и размер для всего сайта. Для этого добавим эти свойства в стили тега body:


body{

width:800px;

;

;

font-family:Arial, Helvetica, sans-serif;

text-align:left;

font-size:12px;

}

И последний нюанс: сделаем так, чтобы при наведении курсора мыши на ссылки, их цвет менялся на зеленый:


a:hover{

color:#02663d;

}


Выбранный для просмотра документ Разработка веб сайта.doc

библиотека
материалов

Разработка веб сайта. Рекомендации

Чего следует избегать когда идет разработка веб сайта

Верстка блоками div и разработка веб сайта

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

Соблюдение Валидности при разработке веб сайта

Когда идет разработка веб сайта не стоит зацикливаться на валидности. Отход от стандарта позволяет наделить веб сайт новыми возможностями, недопустимыми в валидном коде. Корпорация W3C предоставила разработчику возможность переопределять значение тегов с помощью CSS и, таким образом, сама поощрила отход от стандарта. Так же она утвердила нераспознающиеся теги, постановив что, браузеры, не умеющие с ними работать, просто должны их игнорировать. Другим отходом является применение фильтров. Конструкции типа FILTER:Shadow(Color='#000000', Direction='150') являются вопиющим нарушением валидности, однако не портят внешний вид в не поддерживающих их браузерах, но зато ощутимо украшают внешний вид в IE. Главным же аргументом в защиту не валидного кода является тот факт что, практически все веб сайты с миллионной посещаемостью разработаны НЕ валидно. Примером могут служить Google и Yandex. Именно умение разработчиков Google изящно отступать от стандартов и породило AJAX и WEB 2.0. Валидность всегда консервативна. Не валидность, наоборот, может дать неожиданный толчок к эволюции. Одним из примеров такой эволюции служит придуманный корпорацией Netscape тег

Графика

Когда идет разработка веб сайта не стоит злоупотреблять графикой: на медленных линиях она раздражает посетителей, а на быстрых расходует их трафик (и деньги). Поэтому загрузка графики очень часто бывает отключена – никто не хочет платить за лишние украшательства. Особенно актуально это для корпоративного сегмента, где сотрудникам фирм просто запрещается включать графику, чтобы не тратить лишнего. Хоть интернет и превратился в зону развлечений, он, тем не менее, всегда будет информационной базой. Люди ищут информацию и, если графика не несет информационную нагрузку (например, демонстрирует внешний вид предлагаемого товара), она никому, кроме вас, не нужна.

Элементы Flash

Когда идет разработка веб сайта не стоит использовать Flash. Все, что делается с помощью Flash, можно сделать иными методами. При этом вариант, разработанный на Flash, будет наиболее громоздким и наименее совместимым. Не каждый браузер поддерживает Flash-технологию, а если и поддерживает, то использование Flash в нем может быть отключено, по тем же причинам, по которым отключена и графика. Но даже если Flash не отключен, то это еще не означает что, у посетителя установлена необходимая Вам версия Flash-плеера, а выскакивающие окна «Не хотите ли вы установить последнюю версию Flash плеера? Эта версия необходима для просмотра содержимого данного веб сайта» очень раздражают. Раздражает не сам вопрос о необходимости установки. Раздражает необходимость скачать несколько мегабайт с веб сайта Макромедиа и установить их себе в систему, прежде чем начать просматривать Ваш веб сайт. Хотите ли вы, чтобы первым впечатлением посетителя было раздражение?

Разработка веб сайта на Flash

Тем белее, недопустима разработка веб сайта полностью на Flash. Многие люди их просто не увидят. Не потому что они не могут поставить или включить Flash, а потому что, они не знают, стоит ли им суетиться ради Вашего неудачного веб сайта.

Ява скрипты и разработка веб сайта

Когда идет разработка веб сайта не стоит полагаться на Ява-скрипт. Использование скриптов позволяет сделать веб сайты еще удобнее, еще красивее… но, к сожалению, у части посетителей оно отключено в целях безопасности (хотя яваскрипт не содержит никаких опасных функций). Поэтому, когда идет разработка веб сайта требуется убедиться, прежде всего, что он отлично выглядит и работает без клиентских скриптов. Только затем к нему можно добавить скрипты для улучшения вида и юзабилити. Главной проблемой, связанной со скриптовыми излишествами являются выпадающие меню и попытки сделать веб сайт полностью на технологии AJAX. Любое выпадающее меню должно дублироваться обычным, а любой AJAX скрипт, если по какой-либо причине не поддерживается, должен срабатывать стандартным методом. При разработке веб сайта ориентироваться следует, прежде всего, на статический HTML. Скрипты могут дополнять его, но не должны выполнять основные функции.

VB Script и разработка веб сайта

Когда идет разработка веб сайта применение VB Script вообще недопустимо. Визуал бейсик работает ТОЛЬКО в эксплорере. Во всех других браузерах, будь-то альтернативные браузеры Windows, браузеры Linux или браузеры мобильных телефонов он работать не будет и, ввиду того что, этот язык ни кем, кроме Микрософт не поддерживается, применять его вместо JavaScript, значит ограничивать функциональность Вашего веб сайта.

Разработка веб сайта на Ваш вкус

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

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

onblur="this.value=(this.value=='')?this.title:this.value;"

onfocus="this.value=(this.value==this.title)?'':this.value;"

title="Поиск"

value="Поиск"


onclick="location.href=’http://starper55plys.ru/’;">

style="border-radius: 5px; box-shadow: 0px 1px 3px;

font-size: 20px;">s20.png

style="vertical-align: middle;">Кнопка


Подайте заявку сейчас на любой интересующий Вас курс переподготовки, чтобы получить диплом со скидкой 50% уже осенью 2017 года.


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Автор
Дата добавления 10.09.2015
Раздел Информатика
Подраздел Другие методич. материалы
Просмотров716
Номер материала ДA-036509
Получить свидетельство о публикации
Похожие материалы

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