Как сделать сайт из нескольких страниц в html

Сайт из 5 страниц

Здравствуйте, помогите пожалуйста создать сайт, буду очень благодарна за любую информацию и помощь.
1)Сайт должен содержать заглавную страницу и 4 подчиненных
1стр -Таблица успеваемости за год (сделала)
2стр-будущая профессия
3стр-Увлечение
4стр-фото из школьной жизни
Больше всего мне нужна заглавная страница, и переход от страницы к странице

ВОТ ЧТО УЖЕ ИМЕЕТСЯ

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85

HTML> head> meta charset="windows-1251"/> title>Успеваемость за год/title> /head> BODY bgcolor=clblue text=black> img src="Новая папка (6)/nlD61X6VPfg.jpg" width="300" height="400" alt="" /> h1> Оценки /h1> table width=600 border=1 > tr align=center> td>Оивт 4 /td> td> Оивт 4/td> /tr> tr> tr align=center> >Алгебра 4/td> td>Алгебра 4/td> /tr> tr> tr align=center> td> Мхк 5/td> td> Мхк 5/td> /tr> tr align=center> td>География 5/td> td>География 5/td> /tr> tr align=center> td>Физика 4/td> td>Физика 4/td> /tr> tr> tr align=center> >Геометрия 4/td> td>Геометрия 4/td> /tr> tr> tr align=center> td> Русский 4/td> td> Русский 4/td> /tr> tr align=center> td>Физкульт 5/td> td>Физкульт 5/td> /tr> tr align=center> td>Ин.яз 5/td> td>Ин.яз 4/td> /tr> tr> tr align=center> >Биология 5 /td> td>Биология 4/td> /tr> tr> tr align=center> td> История 5/td> td> История 5/td> /tr> tr align=center> td>Литература 4/td> td>Литература 4/td> /tr> tr align=center> td>Химия 4/td> td>химия 4/td> /tr> tr> tr align=center> >Общество 5 /td> td>Общество 4/td> /tr> tr> tr align=center> td> ОБЖ 5/td> td> ОБЖ 5/td> /tr> tr align=center> td>Математика 4/td> td>Математика 4/td> /tr> /table> button name="Переход" type="button">/button> Input type="Checkbox" name="box1" value="true" Checked="checked" size="4"/> Input type="button" name="but1" value="1" size="8"/>

Несколько страниц в файле html

Я хочу, чтобы в одном html файле было несколько страниц. Если мы нажимаем на кнопку далее, то преходящим на следующю страницу, но не на следующий файл который содержит эту страницу. Пожалуйста, можете детально описать.

Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков
задан 9 окт 2011 в 7:37
Karlos Derga Karlos Derga
189 3 3 золотых знака 9 9 серебряных знаков 28 28 бронзовых знаков

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

9 окт 2011 в 7:41
Возможно, я не очень разбираюсь в javascript, напишите я попробую.
9 окт 2011 в 7:58

вам нужно текст разбить на страницы или все страницы разные? Разные — в смысле разный дизайн и/или разные менюшки, там, баннеры

9 окт 2011 в 18:46
Все меню и дизайн одинаковые
10 окт 2011 в 16:47

5 ответов 5

Сортировка: Сброс на вариант по умолчанию

Может за вас еще и деньги получить? 🙂 Все просто: делаем несколько блоков-страниц, всем кроме первой присваиваем css-свойство display со значением none , а на ссылки «далее/назад» навешиваем js-обработчик (onclick) , который меняет значение этого элемента с none на block . Тут даже jQuery не нужен, обычный DHTML. Можете начать отсюда: DHTML Tutorial.

Отслеживать
ответ дан 9 окт 2011 в 9:17
neoascetic neoascetic
2,086 10 10 серебряных знаков 12 12 бронзовых знаков

Если я правильно понял вопрос, то подобное уже озвучивалось. Ознакомьтесь.

Отслеживать
ответ дан 9 окт 2011 в 15:14
892 6 6 серебряных знаков 13 13 бронзовых знаков

Ну я так понял, вам нужен чистый html. Почитайте про фреймы. Но вообще не лучшее решение. Я бы сделал на пхп, или с ajax’ом))

Отслеживать
8,657 18 18 золотых знаков 73 73 серебряных знака 181 181 бронзовый знак
ответ дан 9 окт 2011 в 10:15
thedarkelf thedarkelf
199 2 2 золотых знака 9 9 серебряных знаков 23 23 бронзовых знака
А как это сделать?
9 окт 2011 в 11:22
Фреймы лучше оставить на крайний случай. От них Ваш сайт не много выиграет, если вообще выиграет.
9 окт 2011 в 19:04

 
Первая страница
 Содержание страницы 1 
Это первая страница 
Не вторая, не третья 
Это только первая страница! Это начало! 

 
Вперед 
 
Вторая страница
 Содержание страницы 2 
Это вторая страница 
Не первая, не третья 
Это только вторая страница! 

 
Назад  Вперед 
 
Третья страница
 Содержание страницы 3 
Это последняя страница 
Не первая, не вторая 
Это конец! 

 
Назад 
 

Отслеживать
ответ дан 10 окт 2011 в 0:02
1 1 1 бронзовый знак
Спасибо, это, то, что нужно
10 окт 2011 в 16:31

