Lập trình web .Chương 4: Dreamweaver pptx

Khoa NN-TH Trường CĐSP DakLak Lập trình WebKế hoạch thiết kế một Website 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 tr

Trang 1

Khoa NN-TH Trường CĐSP DakLak Lập trình Web

Giảng Viên: Trần Anh Tuấn

1

LẬP TRÌNH WEB

TRƯỜNG CAO ĐẲNG SƯ PHẠM DAKLAK

KHOA NGOẠI NGỮ - TIN HỌC

Chương 4 DREAMWEAVER

Giới thiệu về Dreamweaver

Giới thiệu

 Dreamweaver là chương trình dùng để tạo trang webtĩnh, web động Dreamweaver sẽ tự động phát sinh cáctag HTML, CSS, Javascript, PHP, ASP thích hợp

 Dreamweaver là một công cụ trực quan, trong đó có thể

bổ sung Javascript, biểu mẫu, bảng biểu và nhiều loại đốitượng khác mà không cần viết một đoạn mã nào

 Dreamweaver có thể thiết kế bằng chế độ Design viewhoặc Code view hoặc Code and Design

 Dreamweaver là một thành phần trong bộ sản phẩm củahãng Adobe gồm nhiều sản phẩm như: Photoshop,Dreamweaver, Flash,…

4

Các loại website

 Xét về kỹ thuật thực hiện: Có thể chia như sau:

Static website: Là Website tĩnh, nội dung các trang web sẽ

không thay đổi nếu không được người thiết kế hiệu chỉnh lại

Dynamic Website: Là Website động, nội dung các trang web

sẽ tự động thay đổi nếu dữ liệu trong cơ sở dữ liệu mà

website kết nối được cập nhật

 Xét về vị trí lưu: Có thể chia như sau:

Local Site: Là website đang được lưu trên máy tính của

người thiết kế, chưa đưa lên internet

Remote Site: Là website nằm trên máy chủ WebServer Sau

khi cài đặt một RemoteSite, bạn có thể upload local website

lên đó, để các máy trong hệ thống mạng có thể truy cập

 Xét về tính chất thông tin: Có thể chia như sau:

 Website giới thiệu:

 Là website căn bản và đơn giản nhất, dùng để giới thiệu về một cá nhân hay một đơn vị.

 Ví dụ: một website của ca sĩ chứa các thông tin về lý lịch, bài hát ưa thích, lịch diễn của ca sĩ đó

 Website loại này chứa ít trang, ít tốn kém vì dễ làm nhất.

 Website thông tin:

 Chứa nhiều thông tin, được sắp xếp thành nhiều đề mục dễ tra cứu.

cho người xem tìm ngay được thông tin mình muốn tìm.

 Ví du: site tin tức, show sản phẩm, nhạc …

 Website truyền dữ liệu:

 Được thiết kế đặc biệt để thu nhận thông tin từ xa Một cơ quan, đơn vị có tại chỗ để nhận thông tin qua mạng internet/intranet Website này thuộc chuyên môn.

 Ví dụ: site báo cáo số liệu sản xuất, bán hàng hàng ngày

 Website thương mại:

 Chứa thông tin hàng hoá và dịch vụ, chứa nhiều form và chứa các script tính toán để người tiêu dùng có thể mua và trả tiền ngay tại website.

6

Trang 2

Kế hoạch thiết kế một Website

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:

Khi thiết kế Website cần lưu ý 2 vấn đề:

Nội dung chủ đề chính  chọn bố cục, hệ màu chotương ứng, (ví dụ: Website thương mại phải sáng sủa,

rõ ràng về bố cục, …)  thu thập đầy đủ tài liệu, phânnhóm theo nội dung  quyết định cần bao nhiêu trang,nội dung của từng trang

Chọn hình ảnh, logo, Banner, hệ thống nút liên kết, ảnhminh hoạ, ả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ếtgiữa các trang đơn trong một website

