Hỡi Nhưng Ai Mới Bắt đầu Tạo Web Hãy đọc Cái Này

n_u_h_o_n · 29 Tháng mười hai 2006

10 Ý TƯỞNG :
-----------------
1.Dễ di chuyển và dễ đọc:
Hãy tạo một hệ thống di chuyển rõ ràng, trực quan bởi vì không có gì làm khách hàng bạn thất vọng là họ không thể tìm kiếm thông tin trong web một cách dễ dàng. Bạn hãy đặt các liên kết ở đầu trang hoặc cuối trang,như thế nội dung trang web của nbạn sẽ được hiển thị dễ dàng. Nếu thích thì hãy sử dụng thêm java nữa cho đẹp. Nhưng nhớ là đừng có lạm dụng có nhiều sẽ gây chật chội khó chịu cho người dùng, tốt nhất là chỉ có 2-3 chổ có liên kết trong một trang.
2.Hãy tạo các khoảng trắng
Đừng có để trang web của bạn toàn là chữ nối chữ. hãy cho nó một vài khoảng không gian trắng( Ở đây là phần trùng màu với nền chứ không phải màu trắng đâu).Nó sẽ giúp cho người trình duyệt thư giản con mắt và là một công cụ để phân chia nội dung thể hiện những nội dung qua trọng. Hãy dùng những bức ảnh cùng màu nền hay dùng bảng, bạn sẽ tạo được thôi.
3.Phải hướng về người dùng
Bạn phải biết khách hàng mình là ai để tạo ra những web phù hợp với họ, rõ ràng tạo một trang web về ca nhạc thì khác tạo một trang web thương mại cho một công ty. Để tham khảo, tốt nhất là hãy visit những trang có cùng chủ đề với bạn. Từ đó bạn sẽ có phong cách tạo web thích hợp.
4.Gom theo từng nhóm
Hãy để cho các nội dung có quan hệ gần nhau để bảo đảm thông tin được tìm thấy một cách dễ dàng. Hãy đặt những thông tin quan trọng ngang nhau cùng một trang. Nó sẽ giúp nguời dùng theo dõi thông tin trực quan hơn, dễ hơn.
5.Tính nhất quán

Hãy đãm bảo rằng các phần tử giống nhau phải có cùng tham số thiết kế nhưu nhau, chẳng hạn như các kiểu định dạng, ảnh, màu nền, cách bố trí.... Nếu bạn sử dụng nhiều phần tử thì bạn không những làm cho khách viếng thăm cảm thấy rắc rối mà ngay cả bạn cũng cảm thấy như vậy. Hãy nên có từ 2-4 kiểu màu và font cho một trang web.

6. Tin tức nhanh

Không có gì phải bàn nếu nói các trang web được viếng thăm thường xuyên là một phần do tin tức được cập nhật thường xuyên. Bạn nên nhớ một sự thay đổi nhỏ cũng đã tạo ra một sự quan tâm.

7. Nhanh và nhỏ

Tốc độ, hãy cho web tải nhanh chóng nhất.Bạn sẽ không thuyết phụa được một khách hàng nào về tài thiết kế của bạn nếu như trang của bạn tải xuống như rùa. Hiện nay bạn có thể dùng flash thay cho các trình soạn ảnh.

8. Dễ truy nhập

Mỗi người dùng thì có một trình duyệt khác nhau, một hệ điều hành khác nhau nên hãy nhớ rằng web của bạn phải đáp ứng cho gần hết các trình duyệt. Có nư vậy thì đở mất khách

9. Nguyên tắc nhấp 3 lần

Mỗi thông tin của trang web phải đến với khách hàng không quá ba lần nhắp chuột. Còn với các thông tin khẩn hay các biểu mẫu dăng kí thi chi một lần.

10.Xây dựng sơ đồ site

Kki site quá lớn thì việc tìm kiếm thông tin quả là rất khó khăn. Bạn nên xây dựng trang sơ đồ site để có thể tới mọi ngõ ngách trong site. Trang này cần gì? Không cần đẹp mà cần tính năng động của nó, nó phải tải xuống nhanh nhất.

