3.1.1. Tạo một website
- Chọn menu Site New Site chọn thẻ Site
Hình 3.1. Hộp thoại Site setup –thẻ Site
+ Site Name: nhập tên site
+ Local Site Folder: chọn thư mục lưu các tập tin trong Site Save
Tạo thƣ mục con trong site: bấm chuột phải lên tên site muốn tạo thư
mục con New folder
Tạo tập tin trong site: bấm chuột phải lên tên thư mục muốn tạo tập tin New file
Hình 3.2. Cửa sổ Files
- Chọn thƣ mục mặcđịnh chứa hình ảnh trong site:
Chọn thẻ Site chọn thẻ Advanced Settings chọn thư mục mặc định chứa hình ảnh trong mục Default Images folder
Hình 3.3. Hộp thoại Site setup –thẻ Advanced
Hình 3.4. Hộp thoại Site setup –thẻ Server
Chọn nút (+) để thêm một server mới
+ Thẻ Basic
Server Name: nhập tên server
Connect using: chọn phương thức kết nối Address: địa chỉ server
Username: tên đăng nhập Password: mật khẩu
Root Directory: thư mục gốc Web URL: địa chỉ trang web
+ Thẻ Advanced
Automatically upload files to server: tự động upload các file lên web server mỗi khi trang được lưu.
Save
Đƣa Website đã tạo sẵn vào Dreamweaver quản lý:
+ Chọn menu Site New Site chọn Site + Site Name: nhập tên site
+ Local Site Folder: chọn thư mục chứa Website đã tạo Save
3.1.2. Quản lý website
- Chọn menu Site Manage Sites
- Chọn tên website muốn quản lý chọn nút Edit Site chọn Site
3.1.3. Đƣa website lên internet
Hình 3.7. Hộp thoại Files
- Đưa file lên server từ xa: chọn Put file(s) to “Remote Server” - Lấy file về từ server từ xa: chọn Get file(s) from “Remote Server” - Đồng bộ các file trên server từ xa và server cục bộ: chọn Sychronize
3.1.4. Kiểm tra và sửa lỗi trang web
Kiểm tra và sửa lỗi các liên kết trong trang web
- Mở trang web muốn kiểm tra các liên kết
- Chọn menu Window Results Link Checker - Chọn nút Check Link chọn lệnh kiểm tra liên kết
- Sửa lỗi các liên kết: chọn 1 liên kết bị hỏng trong cửa sổ Broken Link chọn nút Browse for file chọn lại file liên kết
Hình 3.9. Lệnh sửa lỗi liên kết
Hiệu lực hóa các trang web
Validator cho phép định vị nhanh các lỗi thẻ hoặc cú pháp trong mã lệnh. - Mở trang web muốn kiểm tra các liên kết
- Chọn menu Window Results Validation - Chọn nút Validate chọn lệnh kiểm tra
- Chọn nút More info để xem thêm thơng tin dịng lỗi chọn
Hình 3.10. Cửa sổ Validation
Kiểm tra khả năng tương thích trình duyệt
- Mở trang web muốn kiểm tra
- Chọn menu File Check Page Browser Compatibility
- Trong cửa sổ Browser Compatibility chọn dịng lỗi để xem thơng tin lỗi
* Quy trình xuất bản một website:
- Thiết kế website - Đăng ký Hosting - Đăng ký tên miền - Đưa website lên Hosting - Kiểm tra và kết thúc
3.2. TẠO VÀ ĐỊNH DẠNG CÁC ĐỐI TƢỢNG TRÊN TRANG WEB 3.2.1. Môi trƣờng làm việc của Dreamweaver
Các thành phần chính trong cửa sổ Dreamweaver
Hình 3.12. Cửa sổ Dreamweaver
- Document Window: hiển thị các tài liệu Dreamweaver
- Document Toolbar: hiển thị các công cụ cho tài liệu hiện hành - Docking Channel: chứa nhóm các panel
- Property Inspector : hiển thị các thuộc tính của đối tượng đang được chọn Các chế độ làm việc
Với một trang web, Dreamweaver cung cấp cho người dùng 3 giao diện hiển thị.
Docking Channel Document Window Document Toolbar
- Chế độ Code: mã lệnh HTML, CSS, Javascript, …..
- Chế độ Design: hiển thịtrang web trực quan, phù hợp với việc thiết kế giao diện.
- Chế độ Split: Chia màn hình thiết kế thành 2 phần, phần bên trái hiển thị mã lệnh, phần bên phải hiển thị kết quả thiết kế dưới dạng Design.
3.2.2. Các thao tác cơ bản
Tạo một trang web mới
- Từ menu File New Blank Page Chọn HTML Create Lưu trang web
- Từ menu File Save Save in: chọn vị trí lưu File name: nhập tên file
save as type: chọn loại tập tin Save
Mở trang web
- Từ menu File Open Look in: chọn vị trí chứa file mở chọn tên file mở Open
Đóng trang web đang soạn
- Từ menu File Close
- Đóng tất cả các file đang mở: File Close All Kiểm tra kết quả thiết kế trên trình duyệt
- Trên thanh công cụ chọn nút Preview/Debug in Browser Chọn trình duyệt để kiểm tra trang web
3.2.3. Làm việc với văn bản
Hình 3.14. Cửa sổ Properties
Tạo tiêu đề
- Trong khung cửa sổ Design chọn văn bản cần định dạng
- Chọn menu lệnh Format Paragraph Format chọn kiểu định dạng tiêu đề có sẵn Heading1, Heading2,… (hoặc chọn nút lệnh Format trên cửa sổ Properties)
Hình 3.15. Lệnh tạo tiêu đề
Canh lề đoạn
- Trong khung cửa sổ Design chọn văn bản cần định dạng
- Chọn menu lệnh Format Align chọn cách canh lề: Left, Center, Right, Justify
Kiểu trình bày đoạn: Headingl, Heading2,...
sử dụng class Tạo hoa thị
Tạo số thứ tự
Tạo liên kết
Giảm/ tăng khoảng cách với lề
Cách mở trang web liên kết sử dụng ID
Hình 3.16. Lệnh canh lề
Tạo danh sách có thứ tự và khơng có thứ tự
- Trong khung cửa sổ Design chọn văn bản cần định dạng
- Chọn menu lệnh Format List chọn loại danh sách cần tạo + Unordered List: tạo danh sách khơng có thứ tự
+ Ordered List: tạo danh sách có thứ tự
(hoặc chọn nút Unordered List hay Ordered List trên cửa sổ Properties)
Hình 3.17. Lệnh tạo danh sách
Tạo chữ đậm, chữ nghiêng, chữ gạch chân
- Trong khung cửa sổ Design chọn văn bản cần định dạng
- Chọn menu lệnh Format List Style chọn kiểu định dạng: + Bold: chữ in đậm
+ Italic: chữ nghiêng
Hình 3.18. Lệnh định dạnh chữ
3.2.4. Làm việc với hình ảnh
Chèn hình
- Trong khung cửa sổ Design, đặt điểm chèn tại vị trí cần chèn hình ảnh - Chọn menu lệnh Insert Image Look in: chọn vị trí chứa hình chọn
hình hoặc gõ địa chỉ hình trong mục URL
Hình 3.19. Hộp thoại Select Image Source
Thay đổi thuộc tính hìnhảnh
- Chọn hình cần thay đổi thuộc tính chọn thuộc tính trong cửa sổ Properties:
Hình 3.20. Cửa sổ Properties
+ W: chiều rộng của hình + H: chiều cao của hình. + Src: địa chỉ, tên file hình
+ Link: địa chỉ trang web liên kết với hình + Target: cách mở trang web liên kết
+ Alt: dòng chữ hiện ra khi người xem đưa chuột vào hình + : tạo các hotspot cho hình
+ ID: ID định dạng cho hình + Class: class định dạng cho hình
3.2.5. Làm việc với multimedia
Chèn file Flash
- Trong khung cửa sổ Design, đặt điểm chèn tại vị trí cần chèn file Flash - Chọn menu lệnh Insert Media
+ SWF: chèn movie flash (file .swt) + Shockware: chèn shockware (file .swc) + FLV: chèn video flash (file .flv)
chọn file muốn chèn OK
Các định dạng file flash có thể chèn vào trang web: .swt, .swc, .flv
Chèn file âm thanh
- Trong khung cửa sổ Design, đặt điểm chèn tại vị trí cần chèn file âm thanh - Chọn menu lệnh Insert Media Plugin
chọn file audio muốn chèn OK
3.2.6. Liên kết trang
Tạo liên kết ngoài
- Chọn đối tượng (văn bản hoặc hình ảnh) tạo liên kết gõ địa chỉ liên kết trong ô Link trên thanh Properties
- Hoặc chọn biểu tượng Browse for file để chọn file liên kết - Hoặc kéo file liên kết (nếu file nằm trong website) thả vào ơ link
Hình 3.21. Cửa sổ Properties
Tạo liên kết đến một vị trí bên trong 1 trang web
- Đặt tên cho 1 vị trí trong trang web: đặt điểm chèn tại vi trí muốn đặt tên chọn lnsert Name Anchor nhập tên cho vị trí OK
- Chọn đối tượng (văn bản hoặc hình ảnh) tạo liên kết gõ #tên vị trí liên kết (phải có dấu # ngay trước tên vị trí liên kết) trong ô Link trên thanh
Properties.
3.2.7. Làm việc với bảng
Tạo bảng
- Trong khung cửa sổ Design, đặt điểm chèn tại vị trí cần tạo bảng - Chọn menu lệnh Insert Table
+ Rows: số dòng của bảng + Columns: số cột của bảng
+ Table width: chiều rộng của bảng, có thể tính theo đơn vị là pixels hay percent (%)
+ Border thickness: độ dày đường viền của bảng. Nếu giá trị là 0, thì bảng khơng có đường viền
+ Cell padding: khoảng cách từ nội dung trong ô đến đường viền của ô + Cell spacing: khoảng cách giữa 2 ô trong bảng
+ Header: kiểu bảng có hoặc khơng có dịng tiêu đề, cột tiêu đề + Caption: dòng tiêu đề bảng
Hình 3.22. Hộp thoại Table
Thay đổi thuộc tính bảng
- Chọn bảng cần thay đổi thuộc tính chọn thuộc tính cần thay đổi trong cửa sổ Properties
Hình 3.23. Cửa sổ Properties
+ Rows: Số dòng
+ Cols: Số cột
+ W: Chiều rộng của bảng
+ CellPad: khoảng cách từ nội dung trong ô đến đường viền của ô
+ CellSpace: khoảng cách giữa 2 ô trong bảng + Align: canh bảng trên trang web
+ Border: Độ dày đường viền + Class: class định dạng cho bảng + Table: ID định dạng cho bảng
Thay đổi thuộc tính của ơ
- Chọn ơ muốn thay đổi thuộc tính chọn thuộc tính cần thay đổi trong cửa sổ Properties
Hình 3.24. Cửa sổ Properties
+ Horz: Cách canh nội dung trong ô theo chiều ngang. + Vert: Cách canh nội dung trong ô theo chiều dọc.
+ W: Độ rộng của ô
+ H: Độ cao của ô
+ No wrap: Cho/ khơng cho text tự động xuống dịng trong ô + Header Chuyển ô thường thành ô tiêu đề.
+ Bg Màu nền cho ô
Gộp ô
- Chọn các ô muốn gộp chọn nút Merges selected cells trong cửa sổ Properties
Tách ô
+ Split cell into: chọn tách ơ theo dịng (rows) hay cột (columns) + Number of rows (columns): chọn số dòng (hoặc cột) tách
Hình 3.25. Hộp thoại Split Cell
Chèn thêm cột/ hàng
- Đặt điểm chèn trong ơ muốn thêm cột hoặc dịng kề với nó chọn menu Insert Table Objects
+ Insert Row Above: chèn thêm một dòng bên trên ơ có điểm chèn. + Insert Row Below: chèn thêm một dịng bên dưới ơ có điểm chèn. + Insert Column to the Left: chèn thêm một cột bên trái ơ có điểm chèn. + Insert Column the Right: chèn thêm một cột bên phải ô điểm chèn.
3.2.8. Làm việc với form
Form dùng để tạo các biểu mẫu thu thập thông tin của người xem trang web. Một Form có thể chứa nhiều thành phần như TextField, CheckBox, RadioButton. ComboBox, ListBox, TextAera…
Chèn một Form mới vào trang web
- Trong khung cửa sổ Design, đặt điểm chèn tại vị trí cần chèn form - Chọn menu lệnh Insert Form Form
Hình 3.27. Lệnh tạo Form
Chèn TextField:
- Trong khung cửa sổ Design, đặt điểm chèn trong form - Chọn menu lệnh Insert Form TextField
Hình 3.28. Hộp thoại thuộc tính thẻ input
+ Label: khai báo nhãn đính kèm theo TextField + Style: kiểu gắn nhãn
+ Position: vị trí của nhãn
* Hiệu chỉnh thuộc tính TextField
- Chọn TextField muốn hiệu chỉnh chọn các thuộc tính trong cửa sổ Properties:
Hình 3.29. Cửa sổ Properties
+ TextField: tên của TextField
+ Char width: bề rộng của Textfield, tính bằng số kí tự + Max Chars: số kí tự tối đa có thề được nhập vào
+ Int val: giá trị ban đầu của TextField + Type: kiểu của TextField
Single line: TextField cho phép nhập văn bản 1 dòng.
Multiline: TextField cho phép nhập văn bàn bao gồm nhiều dòng. Password: TextField chỉ hiện ra các dấu * khi người dùng nhập văn bàn
vào khung.
Chèn Radio Button:
Radio Button sử dụng trong trường hợp cho phép chọn 1 trong các lựa chọn
- Trong khung cửa sổ Design, đặt điểm chèn trong form - Chọn menu lệnh Insert Form Radio Button
* Hiệu chỉnh thuộc tính RadioButton:
- Chọn Radio Button muốn hiệu chỉnh chọn các thuộc tính trong cửa sổ Properties:
Hình 3.30. Cửa sổ Properties
+ Check value: khai báo giá trị sẽ được gởi về máy chủ + Initial State: trạng thái khởi đầu cho Radio Button.
Checked: chọn sẵn, Unchecked: không được chọn sẵn
Chèn CheckBox:
CheckBox sử dụng trong trường hợp cho phép chọn nhiều trong các lựa chọn
- Trong khung cửa sổ Design, đặt điểm chèn trong form - Chọn menu lệnh Insert Form CheckBox
- Chọn CheckBox muốn hiệu chỉnh chọn các thuộc tính trong cửa sổ Properties:
Hình 3.31. Cửa sổ Properties
+ Check value: khai báo giá trị sẽ được gởi về máy chủ + Initial State: trạng thái khởi đầu cho CheckBox
Checked: chọn sẵn, Unchecked: không được chọn sẵn
Chèn ComboBox hay ListBox:
- Trong khung cửa sổ Design, đặt điểm chèn trong form - Chọn menu lệnh Insert Form Select (List/Menu)
* Hiệu chỉnh thuộc tính List/Menu:
- Chọn List/Menu muốn hiệu chỉnh chọn các thuộc tính trong cửa sổ Properties
+ Type: chọn dạng Menu (comboBox), List (ListBox)
Hình 3.32. Cửa sổ Properties
Hình 3.33. Hộp thoại List values
+ Nhắp nút để thêm một mục + Nhắp nút để xóa mục đang
+ Nhắp nút để chỉnh thứ tự các mục
Chèn TextArea:
TextArea dùng trong trường hợp cần nhập nội dung nhiều dòng văn bản, thường là các yêu cầu, góp ý của người xem trang web
- Trong khung cửa sổ Design, đặt điểm chèn trong form - Chọn menu lệnh Insert Form TextArea
* Hiệu chỉnh thuộc tính TextArea:
- Chọn TextArea muốn hiệu chỉnh chọn các thuộc tính trong cửa sổ Properties
Hình 3.34. Cửa sổ Properties
+ Char width: bề rộng của vùng nhập văn bản, tính bằng số ký tự + Num lines: số dòng hiện ra trên trang web
+ Type: chọn loại phần tử input
Chèn Button:
- Trong khung cửa sổ Design, đặt điểm chèn trong form - Chọn menu lệnh Insert Form Button
* Hiệu chỉnh thuộc tính Button:
- Chọn Button muốn hiệu chỉnh chọn các thuộc tính trong cửa sổ Properties
Hình 3.35. Cửa sổ Properties
+ Value: giá trị của button
+ Action: Submit form: tạo nút Submit Reset form: tạo nút Reset None: tạo nút lệnh
3.2.9. CSS
Tạo 1 luật CSS
- Trong cửa sổ CSS Styles chọn nút New CSS Rule
( Mở/ đóng cửa sổ CSS Styles: chọn menu Window CSS Styles)
Hình 3.37. Cửa sổ New CSS Rule
- Trong hộp thoại New CSS Rule:
+ Selector Type: chọn loại luật CSS
Class (can apply to any HTML element): tạo class ID (applys to only one HTML element): tạo ID
Tag (redefines an HTML element): tạo luật CSS cho một thẻ cụ thể
Compund (based on your selection): tạo pseudo class cho liên kết
Hình 3.38. Danh sách chọn Selector type
+ Selector Name : chọn tên thẻ (trường hợp chọn Selector Type là Tag) hoặc nhập tên class (trường hợp chọn Selector Type là Class), tên class phải bắt đầu bằng dấu chấm (vd: .tieude); hoặc nhập tên ID (trường hợp chọn Selector Type là ID), tên ID phải bắt đầu bằng dấu # (vd: #footer).
+ Rule definition: chọn nơi định nghĩa luật CSS
This document only: lưu luật CSS trong chính trang web hiện hành (internal style sheet)
New Style Sheet File: lưu luật CSS trong 1 file riêng (external style sheet) chọn vị trí lưu nhập tên file .css
Hình 3.39. Danh sách chọn Rule Definition
- Trong hộp thoại CSS Rule definition: thiết lập các thuộc tính định dạng
+ Category: chọn lớp các thuộc tính định dạng
• Type: các thuộc tính định dạng văn bản
- Font-family: chọn bộ font - Font-size: cỡ chữ
- Font-weight: độ đậm của chữ