Session 01

CHƯƠNG 1

GIỚI THIỆU

Mục tiêu: Vào cuối chương này, các bạn sẽ có thể:  Định nghĩa web là gì?  Giải thích Dreamweaver hữu dụng như thế nào trong việc tạo ra những web site.  Giải thích những khái niệm liên quan đến Dreamweaver.  Thao tác với giao diện của Dreamweaver.  Áp dụng thuộc tính của trang. 1.1

Giới thiệu:

Tất cả chúng ta đều có quan điểm riêng của mình về nhiều điều trong cuộc sống, và thiết kế web thì không khác bất cứ chủ đề nào khác. Những gì mà một người thích thì không bảo đảm được sự ủng hộ của tất cả mọi người trên thế giới. Một website thành công sẽ chuyển tải thông tin mà một người dùng đang tìm kiếm trong một định dạng dễ sử dụng. 1.1.1

Điểm vào

Điểm vào là điểm vào đầu tiên của một site , mà từ nơi đó nguời dùng có thể vào site.Nó có thể là nút Enter hoặc nút Welcome. Điểm này được dùng để hướng dẫn người dùng đến những điểm hành động của site. Từ đây bạn muốn hướng người dùng đến những khu vực liên quan khác. 1.1.2

Điểm hành động

Đây là những khu vực mà người dùng sẽ đến để biết những khu vực khác nhau của site nơi mà từ đó anh ta sẽ tương tác với site, hoặc sẽ thu được những thông tin mong muốn. Để tìm ra những điểm hành động trên site của bạn là gì, hãy hỏi chính bản thân bạn là bạn muốn các người dùng làm gì khi thăm site của bạn và bạn hãy sắp xếp những điều đó theo thứ tự ưu tiên. Hầu như bạn sẽ có một số điểm hành động trên site của bạn. Ví dụ, nếu một người dùng đã vào site mua sắm và muốn khám phá nhiều vùng trong đó, thì tất cả các đường liên kết(link) được xem như là các điểm hành động. 1.1.3

Điểm thoát

Điểm thoát là khu vực mà các người dùng thường rời khỏi site của bạn. Ví dụ, trong một site mua sắm, nếu người dùng đang tìm kiếm đồng hồ đeo tay, anh ta sẽ chỉ tìm kiếm nó hoặc mua nó, xem qua các loại đồng hồ khác và ra khỏi site. Nó sẽ là điểm thoát của người dùng đó. Nhưng bởi vì anh ta đến để mua đồng hồ, và chúng ta muốn anh ta xem qua các sản phẩm khác nữa, đây là một cơ hội tuyệt vời để đặt những biểu ngữ quảng cáo hoặc các đường link tới những điểm hành động khác. Nếu điều này thực hiện thành công, bạn sẽ có khả năng điều khiển người dùng từ điểm này sang điểm khác trong site của bạn, và giữ sự chú ý của họ bằng cách đưa ra các thông tin hữu ích có liên quan. Vì thế việc nhận ra những điểm thoát là quan trọng. Khi bạn biết nơi mà các người dùng sắp thoát ra, bạn có thể cung cấp những đường liên kết đến những điểm hành động khác để giữ họ ở lại website của bạn.

1

Dreamweaver

Chú ý: Xin nhớ rằng, trên tất cả các điều khác, hãy nghĩ như thể bạn là một người dùng. Không kể số lượng của flash hoặc style nào có thể cứu được site của bạn nếu một người dùng không thể tìm thấy những gì họ muốn. 1.1.4

Những chỉ dẫn quan trọng cho việc thiết kế một Website tốt

