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

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

Скачать материал

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

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

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

 

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

ФИО студента

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

 

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

 

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

 

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

 

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

 

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

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

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

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

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

 

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

Методические разработки к Вашему уроку:

Получите новую специальность за 2 месяца

Карьерный консультант

Получите профессию

Менеджер по туризму

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сайт Каталог

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

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

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

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

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

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

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

Блог

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

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

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

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

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

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

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

 

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

 

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

 

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

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

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

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

 

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

 

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

 

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

 

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

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

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

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

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

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

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

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

 

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

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



 

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

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

 



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

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

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

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

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

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

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

 

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

 

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

 

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

 

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

 

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

 

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

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

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

 

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

 

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

 

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

 

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

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

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

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

 

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

 

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

 

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

 

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

 

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

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

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

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

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

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

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

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



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


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

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

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

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

 

<html>

  <head>

    <title>Как сделать сайт</title>

    <meta http-equiv="Content-Type"

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

  </head>

  <body>

    <table  width="800" height="600" border="0"

               cellpadding="0" cellspacing="0">

    </table>

 

  </body>

</html>

    

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

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

Запишем это:

 

<html>

  <head>

    <title>Как сделать сайт</title>

    <meta http-equiv="Content-Type"

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

  </head>

  <body>

 

    <table  width="800" height="600" border="1"

               cellpadding="0" cellspacing="0">

     <tr>

       <td>1</td>

       <td>2</td>

       <td rowspan="3">3</td>

     </tr>

 

     <tr>

               <td colspan="2">4</td>

         </tr>

 

         <tr>

               <td colspan="2">5</td>

         </tr>

 

         <tr>

               <td colspan="3">6</td>

         </tr>

 

         <tr>

               <td colspan="3">7</td>

         </tr>

 

   </table>

 

  </body>

</html>

    

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

1

2

3

4

5

6

7



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

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

 

<html>

  <head>

    <title>Как сделать сайт</title>

    <meta http-equiv="Content-Type"

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

  </head>

  <body>

 

    <table  width="800" height="600" border="0"

               cellpadding="0" cellspacing="0">

     <tr>

               <td width="352" height="31"

                     background="im/im_01.gif">

            </td>

               <td width="398" height="31"

                     background="im/im_02.gif">

               </td>

               <td rowspan="3" width="50" height="183"

                     background="im/im_03.gif">

               </td>

        </tr>

        <tr>

               <td colspan="2" width="750" height="112"

                      background="im/im_04.gif">

               </td>

        </tr>

        <tr>

               <td colspan="2" width="750" height="40"

                      background="im/im_05.gif">

               </td>

        </tr>

        <tr>

               <td colspan="3" width="800" height="366"

                      background="im/im_06.gif">

               </td>

        </tr>

        <tr>

               <td colspan="3" width="800" height="51"

                      background="im/im_07.gif">

               </td>

        </tr>

 

   </table>

 

  </body>

</html>

    

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


Сейчас наша страница прижимается к левому краю, исправим это с помощью параметра align="center" тега <table> и зададим фоновый цвет окна параметром bgcolor тега <body>.

 

...

  <body bgcolor="#477B1D">

 

    <table  width="800" height="600" border="0"

               cellpadding="0" cellspacing="0"

               align="center">

...

 

 

    

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

 

...

  <tr>

               <td colspan="3" width="800" height="366"

                      bgcolor="#FFFFFF">

               </td>

  </tr>

...

 

 

    

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

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

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

 

        ...

<td width="398" height="31" background="im/im_02.gif"

    align="right" valign="top">

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

</td>

        ...

   

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

 

        ...

<td width="398" height="31" background="im/im_02.gif"

    align="right" valign="top">

 

    <font color="#FFFFFF"><strong><em>

 

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

 

    </em></strong></font>

   

</td>

        ...

   

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

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

 

        ...

<td colspan="2" width="750" height="40"

                           background="im/im_05.gif">

 

    <table align="right">

 

        <tr><td></td><td></td><td></td><td></td></tr>

 

    </table>

   

</td>

        ...

   

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

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

 

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

 

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

 

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

 


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

 

        ...

<td colspan="2" width="750" height="40"

                           background="im/im_05.gif">

 

    <table align="right">

        <tr>

           <td>

             <a rel="nofollow ugc" target="_blank" href="do.html">делаем сайт</a>

           </td>

           <td>

             <a rel="nofollow ugc" target="_blank" href="opt.html">оптимизируем сайт</a>

           </td>

           <td>

             <a rel="nofollow ugc" target="_blank" href="unt.html">раскручиваем сайт</a>

           </td>

           <td>

             <a rel="nofollow ugc" target="_blank" href="ear.html">зарабатываем</a>

           </td>

        </tr>

    </table>

 

