GIÁO TRÌNH THIẾT KẾ WEBSITE DÀNH CHO NGƯỜI KHÔNG CHUYÊN

 Với một tầm hình tự thiết kế, chúng ta cũng tạo đúng kích thước chiều rộng và chiều cao với hình 1, sau đó tạo một blog có tên là ‘dữ liệu’ v.v…, tạo bài đăng mới, úp hình tự thiết kế

Trang 1

Bài một: thiết kế website cơ bản.

 Internet marketing :

o Hơn 2 năm trở lại đây, internet marketing (quảng cáo trên mạng) dường như trở thành cơn sốt với rất nhiều người, đặc biệt là đối với doanh nghiệp, cơ sở kinh doanh, những người muốn dùng internet để phát triển thương hiệu doanh nghiệp, thương hiệu bản thân…

o Ưu điểm của marketing online:

 Khách hàng sử dụng internet ngày càng nhiều

 Là chiến lược marketing dựa trên sở thích, xu hướng của khách hàng

 Tiếp cận được khách hàng 24/7

 Thông tin và nội dung có thể tùy biến được

 Chi phí thấp

Bảng so sánh Marketing Online và Marketing truyền thống:

Phương thức Sử dụng internet,các thiết bị số hóa

Chủ yếu sử dụng các phương tiện truyền thông đại chúng

Không gian

Không bị giới hạn bởi biên giới quốc gia và vùng lãnh thổ

Bị giới hạn bởi biên giới quốc gia và vùng lãnh thổ

Thời gian

Mọi lúc mọi nơi,phản ứng nhanh, cập nhật thông tin sau vài phút

Chỉ vào một số giờ nhất định, mất nhiều thời gian và công sức để thay đổi mẫu quảng cáo hoặc clip

Phản hồi

Khách hàng tiếp nhận thông tin và phản hồi ngay lập tức

Mất một thời gian dài để khách hàng tiếp nhận thông tin và phản hồi

Khách hàng

Có thể chọn được đối tượng cụ thể,tiếp cận trực tiếp với khách hàng

Không chọn được nhóm đối tượng cụ thể

Chi phí

Thấp,với ngân sách nhỏ vẫn thực hiện được,có thể kiểm soát được chi phí quảng cáo

Cao, ngân sách quảng cáo lớn,được ấn định dùng 1 lần

Lưu trữ thông

tin

Lưu trữ thông tin khách hàng dễ dàng, nhanh chóng

Rất khó lưu trữ thông tin của khách hàng

Nói đến marketing online, người ta thường nghĩ ngay đến website, vì website là cái cần thiết đầu tiên khi tiến hành một chiến lược marketing online Hiện nay với sự phát triển của công nghệ, mạng xã hội ra đời facebook, Google +, youtube, làm cho marketing online càng trở nên mạnh mẽ, hiệu quả và là sự lựa chọn đầu tiên của một doanh

Trang 2

nghiệp trong thời kỳ kinh tế khó khăn vì những ưu điểm mà nó mang lại Bạn có thể quảng cáo ở rất nhiều kênh nhưng đều phải quy về website của mình để quảng bá sản phẩm, thương hiệu

 Nói về google :

o Ngày nay google là công cụ tìm kiếm số 1 thế giới, hầu như mọi người đều sử dụng google để phục cho cuộc sống, sinh hoạt, kinh doanh

o Triết lý kinh doanh của google là Given Gain (cho trước nhận sau), chúng

ta được sử dụng rất nhiều công cụ miễn phí từ google: gmail, blogger, google driver, dịch, documents, search…

o Vậy google kiếm tiền từ đâu? Chính là từ quảng cáo, cho ví dụ về quảng cáo google adwords (quảng cáo theo từ khóa)

 Công cụ thiết kế web miễn phí:

o Hiện nay trên internet có rất nhiều công cụ thiết kế website miễn phí: wordpress, wix.com, webby, blogger là một trong những cộng cụ được nhiều người ưa chuộng nhất Theo kinh nghiệm và kiến thức chuyên môn thì mình chọn blogger của google