Cách bố trí và thiết kế site là chủ quan nhưng điều khách quan của site là cộng đồng và đó là điều mà người dùng nên lấy thông tin chính xác về những gì anh ta đang tìm kiếm. Site của bạn và những sở thích của bạn sẽ quyết định site trông như thế nào và nó được hiển thị ra sao. Nhưng có vài chỉ dẫn mà bạn không nên bỏ qua.

 Nhận biết độc giả của bạn: Độc giả của bạn hay người dùng đóng vai trò quan trọng nhất khi site được tải lên(upload). Thúc đẩy độc giả của bạn: đối xử với họ với lòng tôn trọng và cung cấp những cơ hội phản hồi(feedback) , thiết lập những mục tiêu webite rõ ràng, vừa phải hoặc mục đích thiết kế, chấp nhận những phản ứng, sự cố gắng và thành công, có trợ giúp xây dựng sẵn cho các trục trặc có thể xảy ra để đạt được những điều mong đợi.  Nội dung: Bất kể công việc của bạn là gì, nội dung của site của bạn là những gì mà mọi người dùng sẽ tìm kiếm. Nó có thể được đặt trong một sự trình bày đồ họa tuyệt vời, nhưng nếu nội dung không có liên quan và không cung cấp thông tin thì lần thăm viếng đầu tiên của họ giống như lần tham quan cuối cùng. Ngôn ngữ nên đơn giản và dễ hiểu đối với độc giả quốc tế.  Điều hướng: Khi người dùng vào site, anh ta nên thấy nó đơn giản, rõ ràng và có thể thấy bản đồ của toàn site ngay lập tức nếu cần.  Từ khóa: Một site chỉ có thể thành công khi mà người dùng có thể tìm thấy nó dễ dàng trong một máy tìm kiếm(search engine - hay còn gọi là công cụ tìm kiếm). Để có một thứ hạng tốt trong các máy tìm kiếm, hãy bảo đảm rằng bạn phát triển một danh sách những từ khóa mà chúng bao gồm trong các trang của bạn. Điều này sẽ cải thiện của bạn thứ hạng trong máy tìm kiếm.  Tốc dộ Download: Site download càng nhanh thì càng tốt cho người dùng nhìn thấy dữ liệu. Mục đích của chúng ta là có những site tải càng nhanh càng tốt dùng 1 modem dialup tiêu chuẩn 33K-nếu 1 site tải tốt ở tốc độ này, nó sẽ chạy tốt trên sự kết nối nhanh hơn.Với băng tần (Broadband) trở nên rộng hơn, sự lôi cuốn bắt đầu thêm nhiều đồ họa và những hình ảnh lớn hơn.  Tương thích với các trình duyệt (Browser): Đây là vùng giới hạn nhất. Có những phiên bản khác nhau của trình duyệt mà nó có thể hiển thị site một cách khác nhau và thậm chí làm cho mã (code) bị lỗi hoàn toàn. Với script từ phía client, sẽ có những bản tương thích cần lấy ra.Ở mức tối thiểu, tất cả các site mà chúng ta thiết kế tương thích với Microsoft Explorer 4 & những phiên bản mới hơn.Trong hầu hết các trường hợp, chúng hoạt động một cách hoàn hảo trên Netscape V6 & những phiên bản mới hơn. 1.1.5

2

Thuật ngữ cơ bản

Introduction

Bạn sẽ muốn trở nên thoải mái với những thuật ngữ web phổ biến, hiểu được sự khác nhau giữa Internet & World Wide Web, HTML là gì và, nó hoạt động với một trình duyệt web(Web Browser) như thế nào để hiển thị những trang web.  Website là gì: Một website là một tập hợp những trang web có liên quan trên World Wide Web.  Trang web là gì: Hãy nghĩ về trang web như là những file riêng lẻ trên World Wide Web (www). Các trang web có thể có chiều dài bất kỳ và cũng có thể chứa văn bản được định dạng, đồ họa, đa phương tiện(multimedia), siêu liên kết (hyperlinks), biểu mẫu(forms), và các bảng.  HTML: HTML viết tắt của Hyper Text Markup Language. Ðịnh dạng được dùng cho việc viết các tài liệu sẽ được xem với một trình duyệt web. Các mục trong tài liệu có thể là văn bản, hình ảnh, âm thanh và các đường liên kết đến những tài liệu HTML khác, hoặc những site, những dịch vụ và những nguồn tài nguyên trên Internet. Trong khi bạn có thể sử dụng một công cụ biên tập web như Macromedia Dreamweaver để gõ, định dạng và chèn các đối tượng lên trên một trang web, giống như việc tạo ra một tài liệu Word, thì chương trình cũng tạo ra mã HTML kết hợp mà sẽ cho phép một trình duyệt hiển thị trang web tới người dùng ngay khi có thể với những gì bạn thấy khi bạn thiết kế nó. 1.2

Giới thiệu vai trò của Dreamweaver trong Website Project

