网页设计报告

web设计报告电子商务2班名称：向阳2016.06.10目录1.设计目的12.设计理念22.1网站整体结构规划思路42.2家庭设计理念52.3子页的设计理念6网页详细设计分析8结论10电子商务225杨杰1.设计目的说明这个个人网站的设计意图和想法，简单介绍一下自己的个人网站。2.设计理念描述网站的总体设计理念，包括：2.1网站整体结构规划思路要说明网站整体结构的选择、设计的想法，并勾勒网站结构。2.2家庭设计理念需要对主页的布局想法进行说明和分析。2.3子页设计思路需要对子页设计和web对象选择进行说明和分析。3网页详细设计分析需要详细说明选择网页、说明和分析网页的设计实现过程、创建网页的步骤、使用的web对象以及如何操作web对象。4结论总结了整个设计报告，分析了设计过程的难点和解决方法，并提出了展望。一、设计目的本课程旨在使学生对Dreamweaver cs5开发的整个课程进行实践，并更全面地了解、掌握和综合利用所学的知识。结合特定的开发案例，了解和初步了解如何使用Dreamweaver cs5可视化开发工具进行web开发。了解web设计制作流程。通过设计掌握网页设计、制作技术。了解和熟悉web设计的基本知识和实施技能。根据主题的要求，给出了网页设计方案，根据要求，利用合适的图形资料，制作符合要求的网页设计作品。精通Photoshop CS6、Dreamweaver cs5等软件的操作和应用。加强实践能力，进一步加强自身综合素质。配置虚拟机环境1.在虚拟机上模拟LAN环境(1)配置虚拟机上安装了windows XP SP3 professional(客户端)和windows server 2003标准版(服务器)两种操作系统的虚拟主机。虚拟机硬件配置包括：I. windows XP SP3 professional(配置期间可以选择默认配置)二.windows server 2003标准版这台机器同时安装DNS和其他服务器，因此必须安装两个或更多网卡。在此处添加第三个网卡作为www、FTP、POP3和SMTP服务器的硬件端口，然后添加如下内容：将虚拟机设置为默认状态后，操作系统关闭(此时可能不会安装操作系统)。使用向下箭头显示鼠标单击过程，显示所有其他点“下一步”(2)虚拟机实施LAN:在此，我们在LAN上部署了两个虚拟主机。设置各个虚拟主机的网卡，使其不受到物理主机专用网络的干扰，如下所示：双击每一个，在出现的下一个对话框中选择网络连接方法“桥”，必须连接物理主机网卡。2.安装虚拟主机的相应操作系统安装OS之前，必须格式化硬盘并创建相应的分区。特别是，要将安装了windows server 2003的虚拟硬盘格式化为NTFS格式，建议将其分为两个部分。不说明操作系统安装过程。3.测试虚拟机LAN环境为每个网卡分配一个静态IP。在网卡之间ping IP以验证连接。6.4服务器规划和配置(每个服务配置流程的说明，图最佳实践)配置DNS服务器安装DNS组件第二，设计理念使用Dreamweaver为“个人空间”创建网站，您可以在其中使用web设计技术(如表格、行为、图层和链接)设计页面。本网站以个人空间为材料，主要说明与空间相关的内容。具体结构如图所示。三、网页详细设计分析(a)部署设定这次网页设计使用了很多布局，所以如何制定布局是关键。Dreamweaver cs5是大多数人设计网页的武器，也是许多初学者的捷径。尤其是布局中的卓越性能更受欢迎。大家都知道，没有形式的帮助，很难挤出和谐合理的页面。1.单击 ALT F6 键进入“布局”模式，然后插入“布局表”。创建近似布局。2.使用背景图片：如果已选择，则可以单击浏览以插入准备好的图片作为表格背景。图片以平铺格式作为表格背景，因此必须能够控制表格大小和图片大小。(b)网页上的图像图像传输是WWW的真正魅力，与文本相比具有重要的优势。第一，用人眼观察图像时，收到信息的速度比收到信息的速度快得多。第二是更清楚地表达细节。正是因为这些优点，在设计网页的时候，图像很受欢迎。如果网页像一幅风景画一样，访问者一定会迷恋(画大了会适得其反)。有几十种图像文件格式(GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等)，目前Internet Explorer和Netscape支持的最常用图像格式是GIF(1)在网页中插入图像Dreamweaver cs5使您可以轻松地将图像插入到网页中，设置图像的边框、大小和位置，以及直接编辑图像。向网页添加图像很简单。1.创建新的空白网页，然后将光标放在网页的起始位置。2.打开工具菜单，选择图片菜单项，从子菜单中选择文件中的菜单项，或单击工具栏中的图片工具图标弹出图片对话框。3.在此对话框中，单击“浏览”按钮以显示“选择文件”对话框。4.在选择文件对话框的文件列表中选择图像文件，然后单击确定按钮或直接双击图像文件，将图像添加到网页中。在网页中插入图像时，可以设置图像的各种属性。(2)设置图像的各种属性1.选择插入的图片，单击鼠标右键，然后从弹出菜单中选择图片属性菜单项，将显示图片属性对话框。2.打开“外观”选项卡。(1)设置图像边框厚度：在“外观”选项卡的“布局”栏上，可以根据需要定义图像的边框，也可以将边框值定义为“0”，即无边框。(2)动态观察图像：通常，一个图像只能与一行文字具有相同的高度，但是必须将图像和文字分开，并且有时不会相互影响。例如，必须在网页的左侧插入图像，以便右侧的文字在没有图像的情况下可以输入多行。为此，请启用“动态观察图像”。可以通过两种方法在网页上动态观察图像：左动态观察：图像环绕在左侧，文本环绕在图像右侧。右动态观察：图像在右侧，文本环绕图像的左侧。在“外观”选项卡的“版面”栏中，打开“对齐”下拉列表框，选择“左”选项，然后单击“确定”按钮，将图像设置为左动态观察方式，选择“右”将图像设置为右动态观察方式。(3)编辑图像大小：在Dreamweaver CS3中将图像添加到网页时，图像大小默认为原始大小，如果添加的图像过大、过小或特殊情况，则需要调整图像大小。调整图像大小非常简单灵活，因为您可以选择添加的图像，然后用鼠标左键拖动图像框架，将图像的宽度和高度随机调整到所需大小。(4)设置图像缩放：网页设计的重要原则之一是网页兼容性，对于其他浏览器或分辨率，无论是800600窗口还是1024768窗口，网页都可以正常显示。设置图像缩放比例可以将图像设置为大小，以便图像在不同大小的浏览器窗口中正常显示，与浏览器大小成比例。设置图像比例的步骤如下：1.在网页上选择图像，右键单击，然后从弹出快捷菜单中选择“图像属性”菜单项，弹出“图像属性”对话框。2.在“大小”列中，选择“指定大小”复选框，选择“宽度”和“高度”下的“百分比”单选按钮，也可以在“外观”选项卡的“水平间距”和“垂直间距”栏中进行设置。水平间距以像素为单位表示周围元素和图像的水平间距。垂直间距表示图像与周围元素垂直放置的间距。(3)如何在网页上编辑图像在Dreamweaver cs5中，您可以使用各种工具(如旋转和翻转图像、裁剪、图像淡入和凹凸效果)编辑网页上的图像。此外，Photoshop cs 6连正在处理照片，使照片看起来更加精美，满足我们的主题要求。(4)使用背景图像使用背景图像用特定颜色填充网页的背景，而使用背景图像不同于将网页的背景平铺为图像。这样制作的网页会更漂亮、更好看。在网页中使用背景图像的具体步骤如下：1.建立新的空白网页。2.右键单击，然后从弹出的快捷菜单中选择“web属性”，弹出“web属性”对话框。3.打开“背景”选项卡。4.在“背景”选项卡的格式栏中，选中“背景图片”复选框，然后单击下面的浏览按钮，将出现“选择背景图片”对话框。5.在“选择背景图像”对话框中，单击“浏览文件”按钮以显示“选择文件”对话框。6.在“选择文件”对话框的文件列表中选择图像文件，然后单击“确定”按钮。这样，选定的图片将成为整个网页的背景，如果在步骤4中同时选中水印复选框，则背景图片将显示为特殊水印效果，在网页滚动时背景不会移动，仅滚动网页内容，因此具有某种透明层效果，非常吸引人。(5)插入flash动画关于Flash视频Dreamweaver中的“插入Flash视频”命令使您可以在不使用Flash创作工具的情况下将Flash视频内容插入到网页中。这个命令会插入Flash组件。在浏览器中查看时，将显示选定的Flash视频内容和一组播放控件。(6)为实现图片交互，将鼠标设置为通过图片重新插入图片的下拉菜单之一是“鼠标悬停”。单击此项目将弹出一个对话框，您可以在其中设置鼠标经过之前和之后的图片。选择“确定”即可。(7)设置链接选择图片或文字，输入要链接到下面链接属性的地址，然后激活下面的目标属性，输入blank在新窗口中打开网页。本公司连接了网站链接的网页和外部网。这样，用户访问页面时，可以查询更多详细信息并方便用户查询。四、结论通过这次网络课程设计，激发学习兴趣，调动学习意识，移动自己的大脑、手、嘴，利用网络资源，结合教材和教师的指导，通过自己的实践，创建个人风格、个性累积的个人主页。总的来说，我整个学期学到了很多知识在这次web设计中，我充分利用了这次设计机会，全心投入web世界，进行了持续的学习和不断的探索；同时不断充实自己，不断完成自己，在网络的天空下逐渐美化自己的人生！做好页面不是件容易的事。这包括选择个人主页的主题、收集和整理内