n_u_h_o_n · 29 Tháng mười hai 2006

Công cụ desgin WEB
Phần mềm thiết kế
Muốn thiết kế một trang web cho riêng mình, bạn cần phải có một trình thiết kế web cho mình. Ngoài những chương trình Frontpage, Dreamweaver, bạn có thể thiết kế bằng nhiều chương trình khác. Có thể tải các chương trình này tại địa chỉ http://www.softpile.com/ hoặc http://www.softlist.net/. Hiện nay ngoài thị trường cũng có bán một số CD thiết kế web chuyên dụng như Adobe Golive, Microsoft Visual InterDev, Web Namo Editor... bạn có thể tìm mua.

Giao diện cho trang web:
Đây là phần có thể làm cho bạn đau đầu đấy vì việc tự tạo một giao diện cho chính mình thì rất khó. Nếu bạn không thích “vắt óc” suy nghĩ, bạn hãy tìm đến địa chỉ http://www.freesitetemplates.com/ nơi đây cung cấp cho bạn các kiểu mẫu (templates) trang web khá đẹp mắt thuộc nhiều chủ đề. Các file templates hầu hết được lưu dưới dạng file nén .ZIP. Một địa chỉ khác chuyên về đánh giá các trang web đẹp là http://www.coolhomepages.com/ sẽ giới thiệu những địa chỉ website được thiết kế độc đáo dùng nhiều công nghệ mới như Flash, CFM... Nếu máy bạn có cài Microsoft Frontpage, bạn có thể dễ dàng hiệu chỉnh các trang này bằng cách bấm vào nút “Edit with Frontpage” trên thanh công cụ. Còn không bạn hãy save lại trang web và mở bằng các trình thiết kế web thông dụng khác để sửa lại theo ý thích.

Nâng cấp giao diện:
Sau khi hoàn tất giao diện chính cho trang web, chắc bạn cũng muốn làm cho trang web của mình “bắt” mắt hơn. Bạn hãy đến với địa chỉ http://www.guistuff.com/ để tìm kiếm thêm những phần như menu động, thanh cuộn màu, các logo, ký hiệu độc đáo khác để chèn vào website của mình. Đây cũng là địa chỉ cung cấp templates khá nổi tiếng.

Web động đậy
Để giúp duy trì hoạt động website một cách hiệu quả bạn cần có thêm những phần giao lưu, trò chuyện. Để làm được bạn cần phải tìm hiểu một loại ngôn ngữ lập trình cho máy chủ. Bước đầu tiên nên đến với hai trang http://www.planet-source-code.com, http://www.w3schools.com để tìm hiểu những kiến thức cơ bản về lập trình máy chủ. Sau đó nếu muốn nghiên cứu kỹ hơn bạn hãy vào các website như:

http://www.aspin.com/ để tìm hiểu về ASP (Active Server Pages).

http://www.411codes.com/ để tìm hiểu về ASP.NET.

http://www.hotscripts.com/ để tìm các bài học và mã nguồn về PHP, ASP, Perl, Cold Fusion, CFML và Flash.

http://www.js-examples.com/ để tìm hiểu JavaScripts.

http://www.extensinet.com/ để tìm hiểu XML.

Các trang web trên đều cung cấp kỹ lưỡng cho bạn các ngôn ngữ lập trình máy chủ tương ứng và còn cung cấp thêm mã nguồn để tiện việc nghiên cứu.

Sử dụng web “động đậy” có sẵn: Đây là loại hình dịch vụ rất phổ biến trên mạng. Các dịch vụ này sẽ tự động tạo cho bạn những ứng dụng trên mạng như diễn đàn (forums), lưu bút (guest book), ý kiến phản hồi (feedback), phòng chat (chat room), bộ đếm (counter). Hai trang http://www.pollit.com; http://vnet.webprovider.com/ có dịch vụ hỗ trợ rất tốt loại hình này. Nguyên tắc cơ bản của dịch vụ này là bạn vào đăng ký cho mình một tên sử dụng (username), sau đó có thể tạo ra các ứng dụng trên mạng cho riêng mình và sử dụng website của mình cho liên kết đến đây, mọi hoạt động đều do các dịch vụ này quản lý.