Macromedia Dreamweaver MX là một trình soạn thảo HTML chuyên nghiệp cho việc thiết kế, viết mã, và phát triển những website, những trang web, và những ứng dụng web mạnh. Dreamweaver MX có thể kiểm soát mã HTML viết bằng tay như một môi trường soạn thảo trực quan. Dreamweaver cung cấp cho chúng ta những công cụ hữu ích để nâng cao kỹ năng xây dựng web. Dreamweaver là 1 trình soạn thảo HTML (Hyper Text Markup Language) WYSIWYG (Những gì bạn thấy là những gì bạn có được) cho phép bạn tạo ra những trang web & những web site dễ dàng và nhanh chóng. Nó làm việc cùng với những sản phẩm Macromedia khác để đưa lại cho người dùng đầy đủ các chức năng tạo trang. Chúng ta sẽ sử dụng tất cả các đặc điểm tiêu chuẩn và cao cấp của Dreamweaver trong môn học này, những cái mà làm cho việc bố trí các thành phần trên các trang web trở nên dễ dàng, và thực hiện những chức năng đồ họa cao cấp. Dreamweaver đưa lại cho người dùng chọn lựa việc sử dụng bố trí ô hay khung. Sử dụng khung( frame ) có nghĩa là mỗi đoạn khác nhau của mỗi trang thực tế là 1 trang web riêng lẻ, mỗi trang có URL của riêng nó. Việc dùng bảng là để cung cấp thông tin được tổ chức trên 1 trang đơn. Ngoài ra, Dreamweaver MX cung cấp thiết lập FTP dễ dàng cho việc chuyển những file web giữa máy tính của bạn và máy chủ(web server). Ngay khi nó được thiết lập, bạn có thể chuyển các files bằng việc click vào một nút. Dreamweaver MX có thể được dùng để kết hợp đồ họa, hoạt ảnh, và các nút từ các phần mềm như Photoshop, Image ready, và Flash. Các hình ảnh, biểu ngữ, và nút thường được tạo ra sử dùng các phần mềm này và chúng được hợp nhất trong Dreamweaver bằng việc sắp đặt chính xác và mã nguồn HTML sẽ được sinh ra tự động.

Dreamweaver

3

Dreamweaver

Dreamweaver cũng được dùng để tạo ra văn bản, đặt các đường liên kết đến các trang web.chèn các nút cuộn(rollover button), tạo ra những văn bản nhấp nháy(flash text), những nút flash và quan trọng nhất là tạo ra một site cục bộ mà có thể tải lên trên web server. 1.3

Những khái niệm về Dreamweaver

Có nhiều khái niệm quan trọng mà bạn phải hiểu khi thiết kế 1 web site. Chúng ta hãy tìm hiểu những khái niệm quan trọng đó. 1.3.1

Web Site tĩnh

 Một web site tĩnh có nghĩa là những trang của web site đó không linh hoạt hoặc là không thay đổi trừ khi chúng được viết lại.  Trong một site tĩnh, nếu nội dung bị thay đổi, nhà thiết kế phải vào trong nội dung và thay đổi nó "bằng tay".  Một site tĩnh thì rẻ hơn nhiều để phát triển, nhưng mà tốn nhiều chi phí hơn để duy trì khi nội dung là chủ đề để thay đổi trên cơ sở hàng tháng hoặc hàng tuần. 1.3.2

Web Site động

 Với một trang web động, nội dung sẽ bị thay đổi mỗi lần dữ liệu trong cơ sở dữ liệu hoặc nguồn khác thay đổi. Điều này có thể thực hiện bằng tay hoặc tự động.  Trong một site động, nó có thể được tự động hóa. 1.3.3

Site cục bộ

 Khi lần đầu dùng Dreamweaver trước tiên bạn phải "định rõ" "site cục bộ" của bạn. Site cục bộ có nghĩa là nơi trên PC mà các file web & các tài liệu được trữ.  Các file trên đĩa cục bộ thì tương ứng với các file ở site xa.Chúng ta soạn thảo các file trên đĩa cục bộ của chúng ta, và sau đó tải chúng lên site ở xa.  Bạn sẽ cần định rõ một site cục bộ cho mỗi website hoặc mỗi web section (khu vực web) mà bạn đang làm việc trên đó. 1.3.4

Remote Site

 Site từ xa là một site trên web server của bạn.

 Trước khi thiết lập một remote site thì cần thiết tạo ra một site cục bộ ( nơi mà sau đó bạn sẽ liên kết với remote site ).

 Sau khi bạn đã thiết lập một remote site, bạn có thể tải các files lên nó, hoặc là download các file từ nó nếu có sẵn các file trên site. 1.3.5

4

Folder gốc

