Web Designer Blog

SEO is a hot topic for website design all the time, since the majority of website traffics come from search engine instead of visual attractiveness. Every element in website design should take SEO into consideration. As for navigation bar, website designers usually choose SE friendly DHTML menu to get crawled easily by spider.

DHTML menu can be search friendly to search engine spiders by three ways:

• Generate the SE friendly code and insert it to webpage
• Make XML sitemap and submit it to main-stream Search Engine
• Generate sitemap to help navigate site and make it to be  indexed

As drop down menu builder, Sothink DHTML menu not only enables to create the attractive web menu, but also provides the useful tools to make navigation menus SE friendly. Let’s check out these SEO tools:

1. Search Engine Friendly Code Maker
   Pro: This tool enables to generate special codes which are readable for web crawlers; and these SE friendly codes can enhance the presence and visibility of a website on search engine listings. The maker will behave like sitemap if JavaScript is forbidden in the browser, which the menu is shown in text link.
   Usage: After publishing the menu into page, you can check button in the program to open dialog, and click “Copy All” button to copy these codes, and paste them behind the menu code between tag within webpage.
   Button:
   
   Dialog:
   
2. Google XML Sitemap
   Pro: This tool can generate XML sitemap, which is special for Google search engine. This XML sitemap makes good use of the search engine spiders’ time by make the engines index pages from your site efficiently; and provides the opportunity to make search engines know priority, update time and change frequency.
   Usage: Finishing the menu configuration, you can check button in the program to open dialog; input your website link and check the related options to set sitemap; click “Save XML” button to save XML sitemap to defined path. At last, submit this XML sitemap to Google.
   Button:
   
   Dialog:
   
3. Generate Sitemap
   Pro: Sitemap allows search engine crawlers index the website easily; it enables to make SE find all the pages. Even some internal links, sitemap still improves PrageRank or link popularity to all pages it links. Also sitemap helps with usability and site navigation based on existing menu structure used in website.
   Usage: Completing the menu creation, you can check button in the program to open dialog; choose theme, at
   tach CSS and check the related options to set sitemap page; click “Save…” button to save HTML page to defined path.
   Button:
   
   Dialog:
   

–To get rid of the border of the main menu, please choose in Menu Tree panel, choose “Popup Menu > Border” in tasks panel, and set the Border Width as “0”.
To get rid of the border of the sub menu, please first select the menu item which has the sub menu in Menu Tree panel, choose “Popup Menu > Border” in tasks panel, and set the Border Width as “0”.
To get rid of the border of each menu item, please first select the menu item in Menu Tree panel, choose “Menu Item > Border” in tasks panel, and set the Border Width as “0”.

The eye-catching and attractive menu is vital element on website. The navigation menu is usually the area in site which gets the most traffic. To judge the web menu is good one, you can analyse it by three aspect: great interaction with mouse event; wonderful menu style and matchable with website; clear navigation and easy operation. Here lists five JavaScript menus, let’s check out these excellents DHTML menus:

Please create a Google account at http://www.google.com/. Input your information, and then get a new account.

Sign in Google, enter “My Account”, and click “Sitemaps”. The page is switched to the Google Sitemaps. In “Add Site” field, type the URL address of your website, like this http://www.sothink.com/. Click “Ok” to finish the website submission.

Next step is to verify your site. In order to make sure the users are the site owners of the submitted website, Google will auto-generate an HTML file or META tag. Upload either one to verify your permission.

Insert the META tag in the first <HEAD> section of the page for home page of your website. META tag looks like this:

<META name=”verify-v1″ content=”DWDVgMvSlthYghh8yyM2MEX3KYopZGB8b3CW/RlBHPg=” />

Name an HTML file like this and upload it: google5704341f95df93c5.html

After Google verifies you are the site owner who admin the submitted website, there is true marker in the column “Site Verified?”, and you can manage the website on Google.

