网页设计课程总结

摘要：自从第一个网站在上个世纪 xx年代初诞生以来，设计师们尝试了各种网页的视觉效果。早期的网页完全由文本构成，除了一些小图片和毫无布局可言的标题与段落。然而，时代在进步，接下来出现了表格布局，然后是 Flash，最后是基于 CSS 的网页设计。很有幸的,这学期跟着老师学习了网页课程设计，了解了网页设计的基础知识，会制作简单的小网页。

关键字：基础知识 原则 要点 软件 发展方向 主流技术 发布与维护 网页设计基础知识

说起网页，不得不提几个和它相关的名词。

（1） WWW 又称万维网，也可以简称为WEB或3W，是一种建立在INTERNET上的

庞大的基于超文本的网络信息系统，具有全球性、交互性、动态性、跨平台、分布式等特点。

（2） www浏览器是专门用来定位和访问WEB信息的应用程序或工具软件。常用

的浏览器软件包括Microsoft公司的Internet Explorer和Netscape公司的Navigator.ta.

（3） WWW服务器是对浏览器的请求提供服务的计算机及其相应的服务程序。网

页提供者将制作和的网页存放在服务器上供用户浏览。采用客户机/服务器的工作模式。

（4） 超文本与超媒体是WWW的信息组织形式。在WWW系统中，信息是以一种非

线性的超文本方式组织的。

（5） 超链接在本质上属于网页的一部分，它是一种允许我们同其他网页或站点

之间进行连接的元素。

（6） URL统一资源定位器是对Internet上资源的一种准确的定位机制，它以

一种全世界统一的唯一标识来确定某个网络资源，可以访问Internet上任何一台主机或者主机上的文件。

（7） 搜索引擎是一个对Internet上的信息资源进行搜集整理，并供用户快速

查询的系统。

（8） 网页是构成WEB站点的基本单位，是一种包含HTML格式内容的文本文件，它存放在INTERNET上的WWW服务器中，当用户在客户端浏览器中输入网址发出

请求时，就被快速传送到客户机上，经过浏览器解释，在窗口显示丰富多彩的网页内容。

网页设计中应遵循的原则 1、页面内容要新颖 网页内容的选择要不落俗套，要重点突出一个“新”字

2、网页命名要简洁 在给网页命名时，最好使用自己常用的或符合页面内容的小写英文字母，这直接关系到页面上的连接。

3、要及时更新网页

因为网页制作是一时的，而维护更新的工作是每天都要做的。要及时把网页上已经作废的连接应该立即删除掉，

4、注意视觉效果

设计Web页面时，一定要用不同于1024*768的分辨率来 分别观察。

5、随时注意网站升级 时刻注意网站的运行状况。性能很好的主机随着访问人数的增加，可能会运行缓慢。

6、 网页内容要易读

必须花点心思来规划文字与背景颜色的搭配方案。 注意不要使背景的颜色冲淡了文字的视觉效果，别用花里胡哨的色彩组合。一般来说，浅色背景下的深色文字为佳 。，

7、善用表格来布局 要注意多用表格把网站内容的层次性和空间性突出显示出来，使人一眼就能看出你的网站重点突出，结构分明。

8、 少用特殊字体 在你的计算机里看起来相当好的页面，在另一个不同的平台上看起来可能非常糟糕。

9、多学习和使用HTML 为了成功地设计网站，你必须理解HTML是如何工作的。 还有一些小细节：尽量少用Java程序， 少放网站地图 ，要为图片附加注释文字 ，做个网站介绍 ，考虑浏览器的兼容性 ，不宜多用闪烁文字 ，每个页面都要有导航按钮 ，避免长文本页面 ， 网页风格要统一 ，动画最多只用一个 ，善用图像 ，网站导航要清晰 ，最好不用记数器 ，不能忽视错别字 ，不要用框架 ，使用著名的插件 ，使网站具有交互功能等

