Thiet ke website bang word

Tài liệu hướng dẫn thiết kế website cá nhân EasyVNBài 5 HTML - Khái niệm về HTML - Dùng Word 97 để tạo HTML - Dùng Word 2000 để tạo HTML mô tả chi tiết - Dùng Word XP để tạo HTML - Dùng

Trang 1

Tài liệu hướng dẫn thiết kế website cá nhân EasyVN

(Bài 5)

HTML

- Khái niệm về HTML

- Dùng Word 97 để tạo HTML

- Dùng Word 2000 để tạo HTML (mô tả chi tiết)

- Dùng Word XP để tạo HTML

- Dùng Word 2003 để tạo HTML

- Dùng Frontpage để tạo HTML

- Đưa HTML lên website

- Cập nhật trang web (Update)

Ghi chú : Nhấp vào menu File, chọn Web Page Preview để xem dễ dàng hơn

HTML là chữ viết tắt của HyperText Markup Language (ngôn ngữ đánh dấu siêu văn bản)

Đây là các đoạn mã để tạo ra trang web Ví dụ:

<HTML>

<BODY>

</BODY>

</HTML>

Việc học HTML để tự soạn ra nội dung trang web đòi hỏi nhiều công sức và thời gian

Chúng ta có thể dùng các chương trình thông dụng như Word, Frontpage để thiết kế trang web

Sau đó copy mã HTML từ các chương trình này để đưa lên trang web của bạn

Như vậy sẽ tiết kiệm được thời gian kết nối với Internet

Khi cần bổ sung hoặc chỉnh sửa nội dung trang web, chỉ cần thực hiện việc này trong Word hoặc

Frontpage, sau đó đưa lên website

Hầu hết những người dùng máy tính thông thường đều có thể sử dụng chương trình Word để trình bày một văn bản, trong văn bản ngoài chữ còn có thể có hình ảnh,

Ngoài Word, nhiều người cũng có thể dùng chương trình Frontpage

Mục đích của tài liệu này là giúp cho người dùng biết một số nguyên tắc để tạo ra nội dung trang web bằng Word và Frontpage, cách lấy mã HTML để đưa lên website

Chúng tôi không đi vào chi tiết cách sử dụng 2 chương trình này

Ghi chú: Khi đưa tiếng Việt vào nội dung trang web, các bạn nên sử dụng các chương trình gõ tiếng Việt như Vietkey, Unikey Tốt nhất là dùng các font Unicode (như Arial, Verdana, Times New Roman, ) hoặc font VNI-Times, chúng tôi chưa hỗ trợ các font khác

Mở Word 97, nhấp vào menu File, chọn New, chọn Web pages, sau đó chọn Blank Web Page như hình sau đây:

Trang 2

Sau khi soạn nội dung, lưu trang web như sau:

Nhấp vào menu File và chọn Save as

Xin lưu ý, các hình ảnhtrong trang web sẽ được giữ nguyên tên ban đầu và nằm trong cùng một folder với trang web

Sau khi lưu trang web, nhấp vào menu File, rồi chọn Web Page Preview

Bạn sẽ thấy được nội dung dưới dạng web

Nhấp vào menu View, chọn Source, bạn sẽ thấy được toàn bộ mã HTML của trang web

Mở Word 2000, nhấp vào menu File, chọn New, sau đó chọn Webpage

Trang 3

Bạn sẽ nhận được màn hình soạn thảo như sau:

Bạn soạn nội dung trang web tương tự như khi soạn văn bản

- Soạn tiếng Việt: Ghi nhớ chỉ dùng font unicode (Arial, verdana, Times New Roman, Tahoma) hoặc font VNI-Times Không dùng các font khác

- Nên dùng table để dễ quản lý chữ và hình ảnh

- Muốn đưa hình ảnh vào, nhấp vào menu Insert, chọn Picture, sau đó chọn From file

Sau đây là một ví dụ:

Trang 4

Sau khi soạn xong lưu dưới dạng Webpage: Nhấp vào menu File, sau đó chọn Save as Web page Ghi chú:

Ví dụ bạn đặt tên cho trang web là trang1 và đặt trong folder website (C:\website)

Nếu trong trang web của bạn có gắn hình ảnh, các hình ảnh sẽ được chứa trong folder có tên là

trang1_files, và được đặt tên là image001, image002,

