Tài liệu hướng dẫn giảng dạy Học phần 3 - Quản trị mạng Microsoft Windows Trang 138/555 here?? </BODY> Canh text: <BODY BGCOLOR="#FFFFFF"> <CENTER>Something really cool</CENTER> </BODY> Chèn hình vào trang Web: <BODY BGCOLOR="#FFFFFF"> <IMG SRC="copper.gif" WIDTH=82 HEIGHT=68> </BODY> Cấp thư mục: SRC=" / /copper.gif" Liên kết: <BODY BGCOLOR="#FFFFFF"> Go to <A HREF="http://home.netscape.com/">Netscape!</A> </BODY> hoặc : Click <A HREF="lesson04.html">here</A> to be magically Gởi mail: <BODY BGCOLOR="#FFFFFF"> Send me <A HREF="mailto:forrest@bubbagump.com">Mail!</A> </BODY> Liên kết bằng hình: <BODY BGCOLOR="#FFFFFF"> Go to <A HREF="http://home.netscape.com/"> <IMG SRC="copper.gif" WIDTH=82 HEIGHT=68 BORDER=0></A> </BODY> Danh sách trang trí kiểu (‘.’) <BODY BGCOLOR="#FFFFFF"> What I want for Christmas <UL> <LI>a big red truck <LI>a real fast speedboat <LI>a drum set <LI>a BB gun <LI>a Melanie Griffith </UL> </BODY> Danh sách trang trí kiểu số:(1,2,3 ) Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m . Tài liệu hướng dẫn giảng dạy Học phần 3 - Quản trị mạng Microsoft Windows Trang 139/555 <BODY BGCOLOR="#FFFFFF"> What I want for Christmas <OL> <LI>a big red truck <LI>a real fast speedboat <LI>a drum set <LI>a BB gun <LI>a Melanie Griffith </OL> </BODY> Đường kẻ ngang: <HR WIDTH=20%> hoặc: <HR > <HR WIDTH=60% SIZE=1> <HR WIDTH=60% SIZE=3 NOSHADE> Frame Frame chia theo cột: <FRAMESET COLS="50%,50%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> </FRAMESET> Frame chia theo dòng: <FRAMESET ROWS="10%,20%,30%,15%,25%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> <FRAME SRC="shannon.html"> </FRAMESET> Frame chia tự động: <FRAMESET COLS="50,*"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> </FRAMESET> Frame chia frame: <FRAMESET COLS="50,*,2*"> <FRAMESET ROWS="50,*,*"> <FRAME SRC="lisa.html"> Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m . Tài liệu hướng dẫn giảng dạy Học phần 3 - Quản trị mạng Microsoft Windows Trang 140/555 <FRAME SRC="lisa.html"> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> </FRAMESET> </FRAMESET> Độ rộng của line, màu line của frame: <FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO"> <FRAMESET ROWS="170,*" FRAMEBORDER=NO > <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> </FRAMESET> Form Gởi mail: <FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx" ENCTYPE="application/x-www-form-urlencoded"> </FORM> Các đối tượng trong form: <INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=30> <INPUT TYPE=PASSWORD NAME="USER PASSWORD"> Radio button: <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed" CHECKED> Ed Holleran<BR> <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"> Rick Weinberg<BR> <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"> Tom Studd<P> Check Box: <INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES" CHECKED> Ed Holleran<BR> <INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"> Rick Weinberg<BR> ComboBox: <SELECT NAME="BEST FRIEND"> <OPTION VALUE="Ed">Ed <OPTION VALUE="Rick">Rick <OPTION VALUE="Tom" SELECTED>Tom <OPTION VALUE="Guido">Guido Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m . Tài liệu hướng dẫn giảng dạy Học phần 3 - Quản trị mạng Microsoft Windows Trang 141/555 </SELECT> List Box: <SELECT NAME="BEST FRIEND" SIZE=4> <OPTION VALUE="Ed">Ed <OPTION VALUE="Rick">Rick <OPTION VALUE="Tom" SELECTED>Tom <OPTION VALUE="Guido">Guido <OPTION VALUE="Horace">Horace <OPTION VALUE="Reggie">Reggie <OPTION VALUE="Myron">Myron </SELECT> Text Area: <TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50> </TEXTAREA> Nút Submit, Reset: <INPUT TYPE=SUBMIT> <INPUT TYPE=RESET> Table Chia dòng, cột: <table border="1" width="100%"> <tr> <td width="50%"> </td> <td width="50%"> </td> </tr> <tr> <td width="50%"> </td> <td width="50%"> </td> </tr> </table> VIII.4. Giới thiệu công cụ tạo web FrontPage. Giới thiệu về FrontPage. FrontPage là chương trình giúp ta soạn thảo nhanh các trang Web là không cần thuộc các tag html. Đồng thời công cụ này cũng giúp ta kiểm tra các liên kết của các trang Web và duyệt trước nội dung các trang web giống như khi duyệt bằng trình duyệt Web. FrontPage là một trong các chương trình ứng dụng trong bộ Office của Microsoft, nên cách sử dụng của chương trình này cũng tương tự như Word hay Excel, do đó người dùng rất dễ làm quen. Khởi động chương trình FrontPage: chọn Start/Programs/Microsoft FrontPage Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m . Tài liệu hướng dẫn giảng dạy Học phần 3 - Quản trị mạng Microsoft Windows Trang 142/555 Hình 7.68 – Giao diện chương trình FrontPage. Tạo một trang Web mới: trong FrontPage vào menu File/New/Page or Web hoặc click chuột vào icon “New” trên thanh công cụ. Sau đó vào menu File chọn Save và nhập tên trang Web cần lưu trữ. Thông thường phần mở rộng của tập tin Web là htm hoặc html. Trong cửa sổ làm việc của ProntPage có ba chế độ hiển thị là “Normal”, “HTML”, “Preview”. Normal là chế độ soạn thảo Web. HTML là chế độ hiển thị nội dung source html của trang Web. Preview là chế độ duyệt Web giống như trình duyệt web dùng để kiểm tra trước khi đưa trang Web lên mạng. Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m . Tài liệu hướng dẫn giảng dạy Học phần 3 - Quản trị mạng Microsoft Windows Trang 143/555 Hình 7.69 – Giao diện khi chọn chế độ xem là HTML. Thanh công cụ định dạng văn bản với các tính năng thông dụng sau: Hình 7.70 – Thanh công cụ định dạng văn bản. - Chọn kiểu văn bản - Chọn loại font thích hợp - Chọn kích thước chữ - Định dạng in đậm, in nghiêng, gạch dưới - Canh lề trái, phải, giữa, đều hai bên lề - Tăng giảm kích thước chữ - Định dạng danh sách sắp xếp dạng number, bullet - Định dạng Tab sang trái hay sang phải - Chọn đường viền khung - Chọn màu văn bản, màu nền Tạo trang Web mới theo các mẫu định sẵn: ta chọn “Page Templates” để tạo các trang Web theo các mẫu định sẵn. Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m . Tài liệu hướng dẫn giảng dạy Học phần 3 - Quản trị mạng Microsoft Windows Trang 144/555 Hình 7.71 – Các cách tạo một trang mới. Sao đó ta chọn mẫu phù hợp như hình sau và chọn OK. Hình 7.72 – Các Page Templates định sẵn. Chèn hình ảnh: ta chọn vị trí chèn ảnh bằng cách đặt con trỏ tại vị trí này, sau đó vào menu Insert/Picture/From File… Hộp thoại Picture xuất hiện, ta chọn tên tập tin ảnh cần chèn. Hình 7.73 – Hộp thoại Picture. Kết quả được hiển thị trên trang Web như sau: Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m . Tài liệu hướng dẫn giảng dạy Học phần 3 - Quản trị mạng Microsoft Windows Trang 145/555 Hình 7.74 – Kết quả hiển thị của trang Web. Đặt tiêu đề và chương trình điều khiển script cho trang web: chọn chức năng file/properties và nhập nội dung tiêu đề vào ô “Title” và chọn OK. Hình 7.75 – Hộp thoại Page Properties. Định nền cho trang Web: ta có thể chọn màu hoặc một hình ảnh bất kỳ để làm nền cho trang Web bằng cách chọn menu Format/Background… Nếu chọn hình làm nền thì check vào “Background Image” và click chuột vào nút “Browse” để chỉ ra tập tin ảnh cần làm nền, sau đó chọn OK. Hình 7.75 – Hộp thoại Page Properties – Tab Background. Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m . Tài liệu hướng dẫn giảng dạy Học phần 3 - Quản trị mạng Microsoft Windows Trang 146/555 Tạo bảng (Table): công cụ chính để bố trí các đối tượng trên trang Web là bảng. Bảng giúp ta có thể chia nhỏ trang Web thành nhiều ô (cell). Tại mỗi ô ta có thể trình bày dạng văn bản hoặc hình ảnh. Muốn tạo một bảng mới trước tiên ta đặt con trỏ tại vị trí cần chèn bảng, sau đó chọn menu Table/Insert/Table… Trong hộp thoại “Insert Table” ta nhập số dòng cần tạo vào mục “Rows” và số cột vào mụ c “Columns”. Các thông số trình bày khác như: Alignment (canh lề bảng), Border size (kích thước của đường viền), Cell padding (độ cao của ô), Cell spacing (khoảng cách giữa hai ô)… Hình 7.76 – Hộp thoại Insert Table. Trên trang Web sẽ xuất hiện một bảng như sau: Hình 7.77 – Kết quả sau khi Insert table. Tạo liên kết (hyperlink): liên kết giúp ta kết nối các trang Web đơn thành một Website. Muốn tạo các liên kết trước hết ta phải có các trang Web đã thiết kế hoàn chỉnh và chú ý đến vị trí (đường dẫn) của trang Web này. Ví dụ ta có ba trang Web: danhsach.htm (chứa tin danh sách các học viên), hocvien1.htm (chứa thông tin chi tiết của học viên 1), hocvien2.htm (chứa thông tin chi tiết của học viên 2). Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m . Tài liệu hướng dẫn giảng dạy Học phần 3 - Quản trị mạng Microsoft Windows Trang 147/555 Hình 7.78 – Nội dung của các trang Web (danhsach.htm và hocvien1.htm). Bây giờ, ta muốn tạo liên kết giữa trang danhsach.htm đến các trang hocvien.htm nhằm giúp người duyệt web muốn xem thông tin của học viên nào thì click vào tên của học viên đó. Tạo liên kết cho một đoạn văn bản ta phải tô đen đoạn văn bản, sau đó click phải chuột chọn “Hyperlink…” hoặc tạo liên kết cho một hình ta cũng làm tương tự chọn hình ảnh cần tạo liên kết và click phải chuột ch ọn “Hyperlink…”. Hộp thoại “Insert Hyperlink” xuất hiện, ta chọn tên tập tin trang Web cần liên kết đến và chọn OK. Hình 7.79 – Hộp thoại Insert Hyperlink. Bạn kiểm tra lại các mối liên kết bằng cách mở trang danhsach.htm và chuyển qua chế độ hiển thị Preview, sau đó rê chuột đến tên của các học viên thì thấy con chuột có biểu tượng hình bàn tay, khi click vào thì nội dung trang Web hocvien.htm sẽ được hiển thị. Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m Click to buy NOW! P D F - X C h a n g e V i e w e r w w w . d o c u - t r a c k . c o m . . Tài liệu hướng dẫn giảng dạy Học phần 3 - Quản trị mạng Microsoft Windows Trang 142/555 Hình 7.68 – Giao diện chương trình FrontPage. Tạo một trang Web mới: trong FrontPage vào menu File/New/Page. File/New/Page or Web hoặc click chuột vào icon “New” trên thanh công cụ. Sau đó vào menu File chọn Save và nhập tên trang Web cần lưu trữ. Thông thư ng phần mở rộng của tập tin Web là htm hoặc html. Trong. V i e w e r w w w . d o c u - t r a c k . c o m . Tài liệu hướng dẫn giảng dạy Học phần 3 - Quản trị mạng Microsoft Windows Trang 145/555 Hình 7.74 – Kết quả hiển thị của trang Web. Đặt tiêu đề và chương trình điều khiển script