Hướng dẫn làm web dreamweaver 8 toàn tập năm 2024
|
0% found this document useful (0 votes) Show 10 views 85 pages Copyright© © All Rights Reserved Available FormatsPPT, PDF, TXT or read online from Scribd Share this documentDid you find this document useful?0% found this document useful (0 votes) 10 views85 pages DreamweaverJump to Page You are on page 1of 85 MÔN HỌCMÔN HỌC: : THIẾT KẾ WEBTHIẾT KẾ WEB THIẾT KẾ WEB BẰNG MACROMEDIA DREAMWEAVER GV: Phạm Hồng Phong NỘI DUNGNỘI DUNG Giới thiệu về Macromedia Dreamweaver. Thiết kế Web bằng một số công cụ cơ bản. Cách tạo liên kết (Hyperlink). Kỹ thuật thiết kế Frame. Kỹ thuật Layout. Sử dụng CSS để tạo một số hiệu ứng trong trang Web. MỤC TIÊUMỤC TIÊU Sử dụng phần mềm DreamWeaver để: Thiết kế các trang Web tĩnh. Tạo các hiệu ứng trong trang Web. Quản lý một Website cục bộ. Reward Your CuriosityEverything you want to read. Anytime. Anywhere. Any device. No Commitment. Cancel anytime.
27 THIẾT KẾ TRANG WEB 5) Danh sách: chọn text cần tạo danh sách + Có thể định nghĩa danh sách riêng theo yêu cầu: Menu Text List Properties… 28 THIẾT KẾ TRANG WEB 6) Hình ảnh: đặt con trỏ tại vị trí cần chèn + Thanh công cụ Insert: Chọn tab Common Image Hộp thoại Select Image Source: chọn đường dẫn nơi lưu file hình ảnh chọn hình cần chèn click OK 29 THIẾT KẾ TRANG WEB 6) Hình ảnh: đặt con trỏ tại vị trí cần chèn + Menu Insert: Chọn menu Insert Image (Ctrl + Alt + I) Hộp thoại Select Image Source: chọn đường dẫn nơi lưu file hình ảnh chọn hình cần chèn click OK Lưu ý: Hình ảnh khác thư mục và hình ảnh cùng thư mục trang Web đang thiết kế thì khác nhau đường dẫn. 30 THIẾT KẾ TRANG WEB 6) Hình ảnh: Kết quả: 31 Canh biên hình ảnh so với IE THIẾT KẾ TRANG WEB 6) Hình ảnh: Thuộc tính: Chuỗi Tooltip thể hiện trên hình ảnh Canh biên hình ảnh so với IE 32 THIẾT KẾ TRANG WEB 6) Hình ảnh: Thuộc tính: Chuỗi Tooltip thể hiện trên hình ảnh Độ dày khung bao quanh hình ảnh Canh biên so với IE Số khoảng trắng dọc hoặc ngang so với text trên trang Web Canh biên so với text Middle = Absolute Middle Top = TextTop Baseline (Default) Bottom = Absolute Bottom 33 THIẾT KẾ TRANG WEB 7) Liên kết: Tạo liên kết: có 3 cách tạo + Thanh công cụ Properties: + Click phải mouse: + Menu Modify: 34 THIẾT KẾ TRANG WEB 7) Liên kết: Xuất hiện hộp thoại Select File: 35 THIẾT KẾ TRANG WEB 7) Liên kết: Lưu ý: + URL (Uniform Resource Locator): là địa chỉ của một đối tượng thường được gõ vào vùng Address của các Web Browser. + Địa chỉ tuyệt đối Địa chỉ tương đối: Địa chỉ tuyệt đối: là địa chỉ đầy đủ. Vd: 36 THIẾT KẾ TRANG WEB 7) Liên kết: Lưu ý: + URL (Uniform Resource Locator): là địa chỉ của một đối tượng thường được gõ vào vùng Address của các Web Browser. + Địa chỉ tuyệt đối Địa chỉ tương đối: Địa chỉ nền: là địa chỉ bắt đầu của 1 trang Web. Vd: 37 THIẾT KẾ TRANG WEB 7) Liên kết: Lưu ý: + URL (Uniform Resource Locator): là địa chỉ của một đối tượng thường được gõ vào vùng Address của các Web Browser. + Địa chỉ tuyệt đối Địa chỉ tương đối: Địa chỉ tương đối: là địa chỉ được tính từ địa chỉ nền. Vd: 38 Trang khác có địa chỉ được xác định trong URL của liên kết THIẾT KẾ TRANG WEB 7) Liên kết: Phân loại: có 2 loại liên kết chính + Liên kết ngoài: ……… ……… Liên kết ……… ……… ……… URL = <địa chỉ trang cần liên kết> Trang chứa liên kết Trang khác có địa chỉ được xác định trong URL của liên kết 39 Vị trí cần liên kết (điểm neo)
THIẾT KẾ TRANG WEB 7) Liên kết: Phân loại: có 2 loại liên kết chính + Liên kết trong: Liên kết và vị trí cần liên kết nằm trên cùng 1 trang Web ……… ……… Liên kết ……… Vị trí k Liên kết URL = # 40 Trang khác chứa vị trí cần liên kết
THIẾT KẾ TRANG WEB 7) Liên kết: Phân loại: có 2 loại liên kết chính Có thể kết hợp 2 loại liên kết trên ……… ……… Vị trí k ……… ……… ……… Liên kết URL = <địa chỉ trang liên kết># 41 THIẾT KẾ TRANG WEB 7) Liên kết: Các hình thức liên kết: + Mở liên kết bằng một cửa sổ mới. + Mở liên kết trên cùng một cửa sổ. + Mở liên kết là một địa chỉ mail. 42 THIẾT KẾ TRANG WEB 7) Liên kết: Các hình thức liên kết: + Sử dụng hình ảnh làm liên kết. Chọn hình ảnh làm liên kết. Đặt URL của trang cần liên kết ở thuộc tính Link 43 THIẾT KẾ TRANG WEB 7) Liên kết: Bỏ liên kết: + Chọn liên kết. + Xóa tất cả những gì có trong thuộc tính Link Link để trống 44 MỘT SỐ KỸ THUẬT 1) Phân vùng liên kết trên một ảnh: + Chọn hình ảnh cần phân vùng liên kết. + Chọn loại công cụ dùng để phân vùng. Phân vùng hình chữ nhật Phân vùng hình elip Phân vùng hình đa giác + Tạo phân vùng trên ảnh. 45 MỘT SỐ KỸ THUẬT 2) Bảng: Tạo bảng: + Đặt con trỏ ở vị trí cần tạo bảng. + Vào menu Insert chọn Table Hoặc: click nút Table trên tab Common, thanh công cụ Insert Công cụ Table 46 MỘT SỐ KỸ THUẬT 2) Bảng: Tạo bảng: Số dòng Số cột Độ rộng cột Độ dày khung 47 MỘT SỐ KỸ THUẬT 2) Bảng: Chọn bảng: + Đặt con trỏ bên trong bảng cần chọn. + Click phải chọn Table Select Table (Hoặc: vào menu Modify Table Select Table) 48 MỘT SỐ KỸ THUẬT 2) Bảng: Thuộc tính: Số dòng Chiều cao Độ dày khung Số cột Chiều rộng Canh biên Clear Row Heights/Column Widths Convert Table Heights/Widths to Percents Convert Table Heights/Widths to Pixels Màu nền Màu của khung Ảnh nền 49 MỘT SỐ KỸ THUẬT 2) Bảng: Thuộc tính: Ngoài ra còn có các thuộc tính khác như: + Canh biên cho từng ô. + Định dạng font/color/background cho ô. + In đậm, in nghiêng. + Nối ô (merge cell) và chia ô (split cell). ……… 50 MỘT SỐ KỸ THUẬT 3) Layout: Mục đích: + Sắp xếp các thông tin theo đúng yêu cầu thiết kế. + Thao tác dễ dàng khi thiết kế. Nên sử dụng công cụ bảng để sắp xếp các thông tin cho đúng vị trí trên trang Web. 51 MỘT SỐ KỸ THUẬT 3) Layout: Cách thức chung: + Tạo bảng có số lượng hàng và cột phù hợp với lượng thông tin trên trang Web (có Border = 0) + Tạo thêm, nối hoặc chia nhỏ các hàng và cột, tùy theo giao diện của yêu cầu thiết kế. + Chèn thông tin vào các ô ở các vị trí tương ứng trên bảng. + Tinh chỉnh kích thước các ô và nội dung. Khó điều chỉnh kích thước theo đúng yêu cầu thiết kế nếu sử dụng bảng ở chế độ Standard. 52 MỘT SỐ KỸ THUẬT 3) Layout: Chế độ Layout View: + Ở chế độ này, bảng giống như bảng ở chế độ Standard. + Cell pading, Cell spacing và Border = 0 + Mỗi ô của bảng sẽ chứa 1 khoảng trắng. + Kích thước các ô/bảng sẽ dễ dàng chỉnh sửa so với bảng ở chế độ Stadard, giúp đáp ứng được yêu cầu của thiết kế. Bảng ở chế độ Layout View gọi là: Layout Table 53 MỘT SỐ KỸ THUẬT 3) Layout: Tạo Layout Table: + Chọn tab Layout trên thanh công cụ Insert. + Click nút Layout, chọn công cụ Layout Table. + Tạo tùy ý trên cửa sổ thiết kế. + Tạo các ô bên trong Layout Table vừa tạo (sử dụng công cụ Draw Layout Cell) 54 MỘT SỐ KỸ THUẬT 3) Layer: Khái niệm: + Layer (lớp) là một vùng có thể đặt bất kỳ vị trí nào trên trang Web. + Có thể chứa bất kỳ các thành phần khác: text, hình ảnh, danh sách, … và có thể chứa 1 lớp con. + Chỉ thiết kế ở chế độ Standard . 55 MỘT SỐ KỸ THUẬT 3) Layer: Thao tác: + Thanh Insert chọn tab Layout Standard. + Chọn công cụ Draw Layer drag ở vị trí cần tạo. (Hoặc vào menu Insert Layout Objects Layer) + Có thể thay đổi kích thước/vị trí của layer. 56 MỘT SỐ KỸ THUẬT 3) Layer: Ví dụ: Tạo hiệu ứng nổi cho hình/text trên trang Web. Tạo 1 layer chứa text Copy thành 1 layer mới Định dạng màu cho text Kết quả 57 MỘT SỐ KỸ THUẬT 4) Flash: Là một dạng file media, dùng để tạo hiệu ứng sinh động trên trang Web. Một số ứng dụng của file Flash: + Tạo ảnh và các hiệu ứng chuyển động. + Tạo những đoạn film nhỏ. + Các hiệu ứng về âm thanh. + Tạo các trò chơi. 58 MỘT SỐ KỸ THUẬT 4) Flash: Chèn file Flash đã có vào trang Web: + Thanh công cụ Insert: tab Common Flash + Menu Insert: chọn Media Flash + Ấn tổ hợp phím: Ctrl + Alt + F 59 MỘT SỐ KỸ THUẬT 4) Flash: Cách tạo 1 Flash Text: + Thanh công cụ Insert: tab Common Flash Flash Text + Menu Insert: chọn Media Flash Flash Text 60 MỘT SỐ KỸ THUẬT 4) Flash: Cách tạo 1 Flash Text: Hộp thoại Insert Flash Text: 61 MỘT SỐ KỸ THUẬT 4) Flash: Cách tạo 1 Flash Button: + Thanh công cụ Insert: tab Common Flash Flash Button + Menu Insert: chọn Media Flash Flash Button 62 MỘT SỐ KỸ THUẬT 4) Flash: Cách tạo 1 Flash Button: Hộp thoại Insert Flash Button: 63 MỘT SỐ KỸ THUẬT 5) Rollover Image: Khi di chuyển mouse trên một ảnh thì ảnh này sẽ biến đổi thành một ảnh khác. Thao tác tạo 1 Rollover Image: + Thanh công cụ Insert: tab Common Image Rollover Image + Menu Insert: chọn Image Objects Rollover Image 64 MỘT SỐ KỸ THUẬT 5) Rollover Image: + Hộp thoại Insert Rollover Image: 65 MỘT SỐ KỸ THUẬT 6) Navigation Bar: Khái niệm: + Là dạng menu gồm nhiều nút thể hiện các chức năng. Khi di chuyển mouse trên nút sẽ có hiệu ứng thay đổi. + Trên một trang Web thì chỉ tồn tại duy nhất một Navigation Bar 66 MỘT SỐ KỸ THUẬT 6) Navigation Bar: Thao tác tạo: + Thanh công cụ Insert: tab Common Image Navigation Bar + Menu Insert: chọn Image Objects Navigation Bar 67 MỘT SỐ KỸ THUẬT 6) Navigation Bar: + Hộp thoại Insert Navigation Bar: 68 MỘT SỐ KỸ THUẬT 7) Frame: Công dụng: + Chia màn hình thành nhiều phần khác nhau, mỗi vùng thể hiện một trang Web khác nhau. + Giảm được phần trùng lắp trên nhiều trang Web khác nhau. Lưu ý: hình ảnh có thể bị biến dạng khi thu nhỏ hoặc phóng to cửa sổ trình duyệt. 69 MỘT SỐ KỸ THUẬT 7) Frame: Thao tác tạo: + Thanh công cụ Insert: tab Layout Frames chọn kiểu Frame + Menu Insert: chọn HTML Frames chọn kiểu Frame 70 MỘT SỐ KỸ THUẬT 8) CSS (Cascade Style Sheet): Text: Công dụng: Thông thường sử dụng kỹ thuật này để trang trí. Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text. + Chọn text cần định dạng theo mẫu. + Chọn định dạng đã được tạo. 71 MỘT SỐ KỸ THUẬT 8) CSS (Cascade Style Sheet): Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text. Vào menu Text CSS Styles New Đặt tên cho mẫu định dạng click OK 72 MỘT SỐ KỸ THUẬT 8) CSS (Cascade Style Sheet): Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text. Đặt tên file CSS lưu trên Windows. Click nút Save để lưu file CSS. 73 MỘT SỐ KỸ THUẬT 8) CSS (Cascade Style Sheet): Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text. Xuất hiện hộp thoại cho phép định dạng các tính chất của text. 74 MỘT SỐ KỸ THUẬT 8) CSS (Cascade Style Sheet): Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text. Type: 75 MỘT SỐ KỸ THUẬT 8) CSS (Cascade Style Sheet): Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text. Background: 76 MỘT SỐ KỸ THUẬT 8) CSS (Cascade Style Sheet): Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text. Block: 77 MỘT SỐ KỸ THUẬT 8) CSS (Cascade Style Sheet): Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text. Box: 78 MỘT SỐ KỸ THUẬT 8) CSS (Cascade Style Sheet): Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text. Border: 79 MỘT SỐ KỸ THUẬT 8) CSS (Cascade Style Sheet): Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text. List: 80 MỘT SỐ KỸ THUẬT 8) CSS (Cascade Style Sheet): Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text. Positioning: 81 MỘT SỐ KỸ THUẬT 8) CSS (Cascade Style Sheet): Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text. Extensions: 82 MỘT SỐ KỸ THUẬT 8) CSS (Cascade Style Sheet): Text: Thao tác chung: + Chọn text cần định dạng theo mẫu. + Chọn định dạng đã được tạo. Kết quả 83 MỘT SỐ KỸ THUẬT 8) CSS (Cascade Style Sheet): Ngoài ra có thể sử dụng CSS cho các đối tượng khác như: hình ảnh, bảng … 84 MỘT SỐ KỸ THUẬT 9) Form: Công dụng: + Giúp người dùng giao tiếp với WebServer bằng các thành phần trên Form. + Các thành phần của Form: • Label, Text Field, Text Area, Password Field. • Check Box, Radio Button, Radio Group. • List/Menu. • Button, Image Field. • Jump Menu. 85 MỘT SỐ KỸ THUẬT 9) Form: Thao tác tạo: + Thanh công cụ Insert: tab Forms Form + Menu Insert: chọn Form Form + Sau đó chèn các thành phần vào trong Form (tùy theo yêu cầu công việc) bằng cách sử dụng các công cụ trên thanh công cụ Insert – tab Forms/menu Insert – Form. |