Xuất bản web
Lựa chọn nơi đặt website của mình: Để có thể đưa trang web của mình lên mạng bạn cần phải tìm đến loại hình dịch vụ hosting (nơi cho phép lưu trữ và truy cập đến trang của bạn). Nếu trang của bạn được thiết kế đơn giản theo ngôn ngữ HTM thì bạn có thể đăng ký tại trang http://www.easyspace.com/ hoặc http://www.freeservers.com/ (20 MB dữ liệu) là được. Còn nếu trang web của bạn có sử dụng thêm các ngôn ngữ như ASP hay PHP bạn cần phải tìm kiếm đến các hosting tương thích. Địa chỉ tham khảo:

ASP : http://www3.domaindlx.com/.

PHP : http://www.spacetowns.com hoặc http://www.it-pc.de/.

Đối với vấn đề này bạn nên đọc kỹ những hướng dẫn trên trang web của có thể đưa trang web của mình lên đúng cách. Và do các dịch vụ này đều miễn phí nên đôi khi họ sẽ đặt quảng cáo vào trang web của bạn, bạn có thể xóa bỏ quảng cáo nhưng nếu loại bỏ quảng cáo thì khi bị phát hiện trang web của bạn sẽ bị xóa lập tức.

“Rút ngắn khoảng cách” : Các địa chỉ do dịch vụ hosting cung cấp đôi khi lại quá dài và quá khó nhớ. Để có thể rút ngắn các địa chỉ website này bạn có thể tìm đến các trang www.freeurl.com, www.jwdx.com, www.cjb.net, www.dot.tk, www.v3.com, www.hotredirect.com.

Các loại hình dịch vụ khác: Ngoài ra, trên mạng còn có một số dịch vụ khá độc đáo như: http://www.namezero.com/ (đăng ký miễn phí một tên miền .com trong thời gian một năm), http://www.v-communication.com/ và http://www.freenetname.co.uk/ (đăng ký miễn phí tên miền .co.uk trong một năm), http://bannerkillers.cjb.net/ và http://cadfree1.virtualave.net/wbindex.htm giúp bạn xóa các quảng cáo phiền phức trên các web hosting, http://www.topica.com/ để bạn tạo một mailing-list miễn phí.

n_u_h_o_n · 29 Tháng mười hai 2006

CSS-Cascading Style Sheet
Css - bảng kiểu xếp chồng, gọi tắt là bảng kiểu. Nếu bạn chưa quen với khái niệm này thì bạn hãy xem như đó là một phần mở rộng của HTML.

Người ta ca ngợi rất nhiều về bảng kiểu nhưng với sự hạn chế của mình thì tôi chỉ mới biết được một số ưu điểm sau của bảng kiểu :
* Tạo ra tính nhất quán trong web.
* Tiết kiệm thời gian khi bạn thiết kế.
* Làm được những việc mà bạn không thể làm với các thẻ bình thường của HTML.
CSS What

Thực chất bảng kiểu là danh sách các quy tắc của được định nghĩa trong HTML ( Trong HTML có những quy tắc và hành vi nhưng ít khi bạn thấy chúng cũng như sửa đổi chúng ). Tuy nhiên với bảng kiểu thì cho phép bậntọ ra các quy tắc riêng của mình và ghi đè lên các quy tắc của HTML,vốn rất hạn chế trong việc thiết kế. Hãy cứ nghĩ khi bạn làm bảng kiểu như là bạn vừa quy định dạng quá khứ của các đồng từ trong Tiếng Anh đều thêm ED thay vì phảI bỏ sức học các dạng bất quy tắc của chúng

Loại bảng kiểu:

Bảng kiểu bên trong : chứa dữ liệu bên trong mã HTML của một tang nào đó và vhỉ áp dụng cho trang đó.
Bảng kiểu bên ngoài : chứa dữ liệu bên trong một tệp có dạng *.css từ
Đó có thể áp dụng cho toàn bộ trang web của bạn.
Làm bảng kiểu bên ngoài

Cấu trúc:
.namestely{ phần bạn địng nghĩa}

Ví dụ

