thiết kế web online

16
CÁCH TẠO TRANG WEB BẰNG CHƯƠNG TRÌNH CREATINGONLINE Trước tiên, chúng ta cần biết địa chỉ của chương trình. Đây là chương trình tạo trang web trực tuyến Click vào open generator Giao diện tạo trang web được bố cục như sau: 1

Upload: ngoai-khoa-thuc-hanh

Post on 24-Jun-2015

4.246 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Thiết kế web online

CÁCH TẠO TRANG WEB BẰNG CHƯƠNG TRÌNH CREATINGONLINE

Trước tiên, chúng ta cần biết địa chỉ của chương trình. Đây là chương trình tạo trang web trực tuyến

Click vào open generator

Giao diện tạo trang web được bố cục như sau:

1

Page 2: Thiết kế web online

Nếu bạn là người mới bắt đầu, nên bắt đầu bằng việc tạo trang web đơn giản như thế này:

Các bạn chú ý: nên gõ văn bản trực tiếp lên giao diện tạo trang web. Nếu copy văn bản từ Word, một số ký tự và format ngôn ngữ web trong chương trình này sẽ không nhận ra và báo lỗi.

2

Page 3: Thiết kế web online

Chú ý: KHÔNG tạo URL trực tiếp vào văn bản

Tất cả ULR phải embed vào chữ trong văn bản

Khi xuống hàng, các bạn cũng chú ý: nếu xuống hành nhưng còn trong paragraph thì nhấn shift + enter. nếu xuống hàng nhưng sang paragraph mới thì nhấn enter.

3

Page 4: Thiết kế web online

Bây giờ bắt đầu tạo trang web căn bản nhé !. Hãy gõ hết văn bản rồi mới tính đến chuyện hình và video sau:

Sau khi kết thúc văn bản, ghi tên tác giả và nguồn

Xin nhắc lại, liệt kê nguồn cũng phải đúng cách:

4

Page 5: Thiết kế web online

Nếu muốn tạo liên kết từ một đoạn văn bản, tô đen đoạn văn bản đó và tuần tự theo cách thức sau đây:

Nếu muốn gỡ bỏ liên kết, chọn đoạn văn bản có liên kết, thực hiện theo tuần tự như trên, khi khung hyperlink hiện ra thì delete URL vàOK.

Sau khi đã hoàn tất phần văn bản, bắt đầu thiết kế trang web với hình ảnh và video. Đây là phần hấp dẫn nhất của trang web. Nó làm cho người xem cảm thấy hứng thú khi đọc bài viết của mình.

5

Page 6: Thiết kế web online

Mỗi bạn hãy mở cho mình một tài khoản riêng trên Yahoo Flickr Photos (làm kho ảnh) và Youtube (làm kho video). Trang web chỉ "chịu trách nhiệm" quản lý chữ, còn hình ảnh và video thì "mượn" từ Flickr và Youtube. Có như thế thì dung lượng file của trang web mà chúng ta lưu trữ nhỏ đủ để mail hay "phát tán" trên mạng.

Để chèn hình, trước tiên chọn hình trên Flickr. Hình mà các bạn tải lên tài khoản của mình có thể có dung lượng rất lớn, nhưng hãy chọn chế độ xem ảnh trung bình thôi nhé (medium 500)

Click chuột phải để copy hình

Vào lại giao diện tạo web của mình, chọn vị trí chèn hình

6

Page 7: Thiết kế web online

Dán hình

và hình sẽ hiện lên trên giao diện

Để "tạo dáng" cho hình, click chuột trái chọn hình, sau đó click vào nút IMAGE trên thanh công cụ

7

Page 8: Thiết kế web online

Khung chỉnh sửa hình sẽ xuất hiện. Chọn vị trí của hình trên trang web

Đơn giản nhất là chọn hình ở giữa trang như thế này:

Nếu chọn hình ở bên trái (left) như thế này:

8

Page 9: Thiết kế web online

các bạn phải chú ý 2 điều:1-Trang web ngoaikhoathuchanh có chiều rộng khống chế là 500, do đó phải thu nhỏ hình lại để có thể chứa được chữ ở bên phải nó2-Tạo khoảng cách tối thiểu giữa chữ và hình là 10

Sau khi chèn hình, nhớ chú thích vào dưới hình nhé. Chữ chú thích hình thường nhỏ hơn chữ của văn bản (hoặc chữ in nghiêng)

Bây giờ chúng ta chuyển sang phần chèn video. Trước tiên, chọn video cần chèn trên Youtube, click vào nút Embed ở bên dưới màn hình video

9

Page 10: Thiết kế web online

Chọn kích cỡ màn hình hiện lên trên trang web. Đối với ngoaikhoathuchanh.info, chiều ngang video được khống chế không quá 500. Do đó, nên chọn 480

Embeb code sẽ hiện lên trên khung, click vào và copy code này vào clipboard

Quay trở lại giao diện tạo web của mình, click vào tab Html ở cuối giao diện

và dán code vừa mới copy vào

10

Page 11: Thiết kế web online

Các bạn chú ý, khi embed code phải chuyền giao diện sang chế độ html. Ở chế độ này, nếu không phải "chuyên viên web" sẽ rất khó nhận biết vị trí chèn. Vì thế, các bạn cứ việc chèn vào cuối văn bản, sau đó chuyển sang chế độ biên tập bình thường (Normal (Editing) View) chúng ta sẽ dời hình sau. Click vào tab Normal (Editing) View

Video sẽ hiện lên dưới dạng một khung trống thế này:

Để chuyển màn hình video, cắt nó và dán vào ví trí mong muốn:

11

Page 12: Thiết kế web online

Hãy chú thích video giống như chú thích hình:

Bạn đã hoàn tất "tác phẩm" của mình rối đó. Bây giờ hãy "duyệt" qua trước khi "xuất bản" nó. Click chuột vào tab Preview

Chỉ có ở chế độ preview này bạn mới thấy hình thật của tác phẩm của mình

12

Page 13: Thiết kế web online

Bây giờ lưu tác phẩm lại và chuẩn bị xuất bản nhé. Chú ý đặt tên file theo quy định để dễ quản lý

Khi xem đến đây, các bạn đã trở thành "nhà thiết web nghiệp dư" rồi đó.

Bs Lê Hùng (giảng viên Trường Đại Học Y Khoa Phạm Ngọc Thạch)

13