Bài giảng Thiết kế Web - Phạm Hồng Phong

MÔN HỌC: THIẾT KẾ WEBTHIẾT KẾ WEB BẰNG MACROMEDIA DREAMWEAVERGV: Phạm Hồng PhongNỘ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.MỤC TIÊUSử dụng phần mềm DreamWeaver để:Thiết kế các trang Web tĩnh.Tạo các hiệu ứng trong trang Web.Quản lý một Website cục bộ.1) 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ỆU DREAMWEAVER2) Khởi động Dreamweaver: Chọn Start  Programs  Macromedia  DreamweaverGIỚI THIỆU DREAMWEAVER3) Giao diện chính của Dreamweaver: GIỚI THIỆU DREAMWEAVER4) Chức năng các thành phần:  Thanh công cụ Document:GIỚI THIỆU DREAMWEAVERThiế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ế4) Chức năng các thành phần:  Thanh công cụ Insert:Common:GIỚI THIỆU DREAMWEAVERTạoliênkếtTạoliênkếtđếnđịachỉmailTạođiểmneoBảng(table)ẢnhFlash,ActiveXNgàyChúthíchMẫuThẻ lựachọn4) Chức năng các thành phần:  Thanh công cụ Insert:Ngoài ra còn có các nhóm công cụ khác:+ Layout: cách bố trí, sắp xếp các thành phần.+ Forms: biểu mẫu.+ Text: định dạng văn bản.+ HTML: các thẻ HTML.+ Application: những ứng dụng trong Web động.+ Flash elements: các thành phần của Flash.GIỚI THIỆU DREAMWEAVER1) Tạo và lưu một trang Web:THIẾT KẾ TRANG WEBXuất hiện cửa sổ thiết kếHoặc chọn menu File  New Tạo mới một trang Web: click HTML(Create New) 1) Tạo và lưu một trang Web:THIẾT KẾ TRANG WEB1. Chọn đường dẫn nơi lưu file 2. Đặt tên file vàphần mở rộng 3.Chọn loại file4. Sau khi đã chọnđầy đủ thì click Save Lưu trang Web: chọn menu File  Save (Ctrl + S)Xuất hiện hộpthoại Save As2) Định dạng tổng quát cho trang Web:THIẾT KẾ TRANG WEBC1: menu Modify  Page PropertiesC2: click phải trên màn hình thiết kế  chọn Page PropertiesXuất hiện hộp thoại Page Properties2) Định dạng tổng quát cho trang Web:Hộp thoại Page PropertiesTHIẾT KẾ TRANG WEB2) Định dạng tổng quát cho trang Web:+ Appearance:THIẾT KẾ TRANG WEBĐị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 Apply2) Định dạng tổng quát cho trang Web:+ Links:THIẾT KẾ TRANG WEBSau 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 active2) Định dạng tổng quát cho trang Web:+ Title/Encoding:THIẾT KẾ TRANG WEBĐịnh dạng kiểu mã hóaTiêu đề của trang Web3) Đị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ế.THIẾT KẾ TRANG WEB3) Định dạng Text trên trang Web:+ Font:THIẾT KẾ TRANG WEBChọn Font trong thanhcông cụ PropertiesLiệt kê các fontđã có sẳnThêm font vàodanh sách3) Định dạng Text trên trang Web: Thêm Font vào danh sách các font:THIẾT KẾ TRANG WEB1.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 font3) Định dạng Text trên trang Web: Bỏ Font trong danh sách các font:THIẾT KẾ TRANG WEB1.Chọn nhóm font cófont cần bỏ2.Chọn font cần bỏ3.Click nút >> để bỏ3) Định dạng Text trên trang Web:+ Size:THIẾT KẾ TRANG WEBChọ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 font3) Định dạng Text trên trang Web:+ Color:THIẾT KẾ TRANG WEBHộ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ụ Properties3) Định dạng Text trên trang Web:+ Các định dạng khác:THIẾT KẾ TRANG WEBĐịnh dạngin đậmĐịnh dạngin nghiêngCanh tráiCanh giữaCanh phảiCanh đềuOutdentIndent4) 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 THIẾT KẾ TRANG WEB4) Paragraph: Phân biệt giữa có Paragraph và không có ParagraphTHIẾT KẾ TRANG WEBĐây là 3 paragraph5) Danh sách: chọn text cần tạo danh sách + Sử dụng thanh Properties:THIẾT KẾ TRANG WEBUnordered List(Bullet List)Ordered List(Numbering List)+ Sử dụng menu Text:Menu Text  List  Unordered List/Ordered List5) 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  PropertiesTHIẾT KẾ TRANG WEB6) Hình ảnh: đặt con trỏ tại vị trí cần chèn + Thanh công cụ Insert:THIẾT KẾ TRANG WEBHộ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  Image6) Hình ảnh: đặt con trỏ tại vị trí cần chèn + Menu Insert:THIẾT KẾ TRANG WEBChọ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.6) Hình ảnh: Kết quả:THIẾT KẾ TRANG WEB6) Hình ảnh: Thuộc tính:THIẾT KẾ TRANG WEBChuỗi Tooltip thểhiện trên hình ảnhCanh biên hìnhảnh so với IE6) Hình ảnh: Thuộc tính:THIẾT KẾ TRANG WEBĐộ 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 trangWeb7) Liên kết: Tạo liên kết: có 3 cách tạoTHIẾT KẾ TRANG WEB+ Thanh công cụ Properties:+ Click phải mouse:+ Menu Modify:7) Liên kết: THIẾT KẾ TRANG WEB Xuất hiện hộp thoại Select File:7) Liên kết: THIẾT KẾ TRANG WEBLư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:  Liên kết: THIẾT KẾ TRANG WEBLư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:  Liên kết: THIẾT KẾ TRANG WEBLư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:  Liên kết: Phân loại: có 2 loại liên kết chínhTHIẾT KẾ TRANG WEB+ 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 = 7) Liên kết: Phân loại: có 2 loại liên kết chínhTHIẾT KẾ TRANG WEB+ 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 = # 7) Liên kết: Phân loại: có 2 loại liên kết chínhTHIẾT KẾ TRANG WEB 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 = # 7) Liên kết: Các hình thức liên kết:THIẾT KẾ TRANG WEB+ 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.7) Liên kết: Các hình thức liên kết:THIẾT KẾ TRANG WEB+ 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 Link7) Liên kết: Bỏ liên kết:THIẾT KẾ TRANG WEB+ Chọn liên kết.+ Xóa tất cả những gì có trong thuộc tính LinkLink để trống1) Phân vùng liên kết trên một ảnh: MỘT SỐ KỸ THUẬT+ 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.2) Bảng: MỘT SỐ KỸ THUẬTTạ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ụ Table2) Bảng: MỘT SỐ KỸ THUẬTTạo bảng:Số dòngSố cộtĐộ dày khungĐộ rộng cột2) Bảng: MỘT SỐ KỸ THUẬTChọ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)2) Bảng: MỘT SỐ KỸ THUẬTThuộ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 khung2) Bảng: MỘT SỐ KỸ THUẬT 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).3) Layout: MỘT SỐ KỸ THUẬTMụ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.3) Layout: MỘT SỐ KỸ THUẬTCá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.3) Layout: MỘT SỐ KỸ THUẬTChế độ 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 Table3) Layout: MỘT SỐ KỸ THUẬTTạ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)3) Layer: MỘT SỐ KỸ THUẬTKhá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 .3) Layer: MỘT SỐ KỸ THUẬTThao 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.3) Layer: MỘT SỐ KỸ THUẬTVí 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ả4) Flash: MỘT SỐ KỸ THUẬT 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.4) Flash: MỘT SỐ KỸ THUẬTChè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 + F4) Flash: MỘT SỐ KỸ THUẬT Cách tạo 1 Flash Text:+ Thanh công cụ Insert: tab Common  Flash  Flash Text+ Menu Insert: chọn Media  Flash  Flash Text4) Flash: MỘT SỐ KỸ THUẬT Cách tạo 1 Flash Text:Hộp thoại Insert Flash Text:4) Flash: MỘT SỐ KỸ THUẬT Cách tạo 1 Flash Button:+ Thanh công cụ Insert: tab Common  Flash  Flash Button+ Menu Insert: chọn Media  Flash  Flash Button4) Flash: MỘT SỐ KỸ THUẬT Cách tạo 1 Flash Button:Hộp thoại Insert Flash Button:5) Rollover Image: MỘT SỐ KỸ THUẬT 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 Image5) Rollover Image: MỘT SỐ KỸ THUẬT+ Hộp thoại Insert Rollover Image:6) Navigation Bar: MỘT SỐ KỸ THUẬTKhá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 ứngthay đổi.6) Navigation Bar: MỘT SỐ KỸ THUẬTThao tác tạo:+ Menu Insert: chọn Image Objects  Navigation Bar+ Thanh công cụ Insert: tab Common  Image  Navigation Bar6) Navigation Bar: MỘT SỐ KỸ THUẬT+ Hộp thoại Insert Navigation Bar:7) Frame: MỘT SỐ KỸ THUẬT+ 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.7) Frame: MỘT SỐ KỸ THUẬT+ 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 Frame8) CSS (Cascade Style Sheet): MỘT SỐ KỸ THUẬT 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í.8) CSS (Cascade Style Sheet): MỘT SỐ KỸ THUẬT 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 OK8) CSS (Cascade Style Sheet): MỘT SỐ KỸ THUẬT 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.8) CSS (Cascade Style Sheet): MỘT SỐ KỸ THUẬT 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.8) CSS (Cascade Style Sheet): MỘT SỐ KỸ THUẬT Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. Type:8) CSS (Cascade Style Sheet): MỘT SỐ KỸ THUẬT Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. Background:8) CSS (Cascade Style Sheet): MỘT SỐ KỸ THUẬT Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. Block:8) CSS (Cascade Style Sheet): MỘT SỐ KỸ THUẬT Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. Box:8) CSS (Cascade Style Sheet): MỘT SỐ KỸ THUẬT Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. Border:8) CSS (Cascade Style Sheet): MỘT SỐ KỸ THUẬT Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. List:8) CSS (Cascade Style Sheet): MỘT SỐ KỸ THUẬT Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. Positioning:8) CSS (Cascade Style Sheet): MỘT SỐ KỸ THUẬT Text: Thao tác chung:+ Tạo mẫu định dạng chung (CSS Style) cho text. Extensions:8) CSS (Cascade Style Sheet): MỘT SỐ KỸ THUẬT 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ả8) CSS (Cascade Style Sheet): MỘT SỐ KỸ THUẬT Ngoài ra có thể sử dụng CSS cho các đối tượng khác như: hình ảnh, bảng 9) Form: 	MỘT SỐ KỸ THUẬT+ 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.9) Form: 	MỘT SỐ KỸ THUẬTThao tác tạo:+ Thanh công cụ Insert: tab Forms  Form + Menu Insert: chọn Form  Form + Sau đó chèn các thành phần vào trong Form (tùy theo yêu cầu công việc) bằng cách sử dụng các công cụ trên thanh công cụ Insert – tab Forms/menu Insert – Form.