Cấu trúc của giáo trình gồm 10 chương: Chương 1 : Giới thiệu về web Ch ương 2 : Hyperlink – hình ảnh Chương 3 : Danh sách Ch ương 4 : Bảng và trình bày trang Ch ương 5 : Form Ch ươ
GIỚ I THI Ệ U V Ề WEB
CÁC KHÁI NIỆM CƠ BẢN
− Internet là một mạng máy tính toàn cầu trong đó các máy truyền thông với nhau theo một ngôn ngữ chung là TCP/IP
− Intranet đó là mạng cục bộ không nối vào Internet và cách truyền của chúng cũng theo ngôn ngữ chung là TCP/IP
Mô hình Client-Server (khách-chủ) là một hệ thống trong đó Server chứa tài nguyên dùng chung cho nhiều máy khách (Client), như tập tin, tài liệu và máy in Ưu điểm của mô hình này là tiết kiệm thời gian và chi phí, đồng thời dễ quản trị hệ thống Cách hoạt động: Server vận hành liên tục (24/7) và chờ yêu cầu từ Client; khi nhận được yêu cầu, Server sẽ xử lý và đáp ứng ngay.
− Internet Server là các Server cung cấp các dịch vụ Internet(Web Server, Mail Server, FTP Server )
− Internet Service Provider (ISP): là nơi cung cấp các dịch vụ Internet cho khách hàng
Mỗi ISP có nhiều khách hàng và có thể có nhiều loại dịch vụ Internet khác nhau
Internet Protocol (IP) là chuẩn liên lạc giữa các máy tính trên mạng internet Để trao đổi thông tin, mỗi thiết bị trong mạng được gán một địa chỉ IP, gồm 4 số thập phân từ 0 đến 255 và được phân cách bằng dấu chấm; ví dụ 192.168.0.1 Địa chỉ IP này phục vụ cho toàn mạng Internet và được phân phối bởi các tổ chức quản lý địa chỉ IP trên toàn cầu, sau đó quốc gia sẽ phân bổ cho các ISP Khi tham gia mạng Internet, một máy tính cần có một địa chỉ IP, có thể là tạm thời hoặc vĩnh viễn Thông thường các máy tính kết nối vào Internet thông qua một ISP bằng đường điện thoại và khi kết nối, ISP sẽ cấp tạm thời một địa chỉ IP cho máy tính.
Trong truyền thông tin qua Internet, khi một máy tính X có địa chỉ IP x gửi dữ liệu tới máy tính Y có địa chỉ IP y, quá trình này diễn ra như sau: nếu X và Y thuộc cùng một mạng con (subnet) thì dữ liệu được gửi trực tiếp tới Y; ngược lại, nếu chúng ở các mạng con khác nhau thì dữ liệu sẽ được chuyển tới một thiết bị trung gian có đường kết nối với các mạng khác, được gọi là gateway, và từ gateway dữ liệu sẽ được định tuyến tới Y.
− World Wide Web (WWW): là một dịch vụ phổ biến nhất hiện nay trên Internet
Dịch vụ này đưa ra cách truy xuất các tài liệu của các máy phục vụ dễ dàng thông qua các giao tiếp đồ họa Để sử dụng dịch vụ này máy Client cần có một chương trình gọi là Web Browser
− Web Brower(trình duyệt): là trình duyệt web Dùng để truy xuất các tài liệu trên các Web Server Các trình duyệt hiện nay là Internet Explorer, Nestcape
− Home page: là trang web đầu tiên trong web site
− Hosting provider: là công ty hoặc tổ chức đưa các trang của chúng ta lên web
− Hyperlink: tên khác của hyperlink
− Publish: làm cho trang web chạy trên mạng
− URL (Unioform resource locator): một địa chỉ chỉ đến một file cụ thể trong nguồn tài nguyên mạng
▪ Mỗi nguồn trên web có duy nhất một địa chỉ rất khó nhớ Vì vậy, người ta sử dụng URL là một chuỗi cung cấp địa chỉ internet của một web site hoặc nguồn trên World Wide Web Định dạng đặc trưng là: www.nameofsite.typeofsite.countrycode
VD : 207.46.130.149 được biểu diễn trong URL là www.microsoft.com
URL nhận biết giao thức của site hoặc nguồn được truy cập Giao thức phổ biến nhất là http, trong khi một số dạng URL khác như gopher cung cấp địa chỉ internet cho một thư mục Gopher và ftp cho biết vị trí mạng của nguồn FTP Việc nhận diện đúng giao thức giúp trình duyệt và các ứng dụng kết nối đúng đến nguồn chứa nội dung và truyền tải dữ liệu một cách hiệu quả.
✓ URL tuyệt đối: là địa chỉ internet đầy đủ của một trang hoặc file, bao gồm giao thức, vị trí mạng, đường dẫn tùy chọn và tên file
Ví dụ : http://www.microsoft.com/ms.htm
URL tương đối là địa chỉ liên kết tham chiếu tới một tập tin dựa trên đường dẫn hiện hành, không chứa đầy đủ đường dẫn gốc của máy chủ và chỉ gồm tên tập tin kèm phần mở rộng Nó đơn giản và dễ sử dụng khi di chuyển hoặc tái cấu trúc thư mục, vì liên kết vẫn đúng miễn là cấu trúc thư mục liên quan không thay đổi Ví dụ, nếu trang hiện tại ở thư mục '/blog/', liên kết 'about.html' trỏ tới '/blog/about.html', còn 'images/logo.png' trỏ tới '/blog/images/logo.png' Việc dùng URL tương đối cũng giúp tối ưu liên kết nội bộ cho SEO, giảm phụ thuộc vào miền và cho phép cập nhật nhanh khi cấu trúc site thay đổi.
− Web server là một chương trình đáp ứng lại các yêu cầu truy xuất tài nguyên từ trình duyệt.
GIỚI THIỆU KHÁI QUÁT VỀ WEB
− Web là một ứng dụng chạy trên mạng(Client-Server), được chia sẻ khắp toàn cầu
Trang web là một tệp văn bản chứa các tập tin HTML hoặc các đoạn mã đặc biệt mà trình duyệt web có thể hiểu và xử lý được Các tệp này được lưu với phần mở rộng html hoặc htm, cho phép trình duyệt nhận diện và hiển thị nội dung một cách chính xác trên màn hình.
− HTML (HyperText Markup Language), gồm các đoạn mã chuẩn được quy ước để thiết kế Web và được hiển thị bởi trình duyệt Web (Web Browser)
▪ Hypertext (Hypertext link): là một từ hay một cụm từ đặc biệt dùng để tạo liên kết giữa các trang web
▪ Markup : là cách định dạng văn bản để trình duyệt hiểu và thông dịch được
▪ Language: đây không là ngôn ngữ lập trình, mà chỉ là tập nhỏ những quy luật để định dạng văn bản trên trang web
Web editors enable you to draft websites with any text editor, and popular choices today include Notepad, FrontPage, and Dreamweaver.
TAG HTML
− Tap HTML là những câu lệnh nằm giữa cặp tag “” dùng để định dạng các văn bản trên trang web Dạng chung của một tap HTML là:
▪ Tage Name: là tên một tag HTML, viết liền với dấu “
14 Tag : Định dạng chữ nghiêng
− Cú pháp: Nội dung chữ nghiêng
15 Tag : gạch chân văn bản
− Cú pháp: nội dung chữ gạch chân
− Ví dụ: Định dạng khối văn bản vừa đâm, nghiêng và gạch chân
− Chỉnh cở chữ to hoặc nhỏ hơn cở chữ xung quanh
Nội dung chữ to
Nội dung chữ nhỏ
− Đưa chữ lên cao hoặc xuống thấp so với văn bản bình thường
Nội dung chữđưa lên cao
Nội dung chữ đưa xuống thấp
Ví dụ: a 2 và H2O a2
− Cú pháp: Nội dung văn bản bị gạch ngang
− Dùng để nhập một dòng mã có định dạng ký tự riêng Dòng mã này không được thực hiện mà được hiển thị dưới dạng văn bản bình thường
Nội dung văn bản muốn định dạng
If(x>0> x = x + 1 (br> else y = y + 1
20 : Văn bản được nhấn mạnh (giống tag )
− Cú pháp: Văn bản được nhấn mạnh
21 : Định dạng chữ đậm (giống )
− Cú pháp: Văn bản được nhấn mạnh
− Giữ nguyên các định dạng như: Ngắt dòng, khoảng cách, thích hợp với việc tạo bảng
Nội dung văn bản cần định dạng trước với tất cả định dạng khoảng cách, xuống dòng và ngắt hàng
Learning HTML
Humpty Dumpty sat on a wall Humpty Dumpty had a great fall All the King’s horses
And all the King’s men Could not put Humpty Dumty together again
23 : Chia văn bản thành từng khối bắt đầu từ một dòng mới
− Cú pháp: Nội dung của khối băt đầu từ một dòng mới
24 : Tách khối nhưng không bắt đầu từ một dòng mới
− Cú pháp: Nội dung của khối trong 1 dòng
Learning HTML
The DIV element is used to group elements
Typically, DIV is used for block level elements
Division2
This is a second division
The second division is right aligned
Common formating
is applied to all the elements in the division
M Ộ T S Ố TH Ẻ ĐẶ C BI Ệ T (THAM KH Ả O)
Thẻ meta được khai báo trong cặp thẻ head và thường được dùng để khai báo loại font, tối ưu tìm kiếm, xóa cache và chuyển trang Đối với font Unicode đặc biệt dành cho tiếng Việt trên website, chúng ta phải khai báo thẻ meta trong thẻ head để đảm bảo trình duyệt tải đúng font.
b Thẻ cho phép người dùng tìm kiếm.
Khi bạn đưa trang web của mình lên Internet để người dùng có thể tìm thấy thông qua các công cụ tìm kiếm như Google, Yahoo và các trình duyệt khác, việc khai báo thẻ meta trong phần head của trang là bước quan trọng giúp mô tả nội dung và tối ưu hóa hiển thị trên kết quả tìm kiếm Các thẻ meta giúp công cụ tìm kiếm hiểu nội dung trang, thu hút người đọc bằng thẻ tiêu đề ngắn gọn và mô tả hấp dẫn, đồng thời chỉ dẫn trình thu thập dữ liệu cách lập chỉ mục và ưu tiên nội dung phù hợp Dù thẻ keywords đã ít được các công cụ xem trọng ngày nay, thẻ robots vẫn quan trọng để điều khiển việc thu thập dữ liệu, còn thẻ mô tả và tiêu đề nên phản ánh đúng nội dung và chứa từ khóa liên quan mà người dùng có thể tìm kiếm Tóm lại, khai báo thẻ meta đúng cách sẽ hỗ trợ khả năng hiển thị tự nhiên của trang trên công cụ tìm kiếm và giúp người dùng nhận diện nội dung bạn cung cấp.
Bạn có thể khái báo các thông tin khác của trang web để khi người dùng có thể tìm kiếm thông qua các thông tin này
Chọn All Programs và mở Adobe Dreamweaver CS6 lên
Màn hình cài đặt thành công
MÀN HÌNH DREAMWEAVER
1 Insert Bar: Gồm các chức năng tiện ích dùng để chèn các đối tượng vào trang web, và định các thuộc tính cho đối tượng
− Common: Chèn các đối tượng: Image, Flash, Date, Template,
− Layout: Chứa các công cụ trình bày trang gồm 3 chế độ: Standard, Expended, Layout
− Forms: Chứa các công cụ tạo Form
− Text: Dùng định dạng văn bản
− HTML: Chứa các công cụ tạo trang web bằng code view
2 Document Toolbar: Chứa các nút cho phép xem trang web ở dạng design hay dạng code
− Show code view: Xem dạng trang HTML
− Show Design view: Xem trang dạng thiết kế, sử dụng các công cụ của Dreamweaver
− Show code and design view: Chia cửa sổ làm 2 phần: phần trên dạng code view, phần dưới dạng Design view
− Title: tiêu đề của trang Web
− Preview/debug in Browser: Xem kết quả trang web thông qua trình duyệt
− web Document Window: Cửa sổ dùng để tạo và hiệu chỉnh trang Web
3 Properties Inspector: Hiển thị các thuộc tính của các đối tượng đang được chọn, đồng thời cho phép chỉnh sửa các thuộc tính đó
4 Panel groups: là nhóm các Panel cho phép quản lý các đối tượng trong trang
− Bật/tắt các thanh Panel: Chọn menu Window→ Chọn thanh Panel tương ứng
− Mở rộng các thanh Panel: Click vào mũi tên ở góc trái của mỗi Panel
5 Site Panel: cho phép quản lý các tập tin, thư mục trong bộ Web (giống windows explorer) Thanh công cụ của Site Panel
Connect/Disconnect is a feature that manages the connection to a Remote site and applies only to Remote sites using FTP, WebDAV, or Sourcesafe; by default Dreamweaver CS6 disconnects from the remote site after 30 minutes of inactivity, and you can change this timeout by selecting Edit/Preferences/Site and adjusting the time.
Refresh: Chức năng cấp nhật tập tin, thư mục cho Remote site giống với Local
Site của chính nó, thường không sử dụng chức năng này vì khi tạo Site mới Dreamweaver CS6 luôn đánh dấu check vào mục refresh remote file list automatically
Get File is a feature that copies files from a remote site to a local site Depending on whether the Enable file check-in and check-out option is enabled, the copied files will be writable or read-only, controlling their permissions during transfer.
Put File: Chép tập tin từ Local Site lên Remote Site
Check out files: Kiểm tra tập tin ở Remote site chép vào hay chép chồng lên tập tin Local Site
Check in files lets you verify whether files on the Local Site have been copied to the Remote Site and whether those copies are new or overwriting existing ones The Expand/Collapse control displays two windows—the Local Site and the Remote Site—so you can quickly compare directories and manage synchronization between local and remote sites.
6 Status bar: Thanh trạng thái, nằm dưới đáy của Document Window, hiển thị
Tag Selector, Window size, Document size và Download time
Tag Selector cho phép hiển thị các thẻ HTML tại vị trí con trỏ hiện tại, giúp bạn theo dõi và chèn mã ở đúng nơi chỉnh sửa Khi tạo trang Web mới, phần tử duy nhất được hiển thị trong Tag Selector là thẻ BODY, làm nổi bật khung nội dung chính của trang và tối giản hóa quá trình xây dựng bố cục từ đầu.
− Document size and Download time: Kích cởước chừng của tài liệu và thời gian tải tài liệu xuống có thể điều chỉnh tốc độ download bằng cách:
+ Chọn Edit→ Preferences→ chọn mục Status bar
+ Tại mục Connection speed → chọn tốc độ tương ứng
− Window size: Hiển thị kích thước hiện tại của tài liệu, được tính bằng Pixel
Khi xác định kích thước trang web, cần đảm bảo tính tương thích và an toàn với mọi độ phân giải màn hình Việc thay đổi kích thước tài liệu có thể thực hiện theo một trong các kích thước định sẵn hoặc theo một giá trị tùy ý Để điều chỉnh, hãy nhấp chuột vào mũi tên bên cạnh Window size và chọn kích thước phù hợp hoặc nhập giá trị mong muốn.
+ Chọn một kích thước có sẳn, hoặc
+ Chọn Edit size để định một kích thước khác
KẾ HOẠCH THIẾT KẾ MỘT WEBSITE
1 CÁC YÊU CẦU CƠ BẢN KHI THIẾT KẾ WEBSITE
− Xác định yêu cầu và mục đích của website
− Chuẩn bị nội dung cho các trang
− Phác thảo khuôn mẫu (Template) cho trang, thường các trang có cùng chủ đề thì sử dụng chung một template
− Xác định cấu trúc của website, có 3 kiểu cấu trúc
+ Tuyến tính + Phân cấp + Hình chóp
− Tùy theo mục đích của website mà chọn kiểu phù hợp
2 THAO TÁC TẠO BỘ WEB CƠ BẢN: a Khi thiết kế một Website cần quan tâm đến 2 vấn đề:
Xác định nội dung chủ đề chính là bước nền, từ đó chọn bố cục và hệ màu phù hợp cho website Ví dụ, với website thương mại, bố cục phải sáng sủa và dễ điều hướng, màu sắc đồng nhất với thương hiệu để tối ưu trải nghiệm người dùng và bật tiềm năng SEO Sau đó thu thập đầy đủ tài liệu, phân nhóm theo nội dung và từ đó quyết định số lượng trang cùng nội dung cho từng trang, đảm bảo cấu trúc thông tin logic và nhất quán với từ khóa mục tiêu, tiêu đề và mô tả phù hợp.
− Chọn hình ảnh, logo, Banner, hệ thống nút liên kết, ảnh minh họa, ảnh bố cục, ảnh trang trí
− Phác họa sơ đồ liên kết trên giấy để thấy rõ mối liên kết giữa các trang đơn trong một website b Cách t ạ o m ộ t Website m ớ i:
− Trong Document Window, chọn Site→ New Site→ xuất hiện hộp thoại Site Definition
− Site name : Đặt tên Site, tên này xuất hiện trong hộp thoại Edit Site
Local Root Folder là bước khai báo đường dẫn của thư mục lưu trữ Website trên ổ đĩa cứng Bạn có thể thực hiện bằng cách nhập trực tiếp đường dẫn đến thư mục hoặc nhấp vào biểu tượng Folder để chọn đường dẫn tương ứng.
Default Images folder là địa chỉ khai báo đường dẫn đến thư mục chứa các hình ảnh của trang Web; thư mục này phải nằm trong Local root Folder đã được khai báo ở trên, và tất cả các hình ảnh của trang Web mặc định được lưu trữ tại thư mục này.
Refresh Local File List Automatically: When enabled, Dreamweaver automatically updates the file structure in the Local Folder of the Site Panel This update consumes some system resources, and you can trigger an on-demand refresh by choosing View → Refresh Local in the Site Window.
− HTTP Address: Nhập địa chỉ của site, Dreamweaver sẽ sử dụng địa chỉ này để quản lý site và liên kết các file trong site
"Enable Cache" khi được bật trong Dreamweaver sẽ tạo một file lưu trữ thông tin về liên kết giữa các file trong site, giúp quản lý liên kết nội bộ và tối ưu hóa quy trình làm việc với dự án Sau khi chọn xong, nhấn OK rồi chọn Done để hoàn tất việc tạo site mới Để đảm bảo website đã được tạo thành công, bạn nên kiểm tra website bằng cách mở site trong trình duyệt, rà soát cấu trúc thư mục và các liên kết giữa các trang, và xác nhận các chức năng hoạt động đúng như mong đợi.
Để mở Site Panel, hãy chọn Window → File để xem thư mục chứa site; nếu chưa có thư mục dành cho hình ảnh, bạn có thể nhấp chuột phải vào tên site và chọn New Folder, đặt tên thư mục là Images Trong một website, nên có hai thư mục chính: một thư mục HTML chứa các file htm và một thư mục Images chứa hình ảnh của trang web.
− Để mở rộng cửa sổ Site Panel→ click chọn nút Expand/Collapse d M ở m ộ t site có s ẳ n:
− Cách 1: Click vào menu hiển thị tên Site trên Toolbar của Site Panel, chọn tên Site muốn mở trong danh sách xổ xuống
− Cách 2: Chọn menu Site→ Manage Sites→ chọn tên Site muốn mở→ done e Hiệu chỉnh Site:
− Chọn menu Site→ Manage Sites
− Chọn tên Site cần hiệu chỉnh → Click nút Edit
− Xuất hiện hộp thoại Site Definition → thực hiện hiệu chỉnh → ok → done f Thuộc tính trang web
− Trong cửa sổ document, chọn Modify→ Page Properties, xuất hiện hộp thoại Page Propeties, chọn mục Appearance
− Text color : chọn màu cho text
− Background color: chọn màu nền cho trang
− Background Image: chọn tập tin ảnh làm nền bằng cách click nút Browse
Chọn tên site cần mở
3 THIẾT KẾ CÁC TRANG WEB ĐƠN
− Tại màn hình khởi động chọn mục Create new → chọn HTML
Document Window là khu vực thiết kế trình bày nội dung cho từng trang web riêng lẻ Sau khi hoàn tất thiết kế, mỗi trang được lưu dưới dạng tệp tin có phần mở rộng htm hoặc html và được đặt trong thư mục Local Root Folder đã khai báo, giúp quản lý và truy xuất dễ dàng cho toàn bộ trang web đơn.
4 TẠO LIÊN KẾT CÁC TRANG WEB ĐƠN THÀNH MỘT WEBSITE a) Cách tạo:
− Để tạo liên kết, cần phân biệt trang nguồn và trang đích
+ Trang nguồn là trang chứa các nút liên kết (có thể là đối tượng ảnh hoặc chữ)
+ Trang đích là trang cần liên kết đến
− Trong properties Inspector, tại mục link, thực hiện một trong hai cách sau:
+ Cách 1 : Click nút kéo mũi tên chỉ đến tên tập tin cần liên kết trong Site Panel
+ Cách 2 : Click nút mở hộp thoại Select File chọn tên site, tên trang web cần liên kết đến b) Xem k ế t qu ả b ằ ng trình duy ệ t và hi ệ u ch ỉ nh
− Chọn File/Preview in Browser/Iexplore
− Hoặc click nút Preview/Debug in Browser c) K ế t n ố i và đư a website lên Web server
Trước khi xuất bản website, cần sao lưu đầy đủ tất cả các tập tin để có bản sao dự phòng Xuất bản website là quá trình chép thư mục gốc (root) của site lên máy chủ của các nhà cung cấp dịch vụ Internet (ISP), nhằm đẩy nội dung lên online và cho phép người dùng truy cập từ internet Để tối ưu SEO, hãy tích hợp các từ khóa liên quan như sao lưu trước khi xuất bản, xuất bản website, root và máy chủ ISP, đồng thời đảm bảo cấu trúc tệp và phiên bản được quản lý chặt chẽ.
− Trong Deamweaver, xuất bản Website cần có bước kết nối với Server trước rồi mới Put File lên sau
+ Trong Site Panel, chọn Site cần xuất bản
+ Click nút Put Files, để đưa Site lên Server
Kết nối với Remote Site: Trong trường hợp tạo Site mới mà chưa xác định Remote Site (thư mục chứa Site trên Server), sau khi thực hiện Put File sẽ xuất hiện thông báo yêu cầu kết nối đến Remote Site, giúp bạn chỉ định đúng thư mục đích trên máy chủ và tiếp tục quá trình đồng bộ một cách trơn tru.
+ Chọn Yes, xuất hiện hộp thoại Site Definition
+ Chọn mục Remote Info, trong khung Access, chọn Local/Network (giả lập một thư mục trên mạng cục bộ, hoặc trên một thư mục khác của ổ đĩa cứng)
+ Tại mục Remote Folder, Click biểu tượng Folder, để tìm thư mục chứa Site d) Xu ấ t b ản Site lên Remote Site
− Trong Site Panel, chọn lại tên Site cần xuất bản
− Xuất hiện hộp thoại: Are you sure you wish to put the entire site?
− Xuất hiện hộp thoại kết nối, các tập tin và thư mục của Site lần lượt được chép từ site lên Remote Site e) Ki ể m tra l ạ i trên Remote Site
− Click nút Expand trong Site Panel: Màn hình chia làm 2 phần: Bên trái là Remote Site, bên phải là Local Site
ĐỊNH DẠNG VĂN BẢN - SỬ DỤNG CSS
ĐỊNH DẠNG VĂN BẢN
Cách nhập nội dung trong trình soạn thảo văn bản tương tự các công cụ văn phòng phổ biến: mỗi phần nội dung được phân tách bằng xuống dòng để bố cục rõ ràng Nếu bạn muốn xuống dòng trong cùng một đoạn, nhấn Shift + Enter; để bắt đầu một đoạn mới, nhấn Enter để ngắt đoạn.
− Để hiệu chỉnh văn bản thường sử dụng thanh công cụ Properties Inspector Cách tổng quát là đánh dấu khối văn bản → chọn kiểu định dạng
− Sử dụng thanh công cụ Properties Inspector:
− Cách 1: Tại mục format chọn các heading, đây là các định dạng mẫu, bao gồm Font chữ, kiểu chữ, size, thường dùng làm tiêu đề
To choose a font group, select the text and then pick the Font group from the Font menu in the Properties Inspector, or go to Text > Font In Dreamweaver, font styles are organized into groups, with each group containing multiple fonts, including a primary font and fallback fonts You can create custom font groups by selecting Font > Edit Font List.
− Chọn Font trong khung Availabel Fonts, Click nút đưa các font được chọn qua khung chosen fonts
• tạo thêm nhóm Font mới
• xóa nhóm ra khỏi Font List
• Sắp xếp các nhóm Font theo thứ tự a) Font size:
To adjust text size in Dreamweaver, select the text block or highlight the text, then choose the Size option in the Properties Inspector or go to Text → Size Dreamweaver offers 17 font sizes: eight numeric presets from 9 to 36 and nine named sizes represented by words, giving you flexible control over typography You can also set the font color to improve readability and visual contrast.
− Chọn khối văn bản, Click nút Text color, chọn màu hoặc chọn Text→ Color c) Canh l ề đ o ạn v ă n
− Chọn Text→ Align hoặc click công cụ
2 Danh sách dạng liệt kê
− Unordered List: Chèn Bulletted đầu dòng
− Ordered List: Đánh số thứ tựđầu dòng
HÌNH Ả NH VÀ HYPERLINK TRONG DW
CHÈN HÌNH Ả NH TRONG TRANG WEB
− Ảnh trong thư mục Images của Site:
▪ Đặt dấu nháy tại vị trí cần chèn ảnh
▪ Drag chuột kéo tập tin ảnh trong Site Panel thả vào trang
▪ Xuất hiện hộp thoại Select Image Source
▪ Chọn tập tin ảnh cần chèn -> OK
2 HIỆU CHỈNH THUỘC TÍNH CỦA ẢNH
▪ Image: Đặt tên cho ảnh
▪ W (Width), H (Height): Độ rộng và chiều cao của ảnh, tính bằng Pixel
▪ Src: đường dẫn tương đối đến tập tin ảnh
▪ Alt: câu thông báo xuất hiện trên trình duyệt khi rê chuột vào ảnh
▪ Link: Địa chỉ URL nơi cần liên kết đến
▪ Edit: Chuyển qua Macromedia Fire Works hiệu chỉnh ảnh
− Brightness/Contrast : Chỉnh độ sáng tối của ảnh
− Sharpen: Chỉnh độ sắc nét cho ảnh
− Resample: Lưu lại kích thước đãđiều chỉnh
− Optimize in Fireworks: chuyển qua Macromedia FireWorks để hiệu chỉnh
▪ Map: bảng đồ liên kếảnh
▪ Vspace, Hspace: Khoảng cách trên, dưới, trái, phải giữa phần nội dung văn bản đến ảnh
▪ Target: Khung chứa trang liên kết đến
▪ Low Src: tên tập tin ảnh phụ có độ phân giải thấp, làm ảnh thay thế khi chờ hiển thịảnh chính trên trình duyệt
▪ Align: Canh lề trái, phải, giữa
Trong thiết kế, khi chưa có ảnh trang trí phù hợp, ta có thể dự phòng bằng cách chèn trước một khung ảnh với kích thước xác định để giữ chỗ và bảo toàn bố cục Khung dự phòng giúp duy trì khoảng trống và định hướng cho phần hình ảnh, đồng thời cho phép thay thế bằng ảnh thực khi nguồn phù hợp xuất hiện Để tối ưu SEO và trải nghiệm người dùng, nên gắn mô tả thay thế (alt text) ngắn gọn liên quan đến nội dung và đảm bảo kích thước khung phù hợp với bố cục trang để tải nhanh và hiển thị đẹp trên mọi thiết bị.
▪ Chọn Insert→ Image Objects→ Image Placeholder
▪ Nhập tên, kích thước, màu cho khung ảnh
− Chèn ảnh vào khung ảnh:
▪ Double click vào khung cần chèn ảnh
▪ Xuất hiện hộp thoại Select Image Source, chọn tập tin ảnh cần chèn vào khung
4 INSERT RELLOVER IMAGE:CHÈN ẢNH KHI RÊ CHUỘT VÀO
− Insert→ Image Objects→ Rollover Image, xuất hiện hộp thoại Rolloveer Image
▪ Rollover Image : ảnh khi rê chuột vào
− Chọn tập tin kiểu swf
− Tại vị trí chèn xuất hiện biểu tượng Flash
− Hiệu chỉnh thuộc tính của Flash
▪ Flash: Tên đối tượng Flash
▪ W (Width) H (Height): Chiều rộng và chiều cao của ảnh Flash
▪ File: tên tập tin Shockware của Flash
▪ Src: tên tập tin gốc của Flash
▪ Edit: Hiệu chỉnh trong Macromedia Flash
▪ Reset size: trả về kích thước ban đầu
▪ Loop: Ảnh Flash lập vô tận
▪ AutoPlay: tự động diễn hoạt khi mở trang
▪ Vspace, Hspace: khoảng cách trên, dưới, trái, phải của đối tượng Flash đến văn bản
▪ Quality: chất lượng khi hiển thị
▪ Show All: hiển thị tất cảđối tượng trong khung
▪ No Border: không giới hạn trong khung viền
▪ Exact fit: vừa khít trong khung viền
▪ Bg: màu nền dướiảnh Flash
Ảnh nền nên lấp đầy trang web một cách hài hòa với bố cục và thương hiệu Khi thiết kế, hãy chọn nền sáng kết hợp chữ tối hoặc nền tối kết hợp chữ sáng để nội dung dễ đọc và tăng trải nghiệm người dùng Độ tương phản giữa nền và chữ là yếu tố chủ chốt ảnh hưởng đến khả năng đọc trên mọi thiết bị và cũng cải thiện SEO và khả năng tiếp cận Đồng thời tối ưu hóa kích thước và chất lượng ảnh nền để tải nhanh, kèm theo mô tả alt text ngắn gọn giúp công cụ tìm kiếm hiểu bối cảnh trang Tránh nền quá phức tạp hoặc quá tối khiến chữ bị mờ hoặc mất tập trung, và đảm bảo bố cục responsive trên điện thoại, máy tính bảng và máy tính để bàn.
Để tối ưu hiển thị, xác định kích thước ảnh nền phù hợp với từng loại nền Giữ dung lượng ảnh nền ở mức KB càng nhỏ sẽ giúp trang tải nhanh hơn và cải thiện trải nghiệm người dùng.
▪ Bacground Images: nhập đường dẫn đến tập tin ảnh làm nền
BẢ NG VÀ TRÌNH BÀY TRANG TRONG DW
TABLE
Tuỳ thuộc vào bố cục cụ thể, số dòng và số cột của bảng có thể khác nhau và mỗi dòng có số ô không đồng nhất Thông thường nên chọn dòng có ô lớn nhất làm chuẩn để kẻ bảng, nhằm đảm bảo cấu trúc bảng được căn chỉnh và nhất quán.
Để chèn bảng, chọn Insert/Table hoặc ấn trong nhóm Table; bạn có thể xác định số dòng (Rows) và số cột (Columns) cần chèn, rồi điều chỉnh Width để thiết lập chiều rộng bảng theo pixels hoặc theo phần trăm Border cho phép chỉnh độ dày của đường viền bảng, trong khi Cell padding xác định khoảng cách giữa nội dung ô và biên ô, và Cell Spacing quy định khoảng cách giữa các ô để bảng trông cân đối và dễ đọc.
2 HIỆU CHỈNH BẢNG a) Chèn thêm dòng, c ộ t vào b ả ng
▪ Định vị con trỏ ở ô cuối cùng trong bảng
▪ Ấn phím Tab để thêm dòng
▪ Ấn vào viền bảng, hay ấn thẻ chọn bảng
▪ Trong properties inspector nhập số dòng mới
− Chèn thêm cột vào bảng:
▪ Trong poperties inspector nhập số cột mới b) Xóa dòng, c ộ t, b ả ng
− Chọn thực đơn Edit/Cut (Ctrl+X) c) N ố i các ô trong b ả ng
− Modify→Table→ Merge Cells d) Tách các ô trong b ả ng
Split Cell into Columns: tách ô thành nhiều ô theo cột
Split Cell into Rows: tách ô thành nhiều ô theo dòng
Number of columns, Rows: xác định số ô cần tách theo cột, dòng
− Chọn table→ mở properties inspector
− Nhập giá trị mới trong Properties inspector
▪ W (width): chiều rộng theo điểm pixel, theo tỷ lệ màn hình
▪ H (hight): chiều cao mặc định, tùy vào nội dung
▪ Cellpad: khoảng cách văn bản đến ô trong bảng
▪ Cellspace: khoảng cách giữa các ô trong bảng
▪ Align: canh lề bảng, phải, trái, giữa
▪ Border: độ dày nét đường viền bảng
▪ Bg color: màu nền của bảng
▪ Bg image: ảnh nền bảng
▪ Brdr color: màu đường viền bảng
TRÌNH BÀY TRANG
1 LAYOUT TABLE VÀ LAYOUT CELL
Trình bày trang là một bước quan trọng nhất trong thiết kế web, đòi hỏi tính mỹ thuật và độ chính xác cao Macromedia Dreamweaver cung cấp các công cụ đắc lực để trình bày trang, trong đó hai thành phần chính là Layout Table và Layout Cell Layout Table cho phép bố trí khung trang một cách có cấu trúc và dễ quản lý, còn Layout Cell cho phép sắp xếp nội dung bên trong từng ô một cách linh hoạt, giúp tối ưu quá trình viết mã và hiển thị nội dung trên các trình duyệt khác nhau.
Layout table là một biến thể của thẻ table, được tối ưu để kiểm soát khung viền và khoảng cách giữa các ô cũng như giữa nội dung và viền ô Các tham số đi kèm phổ biến gồm border=0 để ẩn khung viền, cellspacing=0 để bỏ đi khoảng cách giữa các ô, và cellpadding=0 để bỏ đi khoảng cách giữa nội dung bên trong ô và viền ô, giúp bảng hiển thị gọn gàng, nhất quán và dễ tùy biến trên các giao diện khác nhau.
Layout table được dùng để phân vùng trang, giúp bố trí nội dung theo từng chủ đề đã được chuẩn bị trước Khi trang có nhiều nội dung thuộc các chủ đề khác nhau hoặc cần trình bày nội dung ở dạng cột báo chí, layout table cho phép bố cục trang một cách rõ ràng và nhất quán theo chủ đề đã lên kế hoạch.
− Layout Table dùng để bố cục trang, không dùng để chứa dữ liệu, viền khung của Layout Talble có màu xanh lá cây b) Layout cell:
Layout cell là thành phần nằm bên trong Layout table, dùng để chứa dữ liệu có thể là văn bản hoặc hình ảnh Khi thiết kế theo dạng layout, cần lưu ý các layout cell phải sát nhau để tránh bố cục bị rời rạc và mất thẩm mỹ Việc căn chỉnh kích thước và khoảng cách giữa các ô giúp bố cục hiển thị mạch lạc trên nhiều thiết bị, đồng thời cải thiện trải nghiệm người dùng và tối ưu SEO nhờ cấu trúc nội dung rõ ràng và dễ đọc.
− Một layout table có thể chứa nhiều layout table con Mỗi layout table gồm có nhiều dòng, mỗi dòng chứa nhiều Layout cell, số layout cell trên mỗi dòng có thể khác nhau c) Một số cách kết hợp Layout Table và Layout Cell:
− Vẽ một Layout Table có kích thước đầy trang, sau đó vẽ các Layout cell bên trong Layout Table theo đúng kích thước và yêu cầu của bố cục
Thiết kế web với nhiều Layout Table cùng cấp: ở trên là Layout Table chứa logo, banner và nút ngang; ở giữa là Layout Table trình bày nội dung văn bản và hình ảnh; ở dưới là Layout Table chứa địa chỉ liên hệ và số điện thoại.
Bạn có thể kết hợp cả hai cách trên bằng cách dùng layout bảng ngang: phần trên của Layout Table chứa logo, banner và các nút điều hướng nằm ngang, phần dưới của Layout Table được chia thành hai Layout Table con với một bên trái và một bên phải để bố trí nội dung thành hai cột rõ ràng và cân đối.
Khi vẽ một Layout Cell bên ngoài Layout Table, Dreamweaver tự động sinh một Layout Table chứa Layout Cell đó Ở chế độ Expanded Tables, Dreamweaver hiển thị khoảng cách từ nội dung trong ô tới đường viền của bảng, thuận tiện cho việc điều chỉnh độ rộng của ô.
2 THUỘC TÍNH CỦA LAYOUT TABLE VÀ LAYOUT CELL:
Bạn có thể điều chỉnh kích thước Layout Table bằng cách kéo các handle trên khung, nhưng nếu cần kích thước chính xác thì hãy nhập các tham số vào Properties Inspector của Layout Table Hiệu chỉnh thuộc tính của Layout Table giúp tối ưu hóa bố cục và đảm bảo hiển thị đúng trên mọi kích thước màn hình.
− Width: o Fixed: số Pixel xác định chiều rộng o AutoStretch: tự động kéo dãn ngang theo nội dung văn bản hoặc hình ảnh chèn vào Layout Table
− Height: xác định số Pixel chiều cao, nhỏ nhất là 19 Pixel
− Bg: màu nền của Layout Table
− CellPad: khoảng cách từ nội dung đến biên của Layout Table
− CellSpace: Khoảng cách giữa các Layout Cell
− Clear Row Height: tự động thay đổi chiều cao của dòng ít nhất là 19 pixel b) Xóa Layout Table:
− Chọn viền cho khung Layout Table hoặc click thẻ
− Nhấn Delete c) Hi ệ u ch ỉ nh thu ộ c tính c ủ a Layout Cell:
− Mở thanh Properties Inspector của Layout Cell
− Width: o Fixed: số Pixel xác định chiều rộng o AutoStretch: tự động kéo dãn ngang theo nội dung văn bản hoặc hình ảnh chèn vào Layout Cell
− Height: xác định số Pixel chiều cao, nhỏ nhất là 19 Pixel
− Bg: màu nền của Layout Cell
− Horz: Canh lề cho nội dung trong Layout Cell theo chiều dọc
No Wrap là tùy chọn cho Layout Cell liên quan đến cách trình bày văn bản Khi nội dung dài hơn kích thước của Layout Cell, chọn No Wrap sẽ làm văn bản không xuống dòng mà Layout Cell tự dãn ra theo nội dung, còn bỏ chọn sẽ khiến văn bản tự xuống dòng tại lề phải của Layout Cell.
− Di chuyển một Layout Cell: o Chọn Layout Cell (Ctrl+Click chuột vào Layout Cell) cần di chuyển o Drap chuột kéo đến vị trí mới
− Xóa một Layout Cell o Chọn Layout Cell cần xóa o Nhấn phím delete
− Layout là một thành phần mới trong thiết kế web, nó có thể chứa nội dung văn bản, hình ảnh xếp chồng lên nhau, nổi trên trang và chuyển động rất linh hoạt
− Layer thường được sử dụng để thiết kế trang có các hiệu ứng đặc biệt như chữ rơi, ảnh bay,
− Điểm bất lợi của Layer là không hiển thị trên các trình duyệt cũ IE4.0, Nestcape 4.0, đối với các trình duyệt mới thì Layer hiển thị một cách trung thực a) Cách t ạ o Layer trên trang:
Có thể tạo Layer bằng một trong các cách sau:
• Click nút Draw Layer, drag chuột vẽ Layer
Chọn menu Insert → Layout Objects → Add Hiệu chỉnh Layer: Chọn Layer, Layer được chọn sẽ xuất hiện 8 Handle xung quanh, khi đó ta thực hiện các thao tác hiệu chỉnh trên Layer đó Di chuyển Layer.
+ Chọn Layer cần di chuyển + Drag chuột kéo Layer đến vị trí mới
Hoặc nhập giá trị tọa độ trong Properties Inspector o Thay đổi kích thước của Layer:
+ Chọn Layer cần hiệu chỉnh kích thước + Click chuột vào một trong các Handle, Drag chuột để thay đổi kích thước
+ Hoặc nhập thông số trực tiếp vào Properties Inspector o Chèn nội dung vào Layer
Đối với nội dung văn bản, nhập trực tiếp vào Layer để hiển thị trên giao diện Đối với nội dung là hình ảnh, kéo thả từ thư mục Image vào Layer hoặc chọn Insert Image để chèn ảnh vào Layer Sau khi đã có nội dung ở các Layer, tiến hành xếp chồng các Layer theo thứ tự mong muốn để quản lý lớp và đạt được bố cục xuất bản đúng.
Khi cần hiển thị nhiều ảnh trên một trang mà không có đủ chỗ, ta có thể xếp chồng các ảnh lên nhau và cho chúng xuất hiện theo từng lớp một, hoặc để từng lớp bay ra khỏi màn hình Điều này có thể thực hiện được khi kết hợp Layer, Timeline và Behaviors, và việc quản lý thứ tự của các Layer sẽ giúp kiểm soát luồng hiển thị và hiệu ứng một cách mượt mà.
TEMPLATE
Template không chỉ cho phép tái sử dụng các thành phần dùng chung mà còn duy trì mối quan hệ giữa các thành phần trong một mẫu trang được thiết kế với bố cục sẵn Dựa vào một mẫu template, ta có thể nhanh chóng tạo nhiều trang có cùng bố cục thiết kế Khi thao tác với template, cần phân biệt rõ giữa trang mẫu và trang sử dụng template để đảm bảo tính nhất quán và hiệu quả cho quá trình phát triển web.
Trang mẫu template (.dwt) là một tập tin chứa thiết kế chuẩn cho một bố cục dùng chung Trang này có hai vùng chính: vùng được khóa và vùng không khóa, cho phép kiểm soát mức độ chỉnh sửa và duy trì sự nhất quán cho toàn bộ giao diện Việc sử dụng trang mẫu template giúp tiết kiệm thời gian làm việc, tăng tính đồng nhất trong dự án và dễ dàng tùy biến khi áp dụng cho nhiều trang hoặc dự án thiết kế.
Trang dùng template là một tập tin kiểu htm có bố cục giống trang mẫu template; người dùng chỉ được hiệu chỉnh và nhập nội dung mới cho các vùng không khóa Khi có sự thay đổi ở trang mẫu template, các vùng khóa trên các trang sử dụng template sẽ tự động cập nhật theo để đảm bảo tính nhất quán giữa các trang.
1 TẠO MỚI MỘT TEMPLATE: a) T ạ o trang template:
− Tạo mới một trang HTML template (mẫu) như một trang bình thường kẻ layout table, layout cell phù hợp, nhập nội dung, chèn hình cho các vùng dùng chung
− Lưu trang mẫu template : File → Save as template
Khi lưu trang dưới dạng template (.dwt), toàn bộ các vùng của template bị khóa theo mặc định Để chỉnh sửa các vùng không dùng chung, bạn cần mở khóa chúng để có thể tùy biến nội dung và tối ưu hóa khả năng tái sử dụng mẫu.
• Chọn vùng cần mở khóa
• Insert→ template objects→ Editable Region→ đặt tên cho vùng mở khóa
Các cách khác để t ạ o Template:
• Tạo template theo mẫu có sẵn:
• Chọn thực đơn File/New
• Chọn Page Designs/Text: Article D with Navigation
• Chọn Creat template b) T ạ o trang theo m ẫ u template:
− Trong hộp thoại New Document, chọn tab template
− Chọn mẫu template đã tạo sẵn → create
− Những vùng dùng chung sẽ bị khóa, khi thiết kế người dùng chỉ có thể thay đổi nội dung trong phần đãđược mở khóa
2 HIỆU CHỈNH TEMPLATE: a) Hi ệ u ch ỉ nh template:
− Mở template cần hiệu chỉnh
− Modify/template/Open Attached template
− Xuất hiện trang mẫu template, thực hiện hiệu chỉnh b) Đổ i tên template:
− Trong Asset Panel, nhóm template
− Chọn template cần đổi tên c) Xóa m ộ t template:
− Trong Asset panel, chọn nhóm template
Việc xóa một template sẽ ảnh hưởng đến tất cả các trang đang sử dụng template đó Nếu bạn thật sự muốn xóa, hãy mở trước các trang sử dụng template và chọn chức năng tách khỏi template để từng trang rời khỏi liên kết với template; thao tác này được gọi là "tách trang khỏi template" và sẽ giúp các trang hoạt động độc lập sau khi template bị xóa.
Modify/Template/Detach from template e) S ử d ụ ng Template cho trang:
Sau khi tạo được các trang mẫu template, ta có thể dễ dàng sử dụng chúng Áp dụng một mẫu template:
− File/New/HTML tạo trang mới
− Modify/Template/Apply template to page
− Nhập nội dung, hình ảnh vào những vùng không khóa
Ho ặ c th ự c hi ệ n cách khác:
− Mở Asset Panel, nhóm template
− Chọn trong danh sách các mẫu template
− Chọn nút Apply f) C ậ p nh ậ t trang s ử d ụ ng template
− Modify/Template/Update current page, cập nhật trang hiện hành
− Modify/Template/Update page/Entire site trong list box look in.