Journal
Friday,Aug 7 2009, 04:58:29 AMBonus: HD thiết kế Homepage
How to make the homepage more readable(I)
Hi Everyone,
In this blog entry, we’ll talk about how to make your homepage more readable for your visitors. For many of you, the main reason you want visitors is to share the content on the homepage. An increase in page views means that more people are seeing your content! In order to do this, we need to consider how to make your homepage easier to read. Here are some of our suggestions:
Readable: your headings, navigation links and content should be easy to read, browse and understand. This term describes the degree of ease and comfort while reading text.
It is not language-related, but related to the size and look of your text. For example, the font size, font color, font design (underlined, italicized, bold, etc.), the length and space of lines, color contrast, etc. all contribute to making your text readable.
1. Color(content and background color contrast can match better)
Users can directly choose their color code using the Hex RGB color code. We’ve uploaded an image of these code for you. You may view here: http://img.zorpia.com/zorpia2/themes/themeTeach/color_01.gif
Complementary color: (recommended for background color versus text color)
This means that your background color should have a contrasting effect on your text color, or a “chromatogram” effect. Since a complementary color makes for an obvious contrasting color, you should always remember to keep a balance with your background and content.
An example of matching colors:
Here are some color code and matching ideas:
http://img.zorpia.com/zorpia2/themes/themeTeach/color_02.gif
http://img.zorpia.com/zorpia2/themes/themeTeach/color_03.gif
http://img.zorpia.com/zorpia2/themes/themeTeach/color_04.gif
Homepage color matching skills:
1. One color: Pick one color then adjust the degree of its transparency and saturation. This will create a new color. This will make it look more centralized and layered.
2. Two colors: Choose 1 color and a contrasting color.
3. Use one color tone. Try using a stylish color such as light blue, light yellow, light green, dark yellow, grey or dark blue.
While doing color matching on homepage, please keep in mind:
1. Don’t use all the colors; it’s recommended to use a maximum of three colors.
2. The background should make the font stand out due to its contrasting color. Don’t use images full of patterns as your background; this will make text harder to read.
2. Font: Try to use common fonts; it makes your readers feel more familiar and comfortable with your page. Also use common font sizes you see on the web.
Sentences using text with lowercase letters are actually more readable than text written in all caps.
Italicized text is not easy to read.
Contrast is important - don’t use eye catching, shiny effects on your page unless you don’t want your readers to have easy time reading.
Example: placing black text over a yellow or cream color is very effective as a contrasting color.
Note: Black text on white is better than white text on black.
The space between letters, words and lines should not be too great or too narrow. Try to use normal internet writing practices.
Having enough space between lines to make them more distinct from one another; your readers will not lose their place when they skip to the next line.
A bad font, an intensive or a loose layout, poorly chosen colors or effects that cover the text can cause great difficulty in reading too.
Font standard suggestions:
Chinese text: Size 12 Sung
Heading Text: Size 14 “Sung font” (Bold).
English text: Size 11 or 12 Arial
Heading Text: Size 13 or 14 “Arial font” (Bold)
3. Composition/typesetting
Pay particular attention to the height of your text, its distance and the length of its lines. Reading online means readers have a larger amount of space than the space you’d see when you’re reading a book. This means that the amount of space should be distributed properly. Try making your space at least 50% bigger than the text’s actual height.
Write many, but short paragraphs. Short paragraphs are the best to read. We suggest that users read the entry after writing them. If you find it hard for yourself to read it, then your visitors may not enjoy reading them either.
Use blank lines to make new paragraph. Doing this affects the article as a whole. It is a basic writing rule that should not be neglected. Readers are expecting this when they come to your page.
Using simple hyperlinks, can be very useful, but makes your content less readable because of the color change on the link in the text. The reader’s eyes stop on it immediately and this actually bothers readers sometimes.
---------------------------------------------------------------------------------------------
Common homepage background
Hi Everyone! To create My Homepage module in a more convenient way, we now provide some good looking backgrounds for your homepage!
http://photos.zorpia.com/zorpiathemes/photo/34028207.8934d5/2004123013155478621
You can choose your favorite background for your homepage. The steps are really simple, please see the guidelines below:
My Homepage Design Tutorial (II)
My Homepage background image advanced tutorial
Hey guys! After publishing my first theme making tutorial, I see that many Zorpians have started making their homepage themes. How exciting!
Next week, I will be publishing another tutorial; but let me give you a sneak peek of it first
Some advanced tips about customizing homepage theme’s background.
I guess by now, most of you know we can set the background of our homepages with the "background" field in "Style and Look". However, you may ask why does this background image would always repeat itself and align to the left? Little do you know, you can actually change the CSS settings to customize how you want the background image to appear!
First of all, please open "Style and Look", go to the "CSS" tab.
Then paste the following CSS code:
body{ background-repeat:no-repeat; background-position:center top; }
The statement "background-repeat:no-repeat;" is for specifying the background to not repeat itself. Of course you may always set it to repeat by using the statement "background-repeat:repeat;"
The statement "background-position:center top;" is for specifying where the background image first appears. The first value "center" specifies the image to appear horizontally at the center. The second value "top" specifies it to appear vertically at top.
Here are some more examples:
| background-position:left top; | Background image appears at the top left corner of your browser |
| background-position:left 50%; | Background image appears at the vertical center of your browser, aligned to left |
| background-position:left bottom; | Background image appears at the bottom left corner of your browser |
| background-position:right top; | Background image appears at the top right corner of your browser |
| background-position:right 50%; | Background image appears at the vertical center of your browser, aligned to right |
| background-position:right bottom; | Background image appears at the bottom right corner of your browser |
| background-position:center top; | Background image appears at the top center spot of your browser (most commonly used) |
| background-position:center bottom; | Background image appears at the bottom center spot of your browser |
| background-position:center 50%; | Background image appears at very middle of of your browser, vertically and horizontally centered |
Isn’t this tutorial brilliant? Once you master this, you can control the background image better. Keep optimizing your homepage! Next time, we will introduce how to deal with the heading background of the content module.
My Homepage Design Tutorial (I)
Hi Zorpians! Zorpia's My Homepage has been upgraded. We have more themes after the upgrade. We also made it much easier for our fellow Zorpians to customize and share your own themes! Now let's learn how to design and create themes!
Here is an example of a public theme on Zorpia, introducing an easy way to create themes.
http://testers.zorpia.com/zorpiathemes/theme/15645/Star_Celebration
We first need to prepare for some decorative images for themes, to make theme like the one in the example, it has to include:
The background image of the homepage
The background image of the A/C column heading
The background image of the B column heading
After you prepare all the materials, we can get started.
1. Log in to your account, go to your homepage. A yellow bar appears at the top of the page, click edit. Click on "Style and Look" tab on the yellow bar. (Setting options then appear, you can choose your favorite color, font, size, background, etc.)
How to do the settings step by step:
Now the whole page is adjusted and looks consistent, isn't it easy? We now only need to fix the background image of the A/C column and the B column.
2. Due to the setting options in the first step, background image of the column headings cannot be set(only simple background color settings), but still, Zorpia provides ways for us to do it. The advanced settings means CSS code settings, a lot of users might think this is complicated, but actually it's very understandable. As long as you remember a few lines of simple code, your homepage can look very creative and diverse. Let's move on!
The purpose of this part is to show how to change background image for the A/C column and the B column. First we need to go to the CSS tab under "Style and Look", like below:
We have two text boxes here. The first text box is the CSS code which is automatically created by Zorpia, based on the settings in step 1. This text box is read-only, if you are interested, can further study it. The second text box is where we need to enter our own CSS code. Then, please remember the two sets of code below!
body .main h3.m_head_bg {
background-image:url(http://img.zorpia.cn/zorpia2/themes/anim_festival/c_head_bg.gif;
background-repeat:no-repeat;}
body .main h3.s_head_bg{
background-image:url(http://img.zorpia.cn/zorpia2/themes/anim_festival/s_head_bg.gif
background-repeat:no-repeat;}
As long as we enter those two sets of CSS code to the text box and save, the background of the column heading can be successfully set up. Let's find out the meanings of those code:
First, please look at "body .main h3.m_head_bg", this means the B column heading. What's inside of "{ }" is the codes for setting the look of column heading.
background-image:url(http://img.zorpia.cn/zorpia2/themes/anim_festival/c_head_bg.gif;)
This sets the background, inside the "{}" is the url where we place the background, very straightforward. :)
background-repeat:no-repeat;
This controls whether the background image needs to be repeated and placed on the heading, the "No-repeat" here means no placement on heading, also, we can set it up with a placement, for example we need to set the placement horizontally, we use background-repeat:repeat-x, if we need to set the placement vertically, we use background-repeat:repeat-y. It's understandable, right?
Alright, we've explained the first set of code, now let's look at the second set of code. Now you discover, besides body .main h3.s_head_bg and url are different from the first set, others are all the same! body .main h3.s_head_bg represents the A/C column heading, the url, is the address of the A/C column heading background image.
Alright, after we enter the code, we click on "save" button, back to the homepage. You can see the theme is published! Isn’t it refreshing? But we need to keep in mind that there is another important step, save the theme. Please click on the "Themes" tab on the yellow bar at the top, enter the name of the theme. Finally, if you are interested, you can share your themes with your friends, go create your customized homepage now!
---------------------------------------------------------------------------------------------------------------
Colorize your Font In Zorpia
Now u can Colorize your Font In Zorpia
By using this programme
1 - Type the words that you want
2 - You can control color
3 - You can control the size and type of line
4 - To view the model
5 - Final shape of the font and color
6 - Takes a copy of the code and place it in the place of writing in Forum here
7 - Enjoy :D:D
----------
Megaupload
Password to decompress
---------------------------------------------------------------------------------------------