网页设计心得体会

网页设计心得体会

我们有一些启发后，可用写心得体会的方式将其记录下来，这样我们可以养成良好的总结方法。那么要如何写呢？下面是小编帮大家整理的网页设计心得体会，仅供参考，欢迎大家阅读。

个人网站的设计需要有以下几个步骤：

一、要进行个人网站前台功能设计

包括个人网站主题确定、前台功能设计与管理、个人网站首页设计、个人网站留言板、注册、忘记密码、搜索等网页设计与管理。

二、个人网站后台管理功能设计

包括个人网站后台管理功能设计，后台管理信息系统功能设计，后台系统权限管理，后台文件管理，个人网站后台管理系统主页设计。

三、网站发布

通常我们发布一个网站，这样我们可以注册域名，但我们也可以利用主机和安装iis，这样其他人可以通过“我的IP”地址访问“我的主页”。

四、个人网站推广

一个网站做好了，就有必要推广一下个人网站，这是一个电子商务网站必须做的一步，因为如果你不推广你的网站，即使你发布了也没有人会知道。

在设计网站时真的可以体会很多东西，从一开始确定页面的主题，到整个主页的设计，信息的收集，前台功能的设计与管理，后台功能的设计与管理，每一个页面的表面设计。我把它们都一一进行规划，因为如果你不好好规划，想做什么就做什么，你是做不好的。因为我意识到这句话：“机会是属于那些有准备的人”。我详细到一个表的宽度都一一列出来。例如：775宽，分成三栏，每栏占多少。因为我深知“细微之处才见真功夫”。

给我最深印象的是留言板，因为之前SQL数据库实际锻炼做过了，所以这次做相对容易，但我经过长时间的练习，完成了n次，有些人可能会认为，肯定是不会才做很多次！但我想告诉这些人，我每次做都是用不同的方法。第一次使用access数据库，第二次使用SQL数据库+权限管理，第三次使用数据源名称的连接。每次用的方法都不一样。

可能会有人说我笨，有方法就行了，要那么多干嘛？但我想说的是，没有这么多次练习，就不会有这么多不同的方法，不会创造今天熟能生巧的我。方法，只有你自己先学会，才会学通、学广。

记得最初接触dreamweaver的时候，我很茫然，因为刚接触陌生的软件心里会很害怕跟不上老师的进程。刚开始几节课，老师讲得比较基础，还能跟得上，渐渐的老师授课的进程开始加速，有些跟不上了，需要下课后自己补上，问老师和周围的同学。渐渐的，在老师的悉心教导下，我们开始熟悉这个软件了。老师布置的第一个任务，要求做一个自我形象网站。由于学习的时间较短，老师只要求用PS做好模板即可，任务相对简单。但也要求设计感强，色彩搭配和谐，并且尽可能的做成实用又符合实际的漂亮网页。

第二个网页设计老师要求相对较高，用dreamweaver做一个比较接近真实的网页，还要做一个二级页面。于是开始收集各方面的资料。确定了主题就开始布局了。最开始使用了一个表格，然后在表格内进行拆分合并处理，接着就把通过ps处理出来一个版头并且把修改过大小的图片放进去了。

中间时预览，问题出现了，发现版头与下面的图片文字之间出现了很大的一段距离，但是在软件中已经把距离缩小为0了，多次尝试后没有效果。最后想到可以另外再加一个表格，把版头放在一个表格内面，这样问题就解决了。预览是效果还不错。但是总觉得首页做得太普通，一次浏览学长做的网页时，觉得他们的文字滚动窗口做得效果做得不错，于是想借见一下。就决定把自己网站的左边修改修改。复制了他的代码，把上面的内容修改成我的网站需要的文字。本以为可以轻松的完成，但是却出现大问题了。

因为需要滚动的文字占的空间太大，把左边的那部分表格全部占满了，而在实际的网页预览中，这个有文字滚动的框只占了左边浏览的工具建站程序三分之一，左边有三分之二留白了。我就想可不可以把文字这样一层层的放在上面，试了很多方法，在网站查了很多资料，可能因为没有专业术语作为搜索的关键词，查不到任何相关的资料，试过div标签，试过不停的拆分表格，最后还是没有效果。

