DoNotYet.com » HTML http://www.donotyet.com Freebie Resources for Tech Users, AIR, Flex, Flash Developers and Photoshop, web Designers Wed, 07 Dec 2011 06:35:54 +0000 http://wordpress.org/?v=2.8.2 en hourly 1 Dreamweaver 8.0 Tutorial—How To Limit The Time Of Viewing The Web Page http://www.donotyet.com/2009/12/08/dreamweaver8-tutorial-how-to-limit-the-time-of-viewing-the-web-page/ http://www.donotyet.com/2009/12/08/dreamweaver8-tutorial-how-to-limit-the-time-of-viewing-the-web-page/#comments Tue, 08 Dec 2009 10:10:00 +0000 admin http://www.donotyet.com/2009/12/08/dreamweaver8-tutorial-how-to-limit-the-time-of-viewing-the-web-page/ You know that some special effect in web pages can be achieved only by HTML code. Follow the last article, we will learn how to limit the time of viewing the web page. Sometimes we need to do this. For example, when you want to build a website for the exam online, you need to limit the time because the students should hand on the test paper on time. This special effect need the help of the HTML codes and a div tag. Now let us learn how to achieve it by HTML codes.

clip_image002

Step1:

Open the web page you have built.

Sep2:

Set focus on the position that you want to add a Div tag. Then select the [insert]-[layout objects]-[Div tag] command. There will be a “insert div tag” dialog box appearing. In the ID textbox, input “a”. like the following picture showing:

clip_image004

Step3:

Change to the code view. Put the following codes into the section between <head> and </head>.

  1. <script language=javascript>
  2.  
  3. Var yuan=9
  4.  
  5. Function timelimit()
  6. {
  7.  
  8. Var now=new Date()
  9. Var seconds=now.getSeconds()
  10.  
  11. If(seconds++)
  12. {yuan- -}
  13.  
  14. a.innerText=”you have “+yuan+” seconds to view”
  15. setTimeout(“timelimit()”,1000)
  16.  
  17. if(yuan=0)
  18. self.close()
  19. }
  20.  
  21. </script>

Maybe you have some confusion about them. Script means definite the content of program script. It is used in starting and ending to control the program. “var now” means start to time. a.innerText means the “you have “+yuan+” seconds to view” text will appear in the div tag. And self.close means the web page will close automatically on time. generally speaking, we use object. Action to express the action of objects. You can see it isn’t difficult.

Setp4:

Change to the spilt view. Add the code “onLoad=timelimit()” in to <body> sentence.

Setp5:

Save the document and preview it in the internet explorer. The effect is like this:

clip_image006

Now the special of limiting the time of viewing the web page is OK. In fact, this special effect is very easy. You just need to memorize the meanings of some codes such as timelimit, timeout, self close.

Related Posts

]]> http://www.donotyet.com/2009/12/08/dreamweaver8-tutorial-how-to-limit-the-time-of-viewing-the-web-page/feed/ 3 Dreamweaver 8.0 Tutorial—Forbid The Viewers To Copy The Webpage Content By Using HTML Codes http://www.donotyet.com/2009/12/07/dreamweaver8-tutorial-forbid-the-viewers-to-copy-the-webpage-content-by-using-html-codes/ http://www.donotyet.com/2009/12/07/dreamweaver8-tutorial-forbid-the-viewers-to-copy-the-webpage-content-by-using-html-codes/#comments Mon, 07 Dec 2009 09:54:00 +0000 admin http://www.donotyet.com/2009/12/07/dreamweaver8-tutorial-forbid-the-viewers-to-copy-the-webpage-content-by-using-html-codes/ In the past articles, we have learned how to make dynamic webpage. But it isn’t enough. In this article we will learn some knowledge about HTML codes. HTML is short for Hyper Text Markup Language. The extended name of the document created by HTML codes is .html or .htm. In the dreamweaver8.0, even you aren’t familiar with HTML codes; you still can make web pages. However, the most advantages just are the most disadvantages. There will be a lot of useless codes created by the way, which will reduce the speed of loading the web pages. In many case, we need to adjust the HTML codes by ourselves to achieve some special effect. Now we will learn some things about HTML codes.

clip_image002

Sometimes, maybe you don’t want to let others copy the content in you web pages. In this case, you need the help of HTML codes. Now let us learn how to forbid the viewers to copy the content. It is very easy. Just need some HTML codes.

Step1:

Open a web page you have built. Show code view and add the following codes in to the section between <head> and <head>.

clip_image004

  1. <script language=javascript>
  2.  
  3. function click() { // Here we definite the forbidding left-click function.
  4.  
  5. alert(’No Copy ‘) }  // Here no copy is the content of the alert message box.
  6.  
  7. function click1() { // Here we definite the forbidding right-click function.
  8. if (event.button==2) {
  9. alert(’No Right Click！’) 
  10. }
  11. }  //  Here No Right Click！ is the content of the alert message box.
  12.  
  13. function CtrlKeyDown(){  // Here we definite the forbidding of Ctrl key down.
  14.  
  15. if (event.ctrlKey) {
  16. alert(’improper copy will damage your system ‘) 
  17. }
  18. }
  19.  
  20. document.onkeydown=CtrlKeyDown;
  21. document.onselectstart=click;
  22. document.onmousedown=click1;
  23.  
  24. </script>

Step2:

Save the web page. Preview in the explorer. When you click mouse to copy the content, you will see a message box appearing, alerting that you can’t copy.

Now you have successfully forbidden the viewers to copy your content. You can see that this effect can’t be achieved just by depending on the ordinary edit. Some special effect like that can only be achieved by using codes. So it is very necessary to learn about the HTML codes.