Kế hoạch thiết kế một Website (tt)

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

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

Trang 3

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 Dreamwerver

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

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ỉnhsửa các thuộc tính đó

Panel groups: nhóm các Panel cho phép quản lý các đối

tượng trong trang Web

Bật / tắt các thanh Panel: Chọn menu Window  Chọnthanh Panel tương ứng

Mở rộng các thanh Panel: Click vào mũi tên ở góc trái củamỗi Panel

Màn hình Dreamweaver

14

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: Hiển thị các tag HTML tại vị trí hiện hành

của con trỏ

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

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 định kích thước của trang web

phải tính đến việc sao cho an toàn đối với mọi độ phân

Bước 1: Menu Site  New Site

Bước 2: Đặt tên cho site rồi nhắp nút Next

Bước 3: Chọn công nghệ xây dựng website

 Nếu làm web động: bạn chọn Yes… và công nghệ thực hiện

(PHP,…)

Nếu làm site tĩnh: bạn chọn No…

Chọn No,I do not want to use a server technology

Bước 4: Chỉ định cách thức làm việc với các file

trong site và chỉ định folder chứa site

Chọn Edit local copies on my machine, then upload…

Tạo site

Trang 4

Thao tác với Website

19

 Bước 5: Chọn phương cách đưa website lên Internet

How do you connect to your remote server?

chọnNone

Nhắp Next(Sẽ khai báo cách thức nết nối sau)

 Bước 6: Nhắp nút Done kết thúc tạo site

Chọn site muốn chỉnh rồi nhắp nút Edit.

Bạn sẽ được dẫn qua các câu hỏi đã gặplúc tạo site Muốn chỉnh thông số nàothì chỉnh khi thấy nó

Sao chép cấu hình của site

nút Duplicate.

Xóa cấu hình site

nút Remove Các thông số về site sẽ

mất, nhưng folder chứa site vẫn còn

Quản lý các site đã tạo

Thao tác với Website

21

Export khi muốn xuất những thông

số về site ra 1 file text

Chọn site muốn export rồi nhắp

Quản lý các site đã tạo

Thao tác với trang

22

B1: Menu File  chọn New

B2: Chọn Blank page  chọn HTML  Chọn None hoặc

layout trong cột Layout  nhắp nút Create để tạo trang

Tạo trang web

1 2

 Tạo trang theo mẫu có sẵn

 B1: Menu File  chọn New

 B2: Chọn Page From Sample  Starter basic  chọn mẫu  nhắp

nút Create để tạo trang

Tạo trang web

Trang 5

25

 Chế độ Code: Là chế độ để xem và làm việc với code HTML của trang.

 Chế độ Design: Là chế độ chủ yếu để xem và làm việc với trang Trang

web sẽ hiện gần giống hệt theo ý của bạn ở chế độ này.

 Chế độ Split: chia đôi màn hình Phía trên hiện code HTML, phía dưới là

chế độ Design.

 Nhắp nút Code, Design, Split ở trên vùng soạn thảo (thanh Document)

Chuyển chế độ Code, Design, Split

26

Lưu trang web

Nhắp menu File  Save /Save As / Save All

Nhắp menu File  Close / Close All

Đổi tên file

Nhắp tên file trong panel Files  gõ phím F2  gõ tên filemới

(Hãy mở 1 file có sẵn dữ liệu, ví dụ: page.html để

thử các thuộc tính của trang)

 Page font: Font mặc định cho trang.

 Size: Cỡ chữ mặc định cho trang.

 Text color: Màu chữ mặc định cho trang.

 Background color: Màu nền cho trang.

 Background image: Ảnh nền trang web

 Repeat: Cách lặp lại ảnh nền

 No Repeat: Không lặp lại ảnh nền

 Repeat-x: Lặp lại ảnh nền theo chiều ngang trang web

 Repeat-y: Lặp lại ảnh nền theo chiều dọc trang web

 Repeat : Lặp lại ảnh nền theo chiều ngang và chiều dọc trang web

 Left margin: lề trái trang web

 Right margin: lề phải trang web

 Top margin: lề trên trang web

 Bottom margin: lề dưới trang web

