网页设计与制作实例教程
习题答案
第1章网页与网站基础
一、选择题
1.A 2.B 3.C 4.C 5.A
二、判断题
1.√2.×3.√4.×5.√
三、问答题
略
第2章网页规划设计
一、选择题
1.D 2.A 3.C 4.A 5.C
二、判断题
1.×2.×3.×4.√5.√
三、问答题
1.答:网站需求分析一般包括三个阶段的内容:网站背景分析、总体需求分析、具体需求分析。(每个阶段可再详细描述。)
2.答:可从以下几个方面来阐述网站设计的原则:①日期、时间和数字;②欢迎词;
③弹出窗口和引导页面;④新闻和公告信息;⑤网址;⑥控件;⑦链接;⑧主页内容
3.答:打开新浪网首页,分析其布局类型。(答案略)
4.答:网页色彩搭配方法可从以下两个方面去阐述:①根据页面风格以及产品本身的诉求确定主色;②根据主色确定配色。
网页色彩搭配技巧可从以下几个方面去阐述:①用一种色彩;②用两种色彩;③用一个色系;④用黑色和一种色彩以及色彩搭配忌讳的方面。
5.答:打开当当网,具体分析其规划过程。(答案略)
第3章初识网页制作软件
一、选择题
1.C 2.C 3.B
二、填空题
1.代码、拆分、设计2.文件、资源、规则3.超级链接
三、操作题
略
第4章制作网页内容
一、选择题
1.D 2.B 3.A 4.D 5.ABD 6.D 7.B 8.D 9.A 10.A 二、判断题
1.√2.√3.×4.√5.√6.√7.√8.√9.×10.√三、操作题
略
第5章设置网页超级链接
一、选择题
1.D 2.D 3.A 4.D 5. C
二、判断题
1.×2.×3.×4.√5.×
第6章使用CSS样式美化网页
一、选择题
1.B 2.C 3.C 4.B 5.A 6.D 7.D 8.D 9.B 10.C 11.A 12.A 13.C 14.D 15.D 16.A 17.A 18.B 19.D 20.D
二、简答题
1.×2.×3.×4.×5.×6.×7.√8.×9.√10.√11.×12.×13.×14.√15.√16.√
第7章规划布局网页
一、选择题
1.B 2.A 3.B 4.B 5.D
二、简答题
1.F 2.T 3.T 4.T 5.F
第8章添加网页特效
一、填空题
1.超级链接
2. 主图像、次图像
3. 层
4. 代码、拆分、设计
5. 表格
二、选择题
1. B
2. C
3. C
4. D
5. B
三、问答题
1. 简述添加网页特效的方法。
答:Dreamweaver的使用其实很简单,例如:挤压效果。先选中要挤压的图片,点击添加行为→效果→挤压,在弹出的对话框选择要挤压的图片,点击确定,把事件设置为onclick,即在网页中点击这张图片,该图即被挤压,点击F12预览。可以使用相同的方式添加其它网页特效。
2. 简述网页行为的种类。
答:Dreamweaver提供了一种称为“Behavior”(行为)的机制,帮助网页设计者构建页面中的交互行为。它一般分为:时间日期类、页面背景类、页面特效类、图形图象类、按钮特效类、鼠标事件类、Cookie脚本、文本特效类、状态栏特效、代码生成类、导航菜单类、页面搜索类、在线测试类、密码类、技巧类、综合类和游戏类等等。
4. 简述使用Spry构件添加网页特效。
Spry 框架是一个JavaScript 库,用户使用它可以构建能够向站点访问者提供更丰富体验的Web 页。有了Spry,就可以使用 HTML、CSS 和极少量的JavaScript 将XML 数据合并到HTML 文档中,创建构件(如折叠构件和菜单栏),向各种页面元素中添加不同种类的效果。例如创建菜单,应用“Spry菜单栏”选项就可以轻松创建菜单,制作时先在在Dreamweaver CS6中插入布局对象中的“Spry菜单栏”,再通过属性面板修改菜单选项即可。
5. 请分析新浪网的网页特效。
新浪网使用了以下网页特效:交换图像、弹出信息、打开浏览器窗口、效果、显示-隐藏元素、设置文本等网页特效。
第9章制作动态网页
一、填空题
1.<%,%>
2.request.form
3.conn.open connstr,rs.open sql, conn, 1, 1
4.记录,字段
5.rnd,rnd,mark(k) = 1
二、选择题
1.A 2.B,A 3.C 4.C 5.D
三、操作题
1.打开数据库(db.accdb)中的表studentInfo,参考教材图9-28添加指定的字段信息。
2.参考代码样图如下:框线框住的总分为在原来answerinfo.asp代码基础上增加的总分。
第10章网页设计与制作实例
一、选择题
1.A 2.D 3.B 4.B 5.D
二、简答题
略
网页设计与制作实例教程 习题答案 第1章网页与网站基础 一、选择题 1.A 2.B 3.C 4.C 5.A 二、判断题 1.√2.×3.√4.×5.√ 三、问答题 略 第2章网页规划设计 一、选择题 1.D 2.A 3.C 4.A 5.C 二、判断题 1.×2.×3.×4.√5.√ 三、问答题 1.答:网站需求分析一般包括三个阶段的内容:网站背景分析、总体需求分析、具体需求分析。(每个阶段可再详细描述。) 2.答:可从以下几个方面来阐述网站设计的原则:①日期、时间和数字;②欢迎词; ③弹出窗口和引导页面;④新闻和公告信息;⑤网址;⑥控件;⑦链接;⑧主页内容 3.答:打开新浪网首页,分析其布局类型。(答案略) 4.答:网页色彩搭配方法可从以下两个方面去阐述:①根据页面风格以及产品本身的诉求确定主色;②根据主色确定配色。 网页色彩搭配技巧可从以下几个方面去阐述:①用一种色彩;②用两种色彩;③用一个色系;④用黑色和一种色彩以及色彩搭配忌讳的方面。 5.答:打开当当网,具体分析其规划过程。(答案略) 第3章初识网页制作软件 一、选择题 1.C 2.C 3.B
二、填空题 1.代码、拆分、设计2.文件、资源、规则3.超级链接 三、操作题 略 第4章制作网页内容 一、选择题 1.D 2.B 3.A 4.D 5.ABD 6.D 7.B 8.D 9.A 10.A 二、判断题 1.√2.√3.×4.√5.√6.√7.√8.√9.×10.√三、操作题 略 第5章设置网页超级链接 一、选择题 1.D 2.D 3.A 4.D 5. C 二、判断题 1.×2.×3.×4.√5.× 第6章使用CSS样式美化网页 一、选择题 1.B 2.C 3.C 4.B 5.A 6.D 7.D 8.D 9.B 10.C 11.A 12.A 13.C 14.D 15.D 16.A 17.A 18.B 19.D 20.D 二、简答题 1.×2.×3.×4.×5.×6.×7.√8.×9.√10.√11.×12.×13.×14.√15.√16.√ 第7章规划布局网页 一、选择题 1.B 2.A 3.B 4.B 5.D 二、简答题
1.请列出三种TCP/IP网络中所使用的协议,并说明它们哪些类型的终端之间的,例如,网络管理站(SNMP)是用于中央网络管理站和网络之间的。 参考答案: (1)HTTP:超文本传输协议,用于WEB服务器和WEB客户机之间; (2)SMTP:简单邮件传送协议,用于邮件客户机和邮件服务器之间; (3)TELNET:远程登录协议,用于客户机与终端之间。 2.现给出一个网址如下:https://www.docsj.com/doc/9817084502.html,/planetwide/select/selector.html,请你根据所学的URL分析该网址各个部分的含义。 参考答案: //前的http表示访问信息采用的是超文本传输协议,并且文件在WWW服务器上; https://www.docsj.com/doc/9817084502.html,表明了WWW服务器的位置; planetwide/select/selector.html表明最终要访问的文件所在的位置。 3.访问类型即访问信息的链接方式,它决定了文件所在的位置,请问常用的链接方式有哪几种,并举出实例。(列出三种即可) 参考答案: (1)file:如file:\\D:\作业\作业\主页.htm(前面的file:\\一般可省略)就是打开本地D盘下的一个网页;(2)ftp:如ftp:\\https://www.docsj.com/doc/9817084502.html,(此处也可输入IP地址); (3)http:如https://www.docsj.com/doc/9817084502.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.docsj.com/doc/9817084502.html,,请你实际操作进入该网站,并列出三种以上进入该TELNET网站的方法。 参考答案: (1)在浏览器中登录:启动INTERNET EXPLORER,在URL地址栏中输入“telnet://https://www.docsj.com/doc/9817084502.html,”;(2)“开始”→“运行”→“输入telnet”→“确定”→在命令行输入“open https://www.docsj.com/doc/9817084502.html,”命令并回车; (3)“开始”→“运行”→“输入cmd”→“确定”→在命令行输入“telnet https://www.docsj.com/doc/9817084502.html,”命令并回车; (4)“开始”→“运行”→“输入c md”→“确定”→在命令行输入“telnet211.157.100.8”命令并回车。 5.如果远程登录失败,请问原因可能是什么? 参考答案: (1)计算机地址拼写错误(主机名或IP地址错误); (2)远程计算机暂时不能使用; (3)你所指定的计算机不在Internet上。 6.实践:启动INTERNET EXPLORER浏览器,修改其INTERNET选项,并观察其效果。 您的答案: 答:将https://www.docsj.com/doc/9817084502.html, 设置为INTERNET选项的首页后,只要打开INTERNET EXPLORER 便直接登录到该网站的主页 1.个人网站有哪三种基本风格? 参考答案: (1)主题图形式; (2)信息发布式; (3)介于两者之间的风格。
网页设计与制作_在线作业_C 最终成绩:90.0 一判断题 1. (5.0 分) FALSE TRUE 知识点: 11.2 编辑矢量对象 用户解答: FALSE 2. (5.0 分) FALSE TRUE 知识点: 12.1 创建和编辑标准文本 用户解答: FALSE 3. 在Fireworks中,图中(b)是对(a) 实施外斜角滤镜的结果。() (5.0 分) TRUE FALSE 知识点: 13.1 滤镜 用户解答: FALSE 4. 在Fireworks中,“自由变形工具”能够直接对矢量对象执行变形操作,也能对路径上的各个定位点进行操作。() 在Fireworks中,文字不能设置笔触和填充。()
(5.0 分) FALSE TRUE 知识点: 13.2 资源——样式、元件、URL 、形状 用户解答: TRUE 5. (5.0 分) FALSE TRUE 知识点: 13.4 优化与导出 用户解答: FALSE 6. (5.0 分) FALSE TRUE 知识点: 15.2.3 绘图工具箱 用户解答: TRUE 7. (5.0 分) FALSE TRUE 在Fireworks 中,元件是用户自己建立的可以重复使用的图形,动画或按钮对象。( ) 在Fireworks 中,可以同时显示6幅不同优化效果的图像。( ) Flash 中“墨水瓶工具”(Ink Bottle Tool )是为矢量色块进行填充的工具。( ) Flash 中文本必须图形化才能使用滤镜。( )
知识点: 16.1.1 文本工具 用户解答: TRUE 8. (5.0 分) TRUE FALSE 知识点: 16.1.2 文本变形及图形化 用户解答: TRUE 二单项选择题 1. (5.0 分) 知识点: 9.5 调整画布或图像 用户解答: 2. (5.0 分) “修改”|“组合路径”|“拆分” “修改”|“组合路径”|“封口” “修改”|“组合路径”|“联合” “修改”|“组合路径”|“接合” 知识点: 11.2 编辑矢量对象 用户解答:“修改”|“组合路径”|“接合” 3. Flash中为了避免丢失字体,应将文字图形化。() 若需要向下方向扩大Fireworks画布,应在修改Fireworks画布的窗口内,点击()锚定按钮。在Fireworks中,用“刀子”工具切割路径后,应执行()命令,将路径封口。
网页设计与制作教程 第一章基础篇 1.INTERNET和WWW INTERNET的功能和应用 1.信息的获取与发布 2.电子邮件 3.网上交际 4.电子商务 5.网络电话 6.网上事务处理 7.远程登陆 8.文件传输 9.电子公告版 10.全球信息网 11.INTERNET的其他应用 WWW简介 1.网页,网页文件和网站 2.HTTP和FTP协议 3.超文本和超链接 4.INTERNET地址 5.域名 6.统一资源定位器(URL) 7.HTML 常见网络浏览器----IE 第二章网站建设概论 (1)信息类网站 (2)交易类网站 (3)有偿信息类网站:101网校、 (4)功能型网站 (5)综合类网站 2.根据网站的性质分类: (1)政府网站 (2)企业网站 (3)商业网站 (4)教育科研机构网站 (5)个人网站 (6)非赢利机构网站 (7)其他类型的网站 3.根据在大型搜索引擎上的设置分类 4.娱乐和休闲类网站;商业与经济类,艺术,人文,健康,医药,政府,政治类,电脑与 网络类,社会和文化,科学与教育类,参考资料类 2.1.2网站建设的步骤 1.制作环境的准备:1)设备:扫描仪,数码相机,打印机2)完善系统环境3)备齐网页开发工具软件,网页制作工具,服务器端程序开发工具及一些实用的辅助工具。。。4。
备齐素材制作和加工软件,包括对图形,动画,刘媒体和声音进行处理的素材制作和加工软件 5)备齐常用的网站发布工具,如FTP文件传输软件 2.网站目标的确定:对象:访问者的类型;主题明确,数据充分。保持目标的简洁 3.网站主题,风格和创痍点的确定 1)主题选材要小而精 2)擅长或感兴趣的内容 )选题不要太滥:因特网上只有第一,人们记不住第二第三名 2)网站的风格:CI(标志,色彩,字体,标语),版面布局,浏览方式,交互性,文字,语气,内容价值,存在意义,站点荣誉等诸多因素 1)确信风格是建立在有价值的内容上的 2)需要彻底弄清楚站点给人的印象是什么 3)在明确网站印象后,开始努力建立和加强这种印象:1)标志(LOGO)2)色彩3)标准字体4)醒目标准口语5)统一图片处理效果7)使用网站特有的图标;使用自己设计的花边,线条和点;;9)展示网站的荣誉和成功作品10)告诉网友关于个人真实的故事和想法3)网站的创意(准备期,孵化期,启事期,验证期,形成期) 4.网站结构的确立:1)网站结构的确立2)网站目录的设置3)网站链接结构的设置:树状连接结构;星状链接结构3)两种结构的综合 5.网站素材的准备 6.网站制作工具的选择和确定:DREAMWEA VER和FRONTPAGE,PHOTOSHOP,FIREWORKS,动画制作工具:FLASH,COOL 3D;网页特效工具,网页特效精灵,有声有色 7.网站的建设 1)申请E---MAIL帐号 2)申请网页空间:1。打开虎翼网空间申请主页 3)域名注册:对于个人网站,在申请免费网页空间的同时也完成了域名的注册 4)网页制作:先简单后复杂,布局先大后小,制作网页时要多灵活运用软件配备的设计模板,这样可以大大提高制作效率 8。网站的测试(看看有没有问题)和上传(将网站发布到WEB服务器,网页制作工具本身具有FTP功能) 9。网站的宣传和推广(搜索引擎上注册,与别的网站交换链接,运用网络广告) 10.网站的更新和维护:必须不断给它补充新的内容,才能够长期吸引住浏览者 2.1.3 网站设计的原则 1)网站主题不要多于三个:小而精,定位小 2)网站的标准色彩不要超过三种 3)重视网站目录结构的创建(创建目录的原则百度上找出来):不要将所有文件都存在根目录下,目录层次不超过三层,不要使用过长的目录名,尽量不要使用中文目录名 4)链接层次不要超出三层(便于维护) 5)网页长度应限定在三个整屏以内 6)表格的嵌套层次要控制在三层左右(表格插入表格里) 7)网站导航要清晰 2.优秀网站的五大要素 1)网站内容丰富 2)页面下载速度快(网页简单,不要大量图片)
广西玉林高级技工学校 《网页制作与设计》课程标准 一、课程基本信息 二、课程性质 本课程是中职计算机术专业的一门主干专业课程。通过本课程的学习,要求学生掌握网页设计的基本概念,学会使用常用的网页设计工具和常用脚本语言,能够设计制作常见的静态和动态网页,具备网站的建立和维护能力。同时通过本课程的学习,培养学生的综合职业能力、创新精神和良好的职业道德。 三、设计思路 本课程标准的总体设计思路:以计算机专业学生的就业为导向,根据行业专家对计算机网络技术专业所涵盖的岗位群进行的任务和职业能力分析,紧紧围绕完成工作任务的需要来选择课程内容,设定职业能力培养目标;以“工作项目”为主线,创设工作情景;以书本知识的传授变为动手能力的培养为重点,强化学生实践动手能力的培养,以实现职业能力的培养目标。 四、课程目标 1.职业知识目标 1.熟悉HTML 语言的作用和开发环境,能够编写HTML 代码; 2.掌握常用的HTML 标签,能够实现基本的图文信息显示; 3.理解HTML 页面框架的作用,能够针对需求进行框架的设计; 4.掌握各类HTML 表单元素标签,能够进行表单设计;
5.掌握各类HTML 多媒体元素标签,能够进行多媒体页面设计; 6.掌握CSS 样式的基本使用方法,能够应用CSS 样式表美化页面;7.掌握CSS 网页布局的方法,能够结合DIV 标签进行页面布局; 8.掌握JavaScript 的语法基础,能够编写简单的JavaScript 应用程序;9.掌握JavaScript 的函数、内置对象、事件等,能够实现表单的验证;10.掌握DOM 树形结构及其操作方法,能够控制DOM 对象。 2.职业技能目标 1.能独立进行资料收集与整理、具备用户需求的理解能力; 2.能根据项目需求,具备项目页面的设计与实现能力; 3.能根据静态页面设计原则与CSS 技术规范,实现页面美化与布局;4.具有使用JavaScript 技术进行页面事件处理与表单验证的能力; 5.能根据DOM 树形结构,进行页面DOM 的控制; 6.具有综合应用HTML 语言、CSS 样式、JavaScript 脚本进行页面的设计、编码、调试、维护能力。 3.职业素质目标 1.养成善于思考、深入研究的良好自主学习的习惯; 2.通过项目与案例教学,培养学习者的分析问题、解决问题的能力; 3.具有吃苦耐劳、团队协作精神,沟通交流和书面表达能力; 4.通过课外拓展训练,培养学习者的创新意识; 5.具有爱岗敬业、遵守职业道德规范、诚实、守信的高尚品质。 五、课程主要内容与要求
实验一网页的认识 实验目的 1、掌握利用Internet进行信息游览、搜索,下载网页、图片、文字和文件; 2、利用记事本来编辑HTML文档并浏览; 3、熟悉HTML基本标记的使用。 实验环境 WindowsXP操作系统,内部组成局域网,外连Internet互联网。 实验重点及难点 ◆熟悉HTML的结构、语法。 ◆熟悉HTML基本标记的使用。 实验内容 1、从网上(如网页制作大宝库https://www.docsj.com/doc/9817084502.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 个像素,颜色为棕色;网页设计与制作_在线作业_1 一、单选题 1. 在Fireworks中,修改用钢笔绘制的自由路径的弧度,需使用()。 ? A. 部分选定工具 ? B. 钢笔 ? C. 重绘路径工具 ? D. 指针工具 2. 在Fireworks中,用“刀子”工具切割路径后,应执行()命令,将路径封口。? A. “修改”|“组合路径”|“联合” ? B. “修改”|“组合路径”|“拆分” ? C. “修改”|“组合路径”|“封口” ? D. “修改”|“组合路径”|“接合” 3. 若将页面分为3个框架,应保存()个网页html文件。 ? A. 1 ? B. 2
? C. 3 ? D. 4 4. 在Fireworks中,“自由变形工具”的光标有两种形状,()。 ? A. 当光标为时,对路径执行“扭曲”操作,当光标为时,对路径执行“拉伸”操作 ? B. 当光标为时,对路径执行“推动”操作,当光标为时,对路径执行“拉伸”操作 ? C. 当光标为时,对路径执行“推动”操作,当光标为时,对路径执行“扭曲”操作 ? D. 当光标为时,对路径执行“推动”操作,当光标为时,对路径执行“拉伸”操作 5. .blue {color: #0000ff}是()。 ? A. 标签选择符和选择符组 ? B. 包含选择符 ? C. ID选择符 ? D. 类选择符 6. 书写CSS样式时,要把相同属性和值的标签组合起来书写,应使用()。
? A. ID选择符 ? B. 类选择符 ? C. 标签选择符和选择符组 ? D. 包含选择符 二、多选题 1. Flash的“选择工具”用于选取图形、移动图形和编辑图形。其光标可以是()。? A. ? B. ? C. ? D. 2. 使用Flash “选择工具”同时选中,则()。 ? A. 作图或拖动舞台对象时,可以准确地吸附到其他线条上的点。 ? B. 鼠标指针指向对象的中心点,鼠标指针上出现一个小三角 ? C. 作图或拖动舞台对象时,可以准确地吸附到其他图形的中心点。 ? D. 影响绘制形状或位置的微调。 3.
《网页设计与制作》课程教学大纲 课程名称:网页设计与制作 学分及学时: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页面开发的发展方向,兼顾各行各业的需求变化,力争面向社会,服务于企业“互联网+”战略。 三、课程学时分配 四·课程教学中应注意的问题 理论课讲解WEB页面开发的原理及方法,并在多媒体教师机上进行演示操作;
课程设计报告书 题目:《苹果公司》网页设计与制作 二级学院数学与计算机科学学院年级专业2012级计算机网络学号 学生姓名 指导教师 教师职称讲师
新余学院课程设计(论文)任务书二级学院:
说明:此表一式叁份,学生、指导教师、二级学院各一份。 2013年 6 月 18 日
目录 第1章课程设计概述 (1) 第2章网站设计方案说明 (3) 2.1 需求分析 (3) 2.2 网站布局类型和配色方案的确定 (3) 2.3 网站整体规划 (5) 2.4 素材的收集和整理 (5) 第3章网站制作 (7) 3.1创建站点 (7) 3.2创建样式表文件 (7) 3.3页面制作 (9) 第4章主要技术特点和特色说明 (13) 第5章课程设计总结 (16)
第1章课程设计概述 本课程设计主要是利用已经学习的网页设计与制作知识和初步掌握的网页开发工具如Dreamweaver、Photoshop等软件为苹果公司设计并实现一个公司网站。根据老师的要求及指导,我设计了此网站。 此网站属于小型网站,网站以苹果公司原网站为依托,按照原网站配色方案和表面结构以DIV+CSS的方式仿制,苹果公司(Apple Inc.)是美国的一家高科技公司,2007年由苹果电脑公司(Apple Computer, Inc.)更名而来,核心业务为电子科技产品,总部位于加利福尼亚州的库比蒂诺。苹果公司由史蒂夫·乔布斯、斯蒂夫·沃兹尼亚克和Ron Wayn在1976年4月1日创立,在高科技企业中以创新而闻名,知名的产品有Apple II、Macintosh电脑、Macbook笔记本电脑、iPod音乐播放器、iTunes商店、iMac一体机、iPhone手机和iPad平板电脑等。2012年8月21日,苹果成为世界市值第一的上市公司。 本网站的主要功能是提供丰富、清晰的公司信息和资源,主要包括iphone、ipad、ipod、Mac、itunes等硬件产品以及iOS、Mac OS和APP应用软件等软件产品的全方位展示和介绍;通过在线商店网页为顾客和公司提供购买和销售苹果产品的便利通道;通过技术支持网页为产品购买者提供维修服务和支持范围。 设计者希望通过清新简洁,赏心悦目的外观设计给予客户和顾客以舒适的网页浏览体验。网站充分展示公司提供的产品及设计理念和售后服务能力,注重推广公司各方面形象。以公司的宣传推广和将网站浏览者吸引成为公司的客户作为网站的目标。坚持严谨、负责、创新的态度为消费者提供展示苹果公司完美产品和周边设备的个性化页面,不断创新变革助力科技进步和公司前进。 此外,这不仅是为了肩负学生的责任而去完成老师交给我的任务,更是对过去学习的知识的温习巩固,是一个把理论转化为实践的过程,是一个把自己的设计思想转化为实物的过程,是一个发挥自己创造力和想象力的过程。 再者,这是对自己在一学期内该学习科目以来的成果的检查,这是一个自我审视的过程:检测我该学期的学习成果,衡量一期以来的收获,更为重要的是扬长避短,发现自己的问题与缺点,使自己及时改正,发觉自身的优点和长处并坚
存档资料成绩: 课程设计报告书 课程名称网页设计与制作 题目设计个人网站主页 分院电信分院 专业班级电子商务 学号 学生姓名 指导教师 2011 年 6月 20日
课程设计评阅意见 评阅人__________职称________ 年月日
目录 第1章课程设计任务书 .................................. 错误!未定义书签。 一、课程设计题目设计个人网站主页............... 错误!未定义书签。 二、课程设计工作:................................... 错误!未定义书签。 三、课程设计的内容要求:............................. 错误!未定义书签。 1、课程设计要求.................................. 错误!未定义书签。 2、课程设计内容.................................. 错误!未定义书签。 第2章课程设计目的 .................................... 错误!未定义书签。 第3章课程设计内容................................... 错误!未定义书签。 设计一选题的基本原则................................. 错误!未定义书签。 (1)选题应反映本专业的培养目标,符合专业综合训练的要求。错误!未定义书签。 (2)选题要有利于深化所学的专业知识和拓展所学的知识面。错误!未定义书签。 (3)选题的难易程度和工作量要适当,保证在规定的时间内,在教师的指导下,经过努力能够完成。 设计二选题范围..................................... 错误!未定义书签。 设计三选材......................................... 错误!未定义书签。 设计四正确运用DW和Ps ............................. 错误!未定义书签。 设计五课程设计心得................................. 错误!未定义书签。 第4章课程设计步骤 .................................... 错误!未定义书签。 设计一查找相关资料................................. 错误!未定义书签。 设计二利用Ps进行切片.............................. 错误!未定义书签。 设计三利用DW编辑.................................. 错误!未定义书签。
《网页设计与制作》课程简介 课程名称:网页设计与制作 课程代码:02038 适用专业:初等教育(计算机与信息技术方向) 课程性质:专业核心课程、必修课、专业技能课 学分:3 学分 计划学时:72学时(理论36学时,实训36学时) 一、前言 1. 课程性质 本课程是初等教育计算机与信息技术专业的一门专业技能课程,培养学生网页设计与制作能力,适应初等教育对信息技术教师的人才基本要求,同时满足社会对计算机专业人才的需求,适合从事网站建设相关的岗位。 本课程的先修课程是《计算机应用基础》,后续课程是《https://www.docsj.com/doc/9817084502.html,程序设计》。在完成《计算机应用基础》课程学习后,学生掌握了计算机基本知识和原理,学会了一些应用软件和工具软件的使用,进而学习《网页设计与制作》这门课程不会感到困难。在以后学生还将学习《https://www.docsj.com/doc/9817084502.html,程序设计》课程,能设计和制作动态网页。 2. 课程基本理念 初等教育计算机与信息技术专业培养的对象主要是小学信息技术教师,今后从事小学信息技术教学和学校信息化教育教学的管理者及维护者,建设网站和网页是信息技术教师应掌握的基本技能。课程要理论与实践相结合,培养学生动手能力,能胜任今后小学信息技术教师的工作任务。同时满足社会对计算机专业人才的需求,适合从事网站建设相关的岗位群。 3. 课程设计思路 根据初等教育计算机与信息技术专业人才培养方案,《网页设计与制作》是重要的专业技能课程,是作为小学信息技术教师基本技能训练与考核的项目之一。课程以工作任务来组织内容,以案例驱动贯穿教学过程。由浅入深,最后完成主题网站的开发项目。课程教学中以Dreamweaver的使用为主线,要重视HTML
Dreamweaver网页设计与制作 一、课程性质与任务 本课程是中等职业学校计算机专业网络方向核心课程之一。本课程的主要任务是介绍利用Dreamweaver开发工具进行网页设计,包括新建、编辑和设置一个Web站点;如何对页面属性进行基本的设置,如何设置、编辑CSS层叠式样式表;如何排版文字、表格和层;如何进行基本的图像处理;建立框架;模板和库的使用和编辑;网站的发布与维护等基本知识与应用。目的是通过本课程的学习,培养学生的实际动手能力和计算机的操作能力,能够运用所学的知识进行网页设计。 本课程建议安排在二年级完成。 二、课程教学目标 1.了解WEB站点的工作原理; 2.了解、HTML、CSS的定义,概念和作用; 3.掌握HTML语言中的各种文本格式、字符格式、段落设置、列表、表单、框架、多媒体标记的作用; 4.掌握Dreamweaver应用软件的使用功能; 5.能熟练运用Dreamweaver应用软件;熟练掌握使用绝对和相对URL,创建超链接,图像链接,图像映射的建立方法; 6.掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法; 7.熟练掌握表格的使用方法,学会利用表格设布局网页;掌握框架制作网页的方法,会使用框架设计网页;掌握制作表单的方法,会利用表单建立交互式页面;
8.能够按网页设计技术要求修改和调试JavaScript代码; 三、教学的内容及要求 本课程的教学内容由理论模块、实训模块两个部分构成。 1.讲授模块是由教师示范操作,让学生通过练习达到掌握操作的要求;总的教学时数为36-42学时。 2.实训模块是由教师布置实训任务,由学生分组共同完成,达到熟练掌握使用Dreamweaver设计网站的要求,教学时数为48-54学时。 理论模块 第一单元网页设计概述 第二单元创建Web站点 第三单元网页设计语言基础
一、填空题( 2‘ *5 ) 1、 题干网站由网页构成,并且根据功能的不同,网页又有____和动态网页之分。 知识点编号 题目类型填空题 难度等级简单 权重分值 2 分 答案静态网页 网站由网页构成,网页有静态和动态之分。所谓静态网页是指用户无论何时何地访 答案说明问,网页都会显示固定的信息,除非网页源代码被重新修改上传。静态网页更新不方便,但是访问速度快。而动态网页显示的内容则会随着用户操作和时间的不同而变化,这是因为动态网页可以和服务器数据库进行实时的数据交换。 关键字认识网页 2、 题干Web标准是一系列标准的集合,主要包括结构、_____和____。知识点编号 题目类型填空题 难度等级简单 权重分值 2 分 答案表现和行为 答案说明 Web标准并不是某一个标准,而是一系列标准的集合,主要包括结构(Structure)、表现( Presentation )和行为( Behavior )三个方面。 关键字Web标准3、 题干HTML中文译为 ________________ ,主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。 知识点编号 题目类型填空题 难度等级简单 权重分值 2 分 答案超文本标记语言 答案说明 HTML(英文 Hyper Text Markup Language的缩写)中文译为“超文本标记语言”,主要是通过 HTML标记对网页中的文本、图片、声音等内容进行描述。 关键字HTML语言简介 4、 题干HTML语言主要是通过_______________ 对网页中的文本、图片、声音等内容进行描述。知识点编号
题目类型填空题 难度等级简单 权重分值 2 分 答案HTML标记 答案说明HTML中文译为“超文本标记语言”,主要是通过 HTML标记对网页中的文本、图片、声音等内容进行描述。 关键字HTML语言简介 5、 题干在网站建设中, HTML用于搭建页面结构,CSS用于设置页面样式, __________用于为页面添加动态效果。 知识点编号 题目类型填空题 难度等级简单 权重分值 2 分 答案JavaScript 答案说明考察对 JavaScript 的理解 关键字JavaScript 语言简介 二、判断题( 2‘ *10 ) 1、 题干因为静态网页的访问速度快,所以现在互联网上的大部分网站都是由静态网页组成的。知识点编号 题目类型判断题 难度等级简单 权重分值 2 分 答案错 答案说明 现在互联网上的大部分网站都是由静态网页和动态网页混合组成的,两者各有千秋,用户在开发网站时可根据需求酌情采用。 关键字认识网页 2、 题干网页主要由文字、图像和超链接等元素构成,但是也可以包含音频、视频以及 Flash等。知识点编号 题目类型判断题 难度等级简单 权重分值 2 分 答案对 答案说明 网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash 等。 关键字认识网页
第3讲文字的操作一 1.1教学目标: ◆知识目标 1.掌握在网页中输入文本、文本编辑。 2.掌握网页文本格式化的操作方法。 3.学会在网页中插入其它特殊文本。 ◆技能目标 1.在网页设计编辑中熟练引用文本、列表、分段等方法并设置。 2.能够根据页面需要对文本进行编辑设置来美化页面。 3.能够根据页面需要灵活添加其它特殊元素。 ◆品质目标 培养学生认真细致、勇于创新的精神 1.2教学重点: 1.掌握在网页中输入文本、文本编辑。 2.掌握网页文本格式化的操作方法。 3.学会在网页中插入其它特殊文本。 1.3 教学难点 掌握在网页中输入文本、文本编辑。掌握网页文本格式化的操作方法。 1.4教学方法:讲练结合,任务驱动、分子任务操练 1.5课时安排:2课时 1.6教学对象分析: 这个班学生具有基本专业技能,不仅仅是要教会他们方法,最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力,在保证全班同学教学进度一致的情况上,培养学生较好的专业基础与创新创作意识。 1.7教学过程: 一、任务目标----任务三文本的操作 本任务是针对网页的基本元素——文本的相关操作的子任务,旨在通过该任务的实施完成,读者能够熟练掌握编辑网页文本的各种方法,对网页文本的格式化处理有一个清晰的认识,使网页的显示效果更加丰富多彩。 ◆完成任务关键步骤 ?新建一个网页并保存到站点指定目录。 ?在页面中输入文字。 ?运用Dreamweaver CS6提供的导入功能,把外部文件插入当前页面。 ?在拆分视图中显示并修改标记,了解标记功能。 ?在页面的指定位置插入水平线。 ?在页面的适当位置插入能够自动更新的日期。 ?通过页面属性的设置掌握网页格式的整体。 ?设置网页中文本的项目列表及缩进方式处理。 ?设置网页中文本的格式。 ?设置锚点链接。 二、在网页中插入文本
第5讲图像的操作(一) 1.1教学目标: ◆知识目标 1.认识图像,掌握在页面中插入图像的方法 2.掌握图像各属性的作用和交换图像的设置。 ◆技能目标 1.能够根据页面显示效果在适当位置插入图像元素。 ◆品质目标 培养学生认真细致、踏实进取的精神 1.2教学重点: 2.掌握图像各属性的作用和交换图像的设置。 1.3 教学难点 交换图像的设置。 1.4教学方法:讲练结合,任务驱动、分子任务操练 1.5课时安排:2课时 1.6教学对象分析: 这个班学生具有基本专业技能,不仅仅是要教会他们方法,最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力,在保证全班同学教学进度一致的情况上,培养学生较好的专业基础与创新创作意识。 1.7教学过程: 一、激趣导入,揭示课题 前一章节把Dreamweaver MX的工作环境做了一个详细介绍,相信同学们对网页制作软件的界面有了一个清晰的认识,万事开头难,一个好的站点不仅有全局规划,而且一个功能强大的网站,需要多方面知识的积累,首先找一个已经做得比较好的网站,把整个链接过程演示给学生,让他们感受到网站其实做起来也不难,只要用心就可以,关键是主线要清晰。二、使用图像 图像和文字是网页中最重要的两个元素。一个高质量的网页是离不开图像的。制作精良的图像可以大大增强网页的美观性,令网页更加生动多彩。在页面中如何用漂亮的图像来吸引人们的视线是每个网站都需要面对的问题。 一幅好的图片,胜过千言万语,反映在网页上也是如此。在这里“好的”这个词包含了三方面的含义:一是指合适的,用一幅毫不相干的图像只会起到画蛇添足的作用;二是指正确的,用一个文件量很大的图像或者格式错误的图像,只会让浏览者对你的网页火冒三丈;三是指漂亮的。 0.1认识图像 要在文档中正确使用图像,首先要了解一些Internet相关的图像知识。 由于图像在磁盘中的压缩方式和存储方式的不同,加上许多图像处理软件又有自己专门的格式,所以图像的标准有很多种。目前在Internet上最为常见的图像包括JPG、JPEG、GIF
第二篇 Dreamweaver案例图文混排:几米页面的制作 要求: 运用Dreamweaver编辑编写网页,熟悉文字、段落、图片、超链接等各种页面元素的使用。 掌握背景颜色和背景图片的属性设置。 实例如下:
在dw中实现框架:上-中—下 要求: 在 Dreamweaver编辑工具中,利用前面所学的框架知识,制作上-中—下结构的框架页面;左边的超链接可以在右侧窗口打开; 各个窗口无缝连接。 实例如下: 在dw中设计漂亮表单 要求: 在 Dreamweaver编辑工具中,利用前面所学的表单和布局知识,制作一个漂亮的表单界面。熟悉表单的各种控件 简单布局1:图片合成页面 要求: 在 Dreamweaver编辑工具中,利用“布局”界面绘制布局表格和布局单元格,
制作如下图所示的页面; 掌握布局表格和布局单元格的使用方法; 注意页面的内容添加需要在“标准”界面中完成。 实例如下: 简单布局2:背景色填充表格 要求: 在 Dreamweaver编辑工具中,学会利用不同的背景颜色来填充页面; 实例如下: 布局测验:色块布局 要求: 在 Dreamweaver编辑工具中,利用“布局”界面绘制布局表格和布局单元格中,制作下图所示的页面;要求页面结构相同,颜色可以变化; 时间10分钟。
实例如下: 自己设计页面首页 要求: 参考Dreamweaver素材库,利用所学知识,制作一个漂亮的网站首页面;内容丰富、布局清晰; 看看谁的作品更漂亮!!
利用模版制作结构相同的3个页面 要求: 在 Dreamweaver编辑工具中,利用模板的功能,制作一个简单的模版,并且基于自己制作的模版,生成结构大体相同的三个页面; 超链接能够正常跳转。 实例如下: 页面一: 页面二:
1.HTML 文件必须使用 htm 或者(B)作为文件扩展名。 A.doc B. html C. jsp D. aspx 2.HTMl是指(A)。 A.超文本标签语言 B. 汇编语言 C. 服务端端语言 D.脚本语言 3.WWW是(B)的意思。 A.网页 B.万维网 C.浏览器 D.超文本传输协议 4.在网页中显示特殊字符,如果要输入“<”,应使用(D)。 A.lt; B.≪ C.< D.< 5.以下说法中,错误的是:(D)。 A.获取WWW服务时,需要使用浏览器作为客户端程序。 B.WWW服务和电子邮件服务是Internet提供的最常用的两种服务。 C.网站就是一系列逻辑上可以视为一个整体的页面的集合。 D.所有网页的扩展名都是 .htm。 6.以下说法中,错误的是:(B)。 A.网页的本质就是HTML源代码。 B.网页就是主页。 C.使用“记事本”编辑网页时,通常应将其保存为 .htm 或 .html 后缀。 D.本地网站通常就是一个完整的文件夹。 7.浏览网页时,通常使用以下协议:(C)。 A.mailto B.FTP C.HTTP D.TCP/IP 8.在网页中显示特殊字符,如果要输入空格,应使用(D)。 A.nbsp; B.&Nbsp; C.  D. 9.以下软件中,不能直接用来编辑 HTML 文件的是:(C)。 A.记事本 B.FrontPage C.Flash D.Dreamweaver 10.以下有关 HTML 标记符的属性的说法中,错误的是:(C)。 A.在HTML中,所有的属性都放置在开始标记符的尖括号里。 B.属性与HTML标记符的名称之间用空格分隔。
《网页设计与制作》操作题(一) 题目一: 根据图例要求,编辑给定网页,index.htm,jianli.htm,zuoping.htm,zuoyouming.htm,为指定网页添加文字,图片,超链接(导航超链接、邮件超链接),效果图如下。 (素材在“操作题(一)/题目一”文件夹下,简历文字在“简历.txt”、座右铭文字在“座右铭.doc”中),完成后上传教师机,文件名姓名+学号。 首页我的简历 我的作品座右铭 题目二: 使用表格构造布局网页,效果图如下: (素材在“操作题(一)/题目二”中,文字在“表格布局.txt”中),完成后上传教师机,文件名姓名+学号。 题目三: 制作图片翻转的导航菜单,效果图如下: (素材在“操作题(一)/题目三”中) 完成后上传教师机,文件名姓名+学号。 《网页设计与制作》操作题(二) 题目一: 根据范例图片的效果,制作鼠标拖动图片到不同位置,实现拼图效果网页制作。 效果图如下,素材图片在“操作题(二)/题目一/images”目录下, 完成后上传教师机,文件名姓名+学号。 题目二: 使用表格、布局视图设计、制作网站《我的相册》,效果图如下,素材在“操作题(二)/题目二”目录下, 完成后上传教师机,文件名姓名+学号。 《我的相册》首页效果图 “四季”效果图 “万物”效果图 “外面的世界”链接网址: 《网页设计与制作》操作题(三) 题目一: 使用表格、布局视图设计、制作购物网站首页,效果图如下,素材在操作题(三)目录中, 完成后上传教师机,文件名姓名+学号。 题目二: 1、熟练使用搜索引擎查找所需素材并能够进行图片、文字、声音等素材的下载。 2、.学会分门别类地收集和整理素材。 3、学会图片格式转换和一般效果的处理。 Photoshop简单处理图片、软件"格式工厂”转换图片格式。 4、学会声音和视频的简单截取和格式转换等操作。 软件“视频编辑专家”对视频进行截取、分割、合并、格式转换等操作。 利用软件“GoldWAVE”对声音进行录制、截取、拼接、转换。