文档库 最新最全的文档下载
当前位置:文档库 › 网页设计与制作个人实训报告

网页设计与制作个人实训报告

网页设计与制作个人实训报告
网页设计与制作个人实训报告

一、实训目的:

通过实训,掌握网页制作系列软件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)介于两者之间的风格。

《网页设计与制作》实训项目大纲及实训方案.doc

本实训项目的目的与任务是使学生根据问题的要求,构思一个主题,并运用网页制作工具,制作和发布网页,并对此进行更新和维护,掌握网站发布的工作流程,了解域名申请、空间申请的方法,能在校园网及英特网上发布网页。 实训学时数: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、

B、 C、 D、 7、在客户端网页脚本语言中最为通用的是( )。 A、javascript B、VB C、Perl D、ASP 8、在HTML中,标记的Size属性最大取值可以是( )。 A、5 B、6 C、7 D、8 9、在HTML中,单元格的标记是( )。 A、 D、 10、在DHTML中把整个文档的各个元素作为对象处理的技术是( )。 A、HTML B、CSS C、DOM D、Script(脚本语言) 11、下面不属于CSS插入形式的是( )。 A、索引式 B、内联式 C、嵌入式 D、外部式 12、在网页中最为常用的两种图像格式是( )。 A、JPEG和GIF B、JPEG和PSD C、GIF和BMP D、BMP和PSD 13、如果站点服务器支持安全套接层(SSL),那么连接到安全站点上的所有URL开头是( )。 A、HTTP B、HTTPS C、SHTTP D、SSL 14、在HTML中,要定义一个空链接使用的标记是( ). A、 B、 C、 D、 15、对远程服务器上的文件进行维护时,通常采用的手段是( ) A、POP3 B、FTP C、SMTP D、Gopher 二、多项选择题(本大题共15小题,每小题2分,共30分。在每小题的五个备选答案中,选出二至五个正确的答案,并将正确答案的字母分别填在题干的括号内,多选、少选、错选均不得分。) 的组成主要包括( )

网页设计与制作实训报告

学生姓名:实习班级:指导老师:实习地点:实习时间:

一、实习目的 1.掌握企业网站主要功能栏目 2.掌握企业网站色彩搭配和风格创意 3.掌握网站设计的首页 4.掌握模板的创建 5.熟悉系统设计分析 6.掌握创建数据表 7.掌握创建数据库连接 8.掌握制作购物系统前台页面 9.掌握制作购物系统后台页面 二、实习内容 首先,修改计算机的设置,使之能正常浏览。修改默认网站的目录安全性,允许ISS控制密码,建立虚拟目录。安装横向区域重复。 其次,开始创建模板。新建moban.html,然后在里面插入表格,依次插入相应的图片及文字。然后利用模板做出相应的页面,最后在连接数据库做出新闻发布、新闻详细显示及添加页面。那么,要制作的就完成了。 再次,打开dreamwever,建立站点,打开Index.html,另存为Index.asp,插入4行1列的表格,将光标置入第1行,插入图像,在后面的表格输入相应的文字,在绑定面板添加记录

集Rs1。选中图像,展开Rs1,选中Image字段,绑定图像。在后几行绑定相应的文字,选中表格,选中服务器行为,创建横向区域重复。选中Rs1.shpname,单击服务器行为,选择转到详细页面。再添加记录集Rs2,将光标置入相应位置,绑定fenlei字段,单击服务器行为,选择重复区域。选中Rs2.fenlei,选择服务器行为的转到详细页面。再插入1行4列的表格,输入相应的文字,选中首页,选择记录集分页--移至第一条记录,后面的以此类推。商品分类展示页面至此做好。用同样的方法制作商品详细页面。 下面制作购物系统后台管理页面,打开Index.html,另存为denglu.asp,按照相应的方法将商品分类页面做好,将光标置入相应的位置,插入表单,在表单中再插入4行2列的表格,选中第1行单元格,合并单元格,在合并单元格中输入相应的文字。将光标置入第2行第1列单元格,输入相应的文字,在第2列插入表单—文本域,在文本框输入name,字符宽度设置为25,类型为单行。将光标置入第3行第1列,输入相应的文字,在第2列插入表单—文本域,在文本框输入password,字符宽度设置为25,类型为密码。将光标置入第4行第2列,插入表单按钮,改为登录,在插入一个表单按钮,改为重置。 选中表单,单击行为面板中的检查表单,将文本域name和password的值都勾选为必须的,创建记录集,单击服务器行为的用户身份验证—登录用户,如果登录成功,转到guanli.asp,

