Find MSN talent to teach me how to make space.

MSN space advanced skills series tutorial

Advanced course in space has been officially released. Let me clear my name: I'm not good at it, but I like playing IT out of my hobby, and sometimes I realize some doorways and feel complacent. Please don't laugh at the real master! My tutorial will not focus on technical analysis, but just some "practical" tips, which are very suitable for friends who are too lazy to pay attention to technology. The tutorial is divided into several chapters, which can only be posted one by one due to limited energy. Don't be surprised if you are impatient! In addition, I will put the content of the tutorial in a temporary web space, because some articles are too long, which will affect the overall beauty of the space. Please forgive the inconvenience caused to some friends! If you have any questions or suggestions about the content covered in the tutorial, please post them in the comments of this blog. Thank you!

Advanced skills in MSN space-the first lecture on initial preparation

Many friends find that MSN space has strong support for HTML language. Although MSN Space only provides you with a few simple word processing functions when processing the log, if you preprocess the text and pictures in fckeditor in advance, simple copy and paste can make your log look more vivid. In fact, these are all realized through the corresponding page language. You may think that it is a little overqualified to use fckeditor to handle these simple words every time, and it is a little laborious to switch between different pages, so I will tell you a good way to add more text editing functions to your MSN space, and at the same time let you have the ability to handle HTML language directly on the log editing page. It can be said that this has laid a good foundation for adding counters and other functions in the future. How to add it? Please look down:

First, make sure that there are "links" in the toolbar of your IE browser. If not, click the "View" menu and check "Link" in the "Toolbar" option. Then visit the following website.

/blogging/editit.htm

You will find the "Edit it" link in the page. Right-click this link and add it to your favorites. Remember to put it in the "Links" folder. When you have done this, you will see an Edit link icon in the Links toolbar.

Now this step is unnecessary, because M Company has added HTML function.

Ok, add a new blog to your MSN space. Before entering text, click Edit to see if there are more icons in the editing toolbar, such as cut, copy, paste, font size, font size, etc. With the original bold, italic and text colors, it should be more than enough to handle text.

Look below, there is another option.

Create your page using HTML. -Edit HTML format commands directly.

Click to edit the page language, such as adding background color and setting background style.

Advanced Skills of MSN Space —— Lecture 2 on Colorful Background

The background color of the log in MSN space changes with different template types, but there is no mention of the function of providing users with custom background color, but we can achieve this goal by editing HTML language, so that the log can change different colors with our mood.

Before editing the blog, click the "Edit" button mentioned in the last lesson, then select the HTML grammar editing option at the bottom of the editing area, that is, check the option of creating your page with HTML, and then enter the HTML editing state. You will see the following marks on the page.

& ltdiv style = " width: 100%； Height:100%; Background color: # 990000; " & gt& lt/div & gt；

Please note that you need to make a little adjustment here.

& ltdiv style = " width: 100%； Height:100%; Background color: # 990000; " & gt& ltp & gt& lt/p & gt； & lt/div & gt；

In < p >；; and

In the state of HTML editing, you will find that the text editing button has disappeared. In this case, it is difficult to process the text. Of course, for experts, just a few words can solve the problem, but we ordinary people don't have the ability and patience. What shall we do? Easy! Just check the check box before the option "Create your page with HTML", that is, cancel the editing status of HTML grammar. At this time, you will find that we have re-entered the text editing mode, but there is not a blank, but an extra color block. Double-click the mouse on the color block, and the following text editing will be familiar.

One color is not rich enough, I want a colorful life! No problem, go back to the HTML syntax editing state, add the above HTML statement before you want to use other colors of text, and then adjust the color value. There are two points to note here: first, you should pay attention to embedding words in the above statements; Second, you must adjust the height ratio in HTML sentences with different colors to achieve the best effect. As for what value is appropriate, it depends on the length of the text content. You can preview while adjusting.

MSN space advanced skills-lecture 3: three-dimensional color border

A diary with a background color is much more lively, so how to make it more distinctive? In this chapter, I will tell you how to customize the background style with three-dimensional effect.

Add a color border to the log text first, because the CSS border attribute syntax involved is the basic form of making a three-dimensional border in the future. Please remember the following syntax:

& ltdiv STYLE = " border-STYLE:solid； Border width: 5pt Border color: red "> log text

It will generate a red border around your text, the border width controls the border thickness, and the border color adjusts the border color. Why do you still use the color values in the form mentioned above, such as #xxxxxx, and border-style controls the effect of the border? When solid color is used, it is a linear simple border with a single color.