.anh1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 15px;
font-weight: normal;
font-variant: small-caps;
text-transform: uppercase;
color: #FF0000;
text-decoration: underline overline line-through blink;
background-attachment: scroll;
background-color: #999999;
background-image: url(/images/m_bansung.gif);
background-repeat: repeat;
background-position: left top;
letter-spacing: 1em;
text-align: left;
text-indent: 1pt;
vertical-align: 12%;
word-spacing: 1em;
white-space: pre;
display: block;
clear: both;
float: left;
height: auto;
width: auto;
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 1px;
border-top-style: dotted;
border-right-style: dashed;
border-bottom-style: double;
border-left-style: none;
border-top-color: #00FF00;
border-right-color: #0000FF;
border-bottom-color: #CC0000;
border-left-color: #9999FF;
list-style-position: outside;
list-style-type: square;
overflow: scroll;
position: relative;
visibility: visible;
z-index: auto;
left: auto;
top: auto;
right: auto;
bottom: auto;
clip: rect(auto auto 1px auto);
}
Trong đó
font-family: họ font
font-size: kích thước
font-style: kiểu chữ
line-height: chiều cao của dòng văn bảng
font-weight: độ đậm của văn bảng
font-variant: chọn biến thể của font chữ;
text-transform: cho phép thay đổi dạng chữ được chọn;
color: màu của chữ;
text-decoration: xác định văn bảng được gạch dưới ,gạch trên ,nhấp nháy;
Chèn css vào

<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
Đối với kiểu bảng trong

<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>

n_u_h_o_n · 29 Tháng mười hai 2006

Học thêm :
Các tag căn bản trong ngôn ngữ html :
1 trang web viết bằng ngôn ngữ HTML bắt đầu bằng tag <html> và kết thúc bằng </html>
Phần nội dung của trang Web nằm trong phần <body> .... </body> .

I)Tạo liên kết

-Tiêu đề(Title) cho trang web :
<HEAD>
<TITLE>Title cho trang</TITLE>
</HEAD>

-Liên kết thông qua text :
<A HREF="URL">Text hiển thị liên kết</A>

-Liên kết đến các section trong trang hiện thời :
Tạo ra section:
<P>
<A HREF="Section">Text miêu tả section.</A>
</P>

-Text liên kết đến section:
<A NAME="Tên-section">Text để liên kết tới setion</A>

-Liên kết thông qua picture:
<A HREF="URL">
<IMG SRC="tên file hình ảnh"></A>

-Tạo liên kết gốc :
<BASE HREF="http://www.abc.com">

II)Các lệnh với chữ :
-Chữ đậm : <B>Các chữ cần viết đậm</B>
-Chữ nghiêng : <I>Các chữ cần viết nghiêng</I>
-Chữ gạch chân:<U>Các chữ cần gạch chân</U>
-Tạo đoạn : <P> Các chữ trong đoạn</P>
-Viết theo lề:<P ALIGHN=Right>Các chữ trong đoạn văn</P>
-Xuống dòng :<BR>Chữ cần viết trong dòng mới
-Chữ ngăn cách bởi gạch ngang : <HR>Các chữ ngăn cách với dòng trên bởi gạch ngang
-Định kích cỡ và độ dài dòng gạch ngang : <HR size=5 with=50%>Text
-Tạo heading: <H#> dòng tiêu đề </H#> trong đó # có giá trị nhỏ dần 1 đến 6
-Tạo chú thích: 
-Tạo pre-formated: <PRE>Đoạn văn ở chế độ pre-formated</PRE-FORMATED>

III)Tạo vùng hình ảnh
Tạo image-map (vùng hình ảnh) : <img src="image.gif" usermap='#map_name'>
Đặt tên cho vùng <MAP NAME="tên vùng">
Xác định toạ độ cho vùng và hình dạng : <AREA COORDS="x,y,z,t" SHARP="RECT" HREF="URL">
với x,y,z,t là các số nguyên chỉ toạ độ ;
SHARP có thể có các dạng như "RECT","POLY","Circle"
HREF="URL" có nhiệm vụ tạo liên kết đến URL khi ta ấn vào vùng chọn

