网站设计与制作(div css)--大学本科毕业论文 下载本文

图 4-10 网站设计8

由于页面太长,需要设计一个专门做导航来浮动显示,随时可以跳转到位置,此处二维码可以替换成为公司的手机站或者app,暂时使用无关的二维码仅作示范。

图 4-11 网站设计9

接下来使用切片工具仔细的将页面中的图片切出来,然后主页就完成啦。

图 4-12 网站设计10

接下来完成子页面,子页面基本都是单页,使用ps将页面设计完成。全站头脚都使用首页的样子,只是稍微改动中间部分。

图 4-13 网站设计11

当然这个页面中的所有文字都是可以更改的,价格标题都是为了给后台开发人员作为样式参考。然后是公司简介,只需要替换头脚中间图文居中即可:

图 4-14 网站设计12

政策法规页面与公司简介页面一致。

第三节 利用DIV+CSS制作网站页面

开始制作网站页面,首先需要创建一个html文档,根据HTML5标准写上声明:

红酒特卖

当然也可以根据html4的标准声明,这只是HTML5把他简化了而已。使用很多软件创建空白html文档的时候会自动生成声明。现在需要将外部样式表css链入文档中,顺便将需要使用的js也一起链接进去。比如jQuery库和自己用来写代码的js。将以上说的这些写在中间。

根据前面设计好的草图先大概做出div的框架。

图 4-15 网站制作1

然后设计导航栏,使用hr标签来把每个A标签分隔开,之后在href中写上链接的位置,页面内跳转至div用#号表示。将链接处分别填上想要跳转至的div。






最后的关闭按钮使用jquery绑定事件,自己的jQuery事件写在my.js中,前面有过引用,然后再在my.js中添加如下代码:

$(\