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

1、精品网页的设计和报告的制作课程名称：网页的设计与制作专业课：电子商务二班学号336020139745353535353535353535353535353535353535353535353535353535353535353535353535353535353535353535名字：孙岩指导教师：王康哲目录一、概要3二、网站开发3三.公用事业计划5四.栏的区分65 .代码表7截图。截图。截图。截图。截图。7 .结论14摘要：在互联网迅速发展的今天，互联网成为人们迅速获取、传播和传播信息的重要途径，在人们的政治、经济、生活等方面发挥着重要的作用。 因此网站建设在互联网应用中的地位很明显，成为政

2、府和企业信息化建设的重要组成部分，受到人们的重视。一、网页制作开发背景Dreamweaver以功能强大、易用、界面友好而闻名。 您可以直接编辑网页，轻松组织、编辑网页，发布到指定的网站，发布后监视更新情况，更新网站内容。 现在流行的网页制作软件有Macromedia公司的Dreamweaver、微软公司的Dreamweaver、Adobe Pagemill 3.0-多框架、制作表单和图像地图图像的web工具、ne 其中Dreamweaver以其功能强大、易用、界面友好而闻名。 您可以直接编辑网页，轻松组织和编辑网页，发布到指定的网站，发布后监视更新情况，更新网站内容。 工具准备好后，请根据你的

3、喜好选择素材。 例如，照片，喜欢的文章等。二、网页制作设计技术首先，试着创建一个只包含一个网页的网站。 选择“文件”菜单中的“新建”选项并单击“站点”命令后，将显示“新建站点”对话框，在“指定新站点位置”文本框中输入新站点位置，然后单击“只有一个网站”图标现在网站完成了。 看看新网站上有什么。 单击视图工具栏上的“文件夹”按钮。 文件夹列表中有一个名为“index.htm”的页面文件。 每个站点都需要一个主页，我知道这个主页也是一个web文件。 阅览者访问网站时第一个访问的是网站的主页。 主页的名称一般称为“index.htm”。 也就是说，如果创建的新站点只有一个网页，DREAMWEAVER

4、会自动创建该站点的主页。 这个新网站的主页，在时空中，我们可以在那里追加内容。文件列表除了主页以外，还有文件。 创建新站点时，DREAMWEAVER会在站点所在的位置下创建两个新文件夹： images和_private。 您可以在编辑站点时，将站点使用的图像放置在image文件夹中。 “私有”文件夹是特殊的，其中的文件对阅览者来说是隐式的，可以将不想让阅览者看到的页面文件放在此文件夹中。 例如，可以在此文件夹中保存注册用户的个人信息。每个站点都需要主页，但是创建站点时，可以从空站点开始。 从“文件”菜单中选择“新建”命令，单击“站点”选项，然后在“新建站点”对话框中选择“空站点”图标以创建空站

5、点。 “新建站点”对话框中有许多DREAMWEAVER为创建站点模板和向导而提供的图标。 我们做只有一个网页的网站，或者做空网站，从一开始就做网站。 就像盖房子一样，先画设计图。 但是，很多房子有相似的结构和用途，所以我们可以用一张图纸建很多相似的房子，节省了很多工作。基于表单的设计：表单布局增加了网站设计师在创建网站时的选择。 在HTML中，表格标签的意图是显示被表现化的数据，但是设计师马上就意识到能够使用表格构筑设计的页面，能够制作比以往的作品更复杂且多栏的页面。 显示布局如此流行，融合了背景图像切片技术，总是显示出比实际布局看起来简洁得多的结构。结构设计：这个时期的网络设计不太关注语义化