</td>

        ...

   

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


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

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

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

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

 

        ...

<td colspan="2" width="750" height="40"

                           background="im/im_05.gif">

 

    <table align="right">

        <tr>

           <td>

              <a rel="nofollow ugc" target="_blank" href="do.html" style="text-decoration:none">

               <font color="#FFFFFF"><strong>

                делаем сайт

               </strong></font>

              </a>

           </td>

           <td>

             <a rel="nofollow ugc" target="_blank" href="opt.html" style="text-decoration:none">

              <font color="#FFFFFF"><strong>

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

              </strong></font>

             </a>

           </td>

           <td>

             <a rel="nofollow ugc" target="_blank" href="unt.html" style="text-decoration:none">

              <font color="#FFFFFF"><strong>

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

              </strong></font>

             </a>

           </td>

           <td>

             <a rel="nofollow ugc" target="_blank" href="ear.html" style="text-decoration:none">

              <font color="#FFFFFF"><strong>

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

              </strong></font>

             </a>

           </td>

        </tr>

    </table>

 

</td>

        ...

   

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


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

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

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

Кроме того, чтобы содержимое контента отображалось как надо, т.е. с самого верха страницы, необходимо добавить параметр valign="top" тегу <td> основной таблицы:

 

        ...

 <tr>

   <td colspan="3" width="800" height="366"

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

     <table cellpadding="20" cellspacing="0">

        <tr><td>Добро пожаловать на сайт о сайтах</td></tr>

     </table>

   </td>

 </tr>

        ...

   

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

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

Заключение

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

 

 

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

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

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

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

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

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

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

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



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

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

 

<html>

 

   <head>

 

      <title> Блочная верстка сайта </title>     

      <link rel="stylesheet" type="text/css" rel="nofollow ugc" target="_blank" href="style.css">

 

   </head>

 

   <body>

 

   </body>

 

</html>

    

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

 

<html>

   <head>

      <title> Блочная верстка сайта </title>

      <link rel="stylesheet" type="text/css" rel="nofollow ugc" target="_blank" href="style.css">

   </head>

 

   <body>

       <div id="main">

           <div id="header"></div>

           <div id="menu1"></div>

           <div id="menu2"></div>

           <div id="menu3"></div>

           <div id="reklama">

               <div id="reklama_top"></div>

               <div id="reklama_text"></div>

               <div id="reklama_bottom"></div>

           </div>

           <div id="content"></div>

           <div id="footer"></div>

       </div>

   </body>

 

</html>

    

Теперь с помощью таблицы стилей (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;

}

   

Сейчас наша страница выглядит так. Она прижата к левому краю и имеет отступы сверху и слева. Давайте ее отцентрируем и уберем ненужные отступы. Проблема с отступами решается добавлением свойства margin:0px для body. Центрировать будем так же, как делали это в примере о выравнивании страниц.

 

body{

 width:800px;

 padding-left:50%;

 margin:0px;

}

 

#main{

 width:800px;

 margin-left:-400px;

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

 background-repeat: repeat-y;

}

   

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

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

Получите профессию

Няня

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

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

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

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

 

            <div id="header">

                <div id="headertext1">Льяно-Эстакадо</div>

                <div id="headertext2">насладись вкусом!</div>

            </div>

       

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

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

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

 

#headertext1{

 width:270px;

 float:right;

 font-size:24px;

 font-family:Arial;

 padding-top:30px;

 color: #FFFFFF;

}

#headertext2{

 width:250px;

 float:right;

 clear:right;

 font-size:20px;

 font-family:Arial;

 padding-top:5px;

 color: #FAF46E;

}

       

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

 

            <div id="menu1">

                <div id="textmenu1">

                    <a rel="nofollow ugc" target="_blank" href="#" class="menu">Меню</a> |

                    <a rel="nofollow ugc" target="_blank" href="#" class="menu">Заказ столика</a> |

                    <a rel="nofollow ugc" target="_blank" href="#" class="menu">Отзывы</a>

                </div>

            </div>

            <div id="menu2">

                <div id="textmenu2">

                    <a rel="nofollow ugc" target="_blank" href="#" class="menu">Уголок шеф-повара</a> |

                    <a rel="nofollow ugc" target="_blank" href="#" class="menu">О нас</a>

                </div>

            </div>

            <div id="menu3">

                <div id="textmenu3">

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

                </div>

            </div>

       

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

 

