Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org Để xem thử trình diễn hiệu ứng, ta nhấn nút Play Movie Toolbar Muốn dừng để tiếp tục hiệu chỉnh, nhấn nút Stop Sau làm xong, ta nhấn nút Save Movie công cụ chọn thực đơn File/Save Tập tin lưu với phần mở rộng swi Sau này, muốn hiệu chỉnh, ta mở lại tập tin Để kiểm tra movie sau thực trình duyệt, nhấn vào nút Test In Browser nằm ngồi cơng cụ 1.4 Đưa movie vào trang web Để đưa movie vừa tạo vào trang web, trước tiên phải kết xuất movie dạng swf cách nhấn nút SWF công cụ chọn thực đơn File/Export to SWF Hình 19 – Màn hình Export Thao tác đưa vào clipboard đoạn mã HTML dùng để mô tả movie vừa sau: Hình 18 – Kết xuất tập tin swf Sau đó, nhấn vào tab Export, click vào copy HTML to Clipboard Lê Đình Duy - ĐH KHTN Tp HCM 87 Sau đó, dán đoạn code HTML vào vị trí cần chèn movie trang web mà soạn thảo (chú ý sử dụng View HTML) 88 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org Thuộc tính quan trọng Movie URL Nếu ta đặt movie thư mục khác với thư mục trang web hành, ta phải định đường dẫn đến movie ô nhập liệu Hình 20 – Dán đoạn mã HTML mơ tả movie vào trang web 1.5 Đặt lại thông số movie FrontPage Chuyển qua View Normal, click phải chuột lên đối tượng chọn ActiveX Control Properties… Hình 22 – Các thuộc tính movie SỬ DỤNG PHẦN MỀM BUTTON STUDIO ĐỂ TẠO CÁC NÚT NHẤN DẠNG ĐỒ HỌA ĐƠN GIẢN Button Studio phần mềm hỗ trợ thiết kế tạo button cách nhanh chóng dễ dàng Các button tạo dùng cho trang web, presentations, hay ứng dụng cần dùng chúng Bước nên chọn hình dáng nút nhấn cách chọn vào tab Shape Sau ta chọn kích thước định vị văn nút nhấn cách chọn vào nút Size+Positioning Khơng nên chọn Auto Size lúc kích thước nút nhấn phụ thuộc vào nội dung văn hiển thị Hình 21 – Đặt lại thông số cho movie trang web Lê Đình Duy - ĐH KHTN Tp HCM 89 90 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org Hình 23 – Màn hình làm việc phần mềm Button Studio Hình 25 – Thiết lập kích thước định vị Hình 24 – Các dạng nút nhấn hỗ trợ sẵn Hình 26 – Văn hiển thị nút nhấn Lê Đình Duy - ĐH KHTN Tp HCM 91 92 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org Sau sang tab Text để gõ nội dung văn hiển thị nút nhấn Đồng thời thiết lập thuộc tính văn font chữ, kích thước, màu sắc Giả sử muốn tạo đối tượng đồ họa Headings, ta click vào biểu tượng Headings Màn hình hỗ trợ tạo Heading xuất Sau làm xong, ta lưu thiết kế lại dạng tập tin bs cách chọn thực đơn File/Save As Sau muốn sửa lại, ta mở tập tin tiếp tục chỉnh sửa Để dùng trang web, ta phải chọn chức Export thực đơn dạng tập tin hình ảnh gif, jpg SỬ DỤNG PHẦN MỀM XARA WEBSTYLE ĐỂ TẠO CÁC HIỆU ỨNG ĐỒ HỌA Xara WebStyle phần mềm hỗ trợ tạo hiệu ứng đồ họa từ đơn giản đến phức tạp để đưa vào trang web cách nhanh Xara WebStyle dùng để tạo Headings, banners, nút nhấn, ảnh nền, … Hình 28 – Màn hình hỗ trợ tạo Headings Nhấn vào nút Style bên tay trái, mẫu Headings xây dựng sẵn Chọn mẫu, ví dụ Web Style Để thay đổi văn Heading, ta nhấn vào nút Text gõ vào đoạn văn ví dụ như: Welcome to Ho Chi Minh City Ta thay đổi font chữ, đặt chữ in đậm, in nghiêng tùy thích Các nút Color Texture cho phép hiệu chỉnh màu mẫu tơ văn Sau đó, ta thiết lập bóng cách nhấn vào nút Shadow Mục Themes cho phép lưu lại thiết lập kiểu, màu sắc, tạo bóng, kể để dùng lại cho thiết kế tương tự sau Hình 27 – Màn hình làm việc Xara WebStyle Để tạo đối tượng nào, click vào đối tượng Ví dụ Heading, Buttons, Bullets, Background Trong hình tạo đối tượng muốn trở hình chọn nút Graphic Type Lê Đình Duy - ĐH KHTN Tp HCM 93 Mục Save để kết xuất đối tượng tập tin ảnh GIF JPG dùng trang web 94 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org Hình 29 – Hiệu chỉnh văn Heading Hình 31 – Thiết lập shadow Hình 30 – Thiết lập texture Hình 32 – Kết xuất tập tin ảnh dùng trang web Lê Đình Duy - ĐH KHTN Tp HCM 95 96 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM SỬ DỤNG PHẦN MỀM BANNERSHOP ANIMATIOR ĐỂ TẠO CÁC ẢNH ĐỘNG Email: ledduy@ieee.org GIF Bannershop GIF Animator phần mềm hỗ trợ tạo ảnh web động Các ảnh web động lưu định dạng GIF dùng trang web chương trình khác Hình 34 – Tạo frame chèn ảnh vào frame Hình 33 – Màn hình làm việc BannerShop Gif Animator Để tạo ảnh web động, trước tiên thiết lập thông số frame kích thước, màu nền, … cách chọn thực đơn Animation/Frame Size, Frame/Set Background Color phù hợp với kích thước ảnh chèn vào frame Hình 35 – Các hiệu ứng frame Sau đó, chọn thực đơn chức Image/Import Image để chèn ảnh vào frame Sau làm xong frame, chọn thực đơn chức Frame/Insert New Frame để chèn thêm frame lại tiếp tục chèn ảnh vào frame Sau thực xong việc đặt hiệu ứng cho frame, nhấn nút F9 chọn thực đơn chức Animation/Play Animation để xem kết Tiếp theo ta thiết lập hiệu ứng Animation cho frame Intro Animation để hiệu ứng lúc bắt đầu hiển thị frame Outro Animation để hiệu ứng kết thúc frame trước chuyển sang frame Cuối cùng, ta chọn thực đơn chức File/Save Document để lưu thiết kế lại dạng tập tin bsd Tập tin sau mở lại để hiệu chỉnh Chọn chức File/Save Gif Animation để kết xuất tập tin gif dùng ứng dụng web Lê Đình Duy - ĐH KHTN Tp HCM 97 98 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org MỘT SỐ THAO TÁC CƠ BẢN KHI THIẾT KẾ TRANG WEB BẰNG MICROSOFT FRONTPAGE 5.1 Giới thiệu FrontPage MS FrontPage với Macromedia Dreamweaver MX phần mềm hỗ trợ thiết kế web thông dụng Chức phần mềm hỗ trợ người dùng tạo trang web cách dễ dàng mà không cần thiết phải biết nhiều kiến thức HTML mục, ví dụ C:\MyWebSite Trong thư mục này, tổ chức số thư mục images dùng để lưu hình ảnh, db dùng để lưu tập tin sở liệu, … Sau tạo xong thư mục có cấu trúc trên, FrontPage ta tạo website trỏ đến thư mục C:\MyWebSite cách chọn thực đơn chức File/New/Page or Web/Empty Web, sau gõ vào đường dẫn C:\MyWebSite ô mục Options/Specify the location of the new web Khi khởi động, hình làm việc MS FrontPage sau: Hình 37 – Tạo website Hình 36 – Màn hình làm việc MS FrontPage Ở bên tay trái cửa sổ Views Để xem cấu trúc website dạng tập tin thư mục, ta click vào biểu tượng Folders Để làm việc với trang web, ta click vào biểu tượng Page Click vào biểu tượng Hyperlinks cho ta hình dung liên kết tập tin hành với tập tin khác Với việc tạo website này, ta soạn thảo tập tin nào, mặc định lưu thư mục Ngồi ra, ta định bảng mã UTF-8 bảng mã dùng mặc định tạo tập tin cách chọn thực đơn chức Tools/Web Settings/Language 5.2 Tổ chức website Để thuận tiện cho việc xuất (publish) website sau này, trước tiên nên tập trung tất thành phần website vào thư Lê Đình Duy - ĐH KHTN Tp HCM 99 100 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org • Sử dụng frames, bảng biểu, để xếp đặt (layout) thành phần trang web • Tạo thêm vào thành phần trang web văn (text), đồ họa (graphics), bảng biểu, hyperlink, form, banner, • Định dạng văn cách dùng style style sheets • FrontPage tự động tạo tag ta thực thao tác tab Normal Tuy nhiên để đạt hiệu cao việc thiết kế trang web, cần kết hợp với kiến thức HTML chỉnh sửa tab HTML • Thử nghiệm trang web cách chọn tab Preview, nút Preview in Browser Một số lưu ý khác: • Khơng nên dùng font mặc định (default font) thiết kế trang web bị phụ thuộc thiết lập cấu hình trình duyệt phía người dùng • Trang chủ website nên đặt default.htm default.asp Hình 38 – Thiết lập bảng mã mặc định cho toàn trang website UTF-8 5.3 Các thao tác soạn thảo trang web Để tạo trang web, chọn chức File/New/Page or Web/Blank Page Ở bên trang web, ta thấy tab Normal, HTML Preview cho ta nhìn trang web thiết kế góc độ khác Tab Normal cho thấy trang web góc độ thiết kế, tab HTML cho thấy mã HTML thiết kế tab Normal tab Preview cho xem trước kết xuất thực trang web trình duyệt Để thiết kế trang web quán hiệu nên thực bước bắt đầu thiết kế trang web MS FrontPage • Đặt thuộc tính chung cho tồn trang web bảng mã dùng UTF-8, tiêu đề trang, màu nền, … Lê Đình Duy - ĐH KHTN Tp HCM 101 102 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org Thực hành: Gõ vào đoạn văn bản, sau thực định dạng theo bước sau: • Dùng chuột đánh dấu chọn nhóm từ, sau thực định dạng font chữ, kích thước chữ, màu chữ, hiệu ứng chữ (như in đậm, in nghiêng, gạch dưới) • Dùng chuột đánh dấu chọn tồn phân đoạn, sau thực định dạng font, border and shading, canh chỉnh (alignment) • Chuyển sang tab HTML để xem tag thuộc tính tương ứng FrontPage phát sinh • Gõ vào đoạn văn bản, sau sử dụng nút Bullets nút Numbering để đặt đoạn văn định dạng Bullets Numbering Thay đổi thuộc tính Bullets Numbering vừa tạo 5.5 Dùng style style sheet để định dạng 5.5.1 Sử dụng inline style Để chèn inline style vào đối tượng trang web, ta click phải chuột lên đối tượng đó, chọn mục Properties, sau chọn Style Ví dụ: Hình 39 – Các thuộc tính chung cho trang web 5.4 Định dạng văn (text) phân đoạn (paragraph) Một phân đoạn khối văn phân định với phân đoạn khác phím Enter soạn thảo Nếu muốn xuống dịng mà khơng muốn chuyển sang phân đoạn khác dùng phím Shift+Enter Một phân đoạn bao quanh cặp tag

