Scribd
Upload
32 views

Dynamic Webpage Design Based On CSS

The document discusses using CSS for dynamic webpage design instead of traditional table layouts. It presents a method for designing a personal blog webpage using CSS for layout and styling. Key aspects covered include structuring the page with DIV tags, positioning elements, styling links and navigation, and mixing graphics and text with CSS styles.

Uploaded by

coder.anaconda
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
32 views

Dynamic Webpage Design Based On CSS

The document discusses using CSS for dynamic webpage design instead of traditional table layouts. It presents a method for designing a personal blog webpage using CSS for layout and styling. Key aspects covered include structuring the page with DIV tags, positioning elements, styling links and navigation, and mixing graphics and text with CSS styles.

Uploaded by

coder.anaconda
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

3rd International Conference on Information, Business and Education Technology (ICIBET 2014)

Dynamic Webpage Design Based on CSS


TaoKuang1, Shanhong Zhu 1,2
1
School of Computer and Information Engineering, Xinxiang University, Henan, China
2
International School of Software, Wuhan University, Wuhan, China
[email protected], [email protected]

Abstract - The traditional webpage using nested tables for Among them, in order to realize the webpage display
webpage, this method has the advantages of simple operation, but center,[3] set the box margin property right is 0 auto, in order
generates redundancy HTML code which is not conducive to find to achieve the middle two column display, set the left float
and manage, prolix. however, CSS webpage layout is a concise code, properties to left, main float properties to right, in order to
more functional, higher flexibility of webpage layout design method.
This article presents a method of personal blog of webpage design
achieve the border effection, set the border property to 1
and application based on CSS. frames, as shown in Figure 2.
Index Terms - table layouts, CSS, webpage design
1. Introduction
In recent years, personal blog is a kind of network diary's
personal website form, it has neat interface, easy
management, clear content and other characteristics, form
(TABLE) layout and CSS layout is the construction of
personal blog of two common web page layout method. Form
has advantages of simple use, [1] fast production, and
convenient manufaction etc, but its page code redundancy,
structure and performance mixed together, CSS layout
method makes up the deficiency of the layout of the form,
separates performance and content , greatly simplify the code,
reduce the network bandwidth resource waste, support the
browser backward compatibility. Fig. 1 page structure

2. Structural Layout
CSS Cascading Style Sheets is the abbreviation, named
"Cascading Style form". [2]CSS is the Web standard layout
language, it can be effective for page layout, fonts, colors,
backgrounds and other effects to achieve precise control. CSS
has strong applicability, it can control the page and the
appearance of the site, CSS can make the webpage more
concise. The basic idea is: use DIV+CSS DIV to define the
semantic structure; In whole on the < div > mark block, then
to each block the CSS positioning, and eventually with CSS
to beautify the web page, such as background, line frame,
alignment attribute, etc. In each of the last add content, such
as text, pictures, etc
With a personal blog as an example, using DIV+CSS Fig 2. Page effect
layout to reconstruct this page, the page is divided roughly for
top portion, the navigation section, the side, as in Figure 3. Navigation List Display
1,The code is as follows: Link dynamic display of webpage design is a very
<body> important technology, [4]there are 4 kinds of links to state the
<div id=”header”></div> /* head*/ most widely used, No access link is a: link, visited links is a:
<div id="menu"></div> /* menu*/ visited, hovering the mouse pointer in the link state is a:
<div id="main"> /*twi sub blocks in main block*/ hover, being activated to link is a: active, in webpage design,
<div id="sidebar"></div>/* sidebar*/ through the definition of link, according to the link visited
<div id="content"></div>/* content*/ hover active order defined below ,The following settings link
</div> at the top region style, add a navigation bar. as shown in
<div id="footer"></div>/* foot*/ Figure 3.
</body>

© 2014. The authors - Published by Atlantis Press 130


5. Conclusions
The CSS standard designing blog website has the
following advantages: due to the content of performance and
structure are completely separated, website construction of the
division of personnel become more clear, development and
maintenance efficiency is obviously improved, correcting also
become easier, such as with a page, the same content, and the
use of different CSS files can realize different real time blog
update effect, high degree of streamlining the code page, page
loading speed, not only saves a lot of bandwidth, but also can
Fig .3 Link Style improve search engine search procedure efficiency, webpage
content more easily indexed by search engines, brings the user
4. Graphic Mixed Style better experience.
Mixed graphic and text content is the important content References
in the webpage layout, [5]only by mixed, the boring text can
become vivid, colorful pictures and text orderly arranged [1] Jones, D.Navin-Chandra, D. IndustryNet: a model for commerce on the
World Wide Web, IEEE EXPERT, 1990.
together ， The following is the implementation of mixed
[2] O'Connor, G., O'Keefe, B. Viewing the Web as a Marketplace: The
graphic and text effect in #main block, as shown in Figure Case of Small Companies, forthcoming in Decision Support Systems,
4,codes as follows: 1997
<h2>CSS webpage layout technology application [3] Benjamin, R., Wigand, R.T. “Electronic Markets and Virtual Value
research </h2> Chains on the Information Highway,” Sloan Management Review,
1995,pp 62-72.
<img src=" /study.jpg" width=360 height=280/>
[4] Martin Libicki, James Schneider, Dave R. Frelinger, and Ann Slomovic.
<p>The use of Table page layout is the traditional Scaffolding the New Web: Standards and Standards Policy for the
webpage layout display technology, along with the Digital Economic. RAND, Santa Monica, CA, 2000.
Web2standard design concept of universal </p> [5] Jones, D.Navin-Chandra, D. IndustryNet: a model for commerce on the
</div> World Wide Web, IEEE EXPERT, 1990.

CSS style settings are as follows


#mainh2{text-align:center;color:#F00;margin- Tao Kuang, was born in China in 1975.
top:10px;} He earned a master's degree in software
#main img{float:left;height:220px;margin:15px;} engineering in the School of
#mainp{margin-top:15px; Information Engineering at Zhengzhou
padding:2px;font-size:14px;text- University. He is employed as a
indent:2em;color:#03F;} Associate Professor in Xinxiang
College, where he is now a director of
the Department of Network and
Information Security Department. His
research interests include computer
multimedia, virtual reality application, embedded system and
application, data mining, computer communication and so on.

Fig 4. Mixed Style

131

You might also like