网页设计要点

一、确定网站的整体风格

1．将你的标志logo，尽可能的放在每个页面上最突出的位置。

2．突出你的标准色彩。

3．总结一句能反映贵站精髓的宣传标语！

4．相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！

二、网页色彩的搭配

1．用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。

2．用两种色彩。先选定一种色彩，然后选择它的对比色。

3．用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

网页制作工具软件介绍

1.Dreamweaver，用于编辑HTML、ASP、JSP、PHP、CSS、XML、JS的页面制作工具；

2.Frontpage，跟Dreamweaver一样，不过个人感觉还是Dreamweaver好；

3.Flash，网页需要画面流动时的首选择；

4. Photoshop，图像处理软件，一般网页都需要有图片相搭配，Photoshop是款很强大的工具。

5.Fireworks，跟Photoshop一样都是图像处理软件，但Fireworks偏向与对网页的处理。

网页设计发展方向

1. 更多的CSS3 + HTML5

这是期待已久的事情。在过去的几年设计师已经开始关注和使用CSS3+HTML5，但在20xx年CSS3+HTML5将会得到更广泛的应用。网页设计师最终会抛弃Flash。Flash不再是昔日的王者，新技术（指CSS3+HTML5）将会取而代之。20xx年，Flash渐行渐远，魔术师“HTML5”成为舞台的主角：

2. 简单的配色方案

没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式。不要老是黑白灰神马的，太不给力了。多点考虑绿、黄或者红作为你的网页主色调。当然，颜色最好保持使用2到3种。调整颜色的透明度，或许会给你意想不到的效果。网页制作主流技术

目前，最常用的三种动态网页语言有ASP(Active Server Pages)，JSP(Java Server Pages)，PHP (Hypertext Preprocessor)

ASP全名Active Server Pages，又成为服务器端的VBScript，所以采用我们非常熟悉的VB语法。由于采用Basic语法，只要熟悉Basic语言，有点html基础，要学习掌握ASP是很简单的事情。任何文本编辑都可以进行编辑，当然，对于asp我们还是推荐采用Microsoft公司的InterDev。可它却只能在NT和win20xx上很好的支持。

JSP全名Java Server Pages，采用java语法，由于java体系的任何东西都是需要JDK支持的，同样，JSP也离不开JDK。由于java高度的面向对象和灵活性，所以，比Basic稍微要难点。任何文本编辑都可以进行编辑，但是，却需要JDK先编译好。对于我们目前流行的两种最主流的网络操作系统（UNIX/Linux和NT/Win20xx），都能很好的支持。

PHP全名Hypertext Preprocessor，采用类似C的语法。由于采用C语法，要学习掌握PHP也是比较简单的事情。任何文本编辑都可以进行编辑。对于我们目前流行的两种最主流的网络操作系统（UNIX/Linux和NT/Win20xx），它都可以很好的支持，而且根本不用修改任何代码。

网页设计发布和维护

网页在本地制作完毕并测试成功后，需要上传到Internet上，这样用户才能访问，如果是个人网站，可以到internet上申请一个免费空间。

维护网站

在上传网页之前，还有一些工作需要做，这也是维护网站的一些手段，如：

（1） 站点报告

（2） 检查站点范围的链接

（3） 查找和替换功能

（4） 清理文档

（5） 保持同步

参考文献：

1、黄斯伟.CSS完全使用详解[M].北京:人民邮电出版社,20xx.7

2、刘瑞新.网页设计基础与网站维护教程[M].北京:机械工业出版社,20xx.10

3、陈承欢.网页设计基础与网站维护案例教程[M].北京:人民邮电出版社,20xx.3

4、温谦 . HTML+CSS网页设计与布局从入门到精通[M].北京:人民邮电出版社,20xx.3

5、VK工作室.HTML+CSS入门讲座[M].北京:科学出版社,20xx

