bÀi 1 bước đầu làm quen với adobe dreamweaver cs4 và những thao tác cơ bản trong...

BÀI 1BƯỚC ĐẦU LÀM QUEN VỚI ADOBE DREAMWEAVER CS4

VÀ NHỮNG THAO THÁC CƠ BẢN TRONG THIẾT KẾWEBSITE

MỤC TIÊU BÀI HỌC

Những khái niệm về website:Thành phần của trang webTên miền, địa chỉ IPClient – serverCông việc thiết kế website

Những kiến thức cơ bản về HTML & XHTMLLàm quen với Adobe Dreamweaver CS4Khởi tạo một trang web và làm việc với những thànhphần trên trang web: văn bản, hình ảnh

Những khái niệm về website:Thành phần của trang webTên miền, địa chỉ IPClient – serverCông việc thiết kế website

Những kiến thức cơ bản về HTML & XHTMLLàm quen với Adobe Dreamweaver CS4Khởi tạo một trang web và làm việc với những thànhphần trên trang web: văn bản, hình ảnh

Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 2

KHÁI NIỆM VỀ WEBSITE

KHÁI NIỆM VỀ WEBSITE

Tập hợp các trang web (webpages)

Chứa văn bản, đối tượng đồ họa (âmthanh, hình ảnh, …)

Được lưu trữ trên máy chủ web(web server)

Website


Được lưu trữ trên máy chủ web(web server)

Truy cập thông qua Internet và trìnhduyệt web (phần mềm ở client)

Website

THÀNH PHẦN CỦA TRANG WEB

Cách thức hiển thị trang web

Web Client(trình duyệt)Web Client

(trình duyệt) Web serverWeb serverHTML

URL

Máy chủ chứa web


Máy chủ chứa web

TÊN MIỀN, ĐỊA CHỈ IP

Mỗi một máy tính tham gia vào mạng máy tính đềuđược gán một địa chỉ IP. Các máy tính khác nhau sẽcó địa chỉ IP khác nhauCó 2 phiên bản địa chỉ IP: 32 bit và 64 bitTên miền là tên tương ứng với địa chỉ IPMáy chủ DNS là nơi thực hiện nhiệm vụ ánh xạ giữatên miền và địa chỉ IP

Mỗi một máy tính tham gia vào mạng máy tính đềuđược gán một địa chỉ IP. Các máy tính khác nhau sẽcó địa chỉ IP khác nhauCó 2 phiên bản địa chỉ IP: 32 bit và 64 bitTên miền là tên tương ứng với địa chỉ IPMáy chủ DNS là nơi thực hiện nhiệm vụ ánh xạ giữatên miền và địa chỉ IP


64.233.181.9964.233.181.99 www.google.comwww.google.comDNSDNS

Địa chỉ IP Tên miền

www.google.com

www.google.com

CLIENT – SERVER – WEB HOST

Client – Server là loại kiến trúc thông dụng chonhiều loại ứng dụng mạng, trong đó:

Server – máy chủ: Là máy tính chuyên cung cấp tài nguyên,dịch vụ cho máy tính khác. Một máy chủ có thể được dùngcho một hoặc nhiều mục đích khác nhau. Phải được duy trìkết nối internet 24h/ ngàyClient – máy trạm: Là máy tính khai thác các dịch vụ đượccung cấp bởi máy chủ. Việc khai thác này thường được thựchiện thông qua các phần mềm

Client – Server là loại kiến trúc thông dụng chonhiều loại ứng dụng mạng, trong đó:

Server – máy chủ: Là máy tính chuyên cung cấp tài nguyên,dịch vụ cho máy tính khác. Một máy chủ có thể được dùngcho một hoặc nhiều mục đích khác nhau. Phải được duy trìkết nối internet 24h/ ngàyClient – máy trạm: Là máy tính khai thác các dịch vụ đượccung cấp bởi máy chủ. Việc khai thác này thường được thựchiện thông qua các phần mềm


