MỤC LỤC. Giáo trình Thiết kế web Trang 1

Transcription

1 NỘI DUNG MỤC LỤC TRANG LỜI NÓI ĐẦU... 3 TÀI LIỆU THAM KHẢO... 4 BÀI 1: GIỚI THIỆU TỔNG QUAN VỀ DREAMWEAVER... 5 I. GIỚI THIỆU... 5 II. CÁC THAO TÁC CĂN BẢN TRONG DREAMWEAVER... 5 III. ĐỊNH DẠNG GIAO DIỆN VÀ VĂN BẢN CHO TRANG WEB... 8 BÀI 2: BẢNG (TABLE) I. CHÈN BẢNG II. HIỆU CHỈNH BẢNG BÀI 3: IMAGE I. CHÈN ẢNH VÀO TRANG WEB II. XÓA ẢNH KHỎI TRANG WEB III. HIỆU CHỈNH KÍCH THƯỚC ẢNH IV. HIỆU CHỈNH CÁC THUỘC TÍNH KHÁC CỦA ẢNH TRÊN TRANG WEB THÔNG QUA CỬA SỔ PROPERTIES BÀI 4: FORM I. CHÈN FORM MỚI VÀO TRANG WEB II THAY ĐỔI CÁC THUỘC TÍNH CỦA FORM III TEXT FIELD IV. TEXTAREA V. HIDDEN FIELD VI. CHECKBOX VII. CHECKBOX GROUP VIII. RADIO BUTTON IX. RADIO GROUP X. LIST/MENU XI. JUMP MENU GROUP XII. FILE FIELD XIII. BUTTON BÀI 5: HIỆU ỨNG HÌNH ẢNH I. ROLLOVER IMAGE Giáo trình Thiết kế web Trang 1

2 II. FLASH TEXT III. FLASH BUTTON IV. CHÈN ĐỐI TƯỢNG FLASH V. HYPERLINK Giáo trình Thiết kế web Trang 2

3 LỜI NÓI ĐẦU Giáo trình Thiết kế web được biên soạn dành cho học sinh trung cấp nghề và sinh viên cao đẳng nghề với mục tiêu cung cấp cho các em các kiến thức và kỹ năng làm việc trên phần mềm Adobe DreamWeaver CS2.- Một phần mềm hỗ trợ thiết kế và quản lý trang web chuyên nghiệp được sử dụng rộng rãi hiện nay. Phần mềm Adobe DreamWeaver có nhiều phiên bản (hiện nay đã có phiên bản CS5). Trong giáo trình này, tác giả trình bày nội dung dựa trên Adobe DreamWeaver CS2. Giáo trình được biên soạn một cách ngắn gọn, hướng dẫn các bước thực hiện rõ ràng và dễ hiểu giúp cho các em thực hành và hình thành kỹ năng nhanh chóng. Trong quá trình biên soạn, chắc chắn giáo trình còn nhiều thiếu sót. Tác giả rất mong nhận được ý kiến đóng góp của quý thầy/cô và các em học sinh, sinh viên. TÁC GIẢ Phan Hữu Phước Giáo trình Thiết kế web Trang 3

4 TÀI LIỆU THAM KHẢO Giáo trình Thiết kế web Trang 4

5 BÀI 1: GIỚI THIỆU TỔNG QUAN VỀ DREAMWEAVER I. GIỚI THIỆU Công dụng: Quản lý toàn bộ website o Các trang web bên trong website o Các tập tin thư viện dùng trong quá trình thiết kế trang web Xây dựng bố cục Chèn nội dung văn bản Chèn hình ảnh Chèn âm thanh (audio), đoạn phim (video clip) Ưu điểm của DreamWeaver: kết quả hiển thị trên trình duyệt gần giống với giao diện ta thiết kế trên DreamWeaver Khởi động Adobe DreamWeaver Cách 1: Vào Start -> All Programs -> Adobe DreamWeaver CS2 Cách 2: Click đôi chuột lên biểu tượng Adobe DreamWeaver CS2 trên màn hình desktop (Từ đây về sau, giáo trình sẽ viết tắt là DreamWeaver cho ngắn gọn) II. CÁC THAO TÁC CĂN BẢN TRONG DREAMWEAVER Tạo site mới B1: Vào menu Site -> New site. Xuất hiện hộp thoại Site Definition, Editing Files Giáo trình Thiết kế web Trang 5