就这样试着试着，突然想到了层这个概念。于是在布局中点击了绘制层，结果成功了，经过一些加工，终于成功的完成左边的布局。印象还比较深刻的是插入声音，记得老师曾经给我们讲过很多次怎样插入声音，可是等到自己做网页的时候却忘记了，于是问其他人，结果居然都忘记了，于是自己在百度上收。

最后终于找到了一个可以使用的代码，但是在加入声音路径时出现了问题。在属性内加入源文件，结果就是加不进去MP3的音乐文件，然后自己就尝试加入了一个视频，记下了路径格式，然后照着这种格式写下了指向声音源文件的路径，最后成功了。在设计过程中还出现了很多的问题，但通过看书，上网查询，请教同学等方式，不断的学习、解决、提高，设计出的网页不论是外观还是内容，都在不断的进步、改善。可以说在自己动手，不断实践的过程中，网页设计水平得到了很大的提高。热情和执着，我将来设计出的网页会更加专业，更完善。

本学期的网业设计课程，开展了动态思维训练教学活动，对于我们学生来说，可以激发学习兴趣，调动学习的自觉性，自己动脑、动手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的个人网页。总体来说，整个学期的学习过程，我学会了很多知识，虽然过程比较艰辛，但在INTENET领域中，有了一个展示自我的空间，我觉得很开心、很有成就感。

一、充分发挥动手能力

作为网页设计的初学者，我对网页设计非常感兴趣，一心想设计出一个美观、实用、内容丰富的个人网页。本学期的教改方案由以前学生单纯接受知识变为主动参与教学活动。在这样的压力和动力下，通过自己动手、动脑，通过网络资源，老师的指导，在不断发现问题和解决问题的过程中学到了很多知识，也增强了我的创作能力和动手能力，在网页设计过程中，从构思到设计、完善、维护，整个过程我都全身心投入，使我真正学到了网页设计的知识。

二、在设计过程中不断提高网页设计水平

在本次网页设计中，我不仅学到了很多关于网页设计方面的知识，也从中学会了关于网络、编程等方面的知识。我从最初开始运用FrontPage设计网页，到后来运用Dreamweaver、Flash、Fireworks等网软件设计网页，完善网页。在这个过程中，我通过自学教材、上网查询，学习了Dreamweaver、Flash、Fireworks等网页软件的应用，学会了管理、维护自己的站点，以及一些简单动画、控件的制作等等。在设计过程中也出现了很多的问题，但通过看书，上网查询，请教老师等方式，不断的学习、解决、提高，设计出的网页不论是外观还是内容，都在不断的进步、改善。可以说在自己动手，不断实践的过程中，网页设计 ……此处隐藏9252个字……才，更需要一个有坚定和远见的老板;感谢william，看过头像和手机桌面，女儿很可爱，想必是个和蔼的爸爸，从一开始便觉得他是个很会阅人的hr，但后来才知道是pm，不过没有变的，总是耐心地培养我，给我很多资料和很多网站，提高自己的审美和用户体验感受;感谢mk，认真的时候很认真，玩的时候还像个大孩子，喜欢和参数组交流时逗逗我，调剂我，这点我最喜欢了，因为有你们整个公司才显得有活气，没有那么沉闷;感谢kevin，虽然接触不多，感觉他很用心，是市场方面的主管，看的最多就是修空调，快递要发票的时候，会为公司的财政斤斤计较，到后来q总q总得叫我，真不好意思呢;感谢小杨，能够和你愉快的合作，如果可以我也想学jsp，后来小白走了，你又要一个人辛苦了;感谢adam，强硬的技术支持，我想没有你这位核心人物为公司撑下一片蓝天，可能我们这个产品就很难走下去了;谢谢一起在虎之翼公司里工作的所有工作人员。

我很喜欢你们,喜欢这样的工作氛围，谢谢你们。

做出一个好的网页一般都离不开dreamweaver，flash，photoshop这三个软件，当然，还可以用到其他一些辅助软件就会加快网页的设计了，比如：

SothinkDHTMLMenu，Sothink_Logo_Maker等软件，这些软件不仅可以快速开发出导航，logo等，而且很漂亮，美观。

