一、实训目的:
通过实训,掌握网页制作系列软件Dreamweaver、Fireworks、Flash和Photoshop的使用方法。达到全面理解、运用网页制作的知识,并使之得以融会贯通,在掌握理论的基础上再加以实践,进一步提高、加强设计、制作网站的综合能力。
二、实训过程
1.资料的搜集:
收集的资料主要是汽车图片,以及运用做页面局部框架背景的图片。
2.熟悉制作软件软件:
软件:Dreamweaver \ Firework \ Photoshop CS \ Flash
硬件:PC机
技术:HTML\CSS \ javascript\特效代码
项目设计及运行平台:Windows XP
3.构建站点框架:网站结构图如下:
4.设计制作页面:
◆网页名称:关于我们
◆网页的色彩:最主要是以白色背景为主导色,字体的主要色彩是黑色。链接字体颜色链接前设为蓝灰色,鼠标覆盖后为深红色。
◆网页富有动感,通过GIF动画来展示,页面的色彩好与首页和栏目页统一主要采取白色。
◆页面的大小,在1024X768像素下显示效果最佳。
◆颜色调配设计,网页的色彩是树立网站形象的关键之一,各版块采用与网站首页同一色系的颜色,整个版块内部也尽量保持风格一致。
◆网页内容的安排相互链接关系如下概述
最上面先放了一个724*100px的logo.
右边放了一个1024*100广告如下图:
再下来的表格中里放了一个我们用GIF的轮换效果展示知名品牌汽车,效果如图:
右侧是世界/中国地图及天气实况查询图。属特效代码。当鼠标覆盖时显示链接提示,点击即可查询各地当日天气情况,帮助驾车人员快速掌握天气情况。效果如下:
然后再表格里面分别放的是各种小版块。
分别记载有:QQ联系方式,用户只要单击即可打开QQ聊天窗口与网站内部人员进行对话。
此外,页面载有客服热线,留言板。也是对用户提供的对话平台,方便用户咨询更多消息。5.实现网页间的链接:
运用的链接方式有:超链接、明链图片链接, 锚点链接以及多媒体链接, 用以实
现QQ聊天界面的打开,留言提交,以及天气实况的显示。
6.整体效果图:
三、实训心得与体会:
在这次实训之后,我们对网站的设计与制作有了进一步的了解,我对flash的制作,图片的处理,表单的制作,css样式,模版的应用等技术有了更深层次的了解,并且能够很好的应用它们。在网站的制作过程中,我碰到了不少的问题,但是通过老师的耐心指导以及与队友的协商,这些问题最终都得到了较为完美的解决。所以我认为,团队的力量是强大的!而一个人的力量和想法是有限的,唯有集思广益,才能使得我们的作品更加优秀,内容更加丰富。这使得我对静态网页的制作产生了浓厚的兴趣,我将继续付诸实行,向动态网页的制作发动挑战!
《网页设计与制作》 实习报告 指导老师: 实习地点: 实习时间: 实习班级: 学生姓名:
一、实习目的 ①学会制作新闻发布系统。 ②学会制作在线调查系统。 ③熟悉购物网站的主要功能和栏目。 ④学会购物网站数据库表的创建和数据库连接的创建。 ⑤学会购物系统前台页面制作和后台管理制作。 二、实训内容 1.创建数据库表 ①启动Microsoft Access ,执行“文件”——“新建”命令,打开“新建文件”面板,在面板中单击“空数据库”。 ②弹出“文件新建数据库”对话框,在对话框中选择数据库保存的路径,“文件名”文本框中输入shop。 ③单击“创建”按钮,在对话框中双击“使用设计器创建表”选项。 ④弹出“表1:表”对话框,在对话框中输入“字段名称”和字段所对应的“数据类型”,将shopID字段设置为主键。 ⑤执行“文件”——“保存”命令,弹出“另存为”对话框,在对话框的“表名称”文本框中输入products。 ⑥单击“确定”按钮,保存表。按以上步骤的方法,创建表fen和admin。 2.创建数据库连接 新建一个网页文件夹,打开IIS信息服务,创建IIS虚拟目录,在文件夹安全性把来宾用户的权限修改为完全控制,并导入数据库。 3.制作购物网系统页面 ①用index.html创建zhanshi.asp商品分类展示页,新建站点,导入shop.mdb数据库文件建立数据库连接。插入表格并插入图片、文字,创建记录集并在表格相应位置绑定数据。在服务器行为里为表格设置重复区域,创建记录集RS2并在左边的商品分类表格里绑定
数据,在服务器行为里为左侧的表格添加重复区域和转到详细页,制作记录集导航条。 ②用index.html创建xiangxi.asp商品详细信息页,首先创建记录集并制作左侧的商品分类表格,之后在中间区域插入表格,在表格中插入图片、文字,创建记录集RS2并将数据绑定在表格相应位置。 ③用index.html创建denglu.asp商品详细信息页,创建记录集并制作左侧的商品分类表格,在中间区域插入表单,在表单里插入表格,在表格里插入文字、文本域、表单按钮,并为表单设置检查表单。创建记录集RS2并在服务器行为里添加登录用户。 ④用index.html创建fenlei.asp添加商品分类页,插入表单,在表单里插入文字、文本域、表单按钮,创建记录集并在服务器行为里添加插入记录和限制对页的访问。再用index.html创建fenleiok.asp,在其中插入表格输入文字,并设置返回链接。 ⑤用index.html创建tianjia.asp添加商品页,创建记录集,用插入记录表单向导创建插入记录表单,在服务器行为里添加限制对页的访问。再用index.html创建tianjiaok.asp,在其中插入表格输入文字,并设置返回链接。 ⑥用index.html创建guanli.asp商品管理页,创建记录集并制作左侧的商品分类表格,在中间区域插入表格并插入文字,创建记录集RS2并在表格相应位置绑定数据,为该表格设置服务器行为的重复区域,制作修改和删除链接,制作记录集导航条。 ⑦用tianjia.asp创建xiugai.asp修改页面,创建记录集在对应的文本域中绑定数据,把服务器行为里的插入记录删除并添加更新记录。在服务器行为里添加限制对页的访问。再用index.html创建xiugaiok.asp,在其中插入表格输入文字,并设置返回链接。 ⑧用index.html创建shanchu.asp删除页面,插入表格并插入文字,建立记录集,在表格相应位置绑定数据,插入表单和表单按钮,创建服务器行为限制对页的访问和删除记录。再用index.html创建shanchuok.asp,在其中插入表格输入文字,并设置返回链接。 三、疑难解惑 ①网页不能正常打开,电脑用户权限没有修改,在文件夹安全性把来宾用户的权限修改为完全控制。 ②创建重复区域时,总显示相同的内容,仔细阅读教材,发现创建重复区域时要选中表格,而不是文字内容。 ③登陆页面不能登陆,把表格放入表单后,重新登录,问题解决。 ④创建添加商品页面时,无法显示商品分类。在插入记录表单时,应将feileiID"显
《网页设计与制作》实践环节(技能)考核大纲 一、考核目标 本课程重点讲授了网页设计与制作的基础知识、基本理论和基本技能,是一门操作性极强的技能型应用课程。本课程通过实践使学生在了解理论和基本技能的基础上,熟练运用网页开发的主要工具软件Dreamweaver,掌握网页设计和制作的知识与能力,并灵活应用。 二、考核方式 本实践环节考核主要包括两部分内容:网站设计制作和编写设计报告。 考生结合个人工作需要或兴趣爱好,自选主题,设计制作一个主题网站,并根据设计过程撰写一篇不少于1500字的设计报告。 按照要求提交资料:网站源程序(电子版)和设计报告(打印版)。 网站源程序(电子版)---------以“姓名准考证号网页设计”命名文件夹与设计报告(打印版)同时递交。 三、考核内容的要求: 1.网站设计与制作要求: ①用工具Dreamweaver设计静态网站(HTML页面); ②网站不少于2级,页面总数不少于6个; ③站点文件、文件夹的命名与组织要求规范; ④网页要求整合多种媒体(音频、视频、动画、图片、文字等); ⑤要求有CSS的设计和使用; ⑥要求使用模板或库元素; ⑦要求网站无错误链接; ⑧要求掌握网站上传、发布的方法。 2.设计报告要求: 设计报告应该包括以下几个主要部分: ①网站的主题说明; ②网站的总体规划;
③各级网页风格说明; ④典型网页的设计过程及样例,必要时以代码和截图说明; ⑤网站发布过程说明(如果已发布到Internet网站上,需要提供网站网址)。 四、报告格式要求: 1、纸张字号等要求:A4纸单面打印;字号:四号;行距:1.5倍行距; 页边距上:2.5;下:2.5;左:3.2;右:3.2。 2、封面格式要求:见附件,封面打印时不得有页码。姓名、准考证号等信息应准确无误。 3、装订方式:左侧(三个订书钉)装订,不允许加装塑料封皮。 五、其他说明: 1、对于源程序出现抄袭或下载的情况,判0分。 2、设计报告严格按照封面格式要求(见下页的附件)制作。 3、考生要认真。将自考专业、准考证号等信息一定要填写正确。 4、雷同卷判0分。(情节严重者,视为作弊上报省考试院) 附件:“《网页设计与制作》实践环节(技能)考核”封面
1.请列出三种TCP/IP网络中所使用的协议,并说明它们哪些类型的终端之间的,例如,网络管理站(SNMP)是用于中央网络管理站和网络之间的。 参考答案: (1)HTTP:超文本传输协议,用于WEB服务器和WEB客户机之间; (2)SMTP:简单邮件传送协议,用于邮件客户机和邮件服务器之间; (3)TELNET:远程登录协议,用于客户机与终端之间。 2.现给出一个网址如下:https://www.wendangku.net/doc/4a463305.html,/planetwide/select/selector.html,请你根据所学的URL分析该网址各个部分的含义。 参考答案: //前的http表示访问信息采用的是超文本传输协议,并且文件在WWW服务器上; https://www.wendangku.net/doc/4a463305.html,表明了WWW服务器的位置; planetwide/select/selector.html表明最终要访问的文件所在的位置。 3.访问类型即访问信息的链接方式,它决定了文件所在的位置,请问常用的链接方式有哪几种,并举出实例。(列出三种即可) 参考答案: (1)file:如file:\\D:\作业\作业\主页.htm(前面的file:\\一般可省略)就是打开本地D盘下的一个网页;(2)ftp:如ftp:\\https://www.wendangku.net/doc/4a463305.html,(此处也可输入IP地址); (3)http:如https://www.wendangku.net/doc/4a463305.html,/; (4)News:news:\\192.168.1.7可以查看IP地址192.168.1.7的可用新闻组; (5)telnet:telnet:\\192.168.1.7就可以运行远程登录IP地址192.168.1.7; 4.我们要进入紫霞的公众网,网址如下:telnet://https://www.wendangku.net/doc/4a463305.html,,请你实际操作进入该网站,并列出三种以上进入该TELNET网站的方法。 参考答案: (1)在浏览器中登录:启动INTERNET EXPLORER,在URL地址栏中输入“telnet://https://www.wendangku.net/doc/4a463305.html,”;(2)“开始”→“运行”→“输入telnet”→“确定”→在命令行输入“open https://www.wendangku.net/doc/4a463305.html,”命令并回车; (3)“开始”→“运行”→“输入cmd”→“确定”→在命令行输入“telnet https://www.wendangku.net/doc/4a463305.html,”命令并回车; (4)“开始”→“运行”→“输入c md”→“确定”→在命令行输入“telnet211.157.100.8”命令并回车。 5.如果远程登录失败,请问原因可能是什么? 参考答案: (1)计算机地址拼写错误(主机名或IP地址错误); (2)远程计算机暂时不能使用; (3)你所指定的计算机不在Internet上。 6.实践:启动INTERNET EXPLORER浏览器,修改其INTERNET选项,并观察其效果。 您的答案: 答:将https://www.wendangku.net/doc/4a463305.html, 设置为INTERNET选项的首页后,只要打开INTERNET EXPLORER 便直接登录到该网站的主页 1.个人网站有哪三种基本风格? 参考答案: (1)主题图形式; (2)信息发布式; (3)介于两者之间的风格。
本实训项目的目的与任务是使学生根据问题的要求,构思一个主题,并运用网页制作工具,制作和发布网页,并对此进行更新和维护,掌握网站发布的工作流程,了解域名申请、空间申请的方法,能在校园网及英特网上发布网页。 实训学时数:125(5周) 课外学时数:100 适用方向:办公自动化、电子商务 执笔者:王平露 编写日期:2006年4月 一、实训教学的目的与任务 本实训项目的目的与任务是使学生根据问题的要求,构思一个主题,并运用网页制作工具,制作和发布网页,并对此进行更新和维护,掌握网站发布的工作流程,了解域名申请、空间申请的方法,能在校园网及英特网上发布网页。通过设计、编辑和发布网页全过程的实际训练使学生对网页整体设计流程有一个深刻的认识,并且熟练掌握网页制作工具(Dreamweaver MX)的使用,初步掌握HTML、CSS语法格式,能借助手册看懂代码,能进行简单的代码改写工作,了解客户端脚本和服务端脚本区别,了解在网页上进行简单代码的嵌入与改写,会与其他工具结合使用以便实现更高效高质量的网页效果,进一步提高办公自动化效率和水平。 二、实训项目的基本要求及考核标准 基本要求: (一)网页内容要求: 1、主题内容:创意突出,体现校园园区精神文明建设体现本班级大学生风貌,学习气氛浓厚,作品内容健康。严禁发布反对政府、宣传迷信、传播色情、系统破坏、黑客教程等违法信息。
2、具体内容:标徽、标题、各链接页具体内容,站内搜索、计数器、留言系统、电子邮件地址、弹出窗口、漂浮广告、背景音乐、网页特效、友情链接、版权信息等。 (二)制作基本要求: 1、至少有10个页面,链接结构应有三层,下一层必须有返回上层的按钮或链接。有整体框架结构,导航栏,表格定位,布局合理,色彩搭配协调统一。 2、主页的文件名为:index.htm。文件名一般用英文小写字母。 3、网页中要有文本、图像、表格、交互与链接、层与动画、表单。 4、网页主要建立站内链接,尽量少建立外部链接,至少建立一个E-mail链接至你的邮箱。 5、要有flash控件、Frieworks图像,至少各出现一处,使用CSS样式; 6、为页面元素添加行为(调用Dreamweaver MX内置的脚本程序). 7、相关图片清晰,单张图片大小不超过200K (三)、网页性能要求: 1、每一张网页,显示分辨率以800*600状态为准,网页对不同浏览器兼容性较好; 2、在不考虑兼容性问题时,不出现乱码或错误的表格等内容; 3、结构清楚,便于浏览、查找。没有空链接或错误链接; 4、界面链接方便; (四)测试和网页发布要求: 1、测试链接和兼容性; 2、预览网页; 3、申请免费二级域名和免费空间;
存档资料成绩: 课程设计报告书 课程名称网页设计与制作 题目设计个人网站主页 分院电信分院 专业班级电子商务 学号 学生姓名 指导教师 2011 年 6月 20日
课程设计评阅意见 评阅人__________职称________ 年月日
目录 第1章课程设计任务书 (1) 一、课程设计题目设计个人网站主页 (1) 二、课程设计工作: (1) 三、课程设计的内容要求: (1) 1、课程设计要求 (1) 2、课程设计内容 (1) 第2章课程设计目的 (3) 第3章课程设计内容 (4) 设计一选题的基本原则 (4) (1)选题应反映本专业的培养目标,符合专业综合训练的要求。 (4) (2)选题要有利于深化所学的专业知识和拓展所学的知识面。 (4) (3)选题的难易程度和工作量要适当,保证在规定的时间内,在教师的指导下,经过努力能够完成。 设计二选题范围 (4) 设计三选材 (4) 设计四正确运用DW和Ps (4) 设计五课程设计心得 (4) 第4章课程设计步骤 (5) 设计一查找相关资料 (5) 设计二利用Ps进行切片 (5) 设计三利用DW编辑 (6) 设计四利用DW的站点功能上传或用FTP工具上传站点 (8) 第5章课程设计心得 (10) 第6章参考文献 (11)
第1章课程设计任务书 专业电子商务班级(1)班姓名肖恢邦 一、课程设计题目设计个人网站主页 二、课程设计工作: 自 2011 年 6 月 12 日起至 2011 年 6月 20 日止 三、课程设计的内容要求: 1、课程设计要求 (1)通过课程设计把课堂上讲的内容融会贯通,掌握表格在网页布局中的特点及应用,掌握如何通过表格来布局一个完整的界面。学会使用Dreamweaver软件设计网页及Dreamweaver的表格功能进行网页布局。使整个网页页面清新自然,整体界面美观大方,简洁高效,使之达到界面动与静的搭配合理,动而不乱,静而不僵和谐效果。 2、课程设计内容 (1)设计一选题的基本原则。 (2)设计二选题范围。 (3)设计三选材。 (4)设计四正确运用DW和Ps。 (5)设计五课程设计心得。
《网页设计与制作》期末考试试题 一、单项选择题(本大题共15小题,每小题2分,共30分) 1、目前在Internet上应用最为广泛的服务是( )。 A、FTP服务 B、WWW服务 C、Telnet服务 D、Gopher服务 2、域名系统DNS的含义是( )。 A、Direct Network System B、Domain Name Service C、Dynamic Network System D、Distributed Network Service 3、主机域名center. nbu. edu. cn由四个子域组成,其中( )子域代表国别代码。 A、center B、nbu C、edu D、cn 4、当阅读来自港澳台地区站点的页面文档时,应使用的正确文本编码格式是( )。 A、GB码 B、Unicode码 C、BIG5码 D、HZ码 5、当标记的TYPE属性值为( )时,代表一个可选多项的复选框。 A、TEXT B、PASSWORD C、RADIO D、CHECKBOX 6、为了标识一个HTML文件开始应该使用的HTML标记是( )。 A、