搜索
第八章网页制作综合实例教学目标网站设计流程设计网页布局根据网页布局准备素材各级页面的制作网站推广项目介绍交通银行石家庄分行是一个金融企业，企业网站的主要目的是向民众介绍银行的各项业务，提高企业知名度。由于宣传的目的仅为石家庄市市民，所以仅需中文版即可。在设计的时候应该注意首页应有较大的信息量，如图8.1所示，让市民通过首页即可了解该行的主体业务，且页面要美观大方。创建流程1.创建本地站点2.设计网页布局3.准备素材4.制作页面5.网站推广和制作心得创建本地站点网站中有各种格式的文件，为了有组织地管理，就要在站点根目录下创建各种类别的文件夹。通常把网站首页放在站点根目录下，文件名一般为index.htm，index.html，index.asp，index.php，default.htm等等。Images或image文件夹是用来存放网站中使用到的图像文件，这些文件通常由Photoshop或Fireworks制作，另外，flash文件、CSS样式表文件和JS文件也可以放在这个文件夹中。设计网页布局所谓第一屏，是指浏览一个网站时不拖动滚动条能够看到的部分。一般来讲，在目前最常用的800*600的屏幕显示模式下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为778px*435px。导航栏能让浏览者在浏览时快捷到达不同的页面，是网页元素中非常重要的部分，所以导航栏一定要清晰、醒目，导航栏一定要在“第一屏”中显示出来，因此横向放置的导航栏要优于纵向的导航栏考虑。设计网页布局采用什么样的布局，要具体情况具体分析：如果信息量大，可以考虑用“国字型”或“拐角型”；而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。设计网页布局首先要从客户的角度来分析，企业制作网站的主要目的就是宣传企业和其产品，因此“开门见山”型的网站布局通常更容易被接受，这样网民只需点击首页就可以了解到企业的主要产品，方便快捷，因此本实例设计首页采用“开门见山”型网页布局，并为首页设置如下栏目：分行简介、交行动态、主要金融业务、客服中心、营业网点和意见反馈。其中交行动态、主要金融业务为二级页面，其他几个栏目既是二级页面，又是最终正文页面。栏目定下来后，开始画出页面的结构图，页面的结构图很重要，它可以帮助我们确定网页的风格以及所需准备的相关素材。设计网页布局首页结构图设计网页布局二级页面及正文页面结构图准备素材1.扫描录入基本资料在准备素材时要尽可能地多准备，但也要掌握一定的原则，总体来说所需素材分两部分，一部分是文字资料；一部分是图片资料。文字部分包括企业简介、企业文化、企业动态、相关产品介绍、联系方式等内容；图片部分包括企业标志、企业外景图、相关产品图片等，可以通过扫描原有的图片来准备，这时扫描的分辨率最好大一些，以便于以后的修改。准备素材2.制作logo3.制作导航菜单的按钮4.制作首页中部的企业形象广告条5.制作首页产品宣传flash准备素材6.制作首页各栏栏头图标7.制作首页左下角广告图标8.制作首页下部主要金融业务图标9.制作二级页面所需素材制作页面1.制作站点首页2.制作站点正文页面3.制作二级页面4.制作“网站地图”和“联系我们”页面网站推广常用的几种推广方式有：1、搜索引擎注册在各大搜索引擎上注册你制作的站点，当然有些地方是需要收费的，如新浪、搜狐等。但也有一些搜索引擎可以通过自身的搜索程序找到你的网页，如Google等。另外还可以去具有“自动登录搜索引擎”服务的网站注册自己的网站。2、互换链接互换链接是每个网站必不可少的，常用的做法是与和自己业务相关的网站互换链接，这种做法通常称为“友情链接”，双方互不收费，彼此链接。3、其他方法还有一些看起来很不起眼的办法，而且影响力可能也不会很大，但有时却也会收到意想不到的效果。这些办法有：去相关网站论坛及BBS上发布自己网站的消息，在各种企业网、商务网（如中国企业网、阿里巴巴等）注册，介绍网站的产品等等。制作心得许多新手会及不可待地将收集到的各种资料填到各个页面，转眼间首页就做出来了，好象很有成就感，但要修改一些页面元素时，却发现一页一页改起来很麻烦。所以建议先制作一个有代表性的页面，将页面的结构布局、配色方案、链接样式考虑周全，然后将其存成模版，再做其他页的时候，只要打开模版文件，像“填空”似的，把内容添到页面中，这样制作页面，速度快，整体性强，如果再结合JAVA程序的使用，会大大提高工作效率。