6 B2: Nhập tên site. Ví dụ: LTMT1K10. Chọn Next tiếp tục. Xuất hiện Editing Files, Part 2 B3: Chọn No, I do not want to use a server technology, chọn Next. Xuất hiện Editing Files, Part 3 Giáo trình Thiết kế web Trang 6

7 B4: Chọn Edit local copies on my machine, chọn thư mục chứa website. Chọn Next tiếp tục. Xuất hiện Sharing Files B5: Chọn None rồi chọn Next tiếp tục. Xuất hiện Summary. Chọn Done hoàn tất. Chọn Site đã có để tiếp tục thiết kế cho các trang Vào menu Site -> Manage Sites. Xuất hiện hộp thoại Manage Sites. Giáo trình Thiết kế web Trang 7

8 Chọn site trong danh sách, chọn Done Thêm thư mục mới vào Site Click chuột phải lên đối tượng chứa trong cửa sổ Files, chọn New Folder. Xuất hiện thư mục mới, đặt tên cho thư mục. Thêm file (html) mới vào Site Click chuột phải lên đối tượng chứa trong cửa sổ Files, chọn New File Xuất hiện file mới, đặt tên cho file (phần mở rộng là.html) Mở một file (html) đã có trong Site để thiết kế Trong cửa sổ Files, click đôi chuột lên file cần mở III. ĐỊNH DẠNG GIAO DIỆN VÀ VĂN BẢN CHO TRANG WEB Định dạng tổng thể cho trang web B1: Vào menu Modify -> Page Properties (Ctrl-J). Xuất hiện hộp thoại Page Properties B2: Category Appearance (CSS) o Page font: Chọn font chữ mặc định cho trang web o Size: Chọn kích thước và đơn vị cho mặc định cho ký tự o Text color: Chọn màu mặc định cho ký tự o Background color: Chọn màu nền cho trang web o Background image: Chọn tập tin ảnh làm nền cho trang web Giáo trình Thiết kế web Trang 8

9 o Repeat: Chọn chế độ lập lại ảnh nền o Left margin: Canh lề trái o Right margin: Canh lề phải o Top margin: Canh lề trên o Bottom margin: Canh lề dưới B3: Category Link (CSS) o Link font: Chọn font chữ cho văn bản liên kết o Size: Chọn kích tước chữ cho văn bản liên kết o Link color: Chọn màu mặc định cho văn bản liên kết o Rollover link: Chọn màu cho văn bản liên kết khi rê chuột đến o Visited links: Chọn màu mặc định cho văn bản liên kết đã được click o Active links: Chọn màu mặc định cho văn bản liên kết hiện tại o Underline style: Chọn định dạng gạch chân cho văn bản liên kết o Always underline: định dạng gạch chân o Nerver underline: không gạch chân o Show underline only on rollover: chỉ gạch chân khi rê chuột đến văn bản liên kết o Hide underline on rollerver: không gạch chân cho văn bản liên kết nhưng khi rê chuột đến thì gạch chân B4: Category Title/Encoding o Titlte: Văn bản tiêu đề trang (hiển thị trên thanh tiêu đề của trình duyệt) o Encoding: Chọn mã hóa văn bản. Luôn luôn chọn Unicode (UTF-8) B5: Chọn Apply và OK hoàn tất Định dạng văn bản B1: Nhập văn bản B2: Dùng chuột chọn khối văn bản cần định dạng B3: Vào menu Format Align: Canh lề văn bản o Left: canh trái o Center: canh giữa o Right: canh phải o Justify: canh đều List: Định dạng danh sách đề mục o None: không định dạng đề mục o Unordered List: định dạng đề mục (không đánh số thứ tự) o Ordered List: định dạng đánh số thứ tự đề mục Font: Chọn font chữ cho văn bản o Sau khi chọn font, xuất hiện hộp thoại New CSS Rule Giáo trình Thiết kế web Trang 9

