业余爱好者如何通过使用模板快速建站6（How do amateurs build their own websites with a template part-6)

来源：互联网发布：壁虎老师java百度云编辑：程序博客网时间：2024/05/16 14:10

Tutorial: Building your first website using a free website template (part 6)

Post 221 of 262

November 22, 2010Andreas ViklundLearn48 comments

This is part 6 in a series of blog posts that explains how to use a free website template to build and publish a complete website.Read part 1 for an introduction to the tutorial, part 2 that describes how to download and unpack a template and finding an editor for your operating system,part 3 that explains how to get started with editing index.html, part 4 that explains the anatomy of the HTML element, attributes and how to replace and resize the header image andpart 5 that explains the <head> section of the HTML, meta tags and how to edit the main content.

This is the last part of this tutorial, so now it is time to wrap up the project and get the website ready for the web. If you have read and followed the instructions in the previous parts, you should now have an index.html file where only two things from the original sample content in the Variant Duo template remains: The navigation menu and the footer. In the end ofpart 5, I suggested that you make copies of index.html and rename them into something else, for example about.html. After creating about.html, you could edit the main content of that file to create a second page for your website. This process can be repeated to create as many pages as you want your site to have. There is no limit to the number of pages you can have. However, the visual design of the navigation menu in the Variant Duo template limits the number of pages you can place in the main menu so if you want to have more than 7-8 pages you may need to modify the menu design or place some links inside the main content rather than in the navigation menu.

For this final part I will keep it simple and use only three pages. I have created two copies of index.html and renamed them into about.html and links.html. I have also edited their main content, so the current file structure of the template/website folder looks like this (click the screenshot to download the template with my modifications up until this point):

Folder structure after part 5 of the tutorial

Currently, the index.html file in my modified template looks like this when viewed in the browser:

Screenshot of index.html as it looks after part 5 of the tutorial

How to create links to other pages or websites

The texts in the content that have a different color than the main text are links. I mentioned the <a> tag in an earlier part (“a” for “anchor”) where the <h1> element included a link to the index.html file, and I have also written about absolute and relative links. But I have not written anything about linking to other pages on your site or to other websites so here is a quick explainer:

A link is created using the <a> tag with a href attribute. The value of the href attribute is the location of the page or website that you want to link to. The content of the anchor element (which can be either text or an image) will be the actual link when viewed in the web browser. For links to pages within your own website you can (and most often, should) use relative links, like this:

?
<ahref="about.html">About me</a>

For links to other websites you need to provide an absolute URL path, like this:

?
<ahref="http://andreasviklund.com/templates/">Andreas' free website templates</a>

To create an image link, you place the <img> tag as the content between the opening <a> tag and the closing </a>, like this:

?
<ahref="puppies.html"><imgsrc="images/puppies.jpg"alt="Go to my page about puppies"/></a>

The structure of the navigation menu

When you know how to create links to other pages, it suddenly becomes very easy to create the navigation menu for your website. In the Variant Duo, the code for the sample navigation menu looks like this:

?
<divid="menu">
    <pclass="menulinks">
    <strongclass="hide">Main menu:</strong>
    <aclass="menulink active"href="index.html">Home</a><spanclass="hide"> | </span>
    <aclass="menulink"href="index.html">Page 2</a><spanclass="hide"> | </span>
    <aclass="menulink"href="index.html">Page 3</a><spanclass="hide"> | </span>
    <aclass="menulink"href="index.html">Page 4</a><spanclass="hide"> | </span>
    <aclass="menulink"href="index.html">Page 5</a>
    </p>
</div>

