基于Dreamweaver的校园网站制作

南京信息职业技术学院毕业设计论文作者 学号41321P系部 计算机与软件学院—专业 计算机网络技术题目基于Dreamweaver的校园网站制作指导教师——史律—评阅教师完成时间：2016年4月20日毕业设计（论文）中文摘要（题目）：基于Dreamweaver的校园网站制作摘要：本人的毕业论文主要是使用了Photoshop、Dreamweaver、DIV+CSS制作了本网站的界面。论文阐述了我的网站的设计和制作的主要过程，其中包括设计规划、设计准备、设计过程、网站测试四个部分，其中设计规划主要是介绍了本网站的设计方向及目的、设计准备主要介绍设计网站所使用的Photoshop、Dreamweaver、DIV+CSS三个主要软件、设计过程主要具体介绍了本网站建站具体步骤和设计思路、网站测试主要是介绍了网站制作中一些需要解决的问题。关键词:Dreamweaver 校园网站 div+css毕业设计（论文）外文摘要Title:TheproductionofcampuswebsitebasedonDreamweaverAbstract:MygraduationprojectismainlytheuseofPhotoshop,Dreamweaver,div+CSScreatedthiswebsiteinterface.Paperdescribesthemaincourseofmywebsitedesignandproduction,includingdesignandplanning,preparationdesign,processdesign,sitetestingoffourparts,includingdesignandplanningofthiswebsiteistointroducethedesigndirectionandpurpose,thedesignfocusesonpreparationwebsitedesignusedPhotoshop,Dreamweaver,div+CSSthreemajorsoftwaredesignmainlyspecificallydescribethepresentwebsitedesignandthespecificstepsanddesignideas,websitetestingistointroducetheproductionofsomeproblemstobesolved.keywords:Dreamweavercampuswebsitediv+css目录TOC\o"1-5"\h\z引言 3校园网站设计规划 4校园网站的内容选取 4网站设计的前期准备 6软件准备 6IIS7的安装与设置 7校园网站的制作过程 10主页的制作过程 10链接页面的制作 12网站的测试与上传 14网站的测试 14网站的上传 15结论 17致谢 18参考文献 19网站发展到今天，已经出现各种各样形态风格种类，有关于小说、新闻、游戏、微博等等，而制作网站的方法也多种多样，现在，只要愿意甚至你可以为自己做一个个人网站，越来越多的公司通过建设网站的方法来展示自己的公司环境、公司理念，而这些网站也就成为这些公司向外界展示自己的窗口，好的网站表现出一个公司的实力，从而吸引到更多实力强大的人加入到他们公司。而我做这个网站主要是向外界展示我们的学校，让我校的学生能更了解我们的学校，简单的结构，亮丽的风格，是我的网站吸引人的主要方法，丰富多样的内容是制胜的法宝。校园网站设计规划校园网站的内容选取我在制作这个网站时主要考虑了网站的定位，目标用户，网站内容以及网页的版面，因为制作网站前我们就应该明确我们的网站是做给谁看的，放些什么内容给人看，以及网站的样式方不方便让人观看，可以说只要知道这几点，就有人愿意来看你做的这个网站，这也是我们制作网站的核心。就比如我制作的这个网站，我是模仿我们学校的官网制作的，当然由于是个人制作看起来还是很粗超，我的网站定位是门户网站，主要是目标用户是本学校的学生，网页上的内容主要是学校的各类信息。从我的版面上来看我的网站主要分为四个部分：学校介绍主要介绍了我们学校的软硬件环境，学校新闻也就是学校一些比较大的活动，学校通告是关于学校发布的一些通知，最后是大学生活主要是关于我们大学生活中发生的一些事。其实，大部分网站都是这样，介绍公司文化理念，公司活动，公司安排等，这也是大部分公司向外界展示自己的窗口。网站要求不同则展示的方式也不同，一个小说网站和一个新闻网站，无论是从建站的目的，或者说网站内容都大不一样，小说网站主要是面向广大读者，越丰富种类越齐全那么吸引的人就越多，可新闻网站更加注重新闻的时效性，要是新闻网站上挂的最新一条新闻都是好几天前的，你说这样的网站还能吸引人吗？，所以作为模仿学校官网的网站，我主要选取的内容是和我们的大学生活息息相关的而且对于我的网站的浏览者我很明确，就是学校的学生群体，所以我最要的内容就是关于我们的大学生活，比如学校最近举办了什么活动，有什么重要的通知，发生了什么有趣的事，这都是我们大学生所关注的。而且网站的结构和风格也能反映一个网站的特色，一个好的网站，网站结构和风格足够吸引人，将会给这个网站加分不少，就比如我的网站结构简单，颜色亮丽，背景色主要是蓝色，而之所以这样设计是因为我们的对象是大学生，要是结构复杂，好几十个板块，那我们还有耐心看下去吗？或者网站的背景色是黑色，让人看起来就死气沉沉，同样没有大学生愿意看。所以说鲜明的结构独特的风格起的是画龙点睛的作用，要是一个网站内容再丰富，结构不够鲜明，风格不够独特，那也是毫无价值的。所以设计网站前我们需要考虑多方面的因素，千万不能想到什么做什么，这样做出来的网站是无法长时间吸引人的。图2.1网站主页如图2.1所示，我的这个网站的结构主要由学校简介、南信新闻、学校展示等几大部分组成。这些部分组成了我的整个网站的结构，使得整个站点不会因为内容过多而显得杂乱无章。网站设计的前期准备软件准备制作网页的方式多种多样，也从来没人说过我们一定要拘泥于哪一种，对于我们这些初学者来说，最简单的、最方便的才是最适合我们的。网页制作中最出名的莫过于Dreamweaver和Frontpage这两款软件，我可以说只要是制作网页的人就没有不知道这两款软件的。我这里使用的是Dreamweaver，我也向那些新手推荐这款软件，因为它真的很简单。还有和它同公司的另外两款软件Fireworks和flash，他们并称Macromedia公司的网页制作“三剑客”，另外两款软件对我们制作更绚丽的网页有很大帮助。Dreamweaver是由美国Macromedia公司推出的一个“所见即所得"的可视化网站开发制作工具。Fireworks则被称为Macromedia公司网页设计“三剑客"之“火焰"，它最擅长处理网页图片，可以用来制作GIF动画。Flash则被称作Macromedia公司网页三剑客之中的“闪电"，它最擅长制作作网上动画为特长，可以用来做动画小游戏。Dreamweaver采用“所见即所得”的设计模式，你所制作出来是什么效果，展示出来就是什么效果。不用去考虑其他制作上的问题。它将网页设计中的实现与设计两个部分分离开来，这样我们的设计人员就可以将更多的精力放在设计页面上而不是花太多的时间来考虑如何将我们的网页实现，因为实现的部分将由软件来替我们完成，是不是很方便。在我设计我的个人网站的过程中，我选择了Dreamweaver8和Photoshop两种软件。Photoshop我在学校选修课学过，这个软件主要是负责用来帮我处理图片，对我来说,相对于其它的软件来说，这两个我还算是比较熟悉的。IIS7的安装与设置在众多的基于浏览的开发方案中，微软的IIS是作为客户端与服务器端之间连接的桥梁。当有人想要浏览你的网页时，在地址栏输入你网站的地址，这时请求将会从你的浏览器发送给服务器端，然后服务器端将你的请求交给IIS处理，然后IIS将检索你访问的页面，并通过你所请求的文件名对该网页进行处理，加入页面是以HTML为扩展名又或者页面是另外的格式，IIS再对网页上的代码进行处理。IIS是微软专为Windows系统设计的WEB服务器软件。Windows7在安装系统时，就已经自带IIS7；但Windows7不会主动安装它。下面就我就介绍一下在我制作网站过程中在Windows7上安装IIS7的过程。步骤1在windows7桌面上的左下角，点击“开始”，找到“控制面板”，并点击进去。步骤2进入控制面板后，首先将“查看方式”选择为“类别”,以缩小图标查找的范围，然后点击“程序”。步骤3进入“程序”显示页面后，找到“程序和功能”一栏，点击“打开或关闭Windows功能”。打开的界面如图3.1所示图3.1window功能 图3.2添加IIS服务步骤4进入到“打开或关闭Windows功能”页面后，找到“Internet信息服务”一栏，可以看到其前面的勾未勾上。单击“Internet信息服务”前面的“加号”将目录全部展开，然后将FTP、服务器、web管理工具、万维网服务目录下的所有选项进行勾选，最后点击“确定”按钮即可。如图3.2所示。步骤5IIS7功能打开完毕后，可以在开始-＞程序搜索框里面输入”IIS7“，找到Internet信息服务管理器，并打开，打开之后就可以进行IIS7的一些配置，发布html网站了。当然我们也可以设置我们默认站点及主页，修改过程如下：步骤6打开“IIS”，弹出一个界面如图3.3所示。图3.3IIS管理器步骤7右键单击“网站”按钮，在右键菜单里面选择“添加”选项，然后打开添加网站界面如图3.4所示。图3.4添加网站的界面步骤8 首先我们先输入我们制作网站的名称，这里我输入的是mynet。这时软件会自动创建一个与网站名称同名的应用程序池。然后我们再点击“连接为”按钮，选择“特定用户”，这里的特定用户是我重新创建的一个系统用户，输入这个web_user账户的用户名和密码，如图3.5所示。端口我们要更改为8080，因为80已经被defaultwebsite占用，我们无法使用，主机名我们不用填写。图3.5添加网站的步骤步骤9编辑身验证，添加默认主页，打开如图所示3.6界面。图3.6身份验证步骤10编辑应用池，点击页面左侧的“应用程序池”按钮，选中与我们网站同名的应用程序池。然后，点击右侧栏的“高级设置”。根据网站的开发版本选相应的版本，不然会出错的。如图3.7所示图3.7应用程序池设置步骤11直接关闭防火墙。到这儿，IIS的设置到此结束。校园网站的制作过程主页的制作过程图4.1网站主页步骤1,新建一个HTML页面，然后设置背景颜色，设置完背景颜色的页面如图4.2所示：图4.2设置背景色步骤2，选择布局表格，然后在页面上选中自己所需要的区域，如图4.3所示图4.3布局表格步骤3,然后对布局表格的CSS样式进行设置：设置代码如图4.4所示图4.4CSS样式步骤4，接着退出布局，开始进行图片插入，以及文字输入，完成图如图4.5所示：图4.5top栏制作步骤5,进行nav标签的制作，这里我是通过代码进行制作4.6,代码如图，CSS样式

