网页设计与制作——心得感想
经过十二周的网页制作公选课，我们在网页世界里结束了一段美妙的旅程。代码是它的语言，我们对待网页这个网络生活中司空见惯的事物有了新的见解。原来，我们上网页冲浪的时候，只知道打开浏览器，享受丰富多彩的网络社交活动和欣赏精美的网页，然而却始终不知道它背后的秘密；然而现在，我们打开网页却知道它是一串一串代码神奇的组合，它们经过糅合加工，最终向我们展示出一个绚烂的虚拟世界。正如古话说：知其然，知其所以然。在以后，我们对于网络生活有了一种新的界定。网页不再是一幅幅精美的图画或是相片，而是庖丁解牛般的了解它的构造，知道编程人员背后付出的努力。在享受网络生活的同时，感谢那些网页制作者们的付出汗水。
邓小平曾经提笔写道——实践是检验真理的唯一标准。只有通过实践，才能证明我们自己已经掌握到的和了解我们自身的局限性以及不足的地方，这样我们才能及时发现错误，纠正错误，才能在下一次的实践中警醒自己不再犯一样的错误。
在上完了十一周的理论课之后，老师给我们布置了一项对于我们网页编辑初学者来说非常“艰巨”的任务——就是利用我们在十一周的课堂教学中所掌握到的知识来亲自制作一个网站。特别是对于网页设计与制作这门课来说，它的特殊性在于它注重于实践操作，理论知识一种辅导措施，只有亲自实践操作，在不同的浏览器中进行检测，才能发现问题，改善自己制作网页的技巧和能力，才能进一步的巩固所学到的知识。所以，在上完理论课，听完老师讲授的制作网页应注意的要点，自己动手亲自做一个属于自己的网站就是十分必要了。它可以检验自己动手操作能力，巩固理论，是理论与实践相结合。真正掌握学习制作网页，
而不只限于书本。
首先在构思网页的整体构造上，我参考我自己喜欢的作家——韩寒的个人微博主页（一个韩寒）。在界面风格上，主要采取了它主要用的两种鲜明颜色——蓝色和黄色的搭配。而且参照韩寒的个人主页，”一个“的简洁元素理念。我将自己的网页也设计的十分简洁明快，使人一目了然。整个网站一共分为十张网页，其中一张是主页，其余的九张都可以通过右侧设计的导航栏回到主页面。在站点文件夹，按照老师要求的规则命名为“学号+myweb”，主页命名为
“index.html”，其余的九张分别命名为“page+页数”。站点文件夹中还包含其他两个文件夹，一个是“images”文件夹，其中主要存放网页中所用到的图片资源，且图片都经过处理，大小合适，命名有规则。还有另外一个文件夹是“media”文件夹，其中主要存放网页中所用到的媒体资源，包括mp3格式的音频文件和swf格式的多媒体文件。
在制作网页的过程中，第一步就是规划网页的布局。根据上课所学到的知识以及课下自己查阅相关网页制作的书籍，对网页布局有了一个大致的了解。我采用的是div+css的技术来实现页面布局和页面效果。CSS用于控制网页元素的外观，其主要作用于分离页面的样式和结构。CSS提供了丰富的样式表现功能，如字体、段落、颜色、背景、布局等。使用DIV+CSS的布局方式改变了传统html+table的布局方式。我在网页中大部分采用的就是DIV和CSS来构建网页的布局。
第二步就是收集素材，在确定我的网页分为两个部分之后，其中一个部分是介绍自己的高中，另外一个部分是介绍自己的主页。所以我分两个步骤来收集资料，其中在介绍自己的高中的部分页面上，我主要搜集的是高中学校的照片和相
关文字介绍。在介绍自己的界面上，我主要分为音乐、视频、文字、照片来全方位的展示。因为涉及的内容比较多，所以搜集的资料相对而言也比较多。
第三步就是处理收集到的素材内容。首先将照片、文字、音频分门别类的处理，存储在不同的文件夹中。对照片的处理，我们首先用到的就是Photoshop和Fireworks，可以调整图片的大小以及背景颜色等等；对于flash文件的处理我们则用到了adobe flash进行相关的处理制作，并对制作完成的.fla文件生成swf的动画存储在站点文件夹之中。并对相关的素材进行合理的命名，以待使用。
第四步就是在构建的网页轮廓中添加文本、图片以及相关的媒体资源。确定他们在站点文件夹之中，以防止自己在别的机器上不能正确浏览自己制作出来的网页。在这一步骤之中，相对较难的是导航的制作。因为我采用的是ul、tl标签制作导航，所以在布局上要更加的谨慎小心。以防止界面溢出，所以要更加的小心，并在不同浏览器上进行检验，以防出错。
第五步就是制作完成整个网页之后，进行适当的精简压缩。把不要的图片、音乐和视频资源移出站点文件夹，使站点文件夹里面没有不用的素材来减少站点所占用的空间大小。并且在制作完成整个网站之后，我们还要测试网页里的链接是否出错。我采取的是比较繁琐的办法，就是在网页中一个一个的试验链接是否为死链。假如碰到死链，就继续在Dreamweaver中修改。然后再进行测试，直到网页中不出现明显的死链错误。这个时候，一个相关的网页就制作完成了。
总结一下我的整个网页的制作过程，其中最麻烦的就是遇到无法解决的问题，这个时候，只有主动上网求救，或者到专业的论坛寻找相关的解决方法。而不能闭门造车。记得某位老师说过，“技术这个东西，就是得不断地请教别人，不停地实践，才会有进步。”我也认为是这样，碰到不懂的问题，就得主动请教
老师或者询问同学。只有大家一起，才能制作出完整的作品。
第二篇：网页设计心得体会
学号: 80906107 姓名: 唐琪伟 专业: 计算机科学与技术
做出一个好的网页一般都离不开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中的切片工具的使用。切好片后，还要获取图片的背景色。这样我们又得掌握吸管工具的使用了。切片过程中要注意的就是图片的大小要控制在一个像素以内。所以我们需要先放大，然后才来控制切片线的位置。
从制作网页过程中，我学到了新的美化网页的方法，运用了更多以前未运用的技巧。这使我学到了更多的知识，并且为我自己在制作网页这方面积累了一些经验。这些将是我人生中的一次重要的经历，将是我今后走上社会后的一笔巨大的财富。这次实习的收获对我来说有不少，我自己感觉在知识、技能等方面都有了不少的收获。总体来说这次是对我的综合素质的培养，锻炼和提高。这两周的学习实习中我在老师的指导下以大量明晰的操作步骤和典型的应用实例，教会我们。使更丰富全面的软件技术和应用技巧，使我们真正对所学的软件融会贯通。当前的软件的功能日趋复杂，不学到一定的深度和广度是难以在实际工作中应付自如的。因此反映出学习的还不够，缺点疏漏。需在加以刻苦钻研及学习，不断开拓视野，增强自己的实践操作技能，为以后能做出出色的网页。