THIẾT KẾ WEBSITEXác định yêucầu & phân

tích

Tổ chức vàphác thảowebsite

Bảo trì

Thiết kếGraphic

Thiết kếHTML/ CSS/ Js

Viết mã lậptrình

Kiểm thử

Triển khai


Thiết kế website

THIẾT KẾ WEBSITE

Xác định yêu cầu và phân tích:Là quá trình thu thập và phân tích chi tiết tất cả cácyêu cầu liên quan đến website cần xây dựngMục tiêu là trả lời cho các câu hỏi sau:

• Mục đích của website là gì ?• Đối tượng sử dụng website ?• Website bao gồm các nội dung gì, liên kết giữa các nội

dung ra sao ?• Yêu cầu về hình thức cho website là gì ?• …

Đưa ra sitemap (cấu trúc website) cho toàn bộwebsite


Xác định yêu cầu và phân tích:Là quá trình thu thập và phân tích chi tiết tất cả cácyêu cầu liên quan đến website cần xây dựngMục tiêu là trả lời cho các câu hỏi sau:

• Mục đích của website là gì ?• Đối tượng sử dụng website ?• Website bao gồm các nội dung gì, liên kết giữa các nội

dung ra sao ?• Yêu cầu về hình thức cho website là gì ?• …

Đưa ra sitemap (cấu trúc website) cho toàn bộwebsite


Thiết kế Graphic:Thiết kế là quá trình xác định rõ về mặt nội dung vàhình thức cho websiteSản phẩm của quá trình thiết kế Graphic:

• Thiết kế dạng prototype (phác thảo) giao diện cho từngtrang web (mock-up)

• Thiết kế mịn giao diện từng trang web (photoshop,flash, firework, …)


Thiết kế Graphic:Thiết kế là quá trình xác định rõ về mặt nội dung vàhình thức cho websiteSản phẩm của quá trình thiết kế Graphic:

• Thiết kế dạng prototype (phác thảo) giao diện cho từngtrang web (mock-up)

• Thiết kế mịn giao diện từng trang web (photoshop,flash, firework, …)


Thiết kế HTML/ CSS/ Js:Đây là giai đoạn kết nối giữa giai đoạn thiết kế và giaiđoạn viết mã cho trang webSử dụng mã HTML/ CSS/ Js … để chuyển giao diệngraphic của web sang dạng chuẩn HTMLThực hiện đúng chuẩn trong bản thiết kế: kích thướcweb, khoảng cách các thành phần trên trang web,hình ảnh, …Chạy trên trình duyệt


Thiết kế HTML/ CSS/ Js:Đây là giai đoạn kết nối giữa giai đoạn thiết kế và giaiđoạn viết mã cho trang webSử dụng mã HTML/ CSS/ Js … để chuyển giao diệngraphic của web sang dạng chuẩn HTMLThực hiện đúng chuẩn trong bản thiết kế: kích thướcweb, khoảng cách các thành phần trên trang web,hình ảnh, …Chạy trên trình duyệt


Viết mã lập trình:Sử dụng các công cụ hỗ trợ và ngôn ngữ lập trình đểtạo ra website theo như thiết kế



Kiểm thử:Là quá trình kiểm tra tính năng, nội dung và giao diệncủa các trang Web dựa trên các yêu cầu đã đượcphân tích ở bước đầu tiênViệc kiểm thử cần được thực hiện trên nhiều trìnhduyệt web khác nhau, nhiều loại mạng khác nhau


Kiểm thử:Là quá trình kiểm tra tính năng, nội dung và giao diệncủa các trang Web dựa trên các yêu cầu đã đượcphân tích ở bước đầu tiênViệc kiểm thử cần được thực hiện trên nhiều trìnhduyệt web khác nhau, nhiều loại mạng khác nhau


Triển khai và bảo trì:Triển khai là quá trình đưa website lên một Webserver cụ thể nào đó trên mạngBảo trì là công việc duy trì cập nhật nội dung/hìnhthức của trang web