Introduction

 Vùng lưu trữ cục bộ cho các file của website của bạn đòi hỏi một cái tên và một thu mục gốc cục bộ nơi mà bạn dự kiến lưu trữ tất cả các file của site.  Thu mục gốc cục bộ của site của bạn nên được thiết lập một cách đặc biệt cho site đó.  Đừng nên sử dụng đĩa cứng của bạn như là site root  Không nên sử dụng thư mục ứng dụng của Dreamweaver. 1.4

Giao diện

Khi bạn bắt đầu làm việc với Dreamweaver lần đầu tiên, bạn sẽ được yêu cầu chọn sự bố trí vùng làm việc(workspace layout). Khi chọn một vùng làm việc, bạn có 3 lựa chọn khác nhau: vùng làm việc Dreamweaver MX, vùng làm việc Dreamweaver MX với Home site/Coder-style, và vùng làm việc của Dreamwever 4.

Hình 1.1: Giao diện Dreamweaver MX Đây là trang web trống của bạn, đang đợi bạn bắt đầu thêm những phần tử như hình,văn bản,vv... 1.4.1

Thanh chèn (Insert Bar)

Cái cửa sổ ở trên đỉnh bên trái của màn hình của bạn thì được gọi là Insert Bar. Insert Bar chứa tất cả các nút để có thể chèn các đối tượng như bảng, tầng, và đồ họa vào trong những trang HTML( Ngôn ngữ đánh dấu siêu văn bản) của chúng ta.Ngay khi được chèn vào trong trang, mỗi đối tượng có thể được sửa đổi thêm bằng cách dùng Property Inspector.

Dreamweaver

5

Dreamweaver

Hình 1.2: Insert Bar với Common Tab được kích hoạt Common tab trên Insert bar cho phép bạn chèn các đối tượng được sử dụng phổ biến nhất.Nếu Insert bar không nhìn thấy, bạn chọn Window--> Insert và nó sẽ xuất hiện. Common tab chứa đựng các nút để chèn các liên kết, bảng , hình ảnh, thước ngang, vv...

Hình 1.3: Lệnh Insert trên Window Menu Có nhiều tab khác nhau để chèn những đối tượng khác nhau. Ví dụ, với Common tab chúng ta có thể chèn các đối tượng được sử dụng phổ biến nhất như là Hyperlink (siêu liên kết), hình ảnh, hình ảnh lăn, thước ngang, vân vân. Nếu có yêu cầu, bạn có thể bố trí lại vị trí của Insert bar để nó nằm ở góc trên bên trái của màn hình của bạn. 1.4.2

Properties Inspector

Tất cả mọi thứ mà chúng ta chèn vào trong 1 trang - bao gồm văn bản, đồ họa, bảng, và các đường ngang- được xem như là một đối tượng(object) có những thuộc tính(properties) nhất định . Cửa sổ ở góc dưới bên trái màn hình của bạn được gọi là Properties Inspector. Property Inspector được dùng để chỉ định các thuộc tính cho văn bản, đoạn văn, hình ảnh, vân vân.

6

Introduction

Hình 1.4: Properties Inspector Thông thường, Property Inspector sẽ có 1 mũi tên nhỏ ở góc dưới bên phải, chỉ ra rằng có thêm nhiều sự chọn lựa nữa. Nếu chúng ta click lên mũi tên, chúng ta có thể thấy những chọn lựa đó.

1.4.3

Panel

Giống như một thanh công cụ, một panel là một khu vực mà ngoài những nút và những trình đơn bật lên(popup menus), nó còn có thể chứa đựng các trường mà trong đó những giá trị thuộc tính khác nhau có thể được thiết lập.

Hình 1.5: Panel của Code Commands 1.4.4

Nhóm Panel

Nó được đặt bên tay phải của màn hình. Nhóm panel là một cửa sổ tab và chúng ta có thể click vào bất kỳ ô cửa tab nào để áp dụng các hiệu ứng. Đây là những bộ panel có liên quan được gắn

Dreamweaver

7

Dreamweaver

cùng nhau dưới một tiêu đề. Bất kỳ tính năng nào của panel mà được liệt kê trong menu Window (trừ panel Insert & Properties) thì có thể được nhóm chung với nhau.

Hình 1.6: Nhóm các Panel được gắn cùng nhau.

1. Để đặt panel vào một nhóm mới, click chuột phải vào tên của panel và chọn Group with  New Panel Group và panel sẽ thuộc vào nhóm của nó.

2. Để đặt panel vào một nhóm khác, click chuột phải vào tên của panel và chọn Group with, và chọn nhóm panel bạn muốn.

