多媒体实验室——制作网页的流程

最新推荐文章于 2023-07-18 11:22:17 发布

ywj0702

最新推荐文章于 2023-07-18 11:22:17 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：大学比赛文章标签：多媒体实验室

本文链接：https://blog.youkuaiyun.com/weixin_41005131/article/details/88258933

大学比赛专栏收录该内容

1 篇文章

订阅专栏

本文分享了两位学生在多媒体网站制作方面的经验，包括程序设计、数据库构建、后台及客户端页面制作，以及UI设计要点，强调内容充实、色彩控制和整体感，适合参赛者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家好，这里分享一些我和李同学制作多媒体网站的经验（我是负责程序的，她负责UI设计)，我们参加过两次比赛，有所小收获，希望下面的内容对大家之后参加比赛有所帮助。下面只是小白对制作网站的个人理解，有很多不足的地方，请大家谅解。

程序部分（我）

围绕主题，内容充实

明确网站主题，网站的所有内容都要围绕主题。相对于比赛来讲，不管网站的主题如何，内容需要充实，网站的导航栏应该要6~8个栏目，或者更多，有些主栏目下的分栏目可以直接作为主栏目，作为亮点展示。（这些虚的东西我也讲不出太多，自行体会。。。）

构建数据库

首先需要设计好数据库，通俗来讲，就是想好网站需要存储哪些数据，会用到哪些内容（所以在主题确定之后团队要构思好整个网站的大概的内容，比如资讯板块，用户板块等等），我这里就简单建一张用户的数据表。（更多的字段由各自的网站需要来搭建用户数据表）
在这里插入图片描述
其他版块的数据表设计类似。

制作网站后台

后台的模板源码可以在百度搜索，这里提供一些网址。然后根据你所设计的数据库来制作后台。
源码之家：http://www.mycodes.net/154/
模板之家：http://www.cssmoban.com/cssthemes/houtaimoban/

Tips:
1.如何涉及到富文本编辑的话，我用的是百度编辑器，将文件拷到你的项目中，引入js和css文件即可，详细的话你可以参考文件夹中的demo文件，会提供实例给你。
2.alert弹框，如果你嫌浏览器的alert不够使用的话，可以下一个alert插件。（我平时用的比较多的是alert.js）
说到插件的话，比如折线图，轮播图，扇形图，三级联动等插件，只要你有心，都是可以在网站找到的。
酷站代码：http://www.5icool.org/
jquery库：http://www.jq22.com/

制作客户端页面

其实就是给用户显示的界面，页面分为前端和后端。
1.前端用到的语言是html，css，javascript，（如果你觉得用javascript写脚本比较累的话，你可以尝试用jquery，需要插入一个jquery.js文件，jquery的很多函数简化了javascript的代码，可以加快开发速度），当然更高级的vue.js,node.js有兴趣也可以尝试（小白还未尝试过，有大佬学会了教我一手呗）。前端语言中如果对高级语言接触和运用不多的话，学习起来会比较吃力，比较于javascript，html，css就非常简单了。
2.前端的网页制造使用框架的比较流行的bootstrap，layui，amaze框架，使用框架的话可以大大降低小白写样式的痛苦。。。
3.后端语言是php，php就是实现业务需求，通俗讲就是把数据存到数据库，把前端传过来的base64编码的图片保存到文件夹中，然后生成路径等一些操作。

最最关键的一点

如果你凭实力获得了答辩的机会，那一定要补一下wamp的一些知识，多端口，局域网访问，（我们组…就是在答辩的时候没有配置好wamp，答辩的时候就吃亏了）

UI部分（李同学）

网页设计的注意点

一

先学PS的基础操作，知道怎么画圆，拉渐变，改字体大小和样式，拉参考线等基础操作，就可以开始模仿网站了,做网站用不到太多高超的PS技术
模仿简单大众的网站（可学到:页面画布的宽度，导航栏的高度，页面的基本配色，常见排版等等）
模仿一些简单的广告电商网站（由颜色背景跟产品与广告词组成的简单广告，可学到:文字排版，色彩搭配）
建议先模仿，再重制，后创新。关键还是多练习，多观摩，提高审美

二

美工不仅要负责做出网页的效果图，还要考虑一些交互的细节，比如：当鼠标移到一个可以点击的文字或图片，它会有什么动效，平时临摹和浏览网页也可以多思考下

三

规范下网页的排版，对齐时一定要拉参考线然后用移动工具V+方向键来移动对齐(Ctrl+R打开标尺,鼠标点击标尺再下拉或右拉出参考线)，创建等分或居中参考线可下载PS插件guideguide

四

就跟你们平时的衣服搭配一样，网站色彩也要控制在三种以内，不要堆砌很多颜色，把整个网站弄得五颜六色的，只需要一个主颜色，其他颜色是用来点缀的（颜色面板上可以勾选“只有web颜色”来方便选色，另外尽量少用纯黑色）

五

网页设计标准尺寸:在1024*768下，网页宽度保持在1002以内（我是直接1000），如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。页面长度原则上不超过3屏(即612-615 ×3）

六

字体：网站字体大小在12px~24px内，正文一般13,14px的微软雅黑，提示备注什么的一般12px，正文字体很少用纯黑#000000,一般是#3333333,#222222，不是用图片来显示的字请直接用微软雅黑或宋体
PS里面的字体渲染选平滑或犀利，这两个和浏览器上显示效果的最接近，选好了就不用改了，调整字体粗细是旁边的Light、Regular、Bold