Thiet ke website bang word

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (190.34 KB, 11 trang )

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

(Bài 5)

<b>HTML</b>

- 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

<b>Khái niệm về HTML</b> Lên trê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>

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 ngồi chữ cịn có thể có hình ảnh, . . .

Ngồ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.

<b>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 </b>
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.

<b>Dùng Word 97 để tạo HTML</b> Lên trên

</div>
<span class='text_page_counter'>(2)</span><div class='page_container' data-page=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 ảnh trong 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.

<b>Dùng Word 2000 để tạo HTML</b> Lên trên

</div>
<span class='text_page_counter'>(3)</span><div class='page_container' data-page=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.

</div>
<span class='text_page_counter'>(4)</span><div class='page_container' data-page=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.

</div>
<span class='text_page_counter'>(5)</span><div class='page_container' data-page=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=" /><head>

<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]-->
<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

</div>
<span class='text_page_counter'>(6)</span><div class='page_container' data-page=6>

margin-bottom:.0001pt;
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 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'>

</div>
<span class='text_page_counter'>(7)</span><div class='page_container' data-page=7>

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

<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

<b>Dùng Word XP để tạo HTML</b> Lên trên

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:

<b>Dùng Word 2003 để tạo HTML</b> Lên trên

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.

</div>
<span class='text_page_counter'>(8)</span><div class='page_container' data-page=8>

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

<b>Dùng FrontPage để tạo HTML</b> Lên trên

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

</div>
<span class='text_page_counter'>(9)</span><div class='page_container' data-page=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.

<b>Đưa HTML lên website</b> Lên trên

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.

</div>
<span class='text_page_counter'>(10)</span><div class='page_container' data-page=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 foldertenfile_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:

<b>Cập nhật trang web (Update)</b> Lên trên

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:

</div>
<span class='text_page_counter'>(11)</span><div class='page_container' data-page=11></div>


Thiết kế website bằng phần mềm Adobe Dreamweaver CS5 - Phần 2