, xuống dòng tương ứng với tag , khoảng trắng tương ứng với kí tự:   Ta định dạng theo nhóm từ đánh dấu chọn định dạng cho toàn văn Các định dạng bao gồm: font chữ, kích thước, màu sắc, in đậm/nghiêng, gạch dưới, canh chỉnh trái/phải/giữa/đều hai bên Lê Đình Duy - ĐH KHTN Tp HCM 103 104 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org Hình 41 – Tạo style cho trang web Hình 40 – Sử dụng Inline Style 5.5.2 Sử dụng embeded style Để sử dụng embeded style, ta thực bước sau: • Tạo style cho trang web hành cách chọn thực đơn chức Format/Style • Chọn mục New để tạo style, sau điền vào thơng tin cho style Ví dụ: gõ vào Name (selector) txtTitle, sau chọn mục Format để định dạng cho style có tên txtTitle với Font Tahoma, kích thước 18pt, màu đỏ, in đậm, … • Để áp dụng style vừa tạo vào đối tượng trang web, đánh dấu đối tượng chọn mục Normal, tìm mục có tên txtTitle Hình 42 – Tạo style Lê Đình Duy - ĐH KHTN Tp HCM 105 106 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org Hình 44 – Liên kết tập tin css vào trang web 5.6 Chèn hình ảnh ảnh động Flash vào trang web Hình 43 – Áp dụng style vào đối tượng trang web 5.5.3 Sử dụng Linking style Để sử dụng linking style, ta thực bước sau: • Tạo tập tin dạng CSS cách chọn thực đơn chức File/New/Page or Web/Normal Style Sheet Giả sử lưu tập tin lại với tên mystyle.css • Tạo style bước embeded style lưu lại • Trong tập tin mypage.htm, để dùng style định nghĩa tập tin mystyle.css, ta chọn thực đơn chức Format/Style Sheet Links, định tập tin mystyle.css Định dạng ảnh thông dụng cho thiết kế trang web GIF JPEG Ảnh GIF bị giới hạn 256 màu cho phép tạo hoạt hình (gif animation), ảnh JPEG cho phép ảnh dùng 256 màu kích thước nhỏ Các phần mềm Button Studio, Banner Gif Animation, Paint Shop Pro, Adobe Photoshop phần mềm thơng dụng để tạo xử lí ảnh dùng cho thiết kế web Ảnh động Flash tập tin dạng swf, có ưu điểm kích thước nhỏ mơ tả nhiều hoạt hình, dùng thơng dụng thiết kế web Phần mềm Macromedia Flash MX, Swish phần mềm thông dụng để tạo ảnh động Để chèn tập tin ảnh vào trang web, chọn chức Insert/Picture/From File FrontPage tạo tag dạng Để hiển thị văn dạng tooltip đưa chuột đến hình ảnh, đặt giá trị cho thuộc tính ALT tag IMG chỉnh Picture Properties/General/Alternative presentations Lê Đình Duy - ĐH KHTN Tp HCM 107 108 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org Để tạo hyperlink, đánh dấu đoạn văn hình ảnh dùng để mô tả liên kết, chọn thực đơn chức Insert/Hyperlink (hoặc nhấn Ctrl+K) Hộp thoại mơ tả hyperlink xuất hiện: Hình 46 – Thiết lập hyperlink Ta đặt hyperlink cho liên kết đến thành phần trang, đến trang khác website, đến trang website khác Ngồi ra, ta dùng hyperlink để tạo hộp thoại tải liệu về, khởi động trình gửi email, … Thực hành: • Hyperlink liên kết đến trang web khác website Ví dụ tạo tập tin default.htm button Giới thiệu, cho người dùng nhấn vào nó, trang web Intro.htm hiển thị để giới thiệu nhóm cơng ty Hình 45 – Dùng thuộc tính ALT Để chèn ảnh động Flash, ta phải chèn đoạn mã mô tả nằm cặp tag , hướng dẫn phần sử dụng phần mềm Swish • Hyperlink liên kết đến trang web website khác Ví dụ tạo tập tin default.htm button Liên kết, cho người dùng nhấn vào nó, trang web mơn học http://www.is-edu.hcmuns.edu.vn/~ldduy/WebCourse/ hiển thị Lưu ý rằng, cần chép ảnh vào thư mục định, ví dụ images, thư mục website trước tiến hành thao tác chèn ảnh 5.7 Chèn hyperlink vào trang web Hyperlink dùng để kết nối trang web từ trang sang trang khác Khi người dùng click vào hyperlink, trang web liên kết hiển thị trình duyệt Lê Đình Duy - ĐH KHTN Tp HCM 109 • Trong trường hợp sử dụng frame, phải định tên frame mà trang web liên kết hiển thị 110 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org • Hyperlink cho phép gọi trình gửi email để tạo email Ví dụ tạo tập tin default.htm button Góp ý, cho người dùng nhấn vào nó, chương trình gửi email xuất để gửi email địa ldduy@fit.hcmuns.edu.vn • Hyperlink cho phép hiển thị cửa sổ Save để tập tin máy người dùng Ví dụ tạo tập tin default.htm button Font tiếng Việt, cho người dùng nhấn vào nó, hộp thoại lưu tập tin lên để yêu cầu tải tập tin FontViet.zip 5.8 Sử dụng bảng biểu Ngồi chức thơng thường hiển thị liệu dạng bảng, bảng biểu thường dùng cho việc đặt (layout) thành phần trang web Để chèn bảng biểu vào trang web, chọn thực đơn chức Table/Insert Các thơng số cần lưu ý: • Border: Để khơng hiển thị đường viền chọn Border size • Width: Để đảm bảo table không bị resize độ phân giải hình máy người dùng thay đổi, đặt kích thước table dạng pixel cách chọn radio button In pixels • Cell padding dùng để chỉnh khoảng cách từ đường viền đến văn cell • Cell spacing dùng để chỉnh khoảng cách cell • Background dùng để chỉnh màu table • Canh chỉnh Cell Properties: Horizontal alignment dùng để chỉnh canh chỉnh theo chiều ngang Ví dụ Left, Right, Center, Justify Vertical alignment dùng để chỉnh canh chỉnh theo chiều dọc Ví dụ Top, Middle, Bottom • Chỉnh border cell: vào Cell Properties/Style/Border Lưu ý: FrontPage không hỗ trợ tốt thao tác bảng phức tạp dạng nhiều bảng lồng nhau, có nhiều cell merge split Do đó, cần kết hợp với hiểu biết tag HTML TABLE để xử lí cho đạt hiệu tối ưu Lê Đình Duy - ĐH KHTN Tp HCM 111 Hình 47 – Các thuộc tính bảng 5.9 Chèn web components 5.9.1 Thời gian cập nhật (Time stamp) Chọn Insert/Date and Time Sau chọn định dạng ngày tháng thời gian phù hợp với nhu cầu 112 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org Hình 48 – Thiết lập thông số cho Date, Time 5.9.2 Đường kẻ ngang (Horizontal line) Chọn Insert/Horizotal line Đặt thuộc tính cho đường kẻ ngang cách double click chuột lên Sau chọn thơng số Width, Height, Color, Alignment Hình 50 – Các thành phần khác hỗ trợ sẵn 5.10 Một số hiệu ứng đặc biệt • Chuyển trang Transition… (Page transition): Chọn Format/Page • Hiệu ứng chữ chuyển động theo chiều ngang (Marquees): Chọn Insert/Component/Marquee Sau hộp thoại ra, bạn gõ vào dòng chữ cần chuyển động đặt thuộc tính khác màu sắc, font chữ, … • Thêm hiệu ứng font chữ cho hyperlink: Chọn Format/Background, check vào Enable hyperlink rollover effects Sau bạn chọn màu theo ý muốn 5.11 Tạo form nhập liệu Dùng table để layout trước thành phần form Tạo văn control (textbox, dropdown listbox, button, radio, checkbox, text area, ) Các control tạo cách gõ trực tiếp tag vào (dùng tab HMTL) Hình 49 – Các thông số cho Horizontal line 5.9.3 Các thành phần khác Chọn thực đơn Insert/Web component Lê Đình Duy - ĐH KHTN Tp HCM 113 114 Email: ledduy@ieee.org ... độ thiết kế, tab HTML cho thấy mã HTML thiết kế tab Normal tab Preview cho xem trước kết xuất thực trang web trình duyệt Để thiết kế trang web quán hiệu nên thực bước bắt đầu thiết kế trang web. .. font) thiết kế trang web bị phụ thuộc thiết lập cấu hình trình duyệt phía người dùng • Trang chủ website nên đặt default.htm default .asp Hình 38 – Thiết lập bảng mã mặc định cho toàn trang website... HCM Email: ledduy@ieee.org Hình 44 – Liên kết tập tin css vào trang web 5.6 Chèn hình ảnh ảnh động Flash vào trang web Hình 43 – Áp dụng style vào đối tượng trang web 5.5.3 Sử dụng Linking style