<1>使用各种HTML标记，CSS各种常用样式及简单的JavaScript技术，完成的网页没有错误

<2>首页设置导航栏，命名为index.html

<3>利用CSS技术对网站进行布局，网站风格统一 <4>灵活运用JavaScript使网页生动 一、 设计思路

首 页 作品简介主页 首页：

二、 设计结果及分析 首页：

Id=wrapper Id=sidebar Id=menu 人物简介东营 广饶 图片欣赏 关于 ——

1.对于主页，因为不太喜欢类似于搜狐类似的全文检索，更青睐于百度类似比较简洁的页面，随后设计出主页，虽然很简单，但我认为很精练，突出了这次设计的主题。

东营：

2.对于主页，因为不太喜欢类似于搜狐类似的全文检索，更青睐于百度类似比较简洁的页面，随后设计出主页，虽然很简单，但我认为很精练，突出了这次设计的主题。

欢迎下载

2

——

广

饶

简

介

：

联

系

：

3.第四章做了根据js的一个互动。可以对前台邮箱的内容进行判断。

欢迎下载

3

——

图片欣赏：

4.第五章，由于需要用到表格的内容，所以将照片用着种形式呈现出。

三、 总结

通过本次网页的制作过程，我学到了很多实用的东西，也充分了解了editpuls这个软件的强大，对学习了一个学期的课程也有了深入的了解。在这段时间里，一方面，我尝试着讲课本上所学的知识运用到制作中，另一方面，我又时刻在网上学习自己需要的知识，学习到了很多有用的知识。虽然之前对于代码的编辑不是很明白，但这几天不断搜集各种网站模板，不断学习设计思路。虽然呈现出的作品很不完整，基本达不到观赏性和实用性，但我还会不断练习。争取作出属于我的风格的web。 五、附录（源代码）

欢迎下载

4

——

首页： http-equiv=\"content-type\"

content=\"text/html;

charset=utf-8\" />

欢迎下载

6

——

东营/广饶页面

http-equiv=\"content-type\"

content=\"text/html;

charset=utf-8\" />

margin: 0; padding: 0;

font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #534616; }

#sidebar {

float: left;

11

欢迎下载

width: 240px; padding: 0px; color: #787878; position:absolute; left:200px

}

#sidebar ul { padding: 0; list-style: none;

}

#sidebar li { margin: 0; padding:10;

}

#sidebar li ul { margin-bottom: 30px; padding: 0px 20px 20px 20px; background: #FFFFFF; border-left: 1px solid #D6E6CC; border-right: 1px solid #D6E6CC; border-bottom: 1px solid #D6E6CC;

}

欢迎下载

——

12

#sidebar li li { line-height: 35px;

border-bottom: 1px dashed #D1D1D1; padding-left: 3px;

}

#sidebar li li span { display: block; margin-top: -20px; padding: 0; font-size: 11px; font-style: italic;

}

#sidebar h2 { height: 38px;

padding: 12px 0 0 20px; background: #1E1E1E; letter-spacing: -.5px; color: #FFFFFF;

}

#sidebar p { margin: 0px 0px 20px 0px;

padding: 10px 20px 20px 20px;

欢迎下载

——

13

background: #FFFFFF; text-align: justify;

}

#content { float: right; width: 670px; padding: 0;

} #zzz { float: right; width: 670px; padding: 100px;

} .post { margin-bottom: 25px; padding: 0px; background: #FFFFFF;

} .title { height: 38px;

background: #1E1E1E url(images/img01.jpg) no-repeat left top;

padding: 12px 0 0 20px;

欢迎下载

——

14

letter-spacing: -.5px; color: #FFFFFF;

}

.entry { background: url(images/img02.jpg) no-repeat left top; padding: 0px 20px 20px 20px; padding-bottom: 20px; text-align: justify; font-size:16px;

}

欢迎下载 ——

15