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