个人网页制作-论文

1、网页制作报告课程名称 WEB网页制作 专业班级 计科1211 学 号 2012118505126 学生姓名 彭明超 指导教师 张娟 实训地点 6栋602 2014年12月11日 目录第一章 开发工具和运行环境31.1网站设计的基本知识31.2 HTML简介31.3 HTML用法3第二章 需求分析52.1 系统概述52.2 系统的可行性分析52.3 软件介绍52.4 网站设计理念及设计思路6第三章 规划设计过程63.1 总体设计及功能模块划分63.1.1设计标题我的个人网站63.1.2 设计个人简介63.1.3设计学习经历73.1.4 欢迎光临我的个人求职网站73.1.5 与我联系73.1.6

2、版权问题73.2 设计制作过程7第四章 总结19第一章 开发工具和运行环境1.1网站设计的基本知识静态编程最重要的特征就是由程序自动生成网页，最终形成供浏览器解释的HTML。设计出精美的网页以及动态更新交互的站点，需要网页编程与网页制作相结合。主要介绍网站建设所必须掌握的基础知识，如网页文档的结构、超链接、表格和表单等基本的HTML标识的写法要求，网页编辑的常用工具，动态网站项目工程的设计步骤要求，以及网站的发布与维护、网站的主机方案等相关知识。1.2 HTML简介全称：HyperText Mark-up Language 译称：超文本标记语言。 简意：一种为普通文件中某些字句加上标识的语言，

3、其目的在于运用标记（tag）合文件 达到预期的效果。 HTML 是在 SGML 定义下的一个描述性的语言，或可说 HTML 是 SGML 的一个应用程式。HTML 不是程式语言，它只是标记语言，基本上你只要明白了各种标记的用法便算学懂了 HTML，HTML 的格式非常简单，只是由文字及标记组合而成，于编辑部方面，任何文字编辑器都市可以，只要能将档案存为文本格式即可， 用专门的网页编辑工具当然更好。1.3 HTML用法 html使用方法 1. 2. 3. 4. 1. 1. 标志用于Html文档的最前边，用来标识Html文档的开始。而标志恰恰 相反，它放在Html文档的最后边，用来标识Html文档

4、的结束，两个标志必须一块使用。 2. 和构成Html文档的开头部分，在此标志对之间可以使用、等等标志对，这些标志对都是描述Html文档相关信息的标志对， 标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。 3. 是Html文档的主体部分，在此标志对之间可包含、等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。 两个标志必须一块使用。标志中还可以有以下属性：属性4. 使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信 息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，只要在标志对之间加入您要显示的文本即可。注意

5、：标志对只能 放在标志对之间。第二章 需求分析2.1 系统概述在现今的信息共享的时代，网络信息化管理工作系统经信息量大、数据准确、速度快、管理工作全面等特点在现实生活中得到广泛地应用。互联网商业的普及应用已经成为网络经济的大势所趋。本章介绍的回族文化网站是建立在用户和民族信息之间的，用户可以方便、快捷地查找到自己所需要了解的有关于回族的信息，可以足不出户就能了解到回族这一个民族的基本信息，从而提高自己的阅历以及在以后生活中能够有需要的去体验民族风情。由于本人的知识水平有限，实际的经验也不足，所以所制作出来的作品有许多的不足和漏洞，希望老师提出宝贵的意见和批评。2.2 系统的可行性分析(1)实用

6、性设计个人网页大四毕业以后可以用来求职，同时设计个人网页可以展现自己的个性，还可以保留一些美好的回忆。(2)技术性 网站设计需要理论以实践相结合，通过对网页的设计，可以让我们更加熟练的去了解网页，对网页产生兴趣，更可能以后从事这个行业。(3)共享性制作出来的网页可以发出来，与别人一起探讨，一起协商。2.3 软件介绍 该个人网站所使用的软件有：记事本，图片处理器。 2.4 网站设计理念及设计思路 我的个人网站的主要内容包括以下几个板块：个人网站首页，自己的资料的页面，相册，爱好，日志，经历，链接和登陆。 色彩，网站风格之魂、创意之先锋。主页的风格我配上比较淡的灰色衬托，在视觉上给人一种比较神秘的

7、感觉，然后后面是一张我特喜爱的图。上面有改变我自己 change myself。人生需要改变，只有改变的人生才是完整的人生。 第三章 规划设计过程3.1 总体设计及功能模块划分每个网站都是一项庞大的工程。好比造高楼，没有设计图纸，规划好结构，盲目的建造，结果往往是倒塌；也好比写文章，构思好提纲，才不至于逻辑混乱，虎头蛇尾。全面仔细规划架构好自己网站，不要急于求成。规划一个网站页面尤其当要制作一个很大的网站 (有很多页面) 的时候，特别需要把这个架构规划好，设计这个月面我分为三个部分。3.1.1设计标题我的个人网站在标题下面有那个属性分别是h1，h2，h3。H1里-彭明超的个人网站。H2里-爱我

8、所爱，想我所想，做我所做，一切随缘。H3里-大学是学习知识的地方。3.1.2 设计个人简介我叫彭明超，男，1993年10月出生，现年21岁，云南会泽人，汉族，本科文凭。做事认真，具有很好的亲和力，虽然专业知识学的不好，但是却又很好的人际关系，有良好的服务意识，对工作很认真，待人友善。坚持高标准严格要求自己， 始终脚踏实地， 认真负责，扎实努力，勇于创新，一心扑在工作 上，具有强烈的事业心和高度的工作责任感。3.1.3设计学习经历2000-2005,就读小学 在小学六年区间荣获过几多奖状，如三好学生。 2005-2008，就读初中，但成绩一般。 2008-2011，就读高中，虽然高一高二成绩不好

