Chuyên đề Web Design

*Chuyên đề : Web DesignBộ môn KTMT – Viện CNTT&TTTrường ĐH Bách Khoa Hà NộiWeb Design* Thiết kế Web với DreamWeaverBộ môn Kỹ thuật máy tính, Viện Công nghệ thông tin và truyền thôngĐại học Bách Khoa Hà NộiNội dungGiới thiệu về Macromedia Dreamweaver.Thiết kế Web bằng một số công cụ cơ bản.Cách tạo liên kết (Hyperlink).Kỹ thuật thiết kế Frame.Kỹ thuật Layout.Sử dụng CSS để tạo một số hiệu ứng trong trang Web.*Giới thiệu1) Tổng quan về Dreamweaver:Là một phần mềm thiết kế Web chuyên nghiệp.Tương thích với nhiều đối tượng nhúng (Flash, Shockwave, Active X, ).Hỗ trợ các công cụ thiết kế trang Web động rất hiệu quả.*Giới thiệuMàn hình khởi động*Giới thiệuGiao diện chính của chương trình*Giới thiệu*Chức năng các thành phần:  Thanh công cụ Document:Thiết kếbằngHTMLThiết kế bằngHTML và bằngcông cụThiết kếbằngcông cụTiêu đềcủa tranghiện hànhThể hiệnlỗi khithiết kếQuản lý fileXem thử kết quả bằng trình duyệtCáctùychọnkhithiếtkếCửa sổ làm việc*Các thanh công cụ cơ bảnCOMMON : Tập hợp này chứa các Đối Tượng thường được sử dụng nhiều nhất như các liên kết với ảnhLAYOUT : gồm các Tables – Div – Layer – Khung ( Frame ) . Các Đối tượng này giúp bạn mô tả cách bạn muốn trình bày .*Các thanh công cụ cơ bảnFORM : Gồm các thành phần Form như Trường Text , Nút và các Radio button, danh sách lựa chọnTEXT :Giúp tạo Style cho Text đã nằm trên trang tuy nhiên tốt hơn nêndùng Property Inspector ở cuối trang*Các thanh công cụ cơ bảnHTML : Ít hữu dụng , cho phép bạn chèn các đối tượng như Table – Khung – Script vốn được thực hiện tốt hơn ở nơi khácAPPLICATION : Giúp cho bạn làm việc với các cơ sở dữ liệu bên ngoài *Các thanh công cụ cơ bảnFLASH ELEMENTS : Chỉ chứa 1 Đối tượng bộ xem ảnh Flash.Nếu muốn thêm các thành phần Flash như Nút Flash – Text – Video hãy quay về Common > Nút Media . ( H9+10).*Các thanh công cụ cơ bảnFAVORITES : Chỉ là rổng không . Dùng để chỉnh sửa , dùng để chứa những gì bạn muốn nó có . Để làm điều này > Chọn Tập hợp Favorites > Nhấp Phải > Cho phép bạn chọn lựa để thêm những đối tượng thường được sử dụng nhiều nhất. *Các thanh công cụ cơ bảnChức năng của từng Nút và nút xổ xuống kế bên : Để con trỏ lên nút sẽ thấy Text mô tả chức năng của nút đó . Nhấp nút xổ xuống kế bên ra chức năng phụ. *STATUS BAR ( Thanh Trạng Thái )Góc dưới bên trái là Bộ Chọn Thẻ ( Tag Selector ):Nhấp là chọn toàn bộ nội dung trang .Nhấp bất cứ nơi nào trong một tài liệu > Sẽ hiện ra Thẻ hiện hành của vị trí mà bạn đang nhấp > Nhấp lên Thẻ này > Bạn sẽ có các dữ liệu của Thẻ đó trong Properties. *STATUS BAR ( Thanh Trạng Thái )Góc dưới bên phải : Công cụ Select – Hand – Zoom – Tỉ lệ % đang hiển thị - Kích cỡ của cửa sổ đang hiển thị ( Kế bên có nút xổ xuống để chọn Size của cửa sổ có sẵn ) – Ô cuối : Ước tính thời gian mà trình duyệt Download trang này .Nếu không thích 2 Ô cuối cùng này , bạn có thể thay đổi bằng cách chọn Edit Sizes từ Menu bật lên*Property InspectorCăn cứ những gì được chọn trong cửa sổ tài liệu , các tùy chọn mô tả sẽ xuất hiện trong cửa sổ này *Các PanelPANEL : Bên Phải màn hình là các Panel Các Panel có khi bị mất , chọn Menu Window > Arrange Panels để chúng xuất hiện lại . Thường mặc định hiện hữu là : Application\ Tag Inspector CSS File*Site cục bộ và site từ xaMỘT SỐ ĐỊNH NGHĨA :Folder gốc cục bộ: là folder chứa trang web bạn thiết kế được lưu trong 1 folder ở ổ cứng , folder này chứa các Files và Folder con.Folder gốc cục bộ có tên MY COMPANY , gồm có :Folder CompanyInfo.Folder Images .Folder Products.Khi mở trang Web : trang index ( nằm trong Folder gốc cục bộ ) sẽ tự động được Load lên.Các Site Tỉnh : Đó là các Site trong Folder ở Ổ Cứng , sau đó sẽ Upload lên Web Server*Site cục bộ và site từ xaCác Site Động : Khi mở Trang Web amazon.com và thấy các Trang chào đón bạn và đưa ra đề nghị mang tính cá nhân .Các Trang này được tạo và được phục vụ chỉ cho bạn , dựa vào việc lập trình cơ sở dữ liệu của amazon*Site cục bộ và site từ xaViệc thiết lập Site cục bộ và Site từ xa có nhiều bước . Dreamweaver cung cấp hộp thoại này nhằm dẫn dắt các bạn tiến trình từng bước . Trong hộp thoại này cung cấp cho bạn 2 chế độ Basic và Advanced .Chế độ BASIC : Sử dụng nhiều màn Hình ( Witzard ).Chế Độ Advanced cho phép bạn nhập thông tin trên màn Hình với 1 số Hạng mục và cung cấp các tùy chọn chi tiết hơn trong mỗi hạng mục.Sử dụng hộp thoại Definition để tạo Site Cục Bộ và Site Từ xa*Tạo site cục bộChọn Create New > Dreamweaver Site *Tạo site cục bộHT Site Definition xuất hiện , mặc định với Tab Basic , màn hình Editing Files *Tạo site cục bộDreamweaver hỏi bạn có muốn làm việc với 1 công nghệ sử dụng chẳng hạn như ColdFusion , ASP , NET . JSP hoặc PHP hay không ? Chọn NO , I do not want to use a Server Technology > Next *Tạo site cục bộDreamweaver hỏi bạn muốn làm việc với các Files như thế nào trong suốt quá trình phát triển . Dùng mặc định . Dreamweaver hỏi bạn lưu trử các Files ở đâu trong máy tính ? > Nhấp biểu tượng Browse tìm vị trí lưu ( Ở đây chọn Desktop ) >Next*Tạo site cục bộChọn NONE .Vì bạn chỉ tạo Site Cục Bộ > Next *Tạo site cục bộMàn Hình SUMMARY xuất hiện tóm lược quá trình chọn lựa của bạn . Nhấp DONE*Tạo site từ xaĐịnh nghĩa site từ xa:Site Từ xa hoạt động trên Web Server , là đích của các Files , các Folder Con trong Folder Web ở Ổ Cứng của Bạn.Dreamweaver kết nối với Web Server bằng 1 số cách :FTP.SFTP ( Secure FTP ).Kết nối qua 1 giao thức là Web DAV.Trước khi kết nối bạn cần biết một số thông tin về Web Server :Loại kết nối : FTP – SFTP – Web DAV.Địa chỉ FTP – SFTP – Web DAV .Password .Đường dẫn của Folder trên Server*Tạo site từ xaMenu Site > Manage Sites > Pixel Site > Edit*Tạo site từ xaCác thiết lập bạn thực hiện cho site cục bộ vẫn được giữ nguyên*Tạo site từ xaTab Basic > Next> Next > Next hiện ra : How do you connect to your remote server chọn FTP.Nhập FTP.What is the hostname FTP address of your Web Server : Ở đây bạn đang sử dụng 1 Host Server Free là : www.freewebtown.com. Bạn nhập địa chỉ trang Web này vào đây .What Folder on the Server do you want to store your files in ? Nhập : Tên folder bạn muốn lưu trang webWhat is your FTP login ? Nhập : usernameWhat is your FTP password ? Nhập : password.Nhấp Nút Test Connection để bảo đảm rằng Dreamweaver có thể kết nối thành công với Web Server của bạn*Tạo site từ xa*Tạo site từ xaNext > Chọn mặc định > Next *Tạo site từ xaBảng SUMMARY xuất hiện với thông tin mà bạn đã nhập cho các Site Cục bộ và Site Từ Xa > Done *Tạo trang web đầu tiênĐịnh dạng tổng quát cho trang WebC1: menu Modify  Page PropertiesC2: click phải trên màn hình thiết kế  chọn Page Properties Xuất hiện hộp thoại Page Properties*Tạo trang web đầu tiên*Định dạng tổng quát cho trang Web:+ Appearance:Định dạng Font, Size, màu chữ cho toàn trang WebĐịnh dạng màu nềnhoặc sử dụng hìnhảnh để làm nền Canh lề trái, trênCanh lề phải, dướiSau khi đã định dạng, click nút ApplyTạo trang web đầu tiên*Định dạng tổng quát cho trang Web:+ Links:Sau khi đã định dạng, click nút ApplyĐịnh dạng Font, size, màu chữ cho các liên kếtMàu liên kết sau khi đã clickMàu liên kết khidi chuyển chuột trên liên kếtMàu liên kếtkhi activeTạo trang web đầu tiên*Định dạng tổng quát cho trang Web:+ Title/Encoding:Định dạng kiểu mã hóaTiêu đề của trang WebTạo trang web đầu tiên*Định dạng Text trên trang Web:+ Cách 1: vào menu Text+ Cách 2: click phải trên màn hình thiết kế.Tạo trang web đầu tiên*Định dạng Text trên trang Web:+ Font:Chọn Font trong thanhcông cụ PropertiesLiệt kê các fontđã có sẳnThêm font vàodanh sáchTạo trang web đầu tiên*Định dạng Text trên trang Web: Thêm Font vào danh sách các font:1.Chọn font cần thêmNhóm font hiện hành2.Thêm font vào nhóm font hiện hànhThêm 1 nhóm font mớiBỏ bớt 1 nhóm fontTạo trang web đầu tiên*Định dạng Text trên trang Web: Bỏ Font trong danh sách các font:1.Chọn nhóm font cófont cần bỏ2.Chọn font cần bỏ3.Click nút >> để bỏTạo trang web đầu tiên*Định dạng Text trên trang Web:+ Size:Chọn Size trong thanhcông cụ PropertiesCác kích thước cóthể có của fontCác loại đơnvị của kíchthước fontTạo trang web đầu tiên*Định dạng Text trên trang Web:+ Color:Hộp thoại màu và thông tin màu được chọnCon trỏ chọn màuMã của màuđược chọnChọn nhiều màuChọn màu mặcđịnh (màu đen)Màu được chọnChọn Text Color trong thanh công cụ PropertiesTạo trang web đầu tiên*Định dạng Text trên trang Web:+ Các định dạng khác:Định dạngin đậmĐịnh dạngin nghiêngCanh tráiCanh giữaCanh phảiCanh đềuOutdentIndentTạo trang web đầu tiên*Paragraph:+ Khi Enter xuống dòng là qua 1 paragraph khác.+ Để xuống dòng mà không qua paragraph khác: Ấn Shift + Enter.Hoặc: Thanh công cụ Insert  Text  click nút Tạo trang web đầu tiên*Paragraph: Phân biệt giữa có Paragraph và không có ParagraphĐây là 3 paragraphTạo trang web đầu tiên*Danh sách: chọn text cần tạo danh sách + Sử dụng thanh Properties:Unordered List(Bullet List)Ordered List(Numbering List)+ Sử dụng menu Text:Menu Text  List  Unordered List/Ordered ListTạo trang web đầu tiên*Danh sách: chọn text cần tạo danh sách + Có thể định nghĩa danh sách riêng theo yêu cầu:Menu Text  List  PropertiesTạo trang web đầu tiên*Hình ảnh: đặt con trỏ tại vị trí cần chèn + Thanh công cụ Insert:Hộp thoại Select Image Source: chọn đường dẫn nơi lưu file hình ảnh  chọn hình cần chèn  click OKChọn tab Common  ImageTạo trang web đầu tiên*Hình ảnh: đặt con trỏ tại vị trí cần chèn + Menu Insert:Chọn menu Insert  Image (Ctrl + Alt + I)Hộp thoại Select Image Source: chọn đường dẫn nơi lưu file hình ảnh  chọn hình cần chèn  click OKLưu ý:Hình ảnh khác thư mục và hình ảnh cùng thư mục trang Web đang thiết kế thì khác nhau đường dẫn.Tạo trang web đầu tiên*Hình ảnh: Kết quả:Tạo trang web đầu tiên*Hình ảnh: Thuộc tính:Chuỗi Tooltip thểhiện trên hình ảnhCanh biên hìnhảnh so với IETạo trang web đầu tiên*Hình ảnh: Thuộc tính:Độ dày khung baoquanh hình ảnhCanh biênso với textMiddle = Absolute MiddleTop = TextTopBaseline (Default)Bottom = Absolute BottomCanh biênso với IEChuỗi Tooltipthể hiện trênhình ảnhSố khoảngtrắng dọchoặc ngangso với texttrên trangWebTạo trang web đầu tiên*Liên kết: Tạo liên kết: có 3 cách tạo+ Thanh công cụ Properties:+ Click phải mouse:+ Menu Modify:Tạo trang web đầu tiên*Liên kết:  Xuất hiện hộp thoại Select File:Tạo trang web đầu tiên*Liên kết: Lưu ý:+ URL (Uniform Resource Locator): là địa chỉ của một đối tượng thường được gõ vào vùng Address của các Web Browser.+ Địa chỉ tuyệt đối  Địa chỉ tương đối:Địa chỉ tuyệt đối: là địa chỉ đầy đủ.Vd: ạo trang web đầu tiên*Liên kết: Lưu ý:+ URL (Uniform Resource Locator): là địa chỉ của một đối tượng thường được gõ vào vùng Address của các Web Browser.+ Địa chỉ tuyệt đối  Địa chỉ tương đối:Địa chỉ nền: là địa chỉ bắt đầu của 1 trang Web.Vd: ạo trang web đầu tiên*Liên kết: Lưu ý:+ URL (Uniform Resource Locator): là địa chỉ của một đối tượng thường được gõ vào vùng Address của các Web Browser.+ Địa chỉ tuyệt đối  Địa chỉ tương đối:Địa chỉ tương đối: là địa chỉ được tính từ địa chỉ nền.Vd: ạo trang web đầu tiên*Liên kết: Phân loại: có 2 loại liên kết chính+ Liên kết ngoài:Liên kếtTrang chứa liên kếtTrang khác có địa chỉ đượcxác định trongURL của liên kếtURL = Tạo trang web đầu tiên*Liên kết: Phân loại: có 2 loại liên kết chính+ Liên kết trong:Liên kếtVị trí kLiên kết và vị trí cần liên kết nằm trên cùng 1 trang WebTrang chứa liên kếtLiên kếtVị trí cần liên kết(điểm neo)URL = # Tạo trang web đầu tiên*Liên kết: Phân loại: có 2 loại liên kết chính+ Liên kết trong:Liên kếtVị trí kLiên kết và vị trí cần liên kết nằm trên cùng 1 trang WebTrang chứa liên kếtLiên kếtVị trí cần liên kết(điểm neo)URL = # Tạo trang web đầu tiên*Liên kết: Phân loại: có 2 loại liên kết chính Có thể kết hợp 2 loại liên kết trênLiên kếtVị trí kTrang chứa liên kếtTrang khác chứa vị trí cần liên kếtURL = # Tạo trang web đầu tiên*Liên kết: Các hình thức liên kết:+ Mở liên kết bằng một cửa sổ mới.+ Mở liên kết trên cùng một cửa sổ.+ Mở liên kết là một địa chỉ mail.Tạo trang web đầu tiên*Liên kết: Các hình thức liên kết:+ Sử dụng hình ảnh làm liên kết.Chọn hình ảnh làm liên kết.Đặt URL của trang cần liên kết ở thuộc tính LinkTạo trang web đầu tiên*Liên kết: Bỏ liên kết:+ Chọn liên kết.+ Xóa tất cả những gì có trong thuộc tính LinkLink để trốngTạo trang web đầu tiên*Phân vùng liên kết trên một ảnh: + Chọn hình ảnh cần phân vùng liên kết.+ Chọn loại công cụ dùng để phân vùng.Phân vùnghình chữ nhậtPhân vùnghình elipPhân vùnghình đa giác+ Tạo phân vùng trên ảnh.Tạo trang web đầu tiên*Bảng: Tạo bảng:+ Đặt con trỏ ở vị trí cần tạo bảng.+ Vào menu Insert  chọn TableHoặc: click nút Table trên tab Common,thanh công cụ InsertCông cụ TableTạo trang web đầu tiên*Bảng: Tạo bảng:Số dòngSố cộtĐộ dày khungĐộ rộng cộtTạo trang web đầu tiên*Bảng: Chọn bảng:+ Đặt con trỏ bên trong bảng cần chọn.+ Click phải  chọn Table  Select Table(Hoặc: vào menu Modify  Table  Select Table)Tạo trang web đầu tiên*2) Bảng: Thuộc tính:Số cộtSố dòngChiều rộngChiều caoCanh biênĐộ dày khungClear Row Heights/Column WidthsConvert Table Heights/Widths to PixelsConvert Table Heights/Widths to PercentsMàu nềnẢnh nềnMàu của khungTạo trang web đầu tiên*2) Bảng:  Thuộc tính:Ngoài ra còn có các thuộc tính khác như:+ Canh biên cho từng ô.+ Định dạng font/color/background cho ô.+ In đậm, in nghiêng.+ Nối ô (merge cell) và chia ô (split cell).Tạo trang web đầu tiên*Layout: Mục đích:+ Sắp xếp các thông tin theo đúng yêu cầu thiết kế.+ Thao tác dễ dàng khi thiết kế. Nên sử dụng công cụ bảng để sắp xếp các  thông tin cho đúng vị trí trên trang Web.Tạo trang web đầu tiên*Layout: Cách thức chung:+ Tạo bảng có số lượng hàng và cột phù hợp với lượng thông tin trên trang Web (có Border = 0)+ Tạo thêm, nối hoặc chia nhỏ các hàng và  cột, tùy theo giao diện của yêu cầu thiết kế.+ Chèn thông tin vào các ô ở các vị trí tương ứng trên bảng.+ Tinh chỉnh kích thước các ô và nội dung. Khó điều chỉnh kích thước theo đúng yêu cầu thiết kế nếu sử dụng bảng ở chế độ Standard.Tạo trang web đầu tiên*Layout: Chế độ Layout View:+ Ở chế độ này, bảng giống như bảng ở chế độ Standard.+ Cell pading, Cell spacing và Border = 0+ Kích thước các ô/bảng sẽ dễ dàng chỉnh sửa so với bảng ở chế độ Stadard, giúp đáp ứng được yêu cầu của thiết kế.+ Mỗi ô của bảng sẽ chứa 1 khoảng trắng. Bảng ở chế độ Layout View gọi là: Layout TableTạo trang web đầu tiên*Layout: Tạo Layout Table:+ Chọn tab Layout trên thanh công cụ Insert.+ Click nút Layout, chọn công cụ Layout Table.+ Tạo tùy ý trên cửa sổ thiết kế.+ Tạo các ô bên trong Layout Table vừa tạo  (sử dụng công cụ Draw Layout Cell)Tạo trang web đầu tiên*Layer: Khái niệm:+ Layer (lớp) là một vùng có thể đặt bất kỳ vị trí nào trên trang Web.+ Có thể chứa bất kỳ các thành phần khác: text, hình ảnh, danh sách, và có thể chứa 1 lớp con.+ Chỉ thiết kế ở chế độ Standard .Tạo trang web đầu tiên*Layer: Thao tác:+ Thanh Insert  chọn tab Layout  Standard.+ Chọn công cụ Draw Layer  drag ở vị trí cần tạo.(Hoặc vào menu Insert  Layout Objects  Layer)+ Có thể thay đổi kích thước/vị trí của layer.Tạo trang web đầu tiên*Layer: Ví dụ: Tạo hiệu ứng nổi cho hình/text trên trang Web.Tạo 1 layer chứa textCopy thành 1 layer mớiĐịnh dạng màu cho textKết quảTạo trang web đầu tiên*Flash:  Là một dạng file media, dùng để tạo hiệu ứng sinh động trên trang Web.  Một số ứng dụng của file Flash:+ Tạo ảnh và các hiệu ứng chuyển động.+ Tạo những đoạn film nhỏ.+ Các hiệu ứng về âm thanh.+ Tạo các trò chơi.Tạo trang web đầu tiên*Flash: Chèn file Flash đã có vào trang Web:+ Thanh công cụ Insert: tab Common  Flash+ Menu Insert: chọn Media  Flash+ Ấn tổ hợp phím: Ctrl + Alt + FTạo trang web đầu tiên*Flash:  Cách tạo 1 Flash Text:+ Thanh công cụ Insert: tab Common  Flash  Flash Text+ Menu Insert: chọn Media  Flash  Flash TextTạo trang web đầu tiên*Flash:  Cách tạo 1 Flash Text:Hộp thoại Insert Flash Text:Tạo trang web đầu tiên*Flash:  Cách tạo 1 Flash Button:+ Thanh công cụ Insert: tab Common  Flash  Flash Button+ Menu Insert: chọn Media  Flash  Flash ButtonTạo trang web đầu tiên*Flash:  Cách tạo 1 Flash Button:Hộp thoại Insert Flash Button:Tạo trang web đầu tiên*Rollover Image:  Khi di chuyển mouse trên một ảnh thì ảnh này sẽ biến đổi thành một ảnh khác. Thao tác tạo 1 Rollover Image:+ Thanh công cụ Insert: tab Common  Image  Rollover Image+ Menu Insert: chọn Image Objects  Rollover ImageTạo trang web đầu tiên*Rollover Image: + Hộp thoại Insert Rollover Image:Tạo trang web đầu tiên*Navigation Bar: Khái niệm:+ Trên một trang Web thì chỉ tồn tại duy nhất một Navigation Bar+ Là dạng menu gồm nhiều nút thể hiện các chức năng. Khi di chuyển mouse trên nút sẽ có hiệu ứng thay đổi.Tạo trang web đầu tiên*Navigation Bar: Thao tác tạo:+ Menu Insert: chọn Image Objects  Navigation Bar+ Thanh công cụ Insert: tab Common  Image  Navigation BarTạo trang web đầu tiên*Navigation Bar: + Hộp thoại Insert Navigation Bar:Tạo trang web đầu tiên*Frame: + Chia màn hình thành nhiều phần khác nhau,mỗi vùng thể hiện một trang Web khác nhau.Công dụng:+ Giảm được phần trùng lắp trên nhiều trang Web khác nhau.Lưu ý: hình ảnh có thể bị biến dạng khi thu nhỏ hoặc phóng to cửa sổ trình duyệt.Tạo trang web đầu tiên*Frame: + Thanh công cụ Insert: tab Layout  Frames  chọn kiểu FrameThao tác tạo:+ Menu Insert: chọn HTML  Frames  chọn kiểu FrameTạo trang web đầu tiên*CSS (Cascade Style Sheet):  Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text.+ Chọn text cần định dạng theo mẫu.+ Chọn định dạng đã được tạo.Công dụng: Thông thường sử dụng kỹ thuật này để trang trí.Tạo trang web đầu tiên*CSS (Cascade Style Sheet):  Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. Vào menu Text  CSS Styles  New Đặt tên cho mẫu định dạng  click OKTạo trang web đầu tiên*CSS (Cascade Style Sheet):  Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. Đặt tên file CSS lưu trên Windows. Click nút Save để lưu file CSS.Tạo trang web đầu tiên*CSS (Cascade Style Sheet):  Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. Xuất hiện hộp thoại cho phép định dạng các tính chất của text.Tạo trang web đầu tiên*CSS (Cascade Style Sheet):  Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. Type:Tạo trang web đầu tiên*CSS (Cascade Style Sheet):  Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. Background:Tạo trang web đầu tiên*CSS (Cascade Style Sheet):  Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. Block:Tạo trang web đầu tiên*CSS (Cascade Style Sheet):  Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. Box:Tạo trang web đầu tiên*CSS (Cascade Style Sheet):  Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. Border:Tạo trang web đầu tiên*CSS (Cascade Style Sheet):  Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. List:Tạo trang web đầu tiên*CSS (Cascade Style Sheet):  Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. Positioning:Tạo trang web đầu tiên*CSS (Cascade Style Sheet):  Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. Extensions:Tạo trang web đầu tiên*CSS (Cascade Style Sheet):  Text: Thao tác chung:+ Chọn text cần định dạng theo mẫu.+ Chọn định dạng đã được tạo.Kết quảTạo trang web đầu tiên*CSS (Cascade Style Sheet):  Ngoài ra có thể sử dụng CSS cho các đối tượng khác như: hình ảnh, bảng Tạo trang web đầu tiên*Form:  + Các thành phần của Form:• Label, Text Field, Text Area, Password Field.• Check Box, Radio Button, Radio Group.Công dụng:+ Giúp người dùng giao tiếp với WebServer bằng các thành phần trên Form.• List/Menu.• Button, Image Field.• Jump Menu.