Huong Dan Tao Website Step by Step

Tác giả: Bùi Thanh Liêm www.cloudmedianews.com www.sosanhtinhnang.com

THIẾT KẾ WEBSITE CHUYÊN NGHIỆP

CHO NGƯỜI KHÔNG CHUYÊN

LỜI NÓI ĐẦU

Bạn đã có một website được thiết kế chuyên nghiệp chưa? Đây có lẻ là một câu

hỏi khó đối với những bạn chưa có điều kiện tiếp xúc với ngôn ngữ lập trình web. Hiện

nay, việc tự tìm cho mình một phần mềm thiết kế website là rất đơn giản, cộng thêm

hàng loạt dịch vụ tạo website chuyên nghiệp trực tuyến liên tục ra đời phục vụ mọi nhu

cầu của từng đối tượng người dùng. Cho nên các bạn ấy không cần tự “mài mò” những

ngôn ngữ lập trình phức tạp để tạo website chuyên nghiệp nữa mà chỉ cần có trong tay

một phần mềm hoặc một dịch vụ chuyên nghiệp là có thể tạo ra một website theo như

mong muốn.

Các phần mềm và dịch vụ tạo website chuyên nghiệp được giới thiệu trong

chuyên đề này tuy không phải là mới nhưng được trình bày theo phong cách “dễ đọc –

dễ học – dễ vọc” thì chắc chắn rằng các bạn sẽ không cần tham khảo một tài liệu nào

khác.

PHẦN I

HAI PHẦN MỀM THIẾT KẾ WEBSITE

Hiện nay có rất nhiều phần mềm phục vụ cho việc thiết kế website chuyên

nghiệp nhưng ở đây tôi chỉ giới thiệu đến các bạn hai phần mềm có giao diện thân thiện

và cách sử dụng tương đối đơn giản. Đó là Incomedia WebsiteX5 v8.0 và H&M

StudioLine Web v3.6. Mỗi phần mềm có những ưu, khuyết điểm riêng và nó cũng phụ

thuộc rất nhiều vào nhu cầu, ý tưởng của người thiết kế website. Do đó, các bài viết

dưới đây sẽ giới thiệu khái quát về những đặc điểm của từng phần mềm đồng thời cũng

giới thiệu chi tiết về cách cài đặt và sử dụng chúng.

I. Incomedia Website X5 v8.0 Có lẻ phần mềm Incomedia Website X5 có giao diện đơn giản nhất trong các

phần mềm cùng loại, với cửa sổ thuật sĩ hướng dẫn người dùng một cách khá chi tiết

theo từng bước một thì tin chắc rằng đây là một lựa chọn cho những bạn muốn thiết kế

một website trong khoản thời gian ngắn. Ngoài ra, phần mềm còn cung cấp cho bạn một

thư viện gồm rất nhiều các template đã được tạo sẵn.

1.Cài đặt phần mềm:

Đầu tiên, bạn cần tải phần mềm Incomedia Websites X5 v8.0 với dung lượng

78,5MB tại địa chỉ: http://www.mediafire.com/?gmy3tjtondt .Sau khi tải về, bạn tiến

hành nhấn đôi vào tập tin cài đặt rồi chờ một khoảng thời gian để cửa sổ Incomedia

Setup hiện ra để lựa chọn ngôn ngữ (Choose your language), bạn nên chọn tiếng Anh

(EN-English) rồi nhấn OK.


Công việc tiếp theo là nhấn Next> nhấn Accept> nhấn Next> nhấn Next> ở cửa

sổ Incomedia Website X5 v8 Evolution Installation wizard, bạn chọn thư mục cài đặt

của phần mềm (hoặc có thể để mặc định C:\Program Files\WebSite X5 v8 – Evolution)

bằng cách nhấn vào nút Browse để duyệt đến thư mục cần chọn. Cuối cùng nhấn vào

Install để bắt đầu cài đặt.

Rồi khởi động Incomedia WebsiteX5 và nhấn nút Start Evolution 8 để bắt tay

vào việc thiết kế websites. Lưu ý, để thấy được nút Start Evolution 8 bạn nên chỉnh độ

phân giải của màn hình lên mức 1024×768 bởi vì ở độ phân giải thấp hơn nút này có

thể bị che khuất.


2.Sử dụng phần mềm:

Ở cửa sổ Project Selection, bạn lựa chọn mục Create a new Project để tạo một

dự án mới, còn lựa chọn Edit an existing Project chỉ sử dụng khi bạn đã có sẵn một dự

án (dự án này được tạo từ mục Create a new Project). Kế đến, bạn nhấn Next để tiến

hành soạn web với năm bước: General Settings, Plan Website, Create Pages, Advanced

Settings, Export.

-Bước 1: General Settings-Những thiết lập đầu tiên.

Ở bước đầu tiên này giúp bạn định hình về website của mình: tiêu đề trang web

