Создаем каркас и фон для страницы сайта.
На предыдущем уроке мы с Вами подключили каскадную таблицу стилей CSS в dreamweaver. Теперь мы будем работать уже непосредственно с сайтом. Мы создадим каркас и фон для страницы сайта.
Что значит создать каркас сайта.
Это значит что нам перед тем как создавать сайт, нужно сделать его разметку. То есть по сути Вам нужно представить Ваш сайт так как Вы его хотите видеть в интернете в браузере. Поэтому прежде чем создавать любой сайт нужно сначала представить мысленно, а лучше на чистом листе бумаги нарисовать то что Вы хотите видеть при просмотре своего сайта.
По сути каркас сайта создают для того чтобы представить видимые и невидимые границы определенных участков сайта. Это как бы полочки для контента на сайте. Которые позволяют разделить один контент от другого.
После разметки Ваш сайт будет выглядеть привлекательным и понятным, но без нее сайт будет как одна перемешанная каша. Поэтому мы с Вами и создадим каркас будущего сайта.
После того как каркас сайта будет сделан мы сделаем еще одну вещь-создадим фон для страницы сайта. Фон-это изображение или цвет страницы которые будут видны за нашим сайтом. То есть это то что будет отображаться за пределами парного тега <body> </body>.
Фон может быть в виде любой картинки, но важно чтобы картинка имела малый вес. Так как при большом весе картинки Ваш сайт будет загружаться очень долго, что само собой приведет к потере посещаемости Вашего сайта.
Так же можно вместо картинки задать любой цвет фона. Благо цветов сейчас большое количество.
Но можно обойтись и без фона. Для это Вам достаточно указать в размере каркаса для страницы сайта ширину 100%. Соответственно фон не будет виден, что дает повод не создавать фон сайта.
Из всего выше сказанного следует.
Любой сайт можно создавать либо с фоном либо без фона, но каркас создавать для страницы сайта нужно в обязательном порядке, если Вы не хотите создавать безобразные сайты. Решать остается только Вам. Я же покажу Вам на примере и то и другое, чтобы Вы поняли как соединить эти два элемента на своем сайте в единое целое.
Создаем каркас сайта.
Я буду делать каркас для сайта таким каким я хочу его видеть в браузере. Вы же можете сделать каркас по своему подобию и вкусу.
Перед Вами главная страница сайта которую Вы создали и сохранили в dreamweaver. Перейдите во вкладку дизайн и повторяйте все действия за мной.
Откройте в панели инструментов вкладку «Общий» и нажмите на значок таблица.
Узнать как называется каждая иконка в dreamweaver, можно просто при наведении на нее курсором мыши. В данном случаи иконка с таблицей в dreamweaver находиться слева, пятая по счету.
После того как Вы нажали на значок Таблица у Вас появиться вот такое окно. (Сделайте все так ка показано на изображении).
После того как Вы все сделали, у Вас должна появиться вот такая табличка.
| ШАПКА САЙТА |
| СТРОКА МЕНЮ |
| ОСНОВНОЙ КОНТЕНТ |
( Разные цвета в этой таблице я сделал для того чтобы разделить и показать Вам то что будет находиться в этой таблице и в каком порядке).
Можно с этой таблицей экспериментировать. Например, вместо горизонтального меню можно взять вертикальное меню, как с двух боков так и с одного-справа либо слева. Так же можно сделать сайт и без шапки. Можно добавлять еще строки и столбцы. Моя цель показать Вам простой, примитивный сайт. После того как Вы научитесь делать такие сайты, другие более сложные Вам будут даваться намного легче.
Мой сайт как Вы можете заметить сделан по этому образцу, с добавкой лишней строки внизу. Меня данный шаблон вполне устраивает.
Шапку делают в двух случаях.
Сделать сайт красочней и акцентировать внимание посетителей на Вашем сайте.
Дать понять посетителю то, о чем данный сайт.
Шапка сайта привлекает больше людей, которые в конечном итоге будут посещать данный сайт не один раз. Это правило работает лишь в тех случаях когда шапка сайта сделана красиво и со вкусом.
В другом же не удачном случае безобразная шапка может даже навредить Вашему сайту. Поэтому старайтесь сделать Вашу шапку для своего сайта привлекательной и интрегующей, чтобы посетителям было приятно смотреть на Ваш сайт.
По сути шапка это то что первое видит Ваш посетитель сайта и от много зависит какое первое впечатление произведет Ваш сайт на них. Запомните этот не маловажный фактор.
Далее идет участок таблицы в котором Вы делаете свое меню для сайта. Меню мы с Вами сделаем позже.
Далее идет в основная часть таблицы с контентом, а именно; текст, музыку, видео, фото и т.д… Этот участок таблицы сайта, тоесть его контент будет менятся для каждой страницы. Одинаковый текст для всех поисковых систем не допустим.
Каркас мы сделали и теперь приступаем к созданию фона для страницы сайта.
Создаем фон для страницы сайта.
Теперь настала пора сделать фон для страницы сайта. Для этого нам понадобиться каскадная таблица, которую Вы создали в предыдущем уроке. Для этого Вам нужно зайти в уже знакомую вкладку «Файлы» с права программы и там дважды нажать на файл style.css. После этого файл откроется в программе на всю область. Вы должны увидеть пустую страницу с названием данного файла. В этот файл мы будем писать наш код для сайта. Здесь Вы вставьте следующий код выделенный красным цветом. Далее я обьясню что означает каждый код и для чего он нужен.
1. table { border: 1px solid #CCCCCC;
}
2. body { background-image: url (название папки с изображением/название файла изображения.формат картинки);
}
либо:
3. body { background: # любой цвет фона, например: 000;
}
Первая строчка назначает цвет и толщину рамки.
Вторая строчка назначает сайту фоновое изображение в виде рисунка.
Третья строчка назначает сайту фоновое изображение в виде назначения цвета.
По сути без этого всего кода можна обойтись. Но, повторюсь, этот код прибавит Вашему сайту красоты и удобства для посетителя, который ценит красивые, удобные и качественные сайты. Эти все составляющие прибавят Вашему сайту больше внимания со стороны посетителей, которые в дальнейшем могут посетить Ваш сай еще не один раз.
Эта таблица самая примитивная которую я Вам показал. Есть таблицы намного сложней по конструкции, которые для оформления будут требовать больше кода, больше времени, больше фантазии, больше знаний.
Но это будет уже не начальный уровень, который я в данном сайте не рассматриваю.
Надеюсь данный урок будет Вам полезен при создании Вашего сайта. Применяйте свой каркас и фон для страницы сайта на Ваше усмотрение.
Тренируйтесь, и у Вас все получиться!
На следующем уроке мы с Вами создадим шапку для сайта.