Beginner's guide to building a website ⑦: It's so easy to make a beautiful website

I once promised that I would keep writing until people who have never built a website before can read my posts on how to build a website for beginners and be able to build one independently. Every word a man says is powerful and resounding, so even if no one reads it, I will finish writing it. Okay, now let’s start today’s content:

We all know that a website is actually made up of many web page files, which are linked to each other; and a web page file is made up of many different codes, including text color codes, link codes, image insertion codes, animation codes, etc.; it is because of these codes that pictures, links, animations, etc. are called on the web page files, so a web page looks beautiful and powerful. To create a beautiful and even powerful web page from scratch by one person alone, many things need to be involved, such as interface design, basic architecture, etc.

But even without these skills, you can still start making a beautiful website. Just like when I was in school and didn’t know how to write an essay, my Chinese teacher always said, “If you don’t know how to write, just read more and imitate others.” The same goes for building a website. Since you can’t completely design it yourself, just start by copying someone else’s website. While copying other people's websites, they also familiarize themselves with and learn basic HTML codes. This is how experts become pros by constantly "copying". What I mean by copycat here is actually an imitation website. You should know that a well-made imitation website can also make money. Now there are many people who need imitation websites on many CMS official websites. The so-called imitation website is to save a website style you like, then modify the content, and finally publish it to your own space, so that you can build a website with the same interface as that website. Today I'm going to demonstrate to you the website of our Alimama moderator Baoway: http://www.tb-so.cn/. The reason why I use this website for demonstration is that it has only one homepage, so the workload is relatively small, and it can be directly used to make a website after copying it. At the same time, the content of this website is relatively small and not very complicated, so it is very simple for novices to get started.

Step 1: Save the other party’s web page

First, we go to his website. Because we want to make a website exactly like his, so first we save his page on our own computer. The steps are: click "File" and "Save As" on the IE browser, as shown below:

Then select the folder you want to save to in the pop-up dialog box, select "Web Page, All (*htm, *html)" in the Save as type, and then click "Save". In this way, all the content on this webpage can be saved to our own computer, including pictures and some JS files. As shown in the following figure:

After saving, you will find a web page file and a folder where it is saved:

At the same time, you can now double-click to open this web page file with the browser. When you browse it on the IE browser, you will find that the style is a little different from that on his website. Don’t worry, if you look carefully you will find that only some background images are missing. This is because these images are called in the CSS file, so there is no way to directly download and save them locally; and some images that can be displayed are directly inserted into the web page with code, so they can be saved directly.

The second step is to modify the path of related files

Now open that folder and you will find images, CSS files, JS files, etc. Among them, tongji.js and tongji.gif are the statistical code files on his website. They are useless to us and can be deleted directly. The rest are all useful. There are also two CSS files, the file names are "style.css" and "css.css" (What is CSS? If you don’t know, please click to learn). The remaining background images that are not displayed in the web page files are in these CSS files. When we open these two CSS files, we can see the paths of the background images in the code inside, and then we can save them.

For example, open the style.css file, there is a code called "BACKGROUND: url(seach.gif)", which means the background image is seach.gif. But this is just a relative path (What is a relative path? Click to browse), so we still need to find the absolute address of the image by looking at the path of the CSS file. Open the homepage of http://www.tb-so.cn/ and check the source code. You can see that the path of the style.css file is http://www.tb-so.cn/images/style.css. Therefore, you can determine that the address of the background image seach.gif is http://www.tb-so.cn/images/seach.gif. Once you find the address of the image, you can save the image directly. It is best to save it in the folder that was created when you saved the web page above, so it is easier to manage.

Note: The image paths in different CSS paths may be different, so you need to carefully check the paths in each CSS file, read the code line by line, and then save all the images. I have only listed an example here. Practice more, think more, search and learn more, and ask more questions when you encounter something you don’t understand. Remember: practice makes perfect, this isn't a very technical thing. If you can't understand the code, download the Google Kingsoft PowerWord translation software and translate it paragraph by paragraph, and you will basically understand the meaning of the code.

After saving all the background images, there will be no problem browsing them as long as the path is correct. Here is a trick for newbies who don’t understand the path. Save the images and CSS files in the same folder, and then change the background image path of the CSS file to the file name. This is the correct path. For example, in the css.css file, there is “BACKGROUND: url(images/hd.png) ”. This code means that the background image is saved in the images folder. Just change it to “BACKGROUND: url(hd.png) ”, and then save the hd.png image and the css.css file in the same folder.