1. Можно воспользоваться методом jQuery .load() , чтобы при нажатии на кнопку в определённый раздел подгружалась нужная страница. почитайте вот тут.
2. Второй путь немного сумасброднее и сложнее для понимания: пишет большую страницу, на которой часть разделов изначально скрыто. в качестве шаблона, например . в этом шаблоне будет находится содержимое другой страницы. при щелчке по кнопке копируем это содержимое и вставляем в «главной» страницы.

Например вот так:

var templateСontent = $('#template').children().clone(); $('body').empty().append(templateСontent); // или $('body').replaceWith(templateContent);         
Новое содержимое страницы
 
 
Содержимое страницы
 
 Обновить содержимое   

Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков
ответ дан 9 окт 2011 в 7:52
2,286 15 15 серебряных знаков 17 17 бронзовых знаков
Мне надо html, а jQuery мне на данный момент не надо, можете пожалуйста по подробней про 2 способ
9 окт 2011 в 8:00

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

Сайт с несколькими страницами

Как создать сайт с несколькими html страницами через блокнот? (Да, именно через блокнот! Не через различные программы, а именно через блокнот!)
Отдельно создать страничку получается. Но чтоб в на одном сайте несколько страниц.

Лучший ответ

Не особо понятен смысл вопроса, но как я понял нужен сайт из двух страниц.
Создаешь две страницы, например index1.html и index2.html с любым наполнением
На первой страницы index1.html ставишь ссылку на вторйю index2.html и наоборот
[ссылка заблокирована по решению администрации проекта]
Оба файла должны «лежать» рядом в одной папки например.

Остальные ответы

Сохрани первую страничку «Сохранить как» под другим именем. С первой страницы поставь ссылку на вторую. Как сделать гиперссылку спроси в поисковике.

Быстрее все-таки прогами пользоваться

Сборка веб-страницы из частей. Включение кода HTML одного файла в другой

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

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

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

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

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

В этом уроке мы рассмотрим два способа включения содержимого одного файла в другой: с помощью JavaScript и PHP. Первый способ удобен тем, что не требует установки веб-сервера на локальном компьютере. Второй – более профессиональный и общепринятый подход.

Пусть мы хотим вынести одинаковые на всех страницах сайта навигационные ссылки в отдельный файл.

Создадим файл menu.js и поместим туда ссылки, убрав их из файлов *.html.

Поскольку мы будем включать в веб-документы скрипт JS, то и содержимое menu.js должно быть написано не на языке HTML, а на JavaScript.

В JS есть метод write , который выводит на странице переданный в него текст. Поэтому содержимое файла menu.js может выглядеть так:

document.write('\ Водоросли\ Лишайники\ Моховидные\ ');

Или так, если использовать свойство innerHTML (этот способ может быть предпочтительным):

document.getElementById("sidebar").innerHTML = '\ Водоросли\ Лишайники\ Моховидные'

Обратный слэш используется для экранирования перехода на новую строку (для интерпретатора JS разрыв строки перестает существовать).

В файлах *.html в места, откуда мы убрали ссылки, добавляем наш скрипт:

nav id="sidebar"> script src="menu.js">/script> /nav>

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

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

script type="text/javascript"> document.querySelector( 'a[href="lichen.html"]' ).style.background="White"; script>

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

Если мы посмотрим на исходный код веб-документа в браузере ( Ctrl + U ), то не увидим здесь ссылок.

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

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

К сожалению, чтобы увидеть как работают включения PHP в код HTML, нужен веб-сервер с интерпретатором PHP. Данное ПО можно установить на локальный компьютер, однако в данном курсе мы не будем этого делать. Для этого потребовался бы отдельный урок, в то время как острой необходимости в локальном сервере у нас нет.

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

Однако то, как с помощью PHP собрать веб-страницу из частей, рассмотрим в этом уроке.

Обычно веб-серверы по-умолчанию настроены так, что файлы с расширением *.php обрабатываются интерпретатором PHP, а файлы *.html – нет. Поэтому первое, что мы сделаем – поменяем расширения веб-страниц. Например, было: algae.html, lichen.html, moss.html. Стало: algae.php, lichen.php, moss.php.

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

Также здесь отметим важный момент с точки зрения продвижения сайта. Адреса https://ваш-домен.зона/algae.html и https://ваш-домен.зона/algae.php разные. Если вы вдруг решите поменять расширения файлов у проиндексированного сайта, то поисковые системы решат, что старые страницы исчезли, появились какие-то новые. Конечно, можно настроить так называемые редиректы. Однако лучше продумывать адресацию на сайте заранее.

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

RewriteEngine On RewriteCond % !-d RewriteCond %\.php -f RewriteRule ^(.*)$ $1.php

В таком случае веб-страница будет выглядеть как https://ваш-домен.зона/algae. Изменив имена файлов, необходимо изменить адреса в ссылках меню. Пусть они хранятся в файле menu.html. Так как это включаемый файл без кода на PHP, то и расширение можем оставить соответствующее содержимому.

a href="algae">Водоросли/a> a href="lichen">Лишайники/a> a href="moss">Моховидные/a>

В файлах веб-страниц php-включение будет выглядеть так:

nav id="sidebar"> "menu.html"; ?> /nav>

Команда языка PHP здесь include «menu.html» . Она приказывает вставить в документ содержимое указанного файла. Предваряющая ее последовательность символов в конце говорят, что этот код закончился.

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

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

X Скрыть Наверх

Введение в веб-разработку и создание сайтов