网页制作实训报告.docVIP

PAGE ********* 网页制作 实训报告 姓 名 学 号 班 级 得 分 涉外经济管理学院****专业 ****年**月**日 PAGE i 目录 TOC \o 1-3 \h \z \u 目录 i 1 网站简介 1 2 网站结构图 1 3 设计主要步骤 2 3.1 效果图绘制 2 3.2 切片的制作 2 3.3 DW中网页编辑 3 4 主要问题及解决办法 5 5 总结 5 6 作品效果图 6 涉外管理学院电子商务专业网页制作实训报告 PAGE 6 网站简介 我所设计的网站的主题为“我的书库”，我的网站属动画风格，图片源于动画片，里面述说本网站有很多好看并有意义的书籍，一.（1）通过本次实训要完成网页制作，包括二级页面和三级页面，还要应用一些网页制作的基本技巧。（2）掌握布局技术，模版应用，CSS样式，超级链接，（3）通过连续时间的实际操作，巩固对网站的创建、网页的策划、设计与制作的理解，加深理解网站、网页、制作的过程。二.实施步骤：（1）确定网站内容为各种书籍,并制定详细的策划报告.（2）查找相关资料，制作banner，logo，和相关动画图片.（3）采用布局技术设计首页，然后插入logo，banner美化首页. （4） 配上相关图片和文字，制作了网站相册.（5）友情连接应用了框架，链接到晋江小说网等相关网站. （6）创建文件，并运用到各个连接上.（7）个相关页面之间进行必要的超级链接，友情链接与相关网站上链接.（8）最后完成相关站点的链接.（9）检查链接。 网站结构图 设计主要步骤 （1）确定网站内容为各种书籍,并制定详细的策划报告. （2）查找相关资料，制作banner，logo，和相关动画图片. （3）采用布局技术设计首页，然后插入logo，banner美化首页. （4） 配上相关图片和文字，制作了网站相册. （5）友情连接应用了框架，链接到相关网站. （6）创建文件，并运用到各个连接上. （7）个相关页面之间进行必要的超级链接，友情链接与相关网站上链接. （8）最后完成相关站点的链接. （9）检查链接。 效果图绘制 用PS制作主页和子页，先在PS里导入自己所需要的图片进行排版和修改，修改出自己想要的样子，然后再制作导航栏，用文本工具输入网站所需要的内容，添加相关的自己所想要的那些效果（我基本都用DW做的）。 切片的制作 在PS中做好自己所需要的主页和子页的，再用PS里面的切片工具对需要超链接的地方进行切片，最后用gif格式保存（我基本都用DW做的）。 DW中网页编辑 在Dreamweaver里面新建站点和CSS样式,再新建文件，与CSS链接。 然后对CSS进行排版，首先对页面有一个整体的框架规划，包括整个页面分为哪些模块，各个模块之间的父子关系等。 1）我的页面由’Container’,”Banner”,主体内容”Content”,菜单导航”Links”,脚注”Foooter”，几个部分组成。 2）设计各块的位置。在整体的#container框架中的页面的Banner在最上面，然后是内容#content与导航条#links,两者在页面的中部，其中#content占据整个页面的主体。最下方是页面的脚注#footer，用于显示版权信息，我的班级，姓名，学号等。 实现对页面的整体规划后，然后再向各个模块中添加内容，先body，例： body { background: url(images/2008102320739509.jpg) no-repeat left bottom; height: 1100px; width: 1000px; }. 再#container,例： #container { height: 350px; width: 1000px; background: url(images/20080704230728-838033441.jpg); }. 接着#banner，例： #banner { height: 300px; width: 1000px; font: 36px 黑体; text-align: center; vertical-align: middle; letter-spacing: 1em; }. 和#content.#links， 最后是#footer，例： #container #footer ul li strong { text-align: left; letter-spacing: 0.5em; } div { font-family: Courier New, Courier, monospace; } ul li strong {