网页设计报告

网页设计报告电子商务两班姓名：杨杰2016.06.10目录1 .设计目的12 .设计思想22.1网站总体结构规划思想42.2主页设计思想52.3子页的设计思想63 .网页的详细设计分析8四.结论10电子商务二班五杨杰1 .设计目的阐述了该个人网站的设计意图和创造性，并简要介绍了自己的个人网站。2 .设计思想描述网站的总体设计思想，包括：2.1网站总体结构规划思想阐述站点整体结构的选择、设计思想，要求制作站点结构草图。2.2主页设计思想对主页的版面设计构想进行了叙述，被要求进行分析。2.3子页面的设计思想阐述并分析子页面的设计和选择web对象的想法。3网页的详细设计分析请选择一页，描述页面设计的实现过程，分析，详细说明制作该页面的步骤，使用的页面对象及其操作方法。4结论总结设计报告，分析设计过程的困难和解决方法，最后提出展望。一、设计目的本课程的设计目的是通过实践体验Dreamweaver cs5开发的全过程，接受综合训练，更全面地理解、掌握和综合利用学到的知识。 结合具体的开发事例，理解使用Dreamweaver cs5的视觉开发工具进行网页开发的方法，并了解初步掌握的网页设计制作过程。 通过设计，达成了掌握网页设计制作的技术。 了解并熟悉网页设计的基础知识和实现技术。 根据主题要求，提出web设计方案，根据要求，使用适当的文字素材，制作出符合要求的web设计作品。 熟悉Photoshop cs6、Dreamweaver cs5等软件的操作和应用。 加强实践能力，进一步加强自己的综合素质。配置虚拟机环境1 .在虚拟机上模拟局域网环境(1)在虚拟机上配置安装了windows XP SP3 professional (client )和windows server 2003 standardedition (server )这两个操作系统的虚拟主机。虚拟机的硬件配置包括. windows XP sp 3专业版(配置时可选择默认配置). windows server 2003标准版本机同时安装DNS和其他服务器，因此需要安装2张以上的网卡。 在此，追加3张网卡，第3张是作为www、ftp、pop3、smtp服务器的硬件端口，在默认状态下设置虚拟机后，操作系统被关闭(在这种情况下，即使不安装操作系统用箭头表示鼠标点击的流程，将其他所有点设为“下一步”(2)虚拟机构建LAN :在此，我们将在局域网中构建两个虚拟主机。 将每个虚拟主机的网卡设置为不受实际主机的专用网络的干扰，如下所示双击每个对话框可打开以下对话框，您可以在其中选择网络连接方法“桥”实际上必须连接主机卡。2 .安装与虚拟主机对应的操作系统在安装操作系统之前，请确保对硬盘进行格式化并创建适当的分区特别是，如果要将安装windows server 2003的虚拟硬盘设置为NTFS格式，建议将其分为两个区域不说明操作系统的安装步骤。3 .测试虚拟机局域网环境为每个网卡分配静态IP。在每个网卡之间ping IP以验证连接6.4规划和配置服务器(请说明每项服务的配置步骤)。 图为最佳)DNS服务器配置已安装DNS组件二、设计思想使用Dreamweaver创建“个人空间”网站，并使用web设计技术(如表单、行为、图层和链接)设计页面。本网站以个人空间为素材，主要解说与空间相关的内容。 具体结构如图所示。三、网页的详细设计分析(1)制作布局因为这次的页面设计使用了很多版面设计，所以怎样制作版面设计很重要。 Dreamweaver cs5是很多人设计网页的武器，也是很多入门者的捷径。 特别是在版面设计方面的优秀表现，更受欢迎。 众所周知，没有表面的帮助，很难制作协调合理的页面。1 .按下“alt F6”键，进入布局模式，插入布局表。 制作粗略的布局。2 .使用背景图像：勾选此项的话，可以将阅览准备好的图像作为表的背景插入。 由于影像是平铺格式的表格背景，因此您必须控制表格的大小和影像大小。(2)网页图像影像传输是WWW的真正吸引人的地方，与文字相比具有显着的优点：一是直观，人眼看影像时接收信息的速度远快于文字时接收信息的速度，二是能够更清晰地表现细节。 正因为这些优点，在进行web设计时图像才很受欢迎。 网页制作成风景画的话，阅览者一定会忘记(照片大的话，效果会相反)。 图像文件格式有几十种，包括GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF和WMF，当前Internet Explorer和Netscape支持的最常见的图像格式是GIF、JPEG和BMP。(1)在网页上插入图像Dreamweaver cs5可让您轻松地将影像插入网页、设定影像的边框、大小和位置，以及直接编辑影像。 向网页添加图像的操作很简单1 .创建一个空白网页，然后将光标放在网页的起始位置。2 .打开“工具”菜单，选择“图像”菜单项，然后从子菜单中选择“从文件”菜单项，或者单击工具栏上的“图像工具”图标以显示“图像”对话框。3 .在此对话框中单击“浏览”按钮，显示“选择文件”对话框。4 .在“选择文件”对话框的文件列表中选择图像文件，然后单击“确定”按钮或直接双击图像文件，将该图像添加到网页中。 在网页中插入图像后，可以设置图像的各种属性。(2)图像的各种属性设定1 .选择插入的图像，右键单击以显示快捷菜单，然后从菜单中选择“图像属性”菜单项以显示“图像属性”对话框2 .打开“外观”标签。(1)在“外观”标签的“布局”栏中，根据需要定义图像的边框，将边框的值设定为“0”，以定义没有边框。(2)设定图像的折叠方式：一般来说，一个图像只有与一行文字相同的高度，但有时需要将图像和文字分离，两者互不影响。 例如，如果将图像插入到网页的左侧，使得能够像没有图像的情况那样在多行中输入右侧的字符，则通过设置图像的折叠方法来实现。 有两种方法可以在网页上折叠图像左转：图像左转，文本右转。右转：图像右转，文本左转。在“外观”选项卡的“布局”栏中，打开“对齐”下拉列表框，选择“左”选项，然后单击“确定”按钮，将图像设置为向左旋转，选择“右”将图像设置为向右旋转。(3)编辑图像大小：在Dreamweaver cs3中，将图像添加到网页时，默认情况下将图像大小设置为原始大小，如果要添加的图像太大或太小，或者需要更改图像大小。 调整影像大小非常简单灵活，只需选择要添加的影像，然后使用鼠标左键拖动影像边框，即可自由调整影像的宽度和高度。(4)设定图像的放大率：网页设计的重要原则之一是网页的兼容性，对于不同的浏览器或分辨率，无论在800600个窗口还是1024768个窗口，网页都必须正常显示。 设置图像的缩放比例可将图像的大小设置为与浏览器的大小成比例，以便在不同大小的浏览器窗口中成功显示图像。 要设置图像的缩放比例，请执行下列操作1 .选择网页图像，右键单击，然后从弹出式快捷菜单中选择“图像属性”菜单项，弹出“图像属性”对话框2 .在“尺寸”栏中选定“指定尺寸”复选框，选择“宽度”和“高度”下的“百分比”单选按钮，输入要在“宽度”和“高度”栏中显示的比例，然后单击“确定”完成设置。 也可以在“外观”选项卡的“水平间距”和“垂直间距”栏中进行设置。 水平间距是图像与周围元素之间的水平间距(以像素为单位)。垂直间距是图像与周围元素之间的垂直间距。(3)如何编辑网页的图像在Dreamweaver cs5中，可以使用图像工具栏中的各种工具编辑网页上的图像。 编辑功能主要包括旋转和翻转图像、裁剪图像、淡化图像和凹凸效果。并且，为了使图像更符合要求，还处理了photoshopcs6中队使用的图像，使图像看起来更加美丽，并且满足了我们主题的要求。(4)使用背景图像使用背景图像与使用背景色不同，使用背景色的是只用某种颜色填充网页的背景，使用背景图像的是用图像排列网页的背景。 这样，您创建的网页更加美丽。 在网页中使用背景图像的具体步骤如下：1 .创建新的空白页。2 .单击鼠标右键，然后从弹出式快捷菜单中选择“web页属性”以显示“web页属性”对话框3 .打开“背景”标签。4 .在“背景”标签的“格式”栏中选中“背景图像”复选框，然后单击下面的“浏览”按钮以显示“选择背景图像”对话框。5 .在“选择背景图像”对话框中单击“浏览文件”按钮，显示“选择文件”对话框。6 .从“选择文件”对话框的文件列表中选择图像文件，然后单击“确定”按钮。这样，所选择的图像成为网页整体的背景，如果在步骤4中同时选中“水印”复选框，则背景图像显示为特殊的水印效果，网页滚动时背景不动，仅网页的内容滚动而产生透明层的效果，非常有魅力。(插入flash动画关于Flash视频Dreamweaver中的“插入Flash视频”命令允许在不使用Flash创作工具的情况下将Flash视频内容插入网页。 此命令可以插入Flash组件。在浏览器中查看时，将显示一组选定的Flash视频内容和播放控件。(6)设定鼠标通过图像，进行图像的交换。重新插入图像的下拉菜单之一是“通过鼠标”，点击该项目后显示对话框，在对话框中设定通过鼠标前的图像和经过时的图像，选择“确定”即可。(7)设置链接选择图像或文本，然后输入要连接到下面的链接属性的地址，同时激活下面的目标属性，并输入blank以在新窗口中打开网页。 我们在设置与本网站链接的网页的同时，还连接了外部网络，使用户能够在大家访问网页时查询更详细的信息，使用户能够简单地进行查询。四、结论通过本次网络课程的设计激发学习兴趣，引发学习自觉，自己动脑筋，动手，动嘴，充分利用网络资源，把教材和老师的指导结合起来，通过自己的实践，创造积累了个人风格、个性的个人网页。 总的来说，在整个学期的学习过程中，我学到了很多知识在本次页面设计中，我将充分利用本次设计的机会，全力投入页面世界，不断学习，不断探索的同时充实，完美自己，在网络天空下美化自己的人生！制作页面并不简单，包括个人主页的选题