#textmenu1{

 padding-left:270px;

 padding-top:10px;

}

#textmenu2{

 padding-left:300px;

 padding-top:10px;

}

#textmenu3{

 padding-left:250px;

 padding-top:35px;

 font-size:14px;

 color:#FFFFFF;

}

       

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

 

a.menu{

 text-decoration: none;

 color:#000000;

 font-size:15px;

 padding-left:10px;

 padding-right:10px;

}

       

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

 

            <div id="reklama">

                <div id="reklama_top">

                    <div id="textreklamatop">Вы можете прямо сейчас заказать столик в ресторанах:</div>

                </div>

                <div id="reklama_text">

                    <div id="textreklamatext">

                        <a rel="nofollow ugc" target="_blank" href="#" class="reklama"> Баттисетас</a>

                        <a rel="nofollow ugc" target="_blank" href="#" class="reklama"> Бифштекс Чарли Палмера</a>

                        <a rel="nofollow ugc" target="_blank" href="#" class="reklama"> Драфт</a>

                        <a rel="nofollow ugc" target="_blank" href="#" class="reklama"> Лимончелло</a>

                        <a rel="nofollow ugc" target="_blank" href="#" class="reklama"> Мили</a>

                        <a rel="nofollow ugc" target="_blank" href="#" class="reklama"> Эйфелева башня</a>

                        <a rel="nofollow ugc" target="_blank" href="#" class="reklama"> Хьюго</a>

                    </div>

                </div>

                <div id="reklama_bottom"></div>

            </div>

       

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

 

#textreklamatop{

 padding:25px 25px 0px 10px;

 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;

 padding-left:10px;

 padding-right:10px;

}

a.reklama:first-letter{

 color:#02663d;

}

       

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

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

 

#content{

 float:left;

 width:507px;

 padding:15px;

}

#footer{

 clear:both;

 width:800px;

 height:28px;

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

 background-repeat: repeat-x;

 text-align:center;

 padding-top:5px;

}

       

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

 

            <div id="content">

                <img src="images/bludo1.jpg" align="left">

                <a rel="nofollow ugc" target="_blank" href="#">Бельгийская кухня</a><br>

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

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

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

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

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

                <div style="clear:both"></div>

 

                <a rel="nofollow ugc" target="_blank" href="#">Итальянская кухня </a><br>

                <img src="images/bludo2.jpg" align="right">

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

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

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

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

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

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

            </div>

            <div id="footer">

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

            </div>

       

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

 

a{

 color:#000000;

}

       

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

 

body{

 width:800px;

 padding-left:50%;

 margin:0px;

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

 text-align:left;

 font-size:12px;

}

       

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

 

a:hover{

 color:#02663d;

}

       

 

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

Получите профессию

Копирайтер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

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

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

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

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

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

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

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

Графика

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

Элементы 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/’;">

<button title="Страница 23" onclick="location.href='http://starper55plys.ru/';"

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

font-size: 20px;"><img src="images/s20.png"

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

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

Получите профессию

Няня

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Получите профессию

Интернет-маркетолог

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 610 429 материалов в базе

Скачать материал

Другие материалы

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 10.09.2015 2296
    • RAR 288.1 кбайт
    • Оцените материал:
  • Настоящий материал опубликован пользователем Чеканова Елена Амуровна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    Чеканова Елена Амуровна
    Чеканова Елена Амуровна
    • На сайте: 8 лет и 6 месяцев
    • Подписчики: 1
    • Всего просмотров: 12934
    • Всего материалов: 10

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Интернет-маркетолог

Интернет-маркетолог

500/1000 ч.

Подать заявку О курсе

Курс профессиональной переподготовки

Информатика: теория и методика преподавания в образовательной организации

Учитель информатики

300/600 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе
  • Сейчас обучается 485 человек из 71 региона

Курс повышения квалификации

Специфика преподавания информатики в начальных классах с учетом ФГОС НОО

72 ч. — 180 ч.

от 2200 руб. от 1100 руб.
Подать заявку О курсе
  • Сейчас обучается 39 человек из 20 регионов

Курс профессиональной переподготовки

Теория и методика обучения информатике в начальной школе

Учитель информатики в начальной школе

300/600 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе
  • Сейчас обучается 93 человека из 34 регионов

Мини-курс

Психология общения: эффективное общение и решение конфликтов

6 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 224 человека из 55 регионов

Мини-курс

Личностное развитие и отношения

4 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Стратегии и инструменты для эффективного привлечения и удержания клиентов

6 ч.

780 руб. 390 руб.
Подать заявку О курсе