được hiển thị trên trình duyệt (Website Title), tên bạn hay tên công ty (Website Author),

địa chỉ web (Website Address (URL)), mô tả ngắn về trang web (Website Description),

từ khóa (Websites Keywords), ngôn ngữ trong web (Content Language), biểu tượng của

trang web (Website Icon-dạng ico, bmp), rồi nhấn Next.


-Choose Menu Type: bạn sẽ chọn một trong hai vị trí đặt menu của web:

Vertical Menu-menu dạng đứng luôn nằm phía bên trái, Horizontal Menu-menu dạng

nằm phía trên cùng của trang web, rồi nhấn Next.

Lưu ý, nếu muốn các menu của web hiển thị ở phía dưới trang thì đánh kiểm vào ô

Show first level menu at the bottom of the page.

-Choose Template Style: Kế đến, bạn cần lựa chọn một trong hai dạng Custom

Template hoặc Default Template để xây dựng mẫu của website.

Đối với dạng Custom Template, bạn sẽ được tự tay thiết kế một mẫu web mang

phong cách cá nhân bằng cách chọn từng mục ở Model Layout. Ở mục Title Bar (thanh

tiêu đề) giúp thay đổi màu nền (Color), chèn hình nền (Image), kiểu lặp lại hình nền

(Repeat), kiểu canh chỉnh (Alignment) và kích thước của thanh tiêu đề (Width-bề rộng,

Height-bề cao). Các việc làm này cũng thực hiện tương tự đối Page Contents (nội dung

trang) và Footer (phần chân trang).

Còn đối với dạng Default Template, Incomedia WebsiteX5 sẽ cung cấp cho bạn

một thư viện gồm nhiều mẫu website đã được thiết kế sẵn, thuộc nhiều chủ đề như:

Abstract, Geometry, Company, Nature, Themes, Animated, Interior Design,

Panorama,… Bạn nhấn vào từng mẫu của từng chủ đề để tiến hành lựa chọn, nếu cần

tối ưu màu sắc của mẫu thì kéo thanh trượt ở mục Color Customization.


-Edit Template Graphic: Ở đây, bạn có thể chỉnh sửa giao diện mẫu trang web

theo ý thích bằng các công cụ mà chương trình cung cấp. Trong đó có Insert Text ( )-

chèn vào văn bản, Insert Image ( )-chèn hình ảnh, Insert Flash Animation ( )-chèn

hiệu ứng Flash, Insert Slideshow ( )-chèn bài trình diễn, Insert Search Field ( )-chèn

trường tìm kiếm, Insert HTML Code ( )-chèn ngôn ngữ HTML. Ở thẻ Header, bạn