网页设计与制作实训报告

网页设计与制作实训报告 本人页教学实验设计与制作实训报告 本人制部门:计算机科学与技术同系 班级:计算机应用技术10-1组号:15组姓名:杨江郑传胜 胡登杰田鹏鹏 贵州师范大学商业高等专科学校九千科系CommercialCollegeOfGuiZhou 项目实训单 项目本人号3-2项目名称本人页模板设计实训学时2学时 【项目名称】:本人页模板设计实训其二【项目类型】:□认知 与验证型□综合与仿真型□设计与创新型三【实训目的】:文字 学使学生了解模板的基础知识,掌握模板设计制作的基本技能,具备 企业本人站模板设计制作战斗能力的能力,完成各本人组真实企业本 人站模板模块化东站四【实训环境】:windowsxp;dreamweaver8;fireworks8五【实训内容】:1 本人页模板设计:2 利用fireworks切割源图片;3 将从fireworks片区切割的区域依次放 置到示例的各单元格中;4 dreamweaver中所添加可本人本人区域; 5 利用模板件快速生成本人站页面;六【讨论本人录】站点: 忆梦站点组长:杨江组员:胡登杰郑传胜田鹏鹏分工:杨江 负责客运站定义超级连接表格胡登杰负责讨论本人录郑传胜 负责图片处理和切图田鹏鹏负责页面生成七【实训步骤】:本人 页模板设计:步骤,打开设计制作出的表格及实设计出的本人站样图 步骤二,利用fireworks切割源图片,使用按钮,选取被切割的地区,并选择菜单栏的件选项选择“导出”图像,保存为相应的五件名。步 骤三,将从fireworks片区切割的区域依次放置到示例的各单元格中,完成各图片的插入后,将件另存为本人页模板(“件”“另存为模板”)件,取名为moban.dwt。步骤四,在模板中“当前位置”及“正”

《网页设计与制作实训》指导书

《网页设计与制作实训》指导书 --以“五岳独尊泰山”为例 一、规划网站 1.策划网站主题 在着手设计网站之前,要确定好网站的主题,每个网站都应该具有一个明确的主题。本次所创建的网站是一个名山宣传类网站,主要以五岳独尊泰山为主题,包括泰山简介、泰山文化、泰山名吃、泰山地质、环境和神话传说等内容。 2.确定网站风格 确定好站点主题后,就要根据该主题选择站点的风格。由于本次所创建的网站是一个名山宣传类网站,要求结构清晰,能够展现出泰山的魅力所在。本网站的主要特点如下: (1)设计风格要大众化,为了提高浏览速度,精选图片,同时尽量减少图片的使用,更多地使用层、表格实现效果。 (2)背景颜色以灰色和白色为主,文字颜色以黑色为主、蓝色和红色为辅。 (3)文字内容丰富、知识性强,标题简洁明了,字体一般采用宋体,大小一般为14像素。 (4)首页的版式结构采用典型的“三”字型结构,首页如图1-1所示。 图1-1 首页设计浏览效果

