北京站网站设计说明文档.doc

北京站网站设计1. 设计概述Microsoft FrontPage 2000是微软Microsoft Office 2000的组成部分之一，它有着与其他Office软件类似的操作界面和使用方法，以其易学易用、所见即所得及功能强大博得广大网页制作初学者的喜爱，是当前网页设计的主流软件之一。通过Microsoft ProntPage 2000人性化的操作界面，网页文字和图片的修饰和编排，悬停按钮、滚动字幕和访问量计数器的添加，创建和编辑列表，以及加入最流行的FLASH动画，还可以利用导航、应用主题，共享边框，动态HTML效果的使用，我们可以较短的时间内创建出图文并茂的网页。同时我们还可以直接在Microsoft ProntPage中对HTML的语言进行编辑，使我们可以随心所欲的发挥自己的设计能力和创新能力。与其它软件相比较，它更容易建立专业的，精确的网站。Microsoft FrontPage 2000 的网站创建和管理工具给用户从未有过的全面控制权。用户可以精确的放置每一个元素在网页的任何位置，为网站设定专业的谐调的外观，输入和编辑HTML原代码，使用最新的网页技术，这一切不需要编写任何程序。除了用来制作网页外，用户还可以使用它来建设和维护整个网站，更简单的检测，更新网站。2. 设计思路北京站为全国铁路客运特等站。占地面积25万平方米。车站布局为纵列式，分为到发场、交接场、调车场。线路管辖：至京山下行7.0公里、京承下行2.3公里。主要担当京山、京秦、京沪、京承、京原、京包线旅客运输任务，并有开往平壤、乌兰巴托、莫斯科的国际和国际联运旅客列车。北京站地处市中心，交通十分便利，在出站口对面是北京地下铁道的出入口，地下铁道设有环城线和石景山专线。在北京站附近，有十余趟公共汽车通向市内市外。北京站素有首都迎宾门之称，而网络上却没有针对北京站比较系统的资料，为了方便网民更详细的了解北京站，瞻仰北京站的风采，特设计北京站网站。3. 设计环境硬件环境：CPU: PIII 750MHz内存: 512Mb 硬盘: 40Gb软件环境：操作系统：Microsoft Windows 2000+sp4+IE6.0；设计工具：Microsoft ProntPage 2000。4. 运行环境4.1服务器建议运行环境硬件环境：CPU: P4 2.4GMHz内存: 512Mb 硬盘: 40Gb软件环境：北京站网站的运行需要Microsoft Windows操作系统，Microsoft Windows 9x下需要安装Personal Web Services（简称PWS）；而Microsoft Windows NT/ Microsoft Windows 2000/ Microsoft Windows XP则需要安装Internet Information Server（简称IIS）；也就是说我们经常所使用的Microsoft Windows 95/98/2000/XP都可以运行北京站网站，只需要将其设置为单机服务器就行了。一般较常使用的是Microsoft Windows 2000+IIS5和Microsoft Windows 98+PWS，而Microsoft Windows XP+IIS则较少人使用。因为Microsoft Windows XP对IIS不是完全兼容支持，有些功能配合得不够完美，而较少人采用。我们推荐使用Microsoft Windows 2000+IIS5这对组合，因为Microsoft Windows 2000是相对比较稳定的系统，对于服务器网络方面微软投入得较多，比较适合做为服务使用。因此建议操作系统：Microsoft Windows 2000+sp4+IIS5.0。4.2客户端建议运行环境硬件环境：CPU: PIII 750MHz内存: 128Mb 硬盘: 10Gb软件环境：操作系统：Microsoft Windows 2000+sp4+IE6.0。5. 详细设计5.1框架设计规划一个网站，特别需要把这个架构规划好，也要考虑到以後可能的扩充性，免得做好以後又要一改再改整个网站的架构，可以用树状结构先把每个页面的内容大纲列出来。大纲列出来后，你还必须考虑每个页面之间的链接关系。是星形，树形，或是网形链接。这也是判别一个网站优劣的重要标志。链接混乱，层次不清的站点会造成浏览困难，影响内容的发挥。为了提高浏览效率，方便资料的寻找，本站的框架采用“蒲公英”式，即所有的主要链接都在首页上，每个主链接再分别展开，主链接之间相互链接。如下图：5.内容结构5.内容简介5.首页：介绍北京站的基本情况让访问本北京站网站的网友对北京站先有一个大概的了解。5.风采展示：通过图片展示北京站的风采使用不同时间和不同视角的图片，让网友从最直观的视觉感触来领略北京站的傲人风姿。5.新闻动态：发布摘录各种媒体上的社会热点新闻通过发布的当前最新的各类新闻(社会新闻、国际新闻、科技新闻、军事新闻、房产新闻)资讯，方便网友了解最新的社会所发生的事情。5.关于本站：对北京站网站本身的说明，告知广大网民本人设计本北京站网站的初衷5.站点地图：北京站网站访问索引集中的把本北京站网站所有的链接按网站结构列示，方便网友了解本北京站网站的设计架构，和访问各个链接内容。5.友情链接：友情网站图片链接和文字链接5.版权声明：对北京站网站的版权的声明内容5.免责声明：对北京站网站的免责的声明内容5.创建网页创建页面最简单的方法就是单击Microsoft FrontPage “常用”工具栏的“新建”按钮。如图： 它的右方有一个向下的小箭头，它是用来选择要新建什么，可以用“新建”按钮新建网页、站点、文件夹和任务。默认状态下是新建网页。如果要新建网页，可以不用向下箭头键选择，而直接单击“新建”按钮。不过使用文件菜单的“新建”命令来新建网页能够有更大的选择。单击文件菜单的“新建”命令，选择“新建网页”，在“新建”对话框里，可以看到Microsoft FrontPage提供的许多网页模板，如图：我们可以用这些模板来建立相应的网页。在右下角的预览框里可以看到选中模板的外观。选择“普通网页”网页，这样就创建了一个新的空白的网页了。然后点确定。5.编辑网页以设计主页为例，演示设计本北京站网站网页所涉及到的主要使用到的Microsoft FrontPage功能注意，工作区的左下角有三个切换显示模式的选项卡。如图：单击“普通”选项卡，就切换到了普通模式。在普通模式可以编辑网页的内容以及设置各种格式。单击“预览”选项卡就到了预览模式。如果要看一看当前编辑的文件在浏览器中的显示情况，就使用预览模式，在预览模式下，是不能编辑网页的。单击“HTML”，有的时候，也可以切换到HTML模式直接对网页对应的HTML文本文件进行编辑，从而为网页作一些特殊的设置。首先使用Microsoft FrontPage常用工具栏中的插入表格在中创建的空白网页中插入一个乘的，也就是行列的表格。把插入点调整到要插入表格的位置，单击“常用”工具栏“插入表格”按钮，拖动鼠标，直到高亮的格子的行列数与你要插入的表格相同为止。这里我们用乘的，也就是行列的表格。如图：合并第一行单元格：把鼠标移到表格第一行的左边界处，这时鼠标光标会变为向右的黑色箭头，单击鼠标就可以选中箭头指向的第一行。如图：选择“表格”菜单的“合并单元格”命令，单击“合并单元格”命令，将表格第一行合并为一个单元格。如图： 在第一行插入网站的LOGO图标（只有扩展名为GIF和JPEG的图形文件才能成为我们的页面的一部分。因为这两种图形格式不仅应用广泛，而且有利于节省存贮空间。如果图形不是这种格式，使用了其它格式的图形文件，在保存网页时Microsoft FrontPage会提示做格式转换，Microsoft FrontPage可以自动进行格式转换。）：把鼠标光标放在第一行，选择“插入”菜单的“图片”命令，单击“来自文件”选项。如图：，使用“选择文件”窗口选择LOGO图标图片文件，确定选择文件，北京站网站的LOGO图标就被放置在了图表的第一行单元格内了。如图：,插入日期和设置网站菜单链接：合并第二行单元格的所有的单元格成一个单元格，设置第二行的单元格的背景颜色，在该单元格点击鼠标右键，点击弹出菜单中的“单元格属性”命令，打开“单元格属性”窗口，设置所需要的单元格背景颜色，使用“其他颜色”“自定义” 进行自定义的颜色设置。如图：,，在此单元格内插入一个1乘2的表格，既是一个1行2列的表格。在1乘2的表格的第一单元格内插入日期，显示访问网站当前的日期。把鼠标光标放在1乘2的表格的第一个单元格内，选择“插入”菜单，单击的“插入日期和时间”命令，选择需要插入的“日期格式”，单击确定后，日期插入完成。然后调整日期的显示字体大小为2号（10磅）的合适字体大小。如图：，在1乘2的表格的第二个单元格内插入一个1乘11的表格，既是一个1行11列的表格。在1乘11的表格的十一个单元格内按下表首 页| 风采展示| 新闻动态| 关于本站| 站点地图| 友情链接设置单元格内容和单元格背景颜色（单元格内的内容对齐布局使用“单元格属性”中的“布局”设定）。然后设置单元格内容“风采展示”、“新闻动态”、“关于本站”、“站点地图”、“友情链接”对应的超级链接。举例说明超级链接的设置方法：用鼠标拖动选定需要插入超链接的文字，例“风采展示”，然后选择“插入”菜单，单击的“超链接”命令，打开“编辑超链接”对话框窗体，设置要链接到“URL”内容（这里设置为show.htm），点击图标设置点击此超链接时的“目标框架”。如图：，一直此方法设置其他单元格需要设置的文字内容的超链接，设置完成后如图：在网页中适时的插入水平线可以使层次分明。最简单的方法是插入水平线使需要分隔的部分分开。在此网页合并第一个表格的第三行和第五行的单元格都为一个单元格。把插入点调整到插入水平线的位置，选择“插入”菜单的“水平线”命令。插入完成后如图：接下来的工作都是使用上边使用过的操作添加网页内容，然后进行显示的修饰。最后完成的网页效果如图： 其他网页页面的设计就不再叙述，所使用的技术点都在上面进行了详细的例子说明。6. 网站运行调试因建议服务器操作系统环境使用Microsoft Windows 2000+sp4+IIS5.0，下面我们就详细讲解Microsoft Windows 2000+IIS5的安装设置方法：6.1找一张Microsoft Windows 2000的系统安装盘；6.2打开“开始”“控制面板”“添加/删除程序”“添加/删除Windows组件” ，随后在“组件”列表对话框中选中“Internet 信息服务”、”管理和监视工具”和“脚本调试器”，点击Windows组件对话框上“确定”按钮，Microsoft Windows 2000 将会自动开始安装和配置IIS。 6.3安装好了IIS并不等于马上可以使用，还要给IIS配置上IP地址才可以使用：6.3.1在“开始”“程序”“管理工具”“Internet服务管理器”；6.3.2打开之后，你可以看到在计算机标识符下有默认的FTP站点、默认的Web站点和一个默认的SMTP虚拟服务器。6.3.3 选中“默认的Web站点”，按鼠标右键，从弹出选单中选择“属性”，进入属性对话框并选择“Web站点”选项，然后点击“IP地址”下拉框，选择“”(你本机上的IP地址)作为Web站点的IP地址。这样，你就可以通过在IE浏览器中键入“http:/LocalHost/”或“http:/ /”来访问本机上的Web站点了。 但是如果你的电脑只是单独的没有接入任何网络的话，也就是说你的网卡没有接线出去，这时候你最好选择“”作为web站点的IP，才能确保站点正常工作。6.3.4好了到现在为止，你已经可以访问你的IP地址为的Web站点了。启动IE并在地址栏中键入。或是直接在“Internet服务管理器”的右边，选中你想要浏览的网页，按右键选择“浏览”也是可以打开你所要打开的网页。但是，我们并不想将文件放在LocalHost文件夹里面，因为这个文件夹是在系统所在的硬盘里面的。那么你可以选中“默认的Web站点”，按鼠标右键，从弹出选单中选择“新建”，选择“站点”,再一步一步做下去就可以了。但是此虚拟站点还未启动，你还是不可以使用，你将原来启动的那个站点，按鼠标右键，从弹出选单中选择“停止”，然后选中你刚才新建的站点，同样的选择“启动”就可以通过在IE浏览器中键入“http:/ 192