网页设计课程设计报告.doc

中华名吃网站设计与制作课程设计说明书 软件学院 2011级软件技术1班112410111 张通课 程 设 计 报 告课程名称: 网 页 设 计 设计题目 my campus 院（系）: 电气信息工程学院 专业年级: 2010 级 学 号: 10102 姓 名: 指导教师: 周 改 云 2012 年12 月 08日9目 录my campus网站设计报告书11 作品简介12设计方案23 实现过程33.1站点的创建和结构组织33.2库项目的创建33.3样式的创建33.4模板的创建和应用43.5超级链接的创建63.6技术难点及解决方法74作品特色85参考文献9My campus网站设计报告书1 作品简介设计思想:我觉得我最熟悉的是我的校园，最爱的也是我的校园，我在这里生活，在这里求学，我享受这里的一切。网站主题:本网站背景基本上没有，我引用了好多照片为素材，以学院本有的绿色为主颜色，搭配有彩图，动漫图片。本网页多以厂字形为主，其左是图片，右边是文字介绍，这样能使浏览者更能清楚的了解我的校园。2设计方案先对网站进行需求分析，并根据需求确定网站的布局类型和配色方案，写网站策划书，画出网站的链接结构和层次结构图。本网站是根据广大浏览者的心理需求而制定的，主要以厂子形和同字形为布局类型，其配色主要以黄色为背景，适当的地方又加了红色，白色等色彩。然后根据网站策划收集相关素材，并根据需要精心整理或制作素材；接着使用Dreamweaver创建站点，并组织好站点的结构；紧跟着创建库项目、模板和样式，并将库项目和样式应用于模板；使用模板创建首页、一级页面和二级页面，创建合适的超级链接；添加合适的图、文、多媒体或行为；检查、完善网站；书写课程设计报告书。3 实现过程3.1站点的创建和结构组织首先在我的电脑除C盘以外的盘区建立以英文命名的文件夹，然后在所建好好的文件夹下命名HTML、SOUND等文件夹。打开DREAMWEAVER，在标题栏点击新建站点，取名站点名，选择刚才已经建好的文件夹。站点结构图如图2：图2 站点结构3.2库项目的创建我为了方便起见创建了一个库，就是自己的学号和姓名，还有联系站长链接。库的作用在于重复使用和频繁更新内容。点击资源面板，选择库项目，点击下面的小加号添加新库，再添加好的库后编辑库名，双击库在里面输入你想要的内容，然后保存，则在库被自动保存在站点的library文件夹中。3.3样式的创建我创建的样式名称分别是：CLJ、texe、tupian等。clj属于高级样式，text和tupian均属于类样式，具有调整字体和文字前面的图片作用，美化网页，给浏览者以视觉上的舒服，另外样式具有批量生产，方便省时。clj的作用是鼠标经过，点击后出现不同颜色，可以使浏览者看出哪些是已经看过的那些还没有看。Clj样式的主要创建步骤是：在css面板中点击css面板，点击下面的的小号，选择高级按钮，把clj存储在common文件夹中，点击link，出现一个对话框，调整字号，无线下划线，选择连接时的颜色为黑色，点击确定，以同样的方法创建hover和visit，鼠标放到上面是白色，点击后是蓝色3.4模板的创建和应用在实现过程中，本人创建了2个模板，模板的布局分别采用“厂”字形和“同”字形。模板创建的主要步骤：点击资源面板，选择模版，点击下面的加号，创建模版，然后单击标题栏的文件，新建文件，点击模版，选择你所建的模版双击便可创建新的网页。模板效果如图3和图4： 图3 模板1效果图 图4 模板2效果图电子邮件链接是输入407219835邮箱链接是输入mailto：e-mail地址3.6技术难点及解决方法实现过程中技术难点主要有一下几个：难点1：一些特效代码较难改写；解决方法是：查阅资料请教同学难点2：框架命名困难，解决方法是：翻阅课本，自己反复演示4作品特色我的网站特色主要有一下几个：1：显示隐藏层，点击上面的图片下面的内容会改变.在山水中原页面中2：框架在框架的页面中打开任意的网页内容会在主页面打开，该效果在在魅力中原页面中3.圆柱图片，点击主页上的图片其图片会自动的向左或向右滚动，这个效果在首页页面中4.层动画，图片会自动的滚动，效果就是引人注目，这个效果在注册会员页面中。5.联系站长,点击邮箱的联系方式，5参考文献1 颜虹. 中文版Dream