o Ngày 13/7/2009 blog 360 của yahoo chính thức đóng cửa sau sự kiện google ra mắt blogger, một công cụ quá tuyệt vời, quá mạnh để tạo blog

và tạo những website đẹp, chuyên nghiệp

o Sức mạnh blogger:

 Miễn phí đăng ký tài khoản, miễn phí máy chủ, miễn phí tên miền, tài khoản sau khi được tạo sẽ được cấp một tên miền có dạng www.abc.blogspot.com

 Nhanh chóng được đánh chỉ mục vào bộ máy tìm kiếm google, bài viết sẽ dễ dàng được tìm thấy trên công cụ này

 Không giới hạn băng thông (bandwidth), số blog cho một tài khoản,

số bài đăng cho một blog, không giới hạn số nhận xét, không giới hạn số thành viên cùng làm một blog

 Tiện ích phong phú, đáp ứng tối đa nhu cầu người dùng, có thể nhúng các đoạn mã javascript quảng cáo

 Thực hành thiết kế webiste :

o Tạo tài khoản blogger, tạo blog, tạo bài đăng (ít nhất 4 bài đăng), mỗi bài đăng tương ứng một nhãn khác nhau, chèn hình vào bài đăng, chèn video vào nài đăng, chèn link vào bài đăng

o Khi tạo bài đăng, giải thích về nhãn, thêm nhãn, bật tắt chức năng bình luận của khách hàng trong phần tùy chọn

o Vào www.vnexpress.net, chọn mục xã hội, copy một bài viết, tạo nhãn

là ‘kinh doanh’, tương cho các mục ‘bat dong san’, ‘dien tu’, ‘thoi

Trang 3

trang’, mỗi chuyên mục tạo một bài đăng, với nhãn tương ứng của từng chuyên mục

o Trở lại phần tổng quan, tạo trang: giới thiệu, dịch vụ, khuyến mãi, liên hệ

 Tùy chỉnh giao diện webiste với templates mẫu :

o Vào www.hoconline.info, đăng nhập với tài khoản của mình ->THIẾT KẾ WEB CĂN BẢN -> download, tải mẫu trong link 4 bài tập về máy

o Vào blog -> Mẫu -> sao lưu / khôi phục (phía trên bên phải), -> chọn tệp tin, tìm đến folder StyleMaster/StyleMaster.xml-> tải lên

o Giải thích về chức năng:

 ’tải xuống mẫu hoàn chỉnh’: nghĩa là khi thiết kế xong, mình sẽ tạo bản bakup hoàn chỉnh để lưu lại khi cần

 ‘tải lên mẫu từ tệp trong ổ đĩa của ban’: nghĩa là mình tải file giao diện lên để sử dụng.(file giao diện có trong phần download webtoancau.net)

o Vào phần bố cục phần đầu tiên chỉnh sửa favicon, thường dùng hình vuông, kich thước rất nhỏ, dưới 100kb

o Tiếp theo là phần chỉnh sửa tiêu đề, mô tả, logo

o Chỉnh sửa HTML (code): vào mẫu-> chỉnh sữa HTML.

 Chỉnh font chữ cho website: CTR + F, gõ từ khóa ‘Oswald’ thay chữ ‘Oswald’ bằng ‘tahoma’ (tahoma là font chữ chuẩn và đẹp nhất dành cho thiết kế web)

 Chỉnh sửa menu: Nhấn CTR + F, tìm chữ HOME tương ứng trên giao diện)

 Thay

 ‘Business’ -> ‘kinh doanh’

 ‘internet’ -> ‘bất động sản’

 ‘market’ -> ‘điện tử’

 ‘stock’ -> ‘thời trang’

 Lưu mẫu, xem blog

 Tương tự như vậy thay

 ‘downloads’-> ‘Tin Tức’

 ‘DVD’-> ‘Xã hội’

 ‘games’-> ‘Kinh Doanh’

 ‘software’-> ‘Thế giới’

 Đưa chuột vào menu xã hội xem có hiệu ứng gì không?

 Menu: Có 2 loại

Trang 4