Next, we will extend the above grammar, and we can get a color border with three-dimensional effect. So where do we start? In fact, it is described in different syntax after border-style:

Solid simple straight border double simple double-line border groove stereo effect border ridge stereo effect border embedded line stereo effect border external floating line stereo effect border

You can try the different syntax above in the MSN space log and observe the effect in the preview.

By customizing the border and nesting the grammar of adding color in the last tutorial, you can create a colored log background with three-dimensional effect.

For example:

& ltdiv style = " width: 100%； Height:100%; Background color: # ffff00"& gt Log text

& lt/div & gt； & lt/div & gt；

Using the above syntax will give you a floating line background with a yellow background and a red border. In fact, there are other simplified ways to write the above grammar, so I won't go into details here, just adopt the more direct and easy-to-understand form above.

You can also adjust the four sides of the background border according to your own needs. Taking the left margin as an example, you can use the following syntax:

Left border style: solid (double line, groove, roof, embedded, outline) custom border style.

Border-Left-Color: #xxxxxx Custom border color

Border-left-width: xpt custom border thickness.

The other three borders use right, top and bottom. Preview the following grammar in your blog and see how it works:

& ltdiv style = " border-top-style:outcome； Right border style: beginning; Left border style: beginning;

Border-bottom style: beginning; Background color: #cc3366 ">

You can adjust the styles of the four borders at will according to your own ideas, thus creating a unique effect. Remember that different attribute descriptions are used. Separate. In addition, you may notice that when you set the border and return to the log text editing mode, if you use the Enter key during typing, another border will appear, which will affect the coherence of the text. This is because HTML syntax does not support hard carriage return. To solve this problem, you must return to HTML editing mode and type.

Advanced Skills in MSN Space-Lecture 4: How to Add Background Music?

How to add audio and video to your MSN space blog is a concern of many friends at present. After all, a page with sound and light effects can entertain people and please themselves. I remember when I first entered Space, on the one hand, I was impressed by its simplicity and practicality, on the other hand, I was troubled by the poor personalized settings it provided. At first, I simply wrote and uploaded some photos, and later I learned to draw. I am very excited. Look at the colorful appearance of other blog spaces. I really envy them. Is the space left for us to play really that limited? Of course, this is not the case. Whether Microsoft is interested or not, she still gives us the possibility to show our personality here, but it is up to everyone to discover this possibility. All right, cut the crap and get down to business!

Let's first introduce how to add audio, that is, add background music to our blog. At present, the popular practice in the space is to use MS Frontpage, which is certainly not good news for friends who don't have this web editing software at hand. By analyzing its grammatical format, I found a simpler way to add audio without the above software. Considering that some friends may be interested in the first method, I will introduce the two methods as follows:

1.ms frontpage mode

First, search the music you need online. WMA format file is recommended here, because it is relatively small, so it will get faster loading speed. You need to get the exact link address of the file in the following format:

/xxx.wma, some online music will not directly display the link address. How to get it, please check the relevant skills through search engines such as Google. Of course, the most satisfying thing is that you have your own homepage space, where you can upload your favorite songs, and you don't have to worry about the situation that the space background music can't be loaded because of link failure in the future. After you get the link address, run MS Frontpage, create a new file, and then insert a picture into the web page. The smaller the picture, the better. Then right-click the picture, select "Picture Properties", select the "Video" option in the pop-up dialog box, paste the link of the audio file just obtained into the "Video Source" column, and then set the "Cycle Times" in the "Repeat" option to make a choice according to your own preferences. Never mind the settings in the "Start" option, just leave it empty, and finally click "OK". It will take some time for Frontpage to get the video source, depending on the size of the audio file. At this time, you will find that the original inserted picture has been reduced to a small icon, click with the right mouse button, and then click "Copy". Go back to your space, create a new blog, or open the blog where you want to add background music, move the cursor to the blank space, and then use the "Paste" command in the "Edit" menu of IE browser or CTRL+V shortcut key to paste the content you just copied here. Usually, you won't see anything pasted. Wait a little longer, and you can hear the background music without opening the log preview. The rest, of course, is to publish your masterpiece.

2. Simple syntax for loading memory

Inserting background music through the above methods is generally not very complicated, but how to solve this problem for friends who don't have MS Frontpage and are allergic to MS series products? By analyzing the source code and grammar format of the above operations, I found a simpler method. By inserting a very simple grammar sentence, I can quickly add background music. Please remember the following syntax:

& LTP> & ltimgheight = 0loop = infinite dynsrc = audio file link address width = 0bborder = 0 > & lt/P & gt；;

The only thing you need to change in this grammar is Loop, which controls the number of loops. When it is infinite, it is an infinite cycle; When it is 0, it is acyclic; For other loops, just type the corresponding number.

On your blog editing page, first click the "Edit" button mentioned above to enter the HTML grammar editing mode, then check Create your page with HTML and insert the above grammar in the blank space. Because it takes time to load, it may take some time to hear music when you click on the log preview.

Advanced Skills in MSN Space-Lecture 5: How to Add Video?

I want to make my diary colorful, and many friends who have settled down in MSN space have this idea. After all, the "sound and emotion" page will attract a lot of attention. In the previous chapter, we learned how to add background music. Next, let's see how to put video clips in the log.

By chance, I found that some websites provide so-called music video codes. Select the video you need, set a few simple parameters, and the website will generate a code for you immediately. This code can be used for your own web page or blog, so as to achieve the effect of real-time playback. At that time, I had the idea of trying it in MSN space, but several experiments were unsuccessful. Later, I copied a video to Dreamweaver fckeditor, looked at its source code, made a little modification, previewed it in IE, and then copied and pasted the video in the preview page into the log. I didn't expect to succeed! However, this practice is more complicated, so I won't go into details here.

What I want to introduce to you is a simpler method, which is also inspired by the grammatical format of background music. In fact, we can know from the last tutorial that the "video source" option in the "property settings" of the picture plays a key role, so since it is called "video source" and we have successfully loaded music with it, it is logical to add video. Based on this idea, I changed the music file in the grammar to the link of asf streaming media file, and then adjusted the width and height of IMG in the grammar. I tried it once in the space log and it was successful. At the same time, the loop parameters are used to solve the problem that cannot be played back in the past.

Seeing this, you will suddenly realize that it is so simple! Yes, it's actually that simple! Then, how to add video, just like adding background music introduced in the previous chapter, can be achieved in two ways, one is to use MS Frontpage, and the other is to use the grammar I provided you with below:

& LTP> & ltimg height =150pxwidth =150pxloop = infinite dynsrc = streaming media file link >; & lt/P & gt；

The height and width after IMG control the height and width of the video picture respectively, and you can adjust it as needed. If you set them to 0 here, only music can't see the image, which is equivalent to the effect of inserting background music. Cycle control the number of cycles. Please refer to the description in the previous chapter for usage.

For the control of the video position in the page, you can use simple commands in the log editor, or you can realize the perfect combination of video and text by adding the following syntax. Examples are as follows:

Align = Text on the left is placed on the right side of the video and closely combined with it.

Align=right text is placed on the right side of the video and closely combined with it.

Align = Top text line to the top of the video.

Align = The middle text line is aligned with the middle of the video.

Align = The bottom text is aligned with the bottom of the video.

The key here is the acquisition of streaming media files. Normal streaming media files are all suffixed with asf, wmv, or mov, which is the most direct form. There are also files with asx suffix. This file format hides the real address of streaming media, but it doesn't matter. You can also put links with asx suffix in your grammar. At present, most streaming media files on the Internet have hidden links, so it is difficult to view them directly. There are many cracking techniques on the internet in this respect, so you can try them.

Advanced Skills in MSN Space —— Lecture 6: Adding Counter and MSN Online Status Indicator

Advanced Skills in MSN Space —— Lecture 6: Adding Counter and MSN Online Status Indicator

Counter and MSN online status indicator are two practical tools, through which you can know the popularity of your space, while the latter provides visitors with your current online information so that friends can contact you in time. The premise of adding these two functions to the log is that you must have installed the HTML grammar extension editing tool, that is, there is an "edit" button in the toolbar of your IE browser. How to get this function, I have made a detailed introduction in your tutorial chapter, so I won't go into details here.