Most tags used in this code should be familiar to you at this point. There is a div that gives the code section the id=”menu”, which is used in the CSS (as #menu) to position the menu in the layout. Then there is an ordinary paragraph with the class attribute “menulinks” which contains the links. The class makes the paragraph right-aligned. Each link includes the class=”menulink” and one of the links also has a second class named “active”. More about that soon.

The two new tags which I have not mentioned in previous parts of the tutorial are the <strong> tag (which makes textbold) and the <span> tag (which defines a text span that can be given a class attribute for adjusting the visual presentation using CSS. Both those two tags are used with a class named “hide”, which responds to the line starting with “.hide” in the CSS file. The class=”hide” is used to tell the web browser that the element should not be visible in the design, so the text “Main menu:” can not be seen anywhere when you view the page in a regular web browser. It is, however, visible in web browsers that do not support (or do not use) CSS, so a website visitor who uses a screen reader will be able to hear that the links represent the main menu of the site. The pipe character (“|”) creates a visual separation between the links in browsers that do not support CSS – a feature that is not really needed but which makes the menu look better in text-based browsers.

Creating the navigation menu for your website

Now that I have my three .html pages ready, I want to create a menu for those three pages. To do this, I edit the code above so that there are only three links, each with a href attribute that responds to a .html file in the website folder – and a link text for each menu option. Since I have three .html documents, this needs to be done in all three files, but I will start with index.html since it will be the first link in the navigation menu. I have decided to use “Welcome!” as the link text for the frontpage (index.html), “About me” as the link text for the second menu option (about.html) and “Links” as the text for the third menu option (links.html).

The new code will look like this:

?
<divid="menu">
    <pclass="menulinks">
    <strongclass="hide">Main menu:</strong>
    <aclass="menulink active"href="index.html">Welcome!</a><spanclass="hide"> | </span>
    <aclass="menulink"href="about.html">About me</a><spanclass="hide"> | </span>
    <aclass="menulink"href="links.html">Links</a>
    </p>
</div>

When the updated code is saved, the navigation menu of index.html is done! Copy the edited code and open about.html in the code editor and replace the sample menu code with the updated code, and then do the same for links.html. Then open index.html in the web browser to see what it looks like. You should now be able to use the navigation menu to navigate between the three different pages. But there is one more thing to do…

On all three pages, the “Welcome!” menu link is highlighted. But we want the “About me” option to be highlighted when about.html is viewed, and the “Links” option to be highlighted when links.html is viewed – so a small change needs to be done to the anchor element classes. In about.html, the class “active” needs to be moved from the first link to the second. And in links.html, the same class needs to be moved to the third link. The final menu code for about.html should look like this:

?
<divid="menu">
    <pclass="menulinks">
    <strongclass="hide">Main menu:</strong>
    <aclass="menulink"href="index.html">Welcome!</a><spanclass="hide"> | </span>
    <aclass="menulink active"href="about.html">About me</a><spanclass="hide"> | </span>
    <aclass="menulink"href="links.html">Links</a>
    </p>
</div>

…and in links.html it should look like this:

?
<divid="menu">
    <pclass="menulinks">
    <strongclass="hide">Main menu:</strong>
    <aclass="menulink"href="index.html">Welcome!</a><spanclass="hide"> | </span>
    <aclass="menulink"href="about.html">About me</a><spanclass="hide"> | </span>
    <aclass="menulink active"href="links.html">Links</a>
    </p>
</div>

Save about.html and links.html once these changes are made, and open index.html in the web browser again – and the highlighting of the page that you currently view should now work. This feature is created by using two classes at once for the currently active menu link: The first class (.menulink in the CSS file) which defines what the menu link looks like, and a second class (.active in the CSS) that defines how the highlighted menu link looks like.

The footer of the website

With the navigation menu in place, the website template has now been expanded into a complete website. There is only one area of the design left to edit and that is the footer of the site. The code for it currently looks like this:

?
<pclass="footer">Copyright &copy; 2010 <ahref="index.html">Your Name</a><br/>
Template design by <ahref="http://andreasviklund.com/">Andreas Viklund</a></p>

This is another paragraph, this time with a class named “footer” that is used in the CSS to define the position and style of the text. Change “Your Name” into either your own name, the name of your company or the title of the site. The text “Template design by Andreas Viklund” with the link to this website can be removed if you want to, but I kindly ask you to leave it since it helps others find my templates. Keeping the link is also a great way of saying “thanks!” and giving me credit for my work.

Once again, the footer of all pages on your site needs to be edited so you need to repeat this step for each .html file. But unlike the navigation menu, you can simply copy and paste the same code on all pages. With the footer in place, you have built your first website using a free website template and the site is now ready to be published on the web!

To see what my template-based website looks like in its final form, click the screenshot below:

You can also see the website live on http://andreasviklund.com/files/tutorial/.

Finding a web host for your site and publishing the site on the web

Finding a good domain name and a web host that fits your needs is something I will write more about in a future post. I will also explain how to upload a template-based website to your web host, as well as writing more about topics like web standards and search engine optimization that I have mentioned in this tutorial.

If you don’t want to wait for that post, I can recommend the hosting company where andreasviklund.com is hosted:Svenska Domäner. They offer a great and reliable service with top-quality support, and if you need help with anything related to publishing a website based on one of my templates on Svenska Domäner I would be happy to help you out.

Moving on to the next step…

In this tutorial I have only touched the surface regarding CSS and how the HTML code is connected to the CSS using classes and id:s. My original idea was to include a couple of posts specifically about the variant-duo.css file as well as using theLearn CSS template to explain how to create and modify layouts, but I realized that it would be better to let this first tutorial focus on the basics of HTML and providing a simple way into the world of web design. A significant part of the feedback I have got from those who have followed the tutorial from the start have agreed with that. Learning CSS will be the topic of future posts and tutorials, both on a beginner level and for more experienced site builders.

So if you have found this tutorial useful I recommend you to subscribe to the andreasviklund.com RSS feed, follow @andreasviklund.com on Twitter or join the andreasviklund.com page on Facebook. If you have used this tutorial to build an own site based on the Variant Duo template and you have already published it on the web, feel free to post the link in a comment to this post.

Thanks for for reading, see you soon again!

0 0