如图4.7，制作完效果图如4.8所示：<div叮阴丰'勺沖％<ul><li31a3s=,wbj,,Xahre:="zndeji.htul"title="r,?R站首5</aX/l:>hiEf尹titled<liXahre:=11news.htilr嘲福K讯亡aX/lij<liXa械工勺血山血丄"tztle="">ISSSS</aXfli><liXatitle^-^W!机粮/1丸/1讣<liXajireWtitle=l,,>^</aX/li><HXahreWtitled"AL</aX/li><BXahiEf尹title=T"5JM</aX/lL>hreftitle=l,n>ttSM^aX/li><HXahreWtitled</nl>图4.6输入代码图4.7CSS样式图4.8效果图步骤6，banner标签的设置，步骤与2,3类似，最后插入图片，如图4.9图4.9banner标签的设置步骤7,主题部分的制作也与步骤6相似，而不同的主要是CSS样式的设置，学校介绍的主要是about,CSS样式如图4.10，其他三个区域主要是CSS样式btl,如图4.11图4.10学校介绍CSS样式 图4.11其他部分CSS样式步骤8,最后是foot标签的制作，直接通过代码，进行制作，然后修改CSS样式一般来说，最底部可以制作一个导航栏，方便用户浏览，还可以输入一些网站地址，邮编，版权所有之类的内容，代码如图4.12,CSS样式如图4.13，以及效果图如图4.14。图4.12foot标签代码图4.13foot标签CSS样式图4.14foot标签效果图步骤9，整个网页主要分为三个部分头部、主体、尾部，我这里只是粗略的进行制作，主体部分主要是填充内容，所以不再详细讲解过程，不过在图片区域添加了一串代码，来实现图片的滚动显示，如图4.15所示，添加的代码如图4.16所示：图4.15图片滚动播放图4.16滚动播放代码链接页面的制作图4.17新闻资讯页面如图4.17图片中显示的就是我的网站里“新闻资讯”的样子，当点击网页上的新闻资讯四个字时，浏览器就会重新打开一个界面，显示我制作的新闻资讯网页，下面是我制作这个链接的步骤：首先，制作主页面的时候，我们要先保存，然后选择“新闻资讯”四个字右键选择“创建连接”，然后将我做好的网页做为目标，这里我自己已经提前做好另一个网页news.html.如图4.18所示图4.18链接到news.html同样的步骤，重复将“南信新闻”、“学校展示”等区域的more小图标做上超链接,如图4.19区域，其他链接类似，所以不再一一叙述。图4.19设置链接的区域主要几个链接设置完成。链接的设置到此结束。网站的测试与上传5.1网站的测试建设好网站后，我们要相对网站进行测试，由于我制作的网站不是很复杂，所以我主要进行测试的只有3个方面：分辨率、兼容性、链接。页面在不同屏幕分辨率下显示不同不同分辨率的页面，显示出来也不同，因为我们的页面表单控件默认宽度为固定值150px，当分辨率高了之后，表格中就会显示过多的空白，页面布局就会看上去很不协调，这种情况在宽屏显示器上格外明显。不过这里也有几个问题我们需要注意一下，就假如我们设定宽度为770px,而表格宽度我们设定的是百分比单位，那么我们使用大于800X600的分辨率时，网页就会拉宽，那么网页看上去就变形了。解决办法：比如我们要想让页面在分辨率为1024*768时居中，只要在网页代码的＜body＞后再加一个＜center＞，＜/body＞前加一句＜/center＞。还有就是我们提到的百分比，表格、单元格的宽度单位最好不要用百分比，而要使用像素单位。页面在不同浏览器下显示不同不同的浏览器查看页面，也会有一些差别，因为不同的显示器对代码的翻译也是不相同的，这也是大多数网站制作者需要考虑的问题，因为你必需要针对浏览器进行调整。国内的浏览器大多使用的IE内核，但是IE并没有严格遵守W3C标准，而国外的浏览器严格遵守W3C标准。解决办法：我们应该避免使用W3C组织不推荐的排版属性，我们可以是用CSS样式代替。不过现在大部分国内浏览器出了兼容模式，能够保证大多数的浏览器显示一致。图片无法显示我在进行网页的测试过程中经常发现网页打开后，图片不显示出来，经过多次测试，发现是由于我在制作的过程中对图片的位置进行移动，导致图片物理路径和我代码设定的路径不同产生的，知道后我就对这个问题进行了处理。解决方法：假如自己网站上查看时，可以把图片放在同一个文件夹内，如果上传到服务器后，也同样把图片放到同一个文件夹内，然后对图片代码路径重新进行更改。在所有测试中，对链接的测试是我花费时间最长的一部分，因为链接测试的成功与否将直接影响我网站的整体效果，所以我对链接进行了反复测试，以确保没有什么问题。网站的上传当然我们也可以将自己的网站上传到一些服务器空间，比如阿里云等，如果有兴趣的话，还可以购买一个域名，到时候只要输入网址就直接能看到自己做的网站，其他不多讲这个过程中主要说一下域名如何解析到服务器上：步骤1登录购买服务器的代理商网站并进入后台管理系统，找到服务器管理的快捷入口。步骤2进入服务器管理界面，选择指定的服务器，点击“绑定域名”。步骤3添加域名。注意需要填写两种域名格式，一种是带“www”前缀的，另一种是不带的缩写形式。步骤4域名和服务器是双向绑定的，服务器绑定完域名后，需要域名填写解析地址。点击域名“解析”链接。步骤5仿造提示信息，修改“A记录”和“CNAME”所对应的值后保存。步骤6等待2-6个小时，使其生效。生效后即可通过域名访问发布到服务器上的网站了。这是将自己网站上传服务器绑定域名的基本步骤。结论通过这次做网页的练习，让我懂得了很多。以前总有很多问题不懂，但是为了做好这些网页，我便会查看一些相关的资料，去问一些懂的同学。因此觉得本次的网页练习是受益良多的。其实，网页设计与制作真的是一门很有趣