10 o Chọn lớp định dạng (Class) o Chọn tên lớp định dạng hoặc nhập tên mới o Chọn OK Style: Chọn định dạng o Bold: chữ đậm o Italic: chữ nghiêng o Underline: chữ gạch chân Color: Chọn màu cho văn bản Giáo trình Thiết kế web Trang 10

11 BÀI 2: BẢNG (TABLE) I. CHÈN BẢNG B1: Click chuột tại vị trí cần chèn bảng B2: Vào menu Insert -> Table. Xuất hiện hộp thoại Table. B3: Nhập các thông số cho bảng cần chèn Rows: số dòng Columns: số cột Table width: chiều rộng của bảng Border thickness: độ dày đường viền Cell padding: khoảng cách giữa đường biên của ô với nội dung trong ô Cell spacing: khoảng cách giữa các ô trong bảng Header: tùy chọn vị trí tiêu đề II. HIỆU CHỈNH BẢNG Định dạng cho bảng B1: Click chuột tại vị trí bất kỳ bên trong bảng cần hiệu chỉnh B2: Vào menu Modify -> Table -> Select table B3: Hiệu chỉnh các thông số của bảng trong cửa sổ Properties Bg color: chọn màu nền cho bảng Bg Image: chọn ảnh làm nền cho bảng Brdr color: chọn màu cho đường viền của bảng Trộn nhiều ô thành 1 ô B1: Quét chọn các liên tiếp cần trộn B2: Vào menu Modify -> Table -> Merge cells Tách 1 ô thành nhiều ô B1: Click chuột vào ô cần tách B2: Vào menu Modify -> Table -> Split cell. Xuất hiện hộp thoại Split cell Giáo trình Thiết kế web Trang 11

12 B3: Chọn tùy chọn Split cell into o Rows: tách ô thành nhiều dòng o Columns: tách ô thành nhiều cột o Number of : số lượng cần tách Định dạng ô trong bảng B1: Click chuột vào ô cần định dạng B2: Chọn các tùy chọn định dạng trong vùng Cell của cửa sổ Properties o Horz: canh lề theo chiều ngang o Vert: canh lề theo chiều dọc o W: chiều rộng của ô o H: chiều cao của ô o Bg: chọn màu, tập tin ảnh làm nền cho ô o Brdr: chọn màu cho đường viền của ô Giáo trình Thiết kế web Trang 12

13 BÀI 3: IMAGE I. CHÈN ẢNH VÀO TRANG WEB Cách 1: Chèn bằng menu lệnh B1: Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn ảnh B2: Chọn menu Insert -> Image. Xuất hiện hộp thoại Select Image Source. B3: Chọn file ảnh cần chèn, chọn OK. B4: Xuất hiện hộp thoại Image Tag Accessibility Attributes o Alternate text: nội dung ngắn, mô tả cho hình ảnh o Long description: địa chỉ trang web mô tả đầy đủ cho hình ảnh B5: Nhập nội dung cho Alternate text và Long description trong hộp thoại Image Tag Accessbility Attributes B6: Chọn OK *Có thể bỏ qua bước B5 Cách 2: Kéo rê ảnh từ cửa sổ Files và trang web. II. XÓA ẢNH KHỎI TRANG WEB B1: Trên vùng nhìn Design của trang web, click chuột lên ảnh cần xóa. B2: Bấm Delete trên bàn phím III. HIỆU CHỈNH KÍCH THƯỚC ẢNH Thay đổi kích thước (chiều rộng và chiều cao) hiển thị của ảnh trên trang web B1: Trên vùng nhìn Design của trang web, chọn ảnh cần thay đổi kích thước B2: Di chuyển chuột đến các điểm neo của ảnh, con trỏ chuột sẽ có hình mũi tên 2 chiều B3: Click giữ trái và kéo rê chuột để thay đổi kích thước Giáo trình Thiết kế web Trang 13

