Giáo Trình Môn Học Mô Đun Adobe Dreamweaver (Ngành Thiết Kế Đồ Họa - Trình Độ Cao Đẳng.pdf

Mục tiêu của môn học/mô đun: - Về kiến thức: + Trình bày được các công cụ trên Dreamweaver trong thiết kế website; + Trình bày được cấu trúc cơ bản của trang HTML và cách dùng các tag c

GIỚI THIỆU DREAMWEAVER

MÀN HÌNH DW

MÀN HÌNH DREAMWEAVER 1 Các bước cơ bản tạo file mới

- Bước 1: Mở Adobe dreamweaver lên có giao diện như hình dưới (xem từ Hình 1.8 đến Hình 1.11)

Hình 1.8 Giao diện mới mở phần mềm

- Bước 2: Menu File chọn New

- Bước 3: Trong mục Create New chọn ngôn ngữ thiết Web ( HTML, PHP, CSS, Java, XML, ) ở đây chọn HTML

Hình 1.10 Chọn ngôn ngữ viết code

- Bước 4: Khung soạn thảo hiện thị ra để viết Code

- Tab Code: Viết các lệnh Code

- Tab Split: Chế độ xem 2 cột, một bên là mã code một bên là thiết kế

Hình 1.11 Các tab chế độ xem

Hình 1.12 Tổng quát giao diện Adobe Dreamweaver

- Thanh Menu là thanh nằm trên cùng chứa các Menu

- Thanh Toolbars : Nằm dưới thanh Menu Chứa danh sách các Icons tắt Giúp cho bạn thực hiện nhanh các chức năng như Preview

- Hệ thống các Panels bên phải Liệt kê các panel phổ biến như CSS, Quản Lý Files (Panels Files), AP Elements Panels Insert là Panel mà bạn thường dùng nhất giúp bạn Insert

- Màn hình làm việc : Màn hình trắng lớn bên trái là màn hình làm việc chính của bạn hay gọi là Document Windows

- Tag Selectors: Nằm dưới màn hình làm việc Các Tags này giúp các bạn chọn nhanh các Thẻ

- Properties Inpector: Định dạng cách hiển thị của bất kỳ thành phần nào mà bạn đã lựa chọn trong Documents Windows

Hình 1.13 Chức năng trong menu

- Sử dụng Menu File (Xử lý các chức năng liên quan đến tập tin): Tạo một File:

Bấm Menu File > New > Chọn Blank Page > Chọn loại File là HTML > Chọn một định dạng > Bấm nút Create > Xuất hiện cửa sổ của File vừa tạo Để đóng File lại bạn bấm dấu X hoặc vào menu File > Close (xem Hình 1.13)

- Sử dụng Menu Edit (Hỗ trợ các thao tác soạn thảo): Với nội dung đang thể hiện bạn thử bôi đen đoạn văn bản > Vào Edit > Copy > Xuống hàng > Vào Edit > Chọn

Paste Bạn đã dán văn bản xuống hàng dưới Các thao tác này giống chương trình Word để soạn thảo Bạn cũng có thể sử dụng Phím tắt

- Sử dụng Menu View (Lựa chọn & Cấu hình phần hiển thị): Khi bấm Menu này bạn thấy đang có dấu chọn chế độ Design Bạn chọn chế độ Code Bạn thấy thanh Toolbars đang chọn Tab Code và thể hiện Code trong MHLV (Màn hình làm việc)

- Bấm Tab Split: Hiển thị 2 cửa sổ cùng lúc Một bên là Code của Website và một bên là Giao diện của Website (xem Hình 1.14)

- View Page Source (Xem mã nguồn trang): Ví dụ: http://zend.vn/public Bấm phải lên trang web > Chọn View Page Source

Hình 1.15 Ví dụ xem page source trang web

- Thay đổi giá trị trong Code, Tab Design cũng thay đổi theo: Phủ khối Introduction thì bên Design cũng phủ khối, nhập văn bản: Dreamweaver, bấm lên Design thấy phần Design cũng đã thay đổi thành Dreamweaver

Hình 1.16 Thay đổi giá trị code

- Chế độ Live: Bấm Tab Live > Nhập tên trang web trong ô trắng (http://ww.zend.vn/) > Enter Xuất hiện nội dung trang web Bấm Tab Design, thấy

Website Zend.vn đã được load toàn phần vào phần mềm Dream Click LIVE CODE để xem mã nguồn của Trang Web này (xem Hình 1.17)

- Tab Inpect: Chức năng này rất thường được sử dụng trong lúc thiết kế Bấm Tab Inpect Trỏ vào Trang Web phần Thông báo Bên Code đã có bôi đen để biết vị trí

Tắt Live Code và Live Chọn Tab Dessign (xem Hình 1.18)

- Sử dụng Menu INSERT (Chèn Thẻ và các đối tượng vào vùng soạn thảo): Đối tượng là Hình ảnh – Form – Table Panel Insert thường sử dụng do đó di chuyển vào vị trí nằm dưới Thanh Menu

- Chèn 1 ảnh vào: Chọn vị trí chèn ảnh > Bấm nút Images > Đến nơi lưu ảnh > Ảnh có 8 nút, có thể thu nhỏ hoặc phóng lớn ảnh (xem Hình 1.19)

Hình 1.19 Nút chèn ảnh Image

- Sử dụng Menu MODIFY (Chỉnh sửa các thành phần của trang): Menu này tương đối ít sử dụng nên không hướng dẫn chi tiết

- Sử dụng Menu FORMAT (Định dạng cách hiển thị cho các thành phần của trang):

- Tag Selector: Khi phủ khối một đoạn văn bản (tương ứng Tag

Nếu bấm Tag trước nó sẽ phủ khối đoạn rộng hơn và nếu bấm Tag sẽ chọn phủ khối toàn MHLV

- Phủ khối một đoạn Tag

Bấm Menu Modify > Chọn Color > Chọn màu đỏ

> Ok Văn bản đã có màu đỏ Các văn bản còn lại không phủ khối vẫn hiện màu đỏ sẽ được giải thích phần sau

- Thay đổi định dạng đoạn phủ khối: Vào Menu Format > Chọn Paragraph Format > Chọn Heading 6 Văn bản đã được định dạng theo chọn lựa

- Sử dụng Menu COMMANDS (Hỗ trợ các chức năng liên quan đến mã nguồn):

- Ví dụ: Nhập chữ YOUS > Bấm Menu Modify > Chọn Check Spelling > Nó đề nghị chữ đúng là You > Bấm Change > Bấm Close (xem Hình 1.22)

- Ví dụ: Bấm Tab Code, phần Body bạn di chuyển các Code nằm cùng một hàng

> Bạn vào Menu Commands > Chọn Apply Source Formatting > Đoạn Code đã được chỉnh sửa lại như cũ trước đó (xem Hình 1.23)

Hình 1.23 Menu Apply Source Fommatting

- Sử dụng Menu SITE (Quản lý Site, các Tập tin, Thư mục trong Site): Sẽ học trong phần sau

- Sử dụng Menu WINDOW (Quản lý các cửa sổ):

- Rê vạch đứng để thu hẹp hay nới rộng MHLV Bạn cũng có thể rê Panel Insert di chuyển đặt dưới thanh Menu

- Cách làm ẩn Panel: Có 2 cách: Bấm đúp lên Panel Elements để thu gọn panel này Nếu muốn đóng panel này, bấm phải chọn Close

- Làm ẩn hiện các Panels: Vào Menu Window, các Panel đang mở thì có dấu tích Nếu muốn mở thêm Panel nào thì đánh dấu vào

- Sử dụng Menu HELP (Phần tài liệu hướng dẫn sử dụng về Dreamweaver): Hỗ trợ các tiện ích hoặc các tài liệu sử dụng Dreamweaver của hàng Adobe

- Nút Preview: Bấm nút Preview > Bật ra danh sách các trình duyệt hiện có cài trong máy, chọn một trình duyệt Chọn một nơi để lưu và đặt tên trang Web là: demo >

- Thêm hoặc xóa một trình duyệt: Bấm vào Edit Browse List > Xuất hiện cửa sổ Preferences, nếu muốn xóa Trình duyệt IE bấm chọn nó xong bấm dấu - > Bấm Ok

Muốn thêm một trình duyệt: Bấm dấu + > Đến đường dẫn nơi lưu trình duyệt Có thể chọn quyền ưu tiên trong mục Defaults là Premary hoặc Secondary Bấm Ok > Ok (xem Hình 1.24)

Hình 1.24 Preview trên phầm mềm web

- Nút MultiScreen Preview: Hiển thị vùng soạn thảo trên các kích thước khác nhau Chọn kích thước Smart Phone > Giao diện đã được thu hẹp theo đúng kích cỡ đã chọn

- Bấm nút MultiScreen Preview hoặc nút xổ xuống của thanh kích cỡ đáy phải của MHLV và chọn lại chế độ Full Size

Hình 1.26 Chọn kích thước Full Size

- Có thể tự thiết lập kích thước vùng làm việc định sẵn: Bấm nút MultiScreen Preview > Chọn Edit Size > Bấm dấu + > Nhập kích thước 400 và 400 > Bấm Ok Xổ xuống của phần Window Size đã thấy kích thước 400 x 400 vừa tạo Bây giờ giao diện nội dung của trang web đã được đóng khung vào 400 x 400 Trả lại giao diện ban đầu là Full Size

- Ví dụ phủ khối văn bản Dreamweaver

- HTML gồm có: Format chọn Paragraph – In đậm và in nghiêng

- CSS gồm có: Chọn màu xanh lá cây > Bấm Ok

- Phần HTML và CSS sẽ được hướng dẫn trong các nội dung kế tiếp

- Bấm xổ xuống nút Designer góc phải trên (Gần Ô Search) và chọn Coder Đây là một chế độ hiển thị các code của trang web Cửa sổ code được ưu tiên hiển thị trước, trái là cột hệ thống thư mục Nếu không quen vùng làm việc có thể chọn Classic

- Các thanh Panel đóng lại hết chỉ còn 2 panel chính là: CSS Styles và Tag Inpector Để 2 thành phần này lưu vào WorksPace để có giao diện thiết lập theo ý muốn bấm vào nút WorksPace > Chọn New Workspace > Nhập tên là: My Workspace và click

KẾ HOẠCH THIẾT KẾ MỘT WEBSITE

nút Ok Kiểm tra bấm Designer và click lại My Workspace sẽ hiển thị giao diện mà đã thiết lập với 2 thanh panel là CSS Styles và Tag Inpector

Hình 1.27 Chỉnh sửa giao diện

KẾ HOẠCH THIẾT KẾ MỘT WEBSITE

- Lên kế hoạch xây dựng website là một quy trình quan trọng, không thể thiếu khi tạo lập một trang web Nó là yếu tố quan trọng góp phần nên thành công của việc thiết kế website, đồng thời cũng là sự quy hoạch bước đầu cho định hướng phát triển trên mạng Internet của doanh nghiệp

- Để có được một bản kế hoạch xây dựng website hiệu quả, chuyên nghiệp giới thiệu quy trình 8 bước dưới đây

- Bước đầu tiên cần làm trong một bản kế hoạch xây dựng website là xác định khách hàng Doanh nghiệp cần xác định rõ mình phục vụ cho ai, có điều kiện kinh tế ra sao, gu thẩm mỹ thế nào, yêu thích phong cách gì, để lên kế hoạch thiết kế website sao cho phù hợp

Hình 1.28 Bảng kế hoạch xây dựng web

- Thêm vào đó, cũng cần tham khảo thêm website của các đối thủ cạnh tranh để học hỏi các ưu, nhược điểm của họ và rút kinh nghiệm cho trang web của mình

2 Xác định mục đích thiết kế

- Bước thứ hai trong kế hoạch xây dựng website là xác định mục tiêu thiết kế web Website bán hàng sẽ có giao diện, tính năng khác với trang web giới thiệu, tuyển dụng hay chuyên về tin tức Hoặc cùng thuộc mảng bán hàng, website của một thương hiệu thời trang nữ sẽ khác hẳn với thời trang nam

- Xác định mục đích thiết kế sẽ giúp doanh nghiệp đề ra kế hoạch sản xuất nội dung Bởi website có khả năng hỗ trợ tối đa cho doanh nghiệp trong việc quảng bá hình ảnh công ty, sản phẩm, dịch vụ sẽ cung cấp và tăng khả năng lên top tìm kiếm

3 Xác định đối tượng truy cập vào website

- Doanh nghiệp cần xác định xem những đối tượng nào sẽ truy cập vào trang web Sau đó, thông qua phân tích các đặc điểm, xu hướng lựa chọn, sở thích, phong cách, của khách hàng để lên ý tưởng xây dựng website trên mọi khía cạnh như màu sắc, logo, nội dung, kế hoạch quảng cáo, Seo web cho phù hợp

- Ví dụ: Đối tượng truy cập vào website thời trang công sở là phụ nữ đã đi làm, giao diện, màu sắc nên thiên về phong cách thanh lịch, nhã nhặn để gây ấn tượng với khách hàng; các website có lượng truy cập phần đông là học sinh, sinh viên sẽ thu hút hơn nếu có giao diện, màu sắc trẻ trung, năng động, các quảng cáo phù hợp với độ tuổi

Hình 1.29 Xác định đối tượng truy cập

4 Xây dựng sơ đồ, bố cục website

- Sau khi xác định đối tượng truy cập, cần xây dựng sơ đồ, bố cục cho trang web Để tránh bị nhầm lẫn, hãy lập sơ đồ cây cho web, bắt đầu từ trang chủ sau đó vẽ đến các trang con

5 Chuẩn bị nội dung cho website

- Nội dung là yếu tố vô cùng quan trọng quyết định đến việc người dùng có quay lại website lần sau không và ảnh hưởng trực tiếp đến Seo, đến xếp hạng của trang web trên Google

- Nên xây dựng nội dung website theo từng mục (module), mỗi thư mục sẽ có nội dung tổng quát và nội dung chi tiết Nội dung tổng quát giúp người đọc hình dung được trong thư mục mình vào đại khái sẽ xuất hiện những thông tin gì Điều này sẽ giúp các nhà quản trị quản lý website dễ dàng hơn

6 Chuẩn bị đồ họa, hình ảnh cần thiết

- Bên cạnh nội dung dưới dạng text, doanh nghiệp còn cần chuẩn bị các hình ảnh liên quan khi lên kế hoạch xây dựng website Số lượng hình ảnh sẽ phụ thuộc vào nội dung của trang web

- Với các website bán hàng, hình ảnh cần to, rõ ràng, nên có ảnh thật và video để khách hàng tham khảo Ngược lại, các trang web giới thiệu sẽ không có quá nhiều yêu cầu về hình ảnh mà chú trọng đến nội dung dạng text nhiều hơn

7 Lên kế hoạch thời gian thực hiện

- Chuẩn bị đồ họa và hình ảnh xong đồng nghĩa với việc bạn đã hoàn thành bản kế hoạch thiết kế website Trong bước này, cần lập ra kế hoạch lên lịch đăng bài, cập nhật thông tin trên website theo ngày, tuần hoặc tháng

- Nên có kế hoạch lâu dài để có chiến lược phát triển nội dung website phù hợp, hiệu quả

Hình 1.30 Kế hoạch thời gian đăng web

8 Tìm địa chỉ cung cấp tên miền, hosting

- Tìm mua tên miền và hosting là thao tác cơ bản cần thực hiện khi lên kế hoạch xây dựng bất cứ website nào Chúng có ảnh hưởng đến độ nhận diện thương hiệu, ấn tượng khách hàng, khả năng lên top khi Seo, tốc độ truy cập, không gian lưu trữ, của trang web

- Vậy nên hãy cân nhắc và lựa chọn thật kỹ càng trước khi mua tên miền và hosting Chọn được địa chỉ cung cấp hai dịch vụ này uy tín là một thành công không hề nhỏ trong việc xây dựng website

Câu 1: Anh chị hãy cho biết phầm mềm Adoe Dreamweaver là gì?

Câu 2: Anh chị hãy cho biết cách cài đặt phần mềm Adobe Dreamweaver? Và thực hiện cài đặt phần mềm Adobe Dreamwaever vào máy tính?

Câu 3: Anh chị hãy cho biết giao diện phần mềm Adobe Dreamweaver?

Chương 2: Giới thiệu tag HTML 22

GIỚI THIỆU VỀ TAG HTML

CÁC KHÁI NIỆM CƠ BẢN

HTML viết tắt của chữ HyperText Markup Language (ngôn ngữ đánh dấu siêu văn bản), nó được dùng để tạo ra các tài liệu hiển thị được trên trình duyệt HTML gọi là ngôn ngữ nhưng nó không giống như các ngôn ngữ kịch bản, ngôn ngữ lập trình (sử dụng các kịch bản để thi hành các tác vụ), ngôn ngữ đánh dấu (Markup) HTML lại sử dụng các THẺ để xác định nội dung của trang (Chỉ nội dung chứ không thi hành tác vụ)

- HTML document tức là tài liệu HTML (đôi khi mình gọi là tệp tin HTML) là một tập tin có phần mở rộng là html, hoặc htm với nội dung được xây dựng từ các thành phần của HTML

- Mỗi một tài liệu HTML hoàn chỉnh thường đại diện cho một trang web (xem Hình 2.1)

- Ví dụ như Page Title Hello, world! chẳng hạn, nó đều tuân theo cấu trúc mà mình chỉ ra ở trên Mỗi một cái hoặc như vậy thì được gọi là một thẻ HTML (hay HTML tag)

- Thẻ trong HTML chia ra làm 2 loại thẻ:

+ Thẻ mở: là thẻ bắt đầu cho việc đánh dấu một phần tử nào đó, là thẻ mà không có ký tự /

+ Thẻ đóng: là thẻ đánh dấu kết thúc cho một phần tử nào đó, là thẻ xuất hiện ký tự /

- Có một số thẻ HTML không có thẻ đóng, nó chỉ sử dụng để đánh dấu cho một phần tử nhất định, ví dụ thẻ để đánh dấu một phần tử xuống dòng, thẻ dùng để đánh dấu một đường kẻ ngang màn hình

- Mỗi một thẻ HTML thì có nhiệm vụ đánh dấu cho một loại phần tử trên trang web Ví dụ:

- Thẻ đánh dấu cho một phần tử ảnh, sử dụng thẻ nếu muốn chèn hình ảnh lên trang web

- Thẻ

đánh dấu cho một đoạn văn bản, sử dụng thẻ

nếu muốn chèn một đoạn văn bản lên trang web

- Thẻ đánh dấu cho một đường link, sử dụng thẻ nếu muốn chèn link lên trang web

- Thẻ trong HTML khá đa dạng, có tất cả khoảng mấy trăm thẻ với mỗi thẻ lại đánh dấu cho một loại phần tử khác nhau Tuy nhiên chỉ có khoảng 20 thẻ là thường xuyên sử dụng, số còn lại chỉ để tham khảo.

GIỚI THIỆU KHÁI QUÁT 23 Chương 1: Giới thiệu Dreamweaver

- Trang web tĩnh: Các tài liệu HTML (trang HTML) có thể là các file với phần mở rộng (.html) được lưu trữ trên hệ thống file của máy chủ web (webserver), từ đó trình duyệt truy cập đọc được và hiển thị

- Trang web động: Các trang HTML mà trình duyệt lấy về từ webserver được phát sinh bởi một ứng dụng chạy trên server (ứng dụng phát triển bằng các ngôn ngữ lập trình như PHP, C# )

- Siêu văn bản (HyperText): Ám chỉ sự liên kết giữa các trang, một trang HTML có liên kết tham chiếu đến một trang khác trên cùng một Website hay giữa các website

- HTML sử dụng cách đánh dấu (markup) để chú thích cho các thành phần (phần tử HTML) như văn bản, hình ảnh các phần tử HTML tạo thành trang tài liệu hiển thị được trong các trình duyệt

- Có rất nhiều phần tử HTML như

, , , ,

- Một phần tử HTML bắt đầu bằng mở thẻ (viết tên thẻ như p, a, img giữa < và >), đến nội dung phần tử và kết thúc bằng đóng thẻ (viết tên thẻ giữa )

TAG HTML

- Tag HTML hay còn gọi là thẻ HTML, một bảng ví dụ điển hình chức năng của tag HTML (xem Bảng 2.1)

Thẻ Mô tả chức năng

Xác định một đoạn chú thích

Xác định cho trình duyệt biết phiên bản HTML mà bạn đang sử dụng

Tạo một liên kết đến một tài liệu nào đó (khi người dùng bấm vào liên kết thì sẽ được chuyển đến tài liệu đó)

Định nghĩa một từ viết tắt

Xác định thông tin liên hệ của tác giả (hoặc chủ sở hữu) trang web

Tạo một "trình phát nhạc" cho trang web

Xác định đoạn văn bản được in đậm

Xác định "đường dẫn cơ sở" trong trang web và kiểu mở liên kết mặc định

Điều hướng một đoạn văn bản được chỉ định

Xác định một đoạn văn bản có kích thước chữ to hơn văn bản bình thường

Xác định một "đoạn trích dẫn" từ một website khác

Xác định phần thân của tài liệu HTML

(chứa những phần tử sẽ được hiển thị lên màn hình trình duyệt)

Chèn một ngắt xuống dòng

Tạo tiêu đề cho bảng

Xác định một đoạn văn bản mang ý nghĩa là các mã lệnh

Tạo một đường kẻ ngang lên văn bản

Tạo phần tử có dạng:

"Chỉ hiển thị tiêu đề còn chi tiết bị ẩn, khi bấm vào tiêu đề thì chi tiết mới hiển thị"

Tạo một hộp thoại

Nhóm các phần tử lại với nhau để tiện cho việc định dạng cũng như thiết kế bố cục của trang web

Xác định một đoạn văn bản được định dạng kiểu chữ in nghiêng

Dùng để nhúng một "tài liệu" nào đó vào trang web

Chương 2: Giới thiệu tag HTML 25

Tạo một tiêu đề cho nội dung được đặt bên trong phần tử

Xác định một nội dung cần được tách biệt rõ ràng

Xác định phần chân của trang web

Xác định một khung trong một bộ khung

Xác định một bộ khung

- Tạo những đề mục quan trọng trong trang web

Xác định phần head của tài liệu HTML

(chứa các thẻ cung cấp thông tin cho trang web)

Xác định phần đầu của trang web

Tạo một đường kẻ phân cách nằm ngang

Xác định một tài liệu HTML

Xác định một đoạn văn bản được định dạng kiểu chữ in nghiêng

Nhúng một trang web khác vào trang web hiện tại

Chèn hình ảnh vào trang web

Tạo một đường gạch chân lên văn bản

Xác định một từ (hoặc cụm từ) mang ý nghĩa là một phím hoặc tổ hợp phím

Xác định một "danh mục" trong danh sách
Xác định phần thân của trang web
Tạo một bản đồ ảnh
Đánh dấu màu nền nổi bật cho văn bản
Cung cấp thêm "thông tin về trang web" cho trình duyệt và các công cụ tìm kiếm
Tạo phần tử có ý nghĩa giống như: thước đo, ổ đĩa,
Xác định một tập hợp các liên kết & thường được sử dụng kết hợp với CSS để tạo một thanh menu
Xác định một nội dung sẽ được hiển thị khi trình duyệt không hỗ trợ thẻ
Xác định một nội dung HTML sẽ được hiển thị khi trình duyệt không hỗ trợ JavaScript hoặc đã tắt JavaScript
Dùng để nhúng một "tài liệu" nào đó vào trang web
Xác định một danh sách có thứ tự
Xác định một đoạn văn bản
Giúp cho nội dung mà bạn muốn hiển thị lên màn hình được giữ nguyên định dạng giống như trong lúc soạn thảo
Tạo một thanh tiến trình
Xác định một câu trích dẫn ngắn
Tạo một đường kẻ ngang lên văn bản
Dùng để làm thùng chứa cho các câu lệnh JavaScript
Xác định một đoạn văn bản có kích thước chữ nhỏ hơn văn bản bình thường
Chỉ định tài nguyên cho trình nghe nhạc hoặc trình xem phim
Nhóm các phần tử nội tuyến lại với nhau để tiện cho việc định dạng CSS
Xác định đoạn văn bản được in đậm
Dùng để làm thùng chứa cho các đoạn mã CSS
Tạo văn bản có kích thước nhỏ, nằm ở khoảng nửa dưới văn bản bình thường
Tạo văn bản có kích thước nhỏ, nằm ở khoảng nửa trên văn bản bình thường
Xác định phần tử là một cái bảng
Xác định những dòng nào thuộc "phần thân" của bảng
Xác định phần tử là một ô trong hàng
Xác định những dòng nào thuộc "phần chân" của bảng
Xác định phần tử là một ô tiêu đề trong hàng
Xác định những dòng nào thuộc "phần đầu" của bảng
Đánh dấu những phần văn bản là: thời gian, ngày tháng, ngày lễ,
Xác định tiêu đề của trang web
Xác định phần tử là một hàng trong bảng
Chèn một bản phụ đề vào video
Tạo một đường gạch chân lên văn bản
Xác định một danh sách không có thứ tự
Tạo một "trình xem phim" cho trang web
Ngắt bớt ký tự của một từ xuống dòng
(trong trường hợp chiều rộng của phần tử không đủ để chứa hết từ đó)
Bảng 2.1 Bảng mô tả chức năng tag HTML cơ bản
CẤU TRÚC CƠ BẢN CỦA TRANG WEB
- Tiêu đề trang web
- Tựa bài viết, tiêu đề
- , , ,… là các thẻ (Tag)
- Tài liệu html được bắt đầu bằng thẻ và kết thúc là
- Tag chứa các thẻ đặc biệt: title, css, javascript, keyword,…
- Tag chứa chứa nội dung trang web
- Heading (Tự bài, tiêu đề,…) - Tiêu đề tin tức
3 Các thẻ html cho nội dung in đậm, font chữ lớn
- Paragraph -
Đoạn văn bản

-
: định dạng đoạn văn bản
- align=”left | right | center| justify”: Thuộc tính đoạn văn
- Gạch ngang màn hình - Thuộc tính thẻ
-
-
- Trung tâm mạng Nhất Nghệ -
6 Marquee – tạo chuyển động trên web
-
- Bgcolor: Màu nền - onmouseover="stop();" → dừng chuyển động khi con trỏ vào marquee
- onmouseout="start();" → chuyển động khi con trỏ ngoài marquee
- Xem Source HTML của trang - Trong cửa sổ IE, Nhấn menu View ➔ Source, thấy code HTML của trang
Hình 2.2 Xem code HTML trên trang web
CÁC TAG HTML CƠ BẢN
- Các cú pháp viết HTML cơ bản (xem Bảng 2.2)
Tên Tag Cú pháp Định nghĩa
Chú thích trong HTML
Nội dung đoạn văn In đậm
Nội dung trang HTML Tag chứa toàn bộ nội dung trang
Nội dung đoạn văn bắt đầu một dòng mới Xuống dòng, không qua đoạn mới
…… div chứa 1 vùng dữ liệu trong trang
Chương 2: Giới thiệu tag HTML 29

Nhúng đối tượng (flash, midi, nhạc, )
Nội dung đoạn văn Ấn định font, cỡ chữ, màu chữ của văn bản

form: Tạo 1 form input: dùng để chèn các text field, button, checkbox, radio button, image field trong form
Tạo tiêu đề (cấp 1 đến cấp 6)
Nội dung Chữ in nghiêng

Chèn hình vào văn bản
ol: Tạo danh sách dạng unordered list li: Tạo 1 mục trong danh sách
Tạo 1 danh sách dạng ordered list (mỗi mục có 1 số thứ tự ở đầu)
Option1
Option2
select: dùng để tạo 1 select box option: Tạo 1 item trong 1 select box

Nội dung đoạn văn bản.
Paragraph
Định nghĩa preformatted các ký tự
Nội dung văn bản Bao quanh 1 vùng text để định dạng
Nội dung đoạn văn bản Chữ đậm
body { color : white}
P { color : blue; font-size : 12pt; } H1 { color : red; font-size : 18pt}
Tag chứa các style CSS trong vùng head
Họ tên Điểm
Tèo 9
Tý 10
table: Tạo 1 bảng tr: Tạo 1 hàng trong bảng td: Tạo 1 ô dữ liệu trong bảng th: Tạo 1 ô tiêu đề trong bảng
… Tạo 1 đối tượng trong form để user gõ nhiều hàng chữ
Định nghĩa một table header
Nội dung đoạn văn bản Gạch dưới
Tạo 1 danh sách dạng unordered list (mỗi mục có 1 số ở đầu)
Bảng 2.2 Bảng cú pháp viết HTML
Chương 2: Giới thiệu tag HTML 31
Câu 1: Anh chị hãy cho biết HTML là gì?
Câu 2: Anh chị hãy cho biết về cú pháp chèn hình bằng HTML trên phần mềm Adobe Dreamweaver? Thực hiện cú pháp chèn hình bằng HTML bằng phần phềm Adobe Dreamwaever?
Câu 3: Anh chị hãy cho biết cấu trúc của một tài liệu HTML được viết như thế nào? Thực hiện viết cấu trúc của một tài liệu HTML bằng phần mềm Adobe Dreamweaver?
CSS
ĐỊNH DẠNG VĂN BẢN
- CSS là 1 kỹ thuật dùng để định nghĩa cách thể hiện của các đối tượng trong trang web CSS cho phép bạn định dạng các đối tượng với rất nhiều đặc điểm (thuộc tính) mở rộng mà HTML thông thường không có Bạn không thể định dạng 1 trang web cho đẹp khi không có sự am hiểu về kỹ thuật CSS
2 Những lợi điểm từ CSS:
- Định dạng trang web rất nhanh nhờ các style định dạng các tag, các style dạng class
- Giúp cho website của bạn có một sự nhất quán về cách trình bày các trang web
- Việc hiệu chỉnh trên CSS sẽ tự động cập nhật trên tất cả các nơi có dùng CSS
- Các định nghĩa CSS có thể được đặt trong 1 file riêng với các trang web, do đó giúp cho công việc trình bày trang web được độc lập với thiết kế cấu trúc trang web, thích hợp với các dự án làm việc nhiều người
- Style: Là 1 tập hợp các đặc điểm định dạng - Ví dụ: P {Color: Red; font-size:16; font-weight: Bold}
- Sheet: Là 1 tập hợp nhiều style - Vị trí lưu style: Style dùng để định dạng đối tượng trong trang web Style có thể lưu trong chính trang HTML hiện hành hoặc có thể lưu ở file riêng (.CSS)
3 Style định dạng cho 1 tag cho toàn trang
- Ví dụ : - Style P {Color: blue} để định dạng cho mọi tag P trong trang web có màu chữ xanh
- style a {Font-size: 16} để định dạng cho mọi tag a trong trang web có cỡ chữ là 16
- Style định dạng cho 1 đối tượng cụ thể có tên
- Style #tinxemnhieu {background-color: cyan} để định dạng cho đối tượng tên là tinxemnhieu có màu nền là cyan
4 Style định dạng cho 1 tag cho 1 vùng
- style #tinxemnhieu a { color: magenta} để định dạng cho mọi tag a trong đối tượng tên là tinxemnhieu có màu chữ là magenta
- Class: Một class CSS là một tập hợp nhiều đặc điểm định dạng mà bạn khai báo (ví dụ như: màu chữ, màu nền, cách hiển thị, khung viền …) sau đó đặt cho các đặc điểm đó một cái tên Khi đã có class CSS, muốn đối tượng nào trên trang được định dạng theo class đó thì chỉ định Như vậy class CSS chỉ cần khai báo định dạng một lần, nhưng có thể áp dụng cho rất nhiều đối tượng trong trang web ➔ thiết kế trang web nhanh
- Ví dụ: tieudetin { font-size:16; font-weight:bold)
SỬ DỤNG CSS
- Name: Tên của style (TênTag)
- Define in: Chọn nơi đặt style
- This document: Style đặt trong trang web hiện hành
- New Style Sheet: Đặt style trong file CSS bên ngoài trang web hiện hành
- Chỉ định các thuộc tính cần định dạng (font, nền , border, kích thước,align…) rồi nhấn OK (xem Hình 3.2)
Hình 3.2 Bảng thuộc tính cần định dạng
2 Định dạng cho 1 đối tượng cụ thể có tên
- Tên style: #TênĐốiTượng (Là dấu # kèm với tên của đối tượng muốn định dạng)
- Muốn định dạng cho đối tượng tên là quangcao, tạo style tên là #quangcao - Muốn định dạng cho đối tượng tên là tinnoibat, tạo style tên là #tinnoibat - Muốn định dạng cho đối tượng tên là tinmoinhan, tạo style tên là #tinmoinhan - Cách tạo
- Nhấn + trong CSS panel - Select type: Chọn Advanced - Name: Đặt tên style (#TênĐốiTượng) - Define in: Chọn nơi đặt style
- This document : Style đặt trong trang web hiện hành - New Style Sheet: Đặt style trong file CSS bên ngoài trang web hiện hành - Nhấn OK
- Chỉ định các thuộc tính cần định dạng (font, nền , border, kích thước,align…)
- Chỉnh sửa Style - Nhấp đúp tên style trong CSS panel - Hoặc
- Chọn style trong CSS panel rồi nhấp nút Edit
- Nhấp tên style rồi gõ F2 - Hoặc nhấp 2 lần vào tên của style
- Nhấp tên style trong CSS panel ➔ gõ phím Delete - Chú ý
- Nếu xóa class Các đối tượng vẫn còn gắn với class
- Nhấp phải tên Style ➔ Duplicate ➔ cho tên mới - Kiểm tra sự tương thích với trình duyệt
- Không phải thuộc tính nào của CSS cũng được mọi trình duyệt hỗ trợ Ví dụ: thuộc tính blink của text (Firefox hỗ trợ)
- Để kiểm tra sự tương tính của các thuộc tính CSS đã dùng, thực hiện như sau:
- Nhấp menu File ➔ Check Page ➔ Check Browser Compability hoặc nhấp nút Check Page trên toolbar Document
- Thu nhỏ các panel khác Panel CSS cao hơn và gồm 2 phần Phần trên là các style css, phần dưới là các thuộc tính css
- Nút Show list view: Hiện các properties theo thứ tự alphabel
- Nút Show only set properties: Chỉ hiện các properties đang dùng
- Nút Show category: Hiện các properties theo loại:
- Font: Các thuộc tính liên quan đến font chữ: Tên font, cỡ chữ, màu chữ, đậm, nghiêng, gạch dưới, chữ hoa - thường
- Background: Các thuộc tính liên quan đến nền: màu nền, ảnh nền
- Block: Các thuộc tính liên quan đến ký tự như: Khoảng cách giữa các từ/ký tự
Cách canh theo chiều ngang, canh theo chiều dọc Cách hiện chữ: Đưa lên, đưa xuống (vd: X2, O2), hiện, ẩn
- Border: Các thuộc tính liên quan đến đường viền: Kiểu, độ dày, màu đường viền
- Box: Các thuộc tính liên quan đến quan hệ giữa đối tượng và các đối tượng khác: 4 lề bên ngoài, 4 lề bên trong, quan hệ giữa đối tượng với chữ, độ rộng, độ cao
- List: Cách trình bày văn bản dạng liệt kê
- Positioning: Các thuộc tính liên quan đến vị trí (top, left, right, bottom) Cách tính vị trí đối tượng (position) Cách hiện đối tượng khi dữ liệu trong đối tượng bị tràn (overflow) Hiện đối tượng lên trên/dưới đối tượng khác (z-index) Hiện/ẩn(visibility)
- Extentions: Các thuộc tính để ngắt trang khi in, hình con trỏ chuột (cursor), hiệu ứng khi hiện đối tượng trong trang web (filter)
Hình 3.3 Danh sách thành phần trong panel CSS
Câu 1: Anh chị hãy cho biết cách định dạng văn bản trong CSS bằng phần mềm Adobe Dreamweaer? Thực hiện viết code định dạng văn bản trong CSS?
Câu 2: Anh chị hãy cho biết cách sử dụng cơ bản CSS?
Câu 3: Anh chị hãy thao tác trên panel CSS trong Adobe Dreamweaer?
Chương 4: Hình ảnh và Hyperlink DW 38
HÌNH ẢNH VÀ HYPERLINK TRONG DW
CHÈN HÌNH ẢNH TRONG TRANG WEB
Cú pháp chèn ảnh trong HTML - Trong HTML, ảnh được định nghĩa với thẻ
- Thẻ là trống, nó chỉ chứa các thuộc tính, và không có thẻ đóng
- Các thuộc tính src xác định URL ( địa chỉ web) của ảnh:
-
Các thuộc tính alt - Thuộc tính alt định nghĩa một văn bản thay thế cho hình ảnh, nếu hình ảnh không thể hiện thị được
- Thuộc tính alt cung cấp thông tin thay thế cho một hình ảnh, nếu một người vì lí do nào đó không thể xem nó (vì kết nối mạng chậm, hoặc lỗi trong thuộc tính src, hoặc nếu người dùng sử dụng một trình đọc màn hình)
- Nếu trình duyệt không thể tìm thấy ảnh, nó sẽ hiển thị nội dung chứa trong alt:
-
- Thuộc tính alt là bắt buộc Một trang web sẽ không hợp lệ nếu thiếu nó
Kích thước ảnh – Width và Height - Có thể sử dụng thuộc tính style để xác định chiều rộng và chiều cao cho một ảnh
- Các giá trị được quy định tại các điểm ảnh pixel (sử dụng px sau giá trị):
- Ví dụ -
- Ngoài ra, có thể sử dụng thộc tính width và height Tại đây, giá trị được đặt mặc định theo đơn vị pixel:
-
Sử dụng ảnh như là một liên kết (link)
- Để sử dụng ảnh như một liên kết, đơn giản chỉ là thẻ nằm trong thẻ :
LIÊN KẾT TRANG TRONG DW
- Chèn một siêu liên kết đến một tệp hoặc trang web trực tuyến khác như sau:
- Sử dụng con trỏ để chọn điểm chèn cho văn bản liên kết trong tệp
- Thêm văn bản bạn định sử dụng làm liên kết
- Mở cửa sổ Properties, nếu nó chưa được mở và nhấp vào hộp Link
- Để liên kết đến một tệp trên web, hãy nhập hoặc dán URL vào tệp đó
- Để liên kết đến một tệp trên máy tính của bạn, hãy chọn tệp đó từ danh sách tệp, bằng cách nhấp vào biểu tượng Tệp
- Nếu bạn muốn tạo hình ảnh có thể nhấp, hãy làm theo hướng dẫn ở trên cho hình ảnh thay vì văn bản Chỉ cần chọn hình ảnh và sử dụng cửa sổ Thuộc tính để thêm URL giống như bạn làm cho liên kết văn bản
- Nếu bạn thích, bạn có thể sử dụng biểu tượng thư mục ở bên phải của hộp Liên kết để tìm tệp Khi bạn chọn nó, đường dẫn sẽ xuất hiện trong hộp URL Trong hộp thoại Chọn Tệp, hãy sử dụng trình đơn Tương đối Tới cửa sổ bật lên để xác định liên kết là tài liệu tương đối hoặc gốc có liên quan Nhấp vào OK để lưu liên kết
2 Tạo liên kết tới tài liệu Word hoặc Excel
- Có thể thêm liên kết vào tài liệu Microsoft Word hoặc Excel trong một tệp hiện có
- Mở trang nơi muốn liên kết xuất hiện trong dạng xem Thiết kế
- Kéo tệp Word hoặc Excel vào trang Dreamweaver và định vị liên kết Hộp thoại Chèn tài liệu xuất hiện
- Nhấp vào Tạo liên kết và chọn OK Nếu tài liệu nằm ngoài thư mục gốc của trang, sẽ được nhắc sao chép nó ở đó
- Tải trang lên máy chủ web cũng đảm bảo tải lên tệp Word hoặc Excel
- Tạo liên kết thư bằng cách nhập:
- Thay thế "địa chỉ email" bằng địa chỉ email Khi người xem nhấp vào liên kết này, người xem sẽ mở một cửa sổ thông báo trống mới Hộp Đến được điền bằng địa chỉ được chỉ định trong liên kết email
4 Phân loại đường dẫn đến tài liệu
- Thông thường thì "đường dẫn đến tài liệu" được chia ra làm hai loại chính:
(xem bảng 4.1) Đường dẫn tuyệt đối Đường dẫn tuyệt đối là loại đường dẫn mà bên trong nó sẽ có chứa đầy đủ các thành phần như:
(1) Giao thức, ví dụ: http: https:
(2) Máy chủ, ví dụ: webcoban.vn google.com facebook.com (3) Đường dẫn, ví dụ: javascript/default.html default.html Lưu ý: Giao thức & máy chủ là hai thành phần bắt buộc phải có Đường dẫn tương đối Đường dẫn tương đối là loại đường dẫn mà bên trong nó chỉ có chứa duy nhất một thành phần:
(3) Đường dẫn, ví dụ: javascript/default.html default.html
Bảng 4.1 Bảng đường dẫn tương đối
- Bên dưới là một số ví dụ về đường dẫn tuyệt đối & đường dẫn tương đối Đường dẫn tuyệt đối http://webcoban.vn http://webcoban.vn/css/default.html http://webcoban.vn/css/nhung-kien-thuc-co-ban-trong-viec-viet-ma- css.html Đường dẫn tương đối default.html php/cach-su-dung-lenh-switch-case.html css/mau-sac-colors-trong-css.html
Bảng 4.2 Bảng đường dẫn tuyệt đối
5 Ưu điểm & nhược điểm của hai loại đường dẫn (xem Bảng 4.3) Đường dẫn tuyệt đối
- Ưu điểm: Cách xác định đường dẫn rất đơn giản
- Nhược điểm: Mã nguồn chỉ có thể sử dụng trên một máy chủ, nếu sử dụng mã nguồn trên các máy chủ khác nhau thì sẽ tốn nhiều công sức cho việc cập nhật lại các đường dẫn
- Hiện tại đang lưu bài viết trên máy chủ webcoban.vn, bên trong mỗi bài viết có rất nhiều liên kết được xác định bởi đường dẫn tuyệt đối dưới dạng http://webcoban.vn/đường-dẫn
- Nếu sau này vì một lý do phải chuyển toàn bộ bài viết lên một máy chủ khác (chẳng hạn như webcoban.com) khi đó phải cập nhật lại toàn bộ đường dẫn của tất cả các liên kết bên trong các bài viết từ dạng http://webcoban.vn/đường-dẫn thành http://webcoban.com/đường- dẫn
Bảng 4.3 Ưu nhược điểm hai đoạn đường dẫn
6 Download tài liệu khi người dùng nhấp vào liên kết
- Muốn thiết lập việc tài liệu sẽ được tải xuống khi người dùng nhấp vào liên kết thì thêm thuộc tính download vào bên trong thẻ
- Tải tập tin
- Click here
Câu 1: Anh chị hãy cho biết cách chèn hình ảnh trong trang web bằng phần mềm Adobe Dreamweaer? Thực hiện chèn hình ảnh bằng Hyperlink trong Adobe Dreamweaver?
Câu 2: Anh chị hãy cho biết cách liên kết trang trong Adobe Dreamweaer?
Câu 3: Vận dụng kiến thức đã học anh chị hãy chèn hình ảnh có sẵn vào 1 trang web đã tạo ở chương 3?
FORM
CÁC PHẦN TỬ CỦA FORM
- Form trong HTML thường được sử dụng để thu thập dữ liệu đầu vào của người sử dụng Phần tử định nghĩa một Form trong HTML:
- Các phần tử trong form -
- Các phần tử trong form có thể chứa các các kiểu phần tử khác nhau như các ô nhập dữ liệu (textboxes), các ô cho người dùng lựa chọn (checkboxes hoặc radio buttons), các nút cho người dùng kích gửi dữ liệu (submit buttons) và nhiều phần tử khác nữa
- Phần tử là một phần tử quan trọng nhất của Form Phần tử có nhiều kiểu khác nhau, phụ thuộc vào thuộc tính type (xem Bảng 5.1)
Kiểu Mô tả text Định nghĩa kiểu nhập dữ liệu là ô văn bản thông thường radio Định nghĩa kiểu nhập dữ liệu là ô chọn dạng radio button (chọn một trong nhiều lựa chọn) submit Định nghĩa một nút submit (cho việc gửi dữ liệu trên form)
Bảng 5.1 Mô tả các phần tử input
- định nghĩa một nút cho việc gửi dữ liệu trên Form (submitting) tới một trang khác để xử lý dữ liệu của form này (form-handler) Form- handler thường là một trang chạy ở phía server cho phép xử lý dữ liệu nhập Form- handler được chỉ định trong thuộc tính action của form:
-
-
-
-
- Nếu kích nút “Submit” dữ liệu trên form sẽ được gửi tới trang
- Phía máy chủ sẽ thực hiện xử lý dữ liệu gửi và đưa ra đầu ra Về xử lý phía server có thể sử dụng ngôn ngữ lập trình PHP đoạn code HTML ở trên sẽ được hiển thị trên trình duyệt
- Thuộc tính action xác định hành động được thực hiện khi form được gửi đi khi người sử dụng kích nút submit Cách phổ biến nhất khi gửi dữ liệu của form tới server là sử dụng một nút submit Thông thường form được gửi tới một trang web chạy trên
Chương 5: Form 49 máy chủ web Trong ví dụ trên, một script chạy ở phía server được xác định để xử lý form đã gửi:
-
5 Nhóm dữ liệu trong Form với
- Phần tử nhóm dữ liệu liên quan trong một form Phần tử xác định một phụ đề cho phần tử
-
- Thông tin cá nhân:
-
-
-
Câu 1: Anh chị hãy cho biết cách tạo form trong Adobe Dreamweaer?
Câu 2: Anh chị hãy cho biết các form cơ bản trong Adobe Dreamweaer?
Câu 3: Anh chị hãy tạo 1 from chọn giới tính gồm có 3 thuộc tính Nam, Nữ và Khác?
BẢNG VÀ TRÌNH BÀY TRANG TRONG DW
TABLE
Thẻ dùng để xác định một cái bảng
Thẻ dùng để xác định một hàng bên trong bảng
Thẻ dùng để xác định một ô (tiêu đề) bên trong hàng
Thẻ dùng để xác định một ô (bình thường) bên trong hàng
Bảng 6.1 Bảng các thẻ sử dụng table
2 Cách thức tạo một cái bảng
- Để tạo một cái bảng thì chúng ta nên thực hiện lần lượt các bước như sau:
- Bước 1: Xác định một cái bảng
- Bước 2: Xác định số hàng nằm bên trong bảng
- Bước 3: Xác định số ô nằm bên trong mỗi hàng
- Bước 4: Xác định nội dung của từng ô
- Bước 5: Thiết lập thuộc tính border với giá trị 1 để tạo đường viền cho bảng và các ô
3 Các thuộc tính được dùng trong việc tạo bảng
- Dưới đây là danh sách một số thuộc tính thường được áp dụng trong việc tạo bảng (xem Bảng 6.2) border Thiết lập độ dày của cái đường viền bao xung quanh bảng và các ô cellspacing Thiết lập khoảng cách nằm giữa mỗi hai đường viền lân cận cellpadding Thiết lập khoảng cách vùng đệm bên trong các ô bgcolor Thiết lập màu nền cho bảng hoặc các ô width Thiết lập chiều rộng cho bảng hoặc các ô height Thiết lập chiều cao cho bảng hoặc các ô align Canh lề cho nội dung bên trong ô (theo chiều ngang) valign Canh lề cho nội dung bên trong ô (theo chiều dọc)
Bảng 6.2 Danh sách thuộc tính áp dụng cho tạo bảng
TRÌNH BÀY TRANG
Chương 6: Bảng và trình bày trang trong DW 52
- Mở đầu các trang văn bản thường là các tiêu đề cần làm nổi bật từng phần của văn bản như Chương, Mục, cũng cần có đề mục rõ ràng khác với phần thân để người đọc theo dõi cho thuận tiện.
- Thẻ tiêu đề được sử dụng để cung cấp tiêu đề cho phần nội dung hiển thị trên trang Web Tất cả những thẻ tiêu đề phải có thẻ kết thúc Nó bắt đầu bằng thẻ và kết thúc bằng .
- Phần tiêu đề có thể hiển thị theo một trong sáu kích thước từ H1 đến H6, cách thể hiện các tiêu đề phụ thuộc vào trình duyệt.
- Thẻ định nghĩa có dạng:
- Tiêu đề 1 cho ta tiêu đề tương ứng Tiêu đề 1
- Thẻ định nghĩa có dạng:

-
Tiêu đề 2
cho ta tiêu đề tương ứng Tiêu đề 2
- Thẻ định nghĩa có dạng:

-
Tiêu đề 3
cho ta tiêu đề tương ứng Tiêu đề 3
- Tiêu đề 4 cho ta tiêu đề tương ứng Tiêu đề 4
Các thẻ trình bày trang
Chương 6: Bảng và trình bày trang trong DW 53
Thẻ không có thẻ đóng và được đặt trong cặp thẻ
- Thẻ được dùng với các chức năng sau:
- Để chỉ định bộ ký tự dùng hiển thị nội dung trang - Ví dụ: Định bộ ký tự font Unicode (dùng bộ ký tự này cho phép hiển thị tiếng việt bằng font Unicode trên trang Web)
-
- Để tự động làm mới lại trang Web sau mỗi n giây - Ví dụ: Làm tươi lại trang Web sau 30 giây
-
- Trong trường hợp muốn trang Web sau khi được nạp n giây sẽ tự động chuyển sang trang khác, ta sử dụng thẻ như sau (ví dụ sau 5 giây chuyển sang trang www.pcworld.com.vn):
-
- Cho phép ta khai báo các thông tin về công ty, địa chỉ liên lạc, … các bộ tìm kiếm (Search Engine như Google, Search của Yahoo,…) sẽ sử dụng thông tin này để tìm ra Web site của ta trên Internet
-
- Khai báo thẻ này với các từ khóa Các từ khóa này được đem so sánh với các từ khóa người dùng gõ và tìm kiếm trên Internet Nếu từ khóa người dùng tìm kiếm thuộc một trong các từ khóa ta đã khai báo trong thẻ này, Web site của ta sẽ xuất hiện trong danh sách kết quả của Web site có dịch vụ tìm kiếm
- Thẻ này dùng để căn chỉnh đoạn văn bản ở giữa chiều rộng trang văn bản
- Thẻ định nghĩa dạng:
- Thẻ này cũng có tác dụng xuống dòng khi kết thúc đoạn văn bản
- Thẻ
được sử dụng để định dạng một đoạn văn bản
- Khi viết một bài báo hay một bài luận, thông thường nội dung sẽ được nhóm thành nhiều đoạn với mục đích là nhóm các ý tưởng logic lại với nhau và áp dụng một số định dạng cho nội dung Trong một tài liệu HTML, nội dung có thể được nhóm thành các đoạn Thẻ
được sử dụng để đánh dấu sự bắt đầu của một đoạn mới.
TEMPLATE
Hình 6.1 Tạo template cho Website
- Trong việc thiết kế web, sẽ thiết kế một trang chủ và hệ thống gồm rất nhiều trang con Để trang chủ và các trang con đều có cấu trúc nhất quán với nhau, phải tạo một trang gọi là template Khi đó muốn thay đổi nội dung cho toàn bộ Website, đơn giản
Chương 6: Bảng và trình bày trang trong DW 55 thay đổi nội dung ở trang template và cập nhật lại cho toàn bộ Website với những thao tác đơn giản
- Tập tin template tạo ra sẽ có phần đuôi là dwt và nó sẽ mặc định đặt trong Templates folder
- Để tạo một template, bạn tiến hành như sau:
- Khởi động Dreamweaver Vào menu File, chọn New Ở Page Type > chọn HTML template sau đó bấm vào nút Create để mở một trang mới lên (xem Hình 6.1)
- Tiếp theo, bạn khai báo các thông tin về website mới bằng cách vào Site, chọn Manage Sites, sau đó chọn New trong cửa sổ tiếp theo để khai báo
- Tối thiểu cần khai báo một số thông tin sau (xem Hình 6.2)
- Local root folder: Thư mục gốc trên máy
- Default images folder: Thư mục mặc định dành cho hình ảnh
Hình 6.2 Chọn thư mục lưu trữ Website
- Sau khi khai báo xong chọn Save và bắt đầu tạo template Khi xác định thành phần nào trong web là không thay đổi, tạo trang web với những thành phần đó, sau đó chọn File > Save as Template
- Ngoài ra, cũng có thể tạo ra một template từ một trang web đã thiết kế trước đó bằng cách mở trang web đó lên bằng Dreamweaver, tiến hành khai báo Site mới cho trang web đó và chọn File > Save as template Sau đó đặt tên cho template vừa tạo
- Tiếp theo, xác định các vùng có thể thay đổi được như sau:
- Chọn vùng có thể thay đổi được bằng cách bấm chuột vào bảng của vùng đó (vùng được chọn sẽ có viền màu đen đậm bao quanh)
- Chọn Insert > Tenplate > Editable Region (xem Hình 6.3)
Hình 6.3 Chọn vùng thay đổi trên template
- Đặt tên cho vùng vừa chọn và bấm OK trong cửa sổ tiếp theo
- Cuối cùng, chọn File > Save để lưu lại trang template vừa tạo
2 Tạo trang web mới từ template
- Có thể tạo ra trang web đầu tiên từ template vừa tạo
- Chọn File > New Trong cửa sổ hiện ra, chọn Page from Template và chọn File Template vừa tạo sau đó bấm nút Create (xem Hình 6.4)
- Lưu ý, các tập tin tạo ra từ template chỉ có thể soạn thảo ở vùng Editable Region đã chọn lúc tạo template Còn các vùng khác thì sẽ không được phép thay đổi
Hình 6.4 Tạo trang web mới từ template
- Ngoài ra , khi đã tạo xong template với đầy đủ nội dung và liên kết thì bạn lưu thay đổi trên template này Dreamweaver sẽ xuất hiện hộp thoại nhắc nhở có muốn cập nhật thay đổi trên các trang dùng template này hay không, bấm Update để cập nhật
- Sau khi đã hoàn tất việc thiết kế một trang web, tiến hành đưa trang web lên mạng Internet để thử nghiệm và chia sẻ thông tin Đối với trang web thiết kế bằng Dreamweaver, để đưa website lên mạng thực hiện như sau:
- Dùng phần mềm FileZilla FTP Client đưa trang web lên hosting Khởi động FileZilla FTP Client nhập các thông tin cần thiết để kết nối với hosting Trong cửa sổ chương trình có 4 khung chính (xem Hình 6.5)
Hình 6.5 Cửa sổ chương trình FileZilla
- Trong khung số 1, tìm đến đường dẫn chứa bộ web (trong hình là thư mục Web server)
- Trong khung số 2, tìm và duyệt đến thư mục htdocs (đối với byethost) hoặc thư mục public_ html đối với 000webhost,…
- Trong khung thứ 3, lần lượt bấm chuột phải vào từng tập tin, thư mục (hoặc bấm Ctrl + A để chọn tất cả) và chọn Upload
- Đợi cho chương trình tải toàn bộ trang web lên hosting Thời gian nhanh hay chậm tùy theo dung lượng tập tin, số lượng tập tin cần tải lên nhiều hay ít Lưu ý, đối với Byethost thì có nhiều thư mục htdocs, phải duyệt đến thư mục htdocs nằm trong thư mục tên miền và tập tin phải nằm trong thư mục htdocs
Câu 1: Anh chị hãy cho biết cú pháp tạo Table trong Adobe Dreamweaver là gì?
Câu 2: Anh chị hãy cho biết cách trình bày trang như thế nào trong Adobe Dreamweaver?
Câu 3: Anh chị hãy cho biết cách tạo template mới trong Adobe Dreamweave?
Câu 4: Vận dụng kiến thức đã học anh chị hãy tạo 1 Template Web trong Adobe Dreamweaver với chủ đề web bán hàng online mặt hàng là Chocolate?
FRAME
KHÁI QUÁT VỀ FRAME
- Frame (hay Frame) trong HTML được sử dụng để phân chia cửa sổ trình duyệt thành các khu vực khác nhau mà mỗi khu vực tải một tài liệu HTML riêng Một tập hợp các Frame trong cửa sổ trình duyệt được biết đến như là một Frameset Cửa sổ được chia vào các Frame theo cách tương tự như các bảng bên trong các hàng và cột
- Có một số hạn chế trong sử dụng Frame, vì thế nó không được đề nghị sử dụng trong trang web
- Thường thì một vài thiết bị nhỏ không giải quyết được các Frame này vì màn hình của nó không đủ lớn để chia thành các Frame
- Đôi khi trang web có thể hiển thị khác nhau trên các máy tính khác nhau do độ phân giải của màn hình
- Nút quay trở lại trang trước có thể không làm việc như người dùng mong muốn
- Vẫn còn có một vài trình duyệt không hỗ trợ công nghệ Frame
- Nếu một người dùng đang sử dụng một trình duyệt cũ hoặc trình duyệt mà không hỗ trợ Frame thì khi đó phần tử sẽ được hiển thị tới người dùng
- Vì thế phải đặt một phần tử bên trong phần tử bởi vì phần tử được hỗ trợ để đổi vị trí của phần tử , nhưng nếu một trình duyệt không hiểu phần tử thì nó sẽ hiểu những gì bên trong của phần tử mà có chứa trong phần tử
- Có thể đặt một vài thông báo lịch thiệp tới người dùng mà đang sử dụng các trình duyệt cũ Ví dụ Xin Loi!! Trinh duyet cua ban khong ho tro Frame.
CÁC TẠO MỘT FRAME LAYOUT
- Để sử dụng các Frame trên trang web, sử dụng thẻ thay cho thẻ
Thẻ xác định cách chia cửa sổ thành các Frame Thuộc tính rows trong thẻ này xác định chiều ngang của Frame còn thuộc tính cols xác định chiều dọc của Frame Mỗi Frame được chỉ dẫn bởi một thẻ và nó xác định tài liệu nào sẽ được mở trong Frame
1.1 Tạo Frame ngang (xem Hình 7.1)
- Ví dụ tao Frame trong HTML
-
-
-
- Trình duyet cua ban khong ho tro Frame
Hình 7.1 Kết quả tạo Frame ngang
1.2 Tạo frame dọc (xem Hình 7.2)
- Vi du Frame trong HTML
-
-
-
- Trinh duyet cua ban khong ho tro Frame
Hình 7.2 Kết quả tạo frame dọc
Các thuộc tính của thẻ (xem Bảng 7.1) Thuộc tính Miêu tả cols Xác định số cột được chứa trong frameset và kích cỡ của mỗi cột
Bạn có thể xác định độ rộng của mỗi cột theo một trong 4 cách sau:
Theo giá trị tuyệt đối Pixels Ví dụ để tạo ra 3 cột dọc, sử dụng cols="100, 500,100"
Phần trăm của cửa sổ trình duyệt Ví dụ để tạo ra thiết lập 3 Frame dọc: cols="10%, 80%,10%"
Sử dụng biểu tượng gán giá trị (wildcard) Ví dụ để tạo 3 Frame dọc, bạn sử dụng cols="10%, *,10%" Trong trường hợp này thì wildcard sẽ chiếm phần còn lại Độ rộng quan hệ của cửa sổ trình duyệt Ví dụ để tạo 3 Frame dọc, sử dụng cols="3*,2*,1*" Đây là cách thay thế cho việc sử dụng phần trăm Ở trường hợp này, cửa sổ windows sẽ được chia thành 6 phần, cột đầu sẽ chiếm một nửa màn hình, cột thứ hai chiếm 1/3 và cột thứ ba chiếm 1/6 rows Thuộc tính này giống như thuộc tính cols và sử dụng các giá trị tương tự, nhưng nó được sử dụng để xác định các hàng của frameset Ví dụ để tạo 2 Frame ngang, bạn sử dụng rows="10%,
90%" Bạn có thể xác định chiều cao của mỗi hàng theo cách tương tự như các cột border Thuộc tính này xác định độ rộng của Border (đường viền) của mỗi
Frame theo Pixel Ví dụ như border="5" Một giá trị bằng không có nghĩa là không có Border frameborder Thuộc tính này xác định có hay không Border được hiển thị giữa các Frame Nó nhận giá trị 1 hoặc 0 Ví dụ frameborder="0" thì xác định là không có Border framespacing Xác định số lượng khoảng cách giữa các Frame trong frameset Nó nhận giá trị nguyên Ví dụ framespcing="10" nghĩa là có 10 pixel khoảng cách giữa các Frame
Bảng 7.1 Các thuộc tính và miêu tả của thẻ
Các thuộc tính của thẻ (xem Bảng 7.2) Thuộc tính Miêu tả src Thuộc tính này được sử dụng để đặt tên của file sẽ được tải trong
Frame Giá trị là bất cứ địa chỉ URL Ví dụ, src=" /html/top_frame.jsp" sẽ tải một file HTML có trong danh mục HTML name Thuộc tính này cho phép bạn đặt tên cho một Frame Nó được sử dụng để chỉ rõ Frame nào của tài liệu sẽ được tải trong đó Nó đặc biệt quan trọng khi bạn muốn tạo các link trong một Frame mà tải các trang web trong một Frame khác, trong trường hợp đó, Frame thứ hai cần một tên để xác định chính nó như là đích tới của link frameborder Thuộc tính xác định có hay không Border trong Frame đã được chỉ; thuộc tính này được quyền ưu tiên trước giá trị được gán trong thuộc tính frameborder của thẻ Và nó nhận giá trị 1 (Yes) hoặc 0 (No)
Chương 7: Frame 64 marginwidth Thuộc tính này cho phép bạn xác định độ rộng của khoảng cách giữa bên trái và phải của Border Frame với nội dung trong Frame Giá trị là pixel Ví dụ marginwidth="10" marginheight Thuộc tính cho phép bạn xác định chiều cao của khoảng cách giữa trên và dưới của Border Frame và nội dung của nó Giá trị là pixel
Ví dụ marginheight="10" noresize Theo mặc định thì bạn có thể đặt lại kích thước cho Frame bằng cách nhấn chuột vào Border Frame và kéo Thuộc tính noresize ngăn cản người sử dụng đặt lại kích cỡ Ví dụ noresize="noresize" scrolling Thuộc tính này điều khiển sự xuất hiện của thanh cuốn xuất hiện trên
Frame Nó nhận giá trị "yes", "no", hoặc "auto" Ví dụ scrolling="no" nghĩa là sẽ không có thanh cuốn (scrollbar) longdesc Thuộc tính này cho phép bạn cung cấp một đường link tới trang web khác chứa một sự miêu tả dài trong nội dung của Frame Ví dụ longdesc="framedescription.jsp"
Bảng 7.2 Các thuộc tính và miêu tả của thẻ
Các thuộc tính name và target của Frame
- Một trong các cách phổ biến về sử dụng các Frame là để đặt ví trí các thanh điều hướng trong một Frame và sau đó là tải các trang chính trong một Frame riêng biệt
- Ví dụ về đoạn code:
- Vi du Target Frame trong HTML
-
-
- Trinh duyet cua ban khong ho tro Frame
- Tại đây, có thể tạo 2 cột để chứa 2 Frame Frame đầu tiên rộng 200 pixel và chứa thanh menu điều hướng được thực hiện bởi file menu.htm Cột hai trong phần trống còn lại và chứa phần chính của trang và được thực hiện bởi tệp main.htm Đối với ba link có trong thanh menu, đã đề cập đến Frame mục tiêu như là main_page, vì thế bất cứ khi nào nhấn chuột vào các link trên menu thì link có sẵn sẽ mở trong main_page
Thuộc tính target có thể nhận một trong các giá trị sau (xem Bảng 7.3) Tùy chọn Miêu tả
_self Tải trang web trong Frame hiện tại
_blank Tải một trang trong cửa sổ trình duyệt mới
_parent Tải trang trong cửa sổ chính, trong trường hợp frameset đơn là cửa sổ trình duyệt chính
_top Tải trang trong cửa sổ trình duyệt, thay cho các trang hiện tại targetframe Tải trang trong một Frame mục tiêu đã đặt tên
Bảng 7.3 Các thuộc tính target
Câu 1: Anh chị hãy cho biết Frame trong Adobe Dreamweaver là gì?
Câu 2: Anh chị hãy cho biết có phải tất cả mọi trình duyệt đều sử dụng frame hay không, vì sao?
Câu 3: Anh chị hãy cho biết cách tạo frame dọc và frame ngang, sau đó thao tác cú pháp trên Adobe Dreamwaever?
BEHAVIORS - FROM
BEHAVIORS
- Behaviour: Hành vi “là một chuỗi các hành động lặp đi lặp lại Hành động là toàn thể những hoạt động (phản ứng, cách ứng xử) của cơ thể, có mục đích cụ thể là nhằm đáp ứng lại kích thích ngoại giới” là hành động hoặc phản ứng của đối tượng (khách thể) hoặc sinh vật, thường sử dụng trong sự tác động đến môi trường, xã hội
Hành vi có thể thuộc về ý thức, tiềm thức, công khai hay bí mật, và tự giác hoặc không tự giác Hành vi là một giá trị có thể thay đổi qua thời gian
- Trong marketing: Behaviour là hành vi của người tiêu dùng (consumers) được lặp đi lặp lại hoặc phổ biến trong 01 nhóm khách hàng mục tại điểm TouchPoints, có thể là: trên website, tại showroom, trên mobile app, hoặc Social…
- Những hành vi này có tính đại diện cao trong tập khách hàng và marketing dùng để khai thác đưa sản phẩm/dịch vụ tiếp cận thông qua các công cụ marketing (Thường hay nghe là marketing automation)
1 Hành vi khách hàng (behaviors)
- Hành vi khách hàng là một quá trình trong việc nghiên cứu thị trường, có nhiều định nghĩa về hành vi khách hàng đã được đưa ra như:
- Hành vi khách hàng được hiểu là yếu tố tác động có qua có lại giữa các kích thích từ phía môi trường đến với hành vi và nhận thức của con người Thông qua sự tác động đó, con người có thể thay đổi nhận thức, suy nghĩ và cuộc sống của họ – Theo công bố của Hiệp hội marketing tại Hoa Kỳ
- Hành vi khách hàng còn được hiểu là các hành vi được xác định cụ thể của cá nhân nào đó khi thực hiện các quyết định ảnh hưởng tới sản phẩm và dịch vụ của người khác như việc mua sắm, sử dụng hoặc vứt bỏ – Theo Kotler & Levy
- Tuy nhiên, hiểu theo một cách đơn giản nhất, hành vi khách hàng trong Marketing là để chỉ những suy nghĩ, phản ứng, hành động của khách hàng trong việc thực hiện mua sắm, tiêu dùng kể từ khi nghe, nhìn thấy sản phẩm, dịch vụ cho đến lúc kết thúc giao dịch mua bán Đây được xem như một sự tương tác qua lại bao gồm các hoạt động như mua sắm, sử dụng và xử lý sản phẩm, dịch vụ của khách hàng
- Một dẫn chứng cơ bản trong việc nghiên cứu hành vi tiêu dùng sản phẩm sữa bột của khách hàng:
- Khách hàng xem sản phẩm sữa bột nào nhiều nhất?
- Lý do gì khiến khách hàng lại dừng xem ở sản phẩm này lâu nhất (chất lượng tốt hơn hay đang được bán giảm giá)?
- Sản phẩm nào thường được khách hàng mua nhiều nhất?
- Số lượng mua như thế nào (mua lẻ từng chai hay mua nhiều)?
- Khách hàng có ý định mua vào thời điểm nào (mua khi cần dùng, mua khi giảm giá…)?
- Khách hàng còn quan tâm những sản phẩm khác hay không (bỉm, bình sữa,…)?
- Mức độ mua (bao lâu mua 1 lần)?
- Tìm hiểu tất cả vấn đề trên sẽ giúp các nhà sản xuất, kinh doanh sản phẩm cho trẻ em biết được nhu cầu, động cơ sử dụng sản phẩm và thói quen lựa chọn của khách hàng
2 Tầm quan trọng của phân tích hành vi khách hàng
- Thấu hiểu hành vi khách hàng trong suốt vòng đời sản phẩm
Hình 8.1 Tạm dịch “Khách hàng đang muốn điều ở công ty bạn?”
- “Khách hàng luôn là thượng đế” Vì vậy, việc nắm bắt tâm tư, suy nghĩ và hành vi còn được gọi là “Thấu hiểu khách hàng”
- Nghiên cứu hành vi khách hàng sẽ giúp doanh nghiệp hiểu thêm về các
- Không những nắm bắt được tâm lý khách hàng mà còn xác định được khuynh hướng lựa chọn sản phẩm và thương hiệu của họ Trên cơ sở đó, doanh nghiệp phát triển, đề ra chiến lược về sản phẩm, giá cả, xúc tiến thương mại hiệu quả hơn
3 Phân tích hành vi khách hàng vào website
- Hàng ngày có rất nhiều khách hàng truy cập website để tìm hiểu về sản phẩm và thông tin doanh nghiệp Chính vì thế, pageview là chỉ số vô cùng quan trọng, nó thể hiện vị thế và uy tín của 1 website Pageview càng cao thể hiện lượt xem quảng cáo trên trang đó càng lớn, Google sẽ đánh giá trang web của bạn cao hơn, việc leo top càng dễ dàng thực hiện
- Bởi vậy nên với những người làm quảng cáo, họ đều tìm cách tối đa chỉ số này trên trang để đảm bảo tiếp cận với nhiều người dùng nhất (xem Hình 8.2)
Hình 8.2 Biểu đồ lượt tiếp cận trang web
- Nếu 1 website có 3 quảng cáo trên site và trang đó được xem 2 lần thì sẽ được tính có 2 pageview và 6 lượt xem quảng cáo tất cả
3.2 Trải nghiệm khách hàng trên Web
- Khi bắt đầu truy cập vào 1 Website, khách hàng thường scroll chuột để xem sản phẩm hoặc các nội dung thông tin cơ bản
- Nghiên cứu hành vi scroll chuột sẽ biết được mức độ quan tâm của khách hàng đến nội dung sản phẩm, khách hàng cuộn chuột kéo xem chi tiết sản phẩm càng nhiều thì mức độ quan tâm càng lớn
- Mức độ cuộn chuột thường được chia thành nhiều mức độ khác nhau như 40%,50%,70%,… (xem Hình 8.3)
Hình 8.3 Biểu đồ thống kê hành vi scroll chuột theo mốc thời gian
- Bằng cách đo tỷ lệ phần trăm scroll, có được dữ liệu để đánh giá nội dung trên web có thực sự khiến người dùng quan tâm hay không, nếu không ta đưa ra các giả thuyết để giải thích và tìm giải pháp dựa trên các giả định này
- Khách hàng truy cập Website sẽ được chia thành hai loại:
- Khách hàng tiềm năng và khách không mua hàng
- Đa số khách hàng sẽ chưa quyết định mua hàng ngay lần đầu truy cập Website
Vì vậy, doanh nghiệp luôn cần phải phân tích số liệu hành vi khách hàng rời web
- Thông qua số liệu thời gian khách ở lại web sẽ biết được mức độ hứng thú của khách hàng đến nội dung sản phẩm Từ đó phân tích nguyên nhân rồi tiến hành cải thiện nội dung trên Website để có thể giữ chân được khách hàng lâu hơn (xem Hình 8.4)
Hình 8.4 Biểu đồ thống kê khách hàng rời web, thời gian khách hàng ở lại web
- Khách hàng ở trên Web càng lâu vừa chứng tỏ được mức độ quan tâm đến nội dung trên Web, vừa chứng tỏ được sự hiệu quả trong chiến dịch Marketing
3.4 Mức độ tương tác của khách hàng
- Khách hàng tương tác với Website thông qua các hành vi cụ thể như:
- Khách thêm giỏ hàng nhưng không mua hàng - Khách hàng cũ quay trở lại Web
- Khách truy cập nhưng từ chối điền mẫu form mua hàng - Khách đặt hàng thành công
- Khách chat hỏi nhân viên hỗ trợ - Khách bình luận về nội dung sản phẩm - Khách để lại số điện thoại liên hệ…
FORM
- Form dùng để đăng nhập, đăng ký thành viên diễn đàn, tài khoản mail,…
- Form đăng tin, bài viết, sản phẩm mới lên web, blog,…
- Form đăng nhập (xem Hình 8.5)
2 Thành phần của form (xem Hình 8.6)
Hình 8.6 Thành phần của form
- Nhập văn bản ngắn trên 1 dòng
Hình 8.7 Hộp thoại text Field
- Nhấp vị trí (trong form) muốn chèn
- Vào menu Insert ➔ Form ➔ Text Field (hoặc Insert bar ➔ Tab form ➔ Text field) (xem hình 8.7)
- ID: Tên của text field - Label: Nhãn của text field - Style: Cách đặt nhãn
- Wrap with label tag: Tag label bao trùm nhãn và tag input - Attach label tag: Nhãn nằm trong tag label, tách biệt với tag input - No label tag: Không có tag label
- Position: Vị trí nhãn so với text field (Before, After) - Access key: Để user focus nhanh đến text field (Gõ Alt + Access key) - Tab Index: Thứ tự tab để user di chuyển qua các đối tượng có thứ tự (xem Hình 8.8)
Hình 8.8 Các thuộc tính trong text field
- Char width: Độ rộng text field tính theo ký tự - Max chars: Số ký tự tối đa mà user có thể nhập - Type: Single line/Multi line/Password ~ 1 hàng chữ/nhiều hàng chữ/mật khẩu - Init val: Giá trị ban đầu
- Check Box được sử dụng trong trường hợp cho phép chọn nhiều mục trong các mục đưa ra
- Cách chèn - Nhấp vị trí trong form muốn chèn - Vào menu Insert ➔ Form ➔ Checkbox (hoặc Insert bar ➔ Tab form ➔ Checkbox)
- Button là nút lệnh, có thể dùng để gởi dữ liệu trong form lên server (submit), xóa dữ liệu trong form (reset) hoặc thực hiện 1 tác vụ nào đó
- Nhấp vị trí (trong form) muốn chèn (Nhấp sau TextArea sothich, Enter xuống hàng)
- Vào menu Insert ➔ Form ➔ Button (xem Hình 8.10)
- ID: Tên của button - Label: Không gõ (Đối với button, thường không cần nhãn)
Hình 8.11 Các thuộc tính trong Insert Button
- Value: Dòng chữ trong nút
- Ví dụ: Gõ Đăng ký - Action: Chức năng của nút submit, reset, none (xem Hình 8.11)
Câu 1: Anh chị hãy cho biết behaviors hay còn gọi là hành vi người dùng là gì?
Câu 2: Anh chị hãy phân tích hành vi người dùng trong website?
Câu 3: Anh chị hãy cho biết cách tạo from đăng ký và ứng dụng thực hiện thao tác đó trên phần mềm Adobe Dreamweaver?
FRAMESETS
CÁCH TẠO TRANG KHUNG VÀ LIÊN KẾT TRANG
- Thẻ dùng để xác định một bộ khung - Trong một bộ khung sẽ có một hoặc nhiều khung, mỗi khung là một phần tử
- Phần tử chỉ định trong một bộ khung sẽ có bao nhiêu hàng, bao nhiêu cột và kích thước của mỗi phần đó
- Phần tử bên dưới xác định bộ khung sẽ có hai cột (tương ứng hai phần tử ) (xem Hình 9.1)
- Phần tử thứ nhất có chiều rộng bằng 35% chiều rộng của phần tử
- Phần tử thứ hai có chiều rộng bằng 65% chiều rộng của phần tử
-
-
Hình 9.1 Ví dụ 1 tạo bảng 2 cột
2 Các thuộc tính của thẻ
- Thẻ có ba thuộc tính cơ bản (xem Bảng 9.1) cols Xác định số lượng cột và chiều rộng mỗi cột trong phần tử rows Xác định số lượng hàng và chiều cao mỗi hàng trong phần tử noresize Ngăn chặn hành động kéo thả làm thay đổi kích thước của các phần tử
bên trong phần tử
Bảng 9.1 Bảng mô tả sơ lược về ba thuộc tính
- Thuộc tính cols dùng để xác định số lượng cột và chiều rộng mỗi cột trong phần tử
- Thuộc tính cols có bao nhiêu giá trị thì sẽ tương ứng với bấy nhiêu cột, và mỗi giá trị đó cũng xác định chiều rộng của mỗi cột Lưu ý, các giá trị được ngăn cách bởi dấu phẩy
- Giá trị của thuộc tính cols được xác định bởi một trong ba đơn vị:
- px - % - * (tức là bằng chiều rộng của phần tử trừ đi tổng chiều rộng của những cột khác)
- Phần tử bên dưới xác định bộ khung sẽ có ba cột (tương ứng ba phần tử )
- Phần tử thứ nhất có chiều rộng bằng 20% chiều rộng của phần tử
- Phần tử thứ hai có chiều rộng bằng 30% chiều rộng của phần tử
- Phần tử thứ ba có chiều rộng bằng 50% chiều rộng của phần tử
-
-
-
- Thuộc tính rows dùng để xác định số lượng hàng và chiều cao mỗi hàng trong phần tử
- (Thuộc tính rows có bao nhiu giá trị thì sẽ tương ứng với bấy nhiêu hàng, và mỗi giá trị đó cũng xác định chiều cao của mỗi hàng Lưu ý, các giá trị được ngăn cách bởi dấu phẩy)
- Giá trị của thuộc tính rows được xác định bởi một trong ba đơn vị:
- px - % - * (tức là bằng chiều cao của phần tử trừ đi tổng chiều cao của những hàng khác)
- Phần tử bên dưới xác định bộ khung sẽ có ba hàng (tương ứng ba phần tử )
- Phần tử thứ nhất có chiều cao bằng 20% chiều cao của phần tử
- Phần tử thứ hai có chiều cao bằng 30% chiều cao của phần tử
- Phần tử thứ ba có chiều cao bằng 50% chiều cao của phần tử
-
-
-
- Mặc định, khi ta dí chuột vào các cạnh của một phần tử thì nó sẽ hiện lên con trỏ giống như hoặc giúp chúng ta có thể kéo thả để thay đổi kích thước của phần tử
- Từ đây, thuộc tính noresize dùng để xác dịnh việc ngăn chặn hành động kéo thả làm thay đổi kích thước của phần tử
- Không thể kéo thả làm thay đổi kích thước các phần tử trong phần tử
-
-
-
3 Tạo kiểu liên kết với Pseudo-class
- Theo mặc định, các liên kết có màu xanh với gạch chân Khi click vào liên kết này, nó sẽ chuyển sang màu tím Mặc dù đây là những dấu hiệu thị giác được công nhận nhưng chúng không còn phù hợp với thiết kế hiện đại Giờ đây, các liên kết thường bỏ gạch chân và thay đổi khi di chuột qua đó Để tạo kiểu cho liên kết trong các trạng thái khác nhau, CSS sử dụng pseudo-class Chúng được gọi là pseudo-class vì không giống
Chương 9: Framesets 79 như các lớp thông thường, không thể thêm thuộc tính lớp vào phần tử Trình duyệt áp dụng pseudo-class sử dụng các kiểu trong style sheet
- Pseudo-class bắt đầu với dấu hai chấm và được gắn trực tiếp vào selector Các pseudo-class được sử dụng với liên kết như sau:
- :link: Tạo kiểu liên kết với trạng thái không được truy cập
- :visited: Tạo kiểu liên kết được truy cập
- :hover: Tạo kiểu cho bất cứ phần tử nào (không chỉ có liên kết) khi con trỏ chuột di chuyển qua nó Bạn đã dùng lớp này trong Phần 5 để thay đổi hình ảnh khi di chuột qua
- :active: Tạo kiểu cho một phần tử tại thời điểm click chuột
- :focus: Tạo kiểu cho một phần tử được chọn như khi sử dụng bàn phím để điều hướng trang
- Khi tạo kiểu liên kết, cần sử dụng các pseudo-class theo thứ tự được liệt kê ở trên Nếu không đúng thứ tự, không thể áp dụng đúng kiểu Nhiều người sử dụng cụm từ LoVe-HAte để nhớ đúng thứ tự Gợi ý code của Dreamweaver cũng có thể thực hiện bằng cách liệt kê pseudo-class theo đúng thứ tự Nên thêm lớp :focus để những người không thể hoặc không muốn dùng chuột có thể truy cập khi duyệt web trên laptop hoặc máy tính để bàn
- Bước 1 Chọn một liên kết trong Live View và chọn bộ chọn h2 trong khung Selectors của CSS để tạo quy tắc kiểu tiếp theo ngay sau h2, giữ hầu hết các bộ chọn chung trong style sheet Sau đó click vào nút dấu cộng để tạo bộ chọn mới Sử dụng mũi tên lên để làm bộ chọn đề xuất ít cụ thể hơn, nó nên chỉ a Điều này sẽ tạo kiểu liên kết trong tất cả các trạng thái
- Bước 2 Trong phần văn bản của khung Properties, thiết lập thuộc tính font- weight là bold
- Bước 3 Chọn icon đầu tiên cho thuộc tính text-decoration và thiết lập giá trị của nó là none Tất cả các liên kết trong trang đều không được bôi đậm và không có gạch chân
- Bước 4 Tạo một selector mới cho a:link Khi gõ dấu hai chấm, Dreamweaver hiển thị gợi ý code cho các pseudo-class
- Bước 5 Click vào mẫu màu hồng trong khung CC Libraries để sao chép màu #F68979 vào bộ nhớ tạm và dán nó vào trường có thể chỉnh sửa ở bên phải màu cho thuộc tính color
- Bước 6 Tạo selector mới cho a:visited, sao chép màu #FF944C từ mẫu màu cam nhạt và đặt nó làm giá trị của thuộc tính color
- Bước 7 Tạo selector nhóm mới cho a:hover, a:active, a:focus, lấy màu (#7F3300) từ mẫu màu cam cháy và dán nó làm giá trị của thuộc tính color Đồng thời đặt thuộc tính text-decoration thành underline bằng cách chọn biểu tượng thứ hai
- Bước 8 Trong Live View, di chuột qua một liên kết Nó sẽ chuyển sang màu cam cháy và được gạch chân Nếu không, kiểu liên kết của bạn sai thứ tự trong khung Selectors (xem Hình 9.3)
Hình 9.2 Thứ tự kiểu liên kết
4 Tạo liên kết kích hoạt cho menu điều hướng
- Trên màn hình độ phân giải nhỏ như điện thoại di động, menu điều hướng thường bị ẩn đi, chỉ hiển khi click hoặc chạm vào nút menu Trong phần này, cung cấp một ID cho danh sách không thứ tự và thêm tiêu đề cấp hai cho liên kết trong danh sách
Link menu sẽ bị ẩn trong màn hình độ phân giải lớn CSS và JavaScript sẽ điều khiển chuyển động trượt của menu điều hướng trên màn hình nhỏ hơn
- Bước 1 Trong Live View, chọn danh sách không thứ tự của liên kết điều hướng bằng cách click vào một trong những liên kết đó Liên kết này sẽ có màu cam cháy và được gạch chân để chỉ nó đang ở trạng thái kích hoạt Nhấn mũi tên lên vài lần cho đến khi Element Display chỉ danh sách đã được chọn Tab Element Display hiển thị ul (xem Hình 9.3)