IV)Làm việc với trang:
-Tạo mầu nền: <body bgcolor="rrggbb">
với rr,gg,bb là các số tương ứng với tỉ lệ màu đỏ , xanh lá cây , xanh dương
-Lấy ảnh làm nền : khai báo trong phần body : background="tên hình ảnh nền"

V)Tạo table:
-Tạo table: <TABLE>Nội dung của bảng </TABLE>
-Tạo cột : <TR> Nội dung của cột </TR>
-Thêm nội dung cột : <TD> Nội dung </TD>
-Tạo heading : <TH> heading </TH>
-Kích thước lề:<TABLE BORDER="Number">....</TABLE>
-Độ rộng cột: <TABLE WIDTH="Number">....</TABLE>
-Tạo tiêu đề: <CAPTION> tiêu đề </CAPTION>
-Căn giá trị :<TABLE Alighn="Kiểu">....</TABLE> trong đó có 3 kiểu: LEFT,RIGHT,CENTER

VI)Tạo form:
(Form chứa thông tin để gửi tới server )

-Tạo form:
<FORM ACTION="_URL_" METHOD="METHOD"> </FORM>
Trong đó ACTION="_URL_" chỉ ra server cần gửi thông tin đến
METHOD="METHOD" chỉ ra phương thức gửi POST hoặc GET
+POST là gửi từng phần
+GET là gửi toàn bộ

-Chọn kiểu dữ liệu cho form:
<FORM ACTION="_URL_" METHOD="METHOD">
<INPUT NAME="name" TYPE="type">
</FORM>

-Kiểu dữ liệu là TEXT:
<FORM ACTION="_URL_" METHOD="METHOD">
name:<INPUT NAME="name" TYPE="TEXT" SIZE="size" MAXLENGTH="number">
</FORM>
Trong đó : SIZE là kích thước text , maxlength là độ dài tối đa của chuỗi kí tự
name là tên của form

-Nhập form text dạng password:
password:<INPUT TYPE="PASSWORD" NAME="PASS" SIZE="size">

-Nhập form text dạng ẩn:
hidden:<INPUT TYPE="HIDDEN" NAME="HIDDEN" SIZE="size">

-Tạo nút chọn kiểu YES-NO(tạo ra 2 ô để ta đánh dấu lựa chọn):
<P>Tiêu đề chọn lựa</P>
<P>
<INPUT TYPE="RADIO" NAME="RADIOBUTTON" VALUE="RADIOBUTTON">
YES</P>
<P>
<INPUT TYPE="RADIO" NAME="RADIOBUTTON" VALUE="RADIOBUTTON">
NO</P>
</P>

-Tạo check box(có thể chọn nhiều mục bằng cách đánh dấu) :
Ví dụ dưới đây sẽ tạo ra 1 form lựa chọn các kiểu computer mà bạn thích, có thể chọn hơn 1 kiểu:
<P>Type of Computer</P>
<P>
<INPUT TYPE="CHECKBOX" NAME="CHECKBOX" VALUE="CHECKBOX">
PENTIUMII</P>
<P>
<INPUT TYPE="CHECKBOX" NAME="CHECKBOX2" VALUE="CHECKBOX">
PENTIUMIII</P>
<P>
<INPUT TYPE="CHECKBOX" NAME="CHECKBOX3" VALUE="CHECKBOX">
PENTIUMIV</P>

-Tạo reset form :
Form này có nhiệm vụ xoá các lựa chọn trong check box , đưa check box trở về trạng thái ban đầu:
Đặt form này ngay đằng sau của check box:
<P>
<INPUT TYPE="RESET" NAME="RESET" VALUE="RESET">
</P>

-Gửi thông tin trong form tới server:
Đặt form này ngay đằng sau của check box:
<P>
<INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT">
</P>

-Tạo pop-up menus:
pop-up menus là form có dạng hộp check , khi ta ấn vào hộp thì các mục trong hộp sẽ hiện ra
Dưới đây sẽ tạo ra pop-up cho 1 form lựa chọn kiểu thanh toán cho khách hàng
<P ALIGHN="CENTER">Kiểu thanh toán
<SELECT NAME="Seclect">
<OPTION VALUE="C1">Cash</OPTION>
<OPTION VALUE="C2">Cheque</OPTION>
<OPTION VALUE="C3">Creditcard</OPTION>
</SELECT>
</P>