Tab Title/Encoding

 Title: Tiêu đề của trang web

 Encoding: chọn Unicode (UTF-8)

Link font: font chữ liên kết (cùng với font của trang)

Size: cỡ chữ liên kết (pixel)

Link color: màu liên kết

Rollover links: màu chữ khi rê chuột vào liên kết

Visited links: màu chữ liên kết đã từng xem

Active links: màu chữ cho liên kết đang chọn

Underline style: kiểu gạch chân

 Never: không có

 Always: luôn có

 Show: hiện khi chuột chạm vào

 Hide: không hiện khi chuột rê vào

Trang 6

 Khi nhập chữ rồi Enter xuống hàng, Dw sẽ tự động bao quanh

vùng text vừa gõ 1 tag p Có thể thay đổi tag bao quanh đoạn

Kiểu trình bày (tag) chứa đoạn: Heading1, Heading2,

Font (Arial, Tahoma, Time New Roman, Vernada,…)

Chọn các style CSS đã định nghĩa

Cỡ chữ.

Màu chữ Mỗi màu là con số hệ 16, bắt đầu bằng dấu #

Có thể chọn bảng màu khác, hoặc hiện bảng chọn mọi màu Khi bảng màu hiện ra, thay vì chọn màu trong bảng, bạn có thể trích màu ở nơi mà bạn thấy (xem thêm ở mục dưới)

Màu chữ Mỗi màu là con số hệ 16, bắt đầu bằng dấu #

Có thể chọn bảng màu khác, hoặc hiện bảng chọn mọi

màu Khi bảng màu hiện ra, thay vì chọn màu trong

bảng, bạn có thể trích màu ở nơi mà bạn thấy (xem

Chọn chữ rồi dùng các nút trên tranh Properties:

Paragraph

35

Sử dụng màu sắc:

Giá trị màu:

 Một màu được tổng hợp từ ba thành phần màu chính, đó là:

Đỏ (Red), Xanh lá cây (Green), Xanh nước biển (Blue).

 Trong HTML một giá trị màu là một số dạng hexa (hệ đếm cơ

số 16) có dạng như sau:

#RRGGBB

 Trong đó:

o RR - là giá trị màu Đỏ, từ 00 đến FF.

o GG - là giá trị màu Xanh lá cây, từ 00 đến FF.

o BB - là giá trị màu Xanh nước biển, từ 00 đến FF.

Paragraph

36

 Các mã màu:

Trang 7

Sử dụng hộp màu trong Dreamweaver

 Chèn: Insert  HTML

SpecialCharacter  Chọn ký

tự hoặc Othercharacter

 Line break Enter) : Ngắt dòng