6、胡艳洁.HTML标准教程[M].中国青年出版社,20xx.9

第二篇：网页设计个人总结

实训周网站设计个人总结

                         

通过本周的实训，在老师的热心指导和精心培养下，我不仅在知识上有了很大的提升而且在心得上也是收获颇多。本次实训的目的旨在检验我们在平常学习中所学知识、将上课所学的理论知识在实践中巩固掌握以及进一步熟悉和掌握网页设计与网页制作的基本流程。

回顾这次课程设计，至今我仍感慨颇多，的确，从选题到开始制作，从理论到实践，在5天实训的日子里，可以说得是苦多于甜，但是可以学到很多很多的的东西，同时不仅可以巩固了以前所学过的知识，而且学到了很多在书本上所没有学到过的知识。通过这次课程设计使我懂得了理论与实际相结合是很重要的，只有理论知识是远远不够的，只有把所学的理论知识与实践相结合起来，从理论中得出结论，才能真正为掌握技术，从而提高自己的实际动手能力和独立思考的能力。

在设计的过程中遇到问题，可以说得是困难重重，在制作网页过程中难免会遇到过各种各样的问题，就本次实训问题总结如下：

在div布局中，我熟练的运用了css样式类和ID建立和配合使用。在布局插入图片时，div被撑开，整体布局因此而受影响。通过类和id配合的使用，重新定义div的大小，通过设置div中类的方框对话框中，设置div的边框值，从而改进了div的显示位置，解决了被撑开的缺点。

在第三天时，通过老师的指点，我们对网页的背景做了更改，部分网页部件也做了相应的调整，因此，工作变得更加紧张而又有序。通过一天的设置和改进，网页的整体色调柔和，各个部分相对比较和谐，充满了儿童摄影的气息。

当然网页还存在一定的不足：后台数据库不能进行多条显示。进行修改之后，能进行多条显示，但静态效果无法浏览到数据表内容。产生这一原因的后果，使用了dreamweaver sc5和dreamweaver sc3。可能是因为版本的不兼容所造成。最后放弃了设计界面的美观度，选择了浏览界面的完整。通过修改代码：While ((Repeat1__numRows <>0) AND (NOT Recordset1.EOF))

%>

<tr>

  <td><%=(Recordset1.Fields.Item("id").Value)%></td>

                            <td><%=(Recordset1.Fields.Item("neirong").Value)%></td>

                            <td><%=(Recordset1.Fields.Item("liuyanzhe").Value)%></td>

                            <td><%=(Recordset1.Fields.Item("riqi").Value)%></td>

                             </tr>

                              <%

  Repeat1__index=Repeat1__index+1

  Repeat1__numRows=Repeat1__numRows-1

  Recordset1.MoveNext()

Wend

如红色字体所示，解决了多条记录的显示，但设计界面欠佳。

在flash制作过程中，我还学习到了flash按钮实现本地网页的显示，通过：on (press) {

       getURL("file:///d|/潮宝贝 -Fashion Baby/index.html","_blank");

}实现，但由于路径是本地路径，当运行小型迷你服务器时，路径不相同，flash动画无法起作用，只有当用户直接点击index.html时，切换其它子页才有效。

我觉得本次实训中我们小组的网页设计最大的特点就是色彩谈雅，布局清晰、有条理，结构清晰，视觉效果较好，涉及的知识点较全面，给人一种清丽的感觉。但是在连接数据库等方面还是存在一些问题，这是开发动态网站的重要基础，我认为自己以后应该在静态网页到动态网页的转变方面多钻研、多努力，使自己在静态、动态网站开发上的水平有一个质的提升。

希望通过对本网站的建设，可以提升自己以后在网站建设方面的一部分能力，我相信，现在的努力是为以后的成功的事业打下一个坚定的基础，为自己美好的人生铺好一条阳光而灿烂的道路。通过这次实训使自己的真实能力有了一次质的飞跃。