Sitemap can be generated in XML format by Sothink DHTML Menu. Please save the sitemap and upload this *.xml file into the root directory of your website.

Now, submitting the sitemap into Google. Please click “Add a Sitemap” in the column “Sitemap”; and then choose a sitemap type, users generally select “Add General Web Sitemap”; input URL address of uploaded sitemap like this :
http://www.sothink.com/sitemap.xml, and wait for verifying the sitemap.

If Google verifies the sitemap, all the processes are finished. And you can control the information about website on Google.

There are two ways to show ruler in Sothink DHTML Menu, one is to click “View > Ruler” on the menu bar; the other is to press shortcut key Ctrl+R.

Change the measurement units

To change the measurement units, just right-click anywhere within the ruler to popup ruler settings. The available units are pixel, inch, or centimeter. And default measurement units is pixel.The current coordinates of the mouse show in the right bottom of the state bar when the measurement units is pixel. You can see the current coordinates of the mouse as X 148 and Y 44 from above image.

Change the coordinate origin
To change the coordinate origin, just press down the mouse in intersection area of horz ruler and vert ruler, and then drag the crossing down to the position where you want the coordinates origin locate. When dragging the crossing, a horz and a vert line will appear to guide you.
The new coordinate origin is the intersection of horz guide and vert guide line. Take above image for example, new 0 in the top ruler moves 200 pixels right ; and new 0 in the left ruler moves 150 pixels down, the crossing is the new coordinate origin. Though the guide lines are only visible in the preview window, it is allowed to set the new origin anywhere outside the preview window.

To restore the ruler coordinate origin you can choose “Reset” in the right-click menu mentioned above (Right-click anywhere within the ruler to let the menu popup).

Download Sothink DHTML Menu to get more ruler function.

When you surf the website, there are so many linked pages that needs to view, maybe tired or no enough time, you must close the tree menu page when finishing the partial nodes, and continue to fulfill the rest next time.

Still remember the last node that you clicked in previous time? Most of us maybe forget it, but the tree menu can impress that node and prompt the viewers. Now please re-open the tree menu page, there is node with white background in the tree menu. That is the last node you viewed in the previous time, you can continue the rest from here.

Check this tree menu samples to get it:

How to let the tree menu remember the state and recall for next time?

It is simple to get this function. Please check the option “Record the tree menu status and recall for next time” in Global Settings > Advanced. Just one click, your viewer can browse the pages with ease.

Download tree menu to create such a navigation menu.

DHTML Menu supports IE9 beta in its new version of 9.6. With Microsoft IE9 Beta release, you can use this powerful IE browser later, which is optimized in performance, HTML5, Graphic and Browser. As an essential web element, JavaScript menu/DHTML menu needs to be compatible with the main-stream browser of IE9 to get better browsing experience. DHTML Menu enables you to create cross IE9 beta navigation bars without any skills; 100+ built-in templates are available to be applied to your website directly.

What is Sothink DHTML Menu?
Sothink DHTML Menu is a drop down menu builder, which assistant you in making cross-browser menu, fast-loading menu and SE friendly menu in clicks. 100+ templates & 30 styles included; integration with main-stream web editors; support database driven menus; fully customize menu style.

Main features:
* Full cross-browser compatibility, support IE9 beta.
* Seamlessly integrates with DW, FP, EW and GoLive.
* Supports database driven navigation menu with ASP, PHP, JSP, ASP.NET, ColdFusion.
* Creates functional navigation menu, such as tab menu, highlight menu, scrolling menu, cross-frame menu, multi-level/multi-column menu, custom menu, floating menu, etc.
* Offers 100 + free templates, 30+ preset styles; and provides image library for menu design.
* Publish wizard guides you to publish the drop down menu to website step by step.
* Customize web menu properties, like font, icon, background, border, cursor, tool tip, etc.

Check some samples of DHTML Menu:

1. Anchor chain drop down menu

