同时主页也要实现给人简洁明了的视觉感受。因为网站主要分为首页、摄影、平面等模块,因此在主页上都包含了一些各个子页面的内容,给浏览者一个初步的印象,并且设置好相关链接,以便浏览者进一步浏览本网站。
②副页功能:
副页是主页内容的拓展,在浏览者浏览主页寻找到想看的内容时,可以通过点击超链接进入副页进行更多内容的浏览,副页的设计将每个模块的内容具体化、深入化、详细化,方便浏览者更深入的阅读与学习。
③登录页面功能:
实现前端与后台页面的无缝连接,能够让管理者方便快捷的进入后台进行操作。
(2)网站后台要实现的功能:
①因为PHP在windows下的环境配置比较复杂,因此我选择使用使用phpstudy来进行环境的搭建,phpstudy程序集成php、Apache以及MySQL等软件,对于我们这种刚接触php的新手来说是很方便好用的php调试环境。
②将前端的模块添加到后台实现后台与前端的对接。
要实现后台直接修改前端内容就需要整合前端与后台的相关代码,将一些前段的模块添加到后台实现后台的直接调用,方便管理者进行模块的修改。
③采用cms系统来设计后台管理网站。后台网站可以对各个模块信息进行增删改,让管理员可以更好的管理网站的相关内容。给管理员设置了上传内容的功能,使用file上传图片和视频,限制图片视频上传大小,同时也可以通过获取网络上图片与视频的链接显示到网站中去,可以选择自动下载网络内容存放到D:\phpstudy\WWW\cms\upload\content文件夹中,也可直接读取网络内容。
2.网站整体结构流程图如下:
(1)前台页面功能流程
(2)后台页面功能
四、设计过程中出现的问题以及解决方案
虽然说网站整体的制作在预期内完成了,也能够实现基本的功能,但在整个网站的制作过程中还是出现了一些问题,但都通过自己的学习或者询问他人解决了。
1.在设计结束初步制作前端页面的过程中
在设计网页的时候基本是以美观为原则进行设计的,参考了很多相关网站再进行修改设计出具有自身特色的网站,但是,在真正进行前端页面的编写时发现很多设计的内容用html语言与css代码很难实现,因此只能通过修改设计稿来进行后续的页面编写。
2.在进行前端页面代码编写时
很多效果初步写出来总会有或多或少的问题,必须不停地调整css代码才能获得最终的效果。比如说,在一开始设定背景图片时我想实现灰白渐变的效果,当初上网寻找相关代码但是无法实现,询问了以前实习时认识的前端工程师之后他教我使用图片的方式,代码如下background:#fafafa url(image/backBg.png) repeat-X top fixed,之后背景渐变的效果就完成了。
在进行页面书写时也存在过给p加了float:left后左侧出现大片空白,无论是使用margin:0px;还是padding:0px;都无法解决这一问题,在查询了相关书籍之后使用了<p id="clear"></p>并且给clear加了margin:0px;和padding:0px;的样式之后就解决了这个问题。
在进行页面书写时很多时候因为加的width超过本页宽度导致底部出现滚动条,且图片太长很难让图片保持居中的位置,看起来不是那么美观,最终这个问题在使用到css代码margin:0 auto;并且改了width之后得到解决。
我在页面中加了一个top_rim元素,即回到顶部,在设置css样式后发现它会根据不同的页面调整位置,在上网查询之后加了个position: fixed;样式之后才实现元素固定在各个页面的固定位置,不会发生位置的改变。
刚开始在每一个页面都有顶部导航以及底部导航的代码,改变一个页面的超链接则需更改很多内容,实习单位的师傅教了我一个方法,把每个页面共有的代码统一放在一个html文件中,比如说我把顶部导航相关代码放在top.html文件中,在各页面中加入<include file="include/top.html" />这一串代码,这样下次修改首页导航内容就只需在top.html中进行修改而不需要一个一个页面的修改,减少了工作量。 《视觉传媒》网站设计(2):http://www.youerw.com/jisuanji/lunwen_36208.html