3. Để ẩn đi tất cả các panel, chọn Window  Hide Panels, hoặc nhấn phím F4. 1.5

Thuộc tính của trang (Page Properties)

Tùy chọn Page Properties bao gồm màu của trang, tiêu đề trang, hình nền, vân vân. Khi bạn mở Dreamweaver, nó sẽ tự động đưa ra cho bạn một trang trống không có tiêu đề(xem hình 1.1) Để truy cập hộp hội thoại Page Properties, bạn có 3 sự lựa chọn: 1. Bạn có thể click phải bất cứ đâu trên trang trống và chọn Page Properties.

8

Introduction

2. Bạn có thể đi đến menu Modify và chọn lựa chọn đầu tiên, Page Properties. 3. Bạn có thể nhấn ‘CTRL + J’ trên bàn phím.

Hình 1.7: Hộp thoại Page Properties

 Title: Đây là cái tên sẽ xuất hiện trên thanh menu của trình duyệt( browser), xin đừng nhầm lẫn tên này với tên file của trang.

 Background image: Bạn có thể chỉ định một hình được xếp kề (lặp lại) cho nền của trang.  Background: Nếu bạn không muốn sử dụng một hình cho nền của trang của bạn, bạn có thể đơn giản là gán 1 màu cho nó. Chú ý: Để chọn màu mong muốn, click vào nút màu nhỏ(nút vuông nhỏ) phía sau chữ Background và bạn sẽ mở được bộ chọn màu.

 Text: Điều này cho phép bạn chọn màu văn bản mặc định được dùng trên trang. Chú ý: Điều này chỉ liên quan đến trang hiên tại chứ không phải các trang bạn đã tạo hay các trang được tạo sau đó.

Dreamweaver

9

Dreamweaver

 Links: Có 3 sự chọn lựa về liên kết mà thực sự không nên thay đổi bởi vì trình duyệt cái mà trang web được hiển thị trên, có thể ghi đè lên các thiết lập mà bạn chỉ định .  Apply Button: Nó cho phép bạn thay đổi các thiết lập của trang và nhìn thấy chúng mà không cần phải đóng hộp hội thoại và mở lại nếu bạn không hài lòng với sự thay đổi. Đơn giản và hiệu quả, một website tốt nên như vậy.

10

Introduction

Tóm tắt  Trong Dreamweaver MX Workspace tất cả các panel, thanh công cụ, và các cửa sổ tài liệu được tích hợp vào một cửa sổ chương trình đơn, giống như với hầu hết các chương trình trên Windows.  Hyper Text Markup Language là ngôn ngữ được thông dịch bởi trình duyệt web để hiển thị các văn bản đã được định dạng, đồ họa, và đa phương tiện mà bạn thấy khi xem 1 trang web.

 Chọn View  Toolbars để chọn (hiển thị) hoặc không chọn (ẩn) các thanh công cụ Document hoặc Standard.  Macromedia Dreamweaver MX là một công cụ soạn thảo web đưa ra cho bạn sự mềm dẻo trong việc tạo ra những trang web trong 1 môi trường WYSIWYG giống như một bộ xử lý từ (word processor), hoặc là bằng cách viết & soạn thảo HTML một cách trực tiếp.  Bảng Objects cho phép bạn chèn các phần tử lên trang web của bạn. Bạn có thể chèn những thứ như: hình, bảng, những đoạn phim ngắn, Java applet và nhiều hơn nữa.  Trong Properties Inspector, những lựa chọn có sẵn sẽ thay đổi tùy thuộc vào những gì mà bạn đang soạn thảo hoặc đang tạo ra.

Dreamweaver

11

Dreamweaver

Kiểm tra sự tiến bộ của bạn 1. ______________ được dùng để gán các thuộc tính cho văn bản, đoạn văn, hình ảnh. a. b. c. d.

Property Inspector Layout Inspector Property Indicator Layout Tab

2. Để ẩn tất cả các panel, chọn Window  Hide panels, hoặc gõ _________. a. b. c. d.

Alt+F4 key Ctrl+F4 key F4 key Ctrl+F2 key

3. HTML là viết tắt của cái gì? 4. Một site tĩnh có nghĩa là gì? 5. Một site cục bộ có nghĩa là gì? 6. __________ là cái tên sẽ xuất hiện trên thanh menu của trình duyệt web. a. b. c. d.

12

Text Title Script HTML