网页设计报告文献

1、电子商务2班201341440225杨杰i网页设计报告电子商务2班姓名：杨杰2016.06.10目录 TOC o 1-5 h z .设计目的1.设计思想2网站整体结构规划思想 4主页设计思想5子页的设计思想6.网页详细设计分析 8.结论10电子商务2班201341440225杨杰- -.设计目的阐述该个人网站的设计意图和创意，简单介绍自己的个人网站。.设计思想阐述网站的整体设计思想，包括：网站整体结构规划思想要求阐述网站整体结构的选择、设计的思想，绘制网站结构草图。主页设计思想要求对主页的布局思路进行阐述和分析。子页的设计思想要求对子页的设计以及网页对象的选取思路进行阐述和分析。3网页详细设计

2、分析要求选取一张网页，对网页的设计实现过程进行阐述和分析，详细说明制作 该网页的步骤，所使用的网页对象以及该网页对象的操作方法。4结论对整个设计报告做归纳性总结，并分析设计过程中的困难及如何解决的，最 后提出展望。、设计目的本课程的设计目的是通过实践使同学们经历Dreamweavercs5开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合 具体的开发案例，理解并初步掌握运用Dreamweavercs5可视化开发工具进行网 页开发的方法；了解网页设计制作过程。通过设计达到掌握网页设计、制作的技 巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设

3、计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop cs6、Dreamweaver cs5等软件的的操作和应用。增强动手实 践能力，进一步加强自身综合素质。配置虚拟机环境 1.在虚拟机上面模拟一个局域网环境(1)在虚拟机上面配置安装 windows xp sp3 professional(Client )和 windows两个操作系统的虚拟主机。server 2003 standard Edition (Server)：扪 口回国文件征）编辑口 查看。 虚拟机如 分组d）窗口 帮助的命起始页部 Windows Server 2003 Stand- ,

4、 r“ Windows XF Prcfessi otllLVMware Workstation虚拟机硬件配置如下：I .windows xp sp3 professional（在配置过程中可以选择默认配置）豌内存256 MBD硬盘 QDE 0:0）售CD-BOM QDE 1： 口）自动探测国以太网自定义控制器存在q音频自动探测懒虚拟处理器工n .windows server 2003 standard Edition骈内存400 MB。硬盘(SCSI 0:0)售CD-ROM CDE 1:0)自动探恻国以太网自定义驹以太网2自定义购以太网3自定义0U5B控制器存在q通音频自动探测a虚拟处理器2由

5、于本机要同时安装DNSffi其他服务器，所以要安装两张以上的网卡，这里 我们添加三张网卡，第三张作为 www ftp、pop3、smtp服务器的硬件端口，添 加方法如下：在默认状态下设置好虚拟机后， 在操作系统关闭(此时可以不装操 作系统)的情况下添加网卡。下面用箭头标明鼠标的单击流程，除此之外全部点 “下一步”以太网适配帮捕捉屏幕)_ .捕捉视频更)国L1+疝匕硬盘 / 鸣DWCD-BCM 癖器 昌软盘驱动鹘/Q音频适配器 USB控制器 曲串行端口克隆)从磁盘中删除地).戈在 Ctrl+Alt-fcsl播获输入 Ctrl+G分期窗口/帮助快照直)安装 VMwarXToolsH) 升级虚拟机6

6、设置C*.rl+E移除国)(2)虚拟机搭建局域网：在此我们将两个虚拟主机构建成局域网。为了不受实际主机私有网的干扰, 将各个虚拟主机的网卡设置如下：双击每一个脸以太网自定义 ，在出现以下的对话框中网络连接方式选择“桥接”，实际主机网卡必须是连通的。.为虚拟主机安装对应的操作系统注意安装OS前一定要格式化硬盘，并做适当的分区；特别的对于安装 windows server 2003 的虚拟硬盘要格式化为 NTFS格式, 建议分两个区；OS安装过程不做赘述。.虚拟机局域网环境的测试分别为各个网卡分配静态的IP。各个网卡之间ping IP,以验证接通；.4服务器规划与配置（请描述各服务配置过程，附图最

7、佳）DNSK务器配置Internet 协议 CTCF/IP）届牲常规您需要从网络系统管理员处获程适当的IF设置.如果网络支持此功能,则可以获取自动指派的IP设置-否则，C自动铁得工F地址 使用下面的IF地址）：一 IF地址 子网掩树证）： 默认阿美如：r自动缺程口痛服务需地址也 -珏使用下面的DH3服翦翳地址区）；首选DBS服务器0： 备用EBS服芳器 ：I_! HYPERLINK http:/WWW.2CTO.COM WWW.2CTO.COM安装好DNSffl件酰落田世Hl 可用监室空I奉色旧君示R餐安装存汨件的一建出 安装蟠*舞8s响应对DMS名I樽3套内即更新的律求.醯定用珞犀务所需磁造

