网页设计与制作报告书.doc

电子商务2班201341440213孙岩16网页设计与制作报告书课程名称:网页设计与制作专业班级：电子商务2班学号:201341440213姓名：孙岩指导教师：王康哲目录一．概要……………………………………………………………3二．网站开发……………………………………………………3三．应用工具方案……………………………………………5四．栏目划分……………………………………………………6五．代码表……………………………………………………….7六．截图……………………………………………………………13七．结论……………………………………………………………14摘要：在Internet飞速发展的今天互联网成为人们快速获取、发布和传递信息的重要渠道它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见它已成为政府、企事业单位信息化建设中的重要组成部分从而倍受人们的重视。一、网页制作开发背景Dreamweaver以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页利用它可以轻松的组织、编辑网页并将其发布到指定的站点上而且在发布之后还能对更新情况进行监控以更新站点的内容。现在流行的网页制作软件有很多如Macromedia公司的Dreamweaver、微软公司的Dreamweaver、还有AdobePagemill3.0--制作多框架表单和Imagemap图像的网页工具、Netscape等等。其中Dreamweaver更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页利用它可以轻松的组织、编辑网页并将其发布到指定的站点上而且在发布之后还能对更新情况进行监控以更新站点的内容。工具准备好了可根据你的个人喜好来选择一些素材如图片、喜欢的文章等。二、网页制作设计技巧首先我们来看一下创建一个只包含一个网页的站点。选择“文件”菜单的“新建”选项单击“站点”命令这时新建站点对话框就弹出来了在“指定新站点位置”文本框中输入新站点的位置单击“只有一个网页的站点”图标单击“确定”按钮。这就建立好站点了我们现在来看一下新的站点里有什么单击“视图”工具条的“文件夹”按钮。在文件夹列表里有一个网页文件名字叫做“index.htm”。我们知道每一个站点都要有一个主页这个主页也是一个网页文件。浏览者访问站点时首先进入的就是站点的主页。主页的名字在一般情况下就叫做“index.htm”。就是说我们新建只包含一个网页的站点时DREAMWEAVER就自动为我们创建了站点的主页了。这个新建的站点主页时空的我们可以向里面添加内容。在文件列表里除了主页之外还有文件夹。新建站点时DREAMWEAVER都会在站点所在位置下新建两个文件夹一个是“images”另一个是“_private”。我们在编辑站点时可以在“image”文件夹里放置站点用到的图片。“private”文件夹比较特殊其中的文件对浏览者来说是隐含的我们可以把一些不想让浏览者看到的网页文件放在这个文件夹里比如：我们可以在这个文件夹里存放注册用户的个人信息。尽管每一个站点都要有一个主页不过创建站点时我们仍然可以从一个空站点开始：选择“文件”菜单的“新建”命令单击“站点”选项在“新建站点”对话框里我们可以选择“空站点”图标来创建一个空站点。“新建站点”对话框中还有许多其他图标这是DREAMWEAVER提供的用来创建站点模板或向导。我们创建只有一个网页的站点或者创建空站点都是从头开始来创建一个站点这就好像盖房子一样首先画图纸。然而有许多的房子都具有相似的结构和用途所以我们可以用一张图纸盖很多相似的房子这样就节省了许多工作。基于表格的设计：表格布局使网页设计师制作网站时有了更多选择。在HTML中表格标签的本意是为了显示表格化的数据但是设计师很快意识到可以利用表格来构造他们设计的网页这样就可以制作较以往作品更加复杂的多栏目的网页。表格布局就这样流行了起来融合了背景图片切片技术常给人以看起来较实际布局简洁得多的结构。结构设计：这个时期的网页设计还不太关注语义化和可用性方面的问题主要还在追求良好的结构美学。同一时期也是大量应用GIF占位图片控制留白的时期。一些主流的公司甚至训练设计师如何使用GIF占位;如微软的“关于HTML表格中的GIF占位”。第一批主要应用表格布局的“所见即所得”网页设计软件的发展助长了表格的应用。另外某些软件自动生成的表格如此复杂以至于许多设计师不可能从头手写代码(例如每行只有1px高却包含了几百列的表格)。即使是稍微复杂一