Web网站设计实验报告

WebWeb 网站设计实验报告网站设计实验报告 学学 生 生 学学 号 号 班班 级 级 系系 别 别 学学 院 院 目录 一 设计目的 3 二 设计题目 3 三 结构设计 3 四 技术分析 5 五 设计过程 6 六 实验总结 7 附录 网页源代码节选 8 一 一 设计目的设计目的 在 Internet 飞速发展的今天 互联网成为人们快速获取 发布和传递信息 的重要渠道 它在人们政治 经济 生活等各个方面发挥着重要的作用 因此 网站建设在 Internet 应用上的地位显而易见 它已成为政府 企事业单位信息 化建设中的重要组成部分 从而倍受人们的重视 我们当代大学生更是离不开 网络给我们带来的好处与便利 但是 我们成天浏览的网站网页到底是如何制作 的呢 我想这一点很多同学都没有去深究过 所以为了了解网页制作的过程 我 们在老师的指导下分前台和后台进行了一系列操作 并有所收获 我们了解和熟悉了网页设计的基础知识和实现技巧 也熟练掌握了 Photoshop cs3 Dreamweaver cs 等软件的的操作和应用 二 二 设计题目设计题目 篮球球迷交流网 主要是篮球新闻 视频 还有交流帖子区 交易广告平台等 三 三 结构设计结构设计 选定主题 确定题目之后 网站设计还是一张白纸 我所做的是需要在这 张白纸上一点点勾勒出网站的大框架 然后慢慢填充 实现网站的构想 首先 我们在网上和图书管里查阅了大量的资料 以确定我们所需要的基本技术 然 后 我们对整个网站进行总体规划 接着逐步细化 我的设计主题是篮球球迷交流网 包括多个方面 框架为 首先是首页 首页下是新闻头条 分栏有球迷自述 篮球美图 给我留言 从分栏都可以回到首页 首页主要分为新闻头条 热门话题区 靓图展示 此为网站的大体板块 下面我们就每一页的页面板块进行详细的分析 有 了大体框架 我们只需要在每一页的主要内容上做以划分 下面就内容板块举 几个例子 1 首页 作为一个网站的第一界面 一定要有内容 我把 content 分为 logo 和网站导航 div 下面又展示了正文内容 2 篮球美图 四 四 技术分析技术分析 WEB 技术主要分为客户端和服务器技术 Web 客户端设计技术主要包括 html 语言 Java Applets 脚本程序 CSS DHTML 插件技术以及 VRML 技术 Web 服务器端的开发技术也是由静态向动态逐渐发展 完善起来的 Web 服务器 技术主要包括服务器 CGI PHP ASP ASP NET Servlet 和 JSP 技术 一一 建立布局建立布局 这里我们用到了 HTML 以及 CSS 等实用技术 HTML 之所以称为超文本标记 语言 是因为文本中包含了所谓 超级链接 点 由此可见 网页的本质就是 HTML 通过结合使用其他的 Web 技术 可以创造出功能强大的网页 因而 HTML 是 Web 编程的基础 而 CSS 是用来进行网页风格设计的 比如 如果想让链接字未点击时是蓝色 的 当鼠标移上去后字变成红色的且有下划线 这就是一种风格 通过设立样 式表 可以统一地控制 HMTL 中各标志的显示属性 级联样式表可以使人更能有 效地控制网页外观 使用级联样式表 可以扩充精确指定网页元素位置 外观 以及创建特殊效果的能力 二 网页中的图像 二 网页中的图像 1 怎样编辑网页中的图像 在 Dreamweaver cs3 中 可以使用 图片 工具栏中的各种工具对网页中的图 像进行编辑 编辑功能主要有 图像旋转和翻转 剪裁 图像淡化 凹凸效果 等等 另外 为了使图片更符合要求 我们还在 photoshop cs3 中队所用的图片进行 了处理 使得图片看起来更加精细美观 符合我们的主题要求 2 使用背景图像 使用背景图像与使用背景色不同 使用背景色只将网页的背景用某种颜色填充 而使用背景图像则是将网页的背景用图像平铺 这样做可以使制作的网页更美 观好看 三 加入超链接 三 加入超链接 选中图片或者文字 在下面的链接属性中输入所要连接到的地址 同时 下方的目标属性被激活 输入 blank 设置成在新窗口中打开网页 我们设置了 链接本站点的网页页面 同时也连接了外网 链接到虎扑和百度 使得大家 访问页面时能够查询更多详细的信息 方便用户查询 五 五 设计过程设计过程 制作网页 首先是确定主题 经过再三考虑 我选择了这个关于篮球球迷交流 网的网站 因为平时比较喜欢打篮球 对这方面了解比较多 而且主题比较新颖 网站设计主题比较现代化 发挥空间也比较大 于是网站主题确立 再后是收集资料与素材 了解关于篮球方面的一些图片和新闻 加以自己 的收藏 再参考一些好的网站的布局 特色 颜色搭配 背景图等 最后开始制作网页 使用 dreamweaver 页面用 div 布局 用白色充当背 景色 但是丝毫不显单调 主体部分是用一个公共的 css 样式 而在其他页面则通过 DIV 标签来实现 内容的填充 主体页面制作非常简单 采用了整齐的布局 注重网页的实用性 在其中插 入表格 分栏还插入了超级链接直接链接到互联网 六 六 实验总结与体会实验总结与体会 在实验过程中 遇到了许多困难 比如说 加入超链接过程中 明明在页面 属性里设置的是超链接的文字是原色 点击链接后也是原色 可一链接上就变 色了 做了很多研究 实验 改了很多次代码 终于弄上了 还加上了把鼠标 挪到上面字就会变色的特效 在网站制作过程中 因为我加了两层背景 所以 代码稍有疏忽 整个页面就完全变样子了 有一次弄了好半天都没找的错误处 最后发现其实少加了一个 div 网站制作过程中我的白色背景常常会出现无法 延伸到页尾的情况 经慢慢摸索 发现是因为我的白色背景布还不够长 显示 器不同会造成一定差别 在调整了白色背景图片大小之后问题就解决了 做好 页面 并不是一件容易的事 它包括个人主页的选题 内容采集整理 图片的 处理 页面的排版设置 背景及其整套网页的色调等很多东西 本次网站设计 还存在很多不足 页面过于简单 特效较少 这是我需要提高的地方 需要学 的地方还有很多 需要有耐心 坚持 不断的学习 综合运用多种知识 才能 设计出好的 web 页面 附录 网页源代码节选 首页代码节选 篮球球迷交流网 var newwindow function show newURL newwindow window open newURL newURL newwindow focus return false function ph1 var obj document getElementById floatLeft obj src image 45 gif function ph2 var obj document getElementById floatLeft obj src iamge 34 jpg head width 1125p