9、，但大三之后认真学习，成绩有明显提高。2012-2014,就读大学，成绩不理想。大一的时候买了电脑，学会了玩游戏，使得大学生活变得很颓废。3.1.4 欢迎光临我的个人求职网站 里面有 首页，个人简历，我的相册，个人爱好，个人日记，学习经历 3.1.5 与我联系只要加我的qq邮箱就可以找到我，很方便吧？3.1.6 版权问题版权属于我所有，想用此页面必须由我同意。3.2 设计制作过程1、收集网页设计制作的所有信息资料，素材。2、整理信息资料、素材。把相关的信息准备好。3、利用各种工具开始制作首页。从色彩的搭配，和总体的框架入手，有条不紊的进行。首页:2.大小搭配，相互呼应。较长的文章或标题，不要编

10、排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。个人简介:3.图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。相片展示页就是按照上述方法做的，我的相册页面上文字和图片密切配合，既能活跃页面又整洁了页面，使人看上去一目了然，不会繁杂。学习经历：欢迎光临我的个人网站：与我联系： 然后利用模板制作其

11、他页面。其他的页面就不一一做介绍，其做法都和以上一样，都是合理利用视觉的审美。其代码如下：HTML的代码彭明超个人网站 彭明超个人网站 爱我所爱，想我所想，做我所做，一切随缘。 大学是学习知识的地方 个人简介我叫彭明超，男，1993年10月出生，现年21岁，云南会泽人，汉族，本科文凭。做事认真，具有很好的亲和力，虽然专业知识学的不好，但是却又很好的人际关系，有良好的服务意识，对工作很认真，待人友善。坚持高标准严格要求自己， 始终脚踏实地， 认真负责，扎实努力，勇于创新，一心扑在工作 上，具有强烈的事业心和高度的工作责任感。 学习经历 2000-2005,就读小学。 在小学六年区间荣获过几多奖状

12、，如三好学生。 2005-2008，就读初中，但成绩一般。 2008-2011，就读高中，虽然高一高二成绩不好，但大三之后认真学习，成绩有明显提高。 2012-2014,就读大学，成绩不理想。大一的时候买了电脑，学会了玩游戏，使得大学生活变得很颓废。 欢迎光临我的个人求职网站 首 页 个人简历 我的相册 个人爱好 个人日记学习经历 与我联系 我的电子邮件：1098696384   版权所有我的个人求职网站，欢迎与我联系 CSS的代码：* margin: 0;padding:0;body background: #34160c;font-family: Arial, Helvetica

13、, sans-serif;font-size: 13px;color: #8B985F;align:center;h1, h2, h3 margin-bottom: 10px;text-transform: lowercase;font-family: Georgia, Times New Roman, Times, serif;font-weight: normal;color: #CEEA70;h1 letter-spacing: 0px;font-size: 197%;h2 letter-spacing: -1px;h3 p, ol, ul margin-bottom: 1.5em;li

14、ne-height: 1.5em;ul, ol margin-left: 3em;blockquote padding: 0 3em;background: url(images/img05.gif) no-repeat 1em 0;font-style: italic;a:link text-decoration: none;color: #CEEA70;a:hover, a:active text-decoration: none;color: #FFFFFF;a:visited color: #8B985F;img border: none;img.left float: left;ma

15、rgin: 0 15px 0 0;img.right float: right;margin: 0 0 0 15px;/* Header */#header width: 710px;height: 350px;margin: 0 auto;padding: 0 25px 10px 25px;background: #34160C url(images/mu.jpg) ;#header h1 margin: 0;padding: 200px 0 0 40px;letter-spacing: -2px;font-size: 40px;#header h1 a color: #FFFFFF;#he

16、ader h2 margin: -10px 0 0 0;padding: 0 0 0 175px;letter-spacing: normal;font: bold 10px Arial, Helvetica, sans-serif;#header h2 a color: #CAF368;#header a text-decoration: none;/* Page */#page width: 710px;margin: 0 auto;padding: 0 25px;background: #34160C url(images/img08.jif) center top ;/* Conten

17、t */#content float: left;width: 460px;padding: 5px 0 0 5px;background: url(images/img03.gif) no-repeat;.post width: 420px;padding: 20px 0 0 20px;.post h1, .post h2, .post h3 .post .title padding: 0 0 5px 0;background: url(images/img08.gif) repeat-x left bottom;.post .title span padding-right: 30px;b

18、ackground: url(images/img06.gif) no-repeat right center;/* Sidebar */#sidebar float: right;width: 240px;padding: 5px 5px 0 0;background: url(images/img04.gif) no-repeat;.box width: 239px;padding-left: 1px;.box .title height: 33px;margin: 0;padding: 10px 0 0 20px;background: url(images/img09.gif) rep

19、eat-x;font-size: 18px;.box ul margin: 20px;padding: 0;list-style: none;.box li padding: 5px 0;background: url(images/img10.gif) repeat-x;.box li.first background: none;.box h3 margin: 0;font-size: 85%;font-weight: bold;color: #8B985F;.box p margin: 0;line-height: normal;.box a padding-left: 10px;background: url(images/img11.gif) no-repeat 0 5px;/* Footer */#footer width: 710px;height: 45px;margin: 0 auto;padding: 0 25px 25px 25px;background: #34160C url(images/img12.gif) no-repeat center top;#footer p margin: 0;paddi