Section 4 : HTML Tab – Examples

最新推荐文章于 2025-09-13 09:06:35 发布

zf900901298

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量1.1k

点赞数

分类专栏： Firebug Tutorial 文章标签： javascript firebug web service

Firebug Tutorial 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何利用Firebug工具检查网页元素，包括查看HTML结构、复制CSS样式及搜索特定元素的方法。通过实例演示了如何分析苹果iPod Touch网页的菜单栏设计。

Example 1.1. How to inspect the HTML element or how to figure out the structure of the web design you like

Note: I’m *NOT* encouraging people to copy the other people creative work. I’m just showing how to learn other people’s creation. Don’t get me wrong. :) If you are working in small software company, you probably might wear the multiple hats, which means you have to do coding (of course), user requirement, system design, UI design and so on. As you are not a designer, you may have some problems in designing things and not very sure about how to make things looks better.. so, you probably need to check other web designs and you need to adopt those designs to create your own one. For this fact, Firebug is the best tool for you. So, remember that it is not about copying thing. :)

Scenario ~ Let’s say you think that the menu bar of iPod Touch webpage of apple is impressive. You wanna know how the toolbar is created.

Open IPod Touch webpage in Mozilla Firefox.
Click “Inspect” button from the toolbar of Firebug console.
Move your cursor on the menu of the website by using mouse.
Click the element (menuitem) that you wanna inspect ( Note: I suggested you to select the first item of menu because it is easy to find out about the main HTML element. (Let’s say we selected “Apple icon” ))

(In our example, we selected the first menuitem of menu in webpage so that the related HTML element <A> tag is highlighted in “View Source” HTML panel. Don’t forget to take a look the “Style” panel at the right-side. The CSS rule that are styling to that <A> tag are shown in that panel. Then, You can easily figure out that the DIV called “global header” is the main for this menu. )
Select the DIV “globalheader”
Right-click on the element and select “Copy HTML ” from content menu.
Create new HTML file and pasted it within <body> tag.
After that, Check the CSS rule in Style panel. (In our case, “#globalheader” and “html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input” are the CSS rule that are styling to that A link. The blue link “nav.css” shows the source CSS file. Plus, the inherited CSS rules from ipod.css and base.css are also shown in “Style” panel)
So, copy those CSS and pasted them in your html file.You can repeat this step to find the CSS rule for each HTML element. But it took some times to grasp all CSS rules since you have to go one HTML element after another.. So, the best way would be copying all CSS rules from the source.
In order to copy the whole CSS rules from the source file, click the blue link “nav.css” then it will take you to “Style” panel (not the one from HTML panel) as the picture below.

The CSS rule that you selected in the “Style” subpanel of HTML panel will be highlighted.
Click “Edit” button on the toolbar of “Style” panel
Select all CSS rules and Copy
then, paste them in your HTML file.
Copy the inherited CSS rule for body tag from base.css and paste them in your HTML file.
Check the images path and copy those required images also.
Finally, you got the great menubar that you are looking for.

Let me know if you are not very clear about those steps.. I have uploaded the sample here. [link] You can download it if you wanna take a look the sample.

Screenshot

*****

Example 1.2. “Scroll into View” and “Searching” in HTML tab.

Searching feature of HTML is useful if you wanna find something in HTML Source. (The default search of Mozilla Firefox is for searching the text. not for searching the HTML source.) Searching feature is more helpful if you use “Scroll Into View” after search. If you found something you want in HTML tab then you can click “Scroll Into View” to scroll that thing into view.

Scenario : How to find your photo in 2kbloggers Photo Montage Page?

Let’s say you are one of members of 2kbloggers team. so, your photo will be included inPhoto Montage page of 2kbloggers website. As there are too many photos in that page, it is not so easy to find yourself among those photos. The Firefox default search is useless for that case. Fortunately, The search feature of HTML panel of Firebug will help you to find your photo in very easy way.

Steps ~

Launch Firebug console in that page.
Go to HTML Console
Type your blog link (eg: http://michaelsync.net) in Search textbox. (note: please type a lit bit slow and wait)
After you finished typing, the Anchor element which is belong to your link will be highlighted in “View Source” panel.
Move your cursor on the src of image link. Firebug will show the photo that you are looking for.
Right-click on that element and click “Scroll into View”
Then, check the photo at the first line under toolbar of Mozilla Firefox. Your photo will be there at the first line..