(Shift- None line breakspace: ký tự khoảngtrắng

Iframe

41

khác

Vào menu Insert  Tag  HTML Tags  Page

Elements  Iframe  Insert

Cho biết các thông số của iframe:

Source: Địa chỉ trang web nằm trong iframe, trang ở website

khác cũng được Ví dụ: các file thông tin chứng khoán, thời

tiết, giá vàng, ngoại tệ ở site khác

Name: tên iframe Width: độ rộng

Height: độ cao Alignment: cách canh

Scrolling: có hiện thanh cuộn không.

Iframe

42

 Xong OK

 Nhắp Close

Trang 8

Marquee

43

vào đó các hình ảnh, text … có thể được cuộn qua

trái, qua phải, cuộn lên, cuộn xuống…

B1: Nhắp vị trí muốn chèn trong trang web

B2: Chuyển qua cửa sổ code

B3: Gõ tag marquee rồi gõ phím spacebar (khoảng

trắng)  chọn thuộc tính của đối tượng marquee

B4: Khi gõ xong các thuộc tính thì nhớ gõ dấu “>”

B5: Bạn gõ bất kỳ Text hoặc chèn hình vào

B6: Gõ </marquee> để kết thúc tag marquee

B7: Lưu trang web và xem thử

Direction: chiều cuộn Các giá trị: up, down, left, right

Hspace, vspace: khoảng cách từ marquee đến textxung quanh

Loop: số lần lặp (-1 là mãi mãi)

Scroll amount: khoảng cách nhảy giữa các lần cuộn

Scroll delay: thời gian dừng giữa 2 lần cuộn

Width, Height: Độ rộng, độ cao của marquee

•Thuộc tính của table

•Các thao tác với table

Dùng để tạo dữ liệu dạng bảng hoặc thiết kế layout

Mỗi table có cấu trúc html như sau:

Table Width: độ rộng table (tính bằng pixel hoặc %)

Cell Padding: khoảng cách từ đường viền của ô đến nộidung trong ô

Cell Spacing: khoảng cách giữa các ô

Header: cho biết table có vùng header hay không (top,left, both, none)

Caption: Nhãn của Table

Summary: diễn giải chi tiết table, chỉ hiện ở trong cửa sổcode

Nhắp OK

Trang 9

Xóa thuộc tính height của các hàng

Chuyển đơn vị tính bề rộng cột thành pixels, %

Thuộc tính của Ô (Cell)

Canh nội dung theo chiều ngang

Độ rộng của ô Cho/Không cho text tự động xuống dòng trong ô.

Màu nền cho ô.

Các thao tác với table

 Insert Row: chèn hàng phía trên

 Insert Column: chèn cột bên trái

 Insert Rows or Column: chèn hàng hoặc cột ở phía trên/phía dưới, bên trái hoặc bên phải ô hiện hành

Xóa hàng cột

 Nhắp 1 ô trong hàng/cột muốn xóa rồi nhắp phải  Table

Delete Row hoặc Delete Column

Nhắp phải Table  Merge Cell (hoặc nhắp nút

MergeCell trên thanh Properties)

Split cell

Chọn ô cần chia

Nhắp phải Table  Split Cell (hoặc nhắp nút Split cell

trên thanh Properties)

Chọn split theo hàng hoặc cột, số hàng/cột cần split

Ví dụ các thao tác

54

Trang 10

CSS - Cascade Style Sheet

Giới thiệu

57

 CSS là 1 kỹ thuật dùng để định nghĩa cách thể hiện của

các đối tượng trong trang web CSS cho phép bạn định

dạng các đối tượng với rất nhiều đặc điểm (thuộc tính)

mở rộng mà HTML thông thường không có

 Các định nghĩa css có thể được đặt trong 1 file riêng với các

trang web, do đó giúp cho công việc trình bày trang web được

độc lập với thiết kế cấu trúc trang web, thích hợp với các dự án

làm việc nhiều người.

Giới thiệu

58

Style: Là 1 tập hợp các đặc điểm định dạng

 Ví dụ: P { Color: Red; font-size:16; font-weight:Bold; }

Sheet: Là 1 tập hợp nhiều style

Vị trí lưu style: style dùng để định dạng đối tượng trongtrang web Style có thể lưu trong chính trang HTML hiệnhành hoặc có thể lưu ở file riêng (.CSS)

Các kiểu style:

 Style định dạng cho 1 tag trong toàn trang

Ví dụ : style P { Color:blue} để đ.dạng cho mọi tag P trong trang

web có màu chữ xanh

 Style định dạng cho 1 đối tượng cụ thể có tên.

 Ví dụ: style #tinxemnhieu { background-color: cyan} để định

dạng cho đối tượng tên là tinxemnhieu có màu nền là cyan

 Style định dạng cho 1 tag cho 1 vùng nào đó trong trang web.

Ví dụ: style #tinxemnhieu a { color: magenta} để định dạng cho

mọi tag a trong đối tượng tên là tinxemnhieu có màu chữ là magenta

Giới thiệu

59

Class:

Một class CSS là 1 tập hợp nhiều đặc điểm định dạng

như: màu chữ, màu nền, cách hiển thị, khung viền,…

đặt cho các đặc điểm đó 1 cái tên

Có thể sử dụng class định dạng cho các đối tượng

Trang 11

Tạo Style

61

 Select type: chọn Tag

 Seletor Name: tên của style (TênTag )

 Rule Definition: Chọn nơi đặt style

 This document: Style đặt trong trang web hiện hành

 New Style Sheet: Đặt style trong file CSS bên ngoài trang web hiện hành

(1) Select type: chọn Tag

(2) Seletor Name: tên của style (TênTag )

(3) Rule Definition: Chọn nơi đặt style

Định dạng cho 1 đối tượng cụ thể có tên

 Select type: chọn Compound

 Selector Name: đặt tên style (#TênĐốiTượng)

 This document : Style đặt trong trang web hiện hành

3

(1) Select type: chọn Compound

(2) Seletor Name: tên của style (#Tên )

Định dạng cho 1 tag bên trong 1 đối tượng có tên

 Select type: chọn Compound

 Selector Name: đặt tên style (#TênĐốiTượng TênTag)

 This document : Style đặt trong trang web hiện hành

 Nhắp OK

 Chỉ định các thuộc tính cần định dạng (font, nền, border, kích thước, align…)  OK

Trang 12

67

2

3

(1) Select type: chọn Compound

(2) Seletor Name: tên của

style (#Tênđốitượng Tag )

Select type: chọn Class

Selector Name: đặt tên style (.TênClass)

Rule Definition: Chọn nơi đặt style (This document, New Style Sheet)

(1) Select type: chọn Class

(2) Seletor Name: tên của style (.TênClass )

70

 Set Class:

C1: Chọn đối tượng rồi nhắp phải tại tên của tag (trên

thanh Tag)  chọn Set Class  chọn class

C2: nhắp phải tại đối tượng  CSS Styles  chọnclass

 Chú ý: Khi set class cho 1 đối tượng, nếu qua code bạn

sẽ thấy đối tượng có thuộc tính Class= Tên của Class

 Bỏ set class

Chọn đối tượng rồi nhắp phải chuột tại tên tag trên

thanh Tag  chọnSet Class  chọn None

Quản lý style

71

 Chỉnh sửa Style

 Nhắp đúp tên style trong CSS panel hoặc chọn style trong CSS

panel rồi nhắp nút Edit

 Đổi tên style

 Nhắp tên style rồi gõ F2 hoặc nhắp 2 lần vào tên của style.

 Nhắp phải tên Style  Duplicate  cho tên mới

 Kiểm tra sự tương thích với trình duyệt

 Không phải thuộc tính nào của CSS cũng được mọi trình duyệt hỗ

trợ Ví dụ: thuộc tính blink của text (Firefox hỗ trợ)

 Để kiểm tra sự tương tính của các thuộc tính CSS đã dùng, thực

hiện như sau:

 Nhắp menu File  Check Page  Check Browser Compability hoặc nhắp

nút Check Page trên toolbar Document

Trang 13

A:hover định dạng cho liên kết trong trang đang

được đưa chuột vào

A:active định dạng cho liên kết trong trang đang

được nhắp (chưa nhả chuột)

A định dạng cho tất cả liên kết trong trang

Định dạng liên kết

75

#menu A:link định dạng cho tất cả liên kết chưa được nhắp

trong vùng có tên là menu

#menu A:visited định dạng cho tất cả liên kết đã được nhắp

#menu A:hover định dạng cho liên kết đang được đưa chuột vào

#menu A định dạng cho tất cả liên kết trong vùng có tên là

.menu A:hover định dạng cho liên kết đang được đưa chuột vào

trong vùng có class là menu

.menu A định dạng cho tất cả liên kết trong vùng có class là menu

Định dạng liên kết

76

 .menu A:link định dạng cho tất cả liên kết chưa được

nhắp trong vùng có class là menu

 .menu A:visited định dạng cho tất cả liên kết đã được

nhắp trong vùng có class là menu

 .menu A:hover định dạng cho liên kết đang được đưa

chuột vào trong vùng có class là menu

 .menu A định dạng cho tất cả liên kết trong vùng có

class là menu

 #TênBảng định dạng cho bảng

 #TênBảng td định dạng cho các ô dữ liệu trong bảng

 #TênBảng th định dạng cho các ô tiêu đề trong bảng

 #TênBảng caption định dạng cho nhãn của bảng

như logo, banner,

thước, KB phù hợp

minh họa, ảnh nền mà xử lý kích thước cho phùhợp

Trang 14

Tổng quan

79

Logo Biểu tượng công ty, cơ quan thường nằm góc trên trái màn hình Tùy

theo mẫu, có kích thước giao động từ 72 đến 120 pixel

Banner Bảng hiệu thường nằm ở giữa, phía trên màn hình, có thể kết hợp với

logo hay với hệ thống nút định hướng ngang.

Icon Nút chức năng, 20  50 pixel

Picture Tùy thuộc vào chủ đề, minh họa có kích thước riêng

 B3: Chọn file hình(nếu có trên máy của mình) hoặc gõ

địa chỉ của hình trong mục URL (nếu hình có trên Internet)

 B4: Alternate Text: Text thay thế cho hình(nếu cần)

 Long description: gõ url của file mô tả hình(nếu cần) Muốn cho

 Trên thanh Properties, có thể chỉnh:

 Vspace/Hspace: Khoảng cách từ hình tới chữ theo chiều dọc/ chiều ngang

 W: bề rộng của hình.

 H: bề cao của hình.

 Src: địa chỉ, tên file hình.

 Link: địa chỉ trang web sẽ hiện khi user nhắp vào hình.

 Target: chỉ định “nơi” mà trang web liên kết sẽ mở ra Nếu chỉ định

là _blank thì trang liên kết sẽ được mở ra trong một cửa sổ mới.

 Trên thanh Properties, có thể chỉnh:

 Low src: tên file hình phụ với kích thước nhỏ hơn (màu thường là đen

 Align: cách canh của hình so với văn bản xung quanh (Left, Right,…)

 Tạo các hotspot: cho phép vẽ 1 vùng trên một hình để tạo nhiều liên kết

đến các trang web khác nhau.

 Crop: dùng để cắt bớt hình (cho nhỏ lại)

 Brightness and Contrast: chỉnh độ sáng và độ tương phản của màu trong

Trang 15

 Height: chiều cao

 Color: màu cho khung

 Alternate text: nội dung câu thông báo khi rê chuột vào khung

 Ảnh nền là ảnh được tự động lợp đầy trang web

 Nên chọn ảnh nền màu nhạt để dễ đọc nội dung

 Chèn ảnh nền: Menu Modify  Page Properties  Tab

mang nhiều hiệu ứng đồ họa, âm thanh, sự kiện,hoạt hình… và được lồng vào trong trang web làmcho trang web đẹp hơn, sinh động hơn (nhưngtrang web sẽ tải nặng hơn)

Flash

89

Nhắp vị trí muốn chèn

Menu Insert  Media  Flash

Chọn file flash hoặc gõ URL của file flash trong mục URL

Nhắp OK

Gõ Title cho Flash (nếu cần) rồi nhắp OK

Flash

90

Nhắp vị trí muốn chèn

Menu Insert è Media è Flash Video

Chọn file flash video hoặc gõ URL của file flash trong mục URL

Ví dụ: chọn file MuaRoiBangTay.flv trong folder media

Chỉ định rộ rộng, độ cao

Nhắp OK

Trang 16

Chèn nhạc và phim

91

Nhắp vị trí

Menu Insert è Media è Plugin è chọn file nhạc/phim

Chỉnh kích thước : kéo cho rộng ra, cao lên

Kết quả trình duyệt hiện trang web :

1. Giới thiệu về liên kết

HYPERLINK – TẠO LIÊN KẾT GIỮA CÁC TRANG

Giới thiệu về liên kết

Đối tượng được chọn làm nút liên kết

Địa chỉ URL của trang cần liên kết đến

Cửa số (target) hiển thị trang

Liên kết nội: liên kết các trang trong 1 website

Liên kết ngoại: liên kết đến trang thuộc website khác

Liên kết email: liên kết đến chương trình gửi mail

Các loại địa chỉ

94

Địa chỉ tuyệt đối:

Là địa chỉ bao gồm đầy đủ 3 phầnprotocol, domain, file.

 Thường dùng khi liên kết sang website khác

Là địa chỉ không đầy đủ Không có protocol

và domain

Thường dùng để liên kết giữa các trang trong nội bộ

website

Khi dùng địa chỉ tương đối, phải biết mình đang ở

đâu, liên kết đến đâu

Các loại địa chỉ

96

Ví dụ Địa chỉ tương đối:

gioithieu.html tạo liên kết đến index.html thì địachỉ:index.html

gioithieu.html tạo liên kết đến CCNA.html thì địachỉ:ChuongTrinh/ccna.html

gioithieu.html tạo liên kết đến MCSA.html thìđịa chỉ:ChuongTrinh/Microsoft/MCSA.html

CCNA.html tạo liên kết đến index.html thì địachỉ là /index.html

MCSA.html tạo liên kết đến index.html thì địachỉ là / /index.html

NhatNghe/

gioithieu.html index.html

CHUONGTRINH

ccna.html

MICROSOFT

MCSA.html MCSE.html

Trang 17

CHUONGTRINH

ccna.html

MICROSOFT

MCSA.html MCSE.html

Ví dụ:

Từ bất cứ trang nào trong site, muốn tạo liên kết

đến file index.html thì ghi địa chỉ là /index.html

đến file CCNA.html thì ghi địa chỉ là

ChuongTrinh/CCNA.html

đến file MCSA.html thì ghi địa chỉ là

Tạo liên kết đến tập tin

 Kéo file bỏ vào mục Link

Tạo liên kết thường

Địa chỉ trang đích Point to file Browser for file

 Menu Insert  Hyperlink

 Text: Dòng text hyperlink

 Link: đích

 Target:trang cửa sổ mà trang đích hiện

 Title: tiêu đề của link

 Access Key: nhấn Alt + ký tự và nhấn Enter để liên kết

 Tab Index: trình tự chọn nút khi nhấn phím tab

Tạo liên kết thường

Địa chỉ trang đích Point to file Browser for file

Chú ý: nếu tập tin không cùng thư mục của site

hiện thời thì hộp thoại khác yêu cầu sao chép tập

tin này vào trong thư mục của site hiện thời

Tạo liên kết đến tập tin

Menu Insert  Email Link

 Text: Dòng text hyperlink

 Email: địa chỉ mail

 OK

Hoặc: gõ trực tiếp vào ô link trong properties theo cúpháp sau:

 mailto: địa chỉ email

Tạo liên kết đến địa chỉ email

Tiêu đề	Chương 4 Dreamweaver
Tác giả	Trần Anh Tuấn
Người hướng dẫn	PTS. Nguyễn Văn A
Trường học	Trường Cao Đẳng Sư Phạm Dak Lak
Chuyên ngành	Ngôn Ngữ - Công Nghệ Thông Tin
Thể loại	Giáo trình giảng dạy
Năm xuất bản	2012
Thành phố	Dak Lak

Định dạng
Số trang	34
Dung lượng	7,37 MB

Lập trình web .Chương 4: Dreamweaver pptx

TẠO MENU BẰNG SPRY MENU BAR