Thiet ke website bang word

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

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

Khái niệm HTML Lên

HTML chữ viết tắt HyperText Markup Language (ngôn ngữ đánh dấu siêu văn bản) Đây đoạn mã để tạo trang web Ví dụ:

</HTML>

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

Chúng ta dùng chương trình thông dụng Word, Frontpage để thiết kế trang web Sau copy mã HTML từ chương trình để đưa lên trang web bạn

Như tiết kiệm thời gian kết nối với Internet

Khi cần bổ sung chỉnh sửa nội dung trang web, cần thực việc Word Frontpage, sau đưa lên website

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

Ngồi Word, nhiều người dùng chương trình Frontpage

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

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

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

Dùng Word 97 để tạo HTML Lên

(2)

Sau soạn nội dung, lưu trang web sau: Nhấp vào menu File chọn Save as

Xin lưu ý, hình ảnh trang web giữ nguyên tên ban đầu nằm folder với trang web

Sau lưu trang web, nhấp vào menu File, chọn Web Page Preview Bạn thấy nội dung dạng web

Nhấp vào menu View, chọn Source, bạn thấy toàn mã HTML trang web

(3)

Bạn nhận hình soạn thảo sau:

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

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

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

(4)

Sau soạn xong lưu 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 trang1 đặt folder website (C:\website)

Nếu trang web bạn có gắn hình ảnh, hình ảnh chứa folder có tên trang1_files, đặt tên image001, image002,

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

Sau lưu trang web, bạn cần xem nội dung dạng web Nhấp vào menu File chọn Web Page Preview

Bạn xem trang web dạng web

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

(5)

Đây 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>

<title>EasyVN xin chào 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

(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 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 0"/>

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

<v:f eqn="prod @3 21600 pixelWidth"/> <v:f eqn="prod @3 21600 pixelHeight"/> <v:f eqn="sum @0 1"/>

<v:f eqn="prod @6 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'>

(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 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 để tạo HTML Lên

Dùng Word XP, tương tự Word 2000, khác phần cách chọn Blank Web Page, xem hình sau đây:

Dùng Word 2003, tương tự Word 2000, khác phần cách chọn Blank Web Page

(8)

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

Dùng FrontPage để tạo HTML Lên

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

(9)

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

Xin lưu ý: Các hình ảnh đưa vào trang web, lưu giữ tên cũ vị trí gốc trước khơng đưa vào folder với trang web

Đưa HTML lên website Lên

Sau có mã HTML Copy mã HTML Login vào website bạn

Mở trang web bạn muốn thiết kế Nhấp vào nút HTML

Bạn mở trang sau đây:

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

Ghi nhớ, copy tất mã HTML, khơng bỏ sót chữ

(10)

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

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

Đối với Word 2000, Word XP Word 2003, hình ảnh đặt tên lại image001, image002, chứa foldertenfile_files

Ví dụ: Tên file trang1 folder trang1_files

Bạn phải chọn file hình ảnh đưa lên website

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

Cập nhật trang web (Update) Lên

Muốn cập nhật trang web, bạn cần soạn lại nội dung Word Và lặp lại thao tác đưa HTML lên website

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

(11)