đợc sử dụng để định dạng đoạn văn Cú pháp:
Nội dung đoạn văn bản
2/ Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6 HTML hỗ trợ mức đề mục Chú ý đề mục dẫn định dạng mặt logic, tức trình duyệt thể đề mục dới khuôn dạng thích hợp Có thể trình duyệt font chữ 14 point nhng sang trình duyệt khác font chữ 20 point Đề mục cấp cao giảm dần đến cấp Thông thờng văn đề mục cấp hay cấp thờng có kích thớc nhỏ văn thông thờng Dới thẻ dùng để định dạng văn dạng đề mục: Định Định Định Định Định Định dạng đề mục cấp dạng đề mục cấp dạng đề mục cấp dạng đề mục cấp dạng đề mục cấp dạng đề mục cấp 3/ Thẻ xuống dòng BR Thẻ thẻ kết thúc tơng ứng (), có tác dụng chuyển sang dòng Lu ý, nội dung văn tài liệu HTML đợc trình duyệt Web thể liên tục, khoảng trắng liền nhau, ký tự tab, ký tự xuống dòng đợc coi nh khoảng trắng Để xuống dòng tài liệu, bạn phải sử dụng thẻ 13 cng mụn học: Thiết kế web Trường Cao đẳng nghề Công nghiệp H Ni 4/ Thẻ PRE Để giới hạn đoạn văn đợc định dạng sẵn bạn sử dụng thẻ Văn hai thẻ đợc thể giống hệt nh chúng đợc đánh vào, ví dụ dấu xuống dòng đoạn văn giới hạn thẻ có ý nghĩa chuyển sang dòng (trình duyệt không coi chúng nh dấu cách) Cú pháp: Văn đợc định d¹ng 14 Đề cương mơn học: Thiết kế web Trường Cao đẳng nghề Công nghiệp Hà Nội Chọn Edit->Preferences, chọn chế độ tạo mã từ select box Default Encoding Chế độ tạo mã mặc định lưu lúc với tài liệu thẻ chèn đầu tài liệu Ví dụ bạn định Western(Latin1) thẻ phát sinh bên source code ngôn ngữ HTML là: Để định font dùng cho US English tất thứ tiếng Tây Âu chọn Western Để cài đặt font cho thứ tiếng Châu Á chọn Japanese.edia Dreamweaver Hãy chọn kiểu tạo mã chẳng hạn Western (Latin 1) Japaness từ Font Settings Tại Proportional Font chọn font kích thước hiển thị soạn thảo trang web (ví dụ: Times New Roman, size=12pt) + Fixed Font font mà Dreamweaver dùng nhằm hiển thị văn bên thẻ ,, + HTML/Code Inspector font dùng cho tất text (văn bản) bên HTML Source Inspector + Tại hộp thoại Property Inspector select box Default font chọn Edit font list chọn menu Text->Font->Edit Font list xuất hộp thoại sau: + Tại Available Fonts chọn fonts tiếng việt thường dùng (ví dụ font VNI-Times vntime) sau Click nút Properties Lưu ý:Trong lúc định dạng văn bạn sử dụng hộp Property Inspector bạn sử dụng menu Text để định dạng văn có chức mà hộp thuộc tính Property Inspector khơng xây dựng sẵn cho bạn (ví dụ văn gạch dưới, gạch ngang bạn sử dụng chế độ thiết kế web ngôn ngữ HTML để thiết kế thêm thuộc tính cần thiết (ví dụ bạn muốn văn đựoc canhNếu bạn thao tác với Bullets hay Numbering bạn Click nút List Item Property Inspector để cài đặt số thông số sau: + Chọn kiểu List Type Bullet hay Numbering, chọn kiểu Style Nếu bạn thao tác với numbering bạn cho số tăng từ Start Count Tại Reset Count to bạn nhập vào giá trị số trở (thường 1) Để chế độ thiết kế trang web ngôn ngữ HTML bạn click nút < > show code Inspector (hoặc show HTML) Mini-Launcher góc phải hình 3.5 Hình ảnh trang web a/ Khái niệm Hình ảnh thành phần giúp trang web thêm phần hấp dẫn, đầy màu sắc Nó thay hàng loạt dòng văn dài dòng giới thiệu, mơ tả, giải thích … Ảnh cần nhiều thời gian để hiển thị trình duyệt, nên phải lựa chọn thật kỹ ảnh cho ảnh phải mang nội dung, ý nghĩa định, màu sắc phải phù hợp với tông màu trang web cuối phải biết định vị trí ảnh theo chủ đề Tránh cho người duyệt web vừa tiền, vừa tốn công chờ đợi hình ảnh hiển thị hồn chỉnh Họ nóng lòng, bồn chồn chờ đợi Cơng việc người thiết kế web trình bày trang web vừa đủ thơng điệp muốn đưa trước họ lướt qua xem trang khác Tốc độ hiển t hị trang web điều kiện định thành công hay thất bại Hình ảnh nhân tố cản trở số tốc độ hiển thị trang web… Trớ trêu thay, chúng đóng vai trò vơ quan trọng vẻ bền ngồi trang web b/ Các loại hình ảnh - Nguyên tắc: Để cho việc thiết kế ảnh hiệu phải tuân thủ nguyên tắc Đừng lạm dụng nhiều ảnh -> người dùng chờ đợi lâu dẫn đến chán trang web Đừng dùng ảnh kích thước lớn đẹp, cần thiết nên để dạng thu n hỏ sau liên kết đến ảnh lớn Khi thiết kế ảnh web ta ý đến FSRC: Format: Ảnh vector phóng to, thu nhỏ mà khơng làm nhòe ảnh Ảnh Jpeg cho 16 triệu màu, ảnh gif cho 256 màu Size nhỏ tốt Resolution (độ phân giải): 72dpi 47 Đề cương môn học: Thiết kế web Trường Cao đẳng nghề Công nghiệp Hà Nội Color Depth: số lượng màu sắc hình ảnh - Phân loại ảnh: ảnh vector ảnh Bipmap Có hai loại ảnh: ảnh tĩnh ảnh động Một số kiểu ảnh dùng trang web là: GIF, JPEG,IFF, TGA, RAS, EPS, PCX, WMF, SWF, PNG… Thông thường: Dạng thức JPEG dùng để hiển thị ảnh chụp nhiều 256 màu Dạng thức GIF dành cho loại ảnh lại GIF hiển thị hầu hết loại ảnh, nén với mật độ lớn bị giới hạn 256 màu Dạng thức SWF: (Macromedi flash): tệp tin ảnh vector nên kích thước nhỏ, tệp tin ảnh động, hỗ trợ tối đa đến 16 triệu màu Muốn chạy tệp tin trang web cần phải cài đặt Flash plug-ins c/ Chèn ảnh vào trang web Bước 1: vào Insert/Image (Ctrl + Alt + I) Bước 2: hộp thoại Select Image Source xuất tiến hành chọn ảnh cần chèn, sau ấn phím OK Bước 3: Định dạng ảnh: Nhấp chuột phải vào ảnh vừa chèn chọn Properties Hộp thoại properties xuất Mục W: (width) định độ rộng cho ảnh Mục Src: (Source) đường dẫn file ảnh Mục Alt: (Alternate): Tạo thích cho ảnh, thích xuất đưa ảnh trỏ đến ảnh Mục H: (Height) định chiều cao cho ảnh Mục Link: Tạo liên kết cho ảnh Mục Edit: bao gồm số công cụ chỉnh sửa ảnh (cắt ảnh, điều chỉnh hiệu ứng ánh sáng, làm sâu, sắc ảnh…) Mục Map: vẽ vùng lên ảnh để tạo liên kết (có ba công cụ vẽ: Rectang, Oval, Polygon) 48 Đề cương môn học: Thiết kế web Trường Cao đẳng nghề Công nghiệp Hà Nội Mục Vspace, Hspace: tạo lề theo chiều ngang dọc cho ảnh (bao gồm lề: trên, dưới, trái, phải) Mục Target: chọn chế độ hiển thị cho liên kết Mục Border: đặt độ rộng đường viền cho ảnh Mục Align: định vị trí ảnh so với đối tượng chứa nó: bên trái, phải, tâm… d/ Tạo Rollover Image - ý nghĩa: hình ảnh thay đổi đưa trỏ ngang qua ảnh hiển thị Khi tạo Rollover hai ảnh phải có kích thước giống Nếu hai ảnh có kích thước khác Dreamweaver tự động điều chỉnh để hai ảnh có kích thước - Cách tạo: vào Insert/Image Object/ Rollover Image e/ Tạo Navigation Bar: Vào Inser/ Image Object/ Navigation Bar f/ Tạo flash button 49 Đề cương môn học: Thiết kế web Trường Cao đẳng nghề Công nghiệp Hà Nội Mục Style: chọn kiểu dáng cho nút lệnh Mục Button Text: chữ hiển thị bề mặt nút lệnh Font: chọn font chữ Size: chọn cỡ chữ Link: tạo liên kết user click vào nút lệnh Target: chọn chế độ hiển thị liên kết sau người sử dụng click vào nút lệnh Bgcolor: chọn màu cho ô chứa nút lênhl Save as: tên file nút lệnh Chú ý: Trước chèn flash button phải lưu tệp tin HTML vào web 3.6 Làm việc với bảng (Table) a/ Chèn bảng: Vào Insert/Table (Ctrl + Alt + T) xuất hộp thoại: 50 Đề cương môn học: Thiết kế web Trường Cao đẳng nghề Công nghiệp Hà Nội Mục Rows, Columns: nhập số hàng, cột cần chèn Mục: Table width: nhập độ rộng bàng Mục: Border thickness: nhập độ dầy đường viền bảng Mục: Cell padding: nhập khoảng cách (trên, dưới, trái, phải) đối tượng nằm ô với ô chứa đối tượng Mục: Cell spacing: Nhập khoảng cách ô Mục: Header: chọn kiểu hiển thị cho dòng tiêu đề bảng b/ Thay đổi cấu trúc bảng: - Hợp ô: Bôi đen ô cần hợp, vào menu Modify/Table/Merge Cell (Crtl + Alt + M) - Tách ô: Chọn ô cần tách, vào menu Modify/Table/Splip cell (Crtl + Alt + S) Rows, Columns: nhập số dòng cần tách, nhập số cột cần tách Where: Quy định dòng chèn vào nằm (Above) hay nằm (Below) dòng chọn - Xóa dòng: chọn dòng cần xóa vào menu Modify/Table/Delete Row ( Ctrl + Shift + M) 51 Đề cương môn học: Thiết kế web Trường Cao đẳng nghề Cơng nghiệp Hà Nội - Xóa cột: Chọn cột cần xóa vào menu Modify/Table/DeleteColumn (Ctrl + Shift + -) c/ Định dạng Cell - Căn lề văn Cell: Bôi đen văn Cell Chọn nút Align Left, right, center, Justify - Font chữ: Bôi đen văn ô Cell, định dạng font, size, color, style… - Màu nền: chọn Cell, chọn nút Chọn màu cần tô 3.7 Biểu mẫu (form) a/ Khái niệm: Form cho phép người dùng nhập thông tin, cách giao tiếp người duyệt trang web Dreamweaver có sẵn cơng cụ để thiết kế Form có Behavior hay đoạn mã VBScript để xử lý liệu Form b/ Tạo vùng xác định Form - Mở công cụ xử lý Form - Đặt trỏ vào vị trí cần chèn Click vào biểu tượng Insert Form công cụ (hoặc vào Insert/Form) c/ Bổ sung đối tượng vào FORM - Text Field: Cho phép người dùng nhập liệu dạng văn Có số tích chất sau: Text Field: gán vào tên trường Char width: số ký tự tối đa thị trường Max char: số ký tự tối đa nhập trường Type: chọn kiểu hiển thị (dòng đơn-sing line, nhiều dòng-multi line, chế độ mật khẩu-pass word) Init val: giá trị hiển thị trường lúc - Button: nút lệnh thực chức Form Button name: tên nút lệnh Button Value: dòng văn hiển thị nút lệnh Action: lựa chọn chức nút lệnh (gửi liệu – Submit, đặt lại giá trị ban đầu cho đối tượng form, none: nút lệnh thực chức mã lệnh lập trình) - Check Box: cho phép người dùng nhiều mục trả lời nhóm tùy chọn Có thuộc tính Checkbox name: đặt tên cho nút 52 Đề cương môn học: Thiết kế web Trường Cao đẳng nghề Công nghiệp Hà Nội Checkbox Value: giá trị checkbox chọn Initial state: định checkbox chọn hay không chọn lần đầu tải - Radio: Cho phép người dùng chọn mục trả lời nhóm tùy chọn Có thuộc tính Radio button: đặt tên cho nút Checked Value: giá trị Radio chọn Initial state: định Radio chọn hay không chọn lần đầu tải - List/menu: Là tập hợp giá trị qua người sử dụng chọn từ chúng Có thuộc tính List/menu: đặt tên cho nút Type: Chỉ định đối tượng menu hay danh sách lựa chọn List Value: bổ sung hạng mục vào danh sách - Jump Menu: cho phép người dùng chèn menu tùy chọn liên kết tới tài liệu file - File Field: cho phép người dùng dùng trình duyệt duyệt file đĩa cứng họ tải chúng dạng form 3.8 Chia khung với Framesets a/ Khung trang (Frame): trang đặc biệt có khung viền mà không chứa nội dung, khung trang cần phải đính kèm trang có nội dung b/ Cấu trúc khung trang Frame - Chia khung trang theo cột Ví dụ: chia khung trang thành cột x, y, z cho: x+y+z=100 X Khung Khung Khung trang trang trang A B C 53 Đề cương môn học: Thiết kế web Trường Cao đẳng nghề Công nghiệp Hà Nội - Chia khung trang theo hàng Ví dụ: chia khung trang thành hàng x, y, z cho: x+y+z=100 X Khung trang A Khung trang B Khung trang C - Chi khung kết hợp theo cột hàng Ví dụ chia khung thành hàng, hàng chia thành cột, cho x, y, z=100, a+b+c=100 X Khung trang A Khung Khung Khung trang B trang C trang D Khung trang E 54 Đề cương môn học: Thiết kế web Trường Cao đẳng nghề Công nghiệp Hà Nội c/ Các trình duyệt hỗ trợ hiển thị Frame IE, Opera, Firefox, Google chrome, Safari,… 3.9 Quản lý site Một số khái niệm: a) Folder gốc cục bộ: Thiết kế Web lưu Folder ổ cứng, mở xem Folder Folder chứa Files Folder b) Folder gốc cục có tên (Ví Dụ) MY COMPANY, gồm có: Folder CompanyInfo Folder Images Folder Products c) Khi mở Trang Web: Trang index (nằm Folder gốc cục bộ) d) Các Site Tĩnh: site Folder ổ cứng, sau Upload lên Web Server e) Các site động: Khi mở trang Web amazon.com thấy trang chào đón bạn đưa đề nghị mang tính cá nhân Các trang tạo phục vụ cho bạn, dựa vào việc lập trình sở liệu amazon 55 Đề cương môn học: Thiết kế web Trường Cao đẳng nghề Công nghiệp Hà Nội f) Site từ xa ảnh gương site cục Dreaweaver có cơng cụ để đồng hóa site Sử dụng hộp thoại site definition Việc thiết lập site cục site từ xa có nhiều bước Dreamweaver cung cấp hộp thoại nhằm dẫn dắt bạn tiến trình bước Trong hộp thoại cung cấp chế độ Basic Advanced Chế độ BASIC: Sử dụng nhiều hình (Winzard) Chế độ Advanced: cho phép bạn nhập thông tin hình với số hạng mục cung cấp tùy chọn chi tiết hạng mục Sử dụng hộp thoại Definition để tạo site cục site từ xa Tạo site cục bộ: Cột Giữa Create New -> Dreamweaver Site Hộp thoại site definition xuất hiện, mặc định với Tab Basic, hình Editing Files Nhập: DDTHANOI http://www.ddthanoi.edu.vn 56 Đề cương môn học: Thiết kế web Trường Cao đẳng nghề Công nghiệp Hà Nội Nhấp Next Dreamweaver hỏi bạn có muốn làm việc với cơng nghệ sử dụng chẳng hạn ColdFusion, ASP, NET.JSP PHP hay không? Chọn NO, I not want to use a Server Technology -> Next 6 6 6 Dreamweaver hỏi bạn muốn làm việc với Files suốt trình phát triển Dùng mặc định, dreamweaver hỏi bạn lưu trữ Files đâu máy tính? -> Nhấp biểu tượng Browse tìm vị trí lưu (Ở chọn Desktop) -> Next 57 Đề cương môn học: Thiết kế web Trường Cao đẳng nghề Công nghiệp Hà Nội 58 Đề cương môn học: Thiết kế web Trường Cao đẳng nghề Công nghiệp Hà Nội Chọn NONE Vì bạn tạo site cục -> Next Màn hình SUMMARY xuất tóm lược trình chọn lựa Nhấp DONE 59 Đề cương môn học: Thiết kế web Trường Cao đẳng nghề Công nghiệp Hà Nội 3.10 Câu hỏi ôn tập 1) 2) 3) 4) 5) 6) 7) 8) 9) 10) 11) 12) 13) 14) 15) Hãy liệt kê cách chọn bảng Hãy liệt kê cách chọn hàng, cột bảng Có thể bổ sung màu cho riêng biệt bảng khơng? Dùng thủ thuật để tạo đường biên bảng có độ rộng pixel Điều xác định bảng cố định Điều làm cho bảng tự co giãn Sự khác ngắt đoạn ngắt dòng Thẻ dùng cho ngắt đoạn ngắt dòng gì? Tại lựa chọn font chữ lại thường liệt kê nhiều font chữ khác Làm để bao văn xung quanh hình ảnh Có thể tạo loại danh sách Loại thẻ dùng để tạo liên kết gì? Làm để tạo liên kết thư điện tử Một đồ ảnh khác với hình ảnh liên kết Khi định dạng thẻ thay đổi định dạng tồn font chữ cho trang web không? 60 Đề cương môn học: Thiết kế web ... Hà Nội Giao diện Website giáo dục đào tạo Việt Nam Đề cương môn học: Thiết kế web Trường Cao đẳng nghề Công nghiệp Hà Nội Giao diện website bán đồ gốm Đề cương môn học: Thiết kế web Trường Cao... Công nghiệp Hà Nội Giao diện website công ty TNHH Phú Nghĩa Giao diện website công ty TNHH Mỹ Á CHƯƠNG II: THIẾT KẾ WEB VỚI NGƠN NGỮ HTML 10 Đề cương mơn học: Thiết kế web Trường Cao đẳng nghề... dấu, lập trình để thiết kế giao diện Bước 8: Kiểm tra giao diện trình duyệt Bước 9: Chuyển mã nguồn tới phận phát triển Web 1.3 Giới thiệu số website mẫu Đề cương môn học: Thiết kế web Trường Cao