业余爱好者如何通过使用模板快速建站6(How do amateurs build their own websites with a template part-6)
2016-11-22 10:07
513 查看
Tutorial: Building your first website using a free website template (part 6)
Post 221 of 262November 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 and
part 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 of
part 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):
![](http://andreasviklund.com/wp-content/uploads/2010/11/template-tutorial-folder-structure-after-part-5.png)
Currently, the index.html file in my modified template looks like this when viewed in the browser:
![](http://andreasviklund.com/wp-content/uploads/2010/11/screenshot-template-tutorial-after-part5.jpg)
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 relativelinks. 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:
?
?
?
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:?
“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 text
bold) 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 textfor 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:
?
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:
?
?
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:?
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 andsearch 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!
相关文章推荐
- 业余爱好者如何通过使用模板快速建站5(How do amateurs build their own websites with a template part-5)
- 业余爱好者如何通过使用模板快速建站3(How do amateurs build their own websites with a template part-3)
- 业余爱好者如何通过使用模板快速建站4(How do amateurs build their own websites with a template part-4)
- 业余爱好者如何通过使用模板快速建站2(How do amateurs build their own websites with a template part-2)
- 业余爱好者如何通过使用模板快速建站1(How do amateurs build their own websites with a template part-1)
- 如何使用th:each属性迭代模板-原标题:How To Use th:each For Iteration In Thymeleaf Template?
- 《Machine Learning is Fun Part 6: How to do Speech Recognition with Deep Learning》译文
- 如何在MMIT上使用WMLScript文件(How To Use WMLScript Files With MMIT)
- [备用]权限设计方案、如何使用session、MVC如何使用模板、DropdownList、怎么添加Bootstrape框架、使用ASP.NET MVC 4 Bootstrap Layout Template(VS2012)
- Mac如何通过Xcode安装GCC编译器 How to install gcc on mac with xcode
- How to disable SSL certificate checking with Spring RestTemplate?(使用resttemplate访问https时禁用证书检查)
- DIY BROADCAST : How to build your own Internet TV Channel with Open-Source & other goodies
- [android插件篇]如何快速通过json构建javabean对象(GsonFormat使用教程)
- [转]how to sign an assembly with a strong name & how to create a pair key怎样通过强名给程序集签名以及如何创建钥匙对?
- A robot with a view—how drones and machines can navigate on their own [video]
- 如何通过View::first使用Laravel Blade的动态模板详解
- How Do I Use the Windows System Restore Utility?——如何使用window 系统还原工具?
- 如何在ActionScript 3.0里使用工厂模式和模板方法模式(Factory and Template Method Patterns)
- python如何直接在命令行使用系统模板template
- 如何用th:attr标签在thymeleaf模板中设置属性-原标题:How To Set Attributes in Thymeleaf Template using th:attr?