网页设计与制作技术

课程基于OBE理念,采用工作流程+项目+任务驱动的教学模式,按照基础知识、操作技能、应用提高三个层次组织教学(如图所示)。

考核方式:

成绩评定:评分标准采取百分制单元测验占20%,单元作业占20%,讨论占10%,期末大作业占50%。

具备一定的计算机基础知识和操作能力。

第0单元课程介绍及导学

2:课程导学

1:课程介绍

第1单元Web基础知识

任务4:了解网站建设流程

第1单元测试

任务1:初识网页和网站

任务2:了解Web前端设计技术与工具

第1单元导学

第2单元网站策划

第2单元测试

任务2:布局设计

第2单元作业网站策划

第2单元导学

任务4:页面层次结构及目录设计

任务1:形象设计

任务3:导航及栏目设计

第3单元网站首页文档创建

任务2:理解HTML标记语法

任务3:理解HTML布局-div标记和span标记

第3单元测试

任务1:创建网站首页

任务4:理解HTML5布局标记

第3单元导学

第4单元网站首页内容编辑

任务4:应用表格和表单

任务1:插入文本及列表

任务3:设置超链接和应用框架

第4单元测试

第4单元作业网站内容编辑

任务2:插入图片和媒体

第4单元导学

第5单元网站首页样式创建

任务2:网页应用CSS样式方法

第5单元测试

任务1:理解CSS语法

任务4:理解CSS层叠性和继承性

第5单元导学

任务3:理解CSS选择器

第6单元网站首页样式设计

任务2:CSS背景和列表属性

任务4:CSS3效果应用

任务1:CSS字体和文本属性

任务3:CSS边框和表格属性

第6单元测试

第6单元导学

第7单元网站首页元素定位

第7单元测试

任务4:定位布局

第7单元作业网站样式设计及应用

任务3:浮动布局

第7单元导学

任务2:流布局

任务1:CSS盒子模型

第8单元网站页面制作完善

第8单元导学

第8单元测试

任务4:了解JavaScript应用

任务3:HTML5画布、拖放及地理定位

任务2:移动端页面制作

任务1:二级菜单制作

期末大作业

《Web前端设计基础》课程期末大作业

页面制作完善-视频

主要参考网站:

Q1.为什么网站的首页文件名为index或default?

这是一种网站首页命名规范。在浏览器地址栏输入网址,即使不输入首页名称index,浏览器也能正确找到该文件并正确显示出来,因为Web服务器默认的首页文件名是index。通过设置,Web服务器常用的默认首页文件名有index、default等。

Q2.为什么有时网页图片不可见或超链接页面找不到?

Q3.为什么制作好的网页在不同的计算机上浏览效果不一样呢?

这是因为各计算机的分辨率不同所致,可在计算机桌面单击鼠标右键,从选项菜单中选择“屏幕分辨率“操作来设置分辨率。

Q4.为什么在进行网页制作时建议尽量使用相对路径呢?

绝对路径是指提供文档完整的路径,其中包括使用的协议。而相对路径是指相对于当前文件的路径,使用相对路径可以在整个目录方便地移动内容,且测试方法比较灵活,特别是本机测试时比较方便。

Q5.为什么浏览网页时会出现乱码现象呢?

在编写网页时,如果未指定字符集就可能会出现乱码现象,可以在区域中添加来指定字符集,utf-8中已存储所有的文字。