Bạn cần nhớ vị trí này, để khi đưa lên website, bạn cần phải chọn các vị trí này

Sau khi lưu trang web, bạn cần xem nội dung dưới dạng web

Nhấp vào menu File rồi chọn Web Page Preview

Bạn sẽ xem được trang web dưới dạng web

Khi đưa lên website bạn sẽ nhìn thấy nội dung tương tự như vậy

Lấy mã HTML: Khi đang xem duới dạng Web Page Preview, nhấp vào menu View, chọn Source

Bạn sẽ nhận được toàn bộ mã HTML của trang web

Trang 5

Đây là nội dung bạn cần đưa lên website.

<html xmlns:v="urn:schemas-microsoft-com:vml"

xmlns:o="urn:schemas-microsoft-com:office:office"

xmlns:w="urn:schemas-microsoft-com:office:word"

xmlns="http://www.w3.org/TR/REC-html40">

<head>

<! [if !mso]>

<style>

v\:* {behavior:url(#default#VML);}

o\:* {behavior:url(#default#VML);}

w\:* {behavior:url(#default#VML);}

.shape {behavior:url(#default#VML);}

</style>

<![endif] >

<title>EasyVN xin chào các bạn</title>

<! [if gte mso 9]><xml>

<o:DocumentProperties>

<o:Author>No name</o:Author>

<o:Template>Normal</o:Template>

<o:LastAuthor>No name</o:LastAuthor>

<o:Revision>1</o:Revision>

<o:TotalTime>5</o:TotalTime>

<o:Created>2004-08-18T17:49:00Z</o:Created>

<o:LastSaved>2004-08-18T17:54:00Z</o:LastSaved>

<o:Pages>1</o:Pages>

<o:Words>7</o:Words>

<o:Characters>43</o:Characters>

<o:Company>No company</o:Company>

<o:Lines>1</o:Lines>

<o:Paragraphs>1</o:Paragraphs>

<o:CharactersWithSpaces>52</o:CharactersWithSpaces>

<o:Version>9.2720</o:Version>

</o:DocumentProperties>

</xml><![endif] ><! [if gte mso 9]><xml>

<w:WordDocument>

<w:Zoom>0</w:Zoom>

</w:WordDocument>

</xml><![endif] >

<style>

/* Style Definitions */

p.MsoNormal, li.MsoNormal, div.MsoNormal

{mso-style-parent:"";

margin:0cm;

margin-bottom:.0001pt;

mso-pagination:widow-orphan;

font-size:12.0pt;

font-family:"Times New Roman";

mso-fareast-font-family:"Times New Roman";}

p.MsoTitle, li.MsoTitle, div.MsoTitle

{margin:0cm;

Trang 6

text-align:center;

mso-pagination:widow-orphan;

font-size:16.0pt;

mso-bidi-font-size:12.0pt;

font-family:Arial;

mso-fareast-font-family:"Times New Roman";

font-weight:bold;}

@page Section1

{size:612.0pt 792.0pt;

margin:72.0pt 90.0pt 72.0pt 90.0pt;

mso-header-margin:36.0pt;

mso-footer-margin:36.0pt;

mso-paper-source:0;}

div.Section1

{page:Section1;}

>

</style>

<! [if gte mso 9]><xml>

<o:shapedefaults v:ext="edit" spidmax="2050"/>

</xml><![endif] ><! [if gte mso 9]><xml>

<o:shapelayout v:ext="edit">

<o:idmap v:ext="edit" data="1"/>

</o:shapelayout></xml><![endif] >

</head>

<p class=MsoTitle><span style='color:red'>EasyVN xin chào các

bạn<o:p></o:p></span></p>

<p class=MsoNormal align=center style='text-align:center'><span

style='font-family:Arial'><![if !supportEmptyParas]> <!

[endif]><o:p></o:p></span></p>

<p class=MsoNormal align=center style='text-align:center'><span

style='font-family:Arial'><! [if gte vml 1]><v:shapetype id="_x0000_t75"

coordsize="21600,21600" o:spt="75" o:preferrelative="t"

path="m@4@5l@4@11@9@11@9@5xe"

filled="f" stroked="f">

<v:stroke joinstyle="miter"/>

<v:formulas>

<v:f eqn="if lineDrawn pixelLineWidth 0"/>

<v:f eqn="sum @0 1 0"/>

<v:f eqn="sum 0 0 @1"/>

<v:f eqn="prod @2 1 2"/>

<v:f eqn="prod @3 21600 pixelWidth"/>

<v:f eqn="prod @3 21600 pixelHeight"/>

<v:f eqn="sum @0 0 1"/>

<v:f eqn="prod @6 1 2"/>

<v:f eqn="prod @7 21600 pixelWidth"/>

<v:f eqn="sum @8 21600 0"/>

<v:f eqn="prod @7 21600 pixelHeight"/>

<v:f eqn="sum @10 21600 0"/>

</v:formulas>

<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>

<o:lock v:ext="edit" aspectratio="t"/>

</v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75"

style='width:93.75pt;

height:210.75pt'>

<v:imagedata src="./trang1_files/image001.jpg" o:title="decor6"/>

Trang 7

</v:shape><![endif] ><![if !vml]><img width=125 height=281 src="./trang1_files/image001.jpg" v:shapes="_x0000_i1025"><!

<p class=MsoNormal align=center style='text-align:center'><span style='font-family:Arial'><![if !supportEmptyParas]> <!

<p class=MsoNormal align=center style='text-align:center'><span style='font-family:Arial'>Chúc các bạn thành

công<o:p></o:p></span></p>

</div>

</body>

</html>

Xem chi tiết ở phần Đưa HTML lên website

Dùng Word XP, cũng tương tự như Word 2000, chỉ khác ở phần đầu tiên là cách chọn một

Blank Web Page, xem hình sau đây:

Dùng Word 2003, cũng tương tự như Word 2000, chỉ khác ở phần đầu tiên là cách chọn một

Blank Web Page

Mở Word 2003, nhấp vào menu file, chọn New, bạn sẽ nhận được hình sau đây:

Trang 8

Nhấp vào mục Web page để thiết kế trang web.

Sau khi thiết kế xong,

Mở FrontPage, bạn có sẵn một trang web để thiết kế, như sau:

Sau khi thiết kế xong, lưu trang web bằng cách nhấp menu File, chọn Save As

Sau khi lưu, bạn có thể xem trang web bằng cách nhấp vào mục Preview

Trang 9

Hoặc lấy mã HTML bằng cách nhấp vào mục HTML.

Xin lưu ý: Các hình ảnh đưa vào trang web, khi lưu vẫn giữ tên như cũ và vẫn ở vị trí gốc trước đây chứ không đưa vào cùng folder với trang web

Sau khi có được mã HTML Copy mã HTML này

Login vào website của bạn

Mở trang web bạn muốn thiết kế

Nhấp vào nút HTML

Bạn sẽ mở được trang sau đây:

Copy mã HTML vào ô trống, sau đó nhấp vào nút OK

Ghi nhớ, copy tất cả các mã HTML, không bỏ sót một chữ nào

Nếu trang web của bạn có chứa hình ảnh, bạn sẽ nhận được yêu cầu gởi File sau đây:

Trang 10

Nhấp vào nút Browse để chọn file, sao đó nhấp vào nút OK.

Nếu có nhiều hình ảnh thì phải lặp lại thao tác này nhiều lần, để đưa hình ảnh lên website

Xin lưu ý:

Đối với Word 2000, Word XP và Word 2003, các hình ảnh được đặt tên lại là image001, image002,

và được chứa trong folder tenfile_files.

Ví dụ: Tên file là trang1 thì folder là trang1_files

Bạn phải chọn đúng file thì các hình ảnh mới đưa lên được website

Sau khi đưa tất cả các hình ảnh lên website, bạn sẽ thấy được kết qủa như sau:

Muốn cập nhật trang web, bạn chỉ cần soạn lại nội dung trong Word

Và lặp lại các thao tác đưa HTML lên website như trên

Đối với hình ảnh:

- Các hình ảnh cũ đã có sẵn trên server, bạn có thể giữ nguyên này hoặc cập nhật chúng

- Các hình ảnh mới: Bạn phải đưa lên website

Trang 11

Website: http://www.easyvn.com

Email: help@easyvn.com

Tiêu đề	Thiết kế website bằng word
Chuyên ngành	HTML
Thể loại	Tài liệu hướng dẫn

Định dạng
Số trang	11
Dung lượng	190 KB