Let's talk about adding counters first. If only the total number of visits is displayed in the log, you can apply for a simple counter. There are many websites that offer this service. You can find many results by typing "free network counter" in the search engine. I personally recommend/. This website provides more than 350 counters with different styles and colors, which will definitely meet your needs. You need to register when you apply, but the process is simple. Generally, only a small amount of personal information needs to be provided. After successful registration, you can choose your favorite counter, and then enter the information of your personal website, and you will get the code of an online generated HTML page. Some websites will also provide you with simple online editing functions, so that you can further modify the appearance of the counter simply to better meet your needs. Copy the obtained code, then go to the MSN space log where the counter needs to be inserted, click the "Edit" button to enter the HTML syntax editing state, paste the code just obtained into the blank space, then exit the HTML editing state and adjust the position of the counter in the log text processing mode. Because MSN space does not provide the function of setting the top, you must always adjust the position of the counter and always put it in the log on the home page (preferably the first log). For convenience, you can copy the source code of the counter into a text file and simply paste it when you adjust it later.

If you want to get specific information about your space traffic, such as the number of visits per unit time, the length of stay of visitors, the IP of visitors and their countries, and many other professional statistical results, the above websites can't meet your needs. I recommend you to apply for this service on this website:/,which provides extremely powerful and stable statistical functions, covers almost all the contents (at least up to our level), and presents a lot of information in the form of graphs or tables, which is intuitive and clear (recommended by Tucow five stars). All these services are free, unless your monthly visits exceed 200,000. The only drawback is that the counter style provided is too simple and there is not much choice. . The application process is very simple. After success, you will be asked to choose the counter style (you can make a simple setting value), and then set some parameters, such as excluding your login from statistics through Cookie function, and then you can get the HTML code of the installation code page. It should be noted that it generates different codes for different types of pages. Therefore, you should select "Html Only Code" in "Statcounter Code Options". The code generated by this command can be used in MSN space, and the operation after obtaining the code is the same as the above degraded operation. Because it is an overseas service provider, the information on the page is all in English, which may be troublesome for friends who are not familiar with E language.

It is also very simple to apply for MSN online status indicator. Go to the following website: 8080/ Select MSN in the "Messenger" drop-down menu. Of course, if you have instant messaging tools provided by Yahoo or AOL, you can also apply for corresponding indicators. Enter your MSN Messenger user name, and the website will generate a code for you soon. This code shows an icon, which shows the different states of your Messenger through color changes. Just add this code directly to the log according to the above method. There are two issues to note: the status indicator will not be updated in real time, but it will show your online status when visitors log in to your space. If you are online or offline during this period, the indicator will not react synchronously in real time unless the page is refreshed. In addition, the displayed status and the real status may be slightly delayed, but it is not serious. Another situation may happen, that is, the server of the service provider is turned off, so the indicator cannot display any status correctly.

June fifth.

Advanced skills in MSN space-Lecture 7: Light and shadow effects of text and scrolling text boxes (plus vertical text version)

Advanced skills in MSN space-Lecture 7: Light and shadow effects of text and scrolling text boxes (plus vertical text version)

With regard to text processing, MSN Space provides several basic format commands, plus our extended editing tools, which should be more than enough for general text arrangement. If you want to get more effects, especially in text typesetting, you can refer to the introduction of word processing in HTML and CSS, so I won't explain it here. After all, my tutorial only provides you with some simple and practical tips, not a professional lecture on web page making. But for some special text effects or arrangements, I will provide you with relevant grammar and code in time.

(Note: The use of the following syntax is still realized through the HTML language editing mode. Please refer to the first chapter of this tutorial for how to obtain HTML extension functions. )

Here are the related grammars of the three color text effects I showed in my blog:

Shadow:

Glow:

Fuzzy:

The syntax formats of the three effects are basically the same, but different filter properties are used. Color controls the color of the text; Filters control different filter effects, and their internal specific parameters, such as the color of shadows and light, the direction and intensity of blur, can be adjusted freely as needed; Note the parameter width in each effect syntax. When your font size changes, you need to adjust the value accordingly, otherwise the text will not be arranged properly. In addition, in the fuzzy effect, add indicates whether to keep the original effect, and the value is 0 or 1, which is generally set to 1. There are not many other parameters that need to be emphasized. The reason why Chinese Cai Yun fonts are bold at the same time is to achieve better results. You can adjust it according to your own preferences. It should be noted that these effects only apply to headlines or a small amount of text, otherwise it will cause reading difficulties.

Large logs will occupy most of the space on the page, thus affecting the overall beauty. By adding a text box with a scroll bar, the above problems can be solved well. The following is the relevant syntax:

& ltDIV align = center

style= '

Color: # ffffff

Background color: # 000000;

Border: solid color 2px black;

Width:120px;

Height: 200px

Overflow: scrolling;

scroll bar-face-color:# 889 b9f；

