Xây dựng trang chủ web tin tức

Ngoài thiết kế website bán hàng, giới thiệu, nhiều doanh nghiệp hiện nay còn tạo trang web nhằm mục đích cung cấp các tin tức, thông tin bổ ích cho người dùng. Vậy phương diện nào để đánh giá những trang web này, hay cụ thể hơn là muốn thành công website tin tức cần phải đảm bảo được những yêu cầu gì? Cùng theo dõi bài viết sau đây để tìm cho mình câu trả lời đầy đủ nhất bạn nhé

Bài 2:

Xây dựng trang chủ cho Website

Bản tin điện tử - Phần 1

1 Mục đích

• Trong bài thực hành này, bạn sẽ tạo 1 trang Master page (trang cha) gồm những thành phần chung cho tất cả các trang, và 4 trang nội dung (trang con) là Trang chủ, Xã hội, Kinh tế, Thể thao

• Bạn sẽ làm quen với cách thiết kế một trang web sử dụng một số control cơ bản: Hyperlink, Image, AdRotator và Marquee

• Xây dựng trang Master cho Website Bản tin điện tử bao gồm Banner, Menu phải và Quảng cáo trái

2 Yêu cầu

• Đã nắm được các khái niệm cơ bản về xây dựng ứng dụng web bằng Visual

Studio.NET

3 Vấn đề liên quan

• Thiết kế giao diện web theo mẫu

4 Thời gian để hoàn tất bài thực hành:

• 120 phút

Thiết kế giao diện

1 Mẫu trang chủ Website Tuổi trẻ cũ: www.tuoitre.com.vn

Cấu trúc trang chủ Tuổi trẻ như sau:

2 Tạo Project Bản tin điện tử

• Từ Menu chọn File – New – Web site…

o Template : ASP.NET Website

o Location : File System – D:\WebNews

o Language : Visual C#

3 Tạo trang Master

• Từ Menu chọn Website – Add new item

o Template : Master page

o Name : MasterPage.master

o Language : Visual C#

4 Chuyển sang màn hình design - Xóa tất cả các control có trên đó

5 Thêm một table : Menu Table – Insert table như hình sau:

6 Chuyển sang màn hình Source, sửa các thuộc tính của bảng lại như sau:

7 Cấu trúc trang Master như sau:

8 Tạo hiển thị Banner

• Tạo thư mục Images

• Copy các image của Website vào thư mục Images

• Chọn project WebNews \ Refresh Folder

• Sử dụng Image Control:

o Kéo thả 1 Image Control vào vùng hiển thị Banner

o Đặt thuộc tính ImageUrl của Image là Images\banner.gif

o Đặt thuộc tính width của Image 800

9 Tạo hiển thị Menu cột trái

• Sử dụng Hyperlink Control:

o Kéo thả các 4 Hyperlink Control vào vùng hiển thị Menu

o Đặt thuộc tính cho các Hyperlink

Control Property Value

Hyperlink1

NavigateUrl Index.aspx

Hyperlink2

NavigateUrl XaHoi.aspx

• Sử dụng AdRotator:

o Từ Menu chọn Website \ Add New Item, chọn XML File từ ô cửa sổ Template, đặt tên file là Ads.xml

o Copy & Paste đoạn mã sau vào File Ads.xml

< Advertisements >

< Ad >

< ImageUrl > /images/imageAds1.gif </ ImageUrl >

< NavigateUrl > http://ad.hcm.fpt.vn/qc/durex </ NavigateUrl >

< AlternateText > Durex </ AlternateText >

< Impressions > 80 </ Impressions >

< Keyword > Topic1 </ Keyword >

< Caption > This is the caption for Ad#1 </ Caption >

</ Ad >

< Ad >

< ImageUrl > /images/imageAds2.gif </ ImageUrl >

< NavigateUrl > http://hungvuongtech.edu.vn </ NavigateUrl >

< AlternateText > Ky thuat Cong nghe Hung Vuong </ AlternateText >

< Impressions > 80 </ Impressions >

< Keyword > Topic2 </ Keyword >

< Caption > This is the caption for Ad#2 </ Caption >

</ Ad >

</ Advertisements >

o Kéo thả các 1 AdRotator Control vào menu

o Chỉ đường dẫn AdvertisementFile của AdRotator là Ads.xml

10 Tạo hiển thị Quảng cáo cột phải

• Sử dụng Marquee:

o Đưa con trỏ vào vùng hiển thị quảng cáo, chọn Source

o Copy & Paste đoạn script sau vào

< marquee bgcolor ="#ffffcc" width ="200" height ="200" direction =up scrollamount ="2"

onmouseover ="this.stop()" onmouseout ="this.start()">

< TABLE cellSpacing =0 cellPadding =0 width ="100%">

< TR >

< href ="Giaitri.aspx">

</ A >

</ TD >

</ TR >

< TR >

< TD align =center> Phim trong tuần </ TD >

</ TR >

< TR >

< TD height =30> asp : Image id ="Image2" runat ="server"

ImageUrl ="~/Images/Image1.gif" designer : wfdid ="w7"

< asp : Image id ="Image5" runat ="server" ImageUrl ="~/Images/Imageview3.jpg"

Width ="200px"></ asp : Image >

</ marquee >

• Sử dụng Image Control:

o Kéo thả các 2 Image Control vào Ads

o Đặt thuộc tính ImageUrl cho các Image:

Control Value

Image1 Images\Image1.gif Image2 Images\Image2.gif

11 Tạo hiển thị phần nội dung :

• Vào vùng hiển thị nội dung thêm control ContentPlaceHolder

12 Tạo Trang chủ Bản tin điện tử

• Vào Menu Website – Add new item

o Template : Webform

o Name : Index.aspx

o Language : Visual C#

o Chọn : Select master page

• Nhập nội dung cho TrangChu.aspx

14 Bài tập thêm: Thực tập lại các thao tác đã thực hành

1 Sử dụng AdRotator Control

o Tạo 1 File XML đặt tên là Ads1.xml với nội dung:

 Chỉ đường dẫn tới các file imageAds3.gif và imageAds4.gif trong thư mục Images Ứng với mỗi hình chỉ rõ thuộc tính NavigateUrl,

AlternateText… tương ứng

o Kéo thả một AdRotator Control vào vùng hiển thị Menu và chỉ đường dẫn cho thuộc tính AdvertisementFile của AdRotator là file XML vừa tạo

2 Sử dụng Marquee

o Sửa đổi Script của Marquee sao cho:

 Thể hiện thị thêm 2 hình imageView2.gif và ImageView3.gif trong thư mục Images

 Đặt tiêu đề tương ứng cho mỗi hình trên

3 Sử dụng Image Control

o Kéo thả một Image Control vào vào vùng hiển thị quản cáo và chỉ đường dẫn cho thuộc tính ImageUrl của Image là image3.gif trong thư mục Images

4 Xây dựng 3 trang XaHoi.aspx, KinhTe.aspx, TheThao.aspx với kết thừa từ trang