14 *Chú ý: trong quá trình kéo rê chuột, nên ấn và giữ phím Ctrl trên bàn phím để ảnh không bị biến dạng IV. HIỆU CHỈNH CÁC THUỘC TÍNH KHÁC CỦA ẢNH TRÊN TRANG WEB THÔNG QUA CỬA SỔ PROPERTIES W: Kích thước chiều rộng hiển thị trên trang web H: Kích thước chiều cao hiển thị trên trang web Border: Kích thước viền của đường biên ảnh V Space: Khoảng cách giữa đường biên (theo chiều dọc) với hình ảnh H Space: Khoảng cách giữa đường biên (theo chiều ngang) với hình ảnh Src: đường dẫn đến tập tin ảnh Link: địa chỉ liên kết đến trang khác khi click chuột lên hình ảnh trên trình duyệt web Target: tên đối tượng hiển thị trang web được liên kết khi click chuột lên ảnh (sẽ được biết ở bài sau) Low src: đường dẫn đến file ảnh khác nhưng có kích thước (lưu trữ) nhỏ hơn Alt: nội dung ngắn, mô tả cho hình ảnh Align: cách thức hiển thị hình ảnh trên trang web Class: lớp định dạng cho ảnh trên trang web (sẽ được biết đến trong bài CSS) Giáo trình Thiết kế web Trang 14

15 BÀI 4: FORM I. CHÈN FORM MỚI VÀO TRANG WEB B1: Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn form B2: Chọn menu Insert -> Form -> Form. II THAY ĐỔI CÁC THUỘC TÍNH CỦA FORM B1: Click chuột trên đường viền đỏ thể hiện form B2: Hiệu chỉnh các thuộc tính của form trên cửa sổ Properties o Action: địa chỉ trang web sẽ nhận các dữ liệu trên form o Method: phương thức gửi dữ liệu o Target: đối tượng cửa sổ (hoặc frame) hiển thị kết quả III TEXT FIELD B1: Click chuột lên vị trí cần chèn Text Field trong form B2: Vào menu Insert -> Form -> Text Field. Xuất hiện hộp thoại Input Tag Accessibility Attributes B3: Nhập các thông tin tùy chọn cho Text Field IV. TEXTAREA B1: Click chuột tại vị trí cần chèn Textarea B2: Vào menu Insert -> Form -> Textarea B3: Nhập các thông tin tùy chọn cho Textarea V. HIDDEN FIELD B1: Click chuột tại vị trí cần chèn Hidden Field B2: Vào menu Insert -> Form -> Hidden Field VI. CHECKBOX B1: Click chuột tại vị trí cần chèn Checkbox B2: Vào menu Insert -> Form -> Checkbox B3: Nhập các thông tin tùy chọn cho Checkbox VII. CHECKBOX GROUP B1: Click chuột tại vị trí cần chèn Checkbox Group B2: Vào menu Insert -> Form -> Checkbox Group B3: Nhập các thông tin tùy chọn cho Checkbox Group VIII. RADIO BUTTON B1: Click chuột tại vị trí cần chèn Radio Button B2: Vào menu Insert -> Form -> Radio Button B3: Nhập các thông tin tùy chọn cho Radio Button IX. RADIO GROUP B1: Click chuột tại vị trí cần chèn Radio Group B2: Vào menu Insert -> Form -> Radio Group B3: Nhập các thông tin tùy chọn cho Radio Group Giáo trình Thiết kế web Trang 15