Scroll bar-shadow-color: # 3D5054

Scroll bar-highlight-color: # C3D6DA

Scroll bar-3dlight-color: # 3d5054;

Scroll bar-dark shadow-color: # 85989C

Scroll bar-track-color: # 95A6AA

Scroll bar-arrow-color: # FFD6DA

& gt log text

The above syntax generates a text scroll box with a black background and a gray-blue border. The parameters in grammar are quite simple, mainly to control the colors of different parts. You can make corresponding modifications and watch the actual effect in the preview. As for resizing the text box, you can exit the HTML editing mode after inserting this grammar, and then adjust it directly with the mouse on the log editing page.

Next, let's talk about how to realize vertical text. Apart from creating special effects, the vertical arrangement of the words I show in the space is not really practical, and it will only bring trouble to readers. However, in line with the principle of tapping the potential of space as much as possible, I still tried the following grammar:

& ltDIV style = " FONT-SIZE:9pt； Write mode: TB-rl; TEXT-ALIGN: left ">& ltp> log text

The only bright spot in this grammar is the parameter of Writing-Mode, followed by tb arranged from top to bottom and rl arranged from right to left.

MSN space advanced skills-lecture 8: add background pictures to blogs.

MSN space advanced skills-lecture 8: add background pictures to blogs.

A wonderful journal article, with appropriate background pictures, will certainly bring remarkable results. I don't know why Microsoft didn't consider the basic needs of users, so that everyone spent a lot of effort on it. I have tried to solve this problem with some grammars before, but none of them have been realized. Later, because I returned to China, I struggled in real life every day, and I didn't think about these problems in the network society for more than a month. After returning to Germany, I rarely have a day or two of leisure, so I remembered the events with background, tried the relevant grammar one by one, and finally found a solution. Later, when wandering in the space, I found that some friends had realized this function, so I summed up my experience with others and wrote this tutorial.

As before, the grammar commands involved in realizing this function are not discussed here, which is too cumbersome and of little practical significance. I only list the grammars needed for specific applications, and then explain several important parameters.

First, enter the normal log editing mode, enter the log content you need, and make typesetting and editing according to your personal needs. Then click the "Edit" button to enter the HTML syntax editing mode, and check the "Create a Web page in HTML format" below.

Paste the following syntax at the top of the edit page:

& ltIMG src= "background picture link address" width= picture width value height= picture height value align = right style = "filter: alpha (opacity = 100, fineness = 0, style = 2) ">

& ltDIV style = " FILTER:alpha(opacity = 45，finishOpacity = 45，style = 0)； Floating: left; Width: text width value ">

& ltDIV style="LINE-HEIGHT: line spacing value (points); Letter spacing: character spacing value (em)" & gt；;

& ltP & gt& ltFONT color=#ffffff size=2>。 Your log text

& lt/DIV & gt； & lt/DIV & gt；

Then cut and paste the text you just edited (note that in addition to the text content, it may also contain some grammatical sentences you formatted) into the position of "your journal text" in the grammar above.

Let's briefly introduce the meanings of the two main command statements in the above grammar:

& ltIMG src=……。 & gt Control the background picture in the log, and the width and height of the picture are in px; Align this parameter controls the position of the picture, but don't change it, otherwise you can't achieve the effect that the text floats on the picture. Filters control the softening filter of the background image. You can modify the value to achieve different effects, but note that the value of style can only be 1, 2, 3. In addition to the softening effect, there are some special effects, such as turning, lighting, shadows and so on. , but the grammatical expression is different, so I won't go into details here. Interested friends can check the relevant grammar online. In different layout modes of Space space, the width of the log is different, so in order to better match the page effect of the log, it is recommended to choose pictures with appropriate width. Specifically, the width of the picture can be set to about 260px, 350px, 370px, 550px and 730px according to the actual layout (that is, the width of the log).

& ltDIV style="FILTER ...... "。 & gt controls some effects of the log text, and the use of the filter command is the same as above, which is also an adjustment softening effect. Text width is also in px, and its maximum value should also refer to the approximate width required by different layout methods above. If you want the text to be completely distributed on the entire log page, set the width value to 100%. If the specific width is set, you can omit the Float command, otherwise please keep it.

There is a problem that needs attention. The position of the text in the preview relative to the background image is usually different from the position finally displayed in the log, which requires you to return to the log for further modification. This does require some patience, but I believe that after a period of practical application, you will sum up some experiences and skills.