网页设计总结报告目录一、设计介绍 (2)二、制作过程 (3)1、布局............................................................................................................................................... (3)2、相关插入 (4)3、相关链接 (4)三、制作代码 (5)四、心得体会 (7)五、参考资料 (8)一、网页设计介绍从文件的角度来说，一个网页就是一个HTML文件。
当浏览者输入一个网址或单击某个链接后，在浏览器中显示出来的就是一个网页。
一般网页上都会有文本、图片等信息，而复杂一些的网页上还会有声音、视频、动画等多媒体内容，为网页增添了丰富的色彩和动感。
静态网页是指网页文件中没有程序，只有HTML代码，一般以.html或.htm为后缀名的网页，静态网站内容不会在制作完成后发生变化，任何人访问都显示一样的内容。
网站是一系列逻辑上可以视为一个整体的网页集合，是许多相关网页有机结合而组成的一个信息服务中心。
对于小型网站，是指带有一定主题的多个网页集合；对于大型网站还包含数据库和服务器端应用程序等如新浪、网易、搜狐等门户网站。
在构成网站的众多网页中，有一个页面比较特殊，称为首页，即网站的第一个页面。
动态网页是指网页文件不仅具有HTML标记，而且还含有程序代码，并使用数据库连接。
动态网页能根据不同的时间，不同的来访者显示不同的内容，动态网站更新方便，一般在后台直接更新。
我的网站是介绍自己的个人网站，这是一个关于家乡美食的介绍，总共6个页面，其中上有首页5个链接，包括剁椒鱼头，蚂蚁上树，浏阳蒸菜，家常酸菜鱼，长沙臭豆腐，而然后每个子页可以和上一页和下一页相连。
首页部分：介绍了湖南一些好吃的资料菜名，其中附有一张凤凰的图片，很想与老师和同学们分。
然后就是每个子页中，前四张介绍了五道菜和它们的做法，则是一道比较有名的小吃，为长沙臭豆腐，但由于其做法是秘方，只附有对其的介绍。
二、制作过程网页布局它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐、电子商务等方面也有着不可忽视的作用。
网页是网站构成的基本元素。
当浏览者移动鼠标，在网海中遨游的时候，一个个精彩的网页会呈现在用户目前。
网页是否精彩，能否吸引浏览者，除了色彩的搭配、文字的变化、图片的处理等因素外，还有一个非常重要的因素：网页的布局。
1.建立布局在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。
特别是其在布局方面的出色表现，更受青睐。
大家都知道，没有表格和绘制层的帮助，很难组织出一个协调合理的页面。
1.在Dreamweaver8“插入”工具栏中单击“布局”进入布局模式，再切到“绘制层”绘制大概的布局再结合布局表格，从而建立一个大概的布局。
2.使用背景颜色：选中该项，按浏览可以插入准备需要的背景颜色作为表格的背景颜色网页的版式设计，版式设计时我们应该有重点，把重要的内容新闻放在醒目的位置上。
规划各元素在网页中的位置关系和表现方法，合理安排图像、文本等元素，使网页布局合理、美观大方。
文本编写，我们的网页中需要大量的文字材料，这就要在网页编辑器中用HTML语言中的标签编写。
也可以利用网页编辑工具的“所见即所得”功能，直接写入文字。
在浏览器中运行时出现冗余代码时返回代码页面重新进行查看修改。
2.网页中相关插入图像传输是www的真正魅力所在，它与文字相比具有显著的优点：一直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。
正是由于这些优点，所以在进行网页设计时图像很受欢迎。
在网页中插入图像利用Dreamweaver可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。
1.在网页需要的地方把光标定位在此位置。
2.在“常用”栏中选择“图像”点击则打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。
3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。
4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。
在网页中插入图像后我们就可以对图像的各种属性进行设置，这选中所插入的图片，单击它，则可以在下面的“属性”面板中对图片的高、宽等进行需要的设置，从而来达到自己的需要的尺寸。
3、相关链接1、文字链接1.选中需要链接的文字。
在“属性”面板中的链接去选择需要链接的文件里的网页或输入需要外部衔接的网址则可。
2图片热点链接选中图片，在“属性”面板中选择你需要的形状的图像热点工具按钮并单击它，当光标变成“十“字形时则对它拖延。
三、制作代码代码简介为了使源代码看起来更简洁，在制作的过程中更清晰，我的DIV和CSS是分离的，每一个页面对应一个CSS，相同的布局则直接进行链接就可以达到效果，这样的方式不仅省时，还很清晰。
在平时的网页制作过程中，我也会将CSS部分分离。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><!-- DW6 --><head><!-- Copyright 2005 Macromedia, Inc. All rights reserved. --><title>Restaurant - Home Page</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><link rel="stylesheet" href="mm_restaurant1.css" type="text/css" /> <style type="text/css"><!--.STYLE1 {font-size: x-large}.STYLE2 {font-size: large}.STYLE3 {font-size: large; color: #000099; }--></style></head><body bgcolor="#0066cc"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr bgcolor="#99ccff"><td width="15" nowrap="nowrap" ><img src="mm_spacer.gif" alt="" width="15" height="1" border="0" /></td><td height="60" colspan="3" class="logo" nowrap="nowrap">welcome to hunan province||your best choice||perhaps your favorite food </td><td width="40"> </td><td width="100%"> </td></tr><tr bgcolor="#003399"><td width="15" nowrap="nowrap"> </td><td height="36" colspan="3" nowrap="nowrap" bgcolor="#99FF99" class="navText" id="navigation"><a href="javascript:;"><span class="navText STYLE1 STYLE1 STYLE1">好吃又好学的神菜| |吃货必看</span></a></td><td width="40"> </td><td width="100%"> </td></tr>这个是网页共用的头代码。
其他部分代码也是大体相同的，只要替换好文字和图片的代码即可。
四、制作的心得体会通过这次网站的制作，我对网站有了更深层次得到了解，也有了更浓厚的兴趣。
尤其是对网站制作的过程与一些技巧手法更有了另外一番了解，对网站制作的基础知识也有了进一步的掌握。
这个学期我们的网页设计课，与以前的课相比更加注重个人的创意能力和软件的运用实战能力，更加综合的考验了我，使我更加完善自我。
现将我的作业情况汇报如下：将理论与社会实践相结合，通过行业生产实践的形式，进一步了解、认识网页艺术设计工作在实际生活中广泛应用的表现渠道和表现方法，提高认知水平，缩短工作磨合期。
根据项目课题要求，结合本专业所学网页设计理论知识，通过对网络广告等方面的调研和项目实践形成文字思路，并以自命题目设计完成多媒体网页设计制作。
两项内容要求准确、完整，工作过程报告内容既要客观实际又要有认识深度，设计作品新颖有创意。