网站制作期末作品介绍

四川大学锦城学院期末作业

科目：

网站制作基础

专业：

2016级广告学

班级：

2班

姓名：

董皎

学号：

163010080

分数：

指导老师：

完成日期：第十七周

一、设计题目：影视网站制作

二、设计思路

（一）主页设计

Photoshop是一个在设计图片样式以及界面等的很棒的工具，最棒的是使用笔刷和对于图片的处理方式，一个用具的使用方式不止一个。主页上，以橙色作为主色，清新自然，以灰色作为搭配色，虽然使用较少，但占有不少分量的画龙点睛的作用。构图上，我以爱奇艺一类影视网站作为借鉴，把醒目显眼的视频资源海报置于最中间，其他的小版块则环绕分布。板块功能上，主要是把电视剧和电影进行了一个板块分类，由于我的网站主要把重心放在电视剧上，因此就在主页上把各个电视剧的分类写的比较详细，但是，电影的分类放在了子页上。实现过程上，使用Photoshop进行了图片处理，对整个主页以及子页进行了构想，然后使用Fireworks将主页和子页进行切片，导出以后，再用Dreamweaver把主页生成网页，稍调比例之后，再把其他几个子页通过相同的方式转成网页以后插入主页的各版块的超链接上，这样就差不多制成了，最后就是善后工作，把原材料分好类。

（二）子页设计

1.子页1：

子页1为登录界面，以较为简单的橙色和灰色色块构成，尤其是橙色为界面主色。构图以简单的方块等构成，直接是登录时需要输入密码和输入账号的界面，因此简洁大方。使用PS时，基本只使用了拖方块等简单的利用。

2子页2：

子页2为韩剧部落格，主要是为韩剧迷们提供各种各样的韩剧资源，满足大多数女性粉丝们的需要，因而也是使用橙色为主界面色，这样的颜色也比较吸引女性们的注意。界面也比较简洁，在PS中主要是对布局进行了调整，没有进行什么大型的图样制作。

3.子页3：

子页3主要为日剧部落格，旨在针对日剧迷这一部分受众，也可以收揽一大部分日剧迷们。而界面设置与子页二类似，因此，详细的制作步骤可以参见子页2。

4.子页4：

子页4位电影部落格，正如最初的介绍设计中，与其他电视剧部落格不同的是，由于不主攻这一板块，所以在这一子页上就会显得更加繁杂，但是类型也与电视剧大同小异。布局也与子页2,3类似。

（一）切片

首先介绍切片的软件和工具，再介绍切片的过程。

1.主页的切片

首先打开软件Fireworks，然后点开切片工具，进行切片时，每一个有区域的部分都要进行切片，尤其是需要插入超链接的部分依次把国产、美剧、韩剧、电影、日剧切片，左上角站标切片，右上角依次切片，下方热点视频等依次切片，最下方的橙色部分也切片，然后导出，存成HTML和图像的格式。

2.子页1的切片

有色部分全部切片，无色部分一整块的地方切片，然后也导成HTML和图像的格式。

3.子页2的切片

把站标和右上角切片，把海报和文字分别切片，下方一排文字切片，然后白色部分切片。

4.子页3的切片

把站标和右上角切片，把海报和文字分别切片，下方一排文字切片，然后白色部分切片。

5.子页4的切片

把站标和右上角切片，把海报和文字分别切片，下方一排文字切片，然后白色部分切片。

（二）合成

打开Dreamweaver，点开主页的一个切片（需要插入超链接的部分），创建点击右键，创建链接，在URL处输入网址，点击上方的地球图标即可以预览，然后点击保存。

（三）网页的链接

插入之前使用Fireworks生成好的几个网页作为超链接，把子页作为超链接插入主页里。

（四）网页的自适应屏幕分辨率大小

调试以后80％是比较合适的，但是为了清晰也可以选择100％。

（五）网页的保存

在Dreamweaver上就可以保存为主页和子页的形式。

（六）网页的浏览

直接点击主页的网页图标，根据切片和超链接的布局点击进去就可以浏览了。

（七）期末总结

本学期，网站制作的课程分为了色彩与构图、图形处理、动画制作、网站设计四个板块。第一个板块属于自学领域，所以我们主要在后三个板块花了较多的时间。第二个板块着重于Photoshop软件的使用，练习了较多的基础设计内容；第三个板块着重于Flash的使用，主要是简单的动画制作，这一部分还是比较复杂的，在控制每一帧上挺困难的；最后一个板块则就是把前面的知识混合到一起，然后再使用Fireworks和Dreamweaver两个软件，就把网站做出来了。

虽然制作一个网站没有想象中那么困难，但是要把它做的精美就不是会做那么简单就能够解决的事了，更多的是要多收集素材，这样才能有美感的做出一个赏心悦目的网站。