二级页面采用与首页统一的风格设计。 该网站名称为“五岳独尊泰山”,所有网页的标题为“五岳独尊—泰山”,个人根据所定主题确定。英文名称为“MountTai”。 3.构思网站栏目结构 先在纸上绘制网站的栏目结构草图,经过反复推敲,最后确定完整的栏目和内容的层次结构。“五岳独尊泰山”的栏目结构如表1-1所示。 表1-1“五岳独尊泰山”的栏目结构 为了简化对网站的浏览过程,大部分网页通过栏目就能浏览内容页面,首页的主菜单包括9个菜单项:泰山简介、泰山文化、泰山名吃、泰山自然、泰山地质、神话传说、泰山景点、泰山美图、寄语泰山。 4.规划网站目录结构和链接结构 根据网站策划确定的栏目结构,创建站点目录,一个网站的目录结构要求层次清晰、井然有序,首页、栏目页、内容页区分明确,有利于日后的修改。“五岳独尊泰山”的目录结构,各文件夹的所存放文件类型如表1-2所示。 ※注意※ 文件夹和文件的名称建议不要使用中文名,因为中文名在HTML 文档中容易生成乱码,导致链接产生错误。 表1-2网站的目录结构及其存放的文件类型

网页设计与制作实训报告

《Dreamweaver网页设计与制作案例教程》 实训报告 专业:计算机网络技术 年级: 2013级 姓名: 学号: 辅导老师: 制作电子商务类网站首页 一、网站建设的前期准备工作 1、网站整体需求分析 网站整体需求主要包括以下几个方面: 1)网站建设背景及目标 2)网站建设现状分析 3)网站建设目标分解 4)网站建设资金及人员投入情况分析 2、确定网站风格 根据电子商务网站的特点,确定网站的整体风格,即网站的色彩和版式。网站风格是在网站整体需求分析的基础上,通过明确网站设计的目的和用户需求、访问者的特点等得出的结论。本实例是针对一个工业产品交易平台的网站,网站与用户交互性强,因此确定其主色调为暖色系的橘黄色给人以轻松愉快的浏览环境。如图是电子商务网站的LOGO。

3、网站素材搜集 明确网站主题和划分板块后,接着要为后续的网站建设搜集素材。若想让网站有声有色,能够吸引客户注意,就要尽量搜集文字、图片、音频、视频、动画等多媒体素材。对于一些通用素材,可以从网上搜集得到,也可以根据需求自行制作素材,比如,通过Photoshop图像处理软件对图像进行优化处理,使用Flash制作动画等。如图所示。 二、创建站点 1、网站建设的第一步是创建本地站点。 2、创建的站点信息将显示在“文件”面板中。如果需要对站点参数进行修改,可以单击“站点→管理站点”对站点进行重新设置。 三、网站主页制作 1.使用Div+CSS布局页面 使用Div+CSS实现页面布局,具体操作如下: 4)为AP Div元素设置CSS样式。由于网站首页和子页面采取相同的布局风格,因此样式表采用外部链接样式表。 5)选中创建的AP元素“container”,在右侧的“CSS样式”面板中单击鼠标右键,选择“新建”命令,打开“新建CSS规则”对话框,并作相应设置,如图所示。 6)单击确定按钮,弹出“#container的CSS规则定义”对话框,选

网页设计与制作模板

课程设计报告书 课程名称网页设计与制作 题目设计个人网站主页 分院电信分院 专业班级电子商务 学号 学生姓名 指导教师 2011 年 6月 20日

课程设计评阅意见 评阅人__________职称________ 年月日

目录 第1章课程设计任务书 (1) 一、课程设计题目 (1) 二、课程设计工作 (1) 三、课程设计的内容要求 (1) 1、课程设计要求 (1) 2、课程设计内容 (1) 第2章课程设计目的 (2) 第3章课程设计内容 (3) 设计一选题的基本原则 (3) 设计三选材 (3) 设计四正确运用DW和Ps (3) 设计五课程设计心得 (3) 第4章课程设计步骤 (4) 设计一查找相关资料 (4) 设计二利用Ps进行切片 (4) 设计三利用DW编辑 (5) 设计四利用DW的站点功能上传或用FTP工具上传站点 (7) 第5章课程设计心得 (8) 第6章参考文献 (9)