16 X. LIST/MENU B1: Click chuột tại vị trí cần chèn List/Menu B2: Vào menu Insert -> Form -> List/Menu B3: Nhập các thông tin tùy chọn cho List/Menu B4: Nhập các mục chọn trong List/Menu XI. JUMP MENU GROUP B1: Click chuột tại vị trí cần chèn Jump Menu B2: Vào menu Insert -> Form -> Jump Menu B3: Nhập các thông tin tùy chọn cho Jump Menu XII. FILE FIELD B1: Click chuột tại vị trí cần chèn File Field B2: Vào menu Insert -> Form -> File Field B3: Nhập các thông tin tùy chọn cho File Field XIII. BUTTON B1: Click chuột tại vị trí cần chèn Button B2: Vào menu Insert -> Form -> Button B3: Nhập các thông tin tùy chọn cho Button Giáo trình Thiết kế web Trang 16

17 BÀI 5: HIỆU ỨNG HÌNH ẢNH I. ROLLOVER IMAGE Tạo hiệu ứng đổi ảnh khi rê chuột lên ảnh B1: Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn form B2: Chọn menu Insert -> Image Objects -> Rollover Image. Xuất hiện hộp thoại Insert Rollover Image B3: Nhập các thông tin cho Rollover Image o Image name: tên của rollover image. Tên của các rollover image phải khác nhau. o Original image: đường dẫn hình ảnh hiển thị đầu tiên o Rollover image: đường dẫn hình ảnh sẽ được hiển thị khi rê chuột lên ảnh o Preload rollover image: các ảnh sẽ được nạp xong rồi mới hiển thị o Alternate text: nội dung ngắn mô tả cho ảnh o When clicked, go to URL: địa chỉ trang web sẽ được liên kết điến khi click chuột lên ảnh II. FLASH TEXT Tạo nội dung ngắn có hiệu ứng flash đổi màu đơn giãn B1: Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn Flash Text. B2: Chọn menu Insert -> Objects -> Flash Text. Xuất hiện cửa sổ Insert Flash Text. B3: Nhập các thông tin cho Flash Text o Font, size: chọn font và kích thước chữ. o Text: nội dung văn bản ngắn o Color: màu sắc hiển thị văn bản o Rollover color: màu sắc của văn bản sẽ được thay đổi khi rê chuột lên Flash Text o URL: địa chỉ trang web được liên kết đến khi click chuột lên Flash Text o Path: đường dẫn tập tin để lưu kết quả III. FLASH BUTTON Tạo nút nhấn có hiệu ứng flash đơn giãn theo mẫu của DreamWeaver B1: Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn Flash Button B2: Vào menu Insert -> Objects -> Flash Button. Xuất hiện hộp thoại Insert Flash Button B3: Nhập các thông tin cho Flash Button o Font, size: chọn font và kích thước chữ o Style: chọn mẫu nút nhấn o Text: nội dung văn bản ngắn trên nút o URL: địa chỉ trang web được liên kết đến khi click chuột trên Flash Button o Path: đường dẫn tập tin để lưu kết quả Giáo trình Thiết kế web Trang 17

18 IV. CHÈN ĐỐI TƯỢNG FLASH B1: Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn đối tượng Flash B2: Kéo rê đối tượng flash (tập tin.swf) vào vị trí cần chèn. V. HYPERLINK Tạo liên kết đến trang web khác, liên kết gửi hoặc nhảy đến vị trí khác trong trang. B1: Quét khối hoặc chọn hình ảnh cần tạo liên kết. B2: Vào menu Insert -> Hyperlink. Xuất hiện hộp thoại Hyperlink B3: Nhập các thông tin cho liên kết muốn tạo o Link: đường dẫn đến trang trong site hoặc trang web bên ngoài cần liên kết đến o Target: đối tượng đích sẽ hiển thị nội dung trang được liên kết o Title: tiêu đề mô tả cho liên kết * Tạo liên kết đến một trang cùng site với trang hiện tại: Link: đường dẫn tương đối đến trang Ví dụ: gioithieu.html * Tạo liên kết đến trang ngoài site Link: đường dẫn tuyệt đối Ví dụ: * Tạo liên kết gửi Link: mailto://địa chỉ Ví dụ: mailto://wsphuoc@gmail.com Giáo trình Thiết kế web Trang 18