网页设计与制作实训指导书Word下载.docx
- 文档编号:19621276
- 上传时间:2023-01-08
- 格式:DOCX
- 页数:23
- 大小:21.89KB
网页设计与制作实训指导书Word下载.docx
《网页设计与制作实训指导书Word下载.docx》由会员分享,可在线阅读,更多相关《网页设计与制作实训指导书Word下载.docx(23页珍藏版)》请在冰豆网上搜索。
pclass="
special"
>
h3class="
/body>
/html>
运行效果如图所示:
图标记、类别选择器示例
3、CSS的继承性
CSS的继承指的是子标记会继承你标记的所有样式风格,并可以在父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式风格完全不会影响父标记。
举例代码如下:
-/span>
/h2>
div>
ulid="
topMenu"
liclass="
first"
ahref="
#"
Support<
/a>
/li>
li>
Contact<
Sitemap<
/ul>
/div>
下面设置CSS样式,首先对body进行初始化,设定margin和padding,并对正文字体进行设置。
代码代码如下:
body{
margin:
0;
padding:
font-family:
Arial;
font-size:
12px;
}
然后对列表进行初始化,它会影响网页中的所有列表,这样做的目的是使网页中所有的ul列表都有统一的初始设置。
ul{
list-style-type:
none;
接着设置div#container的样式:
#container{
width:
765px;
10pxauto;
position:
relative;
然后设置网页的标题,即h1元素,基本方法和上一章中介绍的图像替换文本的方法相同。
h1{
border-top:
6px#DDDsolid;
border-bottom:
2px#DDDsolid;
height:
80px;
background-image:
url('
'
);
background-repeat:
no-repeat;
同样,把h2页替换为上面准备好的背景图像。
h2{
510px;
200px;
float:
right;
5px000;
设置背景图像以后,需要将文本隐藏起来,代码如下:
h1span,
h2span{
display:
再设置相应的其他CSS样式。
#topMenu{
absolute;
right:
top:
6px;
#topMenuli{
left;
20px10px0;
border-left:
1px#dddsolid;
#topMenu{
border:
#topMenulia{
gray;
text-decoration:
#topMenulia:
hover{
underlineoverline;
这时的效果图如图所示:
图页头部分
2、制作主体部分
主体的左侧部分,根据分析,代码如下:
divid="
narrow"
mainMenu"
HomePage<
AboutUS<
NewsRoom<
Action<
last"
ReseProgram<
form>
inputname="
Text1"
type="
text"
/>
Button1"
button"
value="
Search"
/form>
news"
NewsandEvents新闻动态<
h4class="
newsTitle"
WatchfroggingPoliticalCorruption<
/h4>
newsDate"
class="
newsContent"
Seehowweuncoveredevidenceofgovernmentmalfeasanceandareworkingtosavethespeciesharmed.<
ForSpeciesWorldwide,theHeatIsOn<
Howwillglobalwarmingaffectanimalsandplantsalreadybackedintoacorner,andwhatarewedoingtohelp<
whatarewedoingtohelp<
设置主体左侧部分的CSS样式,代码如下:
#narrow{
235px;
10px;
#narrow#mainMenu{
040px10px20px;
15px;
line-height:
20px;
#narrow#mainMenuli{
border-bottom:
1px#DDDsolid;
#narrow#mainMenulia{
display:
block;
text-decoration:
color:
#555;
padding:
3px0;
padding-left:
50px;
font-weight:
bold;
background-image:
background-repeat:
background-position:
leftcenter;
#narrow#mainMenulia:
#narrow#mainMenu{
1pxwhitesolid;
#narrowform{
text-align:
center;
padding-top:
11px;
36px;
padding-bottom:
0px;
10px0;
#narrow#newsh3{
#narrow#newsp{
#narrow.newsTitle{
#47C;
font-weight:
padding-left:
background-position:
10px00-10px;
#narrow.newsDate{
#777;
#narrow.newsContent{
3、主要内容区
接下来,就要设置右边的两个区块了,我们可以设置两个DIV,分别放置“研究计划”的“工作项目”栏目,代码如下:
divclass="
contentBoxorange"
h3>
OurProgram研究计划-1<
TheBiologicalCenterworksthroughscience,law,andcreativemediatosecureafutureforallspecies,greatorsmall,hoveringonthebrinkofextinction.<
ul>
<
Biodiversity<
InternationalOceans<
PublicLands<
UrbanWildlands<
AirandEnergy<
contentBoxgreen"
OurWorks工作项目-2<
imgclass="
floatLeft"
src="
"
/>
TheCenterforBiologicalDiversityworksthroughscience,law,andcreativemediatosecureafutureforallspecies,greatorsmall,hoveringonthebrinkofextinction.<
You’renotalone.Wejustcelebratedthe100,000thdownloadaroundtheworldofourendangeredspeciesringtones.<
contentBoxorangeclear"
OurProgram研究计划-3<
OurWorks工作项目-4<
OurProgram研究计划-5<
设置相应的CSS样式,代码如下:
.contentBox{
245px;
05px;
.contentBoxh3{
white;
;
5px-2px5px-5px;
5px;
.orangeh3{
background:
orange;
.greenh3{
background-color:
green;
.contentBoxul{
margin-left:
2em;
#666;
circle;
.floatLeft{
margin-right:
主要内容区的效果图如图所示:
图主要内容区的效果
4、页面底部部分
现在这个页面基本上已经完成了,最后制作页面的页脚部分。
页面分为了左中右3个部分,分别放置版权信息、地址和联系邮件。
因此可以用一个ul列表来搭建。
代码如下:
footer"
AllCopyrightReserved2008<
No23ChanganStreetBeijing<
CSS样式如下:
#footer{
clear:
both;
#footerul{
margin-top:
30px;
10px#dddsolid;
#footerulli{
254px;
#ddd;
1px#bbbsolid;
#footer.first{
255px;
.clear{
}
制作好的生物研究中心网站效果图如图所示:
图生物研究中心网站效果图
五、练习
六、源程序清单、测试数据、结果
七、实训出现的问题、实训结果分析(语法错英语提示,中文翻译,原因,您的理解)
实训4:
教育公司网站布局
成绩:
1、继续强化“绝对定位”、“相对定位”两种重要的定位方式;
2、掌握利用“浮动”的方法进行页面布局;
3、本例制作一个两列布局的案例,以加强对之前所学的知识的理解;
4、掌握在网页中增加圆角框的效果。
1、制作页头部分
页头部分是这个页面比较复杂的部分,如图所示。
包括了标题、顶部菜单、主菜单和搜索表单4个部分,另外,主菜单和搜索表单还要置于一个圆角框中。
图页头部分的最终效果
(1)搭建页头部分的HTML结构
下面来解决header部分,header部分的HMTL代码如下:
header"
h1>
span>
前沿视频教室<
/span>
/h1>
firstChild"
交流中心<
技术支持<
mainMenu-outer-wrapper"
mainMenu-inner-wrapper"
formid="
searchBox"
name="
labs-search"
method="
get"
action="
<
inputtype="
textfield"
term"
buttontype="
submit"
id="
搜索<
/button>
<
教室首页<
视频教程<
图书推荐<
你问我答<
读者留言<
联系我们<
lastChild"
案例分析<
clearBoth"
对body元素的整体进行设置,这里设置文字的字体,文字的大小为12px,行高为文字大小的倍。
font:
12px/Verdana,Arial,Helvetica,sans-serif;
#444;
接下来确定div#header的整体属性,设定宽度,居中对齐,设置文字颜色。
#header{
margin:
0auto10px;
0;
width:
756px;
position:
relative;
#BBB;
(2)页面标题的图像替换
对于h1标题的文字替换,代码如下:
10px000;
height:
63px;
h1span{
(3)顶部菜单
接下来设置顶部菜单。
使用绝对定位,可以把它固定在标题的右侧,具体代码如下:
list-style-type:
right:
top:
010px;
background-color:
#000;
设置完成标题文字和顶部菜单后的效果如图所示:
图标题和顶部菜单设置完成后的效果
(4)主菜单
接下来,就要设置主菜单部分了。
主菜单部分需要实现圆角效果,在实现圆角效果之前,我们先来把菜单和搜索框的内容布置好,然后再给它设置圆角。
在主菜单区域包括左右两部分,左边是菜单,右边是搜索框。
首先设定菜单的宽度和文字颜色,这个菜单是使用ul列表来实现的。
ul#mainMenu{
500px;
菜单项目之间的分隔线,即立体效果代码:
ul#mainMenuli{
1px#aaasolid;
border-right:
1px#eeesolid;
把最左边项目的左边框和最右边项目的右边框去掉,这时可以分别对最左边和最右边的两个项目单独设置,代码如下:
#mainMenu{
设置菜单项目的链接文字以及鼠标指针经过时的效果,代码如下:
#mainM
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 指导书