专业电子商务班级(1)班姓名肖恢邦 一、课程设计题目设计个人网站主页 二、课程设计工作: 自 2011 年 6 月 12 日起至 2011 年 6月 20 日止 三、课程设计的内容要求: 1、课程设计要求 (1)通过课程设计把课堂上讲的内容融会贯通,掌握表格在网页布局中的特点及应用,掌握如何通过表格来布局一个完整的界面。学会使用Dreamweaver软件设计网页及Dreamweaver的表格功能进行网页布局。使整个网页页面清新自然,整体界面美观大方,简洁高效,使之达到界面动与静的搭配合理,动而不乱,静而不僵和谐效果。 2、课程设计内容 (1)设计一选题的基本原则。 (2)设计二选题范围。 (3)设计三选材。 (4)设计四正确运用DW和Ps。 (5)设计五课程设计心得。 学生签名: 年月日

《网页设计与制作》课程教案设计

《网页设计与制作》课程教案 一、课程定位 本课程是计算机应用技术专业的一门专业基础课程,该课程的学习能够提升他们对网页制作的兴趣,让他们学习网页制作的基本技能,为后继课程打下基础,同时扩展其就业面,为就业做好准备。 本课程的目的和任务是让学生学会Dreameaver CS6、Flash和Fireworks 的使用方法,并能够使用这3款软件制作出美观实用的网页。 二、课程总目标 掌握网页制作的基本方法和技能,掌握网站建设的流程,能够运用所学知识建设常用的网页和网站,同时能够美化网页,设计人性化、艺术化的网站静态页面部分。 (一)知识目标: 1.熟悉网页制作的基本元素; 2.掌握Dreamweaver CS6软件的基本操作方法; 3.掌握在网页中插入文字、图片、声音、flash等的方法; 4.掌握常见的网页布局方法,学会使用CSS美化网页; 5.掌握在网页中使用表单和制作网页特效的方法; 6.掌握简单图形图像的处理,能够制作符合网页主题的图片和简单动画 并巧妙地和网页中内容搭配起来。 7.掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静 态页面部分。 (二)职业能力培养目标 1. 能够根据网站开发需求,去寻找网页设计和网站开发所需要的文字、 图片、动画、声音、视频等素材并作美化处理; 2.能够制作出符合主题色彩的网页,网页要求美化、被绝大多数浏览 者接受和喜爱;

3.能够设计企业网站、政府门户网站、学校网站等常见网站的基本静态 页面。 (三)素质目标 1.具有勤奋学习的态度,严谨求实、创新的学习精神; 2.具有良好的心理素质和职业道德素质; 3.具有高度责任心和良好的团队合作精神; 4.具有运用理论知识发现问题、分析问题并解决问题的能力,同时能够 不断学习,不断创新,让自己的设计越来越完善,有止于至善的精神。(四)职业技能证书考核要求: 可以根据自身情况考取“全国计算机信息高新技术资格证”,“网页设计制作员”,“网页设计师”等职业技能证书。 三、重点、难点章节及内容 1.重点章节: 1.2 网页、网站相关术语简介 1.6 网站建设的基本流程 2.3 Dreamweaver CS6的工作环境 3.2 创建本地站点 3.4 使用站点 3.5 网页设计中的规范 4.1 网页文件的基本操作 4.3 插入文本 4.4 插入水平线 4.5 插入其他基本元素 4.6 创建列表 5.1 超级链接概述 5.2 创建超级链接 5.3 使用dw制作各种超级链接

个人网页设计与制作

成人教育计算机毕业设计毕业论文(实践)报告 专业:计算机网络技术 学院:浙江育人专修学院 班级: 08电子商务 姓名:马杨超 2010年3月1日

