Многостраничный сайт и его оформление
Почти любой веб-сайт состоит из множества страниц. Что их объединяет, что позволяет назвать набор страниц сайтом?
Как правило, страницы сайта:
- объединены тематически;
- имеют единое оформление;
- созданы одним автором или коллективом;
- преследуют одну цель.
Зачем разбивать сайт на несколько страниц?
- Чтобы структурировать, «разложить материал по полочкам»;
- такие сайты легко масштабируются: легко планировать расширение и развитие.
- Создать навигацию;
- Разнообразить оформление.
Каскадные листы стилей (CSS) помогают:
- Создавать единый стиль оформления;
- Разнообразить оформление;
- Создавать гибкую систему навигации.
Когда следует делать одностраничный сайт?
- Когда надо создать сайт-визитку;
- Когда надо создать целевую страницу;
- Когда преследуется одна конкретная цель.
Создание меню сайта
- Меню создаются на основе ненумерованных списков: при помощи тегов ul и li
- Меню бывает вертикальным и горизонтальным: правило li
- Меню бывает одноуровневым и многоуровневым (вложенность списков).
Меню: правило однообразия
У каждой страницы сайта меню должно быть одинаковым: на текущей странице ссылка делается неактивной.
How To Create A Multi Page Website In HTML
One is a single-page website (not to be confused with a SPA) that has all its content in a single HTML web page or an HTML document.
The other type is a website that has multiple pages (multiple HTML documents). Each HTML web page has different content in it. They might or might not share the common stylings, including the header and the footer elements.
Benefits Of Multi-Page Website
A website that has limited content to display to the end users may use the benefits of a single-page website. But there are so many reasons why we see a lot of multi-page websites on the internet.
- A multi-page website segregates content on the website better. Rather than adding all the content for the website on a single page using headings, a multi-page website is able to better manage and showcase content on different pages based on the context.
- A multi-page website offers better user flow and user experience. Users use the top navigation to navigate between web pages of a website. The navigation menu makes it clear that such and such content is at such and such page.
- A multi-page website is search engine friendly. When you have a lot of content that differs in context between them, it’s a great idea to have a multi-page website. Not only users would be able to better understand the contents of the website, but also search engine bots that crawl your website are able to better segregate the contents based on the web pages.
Creating A Multi-Page Website In HTML
Now that we know the benefits of a multi-page website, let’s make a simple one in HTML.
Step 1 — Creating our first HTML page
Open a code editor like Visual Studio Code, Sublime Text or Notepad++. If you don’t have any of the text editors, open a notepad.
Then create a basic HTML structure like the one below (I will provide the source code at the end of the blog)
Save this notepad file in your preferred folder location and save it as index.html
Now, we will change the title and create a header for this web page
Step 2: Creating Two More Web Pages
Similar to how we created the home page, we will create two more web pages. The contact page and the about page. Our folder now looks like this.
Step 3 — Linking Multiple Website Pages Together In HTML
It’s now time to link the multiple pages that we have created on our website.
We will create a navigation menu that will link all of the pages together.
We will first change the code in our index.html page to the below:
And we will copy this nav element to the other pages as well (about.html and contact.html)
Step 4 — Running Our Multi-Page Website
Now, go back to your folder where you have saved all your files.
Right click on the index.html file and open this file with the preferred browser.
Result
This will open your multi-page website in the browser.
Use the navigation on the top to navigate between pages. This is how you can make multi-page websites easily.
Change the content of the web pages to the content that you want to add to your website.
Multi-Page Website In HTML — Source Code
Home Page (index.html)
About Page (about.html)
Contact Page (contact.html)
Recent Posts
Add Items To List C#
A list represents a collection of strongly typed objects. This can be a list of integers, a list of strings, or a list of complex types. A list in C# is an easy way to maintain a collection of similar types and then using the functions that C# provides you can easily iterate on that list if you need to. There will be numerous use cases when you would need to add a new item to a list dynamically. For example, if you have a list of years that are from 2000 to 2020, now it's time to add the next 10 years to that list. You would need to dynamically add items to the list so that you can use them.
How To Play Wordle
What is wordle? A common question that people ask other people or search online when they hear their friends or colleagues talking about it in meetings, chats, online forums, etc. Wordle is an online game that got launched last year in October and since then its popularity has not come down even one bit. Wordle is a game in which the user has to guess a five-letter word in the attempts provided. The simple user interface of the game provides five boxes in which the player has to type characters to form a word.
How To Insert An Image In HTML — [Source Code]
In this modern-day world, a website is nothing without an image. We have seen that websites in the late 90s or early 2000s had more text and less of images. This is not true today, every web page has lots and lots of images that portray their product, their business, or a blog in a much nicer and more descriptive way. Using graphics and infographics, web pages can convey their message in a great way without using too many words. Even in this blog post or other blog posts in this blog, we use a lot of images frequently with text to explain our topic.
Full Screen Overlay Navigation Bar Using HTML, CSS and JAVASCRIPT [Free Source Code]
In this blog post, we are going to create a fancy navigation bar using HTML, CSS, and Javascript. This navigation menu would be not just a regular navbar, but, a full-screen overlay navigation menu. This will be a responsive navigation bar menu that will be responsive for both mobile and desktop displays. It will be really fun to code this and navigation bars like these create an amazing impression of your website in the user's head.
Create A Dropdown List In HTML
Dropdown lists if you have seen them before on other websites are extremely powerful. They provide the user a clear list to select a single option from the list of options that the dropdown menu provides. They provide a good overall user experience. An example of a dropdown list in a general everyday website is the month picker. Using a dropdown list you can give the user to select the month of their birth.
Multi-Page HTML Sites
This will be a simple introduction into building multi-page HTML sites. Eventually once you get the hang of us you can then learn more advanced ways to create multi-page sites later on.
Creating Multiple Pages
A basic HTML site, as created in Intro, is structured something like this:
- A project directory called my-sample-project. It contains:
A README.md file.
An index.html homepage.
A css subdirectory with a custom styles.css stylesheet.
This example site has only one page: index.html. But not all sites are single-page. In fact, many traditional sites offer multiple areas users can navigate between.
Multi-Page Project Structure
So if we want this website to contain multiple pages, in addition to the index.html homepage we want the “About” and “Contact” pages too. So how would we add these pages? by creating two corresponding HTML files:
You will see that the index.html remains in the top-level of the directory, and the additional HTML files are in an html subdirectory. This is because the browser looks for an index.html in the main directory, so it knows what to load first.
Each of the new files will looks similar to HTML files we’ve create before with standard boilerplate <html>, <head>, and <body> tags containing whatever page-specific content we want.
Linking Between Pages
Now that we finally have a “About” and “Contact” pages set up, we need a way to access those other pages from the homepage. Thankfully, we can do this with a simple <a> tag.
To create a link navigating from index.html (homepage) to the contact.html (contact page), for example we use the following code:
This is similar to <a> links created in into, but with a file path internal to our project instead of an external online URL. When clicked, this link will display the contents of our contact.html file.
To add other navigational links to other pages within our project directory like for example the “About” page, we will still follow the same process:
Styling Multi-Page HTML Sites
To style multiple pages in a site, each HTML file needs a stylesheet linked. In a smaller project, we’d create one central stylesheet and it link in the <head> of each HTML document like so:
Index.html file
contact.html file
about.html file
You will notice that the file path to the stylesheet in index.html is different than it is in the other html files, because the index.html resides in the top-level of the directory, and contact.html and about.html resides in an html subdirectory. So their file paths to the stylesheet are preceded with “..” to exit out of the html directory before entering into the css directory.
And of course as projects increase in size, and/if when pages have their own dedicated styles that apply only to them, we can also create a dedicated stylesheet for specific pages, like this:
Here, styles.css would contain universal styles for all pages, whereas about.css and contact.css contain styles applicable only to contact.html and about.html pages, respectively. These dedicated stylesheets could then be linked in relevant HTML files, after the universal stylesheet:
contact.html
about.html
This is just the surface for now, there are other ways of sustainably separating styles in to multiple modular stylesheets. Stay Tuned!!
Как сверстать многостраничный сайт?
Подскажите, пожалуйста, как верстать правильно многостраничные сайты?
Я делала сайты только для себя. Просто для каждой страницы создавала свой HTML файл. И соединяла их путем ссылок в навигации. Как делают профессионалы свои многостраничники? ( 1 вар — в случае просто верстки; 2 вар — при последующем натяжении ее на CMS).
Спасибо за ответы заранее!
- Вопрос задан более трёх лет назад
- 14069 просмотров
- Вконтакте
Вёрстка делится на секции: одна секция — один HTML-файл и затем всё соединяется при помощи склейки на стороне сервера или через AJAX на стороне клиента.
Секции шаблона:
1. HTML (тип документа, язык, схемы): 1 файл
=>1.1. HEAD (CSS,JS,META-тэги): 1 или несколько файлов
=>1.2. BODY (сетка размещения — зависит от типа страницы): 1 или несколько файлов
==>1.2.1. Block1. BlockN (шапка, меню, основной контент, футер, блоки рекламы, блоки новостей и т.д.): кол-во файлов = кол-ву блоков = N
Каждая секция и каждый блок (Block1..BlockN): это HTML-код в отдельном файле.
Потом всё это собирается для каждой страницы как детали конструктора.