Main page » User instruction » Website design » Setting your personal design ( for webmasters ) »
Setting your personal design ( for webmasters )
Will consider the example of installation design to website www.25canal.dimitrovgrad.info
Source files
Design source files you already have to be prepared prior to the installation design to your online business card.
Example. The designer has made us the design for the site in the form of:
Design submitted files:
index.htm - design file itself in the form of html- code style.css - CSS styles describe the design 25canal.gif - followed by images to design bg.gif dot.gif dot1.gif line.gif line_1.gif logo.gif p.gif
Please note, code design should proceed from the fact that the files CSS, Javascript and images will be on the same level as the page. These files are can not be in different folders and subfolders.
It is important! To be able to install your design is absolutely necessary for the site to was included package "All Inclusive".
Set in the code label design
1. In index.htm with a text editor ( we recommend Notepad, HomeSite or DreamViewer, do not recommend Word, FrontPage) replace "Text page" on OSNOVNOYTEKST Please note, writing is very important: it is caps together, without spaces . OSNOVNOYTEKST - is the label when the system will meet her, then at this point will display the main text of the page.
2. Also, use a text editor to write index.htm TEMASTRANITSY in the places where there should be substituted the title page. Always worth the label placed inside the tag < title > TEMASTRANITSY </title > and at least once somewhere on the page, including tags < h1 > TEMASTRANITSY < / h1 > ;, < h2 > TEMASTRANITSY < / h2 > or < h3 > TEMASTRANITSY < / h3 > This is important for good findability of your site in search engines.
3. Somewhere in the design necessarily make a link to this page mapsite.html
mapsite.html - an automatic sitemap
Sitemap in case of an error in the design will allow your site to be indexed by search engines.
Design has become look like this:
Upload files to the site
Logon management online business card.
By selecting "Pictures and photos" menu "Content" at the top of the strip control system uploaded to the site all the pictures jpg, gif and png
By selecting "Files CSS, JS and SWF" menu "Content" at the top of the strip control system uploaded to the site all the files css (styles), js (java-script) and swf (flash animation)
Customizable navigation menu
In index.htm cut out a piece of code that is responsible for the menu, and write code in place of the tag MENYUNAVIGATSII
Carved code inserted into another empty text file, it is useful to us now.
In this case, cut the code that controls the menu looks like :
<TABLE cellSpacing=0 cellPadding=0 width="158" border=0><TR height=6><TD><img src="line.gif" width="158" height="6" border="0"></TD></TR>
<TR><TD width="100%"><A href="/index.htm" class="menu"><img src="dot.gif" width="7" height="7" border="0"> Main</A></TD></TR><TR height=2><TD><img src="p.gif" width="154" height="2" border="0"></TD></TR>
<TR><TD width="100%"><A href="/about.htm" class="menu"><img src="dot.gif" width="7" height="7" border="0"> About</A></TD></TR><TR height=2><TD><img src="p.gif" width="154" height="2" border="0"></TD></TR>
<TR><TD width="100%"><A href="/price.htm" class="menu"><img src="dot.gif" width="7" height="7" border="0"> Price</A></TD></TR><TR height=2><TD><img src="p.gif" width="154" height="2" border="0"></TD></TR>
<TR><TD width="100%"><A href="/script/reklama.html" class="menu"><img src="dot.gif" width="7" height="7" border="0"> Reclame</A></TD></TR><TR height=2><TD><img src="p.gif" width="154" height="2" border="0"></TD></TR>
<TR><TD width="100%"><A href="/script/message.html" class="menu"><img src="dot.gif" width="7" height="7" border="0"> Ads</A></TD></TR><TR height=2><TD><img src="p.gif" width="154" height="2" border="0"></TD></TR>
<TR><TD width="100%"><A href="/pay_org.htm" class="menu"><img src="dot.gif" width="7" height="7" border="0"> Order</A></TD></TR><TR height=2><TD><img src="p.gif" width="154" height="2" border="0"></TD></TR>
</TABLE>
Flowers I've highlighted the code for you, we need to set the menu.
Open content management system, business card. Under the navigation menu on the left of the page there is a link "Setting Menu". Click on it.
Bottom of the page will be a link "Adjusting the html- code to display the menu ", click on it. To open the form.
In the "1. The code at the beginning of the menu" , we introduce a purple code:
<TABLE cellSpacing=0 cellPadding=0 width="158" border=0><TR height=6><TD><img src="line.gif" width="158" height="6" border="0"></TD></TR>
In the "2. The code at the end of the menu", we introduce the orange code:
</TABLE>
In the "3. Template menu item", we introduce the red code :
<TR><TD width="100%"><A href="/index.htm" class="menu"><img src="dot.gif" width="7" height="7" border="0"> Main</A></TD></TR><TR height=2><TD><img src="p.gif" width="154" height="2" border="0"></TD></TR>
only replace it /index.htm the label LINK, and replace the label Home NAME
As a result, the contents of the field work:
<TR><TD width="100%"><A href="ССЫЛКА" class="menu"><img src="dot.gif" width="7" height="7" border="0"> НАЗВАНИЕ</A></TD></TR><TR height=2><TD><img src="p.gif" width="154" height="2" border="0"></TD></TR>
Sent design designer did not provide to any menu item different from the others, if we are already in it. We also let you select the current item.
In the "4. The pattern of the current menu item" insert the same thing that was inserted in the "3. Template menu item." Once we have with you to add a background of red cells. Field contents obtained in the form:
<TR><TD width="100%" bgcolor="red"><A href="ССЫЛКА" class="menu"><img src="dot.gif" width="7" height="7" border="0"> НАЗВАНИЕ</A></TD></TR><TR height=2><TD><img src="p.gif" width="154" height="2" border="0"></TD></TR>
Pay attention! If you do not want the current menu item once stood, then in the 4 copy is the same as in the 3. Then the current item will look exactly the same as other menu items unremarked.
Since we have with you a submenu does not provide design, all other fields we do empty.
Save the settings menu code.
Connect design online
We go to the point of "Personal Design" menu "Design" at the top of the strip control system for a small website.
Click on the link "Add new design".
Write some code name for the design. In the "HTML- code design" paste the clipboard code file index.htm, in which we have previously done all tags. Push the button "Save", and then immediately link "Go to the list of designs".This is important ! Design we have uploaded to the site, but so far it is not included. Let's turn it on.
On the next page in the "Making pages in design" for item "The design of the default" choose our new design and click on the button "Save".
Everything is ready!On regular pages of the site you will work your design, and in the pages of the control system will be standard design to always and it was easy to fix design errors.
Additional Features
You can at any part of the design to make some text area that can be visually edited separately from the main body of the text.
For example, you have three columns. In the center column should OSNOVNOYTEKST. And in the left and right columns some of his texts that you want the user could also edit. This can be done in the system.
To do this, click through "Site Pages" menu "Content" to create a blank page. Remember her number. The number can be found by clicking on this page. In the address bar of the browser will be written, for example, www.25canal.dimitrovgrad.info/page20.html, where 20 - is the number of pages that you need.
Remember this number.
Open in paragraph "Personal Design" menu "Design" to edit your design.
In the code, the design must be inserted where an editable block write tag PAGE 20
20 - this is just a page number that we are remembered from the example. Save the design.
All you now have in place the label PAGE20 will appear a block of text that can be recalled at any time to edit.
The block will be stored in the page list №20 pages.
Main page » User instruction » Website design » Setting your personal design ( for webmasters ) »