目录 第1章绪论 (4) 1.1网页设计与制作的概述 (4) 1.2需求分析 (4) 第2章个人网站的概述和发展 (4) 2.1 个人网站的概述 (4) 2.2 个人网站的发展 (5) 第3章个人网页的设计与规划 (5) 3.1 确定设计个人网页的使用工具Dreamweaver (6) 3.2确定网站的风格特色 (6) 3.3确定网站界面 (7) 第4章总结 (9) 致谢 (10) 参考文献 (10)

摘要: 本论文将对个人网页设计与制作的方法、工具等展开研究和探 讨。在介绍网页设计与制作语言的基础上,着重使用Dreamweaver 作为工具进行网页设计与制作的实际操作. 本论文主要章节如下,第一章:绪论,网页设计的概述以及需求分析第二章:对个人网站的由来和发展进行了概述与讨论。第三章:个人网页的设计与规划。使用开发工具Dreamweaver创建各种跨平台、跨浏览器的静、动态页面。确定网站的风格特色,网站界面。关键词:网页设计Dreamweaver Personal web design and production Abstract: This paper will be of personal web design and production methods and tools launched research and discussion. In the introduction of web design and production, mainly on the foundation of the language use Dreamweaver as tools for web design and production of actual operation This thesis mainly section below, the first chapter: introduction to web design &requirements and demand analysis chapter 2: for personal website of the origin and development are summarized and discussed. Chapter 3: personal web page design and planning. Use the development tools Dreamweaver8.0 create various cross-platform, cross-browser static and dynamic pages. Determine the website's style characteristic, web interface.

《网页设计与制作》综合实训指南

《网页设计与制作》综合实训指导书 网站开发的参考案例 1.1 规划网站 1.策划网站主题 我们网站是德阳嘉兴别墅设计公司.公司遵循“奉献精湛技艺、铸造温馨家园、炼就英雄团队、创建百年老店”的发展理念,坚持“客户至上、重信守约、质优价平、热忱服务”的经营宗旨,追求“简约明快、美观时尚、突出个性、实用环保”的装饰风格,以新颖时尚的设计、规范精致的施工和热情人性的服务,为业主构筑温馨、舒适、精美、典雅的家园。 2.确定网站风格 确定好站点主题后,根据该主题选择站点的风格。所以本案例所建立的网站是别墅设计类网站。本网站的主要特点如下:

(1)设计风格要大众化,为了提高浏览速度,尽量减少图片的使用,更多地使用表格或层实现效果。 (2)背景颜色以淡绿色为主、白色为辅,文字颜色以绿色为主、黑色和淡绿色为辅。 (3)文字内容丰富、知识性强,标题简洁明了,字体一般采用宋体,大小一般为12像素。 3.构思网站栏目结构 先在纸上绘制网站的栏目结构草图,经过反复推敲,最后确定完整的栏目和内容的层次结构。本案例的“别墅设计网”的栏目结构如表17-1所示。 表17-1 “别墅设计网”的栏目结构 为了简化对网站的浏览过程,大部分网页通过二级栏目就能浏览内容页面,首页的主菜单包括4个菜单项:设计风格,经典案例,作品展示,公司简介。 4.规划网站目录结构和链接结构 根据网站策划确定的栏目结构,创建站点目录,一个网站的目录结构要求层次清晰、井然有序,首页、栏目页、内容页区分明确,有利于日后的修改。“别墅设计网”的目录结构,各文件夹的所存放文件类型如表17-3所示。 表17-3 网站的目录结构及其存放的文件类型

《网页设计与制作基础》实验指导

