Original:http://www.zisman.ca/practice


Бизнес-как, не так ли?





Практика создания веб-страниц

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

Чтобы работать над этой веб-страницей, у вас должен быть набор графических файлов, в том числе:

  • baseball.gif
  • books.gif
  • computer.gif
  • lunch.gif
  • music.gif
  • pumpkin.gif
  • paper.jpg
  • skeleton.jpg
  • Если у вас их нет, вы можете загрузить их как сжатые файлы для ПК или Mac , нажав на ссылки... затем дважды щелкнув загруженные файлы, чтобы скопировать их в выбранное вами местоположение.

    Эта практика предназначена для использования с Netscape Composer'ом-части набора программ Netscape Communicator для программ на ПК или Mac. С небольшими изменениями оно может использоваться с более старым Netscape Gold, с Microsoft FrontPad или с другими графическими программами для веб-дизайна. (FrontPage, DreamWeaver, PageMill и т. Д.). ( Обновление 2013 - вы можете предпочесть более современную версию, Kompozer'а, доступную для Windows, Mac OS X, Linux и т. Д. - использование этого должно быть похожbv на эти более старые инструкции)
     
  • Откройте Netscape Composer (или запустите Netscape Navigator, щелкните меню Communicator и выберите Composer). Вы должны смотреть на пустой экран.
  • Ознакомьтесь с панелью инструментов Composer - мы будем использовать следующие элементы:

  • Панель инструментов композитора

    1. Предварительный просмотр в браузере
    2. Создайте или отредактируйте ссылку
    3. Вставьте графику
    4. Вставьте горизонтальную линию
    5. Создать таблицу
    6. Выберите стиль абзаца
    7. Полужирный текст
    8. Курсивный текст
    9. Увеличить отступ
    10. Выравнивание
  • Нажмите «Формат», затем «Цвета страниц» и «Свойства». Убедитесь, что вы просматриваете вкладку «Общие» и заполняете информацию для «Название», «Автор» и «Ключевые слова». Нажмите «ОК» и проверьте строку заголовка над окном, чтобы увидеть, что там появился ваш заголовок.
  • Сохраните файл, как Index.htm Обратите внимание, что имена index.htm и index.html имеют волшебные свойства на большинстве веб-серверов. Узнайте свое волшебное имя и обратите внимание, что в некоторых случаях важна капитализация. Также - НИКОГДА не сохраняйте веб-файлы или графические пространства в именах файлов. 'Mylongname.htm' в порядке, как и 'My_long_name.htm', но не 'my long namee.htm'. Хотя Composer будет сохранять файл таким образом, когда вы загружаете его на свой сервер, вы не сможете получить доступ к странице через Интернет.
  • Вернитесь в меню «Формат и страницы цветов» и «Свойства» и перейдите на вкладку «Цвета и фон». Хотя вы можете использовать это, чтобы изменить цвет фона (и текста), сопротивляйтесь искушению. Выберите параметр [] Использовать изображение, нажмите кнопку «Выбрать файл» и перейдите к образцам. Выберите файл paper.jpg . Нажмите «ОК». Как выглядит ваша страница?
  • Обратите внимание, что ваш текстовый курсор находится на левом краю страницы... если вы наберете, будет трудно прочитать текст поверх спиральных колец фоновой графики. Нажмите кнопку «Увеличить отступ» (# 9), чтобы отпечатать весь текст. Повторяйте по мере необходимости. (Это хорошая идея даже для страниц без фоновой графики - они выглядят более профессиональными, если текст не подходит к краю экрана).
  • В поле «Стиль абзаца» (№6) щелкните стрелку вниз и выберите «Заголовок . Используйте инструмент «Выравнивание» ( # 10 ), чтобы выровнять по центру курсор. (Нажмите стрелку вниз, затем выберите средний вариант).
  • Введите заголовок для вашей школьной веб-страницы, такой как Домашняя страница YourSchool. Нажмите Ввод.
  • Обратите внимание, что ваш стиль вернулся к Normal. Не поддавайтесь искушению установить шрифт и размер, как в текстовом процессоре - результаты будут выглядеть по-разному на разных компьютерах. Вместо этого ограничьте себя заданными стилями.
  • Нажмите инструмент « Таблица» (# 5) . Используйте его для создания таблицы с четырьмя столбцами и тремя строками. Посмотрите, где он теперь установлен на ширину 100% окна ... щелкните по стрелкам рядом со знаком% и измените это на пиксели и измените значение на 600. Удалите галочку из параметра « Равные равные столбцы» . Нажмите «ОК» или «ВСТАВЬТЕ».
  • Щелкните в ячейке таблицы с верхним левым столбцом, затем щелкните инструмент «Изображение». Нажмите файл «Выбрать файл». Нажмите «Открыть», а затем «ОК», чтобы импортировать это изображение на свою страницу. Повторите для других ячеек по левому столбцу, импортируя файлы baseball.gif, computer.gif. Добавьте lunch.gif , music.gif и pumpkin.gif в три ячейки в третьей колонке. И перейдите к образцам. Нажать на
  • В верхней ячейке второго столбца напишите предложение или две о вашей школьной библиотеке. Во второй ячейке напишите о школьных видах спорта, в-третьих, о технологии в вашей школе. В правой колонке напишите о питании, музыкальных и художественных программах, а также о письменности и искусстве студентов.
  • Нажмите на изображение книги, затем на инструменте « Ссылка» (№ 2) ... введите следующий фиктивный веб-адрес для ссылки: http://myschool.vsb.bc.ca/library и нажмите «ОК» (или введите реальный адрес своего выбор!). Сохранить и просмотреть в браузере (# 1). Вы увидите синюю рамку вокруг картины. Вернитесь к композитору.
  • Выделите слово или две в ячейке, описывающей библиотеку, и нажмите инструмент « Ссылка » и введите тот же адрес. Нажмите «ОК». Обратите внимание, что текст теперь подчеркивается. Вот почему вы никогда не должны использовать подчеркнутый текст при разработке веб-страницы - они будут ошибочно приняты за ссылку. Обратите внимание, что ссылки не работают, когда вы находитесь в Composer ... вам нужно будет открыть свою страницу в браузере, чтобы проверить их. Сопротивляйтесь соблазну оставить http: // при написании ссылки - они не будут работать, если вы возьмете ленивый выход!
  • Повторите в других ячейках, добавив ссылки на графику и слово или два текста для каждой школьной деятельности. Сохраните файл.
  • Нажмите кнопку « Предварительный просмотр », чтобы снова загрузить сохраненную страницу в ваш браузер. Если вы делаете это по-настоящему, вы можете протестировать свои ссылки. (Так как вы не использовали настоящие ссылки, не беспокойтесь сейчас!) Как выглядит ваша страница? Вернитесь к композитору.
  • Вам не нравится граница вокруг ячеек таблицы. Щелкните правой кнопкой мыши в любом месте таблицы (пользователи Mac, нажмите и удерживайте кнопку мыши). Появится меню. Выберите Свойства таблицы . Перейдите на вкладку « Таблица » и снимите галочку рядом с шириной линии границы . Нажмите «ОК».
  • Вам не нравится, как текст плавает в середине ячеек ... поэтому щелкните правой кнопкой мыши в одной из правых ячеек и снова перейдите в диалоговое окно «Свойства таблицы ». На этот раз перейдите к строке Вертикальное выравнивание к вершине . Нажмите «ОК». Это выглядит лучше? Нет? Установите его обратно. И установите
  • Нажмите под столом. Нажмите на инструмент H. Line (# 4), чтобы вставить горизонтальную линию.
  • Нажмите на инструмент Italic (# 8) и введите (под горизонтальной линией) слова:
  • Создана веб-страница (ваше имя) . Выделите свое имя и сделайте ссылку по электронной почте, нажав на ссылку . В поле ссылки введите:

  • Mailto: yourname@youraddress.com ( используйте реальный или фиктивный адрес электронной почты).
  • Сохраните файл. Вы сделали! Обратите внимание: если вы сохранили место, отличное от того, где были установлены ваши графические изображения, графические файлы, которые вы использовали, были автоматически скопированы в новое место.
  • Ваша страница должна выглядеть примерно так:

    Пример веб-страницы практики из этих инструкций

    Вы можете увидеть его в полном размере здесь:


    Создание и обслуживание веб-страниц:
    Прежде чем начать - введение
    Использование Netscape Composer для создания веб-страниц
    Создание веб-страницы Практическая практика
    Использование Netscape Gold для создания веб-страниц
    Добавление звуков и музыки на новые веб-страницы !
    Использование WS_FTP для загрузки и обслуживания ваших веб-страниц
    Создание веб-анимации с помощью бесплатных инструментов !
    Трюки торговли: Extend Composer с ручным кодированием new!





    Алан Зисман является преподавателем, писателем и специалистом в Ванкувере. Его можно найти на E-mail Alan