Thiết kế website Hội An

Người đăng: Unknown

vào lúc 07:33

Nếu bạn là một nhà thiết kế website chuyên nghiệp, bạn chắc hẳn sẽ đồng ý rằng để thu hút khách tham quan, bạn phải thiết kế 1 website thật rõ ràng, trực quan và bắt mắt. Vì vậy điểm mấu chốt ở đây chính là bộ menu được thiết kế rõ ràng, dễ sử dụng và lôi cuốn người dùng.

Slick Tabbed Content Area using CSS & jQuery - Demo | Details

Smooth Animated Menu with jQuery — Demo | Details | Download

CSS Sprites2 – It’s JavaScript Time — Demo | Details

jQuery Random Link Color Animations — Demo | Details

Animated Drop Down Menu with jQuery — Demo | Details | Download

Apple style menu and improve it via jQuery — Demo | Details | Download

Drop-down Nav Menu with HTML5, CSS3 and jQuery — Demo | Details | Download

Lava-Lamp Style Navigation Menu — Demo | Details | Download

A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery — Demo | Details | Download

Accordion Menu Using jQuery — Demo | Details | Download

jQuery idTabs — Demo | Details | Download

Multilevel Dropdown menu with CSS and improve it via jQuery — Demo | Details | Download

Using jQuery for Background Image Animations — Demo | Details

Superfish – “menu jQuery plugin” - Demo | Details | Download

Drop down menu with jQuery — Demo | Details

Floating HTML Menu Using jQuery and CSS — Demo | Details | Download

jQuery & CSS Example – Dropdown Menu — Demo | Details

Designing the Digg Header: How To & Download — Demo | Details | Download

jQuery Tabbed Navigation — Demo | Details

Color Fading Menu with jQuery — Demo | Details | Download

Người đăng: Unknown

vào lúc 07:27

in codeweb, seo_web

0 nhận xét

Không một ai có thể quản trị website của mình 24 giờ / ngày / tuần, và đương nhiên bạn cũng không muốn mình là người cuối cùng phát hiện ra website của mình gặp trục trặc không thể truy cập được. Có nhiều công cụ miễn phí giúp bạn dễ dàng theo dõi website của bạn và thông báo qua email nếu có trục trặc khi website của bạn không truy cập được. Chúng tôi xin giới thiệu đến các bạn 5 công cụ để theo dõi website của mình. Cái đầu tiên cũng là cái mà chúng tôi đang xài...

1. HyperSpin
Theo dõi website, thông báo lỗi qua email & SMS

2. Mon.itor.us
Là một cung cụ miễn phí, mạnh mẽ, dễ sử dụng để quản lý website, server.

3. Site 24×7
Site24x7 là một công cụ quản lý, theo dõi website khá nhanh, dễ sử dụng...

4. Internet Vista
Một công cụ quản lý khác có hỗ trợ báo lỗi qua email, sms...

5. Server Mojo
Theo dõi và báo cáo thời gian server bị down.

Người đăng: Unknown

vào lúc 07:25

in codeweb

0 nhận xét

Menu là một phần không thể thiếu trong các website. Chúng tôi xin giới thiệu đến các bạn 1 bộ dropdown menu cực đẹp dựa trên nền Jquery & CSS. Hãy xem ví dụ sau để có thể thiết kế 1 menu đẹp cho website của bạn.

Bước 1: Phần HTML
Tạo đoạn mã sau bằng HTML
01.<ul class="topnav">
02.
03.<li><a href="#">Home</a></li>
04.
05.<li>
06.
07.<a href="#">Tutorials</a>
08.
09.<ul class="subnav">
10.
11.<li><a href="#">Sub Nav Link</a></li>
12.
13.<li><a href="#">Sub Nav Link</a></li>
14.
15.</ul>
16.
17.</li>
18.
19.<li>
20.
21.<a href="#">Resources</a>
22.
23.<ul class="subnav">
24.
25.<li><a href="#">Sub Nav Link</a></li>
26.
27.<li><a href="#">Sub Nav Link</a></li>
28.
29.</ul>
30.
31.</li>
32.
33.<li><a href="#">About Us</a></li>
34.
35.<li><a href="#">Advertise</a></li>
36.
37.<li><a href="#">Submit</a></li>
38.
39.<li><a href="#">Contact Us</a></li>
40.
41.</ul>

Bước 2: Phần CSS
Nhúng đoạn CSS sau vào giữa thẻ <head>