实验一网页的认识 实验目的 1、掌握利用Internet进行信息游览、搜索,下载网页、图片、文字和文件; 2、利用记事本来编辑HTML文档并浏览; 3、熟悉HTML基本标记的使用。 实验环境 WindowsXP操作系统,内部组成局域网,外连Internet互联网。 实验重点及难点 ◆熟悉HTML的结构、语法。 ◆熟悉HTML基本标记的使用。 实验内容 1、从网上(如网页制作大宝库https://www.wendangku.net/doc/4a463305.html,等)下载网页制作时需要的小图片、 动画及flash等网页制作素材。 2、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析 网页。 3、通过浏览新浪网站主页分析其网页基本元素,查看其源代码,收藏到收藏夹中,将其设 为主页。 4、制作一个简单的网页sy1-1.html,用记事本编辑,网页标题为“熟悉HTML文档的结构”, 内容为司空曙的《江村即事》,如下图所示。 5、通过附录1的练习熟悉HTML基本标记的使用。(可参考第二章内容)

实验二 Dreamweaver基本操作(一) 实验目的 1、熟悉Dreamweaver的工作环境并了解本地站点的建设和管理; 2、熟悉网页文件的基本操作; 3、熟练掌握在网页文件中文本、图像、超链接的添加和设置。 实验环境 WindowsXP操作系统,Dreamweaver CS3软件,内部组成局域网,外连Internet互联网。实验重点及难点 ◆文字的插入及设置。 ◆图像的插入及设置。 ◆各种超链接的创建。 实验内容 1、使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”,包含以下几 个文件和文件夹:图片文件夹(images);音乐文件夹(sound)等。 2、在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件,从提供的网 页原始素材中把相关文字复制到该网页文件中,并进行适当的文字设置,结果如下图所示。 3、在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为 sy2-2.html,效果如图所示。 ●标题文字大小用

标记; ●作者信息文字大小为24像素,字体为幼圆,颜色为红色; ●古诗文字大小为24像素,字体为隶书,颜色为蓝色; ●在作者信息后加一条水平线,居中,水平线宽度为浏览器的30%,水平线的粗细为20 个像素,颜色为棕色;

网页设计与制作个人实训报告

一、实训目的: 通过实训,掌握网页制作系列软件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的轮换效果展示知名品牌汽车,效果如图: 右侧是世界/中国地图及天气实况查询图。属特效代码。当鼠标覆盖时显示链接提示,点击即可查询各地当日天气情况,帮助驾车人员快速掌握天气情况。效果如下: 然后再表格里面分别放的是各种小版块。

(完整版)《网页设计与制作》课程教学大纲.docx

《网页设计与制作》课程教学大纲 课程名称:网页设计与制作 学分及学时: 4 学分总学时72学时,理论36 学时 适用专业:网络工程 开课学期:第四学期 开课部门:计算机与互联网学院 先修课程:计算机文化基础计算机网络 考核要求:考试 使用教材及主要参考书: 向知礼主编:《网页设计与制作》航空工业出版社2017 年 杨松主编:《网页设计案例教程》航空工业出版社2015 年 一·课程性质和任务: 本课程全面地介绍网页制作技术的基本理论和实际应用。全书共 10 章,分为 3 大部分。前 5 章为第 1 部分,主要介绍网页制作的基本理论——HTML,同时穿插介绍Fireworks,Flash, Anfy 等软件在网页制作过程中的应用;第 6 章~第 8 章为第 2 部分,主要介绍网页 制作技术,包括CSS技术、客户端脚本技术(DHTML)以及 XML 技术;第9 章~第 10 章为第3 部分,主要介绍当前最流行的网页制作工具——Dreamweaver ,通过应用实践能够从实际 应用的角度进一步巩固所学知识。 课程内容不但包括各种网页制作技术的基础理论,而且强调网页制作的具体应用,使读者既能打下坚实的理论基础,又能掌握实际的操作技能。 二·课程教学目的与要求 以Dreamweaver 的使用为主线,介绍网页制作的相关技术。使学生理解网页制作的基本 概念和理论 ,掌握站点的建立和网页的设计 ,能用 HTML 语言修改网页 ;掌握网页制作和站点的基本 知识 ;掌握站点的创建和网页的编辑 ;掌握超链接、图像、 CSS样式的使用 ;掌握表格、框 架、表单、多媒体对象的使用 ; 理解行为、模板、库、 CSS布局的概念和使用 ;理解 HTML 语言、 网站的测试与的发布; 要求:教学过程中,须注重学生实践操作能力的培养,采取“面向实践、能力为先”的 教学思路,教学内容应结合当前WEB 技术的发展趋势,把握未来企业级WEB 页面开发的发 展方向,兼顾各行各业的需求变化,力争面向社会,服务于企业“互联网+”战略。

《网页设计与制作》综合实训指导

《网页设计与制作》综合实训指导 1.1实训意义 网页设计与制作综合实训是教学过程中重要的实践性教学环节。它是根据专业教学计划的要求,在教师指导下对学生进行的网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的转化,是对理论与实践教学效果的检验,也是对学生综合分析能力与独立工作能力的培养过程。因此,加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学生的综合素有着重要的作用。 1.2实训目的 1.通过综合实训进一步巩固、深化和扩展学生的理论知识与专业技能。 (1)掌握规划网站的内容结构、目录结构、链接结构的方法。 (2)熟练掌握网页制作软件Dreamweaver CS3的基本操作和使用技能。 (3)掌握页面的整体控制和头部内容设置的方法。 (4)熟练掌握网页页面布局的各种方法。 (5)熟练掌握在网页中输入、设置标题和正文文字的方法。 (6)熟练掌握在网页中插入图像、flash动画、背景音乐的方法。 (7)掌握建立各种形式超级链接的方法。 (8)掌握表单网页制作方法。 (9)掌握网页特效的制作方法。 (10)掌握网站测试的方法。 2.训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、flash动画和网页特效等。 3.培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。 4.培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力,树立自信心。 5.训练和培养团队协作精神和共同开发网站的综合能力。

PS网页设计与制作

PS网页设计与制作(主页) 一、教材分析 设计制作网页的方法有很多,所用软件也各不相同,在本次拓展课程教学中,采用Photoshop设计网页。本课是第四课时,在之前的课中,教师介绍了网页大小、图片素材的保存及处理方法,学生已了解有关网页的相关知识点,本节课在此基础上,开始学习PS网页设计,通过新建文档,完善网页中的其它要素,如:文本、页头、页脚、图片等要素。二、学情分析 认知水平:本班学生为八年级学生,善于接受新鲜事物,欠缺专注力、知识迁移能力。 知识技能水平: 在前几课时的学习中学生了解了网页的常见大小,主页包含的各项要素,七年级下已学习过PS的相关知识与技能,有一定的基础。本节课,学生需要灵活运用以前的所学,制作出有个人特色的主页。学生在自主实践环节是遇到的问题,通过同伴互助、范例展示等方式,更好地理解为何这么做,以及怎么做。 三、教学目标 (一)、知识与技能 1.了解主页大小,掌握设置主页大小的方法。 2.掌握文本设置的方法,尝试通过更改大小、字体、变形、混合选项呈现出有个人特色的文本。 3.了解导航栏的样式及位置,掌握矩形的绘制调整方法。 (二)、过程与方法 1.通过课堂任务的设计,强化学生个人自主探究能力及小组协作学习能力。 2.培养学生对问题的分析和解决能力,更好地理解PS制作主页的方法与策略,提高学生对PS的理解与认识。 (三)、情感态度与价值观 提倡学生多观察、多动手实践,不怕失败,只怕不动。在信息技术课堂上勇于探索实践,通过作品展示自己。 四、教学重点 主页大小设定、标题和图片的大小及位置、导航栏制作 五、教学难点

主页中各对象的大小及位置 六、教学方法 任务驱动、分层教学、同伴互助 七、教学准备 极域多媒体网络教室、Photoshop cs5、学案八、教学过程 2.师:刚才大家看到的是我们八年级 一些同学的网页设计作品,在这些作

相关文档 最新文档
B、 C、