个人网页设计与开发Word文档下载推荐.docx
- 文档编号:18624144
- 上传时间:2022-12-29
- 格式:DOCX
- 页数:9
- 大小:1.88MB
个人网页设计与开发Word文档下载推荐.docx
《个人网页设计与开发Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《个人网页设计与开发Word文档下载推荐.docx(9页珍藏版)》请在冰豆网上搜索。
在主页中,通过分块的板式设计,在不同的表格中设置一些关于自己的介绍,使得别有一翻滋味。
2设计图
3实施方法
通过CSS+DIV进行版面排版设置,并解决不同分辨率下面的显示问题。
4系统设计
第一个界面
4.1确定基本框架
首先通过在表格中设置布局整体框架,设置宽为771,编辑边框的宽度为0,间距设置为0,内容与边界的距离间隙为0,整个表格设置为居中显示。
<
tablewidth="
771"
border="
0"
cellspacing="
cellpadding="
align="
center"
>
其次通过填充图片使表格显示为图片样式
tr>
<
td>
imgsrc="
images/annahomeindex_01.jpg"
width=129
height=76alt="
"
/td>
……
/tr>
效果如图:
4.2对板块进行定义
我们设置了网页的颜色、文本形式、背景图片、左边界、上边界和背景音乐。
Html代码如下:
body
bgcolor="
#FFFFFF"
text="
#000000"
background="
images/annahomeindex_b.jpg"
leftmargin="
topmargin="
>
embedsrc="
images/心愿.mp3"
loop="
-1"
hidden="
true"
4.3设置链接
最后一步,我们通过设置超链接,把第一个界面网站转入主界面。
ahref="
images/chahua2121/index.html"
/a>
第二个界面
4.4对板块进行定义
首先我们通过CSS来定义整体框架,把整个网页页面显示设置为居中显示。
这样设置之后,无论在什么分辨率的情况下都可以居中显示。
而且一般的网页制作都是采取的居中设置。
CSS代码放在<
head>
标签中。
基本框架代码标签:
body>
divid="
templatemo_container"
!
--主div块-->
templatemo_header_section"
/div>
templatemo_content_section"
templatemo_footer"
/body>
4.5对板块进行定义
4.5.1对整个页面的长度、宽度、内外边距、边框、字体、字体大小和背景图片进行定义。
把内外边距和边框设置为零,字体设置为“Arial,Helvetica,sans-serif”,设置三个字体用来保证在浏览器缺少第一种字体时,会自动转换为后一种字体。
把字体设置为12个像素,把行高设置为1.5间距,把宽度设为布满整个网页,把可否显示设置为此元素作为块级表格来显示,表格前后带有换行符,把背景设为以小图重复铺满全屏。
CSS代码如下:
body{margin:
0;
padding:
font-family:
Arial,Helvetica,sans-serif;
font-size:
12px;
line-height:
1.5em;
color:
#fff;
width:
100%;
display:
table;
background:
url(images/templatemo_bg.jpg)repeat-x#666;
}4.5.2对各个div进行定义。
A.匾额
我们先确定匾所占的图区的宽度和高度,并在用CSS代码进行设置。
我们先设置宽度为百分之百,高度为78像素,内外边距设置为0。
背景图设为重复铺满,向左浮动。
div
id="
templatemo_menu_panel"
#templatemo_menu_panel{width:
100%;
height:
78px;
margin:
0auto;
background:
url(images/templatemo_menu_bg.jpg)repeat-x;
float:
left;
}效果如图:
B隔区
在匾额与下面的主部分之间,我们应设置一段距离,这样画面才不会显得那样别扭。
同样我们也采用div的css定义来实现这个设想。
这里我们将高度设置为默认,宽度设为400像素,上边距设为70像素,左边距设为36像素,浮动设为左浮动,内连对象设为默认。
templatemo_logo_section"
<
h1>
好累好泪的微博<
/h1>
h2>
myhomepage<
/h2>
<
#templatemo_logo_section{width:
400px;
auto;
margin-top:
70px;
margin-left:
36px;
display:
inline;
}
C嵌入子表格
我们通过设置左右表格,对整个主表格进行划分,再在子表格再进行嵌套子子表格,这样就把表格划分成为了左边三块子子表格,右边三块子子表格,然后在子子表格里面设置为上下两个子子表格,在上子表格加入导航条,在下子表格用于书写内容。
由于,表格所用的Css左右写法都一样,所以就左右各解释一条代码。
首先,左边第一个子子表格,我们通过设置表格的宽度、高度、背景、浮动、元素的上内边距,元素的左内边距、颜色、字形大小来定义。
我们将其宽度设置为499像素,高度设为35像素,背景设为链入背景图片,浮动设置为右浮动,元素的上内边距设置为18像素,元素的左内边距设置为20像素,字形大小设置为17像素。
divclass="
templatemo_post_top_right"
#"
target="
_blank"
我的最爱名言<
CSS代码如下:
.templatemo_post_top_right{width:
499px;
url(images/templatemo_post_top_right.jpg)no-repeat;
35px;
right;
padding-top:
18px;
padding-left:
20px;
color:
font-size:
17px;
}效果如图:
右边图片区设置
首先把右边图片也进行Css版面定义,用DIV进行陈列,先设置其宽度和背景,然后再分为四个图片区。
同样,我们也在HTML中设置链接导航条。
图片区设置元素上外边距为20像素,元素的左外边距为22像素,边界设置为0.
HTML代码如下:
templatemo_section_middle"
我的照片<
CSS代码如下:
.templatemo_section_middleimg{
22px;
border:
none;
}
images/1.jpg"
/>
images/2.jpg"
/>
images/3.jpg"
images/4.jpg"
templatemo_section_middle{width:
320px;
#001724;
D版权申明
版权申明这是每个网页不可或缺的一部分,类似一个国家宣誓主权一样。
在这里,我们还是使用层来实现。
版权申明:
好累好累个性网页<
#templatemo_footer{width:
28px;
url(images/templatemo_footer_bg.jpg)repeat-x;
text-align:
center;
15px;
4.6通过上面的设计工作,我们已经完成了网页的基本设置。
这时我们还要做最后的工作,那就是网页调试。
调试完后,假如没有问题了,那就叫最终完工。
我们这个网页经过调试,没有发现问题,在整理了各项文件后,整个网页的效果截图如下:
5.网页制作总结
通过制作网页我充分的认识了实践的重要性,他比老师授课所让我们体会到的更加重要,任何知识必须在实践中才能体会其真正的用法和含义,所以这次制作网页让我收获颇大,对我的网页制作具有很强的实践性。
湖南商学院北津学院课程设计评审表
姓名
王成武
系部
信息学院
专业班级
信管1022班
题目:
评
审
意
见
评审项目
成绩
立题或选题(10分)
获取信息能力(10分)
方案的新颖性(10分)
方案的综合性(20分)
方案的内容(40分)
文档的格式(10分)
总评100%
指导教师职称
讲师
签名
评审时间:
2011年月日
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 个人 网页 设计 开发
![提示](https://static.bdocx.com/images/bang_tan.gif)