chọn các yếu tố về Background Properties (hình nền), Text Properties (đoạn văn ngắn-

bạn có thể chọn thêm hiệu ứng cho chữ, cỡ chữ, Insert Flash Animation (chèn các Flash

động) và cũng thực hiện tương tự đối với thẻ Footer.


Bước 2: Plan Website-Tạo sơ đồ website

Việc tạo sơ đồ web giúp cho trang web của bạn có khoa học hơn, giúp cho người

truy cập hiểu được các tiêu đề và định hướng được hoạt động của họ trên trang web. Ở

đây, việc tạo sơ đồ cũng giống như việc tạo cây thư mục trong Windows Explorer, tức

là bạn chọn vào Menu rồi nhấn New Level để tạo ra menu chính rồi lần lượt tạo các

menu thứ cấp (hoặc tạo ra các trang thuộc menu) bằng cách nhấn vào menu chính tương

ứng rồi chọn New Level (hoặc New Page). Lưu ý, bạn không nên viết các menu bằng

tiếng Việt có dấu tại đây bởi vì không hiển thị được nhưng đến bước 4 thì bạn sẽ nhập

được tiếng Việt, sau khi tạo xong rồi nhấn Next.

Bước 3: Create Pages-Xây dựng nội dung web

Đây là một bước tương đối quan trọng nó quyết định chất lượng của website mà

bạn tạo ra. Bạn tiến hành soạn thảo trang web bằng cách kéo thả (drag and drop), tức là

bạn nắm giữ chuột kéo các đối tượng ở khung Object bên phải vào khung bên trái.

Ở khung này, bạn sẽ nhìn thấy các công cụ: Object Content ( )-thêm nội dung

cho đối tượng, Cell Format ( )-định dạng cho ô khi đối tượng được chèn nội dung,


Alignment ( )-điều chỉnh đối tượng, Enlarge by one row ( ) – phóng to một hàng,

Add a new row ( )-thêm hàng mới, tối đa là 28 hàng, Add a new column ( )-thêm

cột mới, tối đa là 6 cột. Các đối tượng chính gồm có:

-Text: là nơi bạn nhập vào văn bản, chỉnh sửa các văn bản, thay đổi màu sắc,

font chữ, chèn hình ảnh (Insert Image), chèn công thức toán học (Insert Equation), chèn

các đoạn mã HTML (Enable HTML code),…khi xong nhấn OK để hoàn tất.

-Image: giúp chèn các hình ảnh vào web, bên cạnh đó ở tính năng này còn cung

cấp cho bạn một số công cụ chỉnh sửa hình ảnh. Ở thẻ General, bạn chọn đường dẫn

đến tập tin ảnh ở ô Image File và lưu ý đến mục Save Options giúp tối hình ảnh sang

định dạng JPG (JPG quality, Resample Method). Trong cửa sổ Preview bên phải, bạn

nhấn vào nút Edit để cắt, thêm hiệu ứng, bộ lọc, thêm khung cho hình ảnh. Còn thẻ

Display giúp tự động thay đổi kích thước ảnh (Automatically Resize Image), phóng to

hình ảnh (Image Zoom).

-Table: chèn các loại bảng với đầy đủ văn bản, hình ảnh, công thức.

-Flash Animation: đưa các dạng Flash động vào web, bạn nhấn vào nút Select

tại Local File để duyệt đến tập tin trên ổ cứng hoặc nhập vào đường dẫn đến tập tin

flash trên Internet tại Internet File.


Ngoài ra, còn nhiều đối tượng khác như: Video/Sound, Image Gallery-thư viện

ảnh, Slide Show-album ảnh, Email Form-Email liên lạc với bạn, HTML Code-nhập mã

HTML, Product List-danh sách sản phẩm.

Sau khi thiết kế cho trang chủ xong, bạn tiếp tục nhấn Next để thiết kế cho các

trang khác cũng bằng những đối tượng và công cụ nêu trên.

Bước 4: Advanced Settings-Những thiết lập nâng cao Ở bước này giúp cho website của bạn mang một giao diện với phong cách

chuyên nghiệp. Bạn có thể tùy thích thêm bớt các tính năng cũng như chỉnh sửa giao

diện trang web. Trong số những thiết lập nâng cao này bạn cần lưu ý các mục quan

trọng:

-Main Menu: Gồm có bốn thẻ tính năng: General, Text, Graphic, 3D Style giúp

thay đổi các thiết lập mặc định của các menu chính. Ở thẻ General, bạn đánh dấu kiểm

vào Create button as image để tạo các nút dạng 3D (khi đó thẻ 3D Style mới hiện ra) và

có thể tăng hay giảm độ rộng menu (Width), khoảng cách giữa chữ và viền (Inner

Margin), khoảng cách giữa các nút (Outer Margin). Kế đến thẻ Text, giúp thay đổi font

và cỡ chữ (Font), kiểu font (Font Style), điều chỉnh vị trí chữ (Alignment). Lưu ý, để

viết tiếng Việt cho menu bạn cần chọn các font chữ VNI và phù hợp với bảng mã, kiểu

gõ. Thẻ Graphic, bạn bấm vào các nút màu tương ứng để thay đổi về màu nền của

menu (Background Color), màu nền menu khi đưa chuột đến (Background Color on

Mouse Over), màu chữ (Text Color), màu chữ khi đưa chuột đến (Text Color on Mouse

Over),…Ở thẻ 3D Style giúp tăng thêm các hiệu ứng đẹp mắt cho menu.

-Drop Down Menu và Sub Menu: Cũng thực hiện tương tự như Main Menu,

tức là bạn sẽ thiết lập cho các menu thả xuống (hay nói cách khác l à menu thứ cấp).

-Text Style: Những thay đổi về kiểu chữ được tập trung tại thẻ General, ở đây

bạn tiến hành chọn từng khu vực văn bản ở Text Type rồi nhìn xuống mục Style để thay

đổi về màu nền (Background Color), màu chữ (Text Color), Font, canh chỉnh

(Alignment). Riêng ở thẻ Link style, bạn thiết lập về màu sắc của các đường dẫn trên

website: đường dẫn chưa xem (Active Link), đường dẫn đã xem (Visited Link), màu chữ

khi đưa chuột đến đường dẫn (Mouse over Link), màu nền khi đưa chuột đến đường dẫn

(Background on Mouse Over Link), gạch chân của chữ chứa đường dẫn (Underline

Link), gạch chân của chữ chứa đường dẫn khi đưa chuột đến (Underline Link On Mouse

Over).


-Welcome Page: Giúp bạn tạo ra trang chào mừng nó sẽ hiện ra trước khi vào

trang chủ. Bạn đánh dấu kiểm vào mục Show Welcome Page, chọn màu nền tại Page

Background Color và nhấn vào nút Select (biểu tượng có dấu ‘…’) để duyệt tập tin hình

ảnh hoặc Flash làm biểu tượng đại diện cho web. Ngoài ra, nếu web có nhiều ngôn ngữ

thì chọn hình ảnh đại diện bằng quốc kì của nước đó ở mục Language Settings (theo

mặc định thư mục chứa quốc kì các nước ở C:\Program Files\WebSite X5 v8 -

Evolution\Flags).

-Advertising Corner: Nếu bạn cần quảng cáo một vấn đề gì đó trên web thì đây

là một tính năng tuyệt vời. Nó sẽ giúp tạo ra một hiệu ứng lật trang hoặc nhiều hiệu ứng

đồ họa đẹp mắt khác khi bạn đưa chuột đến, để thực hiện cần chọn kiểu hiệu ứng

(Type), tập tin hình ảnh quảng cáo (Image/Animation File), đường dẫn khi nhấn vào

quảng cáo (Page to Link to on Click), kích thước hiển thị (Width and Height), trang

hiển thị (Show on Home Page Only-chỉ có trang chủ, Show on all Pages-tất cả các

trang).


-Reserved Area: bạn sẽ được lựa chọn khu vực chỉ dành riêng cho bạn và ban

quản trị. Bạn nhấn nút Add , rồi đặt tên cho khu vực riêng tại Reserved Area Name, tên

người truy cập (Username), mật khẩu (Password) và nhấn Select để duyệt đến các trang

mà bạn muốn tạo khu vực riêng, nhấn OK.

Bước 5: Export-Xuất ra sản phẩm

Đây là công đoạn cuối cùng của toàn bộ quá trình thiết kế website của bạn, ở

bước này sẽ có ba lựa chọn:

-Upload to the Internet: Giúp bạn tải toàn bộ trang web đã hoàn thành lên

Internet, bạn cần điền vào các thông tin về tài khoản FTP (sẽ trình bày về tài khoản FTP

ở phần sau): FTP Address (chẳng hạn ftp.thanhliem24.com hay địa chỉ IP), User name

(tên tài khoản), Password (mật khẩu), Initial Directory (đường dẫn đến thư mục), rồi

nhấn Next. Nếu tiến trình tải dữ liệu lên hosting không hoạt động thì bạn cần kiểm tra

lại kết nối Internet hoặc kiểm tra và vô hiệu tường lửa, chương trình chống virus trên

máy hoặc server tải lên không hoạt động, đang bảo trì hoặc chuyển sang lựa chọn kế

tiếp.

-Export to Disk: Giúp xuất website của bạn ra một thư mục trên ổ cứng, bạn bấm

vào nút Select tại mục Destination Directory để duyệt đến thư mục cần lưu trữ và nhấn

Start.

-Optimize and Batch to Folder: giúp tối ưu hóa các hình ảnh trên website và xuất

ra thư mục trên máy tính.


II. H&M StudioLine Web 3.6

Phần mềm H&M StudioLine Web 3.6 có giao diện giúp cho bạn dễ dàng tương

tác với các đối tượng trong website mà không cần biết đến ngôn ngữ HTML; giúp thiết

kế và duy trì một website rất chuyên nghiệp; bạn có thể biên tập layout, trang, hình ảnh

và các hiệu ứng đồ họa theo ý định của mình, thiết lập mẫu cho các trang chỉ bằng

phương pháp kéo thả (drag&drop); …Nhưng khi so với phần mềm Incomedia

WebsiteX5 v8 thì việc sử dụng H&M StudioLine Web 3.6 sẽ có phần khó hơn vì bạn

phải tự tìm kiếm các công cụ trên cửa sổ làm việc.

1.Cài đặt phần mềm:

Phần mềm H&M StudioLine Web 3.6 có dung lượng 100MB, bạn có thể tải bản

đầy đủ tại http://www.mediafire.com/?ywntm0vmm2y. Sau khi tải về phần mềm H&M

StudioLine Web, bạn hãy nhấn nút Accept khi đã nhấn đôi chuột vào tập tin

StudioLine_W.exe. Trong cửa sổ kế tiếp, bạn nhấn nút Browse để chọn thư mục lưu trữ

hình ảnh và trang web bên dưới mục Select the path where StudioLine stores your

images and websites; chọn thư mục chứa bộ cài đặt tại mục Select the path for the

StudioLine Program files, nhấn Next. Kế đến thì việc cài đặt diễn ra bình thường giống

như các phần mềm thông dụng khác.

Yêu cầu hệ thống:

-Hệ điều hành Windows 98, Windows 2000, Windows XP.

-Bộ xử lý tối thiểu phải là Pentium III 800MHz.

-RAM tối thiểu là 256MB và ổ cứng phải còn dung lượng ít nhất là 150MB.

-Đặc biệt, màn hình phải có độ phân giải 1024×768 pixels (24bit).

Bây giờ, chúng ta có thể bắt tay vào việc thiết kế một trang web cho chính mình

với H&M StudioLine Web 3.6.

2.Sử dụng phần mềm:


Khi khởi động vào chương trình thì bạn sẽ được lựa chọn một trong các hình

thức: làm việc với trang web (…work on sites and pages), làm việc với nơi lưu trữ hình

ảnh (…work with the Image Archive), làm việc với các mẫu web (…work on layout

templates), thoát khỏi phần mềm (…exit StudioLine).

Bước 1: Thiết kế mẫu web

Ở các lựa chọn trên, bạn chọn work on layout templates để tiến hành biên tập

mẫu web của mình. Trong mục Basic, H&M StudioLine Web 3.6 sẽ cung cấp ba dạng

mẫu website theo cách sắp xếp các menu: Centered, Left, Top để bạn lựa chọn.

-Thay đổi tiêu đề và menu:

Tại cửa sổ thiết kế, bạn có thể tùy ý thay đổi kích thước của các đối tượng bao

gồm kích thước các menu, kích thước trang, kích thước tiêu đề (Header),…bằng cách

kéo thả. Và để nhập văn bản tiếng Việt hãy sử dụng các font chữ VNI tương ứng với

bảng mã VNI Windows (bộ gõ Unikey). Muốn chỉnh sửa đối tượng nào thì chỉ việc

nhấn đôi chuột vào nó để xuất hiện thanh công cụ và thanh thước.


-Tạo liên kết:

Một việc làm khá quan trọng nữa là bạn nhấn chuột phải ở từng menu chọn Link

để tạo liên kết cho chúng. Trong cửa sổ Link for Objects chọn hình thức liên kết, rồi

nhấn Browse (hoặc tương đương), chẳng hạn nếu bạn chọn Link to URL thì cần chọn

giao thức liên kết http://, https://, ftp:// và nhập vào đường dẫn ở ô cạnh bên.

-Tạo nền và khóa mẫu:

Kế đến, bạn cần tạo hiệu ứng nền để làm nổi bật nội dung trang web bằng cách

bấm chuột phải vào khu vực nền chọn Background, nhấn vào thẻ màu cạnh dòng chữ

Background Color để thay đổi màu nền, khi xong cần bỏ dấu kiểm tại mục Use

Background Image thì thay đổi mới có hiệu lực. Lưu ý, khi sử dụng mẫu đã thiết kế cho

từng trang để tránh bị người khác vô tình thay đổi thì hãy nhấn chuột phải vào nền và

chọn Layout Objects Locked.


Bước 2: Xây dựng nội dung cho các trang.

Ở lựa chọn đầu tiên (…work on sites and pages), bạn hãy nhấn Create page và

đặt tên cho web tại ô Page Name trong cửa sổ Create New Page. Khi bước vào giao

diện của H&M StudioLine Web, bạn sẽ phát hiện cửa sổ làm việc có giao diện gần

giống với bộ Office thường dùng nhưng nó có thêm các thanh điều hướng để quản lí

các nhóm tính năng (Navigation Pane); cửa sổ tương tác (thiết kế); thùng rác (Recycle

bin)-nơi chứa những bức ảnh bị xóa, những thiết lập và các bộ lọc.

*Làm việc với thanh điều hướng -Navigation Pane:

Các nhóm tính năng chính trên thanh điều hướng:

-Albums: là thư viện giúp cho bạn tiện lợi hơn trong việc thiết kế trang web, nếu

cảm thấy StudioLine Web chưa cung cấp đủ thì bạn nhấn Browse and Load để duyệt

đến bức ảnh có trên máy rồi kéo thả bức ảnh mong muốn vào đúng chủ đề trên thư mục

Design. Ngoài ra, bạn có thể dùng công cụ Edit để chỉnh sửa bức ảnh theo ý mình.

-Image Toolbox: Tập hợp các công cụ giúp bạn chỉnh sửa các hình ảnh như:

canh chỉnh hình ảnh (Image Alignment), xoay ảnh (Rotate), cắt (Crop), tự động cân đối

màu sắc ảnh (Auto Tone Levels), thay đổi màu đối tượng (Gradation), làm mờ ảnh

(Blur),…Bên cạnh đó còn có rất nhiều công cụ làm hiệu ứng hình ảnh: chiếu sáng một


bên đối tượng (Buttonize & Shadow), trắng đen (Black &

White), đóng bản quyền lên ảnh (Text), xoay ngược bức

ảnh (Invert Image),…

-Timeline: Cho bạn biết chính xác thời điểm mà

bạn chèn một đối tượng hình ảnh nào đó vào thư viện.

Công cụ có cách sắp xếp rất khoa học giúp bạn nhanh

chóng tìm ra các bức ảnh.

-Image Archive Filter: Tính năng giúp bạn lọc ra

những hình ảnh được lưu trữ trong thư viện (Albums) với

những thông tin do chính bạn cung cấp vào các ô:

Descriptor, Operator, Value. Khi đó StudioLine Web sẽ

xem xét thông qua các gợi ý đó và trả lại cho bạn cây thư

mục chứa các hình ảnh phù hợp (Show without folder

tree).

-Sites: Đây chính là nhóm tính năng quan trọng

trong Navigation Pane, chứa sơ đồ website của bạn. Cũng

giống như Windows Explorer, bạn cũng phải tiến hành tạo

các thư mục chính tương ứng với chủ đề chính mà mình

dư kiến, nhấn vào biểu tượng New Folder ( ) để tạo. Khi

xong, việc kế đến là cần tạo ra các trang nằm trong các

thư mục đó, bạn nhấn New ( ) rồi chọn thư mục ở bên

phải và đặt tên vào ô Page Name, nhấn OK. Việc làm này diễn ra nhanh hay chậm là

tùy thuộc vào quy mô trang web của bạn. Lưu ý, để tránh bị lỗi về chữ bạn không nên

gõ tiếng Việt có dấu ở phần tạo thư mục, tạo trang này.

*Làm việc với các trang

Sau khi đã làm quen và thành thạo với những nhóm tính năng nêu trên, bạn hãy

tiến hành thiết lập mẫu đã thiết kế (Layout Temlate) cho tất cả các trang của website.


Bạn vào cửa sổ StudioLine Explorer –Layout Templates (biểu tượng trên thanh

công cụ) rồi kéo-thả mẫu đó vào từng trang, nhấn Apply ở cửa sổ hiện ra, sau đó hãy

xây dựng nội dung cụ thể cho các trang ấy.

Ngoài ra, chương trình còn nhiều công cụ khác giúp cho việc biên tập nội dung

web nhanh chóng và chuyên nghiệp: Text Link Properties (thuộc tính các liên kết),

Search and Replace (tìm kiếm và thay thế từ hoặc cụm từ), Spell Checker (kiểm tra

chính tả), Include HTML File (gồm tập tin HTML).

Bước 3: Xuất ra sản phẩm

Menu Publish cung cấp cho bạn nhiều lựa chọn để xuất ra sản phẩm nhưng trong

đó cần chú ý đến hình thức Profile. Trong cửa sổ Publishing Profile, bạn nhấn Edit để

điền vào những thông tin về tài khoản FTP của mình: FTP server, Login/User (tên tài

khoản), Password (mật khẩu), Default Document,…

Nếu tiến trình đưa dữ liệu lên hosting không gặp trở ngại thì bạn sẽ có một

website chuyên nghiệp và tự tin chia sẻ với bạn bè, đồng nghiệp.

III. Dịch vụ cung cấp tên miền và hosting miễn phí


Đối với hai phần mềm tạo website trên thì bạn cần phải tải dữ liệu lên máy chủ.

Hiện nay, việc tự mua cho mình một tên miền (domain) và một hosting không gì khó

khăn nhưng trong thời gian tập làm website bạn không cần phải đầu tư lớn như thế. Các

dịch vụ miễn phí cung cấp tên miền, hosting cũng có rất nhiều nhưng dịch vụ hoạt động

ổn định thì chỉ đếm trên đầu ngón tay. Tên miền co.cc và hosting

www.000webhost.com được rất nhiều người dùng web lựa chọn vì tính ổn định của nó

và cả hai đều hỗ trợ tiếng Việt. Do đó, ở bài viết này sẽ giới thiệu về tên miền Co.cc,

còn về hosting thì đã được giới thiệu trên Cẩm nang máy tính số 35.

Bước 1: Đầu tiên, bạn truy cập vào website www.co.cc và chuyển giao diện web về

ngôn ngữ Việt để dễ sử dụng bằng cách nhấn vào nút xổ xuống tại mục Change

Language > tìm đến Tiếng Việt.

Bước 2: Bạn nhấn vào mục Cần một tên miền mới > nhập vào tên miền muốn tạo và

nhấn nút Kiểm tra tính sẵn sàng > nhấn nút Tiếp tục đăng kí. Trong cửa sổ kế tiếp, bạn

nhập vào ô Tên người dùng (Email) địa chỉ mail, Mật khẩu, xác minh từ vào ô bên cạnh

và nhấn Đăng nhập.

http://www.000webhost.com/

http://www.co.cc


Bước 3: Kế đến, bạn nhấn Cài đặt để bước vào của sổ quản lí tên miền (Manage

Domain). Ở đây bạn có thể cài đặt Name Server hướng đến máy chủ được cung cấp bởi

hosting www.000webhost.com bằng cách nhập vào hai ô Name Server 1 và Name

Server 2, nhấn Cài đặt để hoàn tất.

PHẦN II

DỊCH VỤ TẠO WEBSITE TRỰC TUYẾN

Không cần phải trải qua các bước cài đặt phần mềm, đăng kí tên miền, hosting

và tải dữ liệu lên máy chủ, đây có lẻ là những lợi thế trước tiên khi ta đến với các dịch

vụ tạo website trực tuyến. Như đã nói ở trên, các dịch vụ dạng này có rất nhiều nhưng

nói về khả năng đáp ứng cho người dùng thì OfficeLive của Microsoft luôn giữ vị trí

hàng đầu. Khi đến với dịch vụ tạo website của Office Live, bạn sẽ được cung cấp miễn

phí một dung lượng lưu trữ được xem là khá lớn với người dùng phổ thông là 500MB.

Không những vậy, bạn sẽ nhanh chóng tạo cho mình một trang Web mà không gặp phải

một khó khăn gì, bởi vì chắc hẳn ai sử dụng máy tính cũng đã dùng qua Microsoft

Office. Website được bạn tạo ra từ dịch vụ này mang đầy phong cách chuyên nghiệp

không thu kém gì với một website được lập trình bằng HTML. Bây giờ, bạn có thể bắt

tay vào việc thiết kế website bằng bộ ứng dụng trực tuyến Office Live:

I. Đăng kí tài khoản Bước 1: Bạn hãy truy cập vào trang Web: http://www.officelive.com và quan sát tìm

đến mục Also from OfficeLive: Get a Free Website and more rồi nhấn nút Create a

Free Website.

http://www.000webhost.com/


Bước 2: Trong cửa sổ Sign up for Microsoft Office Live Small Business, bạn cần khai

báo đầy đủ những thông tin có chứa dấu sao ‘*’:

-Nhập vào địa chỉ email tại ô Your e-mail address rồi nhấn Next (e-mail của gmail hoặc

yahoo cũng được);

-Nhập mật khẩu ít nhất 6 kí tự vào hai ô Type password và Retype password; chọn tỉnh

(thành phố, tiểu bang) tại State/Province; nhập số bưu chính tại Zip/Postal Code (số này

phải chính xác, chẳng hạn như bang New York có số này là 10001); chọn câu hỏi bảo

mật Secret question và trả lời ít nhất năm kí tự tại Secret answer; chọn email thay thế

để OfficeLive gửi thông tin khi bạn quên mật khẩu tại Alternate e-mail address; rồi

nhấn Save and continue.


-Kế đến, bạn cần điền một số thông tin cá nhân tại mục Enter your information gồm có:

First name-tên, Last name-họ, Organization name-tên tổ chức, Type of organization -

loại hình tổ chức, Number of employees-số lượng nhân viên, rồi nhấn Save and

continue.


-Tiếp tục, bạn hãy nhập mã an toàn gồm tám kí tự tại ô Characters của mục Match the

characters in the picture rồi nhấn Save and continue và để hoàn tất quá trình đăng ký

bạn nhấn I accept.

-Bước 3: Ở cửa sổ cuối cùng của quá trình đăng ký, bạn sẽ được thông báo yêu cầu

đăng nhập vào hộp thư e-mail để kích hoạt tài khoản. Bây giờ, bạn vào mail của mình

tìm thư có chủ đề Action Required-Verify your account và nhấn vào nút Verify e-mail

address để kích hoạt tài khoản.

II. Xây dựng website


Khi đã kích hoạt xong tài khoản, bạn sẽ được OfficeLive cung cấp một tên miền

miễn phí có địa chỉ nằm ở góc phải phía trên cửa sổ Get Started. Để bắt tay vào việc

thiết kế web, bạn nhấn Design your site tại khung Get Started.

Bước 1: Tại khung Page Manager để tiện cho việc thiết kế bạn chọn Design

Site>Design site trên thanh công cụ (hoặc chọn Edit ở một trang bất kì được liệt kê bên

dưới). Trong cửa sổ Microsoft Office Live Small Business Web Design Tool, bạn sẽ

thấy một cửa sổ làm việc tương tự như Microsoft Office 2007 nhưng chỉ gồm có hai thẻ

Page Editor và Site Designer. Bây giờ, bạn đừng vội bắt tay vào việc thiết kế nội dung

cho các trang mà hãy xây dựng một hệ thống các menu chính (cũng như menu thả

xuống) và giao diện sao cho thật sự khoa học, định hướng tốt cho người xem.

Bước 2: Tạo hệ thống menu: -Bạn phải tạo ra các menu chính trước tiên (tương ứng với mỗi menu là một

trang), theo mặc định thì Office Live sẽ cung cấp bốn menu chính About US, Contact

US, Home, Site map. Bạn có thể chỉnh sửa các menu này lại theo ý định của mình bằng

cách nhấn vào menu đó rồi chọn thẻ Page Editor> chọn mục Advanced > chọn Page

properties (biểu tượng ). Trong cửa sổ Choose page properties, bạn nhập tiêu đề

trang tại ô Page title cũng như tiêu đề của nó trong bảng điều hướng (Navigation) ở ô


Navigation title, rồi nhấn OK. Việc làm này cũng thực hiện tương tự như các menu

khác.

-Để thêm vào một trang mới, bạn chọn Web pages > chọn New page , rồi kế đến

chọn một trong các mẫu chuẩn mà Office Live cung cấp ở khung Standard Tamplates

và nhấn Next. Trong khung Page Information, bạn điền vào tên trang mới (Page title),

địa chỉ Web tới trang này (Web address), rồi nhấn Finish.

Khi đã tạo đầy đủ các trang, bạn cần sắp xếp và phân loại chúng lại thành menu

chính hoặc menu thả xuống tương ứng. Vào thẻ Page Eidtor > chọn mục Advanced >

chọn Navigation, bạn chọn tên menu (tên trang) ở khung Select the page you want to

move: nếu tạo ra trang thứ cấp (menu thả xuống) nằm sau trang chính (menu chính) thì

nhấn chọn tên trang chính ở ô Place page under ; nếu muốn di chuyển thứ tự các trang

(kể cả trang chính và trang thứ cấp) thì nhấn Move down (hoặc Move up), nhấn OK.


Bước 3: Tạo giao diện phù hợp và bắt mắt:

Việc tạo một giao diện web đẹp và phù hợp với người xem là một điều quan

trọng thể hiện tính chuyên nghiệp của website. Do đó, nếu bạn đã xác định mình làm

website này về lĩnh vực gì thì hãy vào thẻ Site Designer để làm cho mình một giao diện

web theo chủ đề đó để lôi cuốn người xem.

-Site Zones: Mục này cho phép đặt tiêu đề (Site Title) và khẩu hiệu (Site Slogan)

của trang tại Header, nhập những thông tin sở hữu web ở ô Footer text đối với Footer,

chèn logo của bạn lên đầu trang tại Logo.

-Design Options: Bạn chọn lĩnh vực mà web hướng đến tại Theme, mẫu trang

web chỉ thay đổi đối với Header tại Style, phối màu tại Color, font chữ tại Font.

-Advanced: Một số thiết lập về trang web: độ rộng (Page Width), canh chỉnh

(Page Alignment) và nếu không muốn hiển thị ô Bing search (ô tìm kiếm phía trên),

‘Power by Microsoft Office Live’ (cụm từ của Microsoft ở phía dưới bên trái) thì bạn

bỏ dấu kiểm ở hai ô bên dưới mục Display Options.


Ngoài ra, còn một số tính năng khác ở thẻ Page Editor giúp tô điểm thêm giao diện

như:

-Page layouts (ở mục Advanced): giúp thiết lập kiểu 1 cột hoặc 2 cột ,…cho nội

dung trang.

-Page background (ở mục Advanced): nếu bạn có hình nền bong bảy thì có thể

dung nó làm hình nền cho web tại tính năng này.


Bước 4: Xây dựng nội dung:

Đến với thẻ Page Editor, việc soạn thảo nội dung cho website khá dễ dàng với

các công cụ liên quan đến font chữ (Font); đoạn văn (Paragraph); chèn bảng, hình ảnh,

các liên kết, trình diễn ảnh,…(Insert). Đặc biệt, ở mục Insert có tính năng Module>

HTML giúp cho những bạn thành thạo về ngôn ngữ này có thể chỉnh sửa, thêm bớt

những đoạn code nhằm tăng hiệu ứng đẹp cho web.

Sau khi thiết kế xong, bạn hãy nhấn nút View để xem lại thành quả của mình và

nhấn nút Save để lưu lại. Bây giờ, bạn có thể thỏa thích giới thiệu với bạn bè, người

thân,… về trang web của riêng mình.


KẾT LUẬN

Ở thời đại bùng nổ thông tin thì việc tập hợp những kiến thức cùng loại thành

một và phân lập chúng thành một chuỗi có hệ thống là một việc làm thường xuyên và

liên tục. Do đó, bạn cũng cần trang bị cho mình những chuyên đề máy tính để khi cần

dùng đến một lĩnh vực nào đó thì có thể tra cứu nhanh chóng. Chuyên đề thiết kế

website chuyên nghiệp cho người không chuyên được viết dựa trên những kiến thức mà

tác giả đã trải nghiệm và được trình bày ở góc độ “những bạn không chuyên”. Hy vọng,

với chuyên đề này sẽ giúp ích cho các bạn mới làm quen với lĩnh vực webdesign có thể

tự tay thiết kế cho mình một trang web để phục vụ nhu cầu học tập, trao đổi kinh

nghiệm, vui chơi giải trí,…

BÙI THANH LIÊM

Email: [email protected]

Website:

www.cloudmedianews.com

www.sosanhtinhnang.com

mailto:[email protected]

http://www.cloudmedianews.com

http://www.sosanhtinhnang.com

Documents

Huong Dan Tao Website Step by Step