o Loại 1: Khi click vào menu chỉ dẫn tới một liên kết duy nhất (link)

 Vd: ‘<li><a href='#'>Xã Hội</a></li>

 (‘#’: là liên kết cần đến, ‘Xã Hội’: tên hiển thị)

 Khi ta thay dấu ‘#’ = ‘www.webtoancau.net’,lúc này khi click vào chữ ‘Xã Hội’ sẽ dẫn đến website webtoancau.net



o Loại 2: Khi click chuột vào menu sẽ hiển thị nhiều bài viết có cùng nhãn

 Vd: ‘<li><a href='#'>Xã Hội</a></li> (‘#’: là liên kết cần đến, ‘Xã Hội’: tên hiển thị)

 Khi ta thay dấu ‘#’ =

‘www.webtoancau.net/search/label/ xa hoi’,lúc này khi click vào chữ ‘Xã Hội’ sẽ hiển thị tất cả các bài viết trong website webtoancau.net có nhãn là ‘xa hoi’



 Chỉnh sửa hình chạy trên slide:

 Click phải chuột vào hình trên slide, download hình về máy, sau đó click phải chuột vào hình vừa download xem tên hình, thuộc tính width (chiều rộng), height (chiều cao)

 Vào google.com.vn tìm hình ảnh->từ khóa ’sai gon ve dem’, công

cụ tìm kiếm->kích thước->chính xác->nhập chiều rộng 930, chiều cao 300 bằng với hình 1, chọn hình số 3, sau đó click phải chuột phải tấm hình ->sao chép URL hình ảnh->thay vào đoạn code http://3.bp.blogspot.com/-bF2KfRC9Bns/URV3rFVggXI/AAAAAAAA CZ8/WKhMCz1BDZ8/s000/1.jpg

 Với một tầm hình tự thiết kế, chúng ta cũng tạo đúng kích thước chiều rộng và chiều cao với hình 1, sau đó tạo một blog có tên là

‘dữ liệu’ v.v…, tạo bài đăng mới, úp hình tự thiết kế vào nội dung

của bài đăng, chọn kích thước ban đầu->lưu blog->xem blog, sau

đó click phải chuột phải tấm hình ->sao chép URL hình ảnh->thay vào đoạn code

http://3.bp.blogspot.com/-bF2KfRC9Bns/URV3rFVggXI/AAAAAAAA CZ8/WKhMCz1BDZ8/s000/1.jpg

 Trở về trang tổng quan Vào bố cục, xóa một số tiện ích:

 Xóa Blogroll

 Xóa blogger news

 Xóa blogger templates

Trang 5

 Lưu sắp xếp, xem blog.

 Xóa chữ cung cấp bởi blogger:

 CTR + F tìm từ khóa ’attribution’, thay ‘true’ = ‘false’, sau đó chọn lưu mẫu, vào lại bố cục -> Thuộc tính -> xóa.(giải thích

vì sao xóa chữ này, để phục vụ cho việc thiết kế website cho khách hàng)

 Vào bố cục, thêm tiện ích -> thêm hình ảnh, lấy hình bất kỳ

 Vào bố cục, thêm tiện ích -> thêm tiện ích HTML/Javascript, vào www.youtube.com, click vào một video bất kỳ mình thích, chọn chia sẻ->nhúng, copy đoạn code đó dán vào tiện ích Ta chỉnh lại chiều rộng và chiều cao cho phù hợp bằng đoạn code sau:

 Thay width="420" height="315" = width=”300” height=”250”

 Vào bố cục, thêm tiện ích -> dịch

 Vào bố cục, thêm tiện ích -> ô tìm kiếm

 Vào bố cục, thêm tiện ích -> Tin thời sự

 Tạo banner chạy dọc hai bên: vào www.thuthuattoancau.blogspot.com, đọc bài viết (‘tạo benner chạy dọc hai bên cho website’) Dán đoạn code đầu tiên sau thẻ <head>, dán đoạn code thứ 2 sau thẻ <body>, lưu mẫu, xem blog

 Kết quả cuối cùng: http://baitapmot.blogspot.com/

Bài 2: Website tin tức:

 Ôn lại kiến thức đã học ở bài 1 :

o Tạo blog mới, tạo 5 bài đăng mới, mỗi bài đăng tương ứng với một nhãn khác nhau

o Vào www.vnexpress.net, chọn mục xã hội, copy một bài viết, tạo nhãn là

‘xã hội’, tương cho các mục ‘kinh doanh’, ‘thế giới’, ‘giải trí’, mỗi chuyên mục tạo một bài đăng, với nhãn tương ứng của từng chuyên mục

o Trở lại phần tổng quan, tạo trang: giới thiệu, dịch vụ, khuyến mãi, liên hệ

o Vào phần bố cục, ôn lại phần tiêu đề, mô tả, logo

 Thực hành thiết kế website tin tức :

o Vào www.hoconline.info, đăng nhập với tài khoản của mình ->THIẾT KẾ WEB CĂN BẢN -> download, tải mẫu trong link bài tập 2 về máy

o Vào mẫu->sao lưu/ khôi phục,chọn tệp tin Boulevard vừa tải về máy -> tải lên

o Vào mẫu-> chỉnh sửa HTML CTR+F, gõ từ khóa ‘PT+Sans’, thay

PT+Sans+Narrow = tahoma (nhắc lại tahoma là font chuẩn nhất cho website) Chỉ cho học viên thấy được sự khác nhau khi thay font tahoma vào web

Trang 6

o Thay banner:click phải chuột vào hình banner, xem tên hình và thông số chiều rộng, chiều cao

o Vào www.google.com.vn -> hình ảnh-> gõ từ ‘quảng cáo’->công cụ tiềm kiếm->kích thước-> chính xác-> nhập vào rộng = 728, dài = 90 (giải thích

vì sao chọn kích thước đó: click phỉa chuột vào hình->kiểm tra phần tử sẽ thấy chiều rộng và dài)

o Click phải chuột vào hình số 3 từ trái sang, copy url hình ảnh, vào mẫu-> chỉnh sửa HTML, CTR+F với từ khóa ‘header-banner’, click phải chuột vào hình, chọn copy image URL và thay link

‘https://lh4.googleusercontent.com/-a11mluC5E6M/T-z8qOVHKcI/AAAAA AAABw8/j5MAVElCOw8/s1600/header-banner.jpg’ bằng link vừa copy trên google ‘http://diendan.iztech.vn/images/musiclogoy.gif’, sau đó lưu mẫu và xem kết quả, tuyệt vời phải không các bạn!

o Bắt đầu chỉnh sửa menu:

 Ôn lại kiến thức menu cho học viên

 CTR+F với từ khóa ‘Technology’, thay ‘<li><a href='#'>Technology</a></li>’ bằng ‘<li><a href='tên miền blog/search/label/XÃ HỘI'>XÃ HỘI</a></li>’

 Tương tự: Movies->THẾ GIỚI, Games->KINH DOANH,

Music->GIẢI TRÍ, (cho học viên làm và kiểm tra kết quả)

 Tiếp tục với slide ở trang chủ:

 Click phải chuột vào hình trên slide, download hình về máy, sau đó click phải chuột vào hình vừa download xem tên hình, thuộc tính width (chiều rộng), height (chiều cao)

 Lên google tìm hình mình thích và nội dung tương ứng làm cho web sinh động hơn

 Vào bố cục, xóa những tiện ích không cần thiết bên tay phải:

o Xóa comment

o Xóa 3 tiện ích kia luôn

o Xóa dòng cung cấp bởi blogger:

o CTR+ F với từ khóa ‘attribution’, thay true = false -> lưu mẫu vào bố cục-> thuộc tính -> xóa ->lưu và sắp xếp-> xem blog

Trang 7

 Vào bố cục, thêm tiện ích -> ô tìm kiếm.

 Vào bố cục, thêm tiện ích -> Tin thời sự

 Kết quả đạt được: http://baitap21.blogspot.com/

BÀI 3: Website kênh truyền hình:

 Ôn lại kiến thức đã học :

o Tạo blog mới, tạo 5 bài đăng mới, mỗi bài đăng tương ứng với một nhãn khác nhau, mỗi bài đăng là một video

o Vào youtube ->gõ ’dac nhan tam’, click phải chuột vào clip thứ 2, chia

sẽ-> nhúng Copy đoạn code được bôi đen chọn tab html dán vào, chọn nhãn là ‘SÁCH’

o Vào youtube ->gõ’chùa hoằng pháp’, click phải chuột vào clip thứ 2, chia sẽ-> nhúng Copy đoạn code được bôi đen, chọn tab html dán vào, chọn nhãn là ‘PHẬT PHÁP’

o Vào youtube ->gõ’dat phuong nam’, click phải chuột vào clip thứ 1, chia sẽ-> nhúng Copy đoạn code được bôi đen,chọn tab html dán vào, chọn nhãn là ‘PHIM TRUYỆN’

o Vào youtube ->gõ’phuong my chi’, click phải chuột vào clip thứ 1, chia

sẽ-> nhúng Copy đoạn code được bôi đen, chọn tab html dán vào, chọn nhãn là ‘phuong mỹ chi’

o Trở lại phần tổng quan, tạo trang: trang chủ, giới thiệu, dịch vụ, liên hệ

o Vào phần bố cục, ôn lại phần tiêu đề, mô tả, logo

 Thực hành thiết kế website kênh truyền hình :

o Vào mẫu->sao lưu/ khôi phục,chọn tệp tin VideoBox vừa tải về máy -> tải lên

o Vào www.google.com.vn -> hình ảnh-> gõ từ ‘vnexpress’->công cụ tiềm kiếm->kích thước-> chính xác-> nhập vào rộng = 468, dài = 60 (giải thích

vì sao chọn kích thước đó: click phỉa chuột vào hình->kiểm tra phần tử sẽ thấy chiều rộng và dài: trên hình có ghi kích thước)

o Click phải chuột vào hình số 3 từ trái sang, copy url hình ảnh, vào mẫu-> chỉnh sửa HTML, CTR+F với từ khóa ’empty ad’ thay dòng

‘https://lh4.googleusercontent.com/-ppIPwfFOV_Q/UK97CnNO3-I/AAAAA AAAElA/8Ks62eqZM4A/s468/empty_ad.gif’ bằng link vừa copy trên google ‘http://vietnetworks.com.vn/thietkeweb/banner-tet-2011.jpg’, sau đó lưu mẫu và xem kết quả

o Bắt đầu chỉnh sửa menu:

 Ôn lại kiến thức menu cho học viên

Trang 8

 CTR+F với từ khóa ‘Portfolio’, thay ‘ Portfolio’ bằng ‘MEDIA’.

 Tương tự như vậy:

 ‘Portfolio 1 col’ =’chùa hoằng pháp’ (gắn link cho menu theo nhãn đã tạo)

 ‘Portfolio 2 col’ =’đất phương nam’(gắn link cho menu theo nhãn đã tạo)

 ‘Portfolio 3 col’ =’Âm nhạc’

 ‘Portfolio 4 col’ = ’đắc nhân tâm’(gắn link cho menu theo nhãn đã tạo)

 Vì sao không hiển thị hình ảnh trên video?, trước khi click vào video, click phải chuột -> copy hình ảnh, vào nội dung bài đăng, dán hình vào thêm width=’0’, height=’0’ vào trong thẻ <img>

 Tiếp tục với slide ở trang chủ, để video chạy được ở vị trí này cần chú ý quan trọng:

 src='http://www.youtube.com/embed/-uJ_C0cZFfw' -> dùng 11 ký

tự của video phía sau ‘http://www.youtube.com/watch?v= ’

 Xóa dòng cung cấp bởi blogger:

o CTR+F với từ khóa ‘attribution’, thay true = false -> lưu mẫu vào bố cục-> thuộc tính -> xóa -> lưu và sắp xếp-> xem blog

 Vào bố cục, xóa những tiện ích không cần thiết bên tay phải:

 Vào bố cục, thêm tiện ích -> ô tìm kiếm

 Bốn tiện ích link list 1, 2, 3, 4 có thể để hoặc không tùy thích

 Tuyệt vời phải không các bạn, chúc các bạn thành công!



Bài 4: Website bán hàng:

 Ôn lại kiến thức đã học :

o Tạo blog mới, tạo 5 bài đăng mới, mỗi bài đăng tương ứng với một nhãn khác nhau: IPHONE, IPAD, SAMSUNG, NOKIA,HTC, mỗi bài đăng có hình ảnh và nội dung

o Trở lại phần tổng quan, tạo trang: giới thiệu, dịch vụ, liên hệ

Trang 9

o Vào phần bố cục, ôn lại phần tiêu đề, mô tả, logo.

 Thiết kế giao diện website bán hàng :

o Vào mẫu->sao lưu/ khôi phục,chọn tệp tin Gamer Darkpaper vừa tải về máy -> tải lên

o Thay banner: click phải chuột vào banner download hình về máy, xem tên

và kích thước của hình

o Vào www.google.com.vn -> hình ảnh-> gõ từ ‘iphone’->công cụ tiềm

kiếm->kích thước-> chính xác-> nhập vào rộng = 970, dài = 140 (giải thích vì sao chọn kích thước đó: click phỉa chuột vào hình->kiểm tra phần tử sẽ thấy chiều rộng và dài: trên hình có ghi kích thước)

o Click phải chuột vào hình, copy url hình ảnh, vào mẫu-> chỉnh sửa HTML, CTR+F với từ khóa ‘header’ thay dòng

‘http://1.bp.blogspot.com/-H4DAZhwVcII/T9dOpEpsQ4I/AAAAAAAAG1w/mFQ_04it_vE/s1600/ header.png’ bằng link vừa copy trên google

‘http://apple-rostov.com/slides/2109201322503215.jpg’, sau đó lưu mẫu

và xem kết quả

o CTR+F ‘oswald’ và thay ‘oswald’ = ‘tahoma’

o Bắt đầu chỉnh sữa menu:

 CTR+F ’menu 1’ và thay menu 1 = NOKIA, nhãn là nokia (gắn link với nhãn tương ứng)

 CTR+F ‘drop menu1’ và thay drop menu1 bằng apple

 Tiếp tục:

 Sub menu 1 = iphone 5c (gắn link với nhãn tương ứng)

 Sub menu 2 = iphone 5s (gắn link với nhãn tương ứng)

 Sub menu 1 = iphone 5 (gắn link với nhãn tương ứng)

 Sub menu 1 = iphone 4 (gắn link với nhãn tương ứng)

 Drop menu 2 thay bang sam sung:

 Tiếp tục:

o Sub menu 1 = galaxy s3

o Sub menu 2 = galaxy s7

o Sub menu 3 = galaxy tab 7

o Sub menu 4 = galaxy note 3

o Bỏ Sub menu 5, 6

 Thay menu 2 thành HTC (gắn link với nhãn tương ứng)

 Vào bố cục, xóa blogroll, xóa một label, xóa hết những tiện ích ko cần thiết

 Xóa cung cấp bởi blogger

Trang 10

o CTR+F với từ khóa ‘attribution’, thay true = false -> lưu mẫu vào bố cục-> thuộc tính -> xóa -> lưu và sắp xếp-> xem blog

 Những tiện ích ở phần footter có thể xóa

Kiến thức bổ sung:

 Cách tạo link facebook ( http://thuthuattoancau.blogspot.com/2013/07/ua-trang-like-button-page-facebook-vao.html)

 Tạo hỗ trợ trực tuyến skype ( http://thuthuattoancau.blogspot.com/2013/07/ua-bieu-tuong-ho-tro-truc-tuyen-skype.html)

 Chèn nhạc vào blog ( http://thuthuattoancau.blogspot.com/2013/07/chen-nhac-vao-blog.html)

 Hướng dẫn cấu hình tên miền :

khi chúng ta mua một tên miền, nơi cung cấp tên miền sẽ gởi cho ta một email

có nội dung như sau:

Chúng ta click vào link http://access.pavietnam.vn, màn hình hiện ra như sau:

Định dạng
Số trang	12
Dung lượng	338 KB