从零开始做网站|学习笔记

简介: 快速学习从零开始做网站。

开发者学堂课程【网站架构师 CUED 训课程:从零开始做网站】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/548/detail/7554


从零开始做网站

 

网站分析:

图片1.png

这是一个已经做好的网站

网页有导航、banner、LOGO、登录框、公司介绍、新闻(列表直接引用)、产品展示、文字及图表

 图片2.png

关于我们:由文字和图片构成

 图片3.png

新闻:比较特殊,有三个不同的块,用三个标签做成

图片4.png

案例展示:有两块内容,产品分类;分类结果

 图片5.png

联系我们:地图可以用地图控件完成

以上就是对一个网站的最初步的认识

接下来我们就一起做网页的页头页尾

 

网站制作:

页头:banner、LOGO、导航、注册按钮

Banner:可以使用全屏幻灯控件来制作,直接选择幻灯秀,然后调试对齐。

 图片6.png

透明的底边:

直接用图片的控件把透明的底边加上,同时设置整体的宽度和高度(高度可以通过截屏测量)。

 图片7.png

LOGO:同样可以用图片控件完成,找到图片,调整大小。

图片8.png 

注册控件:在互动社交里面找到登陆注册的按钮,调节整体样式。

导航:

直接按照网页格式新建若干页面(同时引用页头及页尾),找到导航的控件,调试导航字体、颜色、样式

 图片9.png

页尾:版权信息、地址编号、技术支持

底边和文字信息:可以直接用容器控件做(备案号要加一个链接可以直接链接到工信部的网址)

LOGO 共有七个页面,直接新建页面(同时应用页头与页尾)

首页:先选择模板

公司介绍:

直接用文字控件,调节字体和字号,调节居中。网站原型还有两条线,直接用线条,调整位置及长度;查看更多的按钮:用图片的形式做

公司新闻:

直接赋值公司介绍的格式,新闻列表:直接用列表做,将列表的样式添加进来

 图片10.png

案例展示:

具体案例可以使用图片,两边的粗线条直接用线条工具添加并调整位置及大小。用文章及列表完成,在网站后台直接添加信息。

关于我们:下面是公司的介绍,依旧使用文字控件及线条

轮播的图集:直接用图集完成,选择相应的图集

 图片11.png

新闻动态:

是一个标签,从容器中找到标签的控件,3个标签分别是:公司动态;新闻动态;活动新闻。还可以对标签的颜色及悬停进行编辑。每个标签下都有文章,可以直接用列表控件拉取,每个标签下都应该有列表。

 图片12.png


案例展示:是一个分类的控件,直接找到分类的控件并添加整体数据

图片13.png

联系我们:有一个地图,互动社交中有谷歌地图和高德地图,根据需要选择需要的地图控件,并对地点进行描述。其余文字信息可以直接复制。

留言板:

比较简单,完整的留言板控件在互动社交中,可以直接使用留言控件或评论信息进行选择。

 图片14.png

视频展示:

用简单的视频控件可以直接使用(可以支持腾讯、优酷、爱奇艺)

这些就是网站设计的部分,从零开始制作出一个网页的形态。

相关文章
|
5月前
|
存储 缓存 网络协议
网络编程初学者必备:从零开始的详细教程与资源汇总
网络编程初学者必备:从零开始的详细教程与资源汇总
|
4月前
|
前端开发 JavaScript NoSQL
打造个人博客:从零到一的全栈开发之旅
【8月更文挑战第31天】 想象一下,一个完全由你掌控的空间——你的个人博客。在这里,文字是你的画笔,代码是你的声音。本文将带你走进全栈开发的世界,一步步构建起你自己的网络空间。无论你是编程新手还是想扩展技能边界的老手,这篇文章都将为你提供一条清晰的路径。我们将从基础的工具选择开始,逐步深入到前端和后端的开发,最终完成一个功能完备的个人博客。让我们一起探索代码的魅力,实现从无到有的创造旅程。
|
5月前
|
JSON JavaScript 前端开发
|
6月前
|
算法 Java 开发工具
合集:编程相关的网站及书籍
合集:编程相关的网站及书籍
|
6月前
|
存储 JSON NoSQL
技术笔记:Stargate入门
技术笔记:Stargate入门
68 0
|
7月前
|
存储 UED
从零开始构建个人网站:初学者指南
【5月更文挑战第9天】本文是初学者构建个人网站的指南,包括明确目标、选择域名和主机、挑选网站建设工具(如WordPress、Wix、Squarespace)、设计网站结构和布局、创建内容、优化测试以及推广维护。按照这些步骤,新手也能轻松建立自己的个人网站。记得在过程中不断学习和改进,祝你建站成功!
|
JavaScript 安全 前端开发
从零开始搭建个人网站博客
从零开始搭建个人网站博客
156 5
|
移动开发 开发框架 前端开发
进阶攻略|前端最全的框架总结
进阶攻略|前端最全的框架总结
66 1
|
存储 运维 算法
嵌入式进阶从小白到大神学习全攻略(学习路线+课程+学习书籍+练习项目)
嵌入式进阶从小白到大神学习全攻略(学习路线+课程+学习书籍+练习项目)
|
移动开发 前端开发 Linux
进阶攻略|前端完整的学习路线
进阶攻略|前端完整的学习路线
229 0