HTMLCSSJS【美食网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计 文章目录一、 网站题目二、 网站描述三、 网站介绍四、 网站效果五、️ 网站代码六、️ 如何学习进步七、☠️ 更多干货 文章目录一、 网站题目 美食网站食谱响应式 含JQ 6页二、 网站描述 总结了一些学生网页制作的经验一般的网页需要融入以下知识点divcss布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点网页的风格主题也很全面如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题学生、新手可参考下方页面的布局和设计和HTML源码有用点赞(๑•̀ㅂ•́)و✧ 一套A的网页应该包含 (具体可根据个人要求而定)页面分为页头、菜单导航栏最好可下拉、中间内容板块、页脚四大部分。所有页面相互超链接可到三级页面有5-10个页面组成。页面样式风格统一布局显示正常不错乱使用DivCss技术。菜单美观、醒目二级菜单可正常弹出与跳转。要有JS特效如定时切换和手动切换图片轮播。页面中有多媒体元素如gif、视频、音乐表单技术的使用。页面清爽、美观、大方不雷同。不仅要能够把用户要求的内容呈现出来还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。三、 网站介绍网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面计划采用最新的网页编程语言HTML5CSS3JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器已达到打开后就能即时看到网站的效果。网站素材方面计划收集各大平台好看的图片素材并精挑细选适合网页风格的图片然后使用PS做出适合网页尺寸的图片。网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件网页编辑方面网页作品代码简单可使用任意HTML编辑软件如Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作。其中1 html文件包含其中index.html是首页、其他html为二级页面2 css文件包含css全部页面样式,文字滚动, 图片放大等3 js文件包含js实现动态轮播特效, 表单提交, 点击事件等等。四、 网站效果五、️ 网站代码!DOCTYPEHTML!--[ifltIE7]htmlclassie ie6langen![endif]--!--[ifIE7]htmlclassie ie7langen![endif]--!--[ifIE8]htmlclassie ie8langen![endif]--!--[if(gteIE9)|!(IE)]!--html langen!--![endif]--headmeta http-equivContent-Typecontenttext/html; charsetutf-8/link hrefhttp://fonts.googleapis.com/css?familyOswald:400,700,300|Bitter:400,700,400italicrelstylesheettypetext/cssscript typetext/javascriptsrcjavascript/jquery-latest.js/scriptscript typetext/javascriptsrcjavascript/red-sky-options.js/script!--Mobile Specific Metas--meta nameviewportcontentwidthdevice-width, initial-scale1, maximum-scale1!--CSS--!--[ifltIE9]script srchttp://html5shim.googlecode.com/svn/trunk/html5.js/script![endif]--link hrefcss/style.cssrelstylesheettypetext/csslink hrefcss/responsive.cssrelstylesheettypetext/css!--STARTSETTINGSBOX--script typetext/javascriptsrcsettingsbox/farbtastic/farbtastic.js/scriptscript typetext/javascriptsrcsettingsbox/settingsbox.js/scriptlink hrefsettingsbox/settingsbox.cssrelstylesheettypetext/csslink hrefsettingsbox/farbtastic/farbtastic.cssrelstylesheettypetext/css!--ENDSETTINGSBOX--titleiCOOK/title/headbody!--启动设置框--divclasscustomPanel customPanelCloseddivclasscustomPanelOptionsh1设置/h1个性背景br/div styleclear:both;/divdivclasscustomPanelOptionsDefault默认/divdiv styleclear:both;/divdiv styleheight: 10px/div颜色:br/div styleclear:both;/divdivclasscustomPanelOptionsColor bodycolor01/divdivclasscustomPanelOptionsColor bodycolor02/divdivclasscustomPanelOptionsColor bodycolor03/divdivclasscustomPanelOptionsColor bodycolor04/divdivclasscustomPanelOptionsColor bodycolor06/divdivclasscustomPanelOptionsColor bodycolor07/divdivclasscustomPanelOptionsColor bodycolor08/divdivclasscustomPanelOptionsColor bodycolor09/divdivclasscustomPanelOptionsColor bodycolor10/divdivclasscustomPanelOptionsPickerButton customPanelOptionsPickerButtonBackground/divdiv styleclear:both;/div纹理:br/div styleclear:both;/divdivclasscustomPanelOptionsTexture bodytexture01 bodytexturePreview/divdivclasscustomPanelOptionsTexture bodytexture02 bodytexturePreview/divdivclasscustomPanelOptionsTexture bodytexture03 bodytexturePreview/divdivclasscustomPanelOptionsTexture bodytexture04 bodytexturePreview/divdivclasscustomPanelOptionsTexture bodytexture05 bodytexturePreview/divdivclasscustomPanelOptionsTexture bodytexture06 bodytexturePreview/divdivclasscustomPanelOptionsTexture bodytexture07 bodytexturePreview/divdivclasscustomPanelOptionsTexture bodytexture08 bodytexturePreview/divdivclasscustomPanelOptionsTexture bodytexture09 bodytexturePreview/divdivclasscustomPanelOptionsTexture bodytexture10 bodytexturePreview/divdiv styleclear:both;/div/divdivclasscustomPanelOptionsPicker customPanelOptionsPickerBackground/divdivclasscustomPanelOptionsPicker customPanelOptionsPickerSite/divdivclasscustomPanelButton/div/div!--ENDSETTINGSBOX--!--STARTCONTENT--div idboxdivclasscontainer!--导航栏头部--divclasscolumns onediv idheaderdiv idlogoa hrefindex.htmliCOOK/a/divulclassmenuliaclassactivehrefindex.html首页/a/lilia hrefrecipes.html配方/a/lilia hrefabout.html关于/a/lilia hrefcontact.html联系/a/li/uldivclassnavigationform actionhttp://wp.red-sky.pl/selectclassnavigationmicronamemyDestinationonChangethis.form.window_name.value; obthis.form.myDestination; window.open(ob.options[ob.selectedIndex].value,Window_Namethis.form.window_name.value,toolbar1,location1,directories1,status1,menubar1,scrollbars1,resizable1,width400,height300)option value#-首页-/optionoption valueindex.html首页/optionoption valuerecipes.html配方/optionoption valueabout.html关于/optionoption valuecontact.html联系/option/selectinput namewindow_namestyledisplay:none;typehiddenvalue1/formdivclassclear/div/divdivclassclear/div/div/div!--ENDHEADER--!--STARTHINTS--divclasshint columns one你的食谱是在一次点击.选择你最喜欢的食谱和烹饪icook.与icook享受的味道./div!--ENDHINTS--!--STARTLEFTCONTENT--divclasscolumns two-thirdsdivclasssingle_postdivclasscontacth2给我写封信/h2form idcontactFormdivclassleftp姓名/pinputclassleftlinenamenametypetext/divdivclassrightp邮箱/pinputclassrightlinenameemailtypetext/divdivclasscenterp内容/ptextareaclasscenterlinenamemessagecols10rows10/textarea/divinput namesendclassbuttontypesubmitvalue是的我肯定/formdiv idcontactResult/div/divdivclassclear/div/div/div!--ENDLEFTCONTENT--!--STARTRIGHTSIDEBAR--divclasscolumns one-third_last sidebarinputclasssearchlinenamesearchvalue你在寻找什么?onblurif(this.value) this.value你在寻找什么?onfocusif(this.value 你在寻找什么? ) this.valuedivclasstitle流行/divdivclassimageimg srcimages/cook/carpaccio_with_nuts.jpgaltblogimg//divh4a hrefsingle_post.html生坚果/a/h4divclassimageimg srcimages/cook/strawberry_with_cream.jpgaltblogimg//divh4a hrefsingle_post.html奶油草莓/a/h4divclassimageimg srcimages/cook/cookies_with_strawberry.jpgaltblogimg//divh4a hrefsingle_post.html草莓饼干/a/h4divclassimageimg srcimages/cook/noodles_with_pork_and_shrimps.jpgaltblogimg//divh4a hrefsingle_post.html猪肉虾面/a/h4divclassimageimg srcimages/cook/barbecue_with_vegetables_and_shrimps.jpgaltblogimg//divh4a hrefsingle_post.html蔬菜虾烧烤/a/h4divclasstitle分享/divdivclasssociala href#img srcimages/mini_facebook.pngaltfacebook//aa href#img srcimages/mini_twitter.pngalttwitter//aa href#img srcimages/mini_rss.pngaltrss//aa href#img srcimages/mini_google%2b.pngaltgoogle//a/div/div!--ENDRIGHTSIDEBAR--divclassclear/div!--STARTFOOTER--div idfooterpcopy;Copyrightcopy;2013.Company name All rights reserved./ppa hrefabout.html关于/a-a hrefrecipes.html配方/a-a hrefcontact.html联系/a/p/div!--ENDFOOTER--/div/div!--ENDCONTENT--div styledisplay:nonescript srchttp://v7.cnzz.com/stat.php?id155540web_id155540languageJavaScriptcharsetgb2312/script/div/body/html六、️ 如何学习进步看书、看博客、学课程或者看视频等模仿着书上或者博客的代码进行复现复现不重要思考才是关键思考学习别人思路后脱离书本和博客完全自己实现功能自己实现一些 DEMO看别人项目代码与别人讨论提升代码能力在别人的框架和要求下写代码实现业务自己负责别人设计的模块的实现独立设计业务模块并开发实现负责大项目框架设计和拆分带领别人进行开发其他高阶的架构和管理工作已经不仅仅是代码能力了七、☠️ 更多干货 关注我 学习更多知识~ 支持我请 点赞 好评 收藏 三连带来更多文章~ 有需要完整源码的同学可以留言、后台私信我说明要什么主题模板~ 更多主题网页设计模板
HTMLCSSJS【美食网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计 文章目录一、 网站题目二、 网站描述三、 网站介绍四、 网站效果五、️ 网站代码六、️ 如何学习进步七、☠️ 更多干货 文章目录一、 网站题目 美食网站食谱响应式 含JQ 6页二、 网站描述 总结了一些学生网页制作的经验一般的网页需要融入以下知识点divcss布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点网页的风格主题也很全面如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题学生、新手可参考下方页面的布局和设计和HTML源码有用点赞(๑•̀ㅂ•́)و✧ 一套A的网页应该包含 (具体可根据个人要求而定)页面分为页头、菜单导航栏最好可下拉、中间内容板块、页脚四大部分。所有页面相互超链接可到三级页面有5-10个页面组成。页面样式风格统一布局显示正常不错乱使用DivCss技术。菜单美观、醒目二级菜单可正常弹出与跳转。要有JS特效如定时切换和手动切换图片轮播。页面中有多媒体元素如gif、视频、音乐表单技术的使用。页面清爽、美观、大方不雷同。不仅要能够把用户要求的内容呈现出来还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。三、 网站介绍网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面计划采用最新的网页编程语言HTML5CSS3JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器已达到打开后就能即时看到网站的效果。网站素材方面计划收集各大平台好看的图片素材并精挑细选适合网页风格的图片然后使用PS做出适合网页尺寸的图片。网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件网页编辑方面网页作品代码简单可使用任意HTML编辑软件如Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作。其中1 html文件包含其中index.html是首页、其他html为二级页面2 css文件包含css全部页面样式,文字滚动, 图片放大等3 js文件包含js实现动态轮播特效, 表单提交, 点击事件等等。四、 网站效果五、️ 网站代码!DOCTYPEHTML!--[ifltIE7]htmlclassie ie6langen![endif]--!--[ifIE7]htmlclassie ie7langen![endif]--!--[ifIE8]htmlclassie ie8langen![endif]--!--[if(gteIE9)|!(IE)]!--html langen!--![endif]--headmeta http-equivContent-Typecontenttext/html; charsetutf-8/link hrefhttp://fonts.googleapis.com/css?familyOswald:400,700,300|Bitter:400,700,400italicrelstylesheettypetext/cssscript typetext/javascriptsrcjavascript/jquery-latest.js/scriptscript typetext/javascriptsrcjavascript/red-sky-options.js/script!--Mobile Specific Metas--meta nameviewportcontentwidthdevice-width, initial-scale1, maximum-scale1!--CSS--!--[ifltIE9]script srchttp://html5shim.googlecode.com/svn/trunk/html5.js/script![endif]--link hrefcss/style.cssrelstylesheettypetext/csslink hrefcss/responsive.cssrelstylesheettypetext/css!--STARTSETTINGSBOX--script typetext/javascriptsrcsettingsbox/farbtastic/farbtastic.js/scriptscript typetext/javascriptsrcsettingsbox/settingsbox.js/scriptlink hrefsettingsbox/settingsbox.cssrelstylesheettypetext/csslink hrefsettingsbox/farbtastic/farbtastic.cssrelstylesheettypetext/css!--ENDSETTINGSBOX--titleiCOOK/title/headbody!--启动设置框--divclasscustomPanel customPanelCloseddivclasscustomPanelOptionsh1设置/h1个性背景br/div styleclear:both;/divdivclasscustomPanelOptionsDefault默认/divdiv styleclear:both;/divdiv styleheight: 10px/div颜色:br/div styleclear:both;/divdivclasscustomPanelOptionsColor bodycolor01/divdivclasscustomPanelOptionsColor bodycolor02/divdivclasscustomPanelOptionsColor bodycolor03/divdivclasscustomPanelOptionsColor bodycolor04/divdivclasscustomPanelOptionsColor bodycolor06/divdivclasscustomPanelOptionsColor bodycolor07/divdivclasscustomPanelOptionsColor bodycolor08/divdivclasscustomPanelOptionsColor bodycolor09/divdivclasscustomPanelOptionsColor bodycolor10/divdivclasscustomPanelOptionsPickerButton customPanelOptionsPickerButtonBackground/divdiv styleclear:both;/div纹理:br/div styleclear:both;/divdivclasscustomPanelOptionsTexture bodytexture01 bodytexturePreview/divdivclasscustomPanelOptionsTexture bodytexture02 bodytexturePreview/divdivclasscustomPanelOptionsTexture bodytexture03 bodytexturePreview/divdivclasscustomPanelOptionsTexture bodytexture04 bodytexturePreview/divdivclasscustomPanelOptionsTexture bodytexture05 bodytexturePreview/divdivclasscustomPanelOptionsTexture bodytexture06 bodytexturePreview/divdivclasscustomPanelOptionsTexture bodytexture07 bodytexturePreview/divdivclasscustomPanelOptionsTexture bodytexture08 bodytexturePreview/divdivclasscustomPanelOptionsTexture bodytexture09 bodytexturePreview/divdivclasscustomPanelOptionsTexture bodytexture10 bodytexturePreview/divdiv styleclear:both;/div/divdivclasscustomPanelOptionsPicker customPanelOptionsPickerBackground/divdivclasscustomPanelOptionsPicker customPanelOptionsPickerSite/divdivclasscustomPanelButton/div/div!--ENDSETTINGSBOX--!--STARTCONTENT--div idboxdivclasscontainer!--导航栏头部--divclasscolumns onediv idheaderdiv idlogoa hrefindex.htmliCOOK/a/divulclassmenuliaclassactivehrefindex.html首页/a/lilia hrefrecipes.html配方/a/lilia hrefabout.html关于/a/lilia hrefcontact.html联系/a/li/uldivclassnavigationform actionhttp://wp.red-sky.pl/selectclassnavigationmicronamemyDestinationonChangethis.form.window_name.value; obthis.form.myDestination; window.open(ob.options[ob.selectedIndex].value,Window_Namethis.form.window_name.value,toolbar1,location1,directories1,status1,menubar1,scrollbars1,resizable1,width400,height300)option value#-首页-/optionoption valueindex.html首页/optionoption valuerecipes.html配方/optionoption valueabout.html关于/optionoption valuecontact.html联系/option/selectinput namewindow_namestyledisplay:none;typehiddenvalue1/formdivclassclear/div/divdivclassclear/div/div/div!--ENDHEADER--!--STARTHINTS--divclasshint columns one你的食谱是在一次点击.选择你最喜欢的食谱和烹饪icook.与icook享受的味道./div!--ENDHINTS--!--STARTLEFTCONTENT--divclasscolumns two-thirdsdivclasssingle_postdivclasscontacth2给我写封信/h2form idcontactFormdivclassleftp姓名/pinputclassleftlinenamenametypetext/divdivclassrightp邮箱/pinputclassrightlinenameemailtypetext/divdivclasscenterp内容/ptextareaclasscenterlinenamemessagecols10rows10/textarea/divinput namesendclassbuttontypesubmitvalue是的我肯定/formdiv idcontactResult/div/divdivclassclear/div/div/div!--ENDLEFTCONTENT--!--STARTRIGHTSIDEBAR--divclasscolumns one-third_last sidebarinputclasssearchlinenamesearchvalue你在寻找什么?onblurif(this.value) this.value你在寻找什么?onfocusif(this.value 你在寻找什么? ) this.valuedivclasstitle流行/divdivclassimageimg srcimages/cook/carpaccio_with_nuts.jpgaltblogimg//divh4a hrefsingle_post.html生坚果/a/h4divclassimageimg srcimages/cook/strawberry_with_cream.jpgaltblogimg//divh4a hrefsingle_post.html奶油草莓/a/h4divclassimageimg srcimages/cook/cookies_with_strawberry.jpgaltblogimg//divh4a hrefsingle_post.html草莓饼干/a/h4divclassimageimg srcimages/cook/noodles_with_pork_and_shrimps.jpgaltblogimg//divh4a hrefsingle_post.html猪肉虾面/a/h4divclassimageimg srcimages/cook/barbecue_with_vegetables_and_shrimps.jpgaltblogimg//divh4a hrefsingle_post.html蔬菜虾烧烤/a/h4divclasstitle分享/divdivclasssociala href#img srcimages/mini_facebook.pngaltfacebook//aa href#img srcimages/mini_twitter.pngalttwitter//aa href#img srcimages/mini_rss.pngaltrss//aa href#img srcimages/mini_google%2b.pngaltgoogle//a/div/div!--ENDRIGHTSIDEBAR--divclassclear/div!--STARTFOOTER--div idfooterpcopy;Copyrightcopy;2013.Company name All rights reserved./ppa hrefabout.html关于/a-a hrefrecipes.html配方/a-a hrefcontact.html联系/a/p/div!--ENDFOOTER--/div/div!--ENDCONTENT--div styledisplay:nonescript srchttp://v7.cnzz.com/stat.php?id155540web_id155540languageJavaScriptcharsetgb2312/script/div/body/html六、️ 如何学习进步看书、看博客、学课程或者看视频等模仿着书上或者博客的代码进行复现复现不重要思考才是关键思考学习别人思路后脱离书本和博客完全自己实现功能自己实现一些 DEMO看别人项目代码与别人讨论提升代码能力在别人的框架和要求下写代码实现业务自己负责别人设计的模块的实现独立设计业务模块并开发实现负责大项目框架设计和拆分带领别人进行开发其他高阶的架构和管理工作已经不仅仅是代码能力了七、☠️ 更多干货 关注我 学习更多知识~ 支持我请 点赞 好评 收藏 三连带来更多文章~ 有需要完整源码的同学可以留言、后台私信我说明要什么主题模板~ 更多主题网页设计模板