Finally, since the web page files and folder names saved in the first step are in Chinese, they need to be modified before they can be accessed on the website. First, change the web page file to index.htm, because index.htm is the default homepage file (What is the default homepage file?, click to browse). Only after changing it to the default homepage file can we open our website after entering the URL; then change the folder that stores CSS files and pictures to the folder name you want. This name can be changed at will, as long as it is English letters or numbers. I will change it to css here, as shown below:

The third step is to modify the content of the web page file

After completing all the previous preparations, it is time to make the final modification to the content of the web page file, that is, to modify it to the content we want. Here we need to use Dreamweaver software. If you don’t have it, please go to http://283303360.qupan.com/4935111.html to download it. This is my network disk. If you don't know how to use Dreamweaver software, please watch the Dreamweaver video tutorial.

1) Modify the title and other information of the web page:

Use Dreamweaver software to open the index.htm file and switch the interface of Dreamweaver software to "split" mode, so that you can see the code in the upper part and the web page interface in the lower part. The first thing to modify is:

<TITLE>Taobao.com_Taobao on Taobao_Taobao’s 200 million high-quality product search experts! </TITLE>
<META content=Taobao.com, Taobao.com, Taobao search name=keywords>
<META content=Taobao.com is a cooperative website of Taobao.com｜Taobao.com is an expert in providing search for 200 million high-quality products on Taobao.com. Taobao search has functions such as searching and comparing products, helping users to easily find low-priced genuine products. It provides 200 million high-quality and discounted Taobao products for global users, allowing netizens to more conveniently obtain shopping information and find the products they are looking for. name=description>

<TITLE> is the website title, keywords are the webpage keywords, and the last description is the webpage description. Just modify the text content to your own. Then modify the path of the CSS file in the code and find:

For these two sections of code, change the path to the path where the two CSS files are stored. That is, change the previous "Taobao.com_Taobao on Taobao_Taobao.com's 200 million high-quality product search expert! _files" to the folder name where you put the pictures and css files. I changed it to css here. The above code is modified as shown below:

After modifying the above content, there is a "Refresh" button in the "Properties" panel below Dreamweaver. After clicking refresh, you can see the page style in the lower half. Next you can start modifying the content of the web page.

2) Modify the content of the web page

Web page content includes pictures, text animation and other information. Let’s take pictures as an example. In the preview area of Dreamweaver, images that cannot be displayed are generally displayed as . There are two types of images that cannot be displayed in Dreamweaver: one is the network image address, because Dreamweaver cannot access the Internet like IE. If it is such an image, you can ignore it and it will be displayed after it is uploaded to the website space; the other is that the image address is wrong or does not exist, then you need to modify the image address, the method is as follows:

Click on the image that cannot be displayed in the preview area of Dreamweaver, and the image will be selected. At the same time, the calling code of the image in the code area will also be automatically selected, as shown in the following figure:

At this point you can modify the address of the image by modifying the code, or by modifying the content in the red box in the above image. The "source file" is the address of the picture. Since my picture is saved in the css folder, I changed it to "css/logo.gif"; the "link" below is the address that this picture will link to. I don't want to add a link to this picture, so I leave it blank. You can add a link. If it is an absolute address linking to the network, remember to use the full address with http://. After modification, click "File" > "Save" to save the modifications. You can open the web page file with a browser to browse the modified style and content.

The method of modifying text is the same as that of modifying images. First, select the text to be modified in the preview area, then you can see the code of this text in the code area, and you can see the properties of the text (including font, style, color, whether there is a link, etc.) in the "Properties" panel. If you want to modify the content of the text, just enter the text you want just like typing in Word. Therefore, I will not talk about the modification of text. You can all think about it more and draw inferences from it.

With just a few steps, you can easily modify the entire website to your own. After saving the modifications, upload all files (including web page files and pictures, etc.) to your space so that you can access it. Today I only talked about how to modify other people’s websites into your own website. With this method, you can copy any website you want.

This method can achieve the goal of having any website style you want, but each web page is completely static. If you want to update the content, you need to modify these files; if some people need to publish articles, etc., then such a simple website cannot be realized. What should we do then? Please see tomorrow’s post – Daily post for beginners ⑧: Easily build an article site.

<<: CSS3 sample code to achieve element arc motion

>>: JavaScript selector functions querySelector and querySelectorAll