-Tạo list box:
List box cũng giống như text box nhưng chỉ khác ở cách trình bày , nó hiện ra 1 danh sách lựa chọn
Dưới đây sẽ tạo ra 1 danh sách các hệ điều hành cho khách hàng lựa chọn , khách hàng có thể lựa chọn
nhiều hơn 1 hệ điều hành :
<P ALIGHN="CENTER">Các hệ điều hành
<SELECT NAME="Seclect2" SIZE="5">
<OPTION <WIN 98</OPTION>
<OPTION <WINNT</OPTION>
<OPTION <WINXP</OPTION>
<OPTION <LINUX REDHAT</OPTION>
</SELECT>
</P>

VI)Tạo frames:
Người ta có thể chia trang web ra làm nhiều frame , mỗi frame gần giống như 1 trang web độc lập với nhau ,
tức 1 frame có thể load nội dung mới mà không ảnh hưởng tới các frame còn lại . Bạn có thể thấy ví dụ về
trang web có chia frame như ở website www.ktlehoan.com .

-Tạo frame:
Đặt các lệnh sau trong phần <body>....</body>
<FRAMESET> </FRAMSET>

-Tạo frame theo cột:
<FRAMESET COLS="200,*"> </FRAMSET>
Chuỗi lệnh trên tạo ra 2 frame nằm dọc ngăn cách nhau bởi cột 200(tính theo pixe)
Cú pháp lệnh là COLS="number,*"

-Tạo frame theo hàng:
<FRAMESET ROWS="100,*"> </FRAMSET>
Chuỗi lệnh trên tạo ra 2 frame nằm ngang ngăn cách nhau bởi hàng 100
Cú pháp lệnh là ROWS="number,*"

-Làm frame mở ra trang web mới :
<FRAMESET ROWS="100,*">
<frame src="http://www.abc.com/page1.htm">
<frame src="http://www.def.com/page2.htm">
</FRAMSET>
Chuỗi lệnh này tạo ra 2 frame nằm ngang phân nhau tại hàng 100 , frame thứ nhất có nội dung là trang
http://www.abc.com/page1.htm , frame thứ 2 có nội dung là trang http://www.def.com/page2.htm .

-Đặt kích thước cho margin(viền) của frame:
Với viền trái hay phải(dùng cho các frame nằm dọc ) : MARGINWIDTH="number"
Với viền trên hay dưới(dùng cho các frame nằm ngang): MARGINHEIGHT="number"
number là độ dầy của viền tính theo pixe

-Đặt chức năng cuộn cho frame:
Muốn cho frame có thể cuộn đặt : SCROLLING="YES"
Muốn cho frame không thể cuộn đặt : SCROLLING="NO"

-ĐẶt liên kết giữa các frame:
Bạn có thể khiến cho 1 frame chứa các mục , khi ta ấn vào 1 mục thì nội dung của mục đó hiển thị ở frame
kia như sau:
<A HREF="page1.htm" TARGET="windows_name">Link_text</A>
Như vậy khi bạn ấn vào dòng chữ Link_text ở frame thứ nhất thì nội dung của trang page1.htm sẽ hiển thị tại
frame thứ 2 .

n_u_h_o_n · 29 Tháng mười hai 2006

Đầu tiên là tạo một css về kiểu chử cho một đoạn văn bảng

<style type="text/css">

</style>
Tạo liên kết

A:visited {
COLOR: #09629e; TEXT-DECORATION: none
}
A:active {
COLOR: #09629e; TEXT-DECORATION: none
}
A:hover {
FILTER: dropshadow(color=#ffffff,offX=-1,offY=-1,positive=1); HEIGHT: 0px; TEXT-DECORATION: none
}
FILTER: dropshadow(color=#ffffff,offX=-1,offY=-1,positive=1); HEIGHT: 0px;

Khi đưa chuột lên dòng liên kết sẽ có một hiệu ứng y như chìn xuống