001.ul.topnav {
002.
003.list-style: none;
004.
005.padding: 0 20px;
006.
007.margin: 0;
008.
009.float: left;
010.
011.width: 920px;
012.
013.background: #222;
014.
015.font-size: 1.2em;
016.
017.background: url(topnav_bg.gif) repeat-x;
018.
019.}
020.
021.ul.topnav li {
022.
023.float: left;
024.
025.margin: 0;
026.
027.padding: 0 15px 0 0;
028.
029.position: relative; /*--Declare X and Y axis base for sub navigation--*/
030.
031.}
032.
033.ul.topnav li a{
034.
035.padding: 10px 5px;
036.
037.color: #fff;
038.
039.display: block;
040.
041.text-decoration: none;
042.
043.float: left;
044.
045.}
046.
047.ul.topnav li a:hover{
048.
049.background: url(topnav_hover.gif) no-repeat center top;
050.
051.}
052.
053.ul.topnav li span { /*--Drop down trigger styles--*/
054.
055.width: 17px;
056.
057.height: 35px;
058.
059.float: left;
060.
061.background: url(subnav_btn.gif) no-repeat center top;
062.
063.}
064.
065.ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
066.
067.ul.topnav li ul.subnav {
068.
069.list-style: none;
070.
071.position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
072.
073.left: 0; top: 35px;
074.
075.background: #333;
076.
077.margin: 0; padding: 0;
078.
079.display: none;
080.
081.float: left;
082.
083.width: 170px;
084.
085.border: 1px solid #111;
086.
087.}
088.
089.ul.topnav li ul.subnav li{
090.
091.margin: 0; padding: 0;
092.
093.border-top: 1px solid #252525; /*--Create bevel effect--*/
094.
095.border-bottom: 1px solid #444; /*--Create bevel effect--*/
096.
097.clear: both;
098.
099.width: 170px;
100.
101.}
102.
103.html ul.topnav li ul.subnav li a {
104.
105.float: left;
106.
107.width: 145px;
108.
109.background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
110.
111.padding-left: 20px;
112.
113.}
114.
115.html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
116.
117.background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
118.
119.}

Bước 3: Phần JQUERY
Nhúng đoạn javascript sau vào giữa thẻ <head>, trên đoạn CSS ta vừa nhúng.

01.<script type="text/javascript" src="/<a href="view-source:http://code.jquery.com/jquery-latest.js">http://code.jquery.com/jquery-latest.js<;/a>"></script>
02.<script type="text/javascript">
03.$(document).ready(function(){
04.
05.$("ul.subnav").parent().append("<span></span>");
06.//Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
07.
08.$("ul.topnav li span").click(function() {
09.//When trigger is clicked...
10.
11.//Following events are applied to the subnav itself (moving subnav up and down)
12.$(this).parent().find("ul.subnav").slideDown('fast').show();
13.//Drop down the subnav on click
14.
15.$(this).parent().hover(function() {
16.}, function(){
17.$(this).parent().find("ul.subnav").slideUp('slow');
18.//When the mouse hovers out of the subnav, move it back up
19.});
20.
21.//Following events are applied to the trigger (Hover events for the trigger)
22.}).hover(function() {
23.$(this).addClass("subhover");
24.//On hover over, add class "subhover"
25.}, function(){ //On Hover Out
26.$(this).removeClass("subhover");
27.//On hover out, remove class "subhover"
28.});
29.
30.});
31.</script>

Chú ý: Nếu trình duyệt web của bạn có bật javascript, menu sẽ chạy như sau

Nếu trình duyệt không bật javascript, sẽ có dạng như sau:

Bạn có thể tải đoạn mã chúng tôi đã làm sẵn để tham khảo tại địa chỉ:

Người đăng: Unknown

vào lúc 07:04

in codeweb

0 nhận xét

Có rất nhiều công cụ thiết kế website có sẵn trên mạng giúp bạn dễ dàng hoàn thành nhiệm vụ nhanh chóng. Các công cụ phục vụ thiết kế web này ngày càng được nhiều nhà phát triển cung cấp miễn phí cho bạn. Mỗi một người thiết kế luôn có sẵn 1 bộ công cụ cho riêng mình. Nhật Quang Informatics xin giới thiệu 25 bộ công cụ được chúng tôi sưu tầm và thường sử dụng. Các bạn hãy tự trang bị cho chính mình 1 bộ công cụ theo ý mình để phục vụ trong quá trình thiết kế website của các bạn.

HTML Entity Character Lookup
Giúp bạn nhanh chóng tìm thấy các mã HTML trên web

Blueprint CSS framework
Bộ framework CSS có sẵn, hỗ trợ cả cho các màn hình in ấn

Typetester
So sánh font chữ với màn hình

Em Calculator
Một công cụ java nhỏ giúp bạn dễ dàng truy cập và sửa đổi CSS

Web Developer Toolbar
Thanh công cụ trên firefox có rất nhiều tính năng hỗ trợ thiết kế web

MeasureIt
Tính số pixel trên màn hình cho bạn

ColorZilla
Bảng màu giúp bạn dễ lựa chọn mã màu sắc

Firebug
Bộ công cụ hỗ trợ trên nền Firefox rất mạnh trong thiết kế web mà hầu hết các nhà thiết kế website đều cần. Nó có thể giúp bạn chỉnh sửa trực tiếp HTML, Javascript, CSS... trực tiếp trên website để xem trước.
Firebug