8、富何 用用班克空间,献骷104.1 fflFfrA1h4* ffltt可以多加嚏蛔仲&霹落 Uq弓F值SlmrtkU膝证雅务口上Intrnvl 名耗里搭（TIHSl 名动咨王机fi己青吩 OMF）思徜rcr/ir*算0 0 ME *10 9 ME o o m0.0 UEa g域名茶名胫）L 6 MB |用历程访问隔海职舞Cl 1 丁蹴服务的子组怦一III；q事加或田卬程序i3蛆伴肉导上一番里”下一步境|红惠的 HYPERLINK http:/WWW.2CTO.COM WWW.2CTO.COM、设计思想利用Dreamweaver作一个关于“个人空间”的网站，利用表格、行为、层和链接等网页设计技术

9、设计页面。本网站以个人空间为素材，主要讲解了与空间相关的内容。具体结构如图所示。、网页详细设计分析（一）建立布局在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。 Dreamweaver cs5是大多数人设计网页的称手兵器，也是众多入门者的捷径。 特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助， 很难组织出一个协调合理的页面。.点击“ALT+F6键，进入布局模式，插入布局表格。建立一个大概的布局。.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格 的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都 要控制好。（二）网页中的图像图像传

10、输是WWW真正魅力所在，它与文字相比具有显著的优点：一是直 观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二 是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像 很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很 大，效果会适得其反）。图像文件的格式有几十种，如 GIF、JPEG BMP EPS PCX PNG FAS TGA TIFF、WMF,现在 Internet Explorer 和 Netscape 支持的、最常用的图像格式是 GIF、JPEGS BMP（1）在网页中插入图像利用Dreamweaver cs5可以方便地在网页中插入

11、图像，还可以设置图像边框、 大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常 简单：.新建一个空白网页，把光标定位在网页的开始位置。.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件” 菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确 定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入 图像后我们就可以对图像的各种属性进行设置了。（2）图像的各种属性设置.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，

12、在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框 .打开“外观”选项卡。(1)设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定 义图像的边框，也可以定义边框值为“ 0”，即无边框。(2)设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度， 但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图 像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环 绕方式来实现。在网页中图像的环绕方式有两种：左环绕：图像在左边，文本在图像的右边进行环绕。右环绕：图像在右边，文本在图像的左边进行环绕。在“外观”选项卡的“布局”栏中打开“对齐方式”下

13、拉列表框，选择“左” 选项，并单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”， 图像就被设置为右环绕方式。(3)编辑图像大小：在Dreamweavercs3中，当在网页中加入一幅图像后， 图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特 别需要，就得调整图像的大小。调整图像大小非常简单灵活，只要你选中加入 的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你 满意的尺寸。(4)设置图像缩放比例：网页设计的一个重要原则就是网页的兼容性，对 于不同的浏览器或者不同的分辨率， 不管是800X600的窗口，还是1024X 768 的窗口，网页都要能正

14、常的显示。设置图像缩放比例就是将图像设置为大小可 以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口 里图像都能正常的显示外观。设置图像缩放比例的步骤如下：.选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像 属性”菜单项，弹出一个“图像属性”对话框.在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度” 下面的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比 例，单击“确定”完成设置。外还可以在“外观”选项卡的“水平间距”和“垂 直间距”栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以 象素为单位；垂直间距指图像与周围元素在垂

15、直方向的间距。(3)怎样编辑网页中的图像在Dreamweavercs5中，可以使用“图片”工具栏中的各种工具对网页中 的图像进行编辑，编辑功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸 效果等等。另外，为了使图片更符合要求，我们还在 photoshopcs6中队所用的图片 进行了处理，使得图片看起来更加精细美观，符合我们的主题要求。(4)使用背景图像使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色 填充，而使用背景图像则是将网页的背景用图像平铺。这样做可以使制作的网 页更美观好看。网页中使用背景图像的具体步骤如下：.新建一个空白网页。.单击鼠标右键，弹出的快捷菜单里选“网页属

16、性”，弹出“网页属性” 对话框.开“背景”选项卡。.在“背景”选项卡的“格式”栏中选中“背景图片”复选框，然后单击 下面的“浏览”按钮，出现一个“选择背景图片”对话框。.在“选择背景图像”对话框中单击“浏览文件”按钮，出现一个“选择 文件”对话框。.在“选择文件”对话框的文件列表中选择图像文件，单击“确定”按钮。这样，所选图片将作为整个网页的背景，如果在第 4步时同时选中“水印”复 选框，背景图片将显示为特殊的水印效果，当网页滚动时，背景不动，只有网 页内容滚动，产生一种透明层的效果，非常吸引人。(5)插入flash动画关于Flash 视频使用Dreamweaver中的“插入Flash 视频”

17、命令， 可将Flash视频内容插入Web页面，而无需使用Flash创作工具。该命令 可以插入Flash组件；当您在浏览器中查看它时，它显示所选择的Flash视频内容以及一组播放控件。(6)设置鼠标经过图片，进行图片交互再插入图片的下拉菜单中有一项是“鼠标经过”，点击这一项，会弹出一 个对话框，在对话框中可以设置鼠标经过前的图片和经过时的图片，选择“确 定”即可。(7)设置链接选中图片或者文字，在下面的链接属性中输入所要连接到的地址，同时， 下方的目标属性被激活，输入 blank设置成在新窗口中打开网页。我们设置了 链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更 多详细的信息，方便用户查询。四、结论通过这次网页课程设计激发学习兴趣，调动学习的自觉性，自己动脑、动 手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积 聚个人风格、个