Related Posts

]]> http://www.donotyet.com/2009/12/07/dreamweaver8-tutorial-forbid-the-viewers-to-copy-the-webpage-content-by-using-html-codes/feed/ 1 10 Useful Tips for HTML Coding http://www.donotyet.com/2009/10/07/10-useful-tips-for-html-coding/ http://www.donotyet.com/2009/10/07/10-useful-tips-for-html-coding/#comments Wed, 07 Oct 2009 09:06:43 +0000 admin http://www.donotyet.com/2009/10/07/10-useful-tips-for-html-coding/ HTML is a language for describing web pages.

  • HTML stands for Hyper Text Markup Language
  • HTML is not a programming language, it is a markup language
  • A markup language is a set of markup tags
  • HTML uses markup tags to describe web pages

In this article, 10 tips are collected together and offered for beginners, specifically for those who are just diving into web development with one year of knowledge or less. As long as bearing in mind and flexibly applying them in practical exercises, you definitely can write masterful codes and become a good programmer.

clip_image002

1. Be Sure to Close Tags

We always see some source codes in web documents like this

  1. <li>Some text here.
  2. </li><li>Some new text here.
  3. </li><li>You get the idea.
  4. </li>

Maybe in the past we could ignore this, but in today’s standards, it should be 100% avoided. Be sure to close your tags, otherwise you’ll encounter corroboration and malfunction issues at every turn.

2. Declare the Correct DocType

The author used to participate quite a bit in CSS forums. When a user had some questions, before we look at their situation, we suggest him that two things go first.

  1. ①Validate the CSS file. Fix any necessary errors.
  2. ②Add a doctype.

Only if define doctype before HTML tags begin, which tell the browser that HTML, XTHML or mixture of both consist in the page, the browser can analysis tags correctly.

Usually there are four doctypes to choose from.

  1. ①< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. ②< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. ③< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. ④< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Different opinion always exists in the discussion about what kind of declaration is correct. Most people think the most strict is the best, however researches show that many people choose using HTML 4.01 Strict because most browsers analysis this declaration in a ordinary way. But the bottom line is whether it fits you or not. Therefore you have to think over it and choose your correct one.

3. Do Not Use Inline Styles

When you work really hard on writing codes, it can be alluring to take the easy route and sneak in a bit of styling like this

  1. <p style="color: red;">i want you to notice this</p>

It looks like convenient and no-big-deal, but troubles are brought without noticed. It is better for you to use styles after finish its structure and content. A better method is reference that P tag from your external stylesheet.

  1. someElement > p {
  2. color: red;
  3. }

4. Place all External CSS Files within the Head Tag

Technically, you can place stylesheets wherever you want. Though, the HTML requirement recommends that they be placed within the document head tag. The primary advantage is that your pages will apparently load faster.

  1. <head>
  2. <title>My Favorites Kinds of Corn</title>
  3. <link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />
  4. <link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />
  5. </head>

5. Consider Placing Javascript Files at the Bottom

Remember a principle that we should make a page load as fast as it can. When loading a script, the page will not continue until the entire file has been loaded. It wastes a lot of time.

If you only want some like add a functionality after click a button, then it is a best choice to place those files at the bottom before the closing body tag.

For example

  1. <p>And now you know my favorite kinds of corn. </p>
  2. <script type="text/javascript" src="path/to/file.js"></script>
  3. <script type="text/javascript" src="path/to/anotherFile.js"></script>

6. Do Not Use Inline Javascript. It’s Already 2009!

Years ago there was an ordinary way that people placed JS directly within tags, especially in simple image galleries. In essence, a “onclick” attribute was appended to the tag and its value is equal to some JS method. We should not do this. Instead, transfer this code to an external JS file and use “addEventListener/attachEvent” to “listen” for your preferred event. Or, if using a framework like jQuery, just use the “click” method.

  1. ① $(’a#moreCornInfoLink’).click(function() {
  2. ② alert(’Want to learn more about corn?’);
  3. ③ });

7. Validate Continuously

clip_image003

Many people don’t really understand the value of validation. In brief, validation is work for you, not against.

If you just started web design, I strongly recommend this web develop toolbar which called Web Developer 1.1.8. You can download it on Internet and and use the “Validate HTML” and “Validate CSS” options continuously. CSS is not only a easy language to learn, but also a hard nut to crack. You’ll find that it’s your inexact makeup that cause lots of problems. Therefore, the best way is validation, validation and validation.

8. Use H1-H6 Tags

It is recommended to use all six of these tags in page, although most people only use the top four. There will be a lot of advantages when the maximum are used, so force yourself to replace that P tag with an H6 when appropriate.

9. If Building a Blog, Save the H1 for the Article Title

clip_image004

Though it is depend on your needs and your website, I recommend that when you build a blog, save the H1 for the article title. It really do good to SEO, so you’d better try this.

10. Wrap Navigation with an Unordered List

clip_image006

Websites usually have their navigation and you can formate it like this

  1. <div id="nav">
  2. <a href="#">Home </a>
  3. <a href="#">About </a>
  4. <a href="#">Contact </a>
  5. </div>

But you’d better not do this if you want write much better code. UL tag is meant to contain items, so it’s better to formate it like this

  1. <ul id="nav">
  2. <li><a href="#">Home</a></li>
  3. <li><a href="#">About</a></li>
  4. <li><a href="#">Contact</a></li>
  5. </ul>

Related Posts

]]> http://www.donotyet.com/2009/10/07/10-useful-tips-for-html-coding/feed/ 0