6、和可用性问题，主要追求良好的结构美学。 同一时期也是多用GIF的占位符图像控制空白的时期。 一些主要企业在训练设计师使用GIF占位符的方法。例如微软的“关于HTML表的GIF占位符”。 第一组主要应用表格布局的“一看就能得到”网页设计软件的发展助长了表格的应用。 此外，一些软件自动生成的表很复杂，很多设计者不能从头手写代码(例如，每行仅包括1px的高度，数百列的表)。 即使是稍微复杂的页面(例如列页)，设计师们也要根据表格制作。三、网站结构网站结构是指网站内页面之间的层次关系，根据性质可以分为逻辑结构和物理结构。 网站结构对网站搜索引擎的友好性和用户体验有着非常重要的影响。(1)网站整体由DI

7、V和CSS构成，对网站整体进行布局(2)网站结构是衡量网站用户体验好坏的重要指标之一。 明确的网站结构可以让用户迅速获得必要的信息，相反，如果网站结构非常差，用户只能像进入迷宫一样访问，最后放弃阅览。(3)网站结构也直接影响搜索引擎收录页面，合理的网站结构可以引导搜索引擎抓住更有价值的页面。网站的结构对网站和网站页面的影响。 通过搜索引擎捕获重要页面。因为互联网信息量非常庞大，为了向用户提供更有价值的信息，搜索引擎优先抓住各网站的相对重要的页面(即权重高的页面)，但搜索引擎是如何发现这些重要的页面的？ 由重要页面的链接指向的页面可能是重要页面的想法。搜索引擎首先从权重相对较高的页面(源页面)跟

8、踪链接，以获取其他相对重要的页面(目标页面)。网页设计要素四、应用工具方案DreamWeaver创建动态HTML动画的网页。DreamWeaver是一个酷酷的web设计软件，包括可视编辑和HTML代码编辑包，支持ActiveX、JavaScript、Java、Flash和ShockWave等功能。 此外，通过从头到尾拖动来创建动态HTML动画，并支持动态HTML (动态HTML )的设计，因此可以在Netscape和IE 4.0浏览器中正确地显示页面动画。 它还具有自动更新页面信息的功能。DreamWeaver还采用了循环html技术。 此技术可在DreamWeaver和HTML代码编辑器之间

9、自由转换网页，而不会改变HTML语法和结构。 这样，专业设计者不会改变原来的编辑习惯，就能充分享受可视化编辑的优点。 DreamWeaver最具挑战性和生命力的是开放的设计，谁都可以轻松地扩展功能。布局：在开始设计之前，必须慎重选择站点的颜色组合。 绝对不要出现紫色背景和黑色蓝色文字的组合。 为了在整个网站上保持相同的颜色组合，您可能非常讨厌不同颜色组合的背景和字体。 也可以选择背景图。 不仅仅是颜色。 背景的图案可以自己画，也可以从网上下载。 通过模糊背景图案，可以使文字更容易阅读。 请记住，图像不会在浏览器中重画，而是背景色会重画，因此在上传图像之前，您必须先查看另一个浏览器是如何显示这些

10、页面的。 增加文字时，请尽量设定易读的字体和大小。 使用背景图像，当阅览页面时，背景色和字体会比背景图像先下载，所以如果背景色和文本的颜色不清楚，阅览者就可以看到充满几秒钟内看不到的文本的页面。 解决这个问题的简单方法是使背景色和背景图的颜色相似。导航：网站的导航必须设计得非常简单.非常简单。 根据需要，将网站分割成几个部分。 最简单的方法是将菜单栏放在整个站点的所有页面的左侧。 当然，除此之外还有很多选择。 对于有大量信息的站点，使用可扩展的菜单栏比较合适。 无论使用哪种导航模式，在各页面上放置主页的链接都是很好的设计思想。阅览者必须知道，随时在你的网站阅览中迷路时，通过简单的点击就可以正确地知道当前位置。框架(框架、框架)问题： Frame可能喜欢，也可能不喜欢。 在网站上使用框架，很有可能将一个框架用于导航，将另一个框架用于内容放置。 可以看到在同一页上有两个分割的阅览窗口。 点击左侧的框架，只改变右侧的内容。 用框架整理网站的内容显然很容易。请确认HTM