Triển khai và bảo trì:Triển khai là quá trình đưa website lên một Webserver cụ thể nào đó trên mạngBảo trì là công việc duy trì cập nhật nội dung/hìnhthức của trang web


Công cụ thiết kế website:Là các phần mềm hỗ trợ việc thiết kế website (giaodiện hình ảnh, mã)Bao gồm các tính năng sau:

• Soạn thảo HTML• Tạo giao diện trang Web theo kiểu WYSIWYG• Chạy Website trên máy cục bộ

Các công cụ thông dụng:• Adobe Dreamweaver• PHPEditor• Microsoft FrontPage


Công cụ thiết kế website:Là các phần mềm hỗ trợ việc thiết kế website (giaodiện hình ảnh, mã)Bao gồm các tính năng sau:

• Soạn thảo HTML• Tạo giao diện trang Web theo kiểu WYSIWYG• Chạy Website trên máy cục bộ

Các công cụ thông dụng:• Adobe Dreamweaver• PHPEditor• Microsoft FrontPage

HTML & XHTML

HTML

Là ngôn ngữ đánh dấu siêu văn bản (HyperTextMarkup Language)Là cơ sở hoạt động của webTrang web được xây dựng bằng mã HTMLTrình duyệt đọc và xử lý mã HTML để bố cục vàđịnh dạng cho các thành phần (văn bản, hình ảnh,video, …) trên trang webTạo và chỉnh sửa HTML bằng các công cụ soạn thảovăn bản:

NotepadTextEdit….

Là ngôn ngữ đánh dấu siêu văn bản (HyperTextMarkup Language)Là cơ sở hoạt động của webTrang web được xây dựng bằng mã HTMLTrình duyệt đọc và xử lý mã HTML để bố cục vàđịnh dạng cho các thành phần (văn bản, hình ảnh,video, …) trên trang webTạo và chỉnh sửa HTML bằng các công cụ soạn thảovăn bản:

NotepadTextEdit….


HTML

Cấu trúc thẻ & thuộc tínhHTML sử dụng thẻ hoặc từ khóa (đặt trong dấu < và>)Thẻ mở kèm theo thẻ đóng: <body>…</body>Thẻ đóng: <br />


File BasicHTML.html trongthư mục dw01lessons

Mã HTML

Kết quả hiển thị

HTML

Cấu trúc trang HTML:

<html ><head><title>tiêu đề website</title></head>

<body>Văn bản và hình ảnh sẽ nằm ở đây …

</body></html>

Phần mô tả


<html ><head><title>tiêu đề website</title></head>

<body>Văn bản và hình ảnh sẽ nằm ở đây …

</body></html>

Phần nội dung

HTML

Phân cấp thẻ trong HTML:Thẻ HTML tuân theo thứ tự phân cấp thẻ<html>các thẻ khác nằm dưới</html><body>các thẻ nhỏ hơn</body>


<p><strong>Big bold paragraph</strong></p>

Thẻ <strong> phân cấp thấp hơn thẻ <p>

XHTML

XHTML 1.0 là phiên bản mới nhất của HTMLLà phiên bản chặt chẽ hơn so với HTML, khiến HTMLtương thích hơn với các nền tảng mới (thiết bị diđộng)Là sự kết hợp giữa các thành phần HTML và ngônngữ mô tả dữ liệu XML (eXtensible MarkupLanguage – Ngôn ngữ đánh dấu mở rộng)

XHTML 1.0 là phiên bản mới nhất của HTMLLà phiên bản chặt chẽ hơn so với HTML, khiến HTMLtương thích hơn với các nền tảng mới (thiết bị diđộng)Là sự kết hợp giữa các thành phần HTML và ngônngữ mô tả dữ liệu XML (eXtensible MarkupLanguage – Ngôn ngữ đánh dấu mở rộng)


XHTML

Tạo web sử dụng chuẩn XHTML:

Dreamweaver mặc định sẽ tạo ra trang web sử dụngchuẩn XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Tạo web sử dụng chuẩn XHTML:

Dreamweaver mặc định sẽ tạo ra trang web sử dụngchuẩn XHTML 1.0 Transitional


HTML XHTML

Cấu trúc ngôn ngữ chặt chẽ hơn

Cẩu thả trong việc viết mã lòng & đóngthẻ

Tất cả các thẻ đều phải có thẻ đóng vàphải lồng các thẻ đúng theo phân cấp

Không phân việt kiểu chữ hoa/ thường Phải sử dụng kiểu chữ thường khi tạo thẻ

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

ADOBE DREAMWEAVER CS4


Là công cụ thiết kế, soạn thảo mã trang webCác tính năng chính:

Cung cấp rất nhiều tính năng thiết kế giao diện vàđịnh dạng trang webHỗ trợ quản lý site và FTPCung cấp môi trường để code và soạn thảo

Là công cụ thiết kế, soạn thảo mã trang webCác tính năng chính:

Cung cấp rất nhiều tính năng thiết kế giao diện vàđịnh dạng trang webHỗ trợ quản lý site và FTPCung cấp môi trường để code và soạn thảo



Menu Nút hiển thị chế độlàm việc

Vùng làmviệc Bảng làm việc


Bảng PROPERTIES


Cửa sổ tạo file mới: File > New

Tùy chọn để lựachọn loại trang

muốn tạo


Tùy chọn để lựachọn bố cục cho

trang


Chức năng tổng quát:Hỗ trợ 3 chế độ hiển thị: Design, Code và SplitTích hợp sẵn FTPCho phép thêm các đối tượng vào trang web/code từInsert PanelDễ dàng thay đổi layout của màn hình làm việcCó nhiều công cụ trực quan mạnhHỗ trợ CSS thông qua CSS panel

Chức năng tổng quát:Hỗ trợ 3 chế độ hiển thị: Design, Code và SplitTích hợp sẵn FTPCho phép thêm các đối tượng vào trang web/code từInsert PanelDễ dàng thay đổi layout của màn hình làm việcCó nhiều công cụ trực quan mạnhHỗ trợ CSS thông qua CSS panel



Tính năng mới của phiên bản CS4:1. Live view2. Cải thiện về CSS3. Tập hợp các dữ liệu cho HTML4. Code navigator

1

3Tính năng mới của phiên bản CS4:1. Live view2. Cải thiện về CSS3. Tập hợp các dữ liệu cho HTML4. Code navigator


1

2

KHỞI TẠO TRANG WEB


Cách khởi tạo trang web trong Dreamweaver:Sử dụng tính năng Site Definition: Site > New SiteSử dụng hộp thoại Manage Sites

Sử dụng tính năng Site Definition thực hiện các côngviệc:

Định nghĩa siteĐặt tên siteĐịnh nghĩa thư mục gốc cục bộLàm việc với thiết lập nâng caoLưu site

Cách khởi tạo trang web trong Dreamweaver:Sử dụng tính năng Site Definition: Site > New SiteSử dụng hộp thoại Manage Sites

Sử dụng tính năng Site Definition thực hiện các côngviệc:

Định nghĩa siteĐặt tên siteĐịnh nghĩa thư mục gốc cục bộLàm việc với thiết lập nâng caoLưu site



Site > New Site:

Đặt tên cho website


Có thể nhập địa chỉ httpcho web nếu đang làmviệc trực tiếp trên webserver


Chọn No nếu không sử dụngmôi trường server

Chọn thư mục chứa cácfile của trang web


Chọn thư mục chứa cácfile của trang web



Chọn None cho tùy chọn kết nối từ xa(không phải làm việc qua server)


Tùy chọn nâng cao khi định nghĩa website


tùy chọn thiết lậpkhả năng trình bày,hợp tác và triểnkhai:

Tính năng kiểm tra liên kết có phân biệtchữ hoa/ thường


Kết quả hiển thị trên bảng Files



Định nghĩa thuộc tính trang:Modify > Page Properties (Ctrl + J)



Appearance (CSS): tự động tạo CSS định nghĩa hìnhthức trangAppearance (HTML): không linh hoạt bằng việc sửdụng CSSLinks (CSS): định nghĩa hình thức liên kết trên trangHeadings (CSS): định nghĩa thuộc tính của đề mụcTitle/ Encoding: hiện thêm các thiết lập

Appearance (CSS): tự động tạo CSS định nghĩa hìnhthức trangAppearance (HTML): không linh hoạt bằng việc sửdụng CSSLinks (CSS): định nghĩa hình thức liên kết trên trangHeadings (CSS): định nghĩa thuộc tính của đề mụcTitle/ Encoding: hiện thêm các thiết lập


LÀM VIỆC VỚI THÀNH PHẦN VĂN BẢN,HÌNH ẢNH TRÊN WEB

LÀM VIỆC VỚI VĂN BẢN

Các định dạng cho từng kiểu tiêu đề

HTML tương ứng:

<h1>OrganicUtopia Events</h1>



Sử dụng CSS để định dạng văn bản

HTML tương ứng:

h1{font-family: Arial, Helvetica, sans-serif;color: #9C3;}


HTML tương ứng:

h1{font-family: Arial, Helvetica, sans-serif;color: #9C3;}


Tạo danh sách (list):List là cách hữu ích trình bày thông tin cho người độcvà không có những ràng buộc hình thức của mộtđoạn vănRất quan trọng trên webGiúp người duyệt web nắm được thông tin một cáchdễ dàng nhất


Tạo danh sách (list):List là cách hữu ích trình bày thông tin cho người độcvà không có những ràng buộc hình thức của mộtđoạn vănRất quan trọng trên webGiúp người duyệt web nắm được thông tin một cáchdễ dàng nhất


Tạo danh sách (list):



Bảng Text Insert

Định dạng tiêu đề

Định dạng kiểu dáng cho chữ


Định dạng tiêu đề

Tạo list

Tạo các ký tự đặc biệt

LÀM VIỆC VỚI HÌNH ẢNH

Chèn hình ảnh vào trang web:Insert > Image



Liên kết hình ảnh:liên kết những hình ảnh thu nhỏ tới những hình ảnhlớn hơn



Sử dụng ảnh giữ chỗ:Insert > Image Objects > Image Placeholder


TỔNG KẾT

Trang web là một trang nội dung, có thể chứa: kýtự, hình ảnh, âm thanh, flash và các đối tượng đồhọa khác. Hầu hết các trang web được trình bàydựa trên chuẩn HTMLHTML là ngôn ngữ đánh dấu siêu văn bản(HyperText Markup Language), là cơ sở của trangwebXHTML là sự kết hợp giữa các thành phần HTML vàngôn ngữ mô tả dữ liệu XML (eXtensible MarkupLanguage – Ngôn ngữ đánh dấu mở rộng)Khi thiết kế website, nên bắt đầu bằng việc tạo mộtsite tương ứng với nó trước

Trang web là một trang nội dung, có thể chứa: kýtự, hình ảnh, âm thanh, flash và các đối tượng đồhọa khác. Hầu hết các trang web được trình bàydựa trên chuẩn HTMLHTML là ngôn ngữ đánh dấu siêu văn bản(HyperText Markup Language), là cơ sở của trangwebXHTML là sự kết hợp giữa các thành phần HTML vàngôn ngữ mô tả dữ liệu XML (eXtensible MarkupLanguage – Ngôn ngữ đánh dấu mở rộng)Khi thiết kế website, nên bắt đầu bằng việc tạo mộtsite tương ứng với nó trước


bÀi 1 bước đầu làm quen với adobe dreamweaver cs4 và những thao tác cơ bản trong...

Documents