网页制作步骤实验报告.doc

一、网页制作步骤： 1、使用Dreamweaver建立一个本地站点并命名为“新”， 包含以下几个文件和文件夹：图片文件夹（photos）；音乐文件夹（music）等。 2、在站点“新”中新建一个名为“欢迎进入”的网页文件，进而开始网页制作。 3、首先插入背景图片，在设计网页空白处点击右键—页面属性—背景图片浏览—选择图片。 4、插入图片，装饰页面，为了固定图片，先插入层，插入记录—AP Div，在层里点击左键，再按插入记录—图像，改变位置和大小。（以后插入层和图片同此。） 结果如图： 5、在插入一层做网页导航。 结果如图： 6再插入层写标题。结果如图。 7．插入图片，在图片上插如层，在ENTER上点击右键—创建链接到文件名为“我们の家”，如图： 8、经过位置改变，字体大小修改，完成导入页面。 9、在站点“新”中新建一个名为“我们の家”的网页文件，进而开始网页制作。 10、插入背景，装饰图片。 11、制作导航栏，如图 12、选中登陆点击右键，创建链接到登陆页面。 13、登陆页面的制作步骤： （1）插入背景，装饰图片，以及标题。 （2）插入表格，插入表单，如图: 结果如图： （3）“返回”创建链接回首页。完成登陆页面。 14、继续首页制作。制作导航栏，结果如图： 用行为做出，当鼠标靠近中山时，Welcome 的那个层隐藏，中山十景，名优特产，推荐路线的层显示，当鼠标离开时则相反。具体步骤如图: 其余同此。 15、打开“时间轴”面板，选中创建的层“我们の家”将层拖到“时间轴”面板的帧控制区中，出现一条紫色的动画线段。 在线段任意一帧点击右键，选择“添加关键帧”，再往后点的帧点击右键，选择“记录AP元素的路径”，任意拖动层， 如图： 点击自动播放和循环按钮，即可。 16、插入层，插入图片，如图： 用行为的方法，使得鼠标靠近小图时，在右边显示同图片的放大版，其他大图隐藏。 如图： 17、插入音频。 插入层，点击层里面，点击菜单中的“插入记录”选择“媒体—插件“，选择插入的音频，移动好播放器的位置即可。如图： 18、插入视频。 插入层，点击层里面，点击菜单中的“插入记录”选择“媒体—插件“，选择插入的视频，移动好播放器的位置即可。如图： 结果如图： 19、制作点击图片即可将该图设为网页的背景。代码如图： 效果如图： 20、由于首页和子页面背景相差较大，页面板块和颜色不太协调，于是进行重新排版和改变不协调的因素。 三、最终设计结果： 导入页面： 首页： 登陆页面： 总结： 这次的网页我们花了很长的时间，很多心机去做，可是经常得到的效果让我们不甚满意，不过制作完这个网页以后，我们也获得了很多，不仅仅是网页设计技术，还有如何跟同学协调合作，接下来是我们做完后得到的体会和心得。 我们这次制作，最大的问题就是我们没有从一开始就设计好我们要做的网页，包括主题，内容，网页风格，网页排版等，导致在做完以后觉得不好，又重新再做过，做了一些无用功。 对于色彩的搭配，网页色彩搭配和谐，可以让人觉得网页整体十分协调舒服，不仅如此，字体颜色与背景图片相搭配，网页不会显得突兀。 对于布局，要找到适当的材料，通过适当的布局才会得到好的效果，素材和布局同样重要。要通过合适的框架，表格，图片，选择适当的纵横混合排版或是不规则排版。 关于层，层在我们的网页是一个很重要的元素，加入层以后才可以将图片或文字等随意的移动位置，可以用进行行为、时间轴等技术的操作，可是插入过多的层也会使得制作难度提升，有时小层被大层遮挡，把小层找出来也是个不小的过程。 关于图片，选取不仅要与主题吻合，色彩搭配协调河和谐，还要注意图片像素，还要建立一个独立的文件夹存放在正确的路径中，这样在浏览的时候才会显示出来，想让图片不一样，还可以通过PS进行抠图等。 关于插入音频和视频，注意插入的格式计算机能否支持播放，不能的话要转换格式。