《视觉传媒》网站设计(2)
时间:2019-07-21 18:49 来源:毕业论文 作者:毕业论文 点击:次
同时主页也要实现给人简洁明了的视觉感受。因为网站主要分为首页、摄影、平面等模块，因此在主页上都包含了一些各个子页面的内容，给浏览者一个初步的印象，并且设置好相关链接，以便浏览者进一步浏览本网站。 ②副页功能： 副页是主页内容的拓展，在浏览者浏览主页寻找到想看的内容时，可以通过点击超链接进入副页进行更多内容的浏览，副页的设计将每个模块的内容具体化、深入化、详细化，方便浏览者更深入的阅读与学习。 ③登录页面功能： 实现前端与后台页面的无缝连接，能够让管理者方便快捷的进入后台进行操作。 （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中进行修改而不需要一个一个页面的修改，减少了工作量。 (责任编辑：qin) |