2. Grass green web menu

3. Notepad navigation menu

Download Sothink DHTML Menu to create a well cross-browser menu.

There are three steps to update the menu which is created by the previous DHTML Menu versions.

Step 1: Open the pgt file

Open the pgt file which is created by the previous versions (supported versions: 3.0 and above versions ) in the latest Sothink DHTML Menu, and then click the Publish button, you can choose View/Copy Code to publish the menu.

Step 2: Update the menu’s code

Copy the header code and the body code of the menu, switch to the page which has the menu, and paste them so as to take the place of the original header code and the original body code.
Note: Replace and update the codes carefully because the stm31.js has changed into the stmenu.js since the version 6.x.

Step 3: Update the menu’s file

Click OK to copy resource files after updating the menu’s code.
For the menu, which has not set the JavaScript folder for resource files jet. Copy the resource files to the folder in which the menu page is. So, the resource files and the menu page are in the same folder.
For the menu, which has set the JavaScript folder for resource files. First of all, copy the resource file to temporary directory; and then, place the JavaScript file and image files into the corresponding JavaScript folder on the basis of resource folder.

Sothink DHTML Menu includes an advanced function, which enables you to generate a navigation page for your site by automatically analyzing the existing menu of a web site. The Generator wizard will scan all sub-items and their corresponding links, and create an “*.htm” file to show all the relation and structure of the website.

How to generate…

When you finish the menu configuration, click “Tools > Generate Site Map” to open the Site Map Dialog.
You can choose a theme from the pre-made theme list, or use an external style sheet by clicking the browse button. The result can be viewed in the Preview area.

After setting the style for your site map, you can choose one of following options as the content of your site map:

Items with links attached: Use the menu item’s text that is attached a link.
Items and links:  Use both item’s text and link URL.
Items only:  Use item’s text only.
Links only:  Only use the links of menu items as the content.

At last, click “Save” button to save the site map as an htm/ html file, or click “Print” button to print it.

View visual tutorial to get it >>

Download Sothink DHTML Menu to make navigation bar.

Apple’s iPad offers us better user experience, viewing websites is no more only one way, and the smart fluid width design can be landscape or portrait mode, which gives the visitors two completely different layouts of website. But now, the desktop computer is not compatible with iPad because of the different dimensions. For iPad web design, should we design two types of navigation tree menu for iPad websites? Of course you not, Sothink Tree Menu enables you to create the magic tree menu to match with iPad web page.

Navigation tree menu in iPad websites can quickly guide visitors to the target iPad web page, which is special used for iPad web design of large-scale directory. The collapsible tree menu is cross-browser, fast loading and SE friendly tree menu. And seamless integrations with HTML editors will enable you to add tree menu to iPad web page never so easy.

Using Sothink Tree Menu, let’s start building deep blue tree menu as below now:

1. Start With Built-in Templates from Tree Menu Builder

Launch Sothink Tree Menu, template windows opens; and choose tree menu “Deep Blue” under the category “Business”.



2. Modify the text and link for tree menu and apply it into your iPad websites

Modify the text and link to make the tree menu server for your iPad websites. Click the text on Tree panel, select the option “Node Settings > General”, and edit the text and link in below property panel.



3. Set web path to make iPad tree menu work in local or Internet

Set web path to save JavaScript and image files to the defined directory, which makes sure the tree menu display correctly. You can enter the “Global Settings > Web Path” to set directory.



4. Publish the iPad tree menu to make it display on iPad websites

Publish the resource files, menu code or JavaScript menu code to the specific folder, and insert two pieces of code to the tag “head” and “body” within iPad web page. You can preview menu locally; upload all the resource files to web server, you can view tree menu on Internet.
Check the button on the toolbar to publish your iPad tree menu.

Finish the above steps; your tree menu has been displayed on the iPad websites. Is iPad tree menu perfectly displayed on iPad websites of the fluid design? Hope you like it.