THE END
1.web网页设计作业影速递网(12页)网页作品编辑:此作品为学生网页设计类型,代码采用简单的学生水平的HTML+CSS布局制作。下载后可使用任何HTML编辑软件(如:DW、HBuilderX、Vscode、Sublime Text、Webstorm、Notepad++等)进行编辑和修改。 网页作品布局:整体采用响应式布局,包含LOGO、导航、主体内容等布局。子页面有多种布局方式,兴趣爱好内容使用图片列表展https://blog.csdn.net/qq_40486643/article/details/144285922
2.网页布局优设网本话题发布网页布局相关的内容,会持续更新,同时也为您推荐了网页布局的话题,访问即可查看更多精彩内容。 推荐话题:网页设计排版布局经验分享网页排版优秀网页设计 1.5w 9种常见的网页布局思路,学会了记得收藏! 优设 排版布局 1.1w 强推!9种Dribbble风网页布局方式必须收藏 https://www.uisdc.com/tag/%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80
3.5个可视化CSS网格布局生成器前端开发因此,如果你知道正确的使用工具,则可以更轻松地从头生成网格布局。 因此,在本文中,我将介绍 5 个最好的 CSS 布局生成器,并进行功能比较,以帮助你直观地生成 CSS 网格。 1、Griddy Griddy 是设计师和开发人员中最常用的 CSS 网格生成器之一。 使用Griddy,你只需配置行、列、间隙和对齐即可轻松创建 2D 布局。 https://aiqicha.baidu.com/qifuknowledge/detail?id=10045707582
4.艺术与技术的完美融合,精美网页设计排版展示门店系统摘要:这款网页设计排版极具美感,巧妙地将艺术与技术完美结合。其设计既注重用户体验的便捷性,又展现出独特的视觉魅力。网页排版精致,色彩搭配和谐,布局合理,为用户带来愉悦的视觉享受。技术运用娴熟,确保网页加载速度快,操作https://logo.vvrcloud.com/post/18831.html
5.用这个在线软件,一键搞定7种网页布局设计!网页布局设计是指在创建网页时,设计师对网页元素的排列、组织和呈现方式的规划和设计过程,其目标是创造一个结构清晰、易于导航和吸引人的网页,使用户能够轻松地浏览和理解网页内容。很多设计师常常为设计不出吸引用户的网页页面而烦恼,其实可以通过使用网页布局设计模板来解决这个问题。使用设计模板不仅可以节省设计师和开https://js.design/special/article/web-page-layout-design.html
6.网页设计介绍世界流行前沿网页设计作品http://www.ccdol.com/sheji/wangyesheji/
7.用好这9个网页排版布局技巧,高级感说来就来!网页排版布局是网页上所有视觉元素的排列,通过页面元素的有意定位,我们可以控制元素之间的关系,更好地引导用户体验。作为网页设计的关键组成部分,网页排版布局决定了访问者注册页面元素的顺序、哪些元素最受关注,以及网页的视觉整体平衡。本文Pixso设计师结合资源社区的案例,介绍了 9 个高级感的网页排版布局创意,一起来https://pixso.cn/designskills/web-layout-skills/
8.分享41个与网页设计样式相关的在线代码生成工具前端达人18、弹性盒布局生成器 地址:https://codepen.io/enxaneta/pen/adLPwv 19、CSS3 透视游乐场 地址:https://codepen.io/mburakerman/pen/wrZKwe 20、可读性游乐场 地址:https://codepen.io/leaverou/pen/ZxqXGy 21、边境游乐场 地址:https://codepen.io/KamilDyrek/pen/dQWdvW https://www.shangyexinzhi.com/article/4632341.html
9.网页UI设计天极设计在线网页UI设计栏目介绍网页界面设计方法,技巧以及实例.包括网页设计,网页制作,网页优化,网页素材,Dreamweaver,Fireworks,Golive,CSS,美化,UI,界面设计等.https://design.yesky.com/homepage/
10.6种经典的网页布局设计,你最喜欢哪个?耐设计云顾名思义,卡片布局将网页信息分布在类似卡片的容器中,每张卡片代表一个单独的信息块,这些信息块包含图片,文本和链接等元素.卡片布局有利于组织杂乱的数据,让内容更易于浏览和互动.这种布局广泛应用于社交媒体平台,新闻聚合网站和电子商务网站,如设计师常用的pinterest就使用了卡片布局. 5款好用的网页布局设计工具 了解https://www.zcool.com.cn/article/ZMTYyMjE4MA==.html
11.干货:网站页面设计怎么做?分享9种常见网页布局好的网站页面设计具有很强的实用性和适应性,在布局上我们要选择合适并且让用户满意的设计。 网页布局在很大程度上决定了网站的用户如何和网页内容进行交互,好的网页设计具有很强的实用性和适应性,在布局上我们要选择合适并且让用户满意的设计。 作为设计师的我们更应该遵循网页布局的最佳实践效果,给观者带来最前沿最全https://www.niaogebiji.com/article-107094-1.html
12.Canva可画在线设计协作平台平面设计作图软件在线设计协作平台Canva可画提供了海量的设计模板,涵盖海报、简历、名片、Logo、PPT、手抄报、二维码、Banner等数十种平面设计场景,更有千款中英文字体及千万张正版图片素材可供使用。精彩设计,随时随地!https://www.canva.cn/
13.UEbuilder网页在线设计工具内置丰富的页面及布局,组合UEmo模板,分分钟实现你的想法 选择UEmo模板 立即免费使用 UEbuilder网页设计工具 Yeah! 功能亮点 UEbuilder里面有丰富的组件及特效,通过想象力可以让你的网站与众不同。 立即免费使用 一键导入网站 丰富的编辑器里面自带页面库,也可一键导入之前编辑好的页面进行使用,既方便又快捷。 https://www.uebuilder.net/
14.国务院办公厅关于印发政府网站发展指引的通知网页设计规范 一、展现布局 (一)展现。 1.政府网站应简洁明了,清新大气,保持统一风格,符合万维网联盟(W3C)的相关标准规范要求。 2.政府网站应确定1种主色调,合理搭配辅色调,总色调不宜超过3种。使用符合用户习惯的标准字体和字号,同一类别的栏目和信息使用同一模板,统一字体、字号、行间距和布局等。 https://www.hebjgbz.gov.cn/cms/preview/ningjin/wsmcgl/101628081708734.html
15.HTML+CSS网页设计与布局从入门到精通全本书评在线阅读本书紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS行网页设计和制作的各方面内容和技巧。 本书共分4个部分21章和两个附录,包括网页设计基础、HTML基础、CSS基础、CSS高级技术和CSS布局技术等内容。全书遵循Web标准,强调“表现”与“内容”的分离,抛弃了那些过时的HTML标记和http://e.dangdang.com/products/1900377613.html
16.利用CSS设计一个全面的网页布局框架css教程利用CSS设计一个全面的网页布局框架 如何运用CSS创建一个完善的网页布局框架 随着互联网的快速发展和普及,网页布局框架的重要性也日益凸显。而CSS(层叠样式表)作为前端开发的基础技术,可以实现网页的美观、灵活和可维护,成为创建一个完善的网页布局框架的重要工具。本文将介绍如何运用CSS创建一个完善的网页布局框架,并https://www.php.cn/faq/652457.html
17.网页的排版与布局网页的排版与布局 每个网站的设计风格都有它自己的组件合集。你的网页设计风格是你和用户交流的一种方式。下面是小编分享的报纸排版风格的网页设计原则,欢迎学习! 网页设计中主要的风格分类: 极简主义; 破旧风格; 怀旧风格与时尚风格; 插画风格; 报纸排版风格个与杂志风格。 https://www.oh100.com/kaoshi/web/351064.html
18.网页设计前端开发,网页设计 年末感恩回馈,包季会员立减19元 亲爱的小伙伴们,为了感谢大家长期以来的支持与厚爱,我们特别推出了年末包季高级会员优惠活动! flemingc 2024年1月23日 HTML基础,前端开发,网页设计 HTMLPAGE:免费在线可视化HTML网页构建器v3 | 拖拽编程,轻松建站,支持响应式设计,建站神器 https://htmlpage.cn/tag/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1
19.5个布局独特的网站首页设计因此,这个时候就需要网站首页设计公司能打破常规,提供更多具体的、新颖的设计思路和专业的设计建议供客户选择。 今天,我们就来欣赏5个布局独特的网站首页设计,希望这些不同于传统的网页布局,能给你带来新的灵感和启发。 NO1.Albumarium 从网站首页的大标题【寻找和分享精美图片的最佳场所】你就可以非常清晰的知道这个https://modao.cc/design/special-website-layout-design.html
20.网页设计课题研究论文(五篇):“网页设计与制作”课程中的应用分析想预览更多内容,点击免费在线预览全文 免费在线预览全文 网页设计课题研究论文(五篇)内容提要: 1、“网页设计与制作”课程中的应用分析 2、网页设计的图片视觉概念探究 3、工作过程的网页设计课程构建探讨 4、网页设计课程知识体系构建 5、计算机网页设计布局分析全文总字数:15055 字 篇一:“网页设计与制作”课程中的https://max.book118.com/html/2021/1123/7064101130004050.shtm
21.网页设计与制作教程(HTML+CSS+JavaScript)第3版《网页设计与制作教程(HTML+CSS+JavaScript)第3版》共11章,主要内容包括网页设计与制作基础、编辑HTML5元素、网页布局与交互、CSS3样式基础、使用CSS3修饰网页元素、CSS3盒模型、Div+CSS布局页面、JavaScript基础、JavaScript DOM编程、HTML5的高级应用和“馨美装修”网站的制作。《网页设计与制作教程(HTML+CSS+http://www.cmpedu.com/books/book/5606155.htm
22.网页设计必须要懂得的那些事儿设计这类网站的内容主要是该产品的工艺、技术、设计、特点、构造、使用场景等。这样的产品页希望可以让用户有沉浸感,所以一般来说都是使用全屏布局,然后配合一些如视差滚动等方式让我们感觉到这个产品的极致精细。 由于中国互联网和产品设计发展很快,所以产品类网站设计需求一定会越来越多。 https://www.163.com/dy/article/DO2OHDO80511805E.html
23.网页设计论文层叠样式表CSS示国际W3C标准化组织制定的一套完整的扩展样式标准,主要是为了在HTML的样式编排上对其功能进行补充,更好地完成网页设计的需要而制定的设计标准。CSS层叠样式表对HTML的标记属性的设定进行了扩充,可以使用Script程序功能来对其进行很好的控制,从而对网络的外观设计和整体的布局设计进行非常有效的控制,让网页在https://www.ruiwen.com/lunwen/6161857.html