课程设计实验指导书《网页设计与脚本语言》
编写单位:数信学院
编写教师:赵林莉
适用专业:计算机科学与技术
编写日期:2015.3
《网页设计与脚本语言》课程设计
一、课程设计目的
通过课程设计,使学生对网页设计的基本原则、栏目和目录结构定义、主流页面布局方法、导航制作、图文排版、色彩理论等进行详细了解。掌握网站规划、设计、制作、管理、发布的相关技术及网页制作的操作技能,并能够熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体标记及属性设计出网页;掌握使用css技术进行网页布局的基本方法;掌握JavaScript脚本语言的基本语法知识;掌握综合网站设计和发布的基本流程和方法。
二、课程设计题目
个人主页的设计与实现(具体题目自拟)
三、课程设计要求
1.网站要包括首页、个人档案、个人像册、个人收藏(或爱好)、个人作品、求职意向、给我留言等栏目板块,各栏目板块的具体名称可自行设计与制定,但基本内容不能改变。
2.采用DIV+CSS布局方式。
3.每个页面都有正确的导航结构。
4.站点结构清楚,内容的组织有条理。
5.合理使用Flash、图像和文字。
6.在首页中要求使用JavaScript显示“XXXX年XX月XX日星期X”。
7.个人像册部分要求使用JavaScript实现像册效果。
8.撰写设计报告,详细内容见报告格式。
9、作品注意富有创意,具有自己的风格和特点。
10、每个人一组,独立完成设计。
四、课程设计实施指导
1、网站定位
描述网站扮演的角色,要向访问者传达的中心内容,发挥的作用等。
2、需求分析
主要阐述使用者需要网站提供的功能。
3、栏目设计
主要阐述网站包含哪些栏目板块,各栏目的主要功能是什么。
4、站点定义与目录管理
主要介绍网站中各文件夹存放内容。要求最后要插入网站站点结构图,加图例。
5、网站风格设计
介绍网站的配色方案及布局版式。
6、网页详细设计与制作
(1)首页制作
介绍首页主要内容及布局方式,要求最后要插入首页效果图,加图例。
可适当插入代码。
(2)XXX页制作
要求同上。
……
五、需要提交的文档
1、网站文件夹。
2、课程设计报告(打印版与电子版)。
3、提交作品电子资料时,以自己的姓名和学号为名创建一文件夹,将网站文件夹及设计报告的电子版放入其中,一并上交。
4、上交时间6月18日。
六、成绩评定
《网页设计与脚本语言》课程满分100分,平时成绩为40分,作品成绩为60分。
设计内容及要求 <1>使用各种HTML标记,CSS各种常用样式及简单的JavaScript 技术,完成的网页没有错误 <2>首页设置导航栏,命名为 <3>利用CSS技术对网站进行布局,网站风格统一 <4>灵活运用JavaScript使网页生动 一、设计思路 首页: 二、设计结果及分析 首页:
1.对于主页,因为不太喜欢类似于搜狐类似的全文检索,更青睐于百度类似比较简洁的页面,随后设计出主页,虽然很简单,但我认为很精练,突出了这次设计的主题。 东营: 2.对于主页,因为不太喜欢类似于搜狐类似的全文检索,更青睐于百度类似比较简洁的页面,随后设计出主页,虽然很简单,但我认为很精练,突出了这次设计的主题。
广饶简介: 联系: 3.第四章做了根据js的一个互动。可以对前台邮箱的内容进行判断。
图片欣赏: 4.第五章,由于需要用到表格的内容,所以将照片用着种形式呈现出。 三、总结 通过本次网页的制作过程,我学到了很多实用的东西,也充分了解了editpuls这个软件的强大,对学习了一个学期的课程也有了深入的了解。在这段时间里,一方面,我尝试着讲课本上所学的知识运用到制作中,另一方面,我又时刻在网上学习自己需要的知识,学习到了很多有用的知识。虽然之前对于代码的编辑不是很明白,但这几天不断搜集各种网站模板,不断学习设计思路。虽然呈现出的作品很不完整,基本达不到观赏性和实用性,但我还会不断练习。争取作出属于我的风格的web。 五、附录(源代码)
首页:
网页制作课程设计设计题目:职业技术学院学生会 系别:职业技术学院 班级:09 计网 学号:092114010028 姓名:谯辉 指导教师:徐老师董老师 2011.7.4—2011.7.15
前言 都是可以通过网络来获得。但是什么为这所有的一切提供平台的呢。我们又是通过什么来获取这些消息的呢——对就是网页。现如今,数以万计的网站以网页的方式提供了丰富、精彩的信息。在人类社会进入信息时代的时候,在网络成为通信的主要手段的时候,在计算机网络普及的今天,网页也在它自己的岗位对于现在的社会,科技的飞速发展已经成为社会发展的标志。其中计算机的发展可谓快中之快,而在计算机的发展中计算机网络的发展又是首当其冲的。计算机网络从为我们所知,到现在才经历的短短的几年时间,在这几年中随着计算机网络的广泛应用,特别是Internet的普及和发展,网络已经成为了不可或缺的通信手段。不论是最新的新闻信息、新产品的出台、新游戏的发布、最新的各种IT 动态,包括等候就业人才的个人简历,我们上做出了突出的贡献。网页是我们在网络上的“代言人”。我们将什么样的信息传达给浏览者,要讲述什么样的事情,网页在这里起着重要的作用。 企业网站在企业的网络营销当中占有及其重要的地位,只要是涉及网络宣传的企业,都应该建立属于自己的个性企业网站。他不仅能够让企业在网络上展示自己的产品,促进实际销售的增长,更能够通过一根网线,向目标客户展示企业自身的形象。 对于企业网站设计的观点,偏重网站的形象设计,即在功能务实、体系完善的情况下,重点结合企业理念打造网站的形象。Logo就能很好的表现企业的形象。企业标志(Logo)是指用于代表企业形象的独特的、有意义的图案,是企业形象识别当中最核心的环节,可用于与企业形象相关的所有环节。由于企业标志所处的特殊地位,决定了其不能够随意更换,因此能否设计一个有内涵、有文化、便于识别的标志,并建立相关的应用系统,关乎到企业长远的发展,不容小视。 建设网站的一般过程包括:前期内容确立、网站架构搭建、创意策划、设计、网站建设。网站的功能版块一般分为首页(含引导页)、新闻部分、产品部分、信息交流部分、定制系统、零散页面等。根据不同的企业需求,各网站的功能版块数量、布局、结构各异。 要做一个有特色的网站,我们首先要熟练的掌握Dreamweaver、Photoshop 和flash等多种制作网页的工具,我们在掌握它的基础上要善于合理的利用这些工具,这样我们相才能做出一个让人看了后感到舒服的网页。
《网页设计与制作教程》 实 验 指 导 书 班级姓名学号
实验一网页基础知识 一、实验目的 理解网页组成元素。 理解主页、静态网页、动态网页等概念。 了解常见的网页布局。 熟悉Dreamweaver CS6的桌面结构。 二、实验软硬件环境 一台接入Internet的计算机;Windows 7操作系统;Dreamweaver CS6、Flash CS6、Fireworks CS6软件。 三、实验内容 1.打开“九江学院”官网,并回答以下问题: (1)该网页上有哪些网页元素组成? (2)在网站中打开5张不同内容风格的分页面,分析下它是静态网页还是动态网页,为什么? (3)如果分页面中有图片,把图片下载到电脑中,如何操作? 2.查找主页为“国字型”、“三字型”、“拐角型”、“封面型”、“Flash型”布局的网站各一个,并记录下网站地址。 3.查找若干个与图1所示布局相似的网页并记录网址。 图1网页布局 4.启动Dreamweaver CS6,并完成以下操作:
(1)新建一个空白网页,并保存,存储名为myweb.html。 (2)在文档工具栏中,切换“设计”、“拆分”、“代码”、“实时视图”,理解它的功能。 (3)对“插入栏”、“属性面板”和各种组合面板进行折叠/展开,打开/关闭操作,熟悉使用。 (4)给网页输入标题栏标题:我的第一张网页。 (5)在网页中输入一首唐诗,并完成简单排版。 (6)保存网页,并用浏览器预览。 四、实验思考 1.动态网页与静态网页如何快速区分? 2.开发个人网站的首页,可以设计哪些栏目,试做一个布局草图。
实验二常见HTML标签与简单CSS的使用 一、实验目的 理解常见HTML标签在HTML文档中的作用。 掌握通过纯文本编辑器熟练编写简单HTML的技能。 掌握简单CSS的使用。 熟练掌握各种常用标签并利用其来实现网页的排版。 二、实验软硬件环境 一台接入Internet的计算机;Windows 7操作系统;Dreamweaver CS6、Flash CS6、Fireworks CS6软件。 三、实验内容 1.案例:唐诗欣赏 第一步:使用记事本编写网页“page01.htm l”,实现如图1所示效果。 操作提示:
段落文字 图1 关于唐诗的简单网页效果 第二步:使用记事本将网页“page01.htm l”另存为“page02.htm l”并按下列要求对新网页“page02.htm l”进行编辑,效果如图2所示。 要求: ●标题文字大小用
标记。 ●作者信息文字大小为4,字体为幼圆,颜色为红色。 操作提示:文字 ●古诗文字大小为4,字体为隶书,颜色为蓝色,字体加粗。 ●在作者信息后加一条水平线,居中,水平线宽度为浏览器的50%,水平线的粗细为5像素,颜色为棕色。 操作提示:Web动态网页课程设计 (总学时数:16课时) 一 Web动态网页 课程设计性质:本课程是一门计算机相关专业实践性环节。以HTML和CSS为基础,全面学习网页设计制作有关的知识,让学生通过实践理解Web基本工作机制,并使学生具有一般网页制作的能力。与此同时,通过对Web页制作技术和制作工具的学习,使学生对网页设计中所涉及的相关知识有一个全面的了解。 二课程设计目的 通过对ASP对象的使用,实现对WEB数据库的访问。通过本课程的学习,使学生全面了解网站建设与网页设计的基本概念、基本理论及业务运作模式,了解网站建设与网页设计的特点及工作过程,掌握网站的建立及网页设计制作的方法,能够完成一般性网站的建设。同时学会Web数据库系统开发的基本方法与过程并能够实现B/S结构的数据库管理系统。 三课程设计地点 公共基础实验室3(A504) 四课程设计内容 本次课程设计题目方案如下:
题目1:基于Web的实验室信息管理系统 题目2:网络商店(见web程序设计课本案例) 题目3:学生自拟(需经过教师审核) 内容要求: (1)掌握Web网页常用的开发工具Deamweaver或.Net的使用; (2)学会IIS的配置,或者netbox的安装与设置; (3)学会Html、CSS、Javascript、VBscript或C#的简单开发和应用 (4)学会B/S模式下,asp与数据库的连接,建议采用Access 数据库。动态新闻管理系统。在系统中,必须完成文章的添加,删除、修改、文章内容显示、题目列表显示 五课程设计时间安排 第一周 安排计划 第二周 数据库的设计 第三周 完成HTML静态页面和 CSS设计; 第四周开始至第六周 开始JavaScript、Javascript、VBscript或C#的程序代码设计
《网页制作与设计》课程实验指导书 第一部分前言 通过上机实验不仅要验证教材和讲课内容,更重要的是能通过上机实训帮助实训者深入了解网页制作与设计的方法,掌握Html语言知识。 第二部分目录 实验1 安装Dreamweaver实训 实验2 Html语言基本标记实训 实验3 用Html语言编写网页实训 实验4 认识超链接实训 实验5 创建带有多种超链接网页实训 实验6 查询并认识CSS样式实训 实验7 网页中应用CSS样式实训 实验8 查询并认识框架网页实训 实验9 框架网页实训 实验10 网站设计实训 第三部分实验内容 实验1 安装Dreamweaver实训 一、实验目的 熟悉Dreamweaver环境;该软件运行环境的配置;简单网页的编写和运行。 二、实验原理 Dreamweaver(把图像、动画、文字链接组合管理)是一个“所见即所得”的可视化网站开发工具。 三、实验条件
四、实验内容 安装Dreamweaver,并在其上运行简单的网页界面。 五、实验步骤 1、安装Dreamweaver (1)、首先双击可打开安装文件,如图1-1所示。 图1-1 准备安装界面 (2)然后等一下,就会看到出现一个图形界面,在点下一步,如图1-2所示。 图1-2 欢迎界面 (3)然后就可以看到一个图形界面,然后点同意,如图1-3所示。 图1-3 安装界面
(4)就可以看到下面的一个安装图形界面,直到有个按扭是完成,如图1-4所示。 图1-4 安装完成界面 2、运行Html页面 (1)打开Dreamweaver8,如图1-5所示。 图1-5 打开Dreamweaver8 (2) 启动后的界面,如图1-6所示。 图1-6 开启界面
网页制作课程设计报告学院: 专业班级: 姓名: 学号: 成绩: 阅卷教师:
目录 1、设计目的 (1) 2、设计思想 (1) 2、1网站整体结构规划思想 (1) 2、2 主页设计思想 (1) 2、3子页的设计思想 (1) 3网页详细设计分析 (1) 4结论 (1)
1、设计目的 阐述该个人网站的设计意图与创意,简单介绍自己的个人网站。 2、设计思想 阐述网站的整体设计思想,包括: 2、1网站整体结构规划思想 要求阐述网站整体结构的选择、设计的思想,绘制网站结构草图。 2、2 主页设计思想 要求对主页的布局思路进行阐述与分析。 2、3子页的设计思想 要求对子页的设计以及网页对象的选取思路进行阐述与分析。 3网页详细设计分析 要求选取一张网页,对网页的设计实现过程进行阐述与分析,详细说明制作该网页的步骤,所使用的网页对象以及该网页对象的操作方法。 4结论 对整个设计报告做归纳性总结,并分析设计过程中的困难及如何解决的,最后提出展望。 一、设计目的
本课程的设计目的就是通过实践使同学们经历Dreamweaver cs3开发的全过程与受到一次综合训练,以便能较全面地理解、掌握与综合运用所学的知识。结合具体的开发案例,理解并初步掌握运用Dreamweaver cs3可视化开发工具进行网页开发的方法;了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解与熟悉网页设计的基础知识与实现技巧。根据题目的要求,给出网页设计方案,可以按要求,利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop cs3、Dreamweaver cs3等软件的的操作与应用。增强动手实践能力,进一步加强自身综合素质。我本次主要就是设计的一“新加坡之旅”为主题的网页,针对新加坡的美丽风景做了介绍。 二、设计思想 利用Dreamweaver8、0制作一个关于“新加坡之旅”的网站,利用表格、行为、层与链接等网页设计技术设计页面。 本网站以新加坡旅游为素材,主要讲解了与新加坡景
网页制作课程设计报告 学院: 专业班级: 姓名: 学号: 成绩: 阅卷教师:
目录 1.设计目的 (1) 2.设计思想 (1) 2.1网站整体结构规划思想 (1) 2.2 主页设计思想 (1) 2.3子页的设计思想 (1) 3网页详细设计分析 (1) 4结论 (2)
1.设计目的 阐述该个人网站的设计意图和创意,简单介绍自己的个人网站。 2.设计思想 阐述网站的整体设计思想,包括: 2.1网站整体结构规划思想 要求阐述网站整体结构的选择、设计的思想,绘制网站结构草图。 2.2 主页设计思想 要求对主页的布局思路进行阐述和分析。 2.3子页的设计思想 要求对子页的设计以及网页对象的选取思路进行阐述和分析。 3网页详细设计分析 要求选取一张网页,对网页的设计实现过程进行阐述和分析,详细说明制作该网页的步骤,所使用的网页对象以及该网页对象的操作方法。
4结论 对整个设计报告做归纳性总结,并分析设计过程中的困难及如何解决的,最后提出展望。 一、设计目的 本课程的设计目的是通过实践使同学们经历Dreamweaver cs3开发的全过程和受到一次综合训练,以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例,理解并初步掌握运用Dreamweaver cs3可视化开发工具进行网页开发的方法;了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求,给出网页设计方案,可以按要求,利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop cs3、Dreamweaver cs3等软件的的操作和应用。增强动手实践能力,进一步加强自身综合素
网页设计实验指导书 (一)DreamWeaver静态网页制作 第一章网站规划 ................................................................................................... - 3 -第二章Dreamweaver静态网页设计实验 ...................................................... - 8 -实验一在Dreamweaver中建立一个站点.................................................. - 8 -实验二在网页中使用文本........................................................................... - 15 -实验三超级链接的建立............................................................................... - 21 -实验四网页图像的应用............................................................................... - 29 -实验五网页表格操作 ..................................................................................... - 36 -实验六利用表格进行网页布局..................................................................... - 39 -实验七利用层进行网页布局....................................................................... - 48 -实验八行为和图层的应用............................................................................. - 53 -
课程设计报告 课程名称《网页设计》 课题名称南岳衡山旅游网页制作 专业信息管理与信息系统 班级信管1301 学号201303110125
姓名肖宏亮 指导教师余新宇、赵锦元、谢雅 2015年6 月10 日 湖南工程学院 课程设计任务书 课程名称《网页设计》 课题南岳衡山旅游网页制作 专业班级信管1301 学生姓名肖宏亮 学号201303110125 指导老师余新宇赵锦元谢雅 审批 任务书下达日期2015 年 6 月10 日 任务完成日期2015 年6 月27 日
目录 1设计的思路 0 2网站总体风格 0 3网站的分析与设计 (1) 4总体设计图 (1) 5详细设计 (2) 5.1各页面的内容 (2) 5.2首页的布局 (2) 5.3制作二级页面 (4) 5.4制作三级页面 (6) 5.6特效 (10) 6错误调试 (11) 7总结 (12) 8心得体会 (13) 9评分表 (14)
第一部分:课设目的 21世纪是一个信息时代,Internet已经进入人们生活与工作的各方面,而网页作为Internet信息传递的重要载体,其重要也日趋突出。所以实训的目的就是要我们更好的掌握好这一学期的网页知识和提高自己的动手能力,并且上传到网上去,让更多人认识我,更好的宣传自己。 个人网站的总体规划和步骤 1设计的思路 我的个人网站主要是以蓝色基调为主,使人一看就了然,很容易一看就形成系统的逻辑,而且与我们南岳衡山的旅游风景相衬显得十分融洽。 2网站总体风格 我设计的这个网站使用蓝色基调主要是给人舒服,能够一目了然,而且能够吸引人的眼球,更重要的是这期主题是南岳衡山,大体基调使用蓝色与大山的图片颜色相当协调。 网站的总体风格主要是以蓝色为主,以淡色为辅,充满活力,生机。具有个性色彩。 网站的布局其实并不复杂,主要是先规划还一个大致布局,可以参考很多旅游网站他的大体布局,但不能照搬全抄,要结合自身网站的特点做一些较之其他网页相对有特色的东西,这样才能更吸引人,在网页顶部,我们必须做一个能代表我们网站的LOGO,所以做好一个模版,模版做好框架了,那网站就初步先采用ps技术设计好自己网站的LOGO,然后创建导航栏,再根据导航栏制作其他的页面。在整个网站的制作过程中我们必须得切记整体风格必须一致,这样才会给人形成一个整体舒服的感觉,否则会显得很唐突。 绿色网站的内容结构也很简单,分类清楚。页面链接的层次也很明确,访问
网页设计课程设计报告 系别:计算机科学系 班级:09级计师二班 姓名:邓桂香 学号:200914340229 指导教师:李发英 成绩: 日期:2011年5月
网页设计课程设计报告 一、网站设计目的和任务 一学期的网页设计理论和实践课程都结束了,根据老师的要求及指导,我设计了此网站,本网站属于小型个人网站,目的在于简单的介绍一下个人状况,可以使老师和同学们更进一步的了解我现在以及部分过去的情况,加强老师和同学们对我的认识,深化我们大家的情谊,有利于以后在学习、工作生活当中的团结协作。 此外,这不仅是为了肩负学生的责任而去完成老师交给我的任务,更是对过去学习的知识的温习巩固,是一个把理论转化为实践的过程,是一个把自己的设计思想转化为实物的过程,是一个发挥自己创造力和想象力的过程。 再者,这是对自己在一学期内该学习科目以来的成果的检查,这是一个自我审视的过程:检测我该学期的学习成果,衡量一期以来的收获,更为重要的是扬长避短,发现自己的问题与缺点,使自己及时改正,发觉自身的优点和长处并坚持发扬,有利于我以后的学习和发展。 二、网站主题 本网站以个人从小到现在的大概情况介绍为主题,阐述喜好,表现本人的性格特点。
三、网站规划思想 当今社会,靠什么成功?很多成功人士都说过这样一句话:“成功来自百分之八十的人际关系和百分之二十的自身天分和努力。”据此可以发现,扩大人际关系网是十分重要的一项活动,因此就需要一条联系两方的桥梁,这条桥梁是满载信息的大流量的通道,在这信息时代,于是网络成为了这当之无愧的桥梁。我设计这个网站的思路就来源于此。 怎样让更多人了解你?怎么使别人更了解你?怎样扩大自己的接触面?当代是繁忙的一代也是讲究高效率的一代,当今面对这些问题,这时候的内敛不会被认为是好的,最好的解决办法我认为是把自己推销出去,我想通过网络把自己的概况晾晒,方便别人更快捷更省事地得到相关信息,通过这种方式,也可以交到志同道合的朋友,可以一起研究探讨,相互促进,达到共赢。 既然这样,那么网站的风格自然是温和、高雅、柔美的,这样才能达到更高的亲和力效果,同时也应该具有喜悦性、创新性、活泼开朗性,展现个人品格及魅力。最重要的是要呈现一个真诚的自我在大家面前,树立可信性、诚实性,消除虚拟因素,获得大家的真诚对待和好感。 在内容和结构上,具体如下: 整个网站分为九个页面,分别为:主页面、基本信息、个人照片、成长阶段概况(童年、中学、大学)、兴趣爱好(文学、书法、
网页设计实验指导书 经济与管理学院二零一二年二月
实验一HTML标记的基本语法 一、实验目的和要求 1.熟悉HTML文件的编辑环境; 2.掌握HTML中与文字、图像、页面、表格、表单和框架等的基本标记。 3.学会使用HTML设计出文本与图像相结合的较为复杂的页面。 二、实验内容 1、根据如表1-1所示的表格写出完整的HTML代码; 其中,《网络原理》和《网页设计与制作》课程的详细说明文件分别为该网页所在目录的net.htm和web.htm,需要为表中的书名设置相应的超级链接,以便在点击后可跳转到相应的说明页上。 2、编写出实现如图1-1所示页面效果的关键html代码,要求点击左边各目录项,相应的链接会显示在右下的帧中,并且适当填加特效如:背景图片、图像、动画等(也可自行设计效果)。 图1-1 个人网站首页 3、编写出实现如图1-2所示页面效果的关键html代码,其中各子项目都做了超链接,链接的目标文件自行指定。
图1-2 列表效果图 三、实验步骤 1.打开任何一种文本编辑工具,可以是附件中的记事本,也可以是rontPage/Dreamweaver 的代码窗口。 2.按各种不同标签的语法规则,输入合法的代码。 3.输入完成后保存代码文件,文件后缀为.htm/.html。 4.在IE浏览器中打开保存的文件,看看是否能完成自己想要的设置。 四、程序代码(在实验报告中写出) (1)
课号 | 课程名 | 学分 |
1002201 | 《网络原理》 | 6 |