制作网页，首先是确定主题，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，大致分几部分，每一部分又分几小部分，内容比较充分，多样。内容精彩丰富，简洁明快，语言风趣，通俗易懂。页面可爱清爽。

而我们这次的实习就是用这几款软件来设计，主要使用div+css来布局，避开传统的table（表格）布局

DIV+CSS的网页布局对SEO的好处一、不存在表格的嵌套问题：很多“网站如何推广”的文章中称，搜索引擎一般不抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎相关的官方证实。我的几项实验结果没有完全出来，但根据目前掌握的情况来看，Spider爬行Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。

使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，蜘蛛（Spider）爬行时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。

DIV+CSS的网页布局对SEO的好处二、精简的代码使用DIVCSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。观看更多的HTML教程内容。

代码精简所带来的直接好处有两点：一是提高蜘蛛（Spider）爬行效率，能在最短的时间内爬完整个页面，这样对收录质量有一定好处；二是由于能高效的爬行，就会受到蜘蛛（Spider）欢迎，这样对收录数量有很大好处。

而DIV+CSS布局基本上不会存在这样的问题，从技术角度来说，XHTML在控制样式时也不需要过多的嵌套。这虽然没有得到确认，但还是建议使用Table布局的朋友们，在设计时尽可能的不要使用多层表格嵌套，SEOer（seo工作者们）们在文章中说明了这一点，相信他们也不是没有依据。

DIV+CSS的网页布局对SEO的好处三、对搜索引擎的排名基于XTHML标准的DIV+CSS布局，一般在设计完成后会尽可能的完善到能通过W3C验证。截止目前没有搜索引擎表示排名规则会倾向于符合W3C标准的网站或页面，但事实证明使用XTHML架构的网站排名状况一般都不错。

DIV+CSS的网页布局对SEO的好处四、提高网页的访问速度：DIV+CSS布局较Table布局减少了页面代码，加载速度得到很大的提高，这在蜘蛛（Spider）爬行时是非常有利的。过多的页面代码可能造成爬行超时，蜘蛛（Spider）就会认为这个页面无法访问，影响收录及权重。

真正的SEOer（seo工作者们）不只是为了追求收录、排名，快速的响应速度是提高用户体验度的基础，这对整个搜索引擎优化及营销都是非常有利的。换一个角度抛开DIV+CSS对SEO的有利影响。单独来讲这种div+css布局也是很有益的，可以说是实下是最流行的网页布局方式。当然div+css布局也有不完善的方面。

总之Div+css布局的优势如下：

由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。

页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。

DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。

我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。

好的网页，也离不开photoshop，前面我也说了，flash的制作所需要的图片都要在photoshop中事先PS好的。那么photoshop的作用就显得很重要了，网页中的flash都仅仅是一小部分，图片占的分量还是比flash要大的，故好的

photoshop技术，那么PS出来的图片就会显得更好，这样网页的档次也会随着上升。这次的网页设计，因为是仿照一张图片，那么就要求我们要懂得photoshop中的切片工具的使用。切好片后，还要获取图片的背景色。这样我们又得掌握吸管工具的使用了。切片过程中要注意的就是图片的大小要控制在一个像素以内。所以我们需要先放大，然后才来控制切片线的位置。

从制作网页过程中，我学到了新的美化网页的方法，运用了更多以前未运用的技巧。这使我学到了更多的知识，并且为我自己在制作网页这方面积累了一些经验。这些将是我人生中的一次重要的经历，将是我今后走上社会后的一笔巨大的财富。这次实习的收获对我来说有不少，我自己感觉在知识、技能等方面都有了不少的收获。总体来说这次是对我的综合素质的培养，锻炼和提高。这两周的学习实习中我在老师的指导下以大量明晰的操作步骤和典型的应用实例，教会我们。使更丰富全面的软件技术和应用技巧，使我们真正对所学的软件融会贯通。当前的软件的功能日趋复杂，不学到一定的深度和广度是难以在实际工作中应付自如的。因此反映出学习的还不够，缺点疏漏。需在加以刻苦钻研及学习，不